update Kit view to work with url params

src/pages/kit/KitList.vue

@@ -1,5 +1,9 @@
 <template>
-  <b-overlay :show="filteredNodes === undefined" class="kit-list" z-index="0">
+  <b-overlay
+    :show="filteredNodes === undefined"
+    class="kit-list"
+    z-index="0" spinner-variant="kit"
+  >
     <div class="kit-list-wrapper">
       <header class="kit-list-header">
         <div class="kit-list-header-intro" v-html="intro" />
@@ -12,7 +16,7 @@
           v-for="node in filteredNodes" :key="'kit-' + node.id"
           :node="node"
           mode="card"
-          @click.native.capture="$emit('open-node', node.id)"
+          @click.native.capture="openNode(node.id)"
         />
       </div>
     </div>
@@ -55,7 +59,14 @@ export default {
     }
   },
 
+  methods: {
+    openNode (id) {
+      this.$store.dispatch('OPEN_KIT_NODE', id)
+    }
+  },
+
   async created () {
+    this.$store.dispatch('INIT_KIT')
     this.$store.dispatch('QUERY_PAGE', 'kit').then(page => {
       this.intro = page.content
     })

src/pages/kit/KitView.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="kit-view">
+  <div class="kit-view bg-kit">
     <node-view
+      v-if="sheet"
       :node="sheet"
       mode="view"
       show-origin
-      @close-node="$emit('close-node', $event)"
+      @close-node="closeNode()"
-      @open-node="$emit('open-node', $event)"
+      @open-node="openLibrary"
+    />
+
+    <b-overlay
+      :show="!sheet"
+      spinner-variant="light"
+      no-wrap
     />
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import { NodeView } from '@/components/nodes'
 
 
@@ -22,13 +31,34 @@ export default {
   },
 
   props: {
-    sheet: { type: Object, default: undefined }
+    id: { type: [Number, String], default: undefined }
+  },
+
+  computed: {
+    ...mapGetters(['sheet'])
+  },
+
+  methods: {
+    closeNode () {
+      this.$store.dispatch('CLOSE_KIT_NODE')
+    },
+
+    openLibrary (ids) {
+      this.$store.dispatch('OPEN_NODE', ids)
+    }
+  },
+
+  created () {
+    this.$store.dispatch('INIT_KIT_VIEW', parseInt(this.id))
   }
 }
 </script>
 
 <style lang="scss">
 .kit-view {
+  height: 100%;
+  width: 100%;
+
   .node-view {
     min-height: 100%;
     &-header-wrapper,

src/router/routes.js

@@ -32,10 +32,17 @@ export default [
     }
   },
 
+  {
+    name: 'kit-view',
+    path: '/kit/:id',
+    props: true,
+    component: () => import(/* webpackChunkName: "kit" */ '@/pages/kit/KitView')
+  },
+
   {
     name: 'kit',
     path: '/kit',
-    component: () => import(/* webpackChunkName: "kit" */ '@/pages/Kit')
+    component: () => import(/* webpackChunkName: "kit" */ '@/pages/kit/KitList')
   },
 
   {

src/store/modules/kit.js

@@ -1,3 +1,6 @@
+import router from '@/router'
+
+
 export default {
   state: {
     sheet: null
@@ -10,18 +13,29 @@ export default {
   },
 
   actions: {
-    'INIT_KIT' ({ state, commit, dispatch, getters }) {
+    async 'INIT_KIT' ({ state, commit, dispatch, getters }) {
-      const ids = dispatch('GET_ALL_NODES_IDS', { variant: 'kit', dataLevel: 'partial' })
+      const ids = await dispatch('GET_ALL_NODES_IDS', { variant: 'kit', dataLevel: 'partial' })
       return dispatch('GET_NODES', { ids, dataLevel: 'partial' })
     },
 
-    async 'OPEN_KIT_NODE' ({ state, commit, dispatch }, id) {
+    async 'INIT_KIT_VIEW' ({ state, commit, dispatch, getters }, id) {
+      await dispatch('INIT_KIT')
+      const node = await dispatch('GET_NODE', { id, dataLevel: 'full' })
       commit('SET_KIT_SHEET', id)
       commit('ADD_HISTORY_ENTRIES', [id])
-      return dispatch('GET_NODE', { id, dataLevel: 'full' })
+      return node
+    },
+
+    async 'OPEN_KIT_NODE' ({ state, commit, dispatch }, id) {
+      if (router.currentRoute.name !== 'kit-view') {
+        router.push({ name: 'kit-view', params: { id } })
+      } else {
+        router.push({ params: { id } })
+      }
     },
 
     'CLOSE_KIT_NODE' ({ state, commit }) {
+      router.push({ name: 'kit' })
       commit('SET_KIT_SHEET', null)
     }
   },