Search filtering

cista-front/src/components/HeaderMain.vue

@@ -13,20 +13,17 @@ const isLoading = ref<boolean>(false)
 const toggleSearchInput = () => {
   showSearchInput.value = !showSearchInput.value;
   if (!showSearchInput.value) {
-    searchQuery.value = '';
+    searchQuery.value = ''
   }
-};
+}
 
-const executeSearch = () => {
-  isLoading.value = true;
-  console.log(
-    documentStore.mainDocument
-  )
-  setTimeout(() => {
-    isLoading.value = false;
-    // Perform your search logic here
-  }, 2000);
-};
+const executeSearch = (ev: InputEvent) => {
+  // FIXME: Make reactive instead of this update handler
+  const query = (ev.target as HTMLInputElement).value
+  console.log("Searching", query)
+  documentStore.setFilter(query)
+  console.log("Filtered")
+}
 
 function createFileHandler() {
   console.log("Creating file")
@@ -101,7 +98,7 @@ function download(){
         <a-input-search
         v-model="searchQuery"
         class="margin-input"
-        v-on:keyup.enter="executeSearch"
+        @change="executeSearch"
         @search="executeSearch"
         :loading="isLoading"
         />

cista-front/src/stores/documents.ts

@@ -1,9 +1,8 @@
-import type { Document, FolderDocument } from '@/repositories/Document';
-import type { ISimpleError } from '@/repositories/Client';
+import type { Document } from '@/repositories/Document';
 import { fetchFile } from '@/repositories/Document'
 import { formatSize, formatUnixDate } from '@/utils';
 import { defineStore } from 'pinia';
-
+import { localeIncludes } from 'locale-includes'
 
 type FileData = { id: string, mtime: number, size: number, dir: DirectoryData};
 type DirectoryData = {
@@ -44,6 +43,43 @@ export const useDocumentStore = defineStore({
   }),
 
   actions: {
+    updateTable(matched: DirectoryData) {
+      // Transform data
+      const dataMapped  = []
+      for (const [name, attr] of Object.entries(matched)) {
+        const {id, size, mtime, dir} = attr
+        const element: Document = {
+          name,
+          key: id,
+          size,
+          sizedisp: formatSize(size),
+          mtime,
+          modified: formatUnixDate(mtime),
+          type: dir === undefined ? 'folder-file' : 'folder',
+        }
+        dataMapped.push(element)
+      }
+      // Pre sort directory entries folders first then files, names in natural ordering
+      dataMapped.sort((a, b) => a.type === b.type ? a.name.localeCompare(b.name) : a.type === "folder" ? -1 : 1)
+      this.document = dataMapped
+      this.loading = false;
+    },
+    setFilter(filter: string){
+      function traverseDir(data: FileStructure, path: string){
+        if (data.dir === undefined) return
+        for (const [name, attr] of Object.entries(data.dir)) {
+          const fullname = `${path}/${name}`
+          if (localeIncludes(name, filter, {usage: "search", sensitivity: "base"})) {
+            matched[fullname.slice(1)] = attr  // No initial slash on name
+          }
+          traverseDir(attr, fullname)
+        }
+      }
+      this.loading = true
+      const matched = {}
+      traverseDir(this.root, "")
+      this.updateTable(matched)
+    },
     setActualDocument(location: string){
       location = decodeURIComponent(location)
       this.loading = true
@@ -65,25 +101,7 @@ export const useDocumentStore = defineStore({
         this.loading = false  // ???
         return
       }
-      // Transform data
-      const dataMapped  = []
-      for (const [name, attr] of Object.entries(data.dir)) {
-        const {id, size, mtime, dir} = attr
-        const element: Document = {
-          name,
-          key: id,
-          size,
-          sizedisp: formatSize(size),
-          mtime,
-          modified: formatUnixDate(mtime),
-          type: dir === undefined ? 'folder-file' : 'folder',
-        }
-        dataMapped.push(element)
-      }
-      // Pre sort directory entries folders first then files, names in natural ordering
-      dataMapped.sort((a, b) => a.type === b.type ? a.name.localeCompare(b.name) : a.type === "folder" ? -1 : 1)
-      this.document = dataMapped
-      this.loading = false;
+      this.updateTable(data.dir)
     },
     async setActualDocumentFile(path: string){
       this.loading = true;

cista/wwwroot/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Vite Vasanko</title>
-    <script type="module" crossorigin src="/assets/index-a4e1dd71.js"></script>
+    <script type="module" crossorigin src="/assets/index-0449a6e2.js"></script>
     <link rel="stylesheet" href="/assets/index-f91a1fb3.css">
   </head>
   <body>

package-lock.json

@@ -2,5 +2,16 @@
   "name": "cista-storage",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "locale-includes": "^1.0.5"
+      }
+    },
+    "node_modules/locale-includes": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/locale-includes/-/locale-includes-1.0.5.tgz",
+      "integrity": "sha512-8pcOkyBbMZvHGskk3gbi+o6dYSOmkLJ+hh1lle+LaULxB2YtwNrCMEhgpAJb3WruTUC2cSEu71bOe6im6DuCuA=="
+    }
+  }
 }