Merge pull request #228 from OnroerendErfgoed/develop

release 1.4.0

.pre-commit-config.yaml

@@ -5,26 +5,19 @@ repos:
       - id: check-yaml
       - id: end-of-file-fixer
       - id: trailing-whitespace
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.9-for-vscode
+  - repo: local
     hooks:
       - id: prettier
-        additional_dependencies:
-          - [email protected]
+        name: run format
+        language: system
+        entry: bash -c 'yarn format'
+        pass_filenames: false
         types_or: [ts, javascript, scss, css, yaml, json, vue]
-  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.56.0
+  - repo: local
     hooks:
-      - id: eslint
-        additional_dependencies:
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - [email protected]
-          - '@vue/[email protected]'
-          - '@vue/[email protected]'
-        files: \.[jt]sx|\.vue?$ # *.js, *.jsx, *.ts, *.tsx and *.vue
-        types: [file]
+      - id: lint
+        name: run lint
+        language: system
+        entry: bash -c 'yarn lint'
+        pass_filenames: false
+        types_or: [ts, javascript, scss, css, yaml, json, vue]

.storybook/preview.ts

@@ -5,6 +5,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { VlUiCore, VlUiUtil } from '@govflanders/vl-ui-design-system-vue3';
 import { setup } from '@storybook/vue3';
+import { createPinia } from 'pinia';
 import type { Preview } from '@storybook/vue3';
 
 library.add(fas);
@@ -14,6 +15,7 @@ library.add(fab);
 setup((app) => {
   app.use(VlUiCore);
   app.use(VlUiUtil);
+  app.use(createPinia());
 });
 
 const preview: Preview = {

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": "1.3.0",
+  "version": "1.4.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",
@@ -64,12 +64,15 @@
     "ag-grid-community": "^29.3.5",
     "ag-grid-vue3": "^29.3.5",
     "axios": "^1.4.0",
+    "axios-mock-adapter": "^1.22.0",
     "date-fns": "^2.30.0",
+    "guid-typescript": "^1.0.9",
     "libphonenumber-js": "^1.10.37",
     "lodash": "^4.17.21",
     "ol": "^7.4.0",
     "ol-contextmenu": "^5.2.1",
     "ol-ext": "^4.0.10",
+    "pinia": "^2.1.7",
     "proj4": "^2.9.0",
     "pyoes": "https://gitpkg.now.sh/OnroerendErfgoed/pyoes/npm-packages/pyoes?0.18.0",
     "uuid": "^9.0.0",

src/__tests__/InputPhone.cy.ts

@@ -1,6 +1,6 @@
-import type { CountryCode } from 'libphonenumber-js';
 import { defineComponent, ref } from 'vue';
 import InputPhone from '@components/dumb/InputPhone.vue';
+import type { CountryCode } from 'libphonenumber-js';
 
 const TestComponent = defineComponent({
   components: { InputPhone },

src/__tests__/OeInventarisLink.cy.ts

@@ -0,0 +1,62 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { mount } from 'cypress/vue';
+import { defineComponent, useAttrs } from 'vue';
+import OeInventarisLink from '@components/smart/OeInventarisLink.vue';
+import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming, ILinks } from '@models/links';
+
+const WAARNEMING_API =
+  'https://dev-inventaris.onroerenderfgoed.be/gebeurtenissen?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226';
+const GEBEURTENIS_API =
+  'https://dev-inventaris.onroerenderfgoed.be/waarnemingsobjecten?bron_referentie_uri=https://dev-id.erfgoed.net/dossiers/158226';
+
+const mock = new MockAdapter(axios);
+
+const TestComponent = defineComponent({
+  components: { OeInventarisLink },
+  setup() {
+    const attrs = useAttrs();
+    return { attrs };
+  },
+  template: '<OeInventarisLink v-bind="attrs"></OeInventarisLink>',
+});
+
+describe('OeInventarisLink - no data', () => {
+  const getSsoToken = async () => 1;
+  it('renders', () => {
+    mount(TestComponent, { props: { links: undefined, getSsoToken: getSsoToken } });
+  });
+
+  it('shows the links when urls are available', () => {
+    mock.onGet(WAARNEMING_API).reply(200, [
+      { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' },
+      { id: 2, naam: 'Kardinaal Mercierlaan 67, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/2' },
+    ] as IInventarisLinkWaarneming[]);
+    mock.onGet(GEBEURTENIS_API).reply(200, [
+      {
+        id: 1,
+        titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven',
+        uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1',
+      },
+      {
+        id: 2,
+        titel: 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven',
+        uri: 'https://dev-id.erfgoed.net/gebeurtenissen/2',
+      },
+    ] as IInventarisLinkGebeurtenis[]);
+    const links = {
+      relaties: {
+        waarnemingen: {
+          href: WAARNEMING_API,
+        },
+        gebeurtenissen: {
+          href: GEBEURTENIS_API,
+        },
+      },
+    } as ILinks;
+    mount(TestComponent, { props: { links: links, getSsoToken: getSsoToken } });
+
+    cy.dataCy('gekoppelde-waarnemingen-title').should('have.text', 'Gekoppelde waarnemingen');
+    cy.dataCy('gekoppelde-gebeurtenissen-title').should('have.text', 'Gekoppelde gebeurtenissen');
+  });
+});

src/__tests__/OeInventarisLoadedLink.cy.ts

@@ -0,0 +1,51 @@
+import { mount } from 'cypress/vue';
+import { defineComponent, useAttrs } from 'vue';
+import OeInventarisLoadedLink from '@components/dumb/OeInventarisLoadedLink.vue';
+
+const TestComponent = defineComponent({
+  components: { OeInventarisLoadedLink },
+  setup() {
+    const attrs = useAttrs();
+    return { attrs };
+  },
+  template: '<OeInventarisLoadedLink v-bind="attrs"></OeInventarisLoadedLink>',
+});
+
+describe('OeInventarisLoadedLink - no data', () => {
+  it('renders', () => {
+    mount(TestComponent, { props: { gebeurtenissen: undefined, waarnemingen: undefined } });
+  });
+
+  it('shows the correct no data shown text', () => {
+    mount(TestComponent, { props: { gebeurtenissen: undefined, waarnemingen: undefined } });
+    cy.dataCy('geen-gekoppelde-waarnemingen').should('have.text', 'Geen gekoppelde waarnemingen beschikbaar.');
+    cy.dataCy('geen-gekoppelde-gebeurtenissen').should('have.text', 'Geen gekoppelde gebeurtenissen beschikbaar.');
+  });
+
+  it('shows the gebeurtenissen and waarnemingen', () => {
+    const gebeurtenissen = [
+      {
+        id: 1,
+        titel: 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven',
+        uri: 'https://dev-id.erfgoed.net/gebeurtenissen/1',
+      },
+      {
+        id: 2,
+        titel: 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven',
+        uri: 'https://dev-id.erfgoed.net/gebeurtenissen/2',
+      },
+    ];
+    const waarnemingen = [
+      { id: 1, naam: 'Kardinaal Mercierlaan 66, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/1' },
+      { id: 2, naam: 'Kardinaal Mercierlaan 67, Leuven', uri: 'https://dev-id.erfgoed.net/waarnemingen/2' },
+    ];
+    mount(TestComponent, { props: { gebeurtenissen: gebeurtenissen, waarnemingen: waarnemingen } });
+
+    cy.dataCy('gekoppelde-waarnemingen-title').should('have.text', 'Gekoppelde waarnemingen');
+    cy.dataCy('gekoppelde-gebeurtenissen-title').should('have.text', 'Gekoppelde gebeurtenissen');
+    cy.dataCy('waarneming-link-1').should('have.text', 'Kardinaal Mercierlaan 66, Leuven (1)');
+    cy.dataCy('gebeurtenis-link-1').should('have.text', 'Toevalsvondst Kardinaal Mercierlaan 66, Leuven (1)');
+    cy.dataCy('waarneming-link-2').should('have.text', 'Kardinaal Mercierlaan 67, Leuven (2)');
+    cy.dataCy('gebeurtenis-link-2').should('have.text', 'Toevalsvondst Kardinaal Mercierlaan 67, Leuven (2)');
+  });
+});

src/__tests__/OeZoneerder.cy.ts

@@ -1,8 +1,8 @@
 /* eslint-disable vue/one-component-per-file */
 import { defineComponent } from 'vue';
 import { LayerType } from '@/models';
-import type { OeZoneerderProps } from '@/models';
 import { OeZoneerder } from '@components/smart';
+import type { OeZoneerderProps } from '@/models';
 
 describe('OeZoneerder', () => {
   describe('default', () => {

src/components/dumb/OeInventarisLoadedLink.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="vl-u-spacer-bottom">
+    <template v-if="props.waarnemingen?.length > 0">
+      <h5 class="vl-title vl-title--h5" data-cy="gekoppelde-waarnemingen-title">Gekoppelde waarnemingen</h5>
+      <a
+        v-for="waarneming of props.waarnemingen"
+        :key="waarneming.id"
+        class="vl-u-display-block"
+        target="_blank"
+        :data-cy="'waarneming-link-' + waarneming.id"
+        :href="waarneming.uri"
+        >{{ waarneming.naam }} ({{ waarneming.id }})</a
+      >
+    </template>
+    <template v-else>
+      <span data-cy="geen-gekoppelde-waarnemingen">Geen gekoppelde waarnemingen beschikbaar.</span>
+    </template>
+  </div>
+  <div class="vl-u-spacer-bottom">
+    <template v-if="props.gebeurtenissen?.length > 0">
+      <h5 class="vl-title vl-title--h5" data-cy="gekoppelde-gebeurtenissen-title">Gekoppelde gebeurtenissen</h5>
+      <a
+        v-for="gebeurtenis of props.gebeurtenissen"
+        :key="gebeurtenis.id"
+        class="vl-u-display-block"
+        target="_blank"
+        :href="gebeurtenis.uri"
+        :data-cy="'gebeurtenis-link-' + gebeurtenis.id"
+        >{{ gebeurtenis.titel }} ({{ gebeurtenis.id }})</a
+      >
+    </template>
+    <template v-else>
+      <span data-cy="geen-gekoppelde-gebeurtenissen">Geen gekoppelde gebeurtenissen beschikbaar.</span>
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import type { IInventarisLinkGebeurtenis, IInventarisLinkWaarneming } from '@models/links';
+
+interface IOeInventarisLoadedLink {
+  gebeurtenissen: IInventarisLinkGebeurtenis[];
+  waarnemingen: IInventarisLinkWaarneming[];
+}
+
+const props = withDefaults(defineProps<IOeInventarisLoadedLink>(), {
+  waarnemingen: undefined,
+  gebeurtenissen: undefined,
+});
+</script>

src/components/dumb/OeToaster.vue

@@ -0,0 +1,36 @@
+<template>
+  <vl-toaster mod-top-right>
+    <vl-alert
+      v-for="toast in store.toasts"
+      :key="toast.id"
+      mod-small
+      :icon="toast.type === 'success' ? 'check' : 'warning'"
+      :mod-error="toast.type === 'error'"
+      :mod-success="toast.type === 'success'"
+      :mod-warning="toast.type === 'warning'"
+      mod-fade-out
+      closable
+      close-text="Toast sluiten"
+      :title="toast.title"
+      @close="store.removeToast(toast?.id as string)"
+    >
+      <template v-if="typeof toast.content === 'string'">
+        {{ toast.content }}
+      </template>
+      <template v-else>
+        <ul>
+          <li v-for="message in toast.content" :key="message">
+            {{ message }}
+          </li>
+        </ul>
+      </template>
+    </vl-alert>
+  </vl-toaster>
+</template>
+
+<script setup lang="ts">
+import { VlAlert, VlToaster } from '@govflanders/vl-ui-design-system-vue3';
+import { useUtilStore } from '@/composables';
+
+const store = useUtilStore();
+</script>

src/components/dumb/index.ts

@@ -11,9 +11,11 @@ import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
+import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
 import OeLoader from './OeLoader.vue';
 import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
+import OeToaster from './OeToaster.vue';
 import OeWizard from './OeWizard.vue';
 import SystemFields from './SystemFields.vue';
 
@@ -31,9 +33,11 @@ export {
   OeContainer,
   OeGrid,
   OeHeader,
+  OeInventarisLoadedLink,
   OeLoader,
   OeSelect,
   OeTinyMce,
+  OeToaster,
   OeWizard,
   SystemFields,
 };

src/components/smart/FilterAOEActor.vue

@@ -11,10 +11,10 @@
 <script setup lang="ts">
 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';
-import { ActorService } from '@services/actor.service';
 
 const props = withDefaults(defineProps<IFilterActorProps>(), {
   id: '',

src/components/smart/FilterAanduidingsobject.vue

@@ -13,9 +13,9 @@
 import OeAutocomplete from '../dumb/OeAutocomplete.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';
-import { InventarisApiService } from '@services/inventaris-api.service';
 
 const props = withDefaults(defineProps<IFilterAanduidingsobjectProps>(), {
   id: '',

src/components/smart/FilterGemeente.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterGemeenteProps } from '@models/index';
 import type { IGemeente } from '@models/locatie';
-import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterGemeenteProps>(), {
   api: '',

src/components/smart/FilterProvincie.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
+import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterProvincieProps } from '@models/index';
 import type { IProvincie } from '@models/locatie';
-import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterProvincieProps>(), {
   api: '',

src/components/smart/OeActorWidget.vue

@@ -42,8 +42,8 @@ import { ref } from 'vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
 import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
-import type { IActor } from '@models/actor';
 import { ActorService } from '@services/actor.service';
+import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetProps {
   id: string;

src/components/smart/OeActorWidgetGrid.vue

@@ -43,11 +43,11 @@
 import OeGrid from '../dumb/OeGrid.vue';
 import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
-import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import { isEmpty, omitBy } from 'lodash';
 import { computed, getCurrentInstance, ref } from 'vue';
-import type { IActor } from '@models/actor';
 import { ActorService, type IActorenQuery } from '@services/actor.service';
+import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
+import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetGridProps {
   api: string;