Merge pull request #280 from OnroerendErfgoed/develop

release 1.13.0

package.json

@@ -7,7 +7,7 @@
   "main": "./dist/vue-components.umd.js",
   "module": "./dist/vue-components.es.js",
   "typings": "./dist/src/main.d.ts",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "exports": {
     ".": {
       "import": "./dist/vue-components.es.js",

src/__tests__/OeContainer.cy.ts

@@ -58,7 +58,7 @@ describe('Container', () => {
       setup: () => {
         const tabs = ref([
           { label: 'Menu', id: 'menu', closable: false, editMode: false },
-          { label: 'Tab 1', id: '1', closable: true, editMode: false },
+          { label: 'Tab 1', id: '1', closable: true, editMode: true },
           { label: 'Tab 2', id: '2', closable: true, editMode: false },
         ]);
         const activeTab = ref<ITab>(tabs.value[0]);
@@ -134,17 +134,73 @@ describe('Container', () => {
       });
     });
 
-    it('emits a tab-closed event with the selected tab on close', () => {
+    it('emits a tab-closed event with the selected tab on close after confirmation', () => {
       const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
 
       cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
         cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('confirm-button').click();
 
         cy.get('@onTabClosedSpy').should(
           'have.been.calledWith',
           component.tabs.find((t) => t.id === '1')
         );
       });
     });
+
+    it('does not emit a tab-closed event with the selected tab on close after confirmation cancellation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+        cy.dataCy('cancel-button').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when confirmation is disabled', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy, disableConfirmCloseTab: true } }).then(
+        ({ component }) => {
+          cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+          cy.get('@onTabClosedSpy').should(
+            'have.been.calledWith',
+            component.tabs.find((t) => t.id === '1')
+          );
+        }
+      );
+    });
+
+    it('does not emit a tab-closed event with the selected tab on close when tab is in edit mode without confirmation', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-1 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'not.have.been.calledWith',
+          component.tabs.find((t) => t.id === '1')
+        );
+      });
+    });
+
+    it('emits a tab-closed event with the selected tab on close when tab is not in edit mode', () => {
+      const onTabClosedSpy = cy.spy().as('onTabClosedSpy');
+
+      cy.mount(TestComponent, { props: { onTabClosed: onTabClosedSpy } }).then(({ component }) => {
+        cy.dataCy('bottom-tabs').find('.tab-2 .vl-pill__close').click();
+
+        cy.get('@onTabClosedSpy').should(
+          'have.been.calledWith',
+          component.tabs.find((t) => t.id === '2')
+        );
+      });
+    });
   });
 });

src/components/smart/OeActorWidgetGridActies.vue → src/components/dumb/OeActorWidgetGridActies.vue

@@ -7,7 +7,7 @@
       icon="eye"
       @click="props.params.setStateDetail(params.data?.id as number)"
     />
-    <a :href="`${props.params.actorenUrl}/beheer#/${params.data?.id}`" target="_blank" title="Bewerk actor">
+    <a :href="`${props.params.actorenUrl}beheer/${params.data?.id}`" target="_blank" title="Bewerk actor">
       <font-awesome-icon class="icon" icon="pencil" />
     </a>
   </div>

src/components/dumb/OeContainer.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="oe-container">
+    <OeModalConfirmCancelChanges
+      v-if="!props.disableConfirmCloseTab"
+      :open="confirmCancelChangesOpen"
+      @close="confirmCancelChangesOpen = false"
+      @confirm="closeTab(confirmTab as ITab, true)"
+    />
     <div data-cy="oe-container-content" class="oe-container__content">
       <slot></slot>
     </div>
@@ -13,7 +19,7 @@
           :close-label="`Sluit tab ${item.label}`"
           mod-clickable
           @click="(event: Event) => select(event, item)"
-          @close="close(item)"
+          @close="closeTab(item)"
         >
           {{ item.label }}
         </vl-pill>
@@ -24,11 +30,14 @@
 
 <script setup lang="ts">
 import { VlActionGroup, VlPill } from '@govflanders/vl-ui-design-system-vue3';
+import { ref } from 'vue';
+import { OeModalConfirmCancelChanges } from '@components/dumb';
 import type { IContainerProps, ITab } from '@models/container';
 
 const props = withDefaults(defineProps<IContainerProps>(), {
   tabs: () => [],
   activeTab: undefined,
+  disableConfirmCloseTab: false,
 });
 const emit = defineEmits<{
   (e: 'tab-selected', tab: ITab): void;
@@ -44,8 +53,17 @@ const select = (event: Event, item: ITab) => {
   }
 };
 
-const close = (item: ITab) => {
-  emit('tab-closed', item);
+// Confirm cancel modal
+const confirmCancelChangesOpen = ref(false);
+const confirmTab = ref<ITab>();
+const closeTab = (item: ITab, confirm = false) => {
+  if (confirm || props.disableConfirmCloseTab || !item.editMode) {
+    confirmCancelChangesOpen.value = false;
+    emit('tab-closed', item);
+  } else {
+    confirmTab.value = item;
+    confirmCancelChangesOpen.value = true;
+  }
 };
 </script>
 

src/components/dumb/OeModalConfirmCancelChanges.vue

@@ -0,0 +1,27 @@
+<template>
+  <vl-modal id="confirm-cancel-changes-modal">
+    <h2 class="vl-title vl-title--h2 vl-modal-dialog__title">
+      Ben je zeker dat je deze wijzigingen niet wilt bewaren?
+    </h2>
+    <div class="vl-u-spacer-bottom">
+      <p class="vl-u-spacer-bottom">
+        Bij het sluiten van deze fiche zullen je onbewaarde wijzigingen verloren gaan. Zorg ervoor dat je eerst je
+        wijzigingen bewaart, alvorens deze pagina te verlaten.
+      </p>
+    </div>
+    <div class="vl-u-flex vl-u-flex-align-center">
+      <vl-button data-cy="confirm-button" class="vl-button vl-u-spacer-right" @click="emit('confirm')"
+        >Ja, annuleer mijn wijzigingen</vl-button
+      >
+      <vl-button data-cy="cancel-button" class="vl-button large" @click="emit('close')"
+        >Nee, behoud mijn wijzigingen</vl-button
+      >
+    </div>
+  </vl-modal>
+</template>
+
+<script setup lang="ts">
+import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
+
+const emit = defineEmits(['confirm', 'close']);
+</script>

src/components/dumb/index.ts

@@ -7,13 +7,16 @@ import FilterText from './FilterText.vue';
 import GridWorkflow from './GridWorkflow.vue';
 import InputPhone from './InputPhone.vue';
 import NoRowsOverlay from './NoRowsOverlay.vue';
+import OeActorWidgetDetail from './OeActorWidgetDetail.vue';
+import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import OeAutocomplete from './OeAutocomplete.vue';
 import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
 import OeLoader from './OeLoader.vue';
+import OeModalConfirmCancelChanges from './OeModalConfirmCancelChanges.vue';
 import OeSelect from './OeSelect.vue';
 import OeTinyMce from './OeTinyMCE.vue';
 import OeToaster from './OeToaster.vue';
@@ -40,6 +43,9 @@ export {
   OeSelect,
   OeTinyMce,
   OeToaster,
+  OeActorWidgetGridActies,
+  OeActorWidgetDetail,
   OeWizard,
   SystemFields,
+  OeModalConfirmCancelChanges,
 };

src/components/smart/OeActorWidget.vue

@@ -4,6 +4,7 @@
     <template #modal-content>
       <grid
         v-if="state === ActorWidgetState.Grid"
+        :search-actor="props.searchActor"
         :api="props.api"
         :get-sso-token="props.getSsoToken"
         data-cy="actor-widget-grid"
@@ -40,17 +41,18 @@
 <script setup lang="ts">
 import { VlButton, VlModal } from '@govflanders/vl-ui-design-system-vue3';
 import { ref } from 'vue';
+import Detail from '@components/dumb/OeActorWidgetDetail.vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
-import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
 import { ActorService } from '@services/actor.service';
 import type { ActorType, IActor } from '@models/actor';
 
 interface IOeActorWidgetProps {
   id: string;
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 enum ActorWidgetState {
@@ -63,7 +65,9 @@ const props = withDefaults(defineProps<IOeActorWidgetProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
+
 const emit = defineEmits<{
   add: [IActor];
   close: [void];

src/components/smart/OeActorWidgetGrid.vue

@@ -4,6 +4,7 @@
       <div class="vl-col--1-1 vl-u-flex vl-u-flex-align-flex-end">
         <vl-search
           id="actor-widget-menu-search"
+          v-model="zoekterm"
           name="actor-widget-menu-search"
           mod-inline
           mod-alt
@@ -42,23 +43,25 @@
 <script setup lang="ts">
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
 import { isEmpty, omitBy } from 'lodash';
-import { computed, getCurrentInstance, ref } from 'vue';
+import { computed, getCurrentInstance, ref, watch } from 'vue';
+import { OeActorWidgetGridActies } from '@components/dumb';
 import OeGrid from '@components/dumb/OeGrid.vue';
-import OeActorWidgetGridActies from '@components/smart/OeActorWidgetGridActies.vue';
 import { ActorService, type IActorenQuery } from '@services/actor.service';
 import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import type { ActorType, IActor } from '@models/actor';
 
 interface IOeActorWidgetGridProps {
   api: string;
-  getSsoToken: () => Promise<string>;
+  getSsoToken?: () => Promise<string>;
   actorType?: ActorType;
+  searchActor?: string;
 }
 
 const props = withDefaults(defineProps<IOeActorWidgetGridProps>(), {
   api: '',
   getSsoToken: undefined,
   actorType: undefined,
+  searchActor: '',
 });
 const emit = defineEmits<{
   selectActor: [IActor];
@@ -85,12 +88,15 @@ const handleSearchClick = (event: Event) => {
 const refresh = () => {
   // reset sort values
   gridOptions.value.columnApi?.resetColumnState();
-  // reset zoekterm values
-  zoekterm.value = '';
-  (document.querySelector('#actor-widget-menu-search') as HTMLInputElement).value = '';
   search();
 };
-
+watch(
+  () => props.searchActor,
+  () => {
+    zoekterm.value = props.searchActor;
+  },
+  { immediate: true }
+);
 // Grid
 const rowCount = ref(0);
 const getColumnDefinitions = (): ColDef[] => {

src/components/smart/index.ts

@@ -4,6 +4,7 @@ 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 OeZoneerder from './OeZoneerder.vue';
@@ -15,6 +16,7 @@ export {
   FilterGemeente,
   FilterProvincie,
   OeActorWidget,
+  OeActorWidgetGrid,
   OeActorReferences,
   OeZoneerder,
   OeInventarisLink,

src/models/container.ts

@@ -1,6 +1,7 @@
 export interface IContainerProps {
   activeTab?: ITab;
   tabs?: ITab[];
+  disableConfirmCloseTab?: boolean;
 }
 
 export interface ITab {