#354 Extend actor references component - manual references

src/components/smart/OeActorReferences.vue → src/components/smart/OeReferences.vue

@@ -1,7 +1,7 @@
 <template>
   <oe-loader v-if="isLoading" />
   <div v-else>
-    <div v-if="references?.has_references" class="vl-u-spacer-bottom">
+    <div v-if="_reference?.has_references" class="vl-u-spacer-bottom">
       <p class="vl-u-align-right vl-u-spacer-right--small">
         <span class="toggle vl-u-text--small vl-u-spacer-right--small" @click="toggleAccordions(true)">
           <font-awesome-icon :icon="['fas', 'angle-down']" /> Alles tonen
@@ -11,9 +11,16 @@
         </span>
       </p>
       <span class="vl-u-mark--info vl-u-text">
-        Er werden <span class="vl-u-text--bold">{{ references.count }}</span> referenties gevonden.</span
-      >
+        <span v-if="_reference.count === 1">Er werd <span class="vl-u-text--bold">1</span> referentie gevonden.</span>
+        <span v-else
+          >Er werden <span class="vl-u-text--bold">{{ _reference.count }}</span> referenties gevonden.</span
+        >
+      </span>
       <p class="vl-u-text--small">(Er worden max. 5 referenties per applicatie getoond)</p>
+
+      <!-- Default slot  -->
+      <slot></slot>
+
       <vl-accordion-list mod-bordered>
         <vl-accordion-list-item v-for="(application, index) in applications" :key="index" ref="accordions">
           <vl-accordion mod-xsmall mod-icon-right>
@@ -53,27 +60,44 @@ import {
   VlAlert,
   VlLink,
 } from '@govflanders/vl-ui-design-system-vue3';
-import { sortBy } from 'lodash';
-import { type ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';
+import { isEqual, sortBy } from 'lodash';
+import { type ComponentPublicInstance, computed, onBeforeMount, ref, watch } from 'vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
 import { IdService } from '@services/id.service';
 import type { IReference } from '@models/reference';
 
-const props = defineProps<{ actorUri: string; idServiceUrl: string }>();
+const props = defineProps<{ uri?: string; idServiceUrl?: string; reference?: IReference }>();
 const isLoading = ref(false);
 
-const idService = new IdService(props.idServiceUrl);
+let idService: IdService;
 
 const accordions = ref<ComponentPublicInstance[]>([]);
-const references = ref<IReference>();
+const _reference = ref<IReference>();
 
 onBeforeMount(async () => {
-  isLoading.value = true;
-  references.value = await idService.getReferences(props.actorUri);
-  isLoading.value = false;
+  if (!props.reference && props.idServiceUrl && props.uri) {
+    idService = new IdService(props.idServiceUrl);
+    isLoading.value = true;
+    _reference.value = await idService.getReferences(props.uri);
+    isLoading.value = false;
+  } else if (props.reference) {
+    _reference.value = props.reference;
+  } else {
+    throw new Error('Geen reference of idServiceUrl en uri gevonden');
+  }
 });
 
-const applications = computed(() => sortBy(references.value?.applications, 'title'));
+watch(
+  () => props.reference,
+  (newValue, oldValue) => {
+    if (!isEqual(newValue, oldValue)) {
+      _reference.value = newValue;
+    }
+  },
+  { deep: true }
+);
+
+const applications = computed(() => sortBy(_reference.value?.applications, 'title'));
 
 const accordionsOpen = ref(false);
 const toggleAccordions = (open: boolean) => {

src/components/smart/index.ts

@@ -2,11 +2,11 @@ import FilterAOEActor from './FilterAOEActor.vue';
 import FilterAanduidingsobject from './FilterAanduidingsobject.vue';
 import FilterGemeente from './FilterGemeente.vue';
 import FilterProvincie from './FilterProvincie.vue';
-import OeActorReferences from './OeActorReferences.vue';
 import OeActorWidget from './OeActorWidget.vue';
 import OeActorWidgetGrid from './OeActorWidgetGrid.vue';
 import OeAdres from './OeAdres.vue';
 import OeInventarisLink from './OeInventarisLink.vue';
+import OeReferences from './OeReferences.vue';
 import OeZoneerder from './OeZoneerder.vue';
 
 export {
@@ -17,7 +17,7 @@ export {
   FilterProvincie,
   OeActorWidget,
   OeActorWidgetGrid,
-  OeActorReferences,
+  OeReferences,
   OeZoneerder,
   OeInventarisLink,
 };

src/models/index.ts

@@ -22,3 +22,4 @@ export * from './wizard';
 export * from './dossier';
 export * from './workflow';
 export * from './editor';
+export * from './reference';

src/stories/smart-components/oe-references.stories.ts

@@ -0,0 +1,130 @@
+import '@/scss/main.scss';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import OeReferences from '@components/smart/OeReferences.vue';
+import { IReference } from '@models/reference';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta: Meta<typeof OeReferences> = {
+  title: 'Smart components/OeReferences',
+  component: OeReferences,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `Find and list application references for a specified uri (automatic flow) or provide your own reference data (custom flow).`,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  args: {
+    idServiceUrl: 'https://dev-id.erfgoed.net',
+    uri: 'https://dev-id.erfgoed.net/actoren/12564',
+  },
+  argTypes: {
+    uri: {
+      description: 'Uri of the entity to find references for',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    idServiceUrl: {
+      description: 'API id service base url',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    reference: {
+      description:
+        'Custom reference data, when this is provided, the automated flow is disabled and uri and idServiceUrl are ignored',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OeReferences>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Automated flow based on id service data and uri.`,
+      },
+    },
+  },
+};
+
+export const Custom: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Custom flow to provide your own reference, when they are provided the automated flow is disabled.`,
+      },
+    },
+  },
+  render: () => ({
+    components: { OeReferences: OeReferences, FontAwesomeIcon },
+    setup: () => {
+      const reference: IReference = {
+        query_uri: 'https://dev-id.erfgoed.net/actor/12564/references',
+        success: true,
+        has_references: true,
+        count: 7,
+        applications: [
+          {
+            title: 'Test application',
+            uri: 'https://test-application.com',
+            service_url: 'https://test-application.com/api',
+            success: true,
+            hasReferences: true,
+            count: 1,
+            items: [
+              {
+                uri: 'https://test-application.com/1',
+                title: 'Test item 1',
+              },
+            ],
+          },
+          {
+            title: 'Test application 2',
+            uri: 'https://test-application-2.com',
+            service_url: 'https://test-application-2.com/api',
+            success: true,
+            hasReferences: true,
+            count: 6,
+            items: [
+              {
+                uri: 'https://test-application-2.com/1',
+                title: 'Test item 2',
+              },
+              {
+                uri: 'https://test-application-2.com/2',
+                title: 'Test item 3',
+              },
+              {
+                uri: 'https://test-application-2.com/3',
+                title: 'Test item 4',
+              },
+              {
+                uri: 'https://test-application-2.com/4',
+                title: 'Test item 5',
+              },
+              {
+                uri: 'https://test-application-2.com/5',
+                title: 'Test item 6',
+              },
+            ],
+          },
+        ],
+      };
+
+      return { reference };
+    },
+    template: `
+      <OeReferences :reference="reference">
+        <font-awesome-icon class="vl-u-spacer-top--small vl-u-spacer-right--xxsmall icon" :icon="['fas', 'circle-info']" />
+        <span>Sommige referenties zijn voor jou niet zichtbaar op basis van je rechten.</span>
+      </OeReferences>
+    `,
+  }),
+};