Release 0.11.0

cypress/fixtures/actoren.json

@@ -0,0 +1,33 @@
+[{
+    "id": 12564,
+    "uri": "https://dev-id.erfgoed.net/actoren/12564",
+    "self": "https://dev-actoren.onroerenderfgoed.be/actoren/12564",
+    "type": {
+        "id": 1,
+        "naam": "persoon",
+        "uri": "foaf:Person"
+    },
+    "zichtbaarheid": {
+        "id": 1,
+        "naam": "privaat"
+    },
+    "omschrijving": "Van Humbeeck, Astrid",
+    "naam": "Van Humbeeck",
+    "voornaam": "Astrid",
+    "status": {
+        "id": 75,
+        "status": "Actief"
+    },
+    "systemfields": {
+        "created_at": "2020-10-16T14:03:24.911936+02:00",
+        "created_by": {
+            "uri": "https://dev-id.erfgoed.net/actoren/12495",
+            "description": "Toelatingen Beschermd Erfgoed Aanvragen"
+        },
+        "updated_at": "2023-05-05T13:12:06.836065+02:00",
+        "updated_by": {
+            "uri": "https://dev-id.erfgoed.net/actoren/12564",
+            "description": "Van Humbeeck, Astrid"
+        }
+    }
+}]

package.json

@@ -7,7 +7,7 @@
   "main": "./dist/vue-components.umd.js",
   "module": "./dist/vue-components.es.js",
   "typings": "./dist/src/main.d.ts",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",

src/__tests__/FilterAOEActor.cy.ts

@@ -0,0 +1,39 @@
+import FilterAOEActor from '../components/smart/FilterAOEActor.vue';
+import { defineComponent, ref } from 'vue';
+import type { IActor } from '@models/actor';
+
+describe('FilterAanduidingsobject', () => {
+  describe('default', () => {
+    const TestComponent = defineComponent({
+      components: { FilterAOEActor },
+      setup() {
+        const actorValue = ref<IActor>();
+        const setValue = (value: IActor) => (actorValue.value = value);
+        const getSsoToken = async () => 'Bearer ' + 1;
+        return { actorValue, setValue, getSsoToken };
+      },
+      template:
+        '<filter-AOE-actor api="https://dev-actoren.onroerenderfgoed.be" :get-sso-token="getSsoToken" :value="actorValue" @update:value="setValue"/>',
+    });
+
+    it('fetches wij actoren, filter and assign the chosen filter to the corresponding data value', () => {
+      cy.intercept('GET', 'https://dev-actoren.onroerenderfgoed.be/**', { fixture: 'actoren.json' }).as('dataGet');
+
+      cy.mount(TestComponent).then(({ component }) => {
+        cy.dataCy('filter-actor').type('Astrid');
+        cy.wait('@dataGet').then(() => {
+          cy.dataCy('filter-actor')
+            .find('.vl-autocomplete__cta')
+            .first()
+            .click()
+            .then(() => {
+              expect(component.actorValue).to.deep.equal({
+                title: 'Van Humbeeck, Astrid',
+                value: 'https://dev-id.erfgoed.net/actoren/12564',
+              });
+            });
+        });
+      });
+    });
+  });
+});

src/__tests__/OeAutocomplete.cy.ts

@@ -85,6 +85,9 @@ describe('Autocomplete', () => {
                   {
                     title: 'dummy',
                   },
+                  {
+                    title: 'random',
+                  },
                 ].filter((item) => item.title.includes(searchTerm))
               );
             }, 1000);
@@ -126,6 +129,26 @@ describe('Autocomplete', () => {
         .invoke('text')
         .should('equal', 'Doe een nieuwe zoekopdracht');
     });
+
+    it('uses the callback again after selecting an option', () => {
+      cy.mount(TestComponent);
+
+      cy.dataCy('autocomplete').type('dummy').wait(1000).find('.vl-autocomplete__cta').click();
+      cy.dataCy('autocomplete-input').clear();
+
+      cy.dataCy('autocomplete')
+        .type('rand')
+        .wait(1000)
+        .find('.vl-autocomplete__list-wrapper')
+        .should('exist')
+        .find('.vl-autocomplete__list')
+        .should('exist')
+        .find('.vl-autocomplete__cta')
+        .should('exist')
+        .should('have.length', 1)
+        .invoke('text')
+        .should('equal', 'random');
+    });
   });
 
   describe('Autoselect', () => {

src/components/dumb/OeAutocomplete.vue

@@ -2,6 +2,7 @@
   <div :id="`autocomplete-${props.id}`" v-click-outside="hideResults" data-cy="autocomplete" class="js-vl-autocomplete">
     <vl-input-field
       v-model="searchTerm"
+      data-cy="autocomplete-input"
       :placeholder="props.placeholder"
       mod-block
       @update:model-value="handleInput"
@@ -84,7 +85,7 @@ const fetchData = async (searchTerm: string) => {
 };
 
 watch(searchTerm, async () => {
-  if (searchTerm.value?.length >= props.minChars && !selectedOption.value) {
+  if (searchTerm.value?.length >= props.minChars) {
     loading.value = true;
     const data = await fetchData(searchTerm.value);
     options.value = data;

src/components/smart/FilterAOEActor.vue

@@ -1,55 +1,56 @@
 <template>
-  <vl-multiselect
+  <oe-autocomplete
+    :id="props.id"
     data-cy="filter-actor"
-    placeholder="Actor"
-    :mod-multiple="false"
-    :options="actoren"
-    :preserve-search="true"
+    :callback-fn="performAutocompleteSearch"
     :value="actorValue"
     @update:value="updateValue"
-    :custom-label="customActorLabel"
-    @keydown.tab="!props.value ? $event.preventDefault() : null"
-  >
-    <template #noResult>
-      <span>Geen actoren gevonden...</span>
-    </template>
-    <template #noOptions>
-      <span>Geen opties beschikbaar</span>
-    </template>
-  </vl-multiselect>
+  ></oe-autocomplete>
 </template>
 
 <script setup lang="ts">
-import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
-import { sortBy } from 'lodash';
-import { computed, onBeforeMount, ref } from 'vue';
+import OeAutocomplete from '../dumb/OeAutocomplete.vue';
+import { computed, ref } from 'vue';
 import { ActorService } from '@services/actor.service';
 import type { IActor } from '@models/actor';
+import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IFilterActorProps } from '@models/index';
 
 const props = withDefaults(defineProps<IFilterActorProps>(), {
+  id: '',
   api: '',
-  actoren: undefined,
+  value: '',
   getSsoToken: undefined,
-  value: undefined,
 });
 const emit = defineEmits(['update:value']);
 
+const actorService = new ActorService(props.api, props.getSsoToken);
+
+const actoren = ref<IActor[]>([]);
 const actorValue = computed(() => {
-  return actoren.value.length ? actoren.value.find((actor) => actor.uri === props.value) : undefined;
+  const actor = actoren?.value.find((g) => g.uri === props.value);
+  const autocompleteOption: IAutocompleteOption = {
+    title: actor?.omschrijving as string,
+    value: actor,
+  };
+  return autocompleteOption;
 });
-const updateValue = (value: IActor) => emit('update:value', value);
 
-const actorService = new ActorService(props.api, props.getSsoToken);
-const actoren = ref<IActor[]>([]);
-const customActorLabel = (option: IActor) => option.omschrijving;
+const updateValue = (value: IActor) => emit('update:value', value);
+const performAutocompleteSearch = async (searchTerm: string): Promise<IAutocompleteOption[]> => {
+  try {
+    actoren.value = await actorService.getAOEActoren(searchTerm);
+    const autocompleteData: IAutocompleteOption[] = actoren.value.map((actor) => {
+      return {
+        title: actor.omschrijving,
+        value: actor.uri,
+      };
+    });
 
-onBeforeMount(async () => {
-  if (props.actoren) {
-    actoren.value = sortBy(props.actoren, 'omschrijving');
-  } else {
-    const apiActoren = await actorService.getAOEActoren();
-    actoren.value = sortBy(apiActoren, 'omschrijving');
+    return autocompleteData;
+  } catch (error) {
+    console.error('Error fetching autocomplete data:', error);
+    return Promise.resolve([]);
   }
-});
+};
 </script>

src/models/actor.ts

@@ -1,24 +1,142 @@
 import type { ISystemFields } from './system-fields';
 
 export interface IActor {
+  adres: IActorAdres;
+  adressen: IActorAdres[];
+  afkorting: string;
+  emails: IEmail[];
+  erkenningen: IErkenning[];
   id: number;
-  uri: string;
+  ids: IId[];
+  info: unknown[];
+  naam: string;
+  omschrijving: string;
+  opmerkingen: string;
+  relaties: IRelatie[];
   self: string;
-  type: {
-    id: number;
-    naam: string;
-    uri: string;
-  };
-  zichtbaarheid: {
-    id: number;
-    naam: string;
-  };
+  status: IActorStatus;
+  systemfields: ISystemFields;
+  telefoons: ITelefoon[];
+  type: IType;
+  types: string[];
+  uri: string;
+  urls: string[];
+  voornaam: string;
+  zichtbaarheid: IType;
+}
+
+interface IActorAdres {
+  gemeente: IGemeente;
+  land: ILand;
+  postcode: IPostcode;
+  straat: IStraat;
+  adres: IAdresregisterAdres;
+}
+
+interface ILand {
+  code: string;
+  naam: string;
+}
+
+interface IGemeente {
+  id?: number;
+  naam: string;
+  niscode: string;
+  provincie?: IProvincie;
+}
+
+interface IPostcode {
+  nummer: string;
+  uri: string;
+}
+
+interface IStraat {
+  id: string;
+  naam: string;
+  uri: string;
   omschrijving: string;
+}
+
+interface IAdresregisterAdres {
+  id?: string;
+  huisnummer?: string;
+  busnummer?: string;
+  uri?: string;
+}
+
+interface IProvincie {
+  niscode: string;
   naam: string;
-  voornaam: string;
-  status: {
-    id: number;
-    status: string;
-  };
-  systemfields: ISystemFields;
+  gewest: IGewest;
+}
+
+interface IGewest {
+  naam: string;
+  niscode: string;
+}
+
+interface IEmail {
+  email: string;
+  type: IType;
+}
+
+interface IType {
+  id: number;
+  naam: string;
+  uri?: string;
+}
+
+interface IErkenning {
+  erkend_als: string;
+  erkend_voor: string;
+  erkenningsnummer: string;
+  geldigheid: string;
+  id: number;
+  omschrijving: string;
+  reden_erkenning: IRedenErkenning;
+  type: string;
+  type_erkenning_id: number;
+  uri: string;
+}
+
+interface IRedenErkenning {
+  id: number;
+  reden_erkenning: string;
+}
+
+interface IId {
+  extra_id: string;
+  type: IType;
+}
+
+interface IRelatie {
+  einddatum: string;
+  id: number;
+  omschrijving: string;
+  startdatum: string;
+  type: IType;
+}
+
+interface IActorStatus {
+  datum: string;
+  gebruiker: IActorStatusGebruiker;
+  opmerkingen: string;
+  status: IActorStatusStatus;
+}
+
+interface IActorStatusGebruiker {
+  uri: string;
+  omschrijving: string;
+}
+
+interface IActorStatusStatus {
+  id: number;
+  status: string;
+}
+
+interface ITelefoon {
+  landcode: string;
+  nummer: string;
+  type: IType;
+  volledig_nummer: string;
 }

src/models/filter-input.ts

@@ -46,10 +46,10 @@ export interface IFilterGemeenteProps {
 }
 
 export interface IFilterActorProps {
+  id: string;
   api: string;
-  actoren?: IActor[];
-  getSsoToken: () => Promise<string>;
   value?: string;
+  getSsoToken: () => Promise<string>;
 }
 
 export interface IFilterProvincieProps {