#132 added simplified detail component

OnroerendErfgoed · Oct 31, 2023 · 0d54058 · 0d54058
1 parent 1d0a409
commit 0d54058
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 23 deletions.
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
@@ -1,16 +1,16 @@
 <template>
   <!--<vl-modal :id="props.id" closable mod-large title="Actor toevoegen">-->
   <div class="content">
-    <div class="vl-u-flex vl-u-flex-align-center">
-      <vl-button class="vl-u-spacer-right--small" mod-primary @click="state = ActorWidgetState.Table">
-        Overzicht
-      </vl-button>
-      <vl-button mod-primary @click="state = ActorWidgetState.Filters"> Uitgebreid zoeken </vl-button>
-    </div>
-    <oe-actor-widget-grid
-      v-if="state === ActorWidgetState.Table"
+    <grid
+      v-if="state === ActorWidgetState.Grid"
       :service="actorService"
-      @set-state-detail="state = ActorWidgetState.Detail"
+      @set-state-detail="setStateDetail($event)"
+      @select-actor="selectActor"
+    />
+    <Detail
+      v-if="state === ActorWidgetState.Detail"
+      :actor="selectedActor"
+      @set-state-grid="state = ActorWidgetState.Grid"
     />
     <div class="vl-u-flex vl-u-flex-align-center">
       <vl-button class="vl-u-spacer-right--small" mod-secondary @click="close">Sluiten</vl-button>
@@ -22,8 +22,10 @@
 <script setup lang="ts">
 import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
 import { ref } from 'vue';
-import OeActorWidgetGrid from '@components/smart/OeActorWidgetGrid.vue';
+import Detail from '@components/smart/OeActorWidgetDetail.vue';
+import Grid from '@components/smart/OeActorWidgetGrid.vue';
 import { ActorService } from '@services/actor.service';
+import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetProps {
   id: string;
@@ -32,9 +34,8 @@ interface IOeActorWidgetProps {
 }
 
 enum ActorWidgetState {
-  Table = 'table',
-  Filters = 'filters',
-  Detail = 'detail',
+  Grid,
+  Detail,
 }
 
 const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
@@ -45,8 +46,24 @@ const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
 const emit = defineEmits<{
   close: [void];
 }>();
-const state = ref<ActorWidgetState>(ActorWidgetState.Table);
+const state = ref<ActorWidgetState>(ActorWidgetState.Grid);
 const actorService = new ActorService(props.api, props.getSsoToken);
+const selectedActor = ref<IActor>();
+
+const selectActor = (actor: IActor) => {
+  selectedActor.value = actor;
+};
+
+const setStateDetail = async (id: number) => {
+  console.log('start loader');
+  try {
+    selectedActor.value = await actorService.getActorById(id);
+    state.value = ActorWidgetState.Detail;
+  } catch (e) {
+    console.debug(e);
+  }
+  console.log('stop loader');
+};
 
 const close = () => {
   emit('close');

diff --git a/src/components/smart/OeActorWidgetDetail.vue b/src/components/smart/OeActorWidgetDetail.vue
@@ -0,0 +1,73 @@
+<template>
+  <vl-properties class="vl-grid">
+    <div class="vl-col--1-1">
+      <a @click="emit('setStateGrid')">
+        <font-awesome-icon class="icon" :icon="['fas', 'pencil']" />
+      </a>
+    </div>
+    <div class="vl-col--2-4">
+      <vl-properties-list>
+        <vl-properties-label>{{ actor?.type.id === 1 ? 'Naam' : 'Naam organisatie' }}</vl-properties-label>
+        <vl-properties-data>{{ actor?.naam }}</vl-properties-data>
+        <template v-if="actor?.type.id === 1">
+          <vl-properties-label>Voornaam</vl-properties-label>
+          <vl-properties-data>{{ actor.voornaam }}</vl-properties-data>
+        </template>
+        <vl-properties-label>Email adressen</vl-properties-label>
+        <vl-properties-data>
+          <ul>
+            <li v-for="(email, index) in props.actor.emails" :key="index">
+              <small>{{ email.email }} ({{ email.type.naam }})</small>
+            </li>
+          </ul>
+        </vl-properties-data>
+        <vl-properties-label>Telefoonnummers</vl-properties-label>
+        <vl-properties-data>
+          <ul>
+            <li v-for="(telefoon, index) in props.actor.telefoons" :key="index">
+              <small>{{ telefoon.volledig_nummer }} ({{ telefoon.type.naam }})</small>
+            </li>
+          </ul>
+        </vl-properties-data>
+      </vl-properties-list>
+    </div>
+    <div class="vl-col--2-4">
+      <vl-properties-list>
+        <vl-properties-label>Adressen</vl-properties-label>
+        <vl-properties-data>
+          <ul>
+            <li v-for="(adres, index) in props.actor.adressen" :key="index">
+              <small>{{ adres.omschrijving }} ({{ adres.adrestype?.naam }})</small>
+            </li>
+          </ul>
+        </vl-properties-data>
+        <vl-properties-label>URL's</vl-properties-label>
+        <vl-properties-data>
+          <ul>
+            <li v-for="(url, index) in props.actor.urls" :key="index">
+              <small>{{ url.url }} ({{ url.type.naam }})</small>
+            </li>
+          </ul>
+        </vl-properties-data>
+      </vl-properties-list>
+    </div>
+  </vl-properties>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  VlProperties,
+  VlPropertiesData,
+  VlPropertiesLabel,
+  VlPropertiesList,
+} from '@govflanders/vl-ui-design-system-vue3';
+import type { IActor } from '@models/actor';
+
+const props = withDefaults(defineProps<{ actor: IActor }>(), {
+  actor: undefined,
+});
+const emit = defineEmits<{
+  setStateGrid: [void];
+}>();
+</script>
diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
@@ -28,6 +28,7 @@ import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, getCurrentInstance, ref } from 'vue';
 import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
+import type { IActor } from '@models/actor';
 import type { ActorService } from '@services/actor.service';
 
 interface IOeActorWidgetGridProps {
@@ -38,7 +39,8 @@ const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
   service: undefined,
 });
 const emit = defineEmits<{
-  setStateDetail: [void];
+  selectActor: [IActor];
+  setStateDetail: [number];
 }>();
 const rowCount = ref(0);
 
@@ -54,7 +56,7 @@ const getColumnDefinitions = (): ColDef[] => {
       cellClass: 'acties-cell',
       cellRenderer: OeActorWidgetGridActies,
       cellRendererParams: {
-        setStateDetail: () => emit('setStateDetail'),
+        setStateDetail: (id: number) => emit('setStateDetail', id),
         actorenUrl: props.service.API_URL,
       },
       sortable: false,
@@ -76,8 +78,7 @@ const gridOptions = ref<GridOptions>({
   enableBrowserTooltips: true,
   columnDefs: getColumnDefinitions(),
   onRowClicked: (event: RowClickedEvent) => {
-    console.log(event);
-    // Select actor
+    emit('selectActor', event.data);
   },
 });
 
@@ -96,7 +97,7 @@ const setRowData = () => {
       console.log('start loader');
 
       props.service
-        .getDossiers(params.startRow, params.endRow, {})
+        .getActoren(params.startRow, params.endRow, {})
         .then((data) => {
           const content = data.content;
           rowCount.value = +data.lastRow;

diff --git a/src/components/smart/OeActorWidgetGridActies.vue b/src/components/smart/OeActorWidgetGridActies.vue
@@ -4,7 +4,7 @@
       title="Details van de actor bekijken"
       class="icon vl-u-spacer-right--xxsmall"
       :icon="['fas', 'eye']"
-      @click="props.params.setStateDetail()"
+      @click="props.params.setStateDetail(params.data?.id as number)"
     />
     <a :href="`${props.params.actorenUrl}/beheer#/${params.data?.id}`" target="_blank" title="Bewerk actor">
       <font-awesome-icon class="icon" :icon="['fas', 'pencil']" />
@@ -18,7 +18,7 @@ import type { ICellRendererParams } from 'ag-grid-community';
 import type { IActor } from '@models/actor';
 
 interface IOeActorWidgetGridActiesProps<T> extends ICellRendererParams<T> {
-  setStateDetail: () => void;
+  setStateDetail: (id: number) => void;
   actorenUrl: string;
 }
 const props = defineProps<{ params: IOeActorWidgetGridActiesProps<IActor> }>();

diff --git a/src/models/actor.ts b/src/models/actor.ts
@@ -20,7 +20,7 @@ export interface IActor {
   type: IType;
   types: string[];
   uri: string;
-  urls: string[];
+  urls: IUrl[];
   voornaam: string;
   zichtbaarheid: IType;
 }
@@ -31,6 +31,11 @@ interface IActorAdres {
   postcode: IPostcode;
   straat: IStraat;
   adres: IAdresregisterAdres;
+  omschrijving: string;
+  adrestype: {
+    naam: string;
+    id: number;
+  };
 }
 
 interface ILand {
@@ -140,3 +145,11 @@ interface ITelefoon {
   type: IType;
   volledig_nummer: string;
 }
+
+interface IUrl {
+  url: string;
+  type: {
+    naam: string;
+    id: number;
+  };
+}
diff --git a/src/services/actor.service.ts b/src/services/actor.service.ts
@@ -26,7 +26,7 @@ export class ActorService extends HttpService {
     ).data;
   }
 
-  async getDossiers(rangeStart: number, rangeEnd: number, query: any): Promise<IResponse<IActor>> {
+  async getActoren(rangeStart: number, rangeEnd: number, query: any): Promise<IResponse<IActor>> {
     const contentRange = `items=${rangeStart}-${rangeEnd}`;
     const { data, headers } = await this.get<IActor[]>(`${this.API_URL}/actoren`, {
       headers: {
@@ -44,4 +44,15 @@ export class ActorService extends HttpService {
     }
     return { content: data, lastRow };
   }
+
+  async getActorById(id: number): Promise<IActor> {
+    return (
+      await this.get<IActor>(`${this.API_URL}/actoren/${id.toString()}?adressenregister`, {
+        headers: {
+          Accept: 'application/json',
+          Authorization: 'Bearer ' + (await this.getSsoToken()),
+        },
+      })
+    ).data;
+  }
 }