Feature/150 aanduidingsobjecten filter (#152)

* update placeholder * tweak ao search * zet min chars lager om op id's te kunnen zoeken * simplify return * #150 fix aanduidingsobjecten filter * #150 fix aanduidingsobjecten filter * #150 cleanup * #150 placeholder, fix text queryparam * fix filter stories * simplify return --------- Co-authored-by: Vanderhaegen Cedrik <[email protected]>
OnroerendErfgoed · Nov 14, 2023 · e701d1c · e701d1c
1 parent 013c7c4
commit e701d1c
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 17 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;
@@ -105,7 +107,8 @@ watch(
     } 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
@@ -4,13 +4,15 @@
     data-cy="filter-aanduidingsobject"
     :callback-fn="performAutocompleteSearch"
     :value="aanduidingsobjectValue"
+    placeholder="Geef naam of id in"
     @update:value="updateValue"
   ></oe-autocomplete>
 </template>
 
 <script setup lang="ts">
 import OeAutocomplete from '../dumb/OeAutocomplete.vue';
-import { computed, ref } from 'vue';
+import { toRef } from '@vueuse/core';
+import { ref, watch } from 'vue';
 import { InventarisApiService } from '@services/inventaris-api.service';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IESAanduidingsobject, IFilterAanduidingsobjectProps } from '@models/index';
@@ -20,32 +22,35 @@ const props = withDefaults(defineProps<IFilterAanduidingsobjectProps>(), {
   api: '',
   value: '',
 });
+const inputValue = toRef(props, 'value');
+
 const emit = defineEmits(['update:value']);
 
 const inventarisApiService = new InventarisApiService(props.api);
 
 const aanduidingsobjecten = ref<IESAanduidingsobject[]>([]);
-const aanduidingsobjectValue = computed(() => {
-  const aanduidingsobject = aanduidingsobjecten?.value.find((g) => g.uri === props.value);
-  const autocompleteOption: IAutocompleteOption = {
-    title: aanduidingsobject?.titel as string,
-    value: aanduidingsobject,
-  };
-  return autocompleteOption;
+
+const aanduidingsobjectValue = ref<IAutocompleteOption<IESAanduidingsobject>>();
+
+watch(inputValue, () => {
+  if (!inputValue?.value) {
+    aanduidingsobjectValue.value = undefined;
+  }
 });
 
-const updateValue = (value: IESAanduidingsobject) => emit('update:value', value);
+const updateValue = (value: IAutocompleteOption<IESAanduidingsobject>) => {
+  aanduidingsobjectValue.value = value;
+  emit('update:value', value);
+};
 const performAutocompleteSearch = async (searchTerm: string): Promise<IAutocompleteOption[]> => {
   try {
-    aanduidingsobjecten.value = await inventarisApiService.getAanduidingsobjecten(searchTerm);
-    const autocompleteData: IAutocompleteOption[] = aanduidingsobjecten.value.map((ao) => {
+    aanduidingsobjecten.value = await inventarisApiService.getAanduidingsobjecten(`${searchTerm}*`);
+    return aanduidingsobjecten.value.map((ao) => {
       return {
         title: ao.titel,
         value: ao.uri,
       };
     });
-
-    return autocompleteData;
   } catch (error) {
     console.error('Error fetching autocomplete data:', error);
     return Promise.resolve([]);

diff --git a/src/stories/smart-components/filter-aoe-actor.stories.ts b/src/stories/smart-components/filter-aoe-actor.stories.ts
@@ -64,4 +64,19 @@ export const Default: Story = {
     api: 'https://dev-actoren.onroerenderfgoed.be',
     id: 'my-id',
   },
+  render: () => ({
+    components: {
+      FilterAOEActor,
+    },
+    setup() {
+      const api = 'https://dev-actoren.onroerenderfgoed.be';
+      const getSsoToken = async () => 'vul hier bearer token in';
+      return { api, getSsoToken };
+    },
+    template: `
+    <div>
+      <filter-a-o-e-actor :api="api" :get-sso-token="getSsoToken" />
+    </div>
+    `,
+  }),
 };
diff --git a/src/stories/smart-components/filter-gemeente.stories.ts b/src/stories/smart-components/filter-gemeente.stories.ts
@@ -1,5 +1,6 @@
 import '@/scss/main.scss';
 import FilterGemeente from '../../components/smart/FilterGemeente.vue';
+import type { IGemeente } from '../../models';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
@@ -42,6 +43,25 @@ const meta: Meta<typeof FilterGemeente> = {
       },
     },
   },
+  render: (args) => ({
+    components: { FilterGemeente },
+    inheritAttrs: false,
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+      <Suspense>
+        <FilterGemeente v-bind="args" @update:value="onUpdateGemeente" />
+      </Suspense>
+      </div>
+    `,
+    methods: {
+      onUpdateGemeente(payload: IGemeente) {
+        args.value = payload.niscode;
+      },
+    },
+  }),
 };
 
 export default meta;

diff --git a/src/stories/smart-components/filter-provincie.stories.ts b/src/stories/smart-components/filter-provincie.stories.ts
@@ -1,5 +1,6 @@
 import '@/scss/main.scss';
 import FilterProvincie from '../../components/smart/FilterProvincie.vue';
+import type { IProvincie } from '../../models';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
@@ -42,6 +43,25 @@ const meta: Meta<typeof FilterProvincie> = {
       },
     },
   },
+  render: (args) => ({
+    components: { FilterProvincie },
+    inheritAttrs: false,
+    setup() {
+      return { args };
+    },
+    template: `
+      <div>
+      <Suspense>
+        <FilterProvincie v-bind="args" @update:value="onUpdateProvincie" />
+      </Suspense>
+      </div>
+    `,
+    methods: {
+      onUpdateProvincie(payload: IProvincie) {
+        args.value = payload.niscode;
+      },
+    },
+  }),
 };
 
 export default meta;