🐛 form-builder: Handle other field error messages in ChoiceField

CHANGELOG.md

@@ -56,7 +56,8 @@
   - **ChoiceSliderField:** Correction des étiquettes qui masquent le titre ([#1537](https://github.com/assurance-maladie-digital/design-system/pull/1537)) ([3a18705](https://github.com/assurance-maladie-digital/design-system/commit/3a18705a7cf3e4d217cf780a47a7110333f99298))
   - **setFormErrors:** Correction de la gestion des erreurs ([#1556](https://github.com/assurance-maladie-digital/design-system/pull/1556)) ([8e90760](https://github.com/assurance-maladie-digital/design-system/commit/8e90760bdaa9fa8716d062d1d240152a4416ded4))
   - **ChoiceButtonField:** Correction des styles ([#1558](https://github.com/assurance-maladie-digital/design-system/pull/1558)) ([aaff7a1](https://github.com/assurance-maladie-digital/design-system/commit/aaff7a1a5417506761649a9d09f09c56bd0c625f))
-  - **ChoiceSliderField:** Correction de la taille par défaut des étiquettes ([#1559](https://github.com/assurance-maladie-digital/design-system/pull/1559))
+  - **ChoiceSliderField:** Correction de la taille par défaut des étiquettes ([#1559](https://github.com/assurance-maladie-digital/design-system/pull/1559)) ([26bda12](https://github.com/assurance-maladie-digital/design-system/commit/26bda12b084a964c708973031297b4eb9008e99f))
+  - **ChoiceField:** Correction de la gestion des messages d'erreur ([#1560](https://github.com/assurance-maladie-digital/design-system/pull/1560))
 
 - ♻️ **Refactoring**
   - **tests:** Mise à jour de la formulation dans les tests ([#1468](https://github.com/assurance-maladie-digital/design-system/pull/1468)) ([bdaf37b](https://github.com/assurance-maladie-digital/design-system/commit/bdaf37b3d19b5bb36873cec43e81fa22fe62efbd))

packages/form-builder/src/components/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap

@@ -555,7 +555,7 @@ exports[`FormBuilder renders correctly 1`] = `
         </div>
         <transition-stub name="expand-transition">
           <div>
-            <h4 class="mb-1 body-1">
+            <h4 class="text-body-1 mb-1">
               Autre choix
             </h4>
             <div class="v-input vd-form-input v-textarea v-textarea--auto-grow v-textarea--no-resize v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">

packages/form-builder/src/components/FormField/fields/ChoiceAutocompleteField.vue

@@ -6,6 +6,7 @@
 		:multiple="multiple"
 		:search-input.sync="searchInput"
 		:type="undefined"
+		:error-messages="errorMessages"
 		class="vd-form-input"
 		@change="valueUpdated"
 	/>

packages/form-builder/src/components/FormField/fields/ChoiceButtonField.vue

@@ -103,20 +103,6 @@
 			return Boolean(this.options?.hint);
 		}
 
-		get errorMessages(): string[] | null {
-			const errorMessages = this.options?.errorMessages;
-
-			if (typeof errorMessages === 'string') {
-				return [errorMessages];
-			}
-
-			if (Array.isArray(errorMessages) && errorMessages.length) {
-				return errorMessages;
-			}
-
-			return null;
-		}
-
 		getIconStyles(item: FieldItem): IndexedObject {
 			return {
 				visibility: this.isSelected(item.value) ? 'visible' : 'hidden'

packages/form-builder/src/components/FormField/fields/ChoiceField.vue

@@ -7,6 +7,7 @@
 			:items="field.items"
 			:options="fieldOptions"
 			:multiple="field.multiple"
+			:error-messages="errorMessages.value"
 			@change="choiceUpdated"
 		/>
 
@@ -19,7 +20,7 @@
 				<div v-if="showOtherTextareaField">
 					<h4
 						v-if="otherField.label"
-						class="mb-1 body-1"
+						class="text-body-1 mb-1"
 					>
 						{{ otherField.label }}
 					</h4>
@@ -30,9 +31,10 @@
 						:value="otherFieldValue"
 						:disabled="!otherActive"
 						:rows="1"
-						class="vd-form-input"
+						:error-messages="errorMessages.other"
 						auto-grow
 						outlined
+						class="vd-form-input"
 						@change="otherUpdated"
 					/>
 				</div>
@@ -44,10 +46,11 @@
 				:value="otherFieldValue"
 				:background-color="otherFieldValue ? 'accent' : undefined"
 				:dark="Boolean(otherFieldValue)"
-				class="vd-form-input"
+				:error-messages="errorMessages.other"
 				color="accent"
 				dense
 				outlined
+				class="vd-form-input"
 				@input="setOtherValue"
 				@change="otherUpdated"
 			/>
@@ -64,7 +67,7 @@
 
 	import { IFieldMap } from '../mixins/fieldMap';
 
-	import { ChoiceValue, OtherFieldValue, ChoiceFieldValue, OtherField } from '../types';
+	import { ChoiceValue, OtherFieldValue, ChoiceFieldValue, OtherField, ChoiceFieldErrorMessages } from '../types';
 
 	const MixinsDeclaration = mixins(FieldComponent);
 
@@ -193,6 +196,38 @@
 			return metadataType ? this.selectFieldMap[metadataType] : this.selectFieldMap.select;
 		}
 
+		get errorMessages(): ChoiceFieldErrorMessages {
+			const errorMessages = this.fieldOptions?.errorMessages;
+
+			if (typeof errorMessages === 'string') {
+				return {
+					value: [errorMessages],
+					other: undefined
+				};
+			}
+
+			if (Array.isArray(errorMessages)) {
+				return {
+					value: errorMessages,
+					other: undefined
+				};
+			}
+
+			if (typeof errorMessages === 'object') {
+				let { value, other } = errorMessages as ChoiceFieldErrorMessages;
+
+				value = typeof value === 'string' ? [value] : value;
+				other = typeof other === 'string' ? [other] : other;
+
+				return {
+					value,
+					other
+				};
+			}
+
+			return {};
+		}
+
 		/**
 		 * Emit the new type select value when choice updated
 		 *

packages/form-builder/src/components/FormField/fields/ChoiceSelectField.vue

@@ -5,6 +5,7 @@
 		:items="items"
 		:multiple="multiple"
 		:type="undefined"
+		:error-messages="errorMessages"
 		class="vd-form-input"
 		@change="emitChangeEvent($event)"
 	/>

packages/form-builder/src/components/FormField/fields/ChoiceSliderField.vue

@@ -8,6 +8,7 @@
 		:type="undefined"
 		:class="{ 'thumb-label': isThumbLabel }"
 		:style="sliderStyles"
+		:error-messages="errorMessages"
 		color="accent"
 		tick-size="6"
 		track-color="grey lighten-1"

packages/form-builder/src/components/FormField/fields/tests/__snapshots__/ChoiceField.spec.ts.snap

@@ -2,24 +2,24 @@
 
 exports[`ChoiceField renders correctly 1`] = `
 <div>
-  <choiceselectfield-stub value="0" options="[object Object]" items="[object Object],[object Object],[object Object]"></choiceselectfield-stub>
+  <choiceselectfield-stub items="[object Object],[object Object],[object Object]" value="0" options="[object Object]"></choiceselectfield-stub>
   <!---->
 </div>
 `;
 
 exports[`ChoiceField renders the other field 1`] = `
 <div>
-  <choiceselectfield-stub options="[object Object]" items="[object Object],[object Object],[object Object]"></choiceselectfield-stub>
+  <choiceselectfield-stub items="[object Object],[object Object],[object Object]" options="[object Object]"></choiceselectfield-stub>
   <vtextfield-stub color="accent" dark="true" errorcount="1" errormessages="" messages="" rules="" successmessages="" value="XXL" backgroundcolor="accent" dense="true" hint="Veuillez entrez votre taille" loaderheight="2" clearicon="$clear" outlined="true" type="text" class="vd-form-input"></vtextfield-stub>
 </div>
 `;
 
 exports[`ChoiceField renders the other field when the corresponding choice is selected 1`] = `
 <div>
-  <choiceselectfield-stub value="autre" options="[object Object]" items="[object Object],[object Object],[object Object]"></choiceselectfield-stub>
+  <choiceselectfield-stub items="[object Object],[object Object],[object Object]" value="autre" options="[object Object]"></choiceselectfield-stub>
   <vexpandtransition-stub mode="in-out" hide-on-leave="">
     <div>
-      <h4 class="mb-1 body-1">
+      <h4 class="text-body-1 mb-1">
         Autre taille
       </h4>
       <vtextarea-stub errorcount="1" errormessages="" messages="" rules="" successmessages="" value="XXL" backgroundcolor="" hint="Veuillez entrez votre taille" loaderheight="2" clearicon="$clear" outlined="true" type="text" autogrow="true" rowheight="24" rows="1" class="vd-form-input"></vtextarea-stub>

packages/form-builder/src/components/FormField/mixins/choiceComponent.ts

@@ -5,6 +5,10 @@ import { ChoiceFieldValue, FieldItem, FieldOptions, FieldItemValue } from '../ty
 
 const Props = Vue.extend({
 	props: {
+		items: {
+			type: Array as PropType<FieldItem[]>,
+			required: true
+		},
 		/** The choice field value */
 		value: {
 			type: [Array, Number, String] as PropType<ChoiceFieldValue>,
@@ -18,9 +22,9 @@ const Props = Vue.extend({
 			type: Boolean,
 			default: false
 		},
-		items: {
-			type: Array as PropType<FieldItem[]>,
-			required: true
+		errorMessages: {
+			type: [String, Array, Object],
+			default: null
 		}
 	}
 });

packages/form-builder/src/components/FormField/types.d.ts

@@ -40,7 +40,7 @@ export interface FieldItem {
 }
 
 export interface FieldOptions {
-	errorMessages?: ErrorMessages | PeriodErrorMessages;
+	errorMessages?: ErrorMessages | ChoiceFieldErrorMessages | PeriodErrorMessages;
 	[key: string]: unknown;
 }