From 1e5283db84a2a22c0d044fb818127000134101f7 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Sun, 28 Apr 2019 22:17:57 +0800
Subject: [PATCH] Support post autosave.

---
 src/api/option.js                 | 10 +++++
 src/components/Tools/UserMenu.vue | 54 +++++++++++++++++-----
 src/views/post/PostEdit.vue       | 74 +++++++++++++++++++++++--------
 src/views/sheet/SheetEdit.vue     | 41 ++++++++++++-----
 4 files changed, 141 insertions(+), 38 deletions(-)

diff --git a/src/api/option.js b/src/api/option.js
index 4bdca458..5c97dc55 100644
--- a/src/api/option.js
+++ b/src/api/option.js
@@ -11,6 +11,16 @@ optionApi.listAll = () => {
   })
 }
 
+optionApi.listByKeys = keys => {
+  return service({
+    url: `/api/admin/options/map_keys`,
+    method: 'get',
+    params: {
+      keys: keys
+    }
+  })
+}
+
 optionApi.save = options => {
   return service({
     url: `${baseUrl}/saving`,
diff --git a/src/components/Tools/UserMenu.vue b/src/components/Tools/UserMenu.vue
index 35f9e2bb..6429e343 100644
--- a/src/components/Tools/UserMenu.vue
+++ b/src/components/Tools/UserMenu.vue
@@ -1,31 +1,47 @@
 <template>
   <div class="user-wrapper">
-    <a href="http://localhost:8090" target="_blank">
+    <a
+      :href="options.blog_url"
+      target="_blank"
+    >
       <span class="action">
         <a-icon type="link" />
       </span>
     </a>
-    <a href="javascript:void(0)" @click="showOptionModal">
+    <a
+      href="javascript:void(0)"
+      @click="showOptionModal"
+    >
       <span class="action">
         <a-icon type="setting" />
       </span>
     </a>
-    <header-comment class="action"/>
+    <header-comment class="action" />
     <a-dropdown>
       <span class="action ant-dropdown-link user-dropdown-menu">
-        <a-avatar class="avatar" size="small" :src="avatar"/>
+        <a-avatar
+          class="avatar"
+          size="small"
+          :src="user.avatar"
+        />
       </span>
-      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+      <a-menu
+        slot="overlay"
+        class="user-dropdown-menu-wrapper"
+      >
         <a-menu-item key="0">
           <router-link :to="{ name: 'Profile' }">
-            <a-icon type="user"/>
+            <a-icon type="user" />
             <span>个人资料</span>
           </router-link>
         </a-menu-item>
-        <a-menu-divider/>
+        <a-menu-divider />
         <a-menu-item key="3">
-          <a href="javascript:;" @click="handleLogout">
-            <a-icon type="logout"/>
+          <a
+            href="javascript:;"
+            @click="handleLogout"
+          >
+            <a-icon type="logout" />
             <span>退出登录</span>
           </a>
         </a-menu-item>
@@ -39,6 +55,8 @@
 import HeaderComment from './HeaderComment'
 import SettingDrawer from '@/components/SettingDrawer/SettingDrawer'
 import { mapActions, mapGetters } from 'vuex'
+import userApi from '@/api/user'
+import optionApi from '@/api/option'
 
 export default {
   name: 'UserMenu',
@@ -49,12 +67,18 @@ export default {
   data() {
     return {
       optionVisible: true,
-      avatar: 'https://gravatar.loli.net/avatar/?s=256&d=mm'
+      user: {},
+      options: [],
+      keys: 'blog_url'
     }
   },
   mounted() {
     this.optionVisible = this.$refs.drawer.visible
   },
+  created() {
+    this.loadUser()
+    this.loadOptions()
+  },
   methods: {
     ...mapActions(['Logout']),
     ...mapGetters(['nickname']),
@@ -83,6 +107,16 @@ export default {
     showOptionModal() {
       this.optionVisible = this.$refs.drawer.visible
       this.$refs.drawer.toggle()
+    },
+    loadUser() {
+      userApi.getProfile().then(response => {
+        this.user = response.data.data
+      })
+    },
+    loadOptions() {
+      optionApi.listByKeys(this.keys).then(response => {
+        this.options = response.data.data
+      })
     }
   }
 }
diff --git a/src/views/post/PostEdit.vue b/src/views/post/PostEdit.vue
index 7e9ba18e..94fa334e 100644
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12">
-      <a-col
-        :span="24"
-      >
+      <a-col :span="24">
         <div style="margin-bottom: 16px">
           <a-input
             v-model="postToStage.title"
@@ -84,15 +82,34 @@
                       />
                     </a-form-item>
                     <a-form-item v-if="categoryForm">
-                      <a-input placeholder="分类名称" v-model="categoryToCreate.name"/>
+                      <a-input
+                        placeholder="分类名称"
+                        v-model="categoryToCreate.name"
+                      />
                     </a-form-item>
                     <a-form-item v-if="categoryForm">
-                      <a-input placeholder="分类路径" v-model="categoryToCreate.slugNames"/>
+                      <a-input
+                        placeholder="分类路径"
+                        v-model="categoryToCreate.slugNames"
+                      />
                     </a-form-item>
                     <a-form-item>
-                      <a-button type="primary" style="marginRight: 8px" v-if="categoryForm" @click="handlerCreateCategory">保存</a-button>
-                      <a-button type="dashed" style="marginRight: 8px" v-if="!categoryForm" @click="toggleCategoryForm">新增</a-button>
-                      <a-button v-if="categoryForm" @click="toggleCategoryForm">取消</a-button>
+                      <a-button
+                        type="primary"
+                        style="marginRight: 8px"
+                        v-if="categoryForm"
+                        @click="handlerCreateCategory"
+                      >保存</a-button>
+                      <a-button
+                        type="dashed"
+                        style="marginRight: 8px"
+                        v-if="!categoryForm"
+                        @click="toggleCategoryForm"
+                      >新增</a-button>
+                      <a-button
+                        v-if="categoryForm"
+                        @click="toggleCategoryForm"
+                      >取消</a-button>
                     </a-form-item>
                   </a-form>
                 </div>
@@ -145,7 +162,7 @@
             <a-button
               @click="handlePublishClick"
               type="primary"
-            >{{ publishText }}</a-button>
+            >发布</a-button>
           </div>
         </a-drawer>
       </a-col>
@@ -209,20 +226,20 @@ export default {
       selectedCategoryIds: [],
       selectedTagIds: [],
       postToStage: {},
-      categoryToCreate: {}
-    }
-  },
-  computed: {
-    publishText() {
-      if (this.postToStage.id) {
-        return '更新并发布'
-      }
-      return '创建并发布'
+      categoryToCreate: {},
+      timer: null
     }
   },
   created() {
     this.loadTags()
     this.loadCategories()
+    clearInterval(this.timer)
+    this.timer = null
+    this.autoSaveTimer()
+  },
+  destroyed: function() {
+    clearInterval(this.timer)
+    this.timer = null
   },
   beforeRouteEnter(to, from, next) {
     // Get post id from query
@@ -306,6 +323,27 @@ export default {
     handleSelectPostThumb(data) {
       this.postToStage.thumbnail = data.path
       this.thumDrawerVisible = false
+    },
+    autoSaveTimer() {
+      if (this.timer == null) {
+        this.timer = setInterval(() => {
+          if (this.postToStage.title != null && this.postToStage.originalContent != null) {
+            this.postToStage.categoryIds = this.selectedCategoryIds
+            this.postToStage.tagIds = this.selectedTagIds
+
+            if (this.postToStage.id) {
+              postApi.update(this.postToStage.id, this.postToStage).then(response => {
+                this.$log.debug('Auto updated post', response.data.data)
+              })
+            } else {
+              postApi.create(this.postToStage).then(response => {
+                this.$log.debug('Auto saved post', response.data.data)
+                this.postToStage = response.data.data
+              })
+            }
+          }
+        }, 15000)
+      }
     }
   }
 }
diff --git a/src/views/sheet/SheetEdit.vue b/src/views/sheet/SheetEdit.vue
index 4395e61d..18eacce6 100644
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@@ -106,7 +106,7 @@
             <a-button
               type="primary"
               @click="handlePublishClick"
-            >{{ publishText }}</a-button>
+            >发布</a-button>
           </div>
         </a-drawer>
       </a-col>
@@ -156,19 +156,19 @@ export default {
       thumDrawerVisible: false,
       visible: false,
       customTpls: [],
-      sheetToStage: {}
-    }
-  },
-  computed: {
-    publishText() {
-      if (this.sheetToStage.id) {
-        return '更新并发布'
-      }
-      return '创建并发布'
+      sheetToStage: {},
+      timer: null
     }
   },
   created() {
     this.loadCustomTpls()
+    clearInterval(this.timer)
+    this.timer = null
+    this.autoSaveTimer()
+  },
+  destroyed: function() {
+    clearInterval(this.timer)
+    this.timer = null
   },
   beforeRouteEnter(to, from, next) {
     // Get sheetId id from query
@@ -229,6 +229,27 @@ export default {
     handleSelectSheetThumb(data) {
       this.sheetToStage.thumbnail = data.path
       this.thumDrawerVisible = false
+    },
+    autoSaveTimer() {
+      if (this.timer == null) {
+        this.timer = setInterval(() => {
+          if (this.sheetToStage.title != null && this.sheetToStage.originalContent != null) {
+            this.sheetToStage.categoryIds = this.selectedCategoryIds
+            this.sheetToStage.tagIds = this.selectedTagIds
+
+            if (this.sheetToStage.id) {
+              sheetApi.update(this.sheetToStage.id, this.sheetToStage).then(response => {
+                this.$log.debug('Auto updated sheet', response.data.data)
+              })
+            } else {
+              sheetApi.create(this.sheetToStage).then(response => {
+                this.$log.debug('Auto saved sheet', response.data.data)
+                this.sheetToStage = response.data.data
+              })
+            }
+          }
+        }, 15000)
+      }
     }
   }
 }