fix(tags): fix bugs on tags

fix an issue when deleting a tag fix an issue when modifying a tag
Oooobe · Jan 27, 2017 · aebddeb · aebddeb
1 parent ce22d0e
commit aebddeb
Show file tree

Hide file tree

Showing 13 changed files with 204 additions and 48 deletions.
diff --git a/admin/src/api/index.js b/admin/src/api/index.js
@@ -4,8 +4,8 @@ export default {
   async createToken(username, password) {
     return await service.post('tokens', {username, password})
   },
-  async getDraftList(tags) {
-    return await service.get('drafts', {tags})
+  async getDraftList(query) {
+    return await service.get('drafts', query)
   },
   async getDraft(id) {
     return await service.get(`drafts/${id}`)

diff --git a/admin/src/components/Categories.vue b/admin/src/components/Categories.vue
@@ -0,0 +1,129 @@
+<template lang="html">
+  <div class="container-with-aside">
+    <nav-aside>
+    </nav-aside>
+    <section class="draft-list-column">
+      <h3 class="page-title" style="margin-bottom:0" v-if="tagActive">
+        <i class="fa fa-tag icon-font" aria-hidden="true"></i>
+        Search By Tag
+      </h3>
+      <ul class="clearfix reset-list tag-list" v-if="tagActive">
+        <li class="tag active">
+          <span v-show="!tagActive['editing']">{{tagActive['name']}}</span>
+          <i class="fa fa-times iconfont" v-show="!tagActive['editing']" @click="blurTag()"></i>
+          <i class="fa fa-pencil iconfont" @click="modifyTag(tagActive)" v-show="!tagActive['editing']"></i>
+          <i class="fa fa-trash iconfont" style="vertical-align: 1px;" @click="deleteTag(tagActive)" v-show="!tagActive['editing']"></i>
+          <input type="text" class="tag-input" v-if="tagActive['editing']" v-model="tagActive['newName']" placeholder="Enter to submit" @keyup.13="saveTag(tagActive)"></li>
+      </ul>
+      <ul class="clearfix reset-list tag-list" v-show="(tags.length !== 1 || tagActive == null)">
+        <li class="tag" v-for="tag in tags"  v-show="tag !== tagActive">
+          <span @click="searchTag(tag)" style="cursor:pointer" v-show="!tag['editing']">{{tag['name']}}</span>
+        </li>
+      </ul>
+      <draft-list></draft-list>
+    </section>
+    <div class="draft-edit">
+      <draft-editor v-if="currentId"></draft-editor>
+    </div>
+  </div>
+</template>
+
+<script>
+import DraftEditor from 'components/common/DraftEditor'
+import DraftList from 'components/common/DraftList'
+import NavAside from 'components/common/NavAside'
+import {
+  mapGetters,
+  mapActions
+} from 'vuex'
+import api from 'src/api'
+export default {
+  data() {
+    return {
+      tagActive: null,
+      tags: []
+    }
+  },
+  components: {
+    DraftEditor,
+    DraftList,
+    NavAside
+  },
+  computed: { ...mapGetters(['currentId'])
+  },
+  methods: {
+    searchTag(tag) {
+      this.tagActive = tag
+      this.getAllDrafts({
+        tags: tag.id
+      }) //or tag
+    },
+    modifyTag(tag) {
+      tag.newName = tag.name
+      tag.editing = true
+    },
+    async saveTag(tag) {
+      if (tag.name === tag.newName || !tag.newName) {
+        tag.editing = false
+        return
+      }
+      try {
+        const res = await api.modifyTag(tag.name, tag.newName)
+        if (res.success) {
+          tag.name = tag.newName
+          tag.editing = false
+        } else window.alert('Tag duplicated')
+      } catch (e) {
+        window.alert(e)
+      }
+    },
+    async deleteTag(tag) {
+      const res = await api.deleteTag(tag.name)
+      if (res.success) {
+        if (this.tagActive === tag) {
+          this.getAllDrafts()
+          this.tagActive = null
+        }
+        this.tags.splice(this.tags.indexOf(tag), 1)
+      }
+    },
+    blurTag() {
+      this.tagActive = null
+      this.getAllDrafts()
+    },
+    async fetchAllTags() {
+      try {
+        const res = await api.getAllTags()
+        if (res.success) {
+          res.data.forEach(i => {
+            i.newName = ''
+            i.editing = false
+          })
+          this.tags = res.data
+          this.getAllDrafts()
+        }
+      } catch (e) {
+        window.alert(e)
+      }
+    },
+    ...mapActions(['getAllDrafts'])
+  },
+  watch: {
+    '$route': 'fetchAllTags'
+  },
+  mounted() {
+    this.fetchAllTags()
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  @import '../stylus/_settings.styl'
+  .tag-list
+    padding 15px 0
+    margin 0 25px
+    &+&
+      border-top 1px solid $border
+  .fa
+    cursor pointer
+</style>
diff --git a/admin/src/components/common/DraftEditor.vue b/admin/src/components/common/DraftEditor.vue
@@ -136,6 +136,12 @@ export default {
         window.alert(e)
       }
     },
+    async submitCategory(val) {
+      //todo
+    },
+    async submitImage(val) {
+      //todo
+    },
     async publishDraft() {
       if (!this.saved || !this.titleSaved) {
         window.alert('Draft is saving, please try again')

diff --git a/admin/src/components/common/NavAside.vue b/admin/src/components/common/NavAside.vue
@@ -30,7 +30,7 @@ import {
   mapActions
 } from 'vuex'
 export default {
-  method: { ...mapActions(['deleteToken'])
+  methods: { ...mapActions(['deleteToken'])
   }
 }
 </script>

diff --git a/admin/src/components/tags.vue b/admin/src/components/tags.vue
@@ -3,17 +3,22 @@
     <nav-aside>
     </nav-aside>
     <section class="draft-list-column">
-      <h3 class="page-title" style="margin-bottom:0" v-if="tagActive"><i class="icon-biaoqian iconfont"></i>Search By Tag</h3>
+      <h3 class="page-title" style="margin-bottom:0" v-if="tagActive">
+        <i class="fa fa-tag icon-font" aria-hidden="true"></i>
+        Search By Tag
+      </h3>
       <ul class="clearfix reset-list tag-list" v-if="tagActive">
         <li class="tag active">
           <span v-show="!tagActive['editing']">{{tagActive['name']}}</span>
-          <i class="icon-chacha iconfont" v-show="!tagActive['editing']" @click="blurTag()"></i>
-          <i class="icon-edit iconfont" @click="modifyTag(tagActive)" v-show="!tagActive['editing']"></i>
-          <i class="icon-shanchu iconfont" style="vertical-align: 1px;" @click="deleteTag(tagActive)" v-show="!tagActive['editing']"></i>
+          <i class="fa fa-times iconfont" v-show="!tagActive['editing']" @click="blurTag()"></i>
+          <i class="fa fa-pencil iconfont" @click="modifyTag(tagActive)" v-show="!tagActive['editing']"></i>
+          <i class="fa fa-trash iconfont" style="vertical-align: 1px;" @click="deleteTag(tagActive)" v-show="!tagActive['editing']"></i>
           <input type="text" class="tag-input" v-if="tagActive['editing']" v-model="tagActive['newName']" placeholder="Enter to submit" @keyup.13="saveTag(tagActive)"></li>
       </ul>
       <ul class="clearfix reset-list tag-list" v-show="(tags.length !== 1 || tagActive == null)">
-        <li class="tag" v-for="tag in tags"  v-show="tag !== tagActive"> <span @click="searchTag(tag)" v-show="!tag['editing']">{{tag['name']}}</span> </li>
+        <li class="tag" v-for="tag in tags"  v-show="tag !== tagActive">
+          <span @click="searchTag(tag)" style="cursor:pointer" v-show="!tag['editing']">{{tag['name']}}</span>
+        </li>
       </ul>
       <draft-list></draft-list>
     </section>
@@ -46,11 +51,11 @@ export default {
   },
   computed: { ...mapGetters(['currentId'])
   },
-  method: {
+  methods: {
     searchTag(tag) {
       this.tagActive = tag
       this.getAllDrafts({
-        tags: tag.name
+        tags: tag.id
       }) //or tag
     },
     modifyTag(tag) {
@@ -69,7 +74,7 @@ export default {
           tag.editing = false
         } else window.alert('Tag duplicated')
       } catch (e) {
-        window.alert('e')
+        window.alert(e)
       }
     },
     async deleteTag(tag) {
@@ -98,22 +103,27 @@ export default {
           this.getAllDrafts()
         }
       } catch (e) {
-        window.alert('e')
+        window.alert(e)
       }
     },
     ...mapActions(['getAllDrafts'])
   },
   watch: {
     '$route': 'fetchAllTags'
+  },
+  mounted() {
+    this.fetchAllTags()
   }
 }
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
   @import '../stylus/_settings.styl'
   .tag-list
     padding 15px 0
     margin 0 25px
     &+&
       border-top 1px solid $border
+  .fa
+    cursor pointer
 </style>
diff --git a/admin/src/router.js b/admin/src/router.js
@@ -17,6 +17,9 @@ const routes = [
   }, {
     path: '/',
     redirect: '/drafts'
+  }, {
+    path: '/categories',
+    component: resolve => require(['components/Categories'], resolve)
   }
 ]
 

diff --git a/admin/src/store/modules/drafts.js b/admin/src/store/modules/drafts.js
@@ -90,6 +90,12 @@ const mutations = {
   [types.TAG_MODIFY](state) {
     state.all[state.currentIndex].published = false
   },
+  [types.CATEGORY_MODIFY](state) {
+    state.all[state.currentIndex].published = false
+  },
+  [types.IMAGE_MODIFY](state) {
+    state.all[state.currentIndex].published = false
+  },
   [types.LAST_EDIT_TIME](state, time) {
     state.all[state.currentIndex].lastEditTime = time
   },
@@ -104,11 +110,9 @@ const mutations = {
 
 const actions = {
   async getAllDrafts(store, query) {
-    if (query) {
-      const {tags, category} = query
-    }
-    //fix me
-    const res = await api.getDraftList()
+    const res = query
+      ? await api.getDraftList(query)
+      : await api.getDraftList()
     if (!res.success)
       return Promise.reject()
     else {
@@ -174,6 +178,14 @@ const actions = {
   modifyTags(store, time) {
     store.commit(types.TAG_MODIFY)
     store.commit(types.LAST_EDIT_TIME, time)
+  },
+  modifyCategory(store, time) {
+    store.commit(types.CATEGORY_MODIFY)
+    store.commit(types.LAST_EDIT_TIME, time)
+  },
+  modifyImage(store, time) {
+    store.commit(types.IMAGE_MODIFY)
+    store.commit(types.LAST_EDIT_TIME, time)
   }
 }
 

diff --git a/admin/src/store/modules/token.js b/admin/src/store/modules/token.js
@@ -28,8 +28,8 @@ const actions = {
       router.replace('drafts')
     }
   },
-  deleteToken({dispatch}) {
-    store.dispatch(type.TOKEN_DELETE)
+  deleteToken(store) {
+    store.commit(types.TOKEN_DELETE)
     router.replace('login')
   }
 }

diff --git a/admin/src/store/mutation-types.js b/admin/src/store/mutation-types.js
@@ -12,6 +12,7 @@ export const LAST_EDIT_TIME = 'LAST_EDIT_TIME'
 export const TAG_MODIFY = 'TAG_MODIFY'
 export const CATEGORY_MODIFY = 'TAG_MODIFY'
 export const CREATE = 'CREATE'
+export const IMAGE_MODIFY = 'IMAGE_MODIFY'
 
 export const TOKEN_CREATE = 'TOKEN_CREATE'
 export const TOKEN_DELETE = 'TOKEN_DELETE'
diff --git a/admin/src/stylus/main.styl b/admin/src/stylus/main.styl
@@ -0,0 +1 @@
+
diff --git a/server/controllers/draft.js b/server/controllers/draft.js
@@ -36,23 +36,15 @@ let create = async(ctx, next) => {
 }
 
 let draftList = async(ctx, next) => {
-  const tag = ctx.query.tag
+  const tags = ctx.query.tags
   const category = ctx.query.category
   let findOpt = {}
-  if (tag) {
-    let tagId = await Tag.findOne({name: tag}).exec().catch(utils.internalErrHandler);
-    tagId = tagId.id
-    Object.assign(findOpt, {
-      tags: {
-        '$all': [tagId]
-      }
-    })
-  }
-  if (category) {
-    let catId = await Category.findOne({name: category}).exec().catch(utils.internalErrHandler());
-    catId = catId.id
-    Object.assign(findOpt, {category: catId})
-  }
+  tags && Object.assign(findOpt, {
+    tags: {
+      '$all': [tags]
+    }
+  })
+  category && Object.assign(findOpt, {category})
   const draftArr = await Draft.find(findOpt).populate('tags category').select('title tags category createTime lastEditTime excerpt post published').sort({lastEditTime: -1}).exec().catch(utils.internalErrHandler);
   ctx.status = 200
   ctx.body = {
@@ -64,7 +56,7 @@ let draftList = async(ctx, next) => {
 
 let draftDetail = async(ctx, next) => {
   const id = ctx.params.id
-  let draft = await Draft.findById(id).populate('tags category').select('title tags category createTime lastEditTime excerpt article draftPublished content').exec().catch(utils.internalErrHandler);
+  let draft = await Draft.findById(id).populate('tags category').select('title tags category imagesrc createTime lastEditTime excerpt article draftPublished content').exec().catch(utils.internalErrHandler);
   ctx.status = 200
   ctx.body = {
     success: true,