front: added scroll to created item

front/client/components/AddItemDialog.vue

@@ -75,11 +75,16 @@ export default class AddItemDialog extends Vue {
   }
 
   async submit () {
-    await this.$store.dispatch('categoryItem/createItem', {
+    const createdId = await this.$store.dispatch('categoryItem/createItem', {
       category: this.categoryId,
       name: this.itemName
     })
+    await this.$store.dispatch('category/reloadCategory')
     this.close()
+    // nextTick to wait for item rendered in dom so router can find it and scroll to it
+    this.$nextTick(() => {
+      this.$router.push({ hash: `item-${createdId}` })
+    })
   }
 }
 </script>

front/client/components/CategoryItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="category-item">
+  <div
+    class="category-item"
+    :id="`item-${itemUid}`"
+  >
 
     <category-item-toolbar
       :itemUid="itemUid"

front/client/components/CategoryItemToolbar.vue

@@ -16,8 +16,7 @@
           <!-- TODO change markup formatting after resolving issue with extra spaces
            (if closing tag on another line vue-template-compiler adds extra space) -->
           <router-link
-            :to="{path: $route.path, hash:`item-${itemUid}`}"
-            :id="`item-${itemUid}`"
+            :to="{hash:`item-${itemUid}`}"
             class="category-item-anchor"
           >#</router-link>
           <a-link

front/client/store/modules/category.ts

@@ -19,7 +19,7 @@ const actions: ActionTree<ICategoryState, any> = {
     if (!category) {
       return
     }
-    dispatch('loadCategory', category.id)
+    await dispatch('loadCategory', category.id)
   },
   async loadCategory (
     { commit }: ActionContext<ICategoryState, any>,

front/client/store/modules/categoryItem.ts

@@ -26,7 +26,6 @@ const actions: ActionTree<ICategoryItemState, any> = {
       category,
       name
     })
-    dispatch('category/reloadCategory', null, { root: true })
     return createdId
   },
   async deleteItemById (context, id: ICategoryItem['id']) {