#354 Extend actor references component - manual references

src/components/smart/OeActorReferences.vue

@@ -14,6 +14,10 @@
         Er werden <span class="vl-u-text--bold">{{ references.count }}</span> referenties gevonden.</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>
@@ -59,18 +63,25 @@ 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<{ actorUri?: string; idServiceUrl?: string; koppeling?: IReference }>();
 const isLoading = ref(false);
 
-const idService = new IdService(props.idServiceUrl);
+let idService: IdService;
 
 const accordions = ref<ComponentPublicInstance[]>([]);
 const references = ref<IReference>();
 
 onBeforeMount(async () => {
-  isLoading.value = true;
-  references.value = await idService.getReferences(props.actorUri);
-  isLoading.value = false;
+  if (!props.koppeling && props.idServiceUrl && props.actorUri) {
+    idService = new IdService(props.idServiceUrl);
+    isLoading.value = true;
+    references.value = await idService.getReferences(props.actorUri);
+    isLoading.value = false;
+  } else if (props.koppeling) {
+    references.value = props.koppeling;
+  } else {
+    throw new Error('Geen koppeling of idServiceUrl en actorUri gevonden');
+  }
 });
 
 const applications = computed(() => sortBy(references.value?.applications, 'title'));

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/actor-references.stories.ts

@@ -1,5 +1,7 @@
 import '@/scss/main.scss';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import OeActorReferences from '@components/smart/OeActorReferences.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
@@ -10,7 +12,7 @@ const meta: Meta<typeof OeActorReferences> = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component: `Find and list application references for a specified actor.`,
+        component: `Find and list application references for a specified actor (automatic flow) or provide your own reference data (custom flow).`,
       },
     },
   },
@@ -38,4 +40,87 @@ const meta: Meta<typeof OeActorReferences> = {
 export default meta;
 type Story = StoryObj<typeof OeActorReferences>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Automated flow based on id service data and actor 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: { OeActorReferences, FontAwesomeIcon },
+    setup: () => {
+      const koppeling: 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 { koppeling };
+    },
+    template: `
+      <OeActorReferences :koppeling="koppeling">
+        <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>
+      </OeActorReferences>
+    `,
+  }),
+};