Added Debouncing #36

frontend/pages/createDocument/index.vue

@@ -8,7 +8,6 @@
           class="hidden lg:block"
           icon="i-heroicons-funnel"
           placeholder="Suche..."
-          @change="tempStore.modifySearchString('createddocuments',searchString)"
           @keydown.esc="$event.target.blur()"
       >
         <template #trailing>
@@ -30,22 +29,7 @@
     </template>
   </UDashboardNavbar>
   <UDashboardToolbar>
-
-
     <template #right>
-<!--      <USelectMenu
-          v-model="selectedColumns"
-          :options="templateColumns"
-          by="key"
-          class="hidden lg:block"
-          icon="i-heroicons-adjustments-horizontal-solid"
-          multiple
-          @change="tempStore.modifyColumns('createddocuments',selectedColumns)"
-      >
-        <template #label>
-          Spalten
-        </template>
-      </USelectMenu>-->
       <USelectMenu
           v-if="selectableFilters.length > 0"
           v-model="selectedFilters"
@@ -157,6 +141,31 @@
 
 <script setup>
 import dayjs from "dayjs";
+import { ref, computed, watch } from 'vue';
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+const router = useRouter()
+
+const type = "createddocuments"
+const dataType = dataStore.dataTypes[type]
+
+const items = ref([])
+const selectedItem = ref(0)
+const activeTabIndex = ref(0)
+
+// Debounce-Logik für die Suche
+const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
+const debouncedSearchString = ref(searchString.value)
+let debounceTimeout = null
+
+watch(searchString, (newVal) => {
+  clearTimeout(debounceTimeout)
+  debounceTimeout = setTimeout(() => {
+    debouncedSearchString.value = newVal
+    tempStore.modifySearchString('createddocuments', newVal)
+  }, 300) // 300ms warten nach dem letzten Tastendruck
+})
 
 defineShortcuts({
   '/': () => {
@@ -168,10 +177,6 @@ defineShortcuts({
   'Enter': {
     usingInput: true,
     handler: () => {
-      // Zugriff auf das aktuell sichtbare Element basierend auf Tab und Selektion
-      const currentList = getRowsForTab(selectedTypes.value[activeTabIndex.value]?.key || 'drafts')
-
-      // Fallback auf globale Liste falls nötig, aber Logik sollte auf Tab passen
       if (filteredRows.value[selectedItem.value]) {
         router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
       }
@@ -193,17 +198,6 @@ defineShortcuts({
   }
 })
 
-const dataStore = useDataStore()
-const tempStore = useTempStore()
-const router = useRouter()
-
-const type = "createddocuments"
-const dataType = dataStore.dataTypes[type]
-
-const items = ref([])
-const selectedItem = ref(0)
-const activeTabIndex = ref(0)
-
 const setupPage = async () => {
   items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
 }
@@ -222,10 +216,9 @@ const templateColumns = [
   {key: "dueDate", label: "Fällig"}
 ]
 
-// Eigene Spalten für Entwürfe: Referenz raus, Status rein
 const draftColumns = [
   {key: 'type', label: "Typ"},
-  {key: 'state', label: "Status"}, // Status wieder drin
+  {key: 'state', label: "Status"},
   {key: 'partner', label: "Kunde"},
   {key: "date", label: "Erstellt am"},
   {key: "amount", label: "Betrag"}
@@ -242,31 +235,11 @@ const getColumnsForTab = (tabKey) => {
 }
 
 const templateTypes = [
-  {
+  { key: "drafts", label: "Entwürfe" },
-    key: "drafts",
+  { key: "invoices", label: "Rechnungen" },
-    label: "Entwürfe"
+  { key: "quotes", label: "Angebote" },
-  },
+  { key: "deliveryNotes", label: "Lieferscheine" },
-  {
+  { key: "confirmationOrders", label: "Auftragsbestätigungen" }
-    key: "invoices",
-    label: "Rechnungen"
-  },
-  /*,{
-    key: "cancellationInvoices",
-    label: "Stornorechnungen"
-  },{
-    key: "advanceInvoices",
-    label: "Abschlagsrechnungen"
-  },*/
-  {
-    key: "quotes",
-    label: "Angebote"
-  }, {
-    key: "deliveryNotes",
-    label: "Lieferscheine"
-  }, {
-    key: "confirmationOrders",
-    label: "Auftragsbestätigungen"
-  }
 ]
 const selectedTypes = ref(tempStore.filters["createddocuments"] ? tempStore.filters["createddocuments"] : templateTypes)
 const types = computed(() => {
@@ -274,10 +247,9 @@ const types = computed(() => {
 })
 
 const selectItem = (item) => {
-  console.log(item)
   if (item.state === "Entwurf") {
     router.push(`/createDocument/edit/${item.id}`)
-  } else if (item.state !== "Entwurf") {
+  } else {
     router.push(`/createDocument/show/${item.id}`)
   }
 }
@@ -286,24 +258,19 @@ const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
 }
 
-const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
-
 const clearSearchString = () => {
   tempStore.clearSearchString('createddocuments')
   searchString.value = ''
+  debouncedSearchString.value = ''
 }
+
 const selectableFilters = ref(dataType.filters.map(i => i.name))
 const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
 
 const filteredRows = computed(() => {
   let tempItems = items.value.filter(i => types.value.find(x => {
-    // 1. Draft Tab Logic
     if (x.key === 'drafts') return i.state === 'Entwurf'
-
-    // 2. Global Draft Exclusion (drafts shouldn't be in other tabs)
     if (i.state === 'Entwurf' && x.key !== 'drafts') return false
-
-    // 3. Normal Type Logic
     if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type)
     return x.key === i.type
   }))
@@ -324,22 +291,16 @@ const filteredRows = computed(() => {
     })
   }
 
-  tempItems = useSearch(searchString.value, tempItems)
+  // Hier nutzen wir nun den debounced Wert für die lokale Suche
-
+  const results = useSearch(debouncedSearchString.value, tempItems.slice().reverse())
-  return useSearch(searchString.value, tempItems.slice().reverse())
+  return results
 })
 
 const getRowsForTab = (tabKey) => {
   return filteredRows.value.filter(row => {
-    if (tabKey === 'drafts') {
+    if (tabKey === 'drafts') return row.state === 'Entwurf'
-      return row.state === 'Entwurf'
-    }
-
     if (row.state === 'Entwurf') return false
-
+    if (tabKey === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
-    if (tabKey === 'invoices') {
-      return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
-    }
     return row.type === tabKey
   })
 }
@@ -349,7 +310,4 @@ const isPaid = (item) => {
   item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
   return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
 }
-</script>
+</script>
-
-<style scoped>
-</style>