add KitList component

src/pages/Kit.vue

@@ -1,12 +1,34 @@
 <template>
-  <component-debug :component="this" />
+  <div class="kit">
+    <kit-list />
+  </div>
 </template>
 
 <script>
+import { KitList } from '@/pages/kit'
+
+
 export default {
-  name: 'Kit'
+  name: 'Kit',
+
+  components: {
+    KitList
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  created () {
+    this.$store.dispatch('INIT_KIT')
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.kit {
+  height: 100%;
+  width: 100%;
+}
 </style>

src/pages/_partials/MainHeader.vue

@@ -38,7 +38,7 @@
       </nav>
 
       <b-button
-        v-if="['library', 'kit'].includes($route.name)"
+        v-if="$route.name === 'library'"
         class=""
         :class="optionsVisible ? null : 'collapsed'"
         :aria-expanded="optionsVisible ? 'true' : 'false'"

src/pages/kit/KitList.vue

@@ -0,0 +1,88 @@
+<template>
+  <b-overlay :show="filteredNodes === undefined" class="h-100" z-index="0">
+    <div class="kit-list">
+      <header class="kit-list-header">
+        <div class="kit-list-header-intro">
+          FIXME Intro
+        </div>
+        <search-input v-model="search" class="input-search" />
+      </header>
+
+      <div class="kit-list-container nodes-grid">
+        <node-view
+          v-for="node in filteredNodes" :key="'kit-' + node.id"
+          :node="node"
+          mode="card"
+        />
+      </div>
+    </div>
+  </b-overlay>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import { NodeView } from '@/components/nodes'
+import { SearchInput } from '@/components/formItems'
+import { searchInNode } from '@/store/utils'
+
+
+export default {
+  name: 'KitList',
+
+  components: {
+    NodeView,
+    SearchInput
+  },
+
+  props: {
+  },
+
+  data () {
+    return {
+      search: ''
+    }
+  },
+
+  computed: {
+    ...mapGetters(['sheets']),
+
+    filteredNodes () {
+      if (!this.sheets) return
+      const search = this.search.toLowerCase()
+      return this.sheets.filter(node => searchInNode(search, node))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kit-list {
+  padding: 1.15rem;
+
+  @include media-breakpoint-up($size-bp) {
+    padding: 2.15rem;
+  }
+
+  &-header {
+    margin-bottom: 1.15rem;
+
+    @include media-breakpoint-up($size-bp) {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 2.15rem;
+    }
+
+    .input-search {
+      min-width: 30%;
+      margin-bottom: 2.15rem;
+      margin-top: 1.15rem;
+
+      @include media-breakpoint-up($size-bp) {
+        margin: 0;
+        margin-left: 1.15rem;
+      }
+    }
+  }
+}
+</style>

src/pages/kit/index.js

@@ -0,0 +1 @@
+export { default as KitList } from './KitList'