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

refactor: logic of post setting modal
pull/5181/head
John Niang 2024-01-11 16:44:48 +08:00 committed by GitHub
commit 962cf99cf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 46 deletions

View File

@ -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 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 modal = ref();
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"
v-model:visible="visible"
ref="modal"
: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>

View File

@ -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 { nextTick, ref } from "vue";
import { 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 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 modal = ref();
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"
v-model:visible="visible"
ref="modal"
: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>