update Gallery view to work with url params

src/pages/Gallery.vue

@@ -28,7 +28,7 @@
 
     <side-view id="gallery-index" right>
       <template #default="{ hide }">
-        <ul>
+        <ul v-if="creations">
           <li v-for="crea in creations" :key="crea.id">
             <node-view-title
               :node="crea"
@@ -54,7 +54,7 @@
     </b-modal>
 
     <b-overlay
-      :show="!creation"
+      :show="!creations || !creation"
       spinner-variant="creation"
       no-wrap
     />
@@ -80,6 +80,10 @@ export default {
     NodeViewTitle
   },
 
+  props: {
+    id: { type: [Number, String], default: undefined }
+  },
+
   computed: {
     ...mapGetters(['creations', 'creation'])
   },
@@ -95,8 +99,14 @@ export default {
     }
   },
 
+  watch: {
+    id (id, prev) {
+      this.$store.dispatch('DISPLAY_CREATION', parseInt(this.id))
+    }
+  },
+
   created () {
-    this.$store.dispatch('INIT_GALLERY')
+    this.$store.dispatch('INIT_GALLERY', parseInt(this.id))
   }
 }
 </script>

src/router/routes.js

@@ -45,6 +45,13 @@ export default [
     component: () => import(/* webpackChunkName: "kit" */ '@/pages/kit/KitList')
   },
 
+  {
+    name: 'gallery-view',
+    path: '/gallery/:id',
+    props: true,
+    component: () => import(/* webpackChunkName: "gallery" */ '@/pages/Gallery')
+  },
+
   {
     name: 'gallery',
     path: '/gallery',

src/store/modules/gallery.js

@@ -1,3 +1,5 @@
+import router from '@/router'
+
 export default {
   state: {
     creation: undefined
@@ -10,16 +12,27 @@ export default {
   },
 
   actions: {
-    async 'INIT_GALLERY' ({ state, commit, dispatch, getters }) {
+    async 'INIT_GALLERY' ({ state, commit, dispatch, getters }, id) {
       const ids = await dispatch('GET_ALL_NODES_IDS', { variant: 'creation', dataLevel: 'full' })
-      dispatch('OPEN_CREATION', ids[ids.length - 1])
+      if (isNaN(id)) {
+        dispatch('OPEN_CREATION', ids[ids.length - 1])
+      } else {
+        dispatch('DISPLAY_CREATION', id)
+      }
       return dispatch('GET_NODES', { ids, dataLevel: 'full' })
     },
 
-    async 'OPEN_CREATION' ({ state, commit, dispatch }, id) {
+    'DISPLAY_CREATION' ({ state, commit, dispatch, getters }, id) {
       commit('SET_CREATION', id)
       commit('ADD_HISTORY_ENTRIES', [id])
-      return dispatch('GET_NODE', { id, dataLevel: 'full' })
+    },
+
+    async 'OPEN_CREATION' ({ state, commit, dispatch }, id) {
+      if (router.currentRoute.name !== 'gallery-view') {
+        router.push({ name: 'gallery-view', params: { id } })
+      } else {
+        router.push({ params: { id } })
+      }
     }
   },