New build, typing ignores...

cista-front/package-lock.json

@@ -13,6 +13,7 @@
         "ant-design-vue": "^4.0.3",
         "axios": "^1.5.0",
         "esbuild": "^0.19.5",
+        "locale-includes": "^1.0.5",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "pinia": "^2.1.6",
@@ -3327,6 +3328,11 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "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=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

cista-front/package.json

@@ -18,6 +18,7 @@
     "ant-design-vue": "^4.0.3",
     "axios": "^1.5.0",
     "esbuild": "^0.19.5",
+    "locale-includes": "^1.0.5",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.6",

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,9 @@
-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';
-
+// @ts-ignore
+import { localeIncludes } from 'locale-includes'
 
 type FileData = { id: string, mtime: number, size: number, dir: DirectoryData};
 type DirectoryData = {
@@ -44,23 +44,10 @@ export const useDocumentStore = defineStore({
   }),
 
   actions: {
-    setActualDocument(location: string){
-      this.loading = true;
-      let data = this.root
-      const dataMapped  = [];
-      const locations = location.split('/').slice(1)
-      // Get data target location
-      locations.forEach(location => {
-        location = decodeURIComponent(location)
-        if(data && data.dir){
-          for (const key in data.dir) {
-            if(key === location) data  = data.dir[key]
-          }
-        }
-      })
-
+    updateTable(matched: DirectoryData) {
       // Transform data
-      for (const [name, attr] of Object.entries(data.dir)) {
+      const dataMapped  = []
+      for (const [name, attr] of Object.entries(matched)) {
         const {id, size, mtime, dir} = attr
         const element: Document = {
           name,
@@ -78,6 +65,45 @@ export const useDocumentStore = defineStore({
       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: any = {}
+      traverseDir(this.root, "")
+      this.updateTable(matched)
+    },
+    setActualDocument(location: string){
+      location = decodeURIComponent(location)
+      this.loading = true
+      let data = this.root
+      const actualDirArr = []
+      try {
+        // Navigate to target folder
+        for (const dirname of location.split('/').slice(1)) {
+          if (!dirname) continue
+          actualDirArr.push(dirname)
+          data = data.dir[dirname]
+        }
+      } catch (error) {
+        console.error("Cannot show requested folder", location, actualDirArr.join('/'), error)
+      }
+      if (data.dir === undefined) {
+        // Target folder not available
+        this.document = []
+        this.loading = false  // ???
+        return
+      }
+      this.updateTable(data.dir)
+    },
     async setActualDocumentFile(path: string){
       this.loading = true;
       const file = await fetchFile(path)

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-1ae30b84.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=="
+    }
+  }
 }