Reloading item only after editing

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>

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')

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>

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' })
   }

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)
   }
 }