Merge pull request #5169 from ruibaby/refactor/post-setting-modal

refactor: logic of post setting modal

console/uc-src/modules/contents/posts/components/PostCreationModal.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
-import { nextTick } from "vue";
-import { onMounted } from "vue";
 import { ref } from "vue";
 import PostSettingForm from "./PostSettingForm.vue";
 import type { Content, Post } from "@halo-dev/api-client";
@@ -30,22 +28,7 @@ const emit = defineEmits<{
   (event: "success", post: Post): void;
 }>();
 
-// fixme: refactor VModal component
+const modal = ref();
-const shouldRender = ref(false);
-const visible = ref(false);
-onMounted(() => {
-  shouldRender.value = true;
-  nextTick(() => {
-    visible.value = true;
-  });
-});
-function onClose() {
-  visible.value = false;
-  setTimeout(() => {
-    shouldRender.value = false;
-    emit("close");
-  }, 200);
-}
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["create-post"],
@@ -100,7 +83,7 @@ const { mutate, isLoading } = useMutation({
     }
 
     emit("success", data);
-    emit("close");
+    modal.value.close();
   },
   onError() {
     if (props.publish) {
@@ -118,12 +101,11 @@ function onSubmit(data: PostFormState) {
 
 <template>
   <VModal
-    v-if="shouldRender"
+    ref="modal"
-    v-model:visible="visible"
     :title="title"
     :width="700"
     centered
-    @close="onClose"
+    @close="emit('close')"
   >
     <PostSettingForm @submit="onSubmit" />
 
@@ -140,7 +122,7 @@ function onSubmit(data: PostFormState) {
               : $t("core.common.buttons.save")
           }}
         </VButton>
-        <VButton type="default" @click="onClose()">
+        <VButton type="default" @click="modal.close()">
           {{ $t("core.common.buttons.close") }}
         </VButton>
       </VSpace>

console/uc-src/modules/contents/posts/components/PostSettingEditModal.vue

@@ -3,8 +3,7 @@ import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import PostSettingForm from "./PostSettingForm.vue";
 import type { PostFormState } from "../types";
 import type { Post } from "@halo-dev/api-client";
-import { onMounted } from "vue";
+import { ref } from "vue";
-import { nextTick, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useMutation } from "@tanstack/vue-query";
 import { apiClient } from "@/utils/api-client";
@@ -24,22 +23,7 @@ const emit = defineEmits<{
   (event: "success", post: Post): void;
 }>();
 
-// fixme: refactor VModal component
+const modal = ref();
-const shouldRender = ref(false);
-const visible = ref(false);
-onMounted(() => {
-  shouldRender.value = true;
-  nextTick(() => {
-    visible.value = true;
-  });
-});
-function onClose() {
-  visible.value = false;
-  setTimeout(() => {
-    shouldRender.value = false;
-    emit("close");
-  }, 200);
-}
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["edit-post"],
@@ -72,7 +56,7 @@ const { mutate, isLoading } = useMutation({
   onSuccess(data) {
     Toast.success(t("core.common.toast.save_success"));
     emit("success", data);
-    emit("close");
+    modal.value.close();
   },
   onError() {
     Toast.error(t("core.common.toast.save_failed_and_retry"));
@@ -86,12 +70,11 @@ function onSubmit(data: PostFormState) {
 
 <template>
   <VModal
-    v-if="shouldRender"
+    ref="modal"
-    v-model:visible="visible"
     :title="$t('core.uc_post.setting_modal.title')"
     :width="700"
     centered
-    @close="onClose"
+    @close="emit('close')"
   >
     <PostSettingForm
       :form-state="{
@@ -122,7 +105,7 @@ function onSubmit(data: PostFormState) {
         >
           {{ $t("core.common.buttons.save") }}
         </VButton>
-        <VButton type="default" @click="onClose()">
+        <VButton type="default" @click="modal.close()">
           {{ $t("core.common.buttons.close") }}
         </VButton>
       </VSpace>