refactor: sheet editing (#440)

* refactor: sheet editing

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/views/sheet/SheetEdit.vue

@@ -1,18 +1,12 @@
 <template>
-  <page-view :title="sheetToStage.title ? sheetToStage.title : '新页面'" affix>
+  <page-view
+    :sub-title="sheetToStage.inProgress ? '当前内容已保存，但还未发布。' : ''"
+    :title="sheetToStage.title ? sheetToStage.title : '新页面'"
+    affix
+  >
     <template slot="extra">
       <a-space>
-        <ReactiveButton
+        <a-button :loading="previewSaving" @click="handlePreviewClick">预览</a-button>
-          :errored="draftSaveErrored"
-          :loading="draftSaving"
-          erroredText="保存失败"
-          loadedText="保存成功"
-          text="保存草稿"
-          type="danger"
-          @callback="draftSaveErrored = false"
-          @click="handleSaveDraft(false)"
-        ></ReactiveButton>
-        <a-button :loading="previewSaving" @click="handlePreview">预览</a-button>
         <a-button type="primary" @click="sheetSettingVisible = true">发布</a-button>
       </a-space>
     </template>
@@ -26,7 +20,7 @@
           <MarkdownEditor
             :originalContent="sheetToStage.originalContent"
             @onContentChange="onContentChange"
-            @onSaveDraft="handleSaveDraft(true)"
+            @onSaveDraft="handleSaveDraft()"
           />
         </div>
       </a-col>
@@ -42,12 +36,16 @@
 </template>
 
 <script>
-import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
+// components
-import { datetimeFormat } from '@/utils/datetime'
 import { PageView } from '@/layouts'
 import SheetSettingModal from './components/SheetSettingModal'
 import MarkdownEditor from '@/components/Editor/MarkdownEditor'
+
+// libs
+import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
+import { datetimeFormat } from '@/utils/datetime'
 import apiClient from '@/utils/api-client'
+import debounce from 'lodash.debounce'
 
 export default {
   components: {
@@ -61,8 +59,6 @@ export default {
       sheetSettingVisible: false,
       sheetToStage: {},
       contentChanges: 0,
-      draftSaving: false,
-      draftSaveErrored: false,
       previewSaving: false
     }
   },
@@ -70,11 +66,10 @@ export default {
     // Get sheetId id from query
     const sheetId = to.query.sheetId
 
-    next(vm => {
+    next(async vm => {
       if (sheetId) {
-        apiClient.sheet.get(sheetId).then(response => {
+        const { data } = await apiClient.sheet.get(Number(sheetId))
-          vm.sheetToStage = response.data
+        vm.sheetToStage = data
-        })
       }
     })
   },
@@ -109,100 +104,74 @@ export default {
     }
   },
   methods: {
-    handleSaveDraft(draftOnly = false) {
+    handleSaveDraft: debounce(async function () {
-      this.$log.debug('Draft only: ' + draftOnly)
-      this.sheetToStage.status = 'DRAFT'
-      if (!this.sheetToStage.title) {
-        this.sheetToStage.title = datetimeFormat(new Date(), 'YYYY-MM-DD-HH-mm-ss')
-      }
-      this.draftSaving = true
       if (this.sheetToStage.id) {
-        if (draftOnly) {
+        try {
-          apiClient.sheet
+          const { data } = await apiClient.sheet.updateDraftById(
-            .updateDraftById(this.sheetToStage.id, this.sheetToStage.originalContent)
+            this.sheetToStage.id,
-            .then(() => {
+            this.sheetToStage.originalContent
-              this.handleRestoreSavedStatus()
+          )
-            })
+          this.sheetToStage.inProgress = data.inProgress
-            .catch(() => {
+          this.handleRestoreSavedStatus()
-              this.draftSaveErrored = true
+          this.$message.success({
-            })
+            content: '内容已保存',
-            .finally(() => {
+            duration: 0.5
-              setTimeout(() => {
+          })
-                this.draftSaving = false
+        } catch (e) {
-              }, 400)
+          this.$log.error('Failed to update sheet content', e)
-            })
-        } else {
-          apiClient.sheet
-            .update(this.sheetToStage.id, this.sheetToStage)
-            .then(response => {
-              this.sheetToStage = response.data
-              this.handleRestoreSavedStatus()
-            })
-            .catch(() => {
-              this.draftSaveErrored = true
-            })
-            .finally(() => {
-              setTimeout(() => {
-                this.draftSaving = false
-              }, 400)
-            })
         }
       } else {
-        apiClient.sheet
+        await this.handleCreateSheet()
-          .create(this.sheetToStage)
-          .then(response => {
-            this.sheetToStage = response.data
-            this.handleRestoreSavedStatus()
-          })
-          .catch(() => {
-            this.draftSaveErrored = true
-          })
-          .finally(() => {
-            setTimeout(() => {
-              this.draftSaving = false
-            }, 400)
-          })
       }
-    },
+    }, 300),
-    handlePreview() {
+
-      this.sheetToStage.status = 'DRAFT'
+    async handleCreateSheet() {
       if (!this.sheetToStage.title) {
         this.sheetToStage.title = datetimeFormat(new Date(), 'YYYY-MM-DD-HH-mm-ss')
       }
+      try {
+        const { data } = await apiClient.sheet.create(this.sheetToStage)
+        this.sheetToStage = data
+        this.handleRestoreSavedStatus()
+
+        // add params to url
+        const path = this.$router.history.current.path
+        this.$router.replace({ path, query: { sheetId: this.sheetToStage.id } }).catch(err => err)
+        this.$message.success({
+          content: '页面已创建',
+          duration: 0.5
+        })
+      } catch (e) {
+        this.$log.error('Failed to create sheet', e)
+      }
+    },
+
+    async handlePreviewClick() {
       this.previewSaving = true
       if (this.sheetToStage.id) {
-        apiClient.sheet.update(this.sheetToStage.id, this.sheetToStage).then(response => {
+        // Update the sheet content
-          this.$log.debug('Updated sheet', response.data)
+        const { data } = await apiClient.sheet.updateDraftById(this.sheetToStage.id, this.sheetToStage.originalContent)
-          apiClient.sheet
+        this.sheetToStage.inProgress = data.inProgress
-            .getPreviewLinkById(this.sheetToStage.id)
-            .then(response => {
-              window.open(response, '_blank')
-              this.handleRestoreSavedStatus()
-            })
-            .finally(() => {
-              setTimeout(() => {
-                this.previewSaving = false
-              }, 400)
-            })
-        })
       } else {
-        apiClient.sheet.create(this.sheetToStage).then(response => {
+        await this.handleCreateSheet()
-          this.$log.debug('Created sheet', response.data)
+      }
-          this.sheetToStage = response.data
+      await this.handleOpenPreview()
-          apiClient.sheet
+    },
-            .getPreviewLinkById(this.sheetToStage.id)
+
-            .then(response => {
+    async handleOpenPreview() {
-              window.open(response, '_blank')
+      try {
-              this.handleRestoreSavedStatus()
+        const response = await apiClient.sheet.getPreviewLinkById(this.sheetToStage.id)
-            })
+        window.open(response, '_blank')
-            .finally(() => {
+        this.handleRestoreSavedStatus()
-              setTimeout(() => {
+      } catch (e) {
-                this.previewSaving = false
+        this.$log.error('Failed to get preview link', e)
-              }, 400)
+      } finally {
-            })
+        setTimeout(() => {
-        })
+          this.previewSaving = false
+        }, 400)
       }
     },
+
     handleRestoreSavedStatus() {
       this.contentChanges = 0
     },

src/views/sheet/components/CustomSheetList.vue

@@ -107,6 +107,15 @@
       :scrollToFirstRowOnChange="true"
     >
       <template #sheetTitle="text, record">
+        <a-tooltip v-if="record.inProgress" title="当前有内容已保存，但还未发布。" placement="top">
+          <a-icon
+            class="cursor-pointer"
+            style="margin-right: 3px"
+            theme="twoTone"
+            twoToneColor="#52c41a"
+            type="info-circle"
+          />
+        </a-tooltip>
         <a-tooltip v-if="record.status === 'PUBLISHED'" :title="'点击访问【' + text + '】'" placement="top">
           <a :href="record.fullPath" class="no-underline" target="_blank">
             {{ text }}