From 4c7e799a0174e061afcaa8bcf4c861278630dc03 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 20 Feb 2022 14:47:58 +0800
Subject: [PATCH] Support to sort post category (#442)

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 20 ++++----
 src/views/post/CategoryList.vue               | 51 ++++++++++++++++++-
 .../post/components/CategoryTreeNode.vue      |  2 +-
 4 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index b60dad77..7ea909e5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@codemirror/basic-setup": "^0.19.1",
     "@codemirror/lang-html": "^0.19.4",
     "@codemirror/lang-java": "^0.19.1",
-    "@halo-dev/admin-api": "^1.0.0-alpha.47",
+    "@halo-dev/admin-api": "^1.0.0-alpha.48",
     "ant-design-vue": "^1.7.8",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 796e3103..56e65b12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,7 @@ specifiers:
   '@codemirror/basic-setup': ^0.19.1
   '@codemirror/lang-html': ^0.19.4
   '@codemirror/lang-java': ^0.19.1
-  '@halo-dev/admin-api': ^1.0.0-alpha.47
+  '@halo-dev/admin-api': ^1.0.0-alpha.48
   '@vue/cli-plugin-babel': ~5.0.0-rc.2
   '@vue/cli-plugin-eslint': ~5.0.0-rc.2
   '@vue/cli-plugin-router': ~5.0.0-rc.2
@@ -50,7 +50,7 @@ dependencies:
   '@codemirror/basic-setup': 0.19.1
   '@codemirror/lang-html': 0.19.4
   '@codemirror/lang-java': 0.19.1
-  '@halo-dev/admin-api': 1.0.0-alpha.47
+  '@halo-dev/admin-api': 1.0.0-alpha.48
   ant-design-vue: 1.7.8_9065e7474e033a8e4b95615fc8e6c36c
   dayjs: 1.10.7
   enquire.js: 2.1.6
@@ -1562,28 +1562,28 @@ packages:
       - supports-color
     dev: true
 
-  /@halo-dev/admin-api/1.0.0-alpha.47:
-    resolution: {integrity: sha512-PEf/t2eDfvjDXTDNXoEP8Naqo5XU6yE5qWBxA7VfxFPp0WdyrLX2pp2VhHNXvTaKa7NyFKX1g79cl3ZW7GuUgA==}
+  /@halo-dev/admin-api/1.0.0-alpha.48:
+    resolution: {integrity: sha512-TmNrskgq8BbiufmA/lSGDK7jJPzReUdsM6hTBRcItxzByLLFH0+1WSdSb4dkAppZV7BA/AfY0ilfDNFpqTOfvQ==}
     engines: {node: '>=12'}
     dependencies:
-      '@halo-dev/rest-api-client': 1.0.0-alpha.47
+      '@halo-dev/rest-api-client': 1.0.0-alpha.48
       tslib: 2.3.1
     transitivePeerDependencies:
       - debug
     dev: false
 
-  /@halo-dev/logger/1.0.0-alpha.47:
-    resolution: {integrity: sha512-LKhm/n3oUqOloIVVtDHwmCXOKvQHF7aFJqoMXmO+LneN6/s6FGDkcyluu7AhV6bQnsT5MoP714gAny5SHWAFlA==}
+  /@halo-dev/logger/1.0.0-alpha.48:
+    resolution: {integrity: sha512-1Gl8YP+XqMrRJlfMVIm9zc/nQMDKIMaOAo4tIpxmJIBpR17h/lc5PPW3NH3vWMN0JNpT4wys2MFL8LQ1H9WZKA==}
     engines: {node: '>=12.0.0'}
     dependencies:
       tslib: 2.3.1
     dev: false
 
-  /@halo-dev/rest-api-client/1.0.0-alpha.47:
-    resolution: {integrity: sha512-uH1CWrd8LS1Tbwzrm3fIFJV+UrvhfyOf1fH1I16OKUJrawgc2ldiz5zYrlATTsZheSAYu6mNiF7XCLcniUiNvA==}
+  /@halo-dev/rest-api-client/1.0.0-alpha.48:
+    resolution: {integrity: sha512-HFKQOfV5I9L72SENanUQ4wQFlF2ZJFgpr0czZ2nHqcrgMSVa4GSNK7dKGCbU819NPZcKyfGXcD5sa9htqwQ9Cg==}
     engines: {node: '>=12'}
     dependencies:
-      '@halo-dev/logger': 1.0.0-alpha.47
+      '@halo-dev/logger': 1.0.0-alpha.48
       axios: 0.24.0
       form-data: 4.0.0
       js-base64: 3.7.2
diff --git a/src/views/post/CategoryList.vue b/src/views/post/CategoryList.vue
index 70237756..9760b3a2 100644
--- a/src/views/post/CategoryList.vue
+++ b/src/views/post/CategoryList.vue
@@ -2,10 +2,10 @@
   <page-view>
     <a-row :gutter="12">
       <a-col :lg="8" :md="8" :sm="24" :xl="8" :xs="24" class="pb-3">
-        <a-card :bodyStyle="{ padding: '16px' }" :title="title">
+        <a-card :bodyStyle="{ padding: '16px' }" :head-style="{ padding: '8px 16px!important' }" :title="title">
           <a-form-model ref="categoryForm" :model="form.model" :rules="form.rules" layout="horizontal">
             <a-form-model-item help="* 页面上所显示的名称" label="名称：" prop="name">
-              <a-input v-model="form.model.name" />
+              <a-input ref="nameInput" v-model="form.model.name" />
             </a-form-model-item>
             <a-form-model-item help="* 一般为单个分类页面的标识，最好为英文" label="别名：" prop="slug">
               <a-input v-model="form.model.slug" />
@@ -53,6 +53,18 @@
       </a-col>
       <a-col :lg="16" :md="16" :sm="24" :xl="16" :xs="24" class="pb-3">
         <a-card :bodyStyle="{ padding: '16px' }" title="分类列表">
+          <template #extra>
+            <ReactiveButton
+              :disabled="list.data.length <= 0"
+              :errored="formBatch.errored"
+              :loading="formBatch.saving"
+              erroredText="保存失败"
+              loadedText="保存成功"
+              text="保存"
+              @callback="formBatch.errored = false"
+              @click="handleUpdateBatch"
+            ></ReactiveButton>
+          </template>
           <a-spin :spinning="list.loading">
             <CategoryTreeNode
               v-model="list.treeData"
@@ -100,6 +112,10 @@ export default {
           thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change'] }],
           description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change'] }]
         }
+      },
+      formBatch: {
+        saving: false,
+        errored: false
       }
     }
   },
@@ -161,6 +177,8 @@ export default {
       try {
         const { data } = await apiClient.category.get(category.id)
         this.form.model = data
+
+        this.$refs.nameInput.focus()
       } catch (e) {
         this.$log.error('Failed to get category', e)
       }
@@ -170,6 +188,7 @@ export default {
       this.form.model = {
         parentId: category.id
       }
+      this.$refs.nameInput.focus()
     },
 
     /**
@@ -207,6 +226,34 @@ export default {
       })
     },
 
+    async handleUpdateBatch() {
+      // tree to flat list
+      const toFlatList = (data, parentId = 0) => {
+        if (!data || data.length === 0) return []
+        return data.reduce((prev, current, index) => {
+          current.priority = index + 1
+          current.parentId = parentId
+          const children = current.children.length > 0 ? toFlatList(current.children, current.id) : []
+          return [...prev, current, ...children]
+        }, [])
+      }
+
+      const categoriesToStage = toFlatList(this.list.treeData)
+
+      try {
+        this.formBatch.saving = true
+        await apiClient.category.updateInBatch(categoriesToStage)
+      } catch (e) {
+        this.formBatch.errored = true
+        this.$log.error('Failed to update categories', e)
+      } finally {
+        setTimeout(() => {
+          this.formBatch.saving = false
+          this.handleListCategories()
+        }, 400)
+      }
+    },
+
     handleSavedCallback() {
       if (this.form.errored) {
         this.form.errored = false
diff --git a/src/views/post/components/CategoryTreeNode.vue b/src/views/post/components/CategoryTreeNode.vue
index de3e0f2d..ab0a6e7f 100644
--- a/src/views/post/components/CategoryTreeNode.vue
+++ b/src/views/post/components/CategoryTreeNode.vue
@@ -23,7 +23,7 @@
           <a-list-item class="menu-item">
             <a-list-item-meta>
               <span slot="title" class="inline-block font-bold title">
-                <!--                                <a-icon class="cursor-move mover mr-1" type="bars" />-->
+                <a-icon class="cursor-move mover mr-1" type="bars" />
                 {{ item.name }}{{ item.hasPassword ? '（加密）' : '' }}
               </span>
               <span slot="description" class="inline-block">