#132 finished grid state interactions

OnroerendErfgoed · Oct 30, 2023 · 1d0a409 · 1d0a409
1 parent e4e90dd
commit 1d0a409
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 18 deletions.
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
@@ -1,7 +1,17 @@
 <template>
   <!--<vl-modal :id="props.id" closable mod-large title="Actor toevoegen">-->
   <div class="content">
-    <oe-actor-widget-grid :service="actorService"></oe-actor-widget-grid>
+    <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"
+      :service="actorService"
+      @set-state-detail="state = ActorWidgetState.Detail"
+    />
     <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>
     </div>
@@ -11,6 +21,7 @@
 
 <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 { ActorService } from '@services/actor.service';
 
@@ -20,6 +31,12 @@ interface IOeActorWidgetProps {
   getSsoToken: () => Promise<string>;
 }
 
+enum ActorWidgetState {
+  Table = 'table',
+  Filters = 'filters',
+  Detail = 'detail',
+}
+
 const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
   id: '',
   api: '',
@@ -28,6 +45,7 @@ const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
 const emit = defineEmits<{
   close: [void];
 }>();
+const state = ref<ActorWidgetState>(ActorWidgetState.Table);
 const actorService = new ActorService(props.api, props.getSsoToken);
 
 const close = () => {

diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
@@ -1,29 +1,31 @@
 <template>
-  <div class="vl-grid">
-    <div class="vl-col--12-12 vl-u-flex vl-u-flex-align-space-between">
-      <span class="vl-u-mark--info vl-u-text--small">{{ rowCountText }}</span>
-      <vl-button class="refresh-button" icon="synchronize" mod-icon-before mod-naked @click="search"
-        >Vernieuwen</vl-button
-      >
+  <div class="vl-layout vl-u-flex vl-u-flex-direction-column">
+    <div class="vl-grid">
+      <div class="vl-col--12-12 vl-u-flex vl-u-flex-align-space-between">
+        <span class="vl-u-mark--info vl-u-text--small">{{ rowCountText }}</span>
+        <vl-button class="refresh-button" icon="synchronize" mod-icon-before mod-naked @click="search"
+          >Vernieuwen</vl-button
+        >
+      </div>
     </div>
-  </div>
-  <div class="vl-grid table">
-    <div class="vl-col--12-12 vl-u-flex oe-flex-1">
-      <oe-grid
-        style="width: 100%; height: 500px"
-        :grid-options="gridOptions"
-        @grid-ready="onGridReady"
-        @first-data-rendered="firstDataRendered"
-        @row-clicked="gridOptions?.onRowClicked"
-      />
+    <div class="vl-grid table">
+      <div class="vl-col--12-12 vl-u-flex oe-flex-1">
+        <oe-grid
+          style="width: 100%; height: 500px"
+          :grid-options="gridOptions"
+          @grid-ready="onGridReady"
+          @first-data-rendered="firstDataRendered"
+          @row-clicked="gridOptions?.onRowClicked"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import OeGrid from '../dumb/OeGrid.vue';
+import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
-// import { NoRowsOverlayComponent } from 'ag-grid-community/dist/lib/rendering/overlays/noRowsOverlayComponent';
 import { computed, getCurrentInstance, ref } from 'vue';
 import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import type { ActorService } from '@services/actor.service';
@@ -35,6 +37,9 @@ interface IOeActorWidgetGridProps {
 const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
   service: undefined,
 });
+const emit = defineEmits<{
+  setStateDetail: [void];
+}>();
 const rowCount = ref(0);
 
 const getColumnDefinitions = (): ColDef[] => {
@@ -47,6 +52,11 @@ const getColumnDefinitions = (): ColDef[] => {
       headerName: 'Acties',
       width: 55,
       cellClass: 'acties-cell',
+      cellRenderer: OeActorWidgetGridActies,
+      cellRendererParams: {
+        setStateDetail: () => emit('setStateDetail'),
+        actorenUrl: props.service.API_URL,
+      },
       sortable: false,
     },
   ];

diff --git a/src/components/smart/OeActorWidgetGridActies.vue b/src/components/smart/OeActorWidgetGridActies.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <font-awesome-icon
+      title="Details van de actor bekijken"
+      class="icon vl-u-spacer-right--xxsmall"
+      :icon="['fas', 'eye']"
+      @click="props.params.setStateDetail()"
+    />
+    <a :href="`${props.params.actorenUrl}/beheer#/${params.data?.id}`" target="_blank" title="Bewerk actor">
+      <font-awesome-icon class="icon" :icon="['fas', 'pencil']" />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { ICellRendererParams } from 'ag-grid-community';
+import type { IActor } from '@models/actor';
+
+interface IOeActorWidgetGridActiesProps<T> extends ICellRendererParams<T> {
+  setStateDetail: () => void;
+  actorenUrl: string;
+}
+const props = defineProps<{ params: IOeActorWidgetGridActiesProps<IActor> }>();
+</script>
+
+<style lang="scss" scoped></style>