update Kit to display a node

src/pages/Kit.vue

@@ -1,18 +1,28 @@
 <template>
   <div class="kit">
-    <kit-list />
+    <kit-list @open-node="openNode" />
+
+    <kit-view
+      v-if="sheet !== null"
+      :sheet="sheet"
+      @close-node="closeNode"
+      @open-node="openLibrary"
+    />
   </div>
 </template>
 
 <script>
-import { KitList } from '@/pages/kit'
+import { mapGetters } from 'vuex'
+
+import { KitList, KitView } from '@/pages/kit'
 
 
 export default {
   name: 'Kit',
 
   components: {
-    KitList
+    KitList,
+    KitView
   },
 
   data () {
@@ -20,6 +30,25 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters(['sheet'])
+  },
+
+  methods: {
+    openNode (id) {
+      this.$store.dispatch('OPEN_KIT_NODE', id)
+    },
+
+    openLibrary (ids) {
+      this.$store.dispatch('OPEN_NODE', ids)
+      this.$store.dispatch('CLOSE_KIT_NODE')
+    },
+
+    closeNode () {
+      this.$store.dispatch('CLOSE_KIT_NODE')
+    }
+  },
+
   created () {
     this.$store.dispatch('INIT_KIT')
   }
@@ -30,5 +59,17 @@ export default {
 .kit {
   height: 100%;
   width: 100%;
+
+  &-view {
+    position: relative;
+    margin-bottom: -100%;
+    // compensate header border
+    height: calc(100% + 2px);
+    top: calc(-100% - 2px);
+
+    @include media-breakpoint-down($layout-bp-down) {
+      margin-bottom: -100vh;
+    }
+  }
 }
 </style>

src/pages/kit/KitList.vue

@@ -13,6 +13,7 @@
           v-for="node in filteredNodes" :key="'kit-' + node.id"
           :node="node"
           mode="card"
+          @click.native.capture="$emit('open-node', node.id)"
         />
       </div>
     </div>
@@ -59,6 +60,8 @@ export default {
 <style lang="scss" scoped>
 .kit-list {
   padding: 1.15rem;
+  overflow-y: auto;
+  height: 100%;
 
   @include media-breakpoint-up($size-bp) {
     padding: 2.15rem;
@@ -84,5 +87,9 @@ export default {
       }
     }
   }
+
+  .node-view {
+    cursor: pointer;
+  }
 }
 </style>

src/store/modules/kit.js

@@ -1,14 +1,28 @@
 export default {
   state: {
+    sheet: null
   },
 
   mutations: {
+    'SET_KIT_SHEET' (state, id) {
+      state.sheet = id
+    }
   },
 
   actions: {
     async 'INIT_KIT' ({ state, commit, dispatch, getters }, payload) {
       const ids = await dispatch('GET_ALL_NODES_IDS', 'kit')
       return dispatch('GET_NODES', { ids, dataLevel: 'partial' })
+    },
+
+    async 'OPEN_KIT_NODE' ({ state, commit, dispatch }, id) {
+      commit('SET_KIT_SHEET', id)
+      commit('ADD_HISTORY_ENTRIES', [id])
+      return dispatch('GET_NODE', { id, dataLevel: 'full' })
+    },
+
+    'CLOSE_KIT_NODE' ({ state, commit }) {
+      commit('SET_KIT_SHEET', null)
     }
   },
 
@@ -17,6 +31,11 @@ export default {
       const kitIds = rootState.ids.kit
       if (kitIds === undefined || rootState.nodes[kitIds[0]] === undefined) return
       return kitIds.map(id => rootState.nodes[id])
+    },
+
+    sheet: (state, getters, rootState) => {
+      if (state.sheet === undefined || state.sheet === null) return state.sheet
+      return rootState.nodes[state.sheet]
     }
   }
 }