From 90315f9d92268416067589ffdfab2ff0af75b9b4 Mon Sep 17 00:00:00 2001
From: avele <kotoraxia@gmail.com>
Date: Thu, 7 Nov 2019 00:04:53 +0400
Subject: [PATCH] Reloading item only after editing

---
 front/client/components/CategoryItem.vue        |  8 ++++----
 front/client/components/CategoryItemToolbar.vue | 12 ++++++------
 front/client/components/CategoryItemTraits.vue  |  8 ++++----
 front/client/service/CategoryItem.ts            |  4 ++++
 front/client/store/modules/category.ts          | 14 +++++++++++++-
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/front/client/components/CategoryItem.vue b/front/client/components/CategoryItem.vue
index ca427b8..f1bb905 100644
--- a/front/client/components/CategoryItem.vue
+++ b/front/client/components/CategoryItem.vue
@@ -7,7 +7,7 @@
     />
 
     <category-item-toolbar
-      :itemUid="item.id"
+      :itemId="item.id"
       :itemName="item.name"
       :itemLink="item.link"
       :itemHackage="item.hackage"
@@ -185,7 +185,7 @@ export default class CategoryItem extends Vue {
       original,
       modified
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.item.id })
   }
 
   @CatchConflictDecorator
@@ -195,7 +195,7 @@ export default class CategoryItem extends Vue {
       original,
       modified
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.item.id })
   }
 
   @CatchConflictDecorator
@@ -205,7 +205,7 @@ export default class CategoryItem extends Vue {
       original,
       modified
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.item.id })
   }
 }
 </script>
diff --git a/front/client/components/CategoryItemToolbar.vue b/front/client/components/CategoryItemToolbar.vue
index bf1cfaa..12083d4 100644
--- a/front/client/components/CategoryItemToolbar.vue
+++ b/front/client/components/CategoryItemToolbar.vue
@@ -11,7 +11,7 @@
         <v-toolbar-title class="text-h2">
           <span class="category-item-toolbar-title">
             <a
-              :href="`#item-${itemUid}`"
+              :href="`#item-${itemId}`"
               class="category-item-anchor"
             >#</a>
 
@@ -170,7 +170,7 @@ import ResponsiveBtnsContainer from 'client/components/ResponsiveBtnsContainer.v
   }
 })
 export default class CategoryItemToolbar extends Vue {
-  @Prop(String) itemUid!: string
+  @Prop(String) itemId!: string
   @Prop(String) itemName!: string
   @Prop(String) itemLink!: string
   @Prop(String) itemHackage!: string
@@ -249,14 +249,14 @@ export default class CategoryItemToolbar extends Vue {
       return
     }
     await this.$store.dispatch('categoryItem/updateItemInfo', {
-      id: this.itemUid,
+      id: this.itemId,
       body: {
         name: this.itemNameEdit,
         link: this.getLinkForSave(),
         hackage: this.itemHackageEdit
       }
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.itemId })
     this.toggleEditItemInfoMenu()
   }
 
@@ -277,13 +277,13 @@ export default class CategoryItemToolbar extends Vue {
     }
   })
   async deleteItem (): Promise<void> {
-    await this.$store.dispatch('categoryItem/deleteItemById', this.itemUid)
+    await this.$store.dispatch('categoryItem/deleteItemById', this.itemId)
     await this.$store.dispatch('category/reloadCategory')
   }
 
   async moveItem (direction: string) {
     await this.$store.dispatch('categoryItem/moveItem', {
-      id: this.itemUid,
+      id: this.itemId,
       direction
     })
     await this.$store.dispatch('category/reloadCategory')
diff --git a/front/client/components/CategoryItemTraits.vue b/front/client/components/CategoryItemTraits.vue
index 290fac6..17fc94a 100644
--- a/front/client/components/CategoryItemTraits.vue
+++ b/front/client/components/CategoryItemTraits.vue
@@ -148,7 +148,7 @@ export default class CategoryItemTraits extends Vue {
       modified
     })
     trait.isEdit = false
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.itemId })
   }
 
   async moveTrait (trait: any, direction: string) {
@@ -157,7 +157,7 @@ export default class CategoryItemTraits extends Vue {
       traitId: trait.id,
       direction
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.itemId })
   }
 
   toggleAddTrait () {
@@ -171,7 +171,7 @@ export default class CategoryItemTraits extends Vue {
       content: traitText
     })
     this.toggleAddTrait()
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.itemId })
   }
 
   @Confirm({
@@ -186,7 +186,7 @@ export default class CategoryItemTraits extends Vue {
       itemId: this.itemId,
       traitId: trait.id
     })
-    await this.$store.dispatch('category/reloadCategory')
+    await this.$store.dispatch('category/reloadItem', { id: this.itemId })
   }
 }
 </script>
diff --git a/front/client/service/CategoryItem.ts b/front/client/service/CategoryItem.ts
index 06c8e47..eef0e08 100644
--- a/front/client/service/CategoryItem.ts
+++ b/front/client/service/CategoryItem.ts
@@ -15,6 +15,10 @@ class CategoryItemService {
       link
     }, { requestName: 'create item' })
   }
+
+  async getItemById (id: ICategoryItem['id']): Promise<void> {
+    return api.get(`item/${id}`, { requestName: 'get item' })
+  }
   async deleteItemById (id: ICategoryItem['id']): Promise<void> {
     await api.delete(`item/${id}`, { requestName: 'delete item' })
   }
diff --git a/front/client/store/modules/category.ts b/front/client/store/modules/category.ts
index 8e3b5e0..98884d5 100644
--- a/front/client/store/modules/category.ts
+++ b/front/client/store/modules/category.ts
@@ -1,6 +1,6 @@
 import { ActionTree, GetterTree, MutationTree, ActionContext, Module } from 'vuex'
 import { ICategoryInfo, ICategoryFull, CategoryService } from 'client/service/Category'
-import { ICategoryItem } from 'client/service/CategoryItem'
+import { ICategoryItem, CategoryItemService } from 'client/service/CategoryItem'
 import { set } from '../helpers'
 
 interface ICategoryState {
@@ -94,6 +94,13 @@ const actions: ActionTree<ICategoryState, any> = {
     })
 
     return createdDescription
+  },
+  async reloadItem (
+    { commit }: ActionContext<ICategoryState, any>,
+    { id }: { id: ICategoryItem['id'] }
+  ) {
+    const item = await CategoryItemService.getItemById(id)
+    commit('resetItem', item)
   }
 }
 
@@ -109,6 +116,11 @@ const mutations: MutationTree<ICategoryState> = {
     } else {
       sectionEditState.push(itemId)
     }
+  },
+  resetItem (state, item) {
+    const { items } = state.category
+    const index = items.map(({ id }) => id).indexOf(item.id)
+    items.splice(index, 1, item)
   }
 }