✨ Site > File Tree > Add fuzzy search

site/src/components/files-tree-file/script.js

@@ -15,6 +15,42 @@ export default
         content: { type: Object }
     },
 
+    computed:
+    {
+        visible()
+        {
+            // Get and clean search
+            const search = this.$store.state.files.search.replace(/\ /g, '').toLowerCase()
+
+            // If no search value, return true
+            if(search === '')
+            {
+                return true
+            }
+
+            // Set up fuzzy search
+            const text = this.content.data.path.full
+            let searchPosition = 0
+
+            // Go through each character in the text
+            for(let n = 0; n < text.length; n++)
+            {
+                // If match a character in the search, highlight it
+                if(searchPosition < search.length && text[n].toLowerCase() === search[searchPosition])
+                {
+                    searchPosition += 1
+                }
+            }
+
+            if(searchPosition !== search.length)
+            {
+                return false
+            }
+
+            return true
+        }
+    },
+
     methods:
     {
         onNameClick()

site/src/components/files-tree-file/template.html

@@ -1,4 +1,4 @@
-<div>
+<div v-show="visible">
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         <file-icon class="icon" :extension="content.data.extension"></file-icon>
         <span class="text">

site/src/components/files-tree/script.js

@@ -5,6 +5,13 @@ export default
 {
     name: 'files-tree',
 
+    data()
+    {
+        return {
+            searchValue: ''
+        }
+    },
+
     components:
     {
         FilesTreeFile,
@@ -17,5 +24,18 @@ export default
         {
             return this.$store.state.files.tree
         }
+    },
+
+    watch:
+    {
+        searchValue: 'onSearchValueChange'
+    },
+
+    methods:
+    {
+        onSearchValueChange(value)
+        {
+            this.$store.commit('searchFile', value)
+        }
     }
 }

site/src/components/files-tree/template.html

@@ -1,3 +1,4 @@
 <div>
+    <input type="text" v-model="searchValue">
     <files-tree-folder v-for="folder of files.folders" :key="+ new Date()" :content="folder" :depth="0"></files-tree-folder>
 </div>

site/src/store/modules/files.js

@@ -5,7 +5,8 @@ export default {
     {
         tree: new FileTree({ autoWash: true }),
         current: null,
-        currentVersion: null
+        currentVersion: null,
+        search: ''
     },
 
     mutations:
@@ -53,6 +54,11 @@ export default {
         setVersion(state, data)
         {
             state.currentVersion = data
+        },
+
+        searchFile(state, data)
+        {
+            state.search = data
         }
     }
 }