From 03f7e583f6bc83db415f02afd30787625d4cccf6 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 3 Apr 2023 11:12:14 +0800
Subject: [PATCH] fix: publish time of the post cannot be displayed back
 (#3671)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area console
/milestone 2.5.x
/cherry-pick release-2.4

#### What this PR does / why we need it:

修复文章设置中的发布时间无法回显导致重新保存时丢失发布时间的问题。

#### Which issue(s) this PR fixes:

Fixes #3669

#### Special notes for your reviewer:

测试方式：

1. 新建或者修改已有文章的设置。
2. 检查时间输入框的时间是否显示正确。
3. 检查保存之后时间是否显示正确。

#### Does this PR introduce a user-facing change?

```release-note
修复 Console 端文章设置中的发布时间无法回显导致重新保存时丢失发布时间的问题。
```
---
 .../contents/pages/SinglePageEditor.vue       |  2 +-
 .../components/SinglePageSettingModal.vue     | 23 ++++++++-----------
 .../src/modules/contents/posts/PostEditor.vue |  2 +-
 .../posts/components/PostSettingModal.vue     | 23 ++++++++-----------
 4 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/console/src/modules/contents/pages/SinglePageEditor.vue b/console/src/modules/contents/pages/SinglePageEditor.vue
index 9e45af6b7..87038abf7 100644
--- a/console/src/modules/contents/pages/SinglePageEditor.vue
+++ b/console/src/modules/contents/pages/SinglePageEditor.vue
@@ -62,7 +62,7 @@ const initialFormState: SinglePageRequest = {
       cover: "",
       deleted: false,
       publish: false,
-      publishTime: "",
+      publishTime: undefined,
       pinned: false,
       allowComment: true,
       visible: "PUBLIC",
diff --git a/console/src/modules/contents/pages/components/SinglePageSettingModal.vue b/console/src/modules/contents/pages/components/SinglePageSettingModal.vue
index 0de54df3e..ba37b49e5 100644
--- a/console/src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/console/src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -28,7 +28,7 @@ const initialFormState: SinglePage = {
     cover: "",
     deleted: false,
     publish: false,
-    publishTime: "",
+    publishTime: undefined,
     pinned: false,
     allowComment: true,
     visible: "PUBLIC",
@@ -286,18 +286,16 @@ watchEffect(() => {
 const { templates } = useThemeCustomTemplates("page");
 
 // publishTime
-const publishTime = computed(() => {
-  const { publishTime } = formState.value.spec;
-  if (publishTime) {
-    return toDatetimeLocal(publishTime);
-  }
-  return "";
+const publishTime = computed({
+  get() {
+    const { publishTime } = formState.value.spec;
+    return publishTime ? toDatetimeLocal(publishTime) : undefined;
+  },
+  set(value) {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  },
 });
 
-const onPublishTimeChange = (value: string) => {
-  formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-};
-
 // slug
 const { handleGenerateSlug } = useSlugify(
   computed(() => formState.value.spec.title),
@@ -443,11 +441,10 @@ const { handleGenerateSlug } = useSlugify(
               type="select"
             ></FormKit>
             <FormKit
-              :model-value="publishTime"
+              v-model="publishTime"
               :label="$t('core.page.settings.fields.publish_time.label')"
               type="datetime-local"
               name="publishTime"
-              @input="onPublishTimeChange"
             ></FormKit>
             <FormKit
               v-model="formState.spec.template"
diff --git a/console/src/modules/contents/posts/PostEditor.vue b/console/src/modules/contents/posts/PostEditor.vue
index ec9a2b13a..df73fd1ca 100644
--- a/console/src/modules/contents/posts/PostEditor.vue
+++ b/console/src/modules/contents/posts/PostEditor.vue
@@ -62,7 +62,7 @@ const initialFormState: PostRequest = {
       cover: "",
       deleted: false,
       publish: false,
-      publishTime: "",
+      publishTime: undefined,
       pinned: false,
       allowComment: true,
       visible: "PUBLIC",
diff --git a/console/src/modules/contents/posts/components/PostSettingModal.vue b/console/src/modules/contents/posts/components/PostSettingModal.vue
index 07ef8aab3..11fa95af7 100644
--- a/console/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/console/src/modules/contents/posts/components/PostSettingModal.vue
@@ -28,7 +28,7 @@ const initialFormState: Post = {
     cover: "",
     deleted: false,
     publish: false,
-    publishTime: "",
+    publishTime: undefined,
     pinned: false,
     allowComment: true,
     visible: "PUBLIC",
@@ -247,18 +247,16 @@ watchEffect(() => {
 const { templates } = useThemeCustomTemplates("post");
 
 // publishTime convert
-const publishTime = computed(() => {
-  const { publishTime } = formState.value.spec;
-  if (publishTime) {
-    return toDatetimeLocal(publishTime);
-  }
-  return "";
+const publishTime = computed({
+  get() {
+    const { publishTime } = formState.value.spec;
+    return publishTime ? toDatetimeLocal(publishTime) : undefined;
+  },
+  set(value) {
+    formState.value.spec.publishTime = value ? toISOString(value) : undefined;
+  },
 });
 
-const onPublishTimeChange = (value: string) => {
-  formState.value.spec.publishTime = value ? toISOString(value) : undefined;
-};
-
 const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
 
 // slug
@@ -418,10 +416,9 @@ const { handleGenerateSlug } = useSlugify(
               type="select"
             ></FormKit>
             <FormKit
-              :model-value="publishTime"
+              v-model="publishTime"
               :label="$t('core.post.settings.fields.publish_time.label')"
               type="datetime-local"
-              @input="onPublishTimeChange"
             ></FormKit>
             <FormKit
               v-model="formState.spec.template"