Fixing typescript typings

Added debounce for filter component

Author: johnsimons

src/Frontend/package-lock.json

@@ -26,6 +26,7 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",
     "moment": "^2.30.1",
@@ -48,6 +49,7 @@
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
+    "@types/lodash": "^4.17.16",
     "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vitest/coverage-v8": "^3.0.9",

src/Frontend/package.json

@@ -1,16 +1,23 @@
 <script setup lang="ts">
+import { ref, watch } from "vue";
+import debounce from "lodash/debounce";
+
 const model = defineModel<string>({ required: true });
-defineProps({
-  placeholder: {
-    type: String,
-    default: "Filter by name...", // Default value
-  },
+const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "filter by name" });
+const localInput = ref<string>(model.value);
+
+const debounceUpdateModel = debounce((value: string) => {
+  model.value = value;
+}, 600);
+
+watch(localInput, (newValue) => {
+  debounceUpdateModel(newValue);
 });
 </script>
 
 <template>
   <div role="search" aria-label="filter" class="filter-input">
-    <input type="search" :placeholder="placeholder" aria-label="filter by name" class="form-control-static filter-input" v-model="model" />
+    <input type="search" :placeholder="props.placeholder" :aria-label="ariaLabel" class="form-control-static filter-input" v-model="localInput" />
   </div>
 </template>
 

src/Frontend/src/components/FilterInput.vue

@@ -28,7 +28,7 @@ const filteredHeaders = computed(() => {
         <div class="text-search-container">
           <div class="text-search">
             <div class="filter-group">
-              <FilterInput v-model="searchTerm" aria-label="Filter by name" :placeholder="'Search for a header key or value...'" />
+              <FilterInput v-model="searchTerm" :aria-label="`Search for a header key or value`" :placeholder="'Search for a header key or value...'" />
             </div>
           </div>
         </div>