#132 added props and api service to grid

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

Hide file tree

Showing 4 changed files with 108 additions and 28 deletions.
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
@@ -1,24 +1,38 @@
 <template>
-  <vl-modal :id="props.id" closable mod-large title="Actor toevoegen">
-    <oe-actor-widget-grid></oe-actor-widget-grid>
+  <!--<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-secondary @click="close">Sluiten</vl-button>
     </div>
-  </vl-modal>
+  </div>
+  <!--</vl-modal>-->
 </template>
 
 <script setup lang="ts">
 import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
 import OeActorWidgetGrid from '@components/smart/OeActorWidgetGrid.vue';
+import { ActorService } from '@services/actor.service';
 
-const props = defineProps<{ id: string }>();
+interface IOeActorWidgetProps {
+  id: string;
+  api: string;
+  getSsoToken: () => Promise<string>;
+}
+
+const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
+  id: '',
+  api: '',
+  getSsoToken: undefined,
+});
 const emit = defineEmits<{
   close: [void];
 }>();
+const actorService = new ActorService(props.api, props.getSsoToken);
 
 const close = () => {
   emit('close');
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
@@ -1,25 +1,54 @@
 <template>
-  <oe-grid
-    style="width: 100%; height: 100%"
-    :grid-options="gridOptions"
-    @grid-ready="onGridReady"
-    @first-data-rendered="firstDataRendered"
-    @row-clicked="gridOptions?.onRowClicked"
-  />
+  <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 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>
 </template>
 
 <script setup lang="ts">
 import OeGrid from '../dumb/OeGrid.vue';
+import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
 // import { NoRowsOverlayComponent } from 'ag-grid-community/dist/lib/rendering/overlays/noRowsOverlayComponent';
-import { getCurrentInstance, ref } from 'vue';
-import type { ColDef, FirstDataRenderedEvent, GridOptions, RowClickedEvent } from 'ag-grid-community';
+import { computed, getCurrentInstance, ref } from 'vue';
+import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
+import type { ActorService } from '@services/actor.service';
+
+interface IOeActorWidgetGridProps {
+  service: ActorService;
+}
+
+const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
+  service: undefined,
+});
+const rowCount = ref(0);
 
 const getColumnDefinitions = (): ColDef[] => {
   return [
-    { headerName: 'ID', field: 'id', width: 75, sort: 'desc' },
-    { headerName: 'Onderwerp', field: 'onderwerp', width: 150 },
-    { headerName: 'ID aanvraag', field: 'energieadvies.id', width: 75 },
-    { headerName: 'Adres', field: 'adres', width: 150 },
+    { headerName: '#', field: 'id', sort: 'desc', width: 50 },
+    { headerName: 'Naam', field: 'naam', width: 200 },
+    { headerName: 'Voornaam', field: 'voornaam', width: 200 },
+    { headerName: 'Type', field: 'type.naam', colId: 'type', width: 200 },
+    {
+      headerName: 'Acties',
+      width: 55,
+      cellClass: 'acties-cell',
+      sortable: false,
+    },
   ];
 };
 
@@ -45,16 +74,20 @@ const gridOptions = ref<GridOptions>({
 const onGridReady = () => {
   setRowData();
 };
+const search = () => gridOptions.value.api?.purgeInfiniteCache();
 const firstDataRendered = (grid: FirstDataRenderedEvent) => grid.api.sizeColumnsToFit();
+const onGridSizeChanged = () => gridOptions.value.api?.sizeColumnsToFit();
+const rowCountText = computed(() =>
+  rowCount.value === 1 ? `Er is 1 resultaat gevonden` : `Er zijn ${rowCount?.value || 'geen'} resultaten gevonden`
+);
 const setRowData = () => {
-  /*const dataSource = {
+  const dataSource = {
     getRows: (params: IGetRowsParams) => {
-      const query = setQueryParameters(params);
-      sharedStore.startLoading('get-dossiers');
+      console.log('start loader');
 
-      apiService
-        .getDossiers(params.startRow, params.endRow, query)
-        .then((data: IResponse<IDossierOverzichtItem>) => {
+      props.service
+        .getDossiers(params.startRow, params.endRow, {})
+        .then((data) => {
           const content = data.content;
           rowCount.value = +data.lastRow;
           if (data.lastRow === 0) {
@@ -70,11 +103,18 @@ const setRowData = () => {
           params.failCallback();
         })
         .catch(() => params.failCallback())
-        .finally(() => sharedStore.stopLoading('get-dossiers'));
+        .finally(() => console.log('stop loader'));
     },
   };
-  gridOptions.value.api?.setDatasource(dataSource); */
+  gridOptions.value.api?.setDatasource(dataSource);
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0.9375rem 0;
+}
+</style>
diff --git a/src/services/actor.service.ts b/src/services/actor.service.ts
@@ -1,5 +1,6 @@
 import { HttpService } from './http.service';
 import type { IActor } from '@models/actor';
+import type { IResponse } from '@models/grid';
 
 export class ActorService extends HttpService {
   readonly API_URL: string;
@@ -24,4 +25,23 @@ export class ActorService extends HttpService {
       })
     ).data;
   }
+
+  async getDossiers(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: {
+        Range: contentRange,
+        Accept: 'application/json',
+        Authorization: 'Bearer ' + (await this.getSsoToken()),
+      },
+      params: query,
+    });
+
+    const resCR = headers['content-range'];
+    let lastRow = 0;
+    if (resCR) {
+      lastRow = resCR.substr(resCR.indexOf('/') + 1);
+    }
+    return { content: data, lastRow };
+  }
 }
diff --git a/src/stories/smart-components/oe-actor-widget.stories.ts b/src/stories/smart-components/oe-actor-widget.stories.ts
@@ -24,8 +24,14 @@ export const Default: Story = {
     components: {
       OeActorWidget,
     },
+    setup() {
+      const id = '1';
+      const api = 'https://dev-actoren.onroerenderfgoed.be';
+      const getSsoToken = async () => 1;
+      return { id, api, getSsoToken };
+    },
     template: `
-    <oe-actor-widget id="1" :open="true" />
+    <oe-actor-widget :id="id" :api="api" :get-sso-token="getSsoToken" />
     `,
   }),
 };