#475 Add adres readmode layout

src/__tests__/OeAdres.cy.ts

@@ -361,42 +361,68 @@ describe('Adres', () => {
     beforeEach(() => {
       cy.mockLanden();
       cy.mockGewesten();
+      cy.mockProvincies();
       cy.mockGemeenten();
       cy.mockDurbuy();
 
-      mount(TestComponent, {
-        props: {
-          modDisabled: true,
-          adres: {
-            land: { code: 'BE', naam: 'België' },
-            gemeente: { naam: 'Durbuy', niscode: '83012' },
-            postcode: { uri: 'https://data.vlaanderen.be/id/postinfo/6940', nummer: '6940' },
-            straat: { naam: 'Hiva', id: '125552', uri: 'https://data.vlaanderen.be/id/straatnaam/125552' },
-            adres: { huisnummer: '2' },
+      mount(
+        // eslint-disable-next-line vue/one-component-per-file
+        defineComponent({
+          components: { OeAdres },
+          setup() {
+            const config: IAdresConfig = {
+              land: { required: true },
+              gewest: { required: false },
+              provincie: { required: false },
+              gemeente: { required: true },
+              postcode: { required: true },
+              straat: { required: true },
+              huisnummer: { required: true },
+              busnummer: { required: false },
+            };
+
+            return { config };
           },
-        },
-      }).then(() => {
+          template: '<OeAdres :config="config"/>',
+        }),
+        {
+          props: {
+            modDisabled: true,
+            adres: {
+              land: { code: 'BE', naam: 'België' },
+              gewest: { naam: 'Waals Gewest', niscode: '3000' },
+              provincie: { naam: 'Luxemburg', niscode: '80000' },
+              gemeente: { naam: 'Durbuy', niscode: '83012' },
+              postcode: { uri: 'https://data.vlaanderen.be/id/postinfo/6940', nummer: '6940' },
+              straat: { naam: 'Hiva', id: '125552', uri: 'https://data.vlaanderen.be/id/straatnaam/125552' },
+              adres: { huisnummer: '2', busnummer: '0001' },
+            },
+          },
+        }
+      ).then(() => {
         cy.wait('@dataGetLanden');
         cy.wait('@dataGetGemeentenWaalsGewest');
       });
     });
 
-    it('disables all fields', () => {
-      getMultiSelect('land').should('be.disabled');
-      getMultiSelect('gemeente').should('have.class', 'multiselect--disabled');
-      getMultiSelect('postcode').should('have.class', 'multiselect--disabled');
-      getMultiSelect('straat').should('have.class', 'multiselect--disabled');
-      getAutocompleteInput('huisnummer').should('have.class', 'vl-input-field--disabled');
-      getAutocompleteInput('busnummer').should('have.class', 'vl-input-field--disabled');
-    });
-
-    it('should show the selected address', () => {
-      getMultiSelect('land').find(':selected').should('have.text', 'België');
-      getMultiSelect('gemeente').find('.multiselect__single').should('have.text', 'Durbuy');
-      getMultiSelect('postcode').find('.multiselect__single').should('have.text', '6940');
-      getMultiSelect('straat').find('.multiselect__single').should('have.text', 'Hiva');
-      getAutocompleteInput('huisnummer').should('have.value', '2');
-      getAutocompleteInput('busnummer').should('have.value', '');
+    it('shows all fields as plain text', () => {
+      getMultiSelect('land').should('not.exist');
+      getMultiSelect('gewest').should('not.exist');
+      getMultiSelect('provincie').should('not.exist');
+      getMultiSelect('gemeente').should('not.exist');
+      getMultiSelect('postcode').should('not.exist');
+      getMultiSelect('straat').should('not.exist');
+      getTextInput('huisnummer').should('not.exist');
+      getTextInput('busnummer').should('not.exist');
+
+      cy.dataCy('land-value').should('exist').should('have.text', 'België');
+      cy.dataCy('gewest-value').should('exist').should('have.text', 'Waals Gewest');
+      cy.dataCy('provincie-value').should('exist').should('have.text', 'Luxemburg');
+      cy.dataCy('gemeente-value').should('exist').should('have.text', 'Durbuy');
+      cy.dataCy('postcode-value').should('exist').should('have.text', '6940');
+      cy.dataCy('straat-value').should('exist').should('have.text', 'Hiva');
+      cy.dataCy('huisnummer-value').should('exist').should('have.text', '2');
+      cy.dataCy('busnummer-value').should('exist').should('have.text', '0001');
     });
 
     it('should not show action buttons when disabled', () => {

src/components/smart/adres/OeAdres.vue

@@ -52,6 +52,7 @@
               :id="`gewest-${id}`"
               v-model="gewest"
               :options="gewesten"
+              :read-mode="props.modDisabled"
               :disabled="!land || props.modDisabled"
               :mod-error="!!v$.gewest.$errors.length"
               :options-limit="optionsLimit"
@@ -80,6 +81,7 @@
             <ProvincieSelector
               :id="`provincie-${id}`"
               v-model="provincie"
+              :read-mode="props.modDisabled"
               :options="provincies"
               :disabled="!land || provincies.length === 0 || props.modDisabled"
               :mod-error="!!v$.provincie.$errors.length"
@@ -108,6 +110,7 @@
           <GemeenteSelector
             :id="`gemeente-${id}`"
             v-model="gemeente"
+            :read-mode="props.modDisabled"
             :options="gemeenten"
             :disabled="!land || props.modDisabled"
             :mod-error="!!v$.gemeente.naam.$errors.length"
@@ -137,6 +140,7 @@
             <PostcodeSelector
               :id="`postcode-${id}`"
               v-model="postcode"
+              :read-mode="props.modDisabled"
               :options-limit="optionsLimit"
               :options="postinfo"
               :disabled="!gemeente || props.modDisabled"
@@ -173,6 +177,7 @@
           <StraatSelector
             :id="`straat-${id}`"
             v-model="straat"
+            :read-mode="props.modDisabled"
             :options="straten"
             :options-limit="optionsLimit"
             :disabled="!gemeente || props.modDisabled"
@@ -204,6 +209,7 @@
           <HuisnummerSelector
             :id="`huisnummer-${id}`"
             v-model="huisnummer"
+            :read-mode="props.modDisabled"
             :disabled="!straat || props.modDisabled"
             :free-text="huisnummerIsFreeText"
             :mod-error="!!v$.adres.huisnummer.$errors.length"
@@ -239,6 +245,7 @@
             <BusnummerSelector
               :id="`busnummer-${id}`"
               v-model="busnummer"
+              :read-mode="props.modDisabled"
               :disabled="!huisnummer || props.modDisabled"
               :free-text="busnummerIsFreeText"
               :mod-error="!!v$.adres.busnummer.$errors.length"

src/components/smart/adres/subcomponents/BusnummerSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!readMode">
     <OeAutocomplete
       v-if="isBelgiumOrEmpty && !huisnummerIsFreeText && !freeText"
       :id="$attrs.id as string"
@@ -25,10 +25,13 @@
       :mod-error="modError"
     />
   </div>
+  <VlPropertiesData v-else data-cy="busnummer-value">
+    {{ selectedBusnummer || '-' }}
+  </VlPropertiesData>
 </template>
 
 <script setup lang="ts">
-import { VlInputField } from '@govflanders/vl-ui-design-system-vue3';
+import { VlInputField, VlPropertiesData } from '@govflanders/vl-ui-design-system-vue3';
 import { computed } from 'vue';
 import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import type { IAutocompleteOption } from '@models/autocomplete';
@@ -46,6 +49,7 @@ interface BusnummerSelectorProps {
   autocompleteFn?: (term: string) => Promise<IAutocompleteOption[]>;
   isBelgiumOrEmpty: boolean;
   huisnummerIsFreeText: boolean;
+  readMode: boolean;
 }
 
 const props = withDefaults(defineProps<BusnummerSelectorProps>(), {
@@ -64,6 +68,10 @@ const modelValueComputed = computed({
   set: (val: string) => emit('update:modelValue', val),
 });
 
+const selectedBusnummer = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue : props.modelValue?.busnummer
+);
+
 const autocompleteOption = computed(() => ({
   title: typeof props.modelValue !== 'string' ? (props.modelValue as IAdres)?.busnummer : props.modelValue,
   value: props.modelValue,

src/components/smart/adres/subcomponents/GemeenteSelector.vue

@@ -1,37 +1,42 @@
 <template>
-  <VlMultiselect
-    v-if="isBelgiumOrEmpty"
-    :id="$attrs.id"
-    v-model="modelValueComputed"
-    data-cy="select-gemeente"
-    placeholder="Gemeente"
-    :options="options"
-    :mod-multiple="false"
-    :disabled="disabled"
-    :mod-error="modError"
-    :options-limit="optionsLimit"
-    :preserve-search="true"
-    :custom-label="customLabel"
-    :filtering-sort-func="filteringSortFunc"
-    @keydown.tab="!modelValueComputed ? $event.preventDefault() : null"
-  >
-    <template #noResult><span>Geen resultaten gevonden...</span></template>
-    <template #noOptions><span>Geen opties beschikbaar</span></template>
-  </VlMultiselect>
-  <VlInputField
-    v-else
-    :id="$attrs.id"
-    v-model="modelValueComputed"
-    data-cy="input-gemeente"
-    :mod-error="modError"
-    :mod-disabled="disabled"
-    mod-block
-    placeholder="Gemeente"
-  />
+  <template v-if="!readMode">
+    <VlMultiselect
+      v-if="isBelgiumOrEmpty"
+      :id="$attrs.id"
+      v-model="modelValueComputed"
+      data-cy="select-gemeente"
+      placeholder="Gemeente"
+      :options="options"
+      :mod-multiple="false"
+      :disabled="disabled"
+      :mod-error="modError"
+      :options-limit="optionsLimit"
+      :preserve-search="true"
+      :custom-label="customLabel"
+      :filtering-sort-func="filteringSortFunc"
+      @keydown.tab="!modelValueComputed ? $event.preventDefault() : null"
+    >
+      <template #noResult><span>Geen resultaten gevonden...</span></template>
+      <template #noOptions><span>Geen opties beschikbaar</span></template>
+    </VlMultiselect>
+    <VlInputField
+      v-else
+      :id="$attrs.id"
+      v-model="modelValueComputed"
+      data-cy="input-gemeente"
+      :mod-error="modError"
+      :mod-disabled="disabled"
+      mod-block
+      placeholder="Gemeente"
+    />
+  </template>
+  <VlPropertiesData v-else data-cy="gemeente-value">
+    {{ selectedGemeente || '-' }}
+  </VlPropertiesData>
 </template>
 
 <script setup lang="ts">
-import { VlInputField, VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
+import { VlInputField, VlMultiselect, VlPropertiesData } from '@govflanders/vl-ui-design-system-vue3';
 import { computed } from 'vue';
 import type { IGemeente } from '@models/locatie';
 
@@ -42,6 +47,7 @@ interface GemeenteSelectorProps {
   modError: boolean;
   optionsLimit: number;
   isBelgiumOrEmpty: boolean;
+  readMode: boolean;
 }
 
 const props = withDefaults(defineProps<GemeenteSelectorProps>(), {
@@ -59,6 +65,10 @@ const modelValueComputed = computed({
   set: (v) => emit('update:modelValue', v),
 });
 
+const selectedGemeente = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue : props.modelValue?.naam
+);
+
 const customLabel = (option: IGemeente) => option.naam;
 const filteringSortFunc = (a: IGemeente, b: IGemeente) => a.naam.localeCompare(b.naam);
 </script>

src/components/smart/adres/subcomponents/GewestSelector.vue

@@ -1,5 +1,6 @@
 <template>
   <VlMultiselect
+    v-if="!readMode"
     v-model="modelValueComputed"
     data-cy="select-gewest"
     placeholder="Gewest"
@@ -15,10 +16,13 @@
     <template #noResult><span>Geen resultaten gevonden...</span></template>
     <template #noOptions><span>Geen opties beschikbaar</span></template>
   </VlMultiselect>
+  <VlPropertiesData v-else data-cy="gewest-value">
+    {{ selectedGewest || '-' }}
+  </VlPropertiesData>
 </template>
 
 <script setup lang="ts">
-import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
+import { VlMultiselect, VlPropertiesData } from '@govflanders/vl-ui-design-system-vue3';
 import { computed } from 'vue';
 import type { IGewest } from '@models/locatie';
 
@@ -28,6 +32,7 @@ interface GewestSelectorProps {
   disabled: boolean;
   modError: boolean;
   optionsLimit: number;
+  readMode: boolean;
 }
 
 const props = withDefaults(defineProps<GewestSelectorProps>(), {
@@ -36,6 +41,7 @@ const props = withDefaults(defineProps<GewestSelectorProps>(), {
   disabled: false,
   modError: false,
   optionsLimit: 5000,
+  readMode: false,
 });
 const emit = defineEmits(['update:modelValue']);
 
@@ -44,5 +50,9 @@ const modelValueComputed = computed({
   set: (v) => emit('update:modelValue', v),
 });
 
+const selectedGewest = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue : props.modelValue?.naam
+);
+
 const customLabel = (option: IGewest) => option.naam;
 </script>

src/components/smart/adres/subcomponents/HuisnummerSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="!readMode">
     <OeAutocomplete
       v-if="isBelgiumOrEmpty && !freeText"
       :id="$attrs.id as string"
@@ -29,10 +29,13 @@
       <span v-else>Toon lijst met suggesties</span>
     </VlButton>
   </div>
+  <VlPropertiesData v-else data-cy="huisnummer-value">
+    {{ selectedHuisnummer || '-' }}
+  </VlPropertiesData>
 </template>
 
 <script setup lang="ts">
-import { VlButton, VlInputField } from '@govflanders/vl-ui-design-system-vue3';
+import { VlButton, VlInputField, VlPropertiesData } from '@govflanders/vl-ui-design-system-vue3';
 import { computed } from 'vue';
 import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import type { IAutocompleteOption } from '@models/autocomplete';
@@ -50,6 +53,7 @@ interface HuisnummerSelectorProps {
   autocompleteFn?: (term: string) => Promise<IAutocompleteOption[]>;
   showToggle: boolean;
   isBelgiumOrEmpty: boolean;
+  readMode: boolean;
 }
 
 const props = withDefaults(defineProps<HuisnummerSelectorProps>(), {
@@ -68,6 +72,10 @@ const modelValueComputed = computed<string>({
   set: (val: string) => emit('update:modelValue', val),
 });
 
+const selectedHuisnummer = computed(() =>
+  typeof props.modelValue === 'string' ? props.modelValue : props.modelValue?.huisnummer
+);
+
 const autocompleteOption = computed(() => ({
   title: typeof props.modelValue !== 'string' ? (props.modelValue as IAdres)?.huisnummer : props.modelValue,
   value: props.modelValue,