Feature/203 adres component tweaks (#205)

* #203 Hide title optionally * #203 Show required per field optionally and update annotation text * #203 Fix adres tests * #203 Add story for optional required label adres component
OnroerendErfgoed · Jan 24, 2024 · eb510e6 · eb510e6
1 parent 2dc3e3e
commit eb510e6
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 46 deletions.
diff --git a/src/__tests__/OeAdres.cy.ts b/src/__tests__/OeAdres.cy.ts
@@ -1,12 +1,16 @@
 import { mount } from 'cypress/vue';
-import { defineComponent } from 'vue';
+import { defineComponent, useAttrs } from 'vue';
 import OeAdres from '@components/smart/OeAdres.vue';
 import type { IAdresConfig } from '@models/adres';
 
 describe('Adres', () => {
   const TestComponent = defineComponent({
     components: { OeAdres },
-    template: '<Suspense><OeAdres/></Suspense>',
+    setup() {
+      const attrs = useAttrs();
+      return { attrs };
+    },
+    template: '<Suspense><OeAdres v-bind="attrs"/></Suspense>',
   });
 
   it('renders', () => {
@@ -23,20 +27,20 @@ describe('Adres', () => {
       mount(TestComponent);
     });
 
-    it('has an input label land - required', () => {
-      getLabel('land').should('have.text', 'Land(verplicht)');
+    it('has an input label land', () => {
+      getLabel('land').should('have.text', 'Land');
     });
 
-    it('has an input label gemeente - required', () => {
-      getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
+    it('has an input label gemeente', () => {
+      getLabel('gemeente').should('have.text', 'Gemeente');
     });
 
-    it('has an input label postcode - required', () => {
-      getLabel('postcode').should('have.text', 'Postcode(verplicht)');
+    it('has an input label postcode', () => {
+      getLabel('postcode').should('have.text', 'Postcode');
     });
 
-    it('has an input label straat - required', () => {
-      getLabel('straat').should('have.text', 'Straat(verplicht)');
+    it('has an input label straat', () => {
+      getLabel('straat').should('have.text', 'Straat');
     });
 
     it('has an input label huisnummer', () => {
@@ -139,8 +143,8 @@ describe('Adres', () => {
         getMultiSelect('straat').parent().should('have.class', 'vl-multiselect--error');
         getFormError('straat').should('have.text', 'Het veld straat is verplicht.');
 
-        getMultiSelect('huisnummer').parent().should('not.have.class', 'vl-multiselect--error');
-        getFormError('huisnummer').should('not.exist');
+        getMultiSelect('huisnummer').parent().should('have.class', 'vl-multiselect--error');
+        getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.');
 
         getMultiSelect('busnummer').parent().should('not.have.class', 'vl-multiselect--error');
         getFormError('busnummer').should('not.exist');
@@ -307,15 +311,45 @@ describe('Adres', () => {
         getTextInput('straat').should('have.class', 'vl-input-field--error');
         getFormError('straat').should('have.text', 'Het veld straat is verplicht.');
 
-        getTextInput('huisnummer').should('not.have.class', 'vl-input-field--error');
-        getFormError('huisnummer').should('not.exist');
+        getTextInput('huisnummer').should('have.class', 'vl-input-field--error');
+        getFormError('huisnummer').should('have.text', 'Het veld huisnummer is verplicht.');
 
         getTextInput('busnummer').should('not.have.class', 'vl-input-field--error');
         getFormError('busnummer').should('not.exist');
       });
     });
   });
 
+  describe('form - show required annotation per field', () => {
+    beforeEach(() => {
+      mount(TestComponent, { props: { showRequiredPerField: true } });
+    });
+
+    it('has an input label land', () => {
+      getLabel('land').should('have.text', 'LandVERPLICHT');
+    });
+
+    it('has an input label gemeente', () => {
+      getLabel('gemeente').should('have.text', 'GemeenteVERPLICHT');
+    });
+
+    it('has an input label postcode', () => {
+      getLabel('postcode').should('have.text', 'PostcodeVERPLICHT');
+    });
+
+    it('has an input label straat', () => {
+      getLabel('straat').should('have.text', 'StraatVERPLICHT');
+    });
+
+    it('has an input label huisnummer', () => {
+      getLabel('huisnummer').should('have.text', 'HuisnummerVERPLICHT');
+    });
+
+    it('has an input label busnummer', () => {
+      getLabel('busnummer').should('have.text', 'Busnummer');
+    });
+  });
+
   describe('form - 2-way binding', () => {
     it('fills in the predefined values', () => {
       mount(TestComponent, {
@@ -451,12 +485,12 @@ describe('Adres', () => {
         });
       });
 
-      it('has an input label land - required', () => {
-        getLabel('land').should('have.text', 'Land(verplicht)');
+      it('has an input label land', () => {
+        getLabel('land').should('have.text', 'Land');
       });
 
-      it('has an input label gemeente - required', () => {
-        getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
+      it('has an input label gemeente', () => {
+        getLabel('gemeente').should('have.text', 'Gemeente');
       });
 
       it('has an input label postcode', () => {
@@ -526,28 +560,28 @@ describe('Adres', () => {
         });
       });
 
-      it('has an input label land - required', () => {
-        getLabel('land').should('have.text', 'Land(verplicht)');
+      it('has an input label land', () => {
+        getLabel('land').should('have.text', 'Land');
       });
 
-      it('has an input label gemeente - required', () => {
-        getLabel('gemeente').should('have.text', 'Gemeente(verplicht)');
+      it('has an input label gemeente', () => {
+        getLabel('gemeente').should('have.text', 'Gemeente');
       });
 
       it('has an input label postcode', () => {
-        getLabel('postcode').should('have.text', 'Postcode(verplicht)');
+        getLabel('postcode').should('have.text', 'Postcode');
       });
 
       it('has an input label straat', () => {
-        getLabel('straat').should('have.text', 'Straat(verplicht)');
+        getLabel('straat').should('have.text', 'Straat');
       });
 
       it('has an input label huisnummer', () => {
-        getLabel('huisnummer').should('have.text', 'Huisnummer(verplicht)');
+        getLabel('huisnummer').should('have.text', 'Huisnummer');
       });
 
       it('has an input label busnummer', () => {
-        getLabel('busnummer').should('have.text', 'Busnummer(verplicht)');
+        getLabel('busnummer').should('have.text', 'Busnummer');
       });
 
       it('triggers required validation after fields are touched and emptied', () => {

diff --git a/src/components/smart/OeAdres.vue b/src/components/smart/OeAdres.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="oe-adres">
     <VlProperties>
-      <VlPropertiesTitle data-cy="title-adres">Adres</VlPropertiesTitle>
+      <VlPropertiesTitle v-if="!hideTitle" data-cy="title-adres">Adres</VlPropertiesTitle>
       <VlPropertiesList>
         <!-- Land -->
         <template v-if="!props.countryId">
           <VlPropertiesLabel>
             <vl-form-message-label data-cy="label-land">
               <span class="vl-u-spacer-right--xxsmall">Land</span>
-              <span v-if="$props.config?.land?.required" class="vl-form__annotation">
-                {{ '(verplicht)' }}
-              </span>
+              <span v-if="props.showRequiredPerField && $props.config?.land?.required" class="vl-form__annotation"
+                >VERPLICHT</span
+              >
             </vl-form-message-label>
           </VlPropertiesLabel>
           <VlPropertiesData>
@@ -35,9 +35,9 @@
         <VlPropertiesLabel>
           <vl-form-message-label data-cy="label-gemeente">
             <span class="vl-u-spacer-right--xxsmall">Gemeente</span>
-            <span v-if="$props.config?.gemeente?.required" class="vl-form__annotation">
-              {{ '(verplicht)' }}
-            </span>
+            <span v-if="props.showRequiredPerField && $props.config?.gemeente?.required" class="vl-form__annotation"
+              >VERPLICHT</span
+            >
           </vl-form-message-label>
         </VlPropertiesLabel>
         <VlPropertiesData>
@@ -84,9 +84,9 @@
         <VlPropertiesLabel>
           <vl-form-message-label data-cy="label-postcode">
             <span class="vl-u-spacer-right--xxsmall">Postcode</span>
-            <span v-if="$props.config?.postcode?.required" class="vl-form__annotation">
-              {{ '(verplicht)' }}
-            </span>
+            <span v-if="props.showRequiredPerField && $props.config?.postcode?.required" class="vl-form__annotation"
+              >VERPLICHT</span
+            >
           </vl-form-message-label>
         </VlPropertiesLabel>
         <VlPropertiesData>
@@ -144,9 +144,9 @@
         <VlPropertiesLabel>
           <vl-form-message-label data-cy="label-straat">
             <span class="vl-u-spacer-right--xxsmall">Straat</span>
-            <span v-if="$props.config?.straat?.required" class="vl-form__annotation">
-              {{ '(verplicht)' }}
-            </span>
+            <span v-if="props.showRequiredPerField && $props.config?.straat?.required" class="vl-form__annotation"
+              >VERPLICHT</span
+            >
           </vl-form-message-label>
         </VlPropertiesLabel>
         <VlPropertiesData>
@@ -199,9 +199,9 @@
         <VlPropertiesLabel>
           <vl-form-message-label data-cy="label-huisnummer">
             <span class="vl-u-spacer-right--xxsmall">Huisnummer</span>
-            <span v-if="$props.config?.huisnummer?.required" class="vl-form__annotation">
-              {{ '(verplicht)' }}
-            </span>
+            <span v-if="props.showRequiredPerField && $props.config?.huisnummer?.required" class="vl-form__annotation"
+              >VERPLICHT</span
+            >
           </vl-form-message-label>
         </VlPropertiesLabel>
         <VlPropertiesData>
@@ -259,9 +259,9 @@
         <VlPropertiesLabel>
           <vl-form-message-label data-cy="label-busnummer">
             <span class="vl-u-spacer-right--xxsmall">Busnummer</span>
-            <span v-if="$props.config?.busnummer?.required" class="vl-form__annotation">
-              {{ '(verplicht)' }}
-            </span>
+            <span v-if="props.showRequiredPerField && $props.config?.busnummer?.required" class="vl-form__annotation"
+              >VERPLICHT</span
+            >
           </vl-form-message-label>
         </VlPropertiesLabel>
         <VlPropertiesData>
@@ -342,12 +342,14 @@ import { CrabApiService } from '@services/crab-api.service';
 import { requiredIf } from '@utils/i18n-validators';
 
 const props = withDefaults(defineProps<IAdresProps>(), {
+  hideTitle: false,
+  showRequiredPerField: false,
   config: () => ({
     land: { required: true },
     gemeente: { required: true },
     postcode: { required: true },
     straat: { required: true },
-    huisnummer: { required: false },
+    huisnummer: { required: true },
     busnummer: { required: false },
   }),
   api: 'https://test-geo.onroerenderfgoed.be/',
@@ -506,6 +508,7 @@ const rules = computed(() => ({
 
 // Init validation instance
 const v$ = useVuelidate(rules, adres, { $lazy: true });
+defineExpose({ validate: () => v$.value.$validate() });
 
 // Reference data
 const crabApiService = new CrabApiService(props.api);

diff --git a/src/models/adres.ts b/src/models/adres.ts
@@ -1,11 +1,13 @@
 import type { ILocatieAdres } from '@models/locatie';
 
 export interface IAdresProps {
+  hideTitle?: boolean;
   api?: string;
   config?: IAdresConfig;
   countryId?: string;
   adres?: ILocatieAdres;
   optionsLimit?: number;
+  showRequiredPerField?: boolean;
 }
 
 export interface IAdresConfig {

diff --git a/src/stories/smart-components/adres.stories.ts b/src/stories/smart-components/adres.stories.ts
@@ -66,6 +66,12 @@ type Story = StoryObj<typeof OeAdres>;
  */
 export const Default: Story = {};
 
+export const ShowRequiredAnnotationPerField: Story = {
+  args: {
+    showRequiredPerField: true,
+  },
+};
+
 export const CustomApi: Story = {
   args: {
     api: 'https://test-geo.onroerenderfgoed.be/',