#150 fix aanduidingsobjecten filter

OnroerendErfgoed · Nov 13, 2023 · a744889 · a744889
1 parent 013c7c4
commit a744889
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/dumb/OeAutocomplete.vue b/src/components/dumb/OeAutocomplete.vue
@@ -9,7 +9,7 @@
     ></vl-input-field>
     <span v-if="loading" class="vl-loader vl-loader--small" data-cy="loader" />
 
-    <div v-if="showResults && searchTerm?.length >= props.minChars" class="vl-autocomplete" data-cy="result">
+    <div v-if="showResults && searchTerm?.length >= minChars" class="vl-autocomplete" data-cy="result">
       <div class="vl-autocomplete__list-wrapper">
         <div class="vl-autocomplete__list">
           <template v-if="loading">
@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 import { VlInputField } from '@govflanders/vl-ui-design-system-vue3';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { vClickOutside } from '@directives/click-outside.directive';
 import type { IAutocompleteOption, IAutocompleteProps } from '@models/autocomplete';
 
@@ -61,6 +61,8 @@ const loading = ref(false);
 const options = ref<IAutocompleteOption[]>([]);
 const showResults = ref(false);
 
+const minChars = computed(() => (isNaN(parseInt(searchTerm.value, 10)) ? props.minChars : 1));
+
 const handleInput = (value: string) => {
   searchTerm.value = value;
   showResults.value = true;
@@ -85,7 +87,7 @@ const fetchData = async (searchTerm: string) => {
 };
 
 watch(searchTerm, async () => {
-  if (searchTerm.value?.length >= props.minChars) {
+  if (searchTerm.value?.length >= minChars.value) {
     loading.value = true;
     const data = await fetchData(searchTerm.value);
     options.value = data;
@@ -99,13 +101,15 @@ watch(searchTerm, async () => {
 watch(
   () => props.value,
   () => {
+    console.log('oeautocomplete props.value changed', props.value);
     if (selectedOption.value && !props.value?.value) {
       searchTerm.value = '';
       selectedOption.value = undefined;
     } else if (props.value?.title) {
       searchTerm.value = props.value?.title;
     }
-  }
+  },
+  { deep: true }
 );
 </script>
 

diff --git a/src/components/smart/FilterAanduidingsobject.vue b/src/components/smart/FilterAanduidingsobject.vue
@@ -37,7 +37,8 @@ const aanduidingsobjectValue = computed(() => {
 const updateValue = (value: IESAanduidingsobject) => emit('update:value', value);
 const performAutocompleteSearch = async (searchTerm: string): Promise<IAutocompleteOption[]> => {
   try {
-    aanduidingsobjecten.value = await inventarisApiService.getAanduidingsobjecten(searchTerm);
+    const result = await inventarisApiService.getAanduidingsobjecten(searchTerm);
+    aanduidingsobjecten.value = result.length ? result : aanduidingsobjecten.value;
     const autocompleteData: IAutocompleteOption[] = aanduidingsobjecten.value.map((ao) => {
       return {
         title: ao.titel,