form-builder: Rendre le champ other multiple (#3469)

Co-authored-by: David FYON <[email protected]>

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

@@ -519,18 +519,55 @@ exports[`FormBuilder renders correctly 1`] = `
             </div>
           </div>
         </div>
+        <div class="v-input vd-form-input v-input--is-label-active v-input--is-dirty v-input--dense theme--dark v-text-field v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">
+          <div class="v-input__control">
+            <div class="v-input__slot accent">
+              <fieldset aria-hidden="true">
+                <legend style="width: 0px;"><span class="notranslate">​</span></legend>
+              </fieldset>
+              <div class="v-text-field__slot"><input id="input-163" placeholder="Entrez votre taille" type="text"></div>
+            </div>
+            <div class="v-text-field__details">
+              <div class="v-messages theme--dark">
+                <transition-group-stub tag="div" name="message-transition" class="v-messages__wrapper"></transition-group-stub>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="vd-form-field">
+      <h4 class="text-body-1 mb-2"><span>Question choix oui ou non conditionnel</span>
+        <!---->
+      </h4>
+      <p class="text-body-2 grey--text">
+        Visible quand le choix « Oui » ou « Non » est sélectionné
+      </p>
+      <div>
+        <div class="vd-select-btn-field" outlined="true" type="choiceButton">
+          <div class="vd-select-btn-field-toggle d-flex overflow-y-auto primary--text v-item-group theme--light v-btn-toggle" role="listbox"><button type="button" value="oui" class="v-btn white--text v-btn--active v-btn--has-bg theme--light elevation-0 v-size--default primary" style="height: auto; min-height: 40px;" aria-selected="true" role="option"><span class="v-btn__content"><span class="text-body-1">
+				Oui
+			</span>
+              <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate theme--light white--text flex-shrink-0 ml-1" style="visibility: visible;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
+            </button><button type="button" value="non" class="v-btn v-btn--outlined theme--light elevation-0 v-size--default primary--text" style="height: auto; min-height: 40px;" role="option"><span class="v-btn__content"><span class="text-body-1">
+				Non
+			</span>
+              <div class="spacer"></div> <span aria-hidden="true" class="v-icon notranslate theme--light white--text flex-shrink-0 ml-1" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></span>
+            </button></div>
+          <!---->
+        </div>
         <transition-stub name="expand-transition">
           <div class="vd-other-field mt-4">
             <h4 class="text-body-1 mb-1">
-              Autre choix
+              Merci d'expliquer les raisons de votre réponse affirmative ?
             </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">
+            <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">
               <div class="v-input__control">
                 <div class="v-input__slot">
                   <fieldset aria-hidden="true">
                     <legend style="width: 0px;"><span class="notranslate">​</span></legend>
                   </fieldset>
-                  <div class="v-text-field__slot"><textarea id="input-164" placeholder="Entrez votre taille" rows="1"></textarea></div>
+                  <div class="v-text-field__slot"><textarea id="input-176" rows="1"></textarea></div>
                 </div>
                 <div class="v-text-field__details">
                   <div class="v-messages theme--light">

packages/form-builder/src/components/FormBuilder/tests/data/questionForm.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { Form } from '../../types';
 
 const scheduleItems = [
@@ -314,6 +315,47 @@ export const questionForm: Form = {
 					label: 'Classic field',
 					outlined: true
 				}
+			},
+			questionChoiceOtherArraySelected: {
+				title: 'Question choix oui ou non conditionnel',
+				description: 'Visible quand le choix « Oui » ou « Non » est sélectionné',
+				multiple: true,
+				type: 'select',
+				value: {
+					value: 'oui',
+					other: 'justification'
+				},
+				items: [
+					{
+						text: 'Oui',
+						value: 'oui'
+					},
+					{
+						text: 'Non',
+						value: 'non'
+					}
+				],
+				other: [
+					{
+						label: 'Merci d\'expliquer les raisons de votre réponse affirmative ?',
+						selectedChoice: 'oui',
+						fieldOptions: {
+							hint: 'Veuillez entrez votre réponse'
+						}
+					},
+					{
+						label: 'Merci de clarifier les raisons de votre réponse négative ?',
+						selectedChoice: 'non',
+						fieldOptions: {
+							hint: 'Veuillez entrez votre réponse'
+						}
+					}
+				],
+				fieldOptions: {
+					outlined: true,
+					type: 'choiceButton',
+					inline: true
+				}
 			}
 		}
 	},

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

@@ -68,7 +68,7 @@
 
 	import { IFieldMap } from '../mixins/fieldMap';
 
-	import { ChoiceValue, OtherFieldValue, ChoiceFieldValue, OtherField, ChoiceFieldErrorMessages } from '../types';
+	import { ChoiceValue, OtherFieldValue, ChoiceFieldValue, OtherField, ChoiceFieldErrorMessages, FieldItemValue } from '../types';
 
 	const MixinsDeclaration = mixins(FieldComponent);
 
@@ -128,47 +128,48 @@
 		};
 
 		get otherField(): OtherField | undefined {
-			return this.field.other;
+			return Array.isArray(this.field.other) ? this.field.other.find(element => element.selectedChoice === this.choiceValue.value) : this.field.other;
 		}
 
-		get showOtherTextareaField(): boolean {
-			const otherSelectedChoice = this.otherField?.selectedChoice;
+		get selectedChoice(): FieldItemValue {
+			return this.otherField?.selectedChoice;
+		}
 
-			if (!this.choiceSelected && !otherSelectedChoice) {
+		get showOtherTextareaField(): boolean {
+			if (!this.choiceSelected && !this.selectedChoice) {
 				return false;
 			}
 
 			const choiceFieldValue = this.choiceValue.value;
 
-			if (choiceFieldValue === otherSelectedChoice) {
+			if (choiceFieldValue === this.selectedChoice) {
 				return true;
 			}
 
 			if (!Array.isArray(choiceFieldValue) || !choiceFieldValue.length) {
 				return false;
 			}
 
-			if (choiceFieldValue.includes(otherSelectedChoice)) {
+			if (choiceFieldValue.includes(this.selectedChoice)) {
 				return true;
 			}
 
 			return false;
 		}
 
 		get choiceSelected(): boolean {
-			return this.otherField?.selectedChoice !== undefined && this.otherField?.selectedChoice !== null;
+			return !!this.selectedChoice;
 		}
 
 		get otherActive(): boolean {
 			const choiceFieldValue = this.choiceValue?.value;
-			const selectedChoice = this.field.other?.selectedChoice;
 
 			if (!this.choiceSelected) {
 				return false;
 			} else if (Array.isArray(choiceFieldValue)) {
-				return choiceFieldValue.includes(selectedChoice);
+				return choiceFieldValue.includes(this.selectedChoice);
 			} else {
-				return choiceFieldValue === selectedChoice;
+				return choiceFieldValue === this.selectedChoice;
 			}
 		}
 
@@ -213,7 +214,7 @@
 		choiceUpdated(choiceFieldValue: ChoiceFieldValue): void {
 			this.choiceValue.value = choiceFieldValue;
 
-			if (this.choiceValue.value && !this.otherField?.selectedChoice) {
+			if (this.choiceValue.value && !this.selectedChoice) {
 				this.otherFieldValue = null;
 			}
 

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

@@ -92,6 +92,54 @@ describe('ChoiceField', () => {
 		expect(wrapper).toMatchSnapshot();
 	});
 
+	it('renders the other field when the corresponding choice is selected and type of other is array', () => {
+		wrapper = mountComponent(ChoiceField, {
+			propsData: {
+				field: {
+					type: 'select',
+					title: 'Question choix multiple conditionnel',
+					items: [
+						{
+							text: 'Oui',
+							value: 'oui'
+						},
+						{
+							text: 'Non',
+							value: 'non'
+						}
+					],
+					fieldOptions: {
+						outlined: true,
+						type: 'choiceButton',
+						inline: true
+					},
+					value: {
+						value: 'oui',
+						other: 'justification'
+					},
+					other: [
+						{
+							label: 'Merci d\'expliquer les raisons de votre réponse affirmative ?',
+							selectedChoice: 'oui',
+							fieldOptions: {
+								hint: 'Veuillez entrez votre réponse'
+							}
+						},
+						{
+							label: 'Merci de clarifier les raisons de votre réponse négative ?',
+							selectedChoice: 'non',
+							fieldOptions: {
+								hint: 'Veuillez entrez votre réponse'
+							}
+						}
+					]
+				}
+			}
+		});
+
+		expect(wrapper).toMatchSnapshot();
+	});
+
 	it('renders with single error message', () => {
 		wrapper = mountComponent(
 			ChoiceField,

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

@@ -28,6 +28,20 @@ exports[`ChoiceField renders the other field when the corresponding choice is se
 </div>
 `;
 
+exports[`ChoiceField renders the other field when the corresponding choice is selected and type of other is array 1`] = `
+<div>
+  <choicebuttonfield-stub items="[object Object],[object Object]" value="oui" options="[object Object]"></choicebuttonfield-stub>
+  <vexpandtransition-stub mode="in-out" hide-on-leave="">
+    <div class="vd-other-field mt-4">
+      <h4 class="text-body-1 mb-1">
+        Merci d'expliquer les raisons de votre réponse affirmative ?
+      </h4>
+      <vtextarea-stub errorcount="1" errormessages="" messages="" rules="" successmessages="" value="justification" backgroundcolor="" hint="Veuillez entrez votre réponse" loaderheight="2" clearicon="$clear" outlined="true" type="text" autogrow="true" rowheight="24" rows="1" class="vd-form-input"></vtextarea-stub>
+    </div>
+  </vexpandtransition-stub>
+</div>
+`;
+
 exports[`ChoiceField renders with multiple error messages 1`] = `
 <div>
   <div class="vd-select-btn-field vd-form-input" type="choiceButton">

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

@@ -61,7 +61,7 @@ export interface Field {
 	multiple?: boolean;
 	fieldOptions?: FieldOptions;
 	items?: FieldItem[];
-	other?: OtherField;
+	other?: OtherField | OtherField[];
 	mask?: string;
 	dynamic?: boolean;
 }