add search filters to LibraryList and LibraryMap

src/pages/library/LibraryMap.vue

@@ -2,13 +2,14 @@
   <b-overlay :show="nodes === undefined" class="h-100">
     <map-zoom id="library-map" :min-zoom="0.2" :max-zoom="2">
       <foreignObject
-        v-for="(node, i) in nodes" :key="i"
+        v-for="(node, i) in filteredNodes" :key="i"
         :style="`--x: ${node.x}px; --y: ${node.y}px; --r: ${node.rotate}deg;`"
       >
         <node-view
           :node="node.data"
           mode="card"
           @open-node="onOpen(node.data)"
+          :hidden="node.hidden"
         />
       </foreignObject>
     </map-zoom>
@@ -18,7 +19,9 @@
 <script>
 import { randomUniform } from 'd3'
 import { forceSimulation, forceCollide, forceManyBody } from 'd3-force'
+import { mapGetters } from 'vuex'
 
+import { searchInNode } from '@/store/utils'
 import { MapZoom } from '@/components/layouts'
 import { NodeView } from '@/components/nodes'
 
@@ -38,6 +41,19 @@ export default {
     }
   },
 
+  computed: {
+    ...mapGetters(['search']),
+
+    filteredNodes () {
+      if (!this.nodes) return
+      const search = this.search.toLowerCase()
+      this.nodes.forEach(node => {
+        Object.assign(node, { hidden: !searchInNode(search, node.data) })
+      })
+      return this.nodes
+    }
+  },
+
   methods: {
     onOpen (node) {
       // FIXME ALSO CHECK IF PARENT