Added Search to Files

pages/files/index.vue

@@ -7,6 +7,7 @@ import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
 import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
 import dayjs from "dayjs";
 import arraySort from "array-sort";
+import {useTempStore} from "~/stores/temp.js";
 
 definePageMeta({
   middleware: "auth"
@@ -53,6 +54,7 @@ defineShortcuts({
 })
 
 const dataStore = useDataStore()
+const tempStore = useTempStore()
 const profileStore = useProfileStore()
 const supabase = useSupabaseClient()
 const router = useRouter()
@@ -284,6 +286,7 @@ const downloadSelected = async () => {
   link.click();
 }
 
+const searchString = ref(tempStore.searchStrings["files"] ||'')
 const renderedFileList = computed(() => {
     let files = filteredDocuments.value.map(i => {
       return {
@@ -307,6 +310,11 @@ const renderedFileList = computed(() => {
       }
     }, {reverse: true})
 
+    if(searchString.value.length > 0) {
+      files = useSearch(searchString.value, files)
+    }
+
+
     let folders = currentFolders.value.map(i => {
       return {
         label: i.name,
@@ -347,6 +355,11 @@ const selectAll = () => {
   }
 }
 
+const clearSearchString = () => {
+  tempStore.clearSearchString("files")
+  searchString.value = ''
+}
+
 
 
 </script>
@@ -355,7 +368,31 @@ const selectAll = () => {
 
   <UDashboardNavbar
       title="Dateien"
-  ></UDashboardNavbar>
+  >
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+          @change="tempStore.modifySearchString('files',searchString)"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
+      <UButton
+          icon="i-heroicons-x-mark"
+          variant="outline"
+          color="rose"
+          @click="clearSearchString()"
+          v-if="searchString.length > 0"
+      />
+    </template>
+  </UDashboardNavbar>
   <UDashboardToolbar>
     <template #left>
       <UBreadcrumb