@inseefr/lunatic 3.5.3 → 3.5.5

package/src/use-lunatic/actions.ts

@@ -14,6 +14,8 @@ export type ActionHandleChanges = {
 			name: string;
 			value: unknown;
 			iteration?: number[];
+			/** Force a vector when an iteration is set and the value was a scalar **/
+			ignoreIterationOnScalar?: boolean;
 			[extra: string]: unknown;
 		}[];
 	};

package/src/use-lunatic/commons/fill-components/fill-component.spec.ts

@@ -38,7 +38,7 @@ describe('fillComponents', () => {
 					type: 'VTL|MD',
 					value: '"Input label"',
 				},
-				mandatory: true,
+				isMandatory: true,
 				maxLength: 15,
 			},
 		];

package/src/use-lunatic/commons/fill-components/fill-components.ts

@@ -49,7 +49,7 @@ export const fillComponent = (
 		goNextPage: state.goNextPage,
 		goPreviousPage: state.goPreviousPage,
 		iteration: state.pager.iteration,
-		required: 'mandatory' in component ? component.mandatory : false,
+		required: 'isMandatory' in component ? component.isMandatory : false,
 		value: value,
 		missingResponse: getMissingResponseProp(component, state),
 		management: state.management,

package/src/use-lunatic/commons/variables/behaviours/resizing-behaviour.ts

@@ -41,12 +41,20 @@ export function resizingBehaviour(
 
 		const newSize = forceInt(store.run(resizingInfo.size));
 		for (const variableName of resizingInfo.variables) {
-			const value = store.get(variableName);
-			if (!Array.isArray(value) || value.length !== newSize) {
-				store.set(variableName, resizeArrayVariable(value, newSize, null), {
+			// Since data can change after the resize, we need to pass a callback that will use the last value of the variable for the resize
+			store.enqueueSet(
+				variableName,
+				() => {
+					const value = store.get(variableName);
+					if (!Array.isArray(value) || value.length !== newSize) {
+						return resizeArrayVariable(value, newSize, null);
+					}
+					return value;
+				},
+				{
 					cause: 'resizing',
-				});
-			}
+				}
+			);
 		}
 	});
 }
@@ -81,6 +89,6 @@ function resizePairwise(
 			xSize,
 			new Array(ySize).fill(null)
 		);
-		store.set(variable, resizedValue);
+		store.enqueueSet(variable, resizedValue);
 	});
 }

package/src/use-lunatic/commons/variables/get-questionnaire-data.ts

@@ -7,6 +7,7 @@ export function getQuestionnaireData(
 	withCalculated: boolean = false,
 	variableNames?: string[]
 ): LunaticData {
+	store.commit();
 	const result = {
 		EXTERNAL: {} as Record<string, unknown>,
 		CALCULATED: {} as Record<string, unknown>,

package/src/use-lunatic/commons/variables/lunatic-variables-store.spec.ts

@@ -115,6 +115,27 @@ describe('lunatic-variables-store', () => {
 		expect(variables.get('AGES_PLUS_NBHAB')).toEqual([4, 5, 6]);
 	});
 
+	it('should handle transaction mode correctly', () => {
+		variables.set('FIRSTNAME', 'John');
+		expect(variables.get('FIRSTNAME')).toEqual('John');
+		variables.enqueueSet('FIRSTNAME', 'Jane');
+		expect(variables.get('FIRSTNAME')).toEqual('John');
+		variables.commit();
+		expect(variables.get('FIRSTNAME')).toEqual('Jane');
+	});
+
+	it('should ignore iteration when updating a scalar value', () => {
+		variables.set('FIRSTNAME', 'John'); // Start with a scalar value
+		expect(variables.get('FIRSTNAME')).toEqual('John');
+		variables.set('FIRSTNAME', 'Jane', {
+			iteration: [1],
+			ignoreIterationOnScalar: true,
+		});
+		expect(variables.get('FIRSTNAME')).toEqual('Jane');
+		variables.set('FIRSTNAME', 'Marc', { iteration: [1] });
+		expect(variables.get('FIRSTNAME')).toEqual([null, 'Marc']);
+	});
+
 	describe('event listener', () => {
 		it('should trigger onChange', () => {
 			variables.set('FIRSTNAME', 'John');
@@ -273,6 +294,10 @@ describe('lunatic-variables-store', () => {
 	});
 
 	describe('resizing', () => {
+		beforeEach(() => {
+			variables.autoCommit = true;
+		});
+
 		it('should resize variables', () => {
 			variables.set('PRENOM', ['John', 'Jane']);
 			variables.set('NOM', ['Doe']);
@@ -367,6 +392,10 @@ describe('lunatic-variables-store', () => {
 	});
 
 	describe('cleaning', () => {
+		beforeEach(() => {
+			variables.autoCommit = true;
+		});
+
 		it('should clean variables', () => {
 			variables.set('PRENOM', 'John');
 			variables.set('NOM', 'Doe');
@@ -568,6 +597,25 @@ describe('lunatic-variables-store', () => {
 		});
 	});
 
+	describe('commit', () => {
+		it('should handle data change before commit', () => {
+			variables.set('PRENOM', []);
+			variables.set('NOM', []);
+			resizingBehaviour(variables, {
+				PRENOM: {
+					size: 'count(PRENOM)',
+					variables: ['NOM'],
+				},
+			});
+			variables.set('PRENOM', ['John', 'Jane', 'Marc']);
+			variables.set('NOM', ['Doe', 'Doe2', 'Doe3']);
+			variables.set('PRENOM', ['John', 'Jane']); // Should trigger a delayed resize
+			variables.set('NOM', 'New', { iteration: [1] }); // But we change a value inside the resized variable
+			variables.commit();
+			expect(variables.get('NOM') as string[][]).toEqual(['Doe', 'New']);
+		});
+	});
+
 	describe('makeFromSource', () => {
 		it('should handle initial data correctly', () => {
 			const store = LunaticVariablesStore.makeFromSource(
@@ -606,6 +654,7 @@ describe('lunatic-variables-store', () => {
 			);
 			expect(store.get('PRENOM')).toEqual('Jane');
 			store.set('NOM', 'Doe');
+			store.commit();
 			expect(store.get('PRENOM')).toEqual('John');
 		});
 		it('should enable cleaning when disableCleaning = false', () => {

package/src/use-lunatic/commons/variables/lunatic-variables-store.ts

@@ -35,6 +35,8 @@ export type EventArgs = {
 		iteration?: IterationLevel | undefined;
 		/** What triggered this change. */
 		cause?: 'resizing' | 'cleaning';
+		/** Force a vector when an iteration is set and the value was a scalar **/
+		ignoreIterationOnScalar?: boolean;
 		/** Extra sent when setting the variable. */
 		[extra: string]: unknown;
 	};
@@ -46,6 +48,8 @@ export type LunaticVariablesStoreEvent<T extends keyof EventArgs> = {
 export class LunaticVariablesStore {
 	private dictionary = new Map<string, LunaticVariable>();
 	private eventTarget = new EventTarget();
+	private queue = new Map<string, () => void>();
+	public autoCommit = false; // Commit change instantly (used in tests)
 
 	constructor() {
 		interpretCount = 0;
@@ -55,12 +59,18 @@ export class LunaticVariablesStore {
 		source: LunaticSource,
 		data: LunaticData,
 		changeHandler: RefObject<LunaticOptions['onVariableChange']>,
-		disableCleaning?: boolean
+		// Disable cleaning
+		disableCleaning?: boolean,
+		// Do not delay resizing / cleaning
+		autoCommit?: boolean
 	) {
 		const store = new LunaticVariablesStore();
 		if (!source.variables) {
 			return store;
 		}
+		if (autoCommit) {
+			store.autoCommit = autoCommit;
+		}
 		// Source data (picked from "variables" in the source.json)s
 		const sourceValues: Record<string, unknown> = {};
 		// Starting data for the form (merged with data.json or injected data)
@@ -120,13 +130,50 @@ export class LunaticVariablesStore {
 		return this.dictionary.get(name)!.getValue(iteration) as T;
 	}
 
+	/**
+	 * Transactional setter that will change data only when `commit()` is called
+	 */
+	public enqueueSet(
+		name: string,
+		value: unknown,
+		args: Pick<EventArgs['change'], 'iteration' | 'cause'> = {}
+	) {
+		if (this.autoCommit) {
+			this.set(name, typeof value === 'function' ? value() : value, args);
+			return;
+		}
+		this.queue.set(name, () => {
+			// A function can be enqueued, we need to evaluate it to retrieve the value to set
+			// This is used for the resizing, where we want to resize the last version of the variable
+			if (typeof value === 'function') {
+				value = value();
+			}
+			this.set(name, value, args);
+		});
+	}
+
+	/**
+	 * Commit all changes in the queue
+	 */
+	public commit() {
+		const autoCommitValue = this.autoCommit;
+		// Since we can have nested operation, we prevent delayed set while commiting
+		this.autoCommit = true;
+		Array.from(this.queue.values()).forEach((cb) => cb());
+		this.autoCommit = autoCommitValue;
+		this.queue.clear();
+	}
+
 	/**
 	 * Set variable value
 	 */
 	public set(
 		name: string,
 		value: unknown,
-		args: Pick<EventArgs['change'], 'iteration' | 'cause'> = {}
+		args: Pick<
+			EventArgs['change'],
+			'iteration' | 'cause' | 'ignoreIterationOnScalar'
+		> = {}
 	): LunaticVariable {
 		if (!this.dictionary.has(name)) {
 			this.dictionary.set(
@@ -146,7 +193,7 @@ export class LunaticVariablesStore {
 			);
 		}
 		const variable = this.dictionary.get(name)!;
-		if (variable.setValue(value, args.iteration)) {
+		if (variable.setValue(value, args)) {
 			this.eventTarget.dispatchEvent(
 				new CustomEvent('change', {
 					detail: {
@@ -348,7 +395,9 @@ class LunaticVariable {
 		// this.calculatedCount++;
 		// Remember the value
 		try {
-			this.setValue(interpretVTL(this.expression, bindings), iteration);
+			this.setValue(interpretVTL(this.expression, bindings), {
+				iteration: iteration,
+			});
 		} catch {
 			throw new VTLInterpretationError(this.expression!, bindings);
 		}
@@ -359,7 +408,11 @@ class LunaticVariable {
 	/**
 	 * Set the value and returns true if the variable is touched
 	 */
-	setValue(value: unknown, iteration?: IterationLevel): boolean {
+	setValue(
+		value: unknown,
+		opts: { iteration?: IterationLevel; ignoreIterationOnScalar?: boolean }
+	): boolean {
+		const { iteration, ignoreIterationOnScalar } = opts;
 		if (value === this.getSavedValue(iteration)) {
 			return false;
 		}
@@ -369,6 +422,10 @@ class LunaticVariable {
 		}
 		// We want to save a value at a specific iteration, but the value is not an array yet
 		if (iteration !== undefined && !Array.isArray(this.value)) {
+			// Ignore the iteration since the value is not an array
+			if (ignoreIterationOnScalar) {
+				return this.setValue(value, {});
+			}
 			this.value = [];
 		}
 		this.value = !Array.isArray(iteration)
@@ -403,7 +460,7 @@ class LunaticVariable {
 		// Update every item of the array and look if we changed one item
 		const oneValueChanged =
 			times(Math.max(oldSize, newSize), (k) =>
-				this.setValue(value[k], [k])
+				this.setValue(value[k], { iteration: [k] })
 			).find((v) => v) !== undefined;
 		// New array is smaller, shorten the array
 		if (oldSize > newSize && Array.isArray(this.value)) {

package/src/use-lunatic/reducer/reducer.ts

@@ -5,10 +5,21 @@ import { reduceHandleChanges } from './reduce-handle-changes';
 import { reduceGoPreviousPage } from './reduce-go-previous-page';
 import { reduceGoToPage } from './reduce-go-to-page';
 
+// Actions that trigger a change in the store
+const commitActions: ActionKind[] = [
+	ActionKind.GO_PREVIOUS_PAGE,
+	ActionKind.GO_NEXT_PAGE,
+	ActionKind.GO_TO_PAGE,
+];
+
 export function reducer(
 	state: LunaticReducerState,
 	action: Action
 ): LunaticReducerState {
+	if (commitActions.includes(action.type)) {
+		state.variables.commit();
+	}
+
 	switch (action.type) {
 		case ActionKind.GO_PREVIOUS_PAGE:
 			return reduceGoPreviousPage(state);

package/src/use-lunatic/reducer/reducerInitializer.tsx

@@ -67,7 +67,8 @@ export function reducerInitializer({
 		source,
 		data,
 		onVariableChange,
-		disableFilters
+		disableFilters,
+		source.pagination !== 'question'
 	);
 	const pages = checkLoops(createMapPages(source));
 

package/src/use-lunatic/type.ts

@@ -235,6 +235,8 @@ export type LunaticOptions = {
 	trackChanges?: boolean;
 	logger?: LunaticLogger;
 	componentsOptions?: { detailAlwaysDisplayed?: boolean };
+	/** Commit variable change automatically for resizing / cleaning (used for testing) **/
+	autoCommit?: boolean;
 };
 
 /**
@@ -364,5 +366,6 @@ export type LunaticChangesHandler = (
 		name: string;
 		value: any;
 		iteration?: number[];
+		ignoreIterationOnScalar?: boolean;
 	}[]
 ) => void;

package/src/use-lunatic/use-lunatic.test.ts

@@ -59,6 +59,45 @@ describe('use-lunatic()', () => {
 		expect(components[0].id).toBe('kiq5xw5p');
 	});
 
+	describe('handleChange()', () => {
+		it('should change variable value', () => {
+			const { result } = renderHook(() => useLunatic(...defaultParams));
+			act(() => {
+				result.current.handleChanges([
+					{
+						name: 'COMMENT',
+						value: 'Mon commentaire',
+					},
+				]);
+			});
+			act(() => {
+				expect(
+					result.current.getData(false, ['COMMENT']).COLLECTED!.COMMENT
+						.COLLECTED
+				).toBe('Mon commentaire');
+			});
+		});
+		it('should ignore iteration for scalar value', () => {
+			const { result } = renderHook(() => useLunatic(...defaultParams));
+			act(() => {
+				result.current.handleChanges([
+					{
+						name: 'COMMENT',
+						value: 'Mon commentaire 2',
+						iteration: [1],
+						ignoreIterationOnScalar: true,
+					},
+				]);
+			});
+			act(() => {
+				expect(
+					result.current.getData(false, ['COMMENT']).COLLECTED!.COMMENT
+						.COLLECTED
+				).toBe('Mon commentaire 2');
+			});
+		});
+	});
+
 	describe('Provider', () => {
 		it('should not generate a new Provider every render', () => {
 			const { result } = renderHook(() => {
@@ -230,7 +269,7 @@ describe('use-lunatic()', () => {
 	describe('cleaning', () => {
 		it('should handle cleaning in a loop', () => {
 			const { result } = renderHook(() =>
-				useLunatic(sourceCleaningLoop as any, undefined, {})
+				useLunatic(sourceCleaningLoop as any, undefined)
 			);
 			act(() => {
 				result.current.handleChanges([

package/stories/overview/sourceWithHierarchy.json

@@ -38,7 +38,7 @@
         {
             "id": "j6p3dkx6",
             "componentType": "Textarea",
-            "mandatory": true,
+            "isMandatory": true,
             "page": "2",
             "maxLength": 500,
             "label": {
@@ -60,7 +60,7 @@
         {
             "id": "j6p0np9q",
             "componentType": "CheckboxBoolean",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "3",
             "label": {
                 "value": "\"➡ \" || \"If you agree to answer this questionnaire, please check the box\"",
@@ -139,7 +139,7 @@
         {
             "id": "j3343qhx",
             "componentType": "Input",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "4",
             "maxLength": 30,
             "label": {
@@ -173,7 +173,7 @@
         {
             "id": "j6q9h8tj",
             "componentType": "InputNumber",
-            "mandatory": true,
+            "isMandatory": true,
             "page": "5",
             "min": 0,
             "max": 99,
@@ -209,7 +209,7 @@
         {
             "id": "kiq71eoi",
             "componentType": "Datepicker",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "6",
             "min": "1900-01-01",
             "max": "format-date(current-date(),'[Y0001]-[M01]-[D01]')",
@@ -256,7 +256,7 @@
         {
             "id": "k5nvty2o",
             "componentType": "Datepicker",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "7",
             "min": "1980-05",
             "label": {
@@ -302,7 +302,7 @@
         {
             "id": "k5nw1fir",
             "componentType": "Datepicker",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "8",
             "min": "1900",
             "max": "year-from-date(current-date())",
@@ -349,7 +349,7 @@
         {
             "id": "k5nw0w05",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "9",
             "min": 0,
             "max": 70,
@@ -386,7 +386,7 @@
         {
             "id": "k5nvu98z",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "10",
             "min": 0,
             "max": 366,
@@ -423,7 +423,7 @@
         {
             "id": "k5nw8ei1",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "11",
             "min": 0,
             "max": 12,
@@ -460,7 +460,7 @@
         {
             "id": "k5nw9dk4",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "12",
             "min": 0,
             "max": 100,
@@ -497,7 +497,7 @@
         {
             "id": "j6z06z1e",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "13",
             "min": 0,
             "max": 99,
@@ -566,7 +566,7 @@
         {
             "id": "j3343clt",
             "componentType": "Radio",
-            "mandatory": true,
+            "isMandatory": true,
             "page": "15",
             "label": {
                 "value": "\"➡ \" || \"In which city do the Simpsons reside?\"",
@@ -616,7 +616,7 @@
         {
             "id": "j6qdfhvw",
             "componentType": "CheckboxOne",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "16",
             "label": {
                 "value": "\"➡ \" || \"Who is the Simpsons city mayor?\"",
@@ -670,7 +670,7 @@
         {
             "id": "j4nw5cqz",
             "componentType": "Dropdown",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "17",
             "label": {
                 "value": "\"➡ \" || \"In which state do The Simpsons reside?\"",
@@ -811,7 +811,7 @@
         {
             "id": "j6p29i81",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "20",
             "label": {
                 "value": "\"➡ \" || \"Does Jay like the following ice cream flavours?\"",
@@ -927,7 +927,7 @@
         {
             "id": "j6qefnga",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "21",
             "label": {
                 "value": "\"➡ \" || \"Which character works in the nuclear power plant?\"",
@@ -1038,7 +1038,7 @@
         {
             "id": "j6yzoc6g",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "22",
             "label": {
                 "value": "\"➡ \" || \"In which city each character was born?\"",
@@ -1291,7 +1291,7 @@
         {
             "id": "j4nwc63q",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "24",
             "label": {
                 "value": "\"➡ \" || \"Please, specify the percentage of Jay’s expenses in the Kwik-E-Mart for each product?\"",
@@ -1473,7 +1473,7 @@
         {
             "id": "k9cg2q5t",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "25",
             "label": {
                 "value": "\"➡ \" || \"Please specify if Jay has bought each product in his last food shopping\"",
@@ -1776,7 +1776,7 @@
         {
             "id": "kbkjvgel",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "26",
             "label": {
                 "value": "\"➡ \" || \"Who did these clownings and tell us what you remember?\"",
@@ -2008,7 +2008,7 @@
         {
             "id": "j6p2lwuj",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "27",
             "label": {
                 "value": "\"➡ \" || \"Which of the following means of transport were used by the hero and in which country?\"",
@@ -2271,7 +2271,7 @@
         {
             "id": "j6qg8rc6",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "29",
             "label": {
                 "value": "\"➡ \" || \"Please, complete the following grid with your favourite characters\"",
@@ -2709,7 +2709,7 @@
         {
             "id": "jvxux0mi",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "30",
             "label": {
                 "value": "\"➡ \" || \"How has your feeling about the following characters evolved over time?\"",
@@ -2839,7 +2839,7 @@
         {
             "id": "jvxwy68n",
             "componentType": "Table",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "31",
             "label": {
                 "value": "\"➡ \" || \"Can you tell how long Bart Simpson has been on leave for each type and whether there has been another type?\"",
@@ -3067,7 +3067,7 @@
         {
             "id": "kiq612ky",
             "componentType": "InputNumber",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "33",
             "min": 0,
             "max": 20,
@@ -3166,7 +3166,7 @@
                 {
                     "id": "kiq66gtw",
                     "componentType": "Input",
-                    "mandatory": false,
+                    "isMandatory": false,
                     "page": "34",
                     "maxLength": 30,
                     "label": {
@@ -3202,7 +3202,7 @@
                 {
                     "id": "kiq5r8wu",
                     "componentType": "InputNumber",
-                    "mandatory": false,
+                    "isMandatory": false,
                     "page": "34",
                     "min": 0,
                     "max": 120,
@@ -3288,7 +3288,7 @@
                 {
                     "id": "kiq65x3c",
                     "componentType": "CheckboxOne",
-                    "mandatory": false,
+                    "isMandatory": false,
                     "page": "35.2",
                     "label": {
                         "value": "\"➡ \" || \"Is character named \" || NAME_CHAR || \" your favourite one ? \"",
@@ -3325,7 +3325,7 @@
                 {
                     "id": "kiq651zv",
                     "componentType": "Textarea",
-                    "mandatory": false,
+                    "isMandatory": false,
                     "page": "35.3",
                     "maxLength": 255,
                     "label": {
@@ -3376,7 +3376,7 @@
         {
             "id": "j6z0z3us",
             "componentType": "Textarea",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "37",
             "maxLength": 255,
             "label": {
@@ -3412,7 +3412,7 @@
         {
             "id": "COMMENT-QUESTION",
             "componentType": "Textarea",
-            "mandatory": false,
+            "isMandatory": false,
             "page": "39",
             "maxLength": 2000,
             "label": { "value": "\"VIII - \" || \"Comment\"", "type": "VTL|MD" },