refactor: sheet setting modal (halo-dev/console#381)

src/views/sheet/SheetEdit.vue

@@ -33,14 +33,11 @@
       </a-col>
     </a-row>
 
-    <SheetSettingDrawer
-      :metas="selectedMetas"
-      :sheet="sheetToStage"
-      :visible="sheetSettingVisible"
-      @close="sheetSettingVisible = false"
-      @onRefreshSheet="onRefreshSheetFromSetting"
-      @onRefreshSheetMetas="onRefreshSheetMetasFromSetting"
-      @onSaved="handleRestoreSavedStatus"
+    <SheetSettingModal
+      :post="sheetToStage"
+      :savedCallback="onSheetSavedCallback"
+      :visible.sync="sheetSettingVisible"
+      @onUpdate="onUpdateFromSetting"
     />
 
     <AttachmentDrawer v-model="attachmentDrawerVisible" />
@@ -51,7 +48,7 @@
 import { mixin, mixinDevice, mixinPostEdit } from '@/mixins/mixin.js'
 import { datetimeFormat } from '@/utils/datetime'
 import { PageView } from '@/layouts'
-import SheetSettingDrawer from './components/SheetSettingDrawer'
+import SheetSettingModal from './components/SheetSettingModal'
 import AttachmentDrawer from '../attachment/components/AttachmentDrawer'
 import MarkdownEditor from '@/components/Editor/MarkdownEditor'
 import apiClient from '@/utils/api-client'
@@ -60,7 +57,7 @@ export default {
   components: {
     PageView,
     AttachmentDrawer,
-    SheetSettingDrawer,
+    SheetSettingModal,
     MarkdownEditor
   },
   mixins: [mixin, mixinDevice, mixinPostEdit],
@@ -69,7 +66,6 @@ export default {
       attachmentDrawerVisible: false,
       sheetSettingVisible: false,
       sheetToStage: {},
-      selectedMetas: [],
       contentChanges: 0,
       draftSaving: false,
       draftSaveErrored: false,
@@ -83,9 +79,7 @@ export default {
     next(vm => {
       if (sheetId) {
         apiClient.sheet.get(sheetId).then(response => {
-          const sheet = response.data
-          vm.sheetToStage = sheet
-          vm.selectedMetas = sheet.metas
+          vm.sheetToStage = response.data
         })
       }
     })
@@ -234,11 +228,12 @@ export default {
       this.contentChanges++
       this.sheetToStage.originalContent = val
     },
-    onRefreshSheetFromSetting(sheet) {
-      this.sheetToStage = sheet
+    onSheetSavedCallback() {
+      this.contentChanges = 0
+      this.$router.push({ name: 'SheetList', query: { activeKey: 'custom' } })
     },
-    onRefreshSheetMetasFromSetting(metas) {
-      this.selectedMetas = metas
+    onUpdateFromSetting(sheet) {
+      this.sheetToStage = sheet
     }
   }
 }

src/views/sheet/components/CustomSheetList.vue

@@ -210,17 +210,22 @@
         @showSizeChange="handlePageSizeChange"
       />
     </div>
-    <SheetSettingDrawer
-      :metas="selectedMetas"
-      :needTitle="true"
-      :saveDraftButton="false"
-      :sheet="selectedSheet"
-      :visible="sheetSettingVisible"
-      @close="onSheetSettingsClose"
-      @onRefreshSheet="onRefreshSheetFromSetting"
-      @onRefreshSheetMetas="onRefreshSheetMetasFromSetting"
-    />
-
+    <SheetSettingModal
+      :loading="sheetSettingLoading"
+      :post="selectedSheet"
+      :savedCallback="onSheetSavedCallback"
+      :visible.sync="sheetSettingVisible"
+      @onClose="selectedSheet = {}"
+    >
+      <template #extraFooter>
+        <a-button :disabled="selectPreviousButtonDisabled" @click="handleSelectPrevious">
+          上一篇
+        </a-button>
+        <a-button :disabled="selectNextButtonDisabled" @click="handleSelectNext">
+          下一篇
+        </a-button>
+      </template>
+    </SheetSettingModal>
     <TargetCommentDrawer
       :id="selectedSheet.id"
       :description="selectedSheet.summary"
@@ -233,7 +238,7 @@
 </template>
 <script>
 import { mixin, mixinDevice } from '@/mixins/mixin.js'
-import SheetSettingDrawer from './SheetSettingDrawer'
+import SheetSettingModal from './SheetSettingModal'
 import TargetCommentDrawer from '../../comment/components/TargetCommentDrawer'
 import apiClient from '@/utils/api-client'
 
@@ -294,7 +299,7 @@ export default {
   name: 'CustomSheetList',
   mixins: [mixin, mixinDevice],
   components: {
-    SheetSettingDrawer,
+    SheetSettingModal,
     TargetCommentDrawer
   },
   data() {
@@ -314,8 +319,8 @@ export default {
         }
       },
       selectedSheet: {},
-      selectedMetas: [],
       sheetSettingVisible: false,
+      sheetSettingLoading: false,
       sheetCommentVisible: false
     }
   },
@@ -332,6 +337,14 @@ export default {
         size: this.list.params.size,
         total: this.list.total
       }
+    },
+    selectPreviousButtonDisabled() {
+      const index = this.list.data.findIndex(sheet => sheet.id === this.selectedSheet.id)
+      return index === 0 && !this.list.hasPrevious
+    },
+    selectNextButtonDisabled() {
+      const index = this.list.data.findIndex(sheet => sheet.id === this.selectedSheet.id)
+      return index === this.list.data.length - 1 && !this.list.hasNext
     }
   },
   created() {
@@ -393,7 +406,6 @@ export default {
     handleShowSheetSettings(sheet) {
       apiClient.sheet.get(sheet.id).then(response => {
         this.selectedSheet = response.data
-        this.selectedMetas = this.selectedSheet.metas
         this.sheetSettingVisible = true
       })
     },
@@ -426,26 +438,57 @@ export default {
       this.list.params.size = size
       this.handleListSheets()
     },
-
-    onSheetSettingsClose() {
-      this.sheetSettingVisible = false
-      this.selectedSheet = {}
-      setTimeout(() => {
-        this.handleListSheets(false)
-      }, 500)
-    },
     onSheetCommentsClose() {
       this.sheetCommentVisible = false
       this.selectedSheet = {}
       setTimeout(() => {
         this.handleListSheets(false)
       }, 500)
     },
-    onRefreshSheetFromSetting(sheet) {
-      this.selectedSheet = sheet
+    onSheetSavedCallback() {
+      this.handleListSheets(false)
     },
-    onRefreshSheetMetasFromSetting(metas) {
-      this.selectedMetas = metas
+    /**
+     * Select previous sheet
+     */
+    async handleSelectPrevious() {
+      const index = this.list.data.findIndex(post => post.id === this.selectedSheet.id)
+      if (index > 0) {
+        this.sheetSettingLoading = true
+        const response = await apiClient.sheet.get(this.list.data[index - 1].id)
+        this.selectedSheet = response.data
+        this.sheetSettingLoading = false
+        return
+      }
+      if (index === 0 && this.list.hasPrevious) {
+        this.list.params.page--
+        await this.handleListPosts()
+        this.sheetSettingLoading = true
+        const response = await apiClient.sheet.get(this.list.data[this.list.data.length - 1].id)
+        this.selectedSheet = response.data
+        this.sheetSettingLoading = false
+      }
+    },
+    /**
+     * Select next sheet
+     */
+    async handleSelectNext() {
+      const index = this.list.data.findIndex(post => post.id === this.selectedSheet.id)
+      if (index < this.list.data.length - 1) {
+        this.sheetSettingLoading = true
+        const response = await apiClient.sheet.get(this.list.data[index + 1].id)
+        this.selectedSheet = response.data
+        this.sheetSettingLoading = false
+        return
+      }
+      if (index === this.list.data.length - 1 && this.list.hasNext) {
+        this.list.params.page++
+        await this.handleListPosts()
+        this.sheetSettingLoading = true
+        const response = await apiClient.sheet.get(this.list.data[0].id)
+        this.selectedSheet = response.data
+        this.sheetSettingLoading = false
+      }
     }
   }
 }