POC : Multiple variables with suggesters (#900)

src/components/Suggester/CustomSuggester.tsx

@@ -11,19 +11,22 @@ type Props = {
 	className?: string;
 	classNamePrefix?: string;
 	placeholder?: string;
-	onSelect: (s: string | null) => void;
+	onSelect: (
+		option: string | null | { id?: string; [key: string]: ReactNode }
+	) => void;
 	value: string | null;
 	labelRenderer: LunaticComponentProps<'Suggester'>['labelRenderer'];
 	optionRenderer: LunaticComponentProps<'Suggester'>['optionRenderer'];
 	disabled?: boolean;
 	readOnly?: boolean;
 	id?: string;
-	searching: (
+	searching?: (
 		s: string | null
 	) => Promise<{ results: ComboboxOptionType[]; search: string }>;
 	label?: ReactNode;
 	description?: ReactNode;
 	errors?: LunaticError[];
+	defaultOptions?: ComboboxOptionType[];
 };
 
 export const CustomSuggester = slottableComponent<Props>(
@@ -43,14 +46,17 @@ export const CustomSuggester = slottableComponent<Props>(
 		label,
 		description,
 		errors,
+		defaultOptions,
 	}) => {
 		const [search, setSearch] = useState('');
-		const [options, setOptions] = useState<Array<ComboboxOptionType>>([]);
+		const [options, setOptions] = useState<Array<ComboboxOptionType>>(
+			defaultOptions ?? []
+		);
 		const lastSearch = useRef('');
 
 		const handleSelect = useCallback(
-			function (id: string | null) {
-				onSelect(id ? id : null);
+			(id: string | null) => {
+				onSelect(id ? options.find((o) => o.id === id)! : null);
 			},
 			[onSelect]
 		);
@@ -67,7 +73,7 @@ export const CustomSuggester = slottableComponent<Props>(
 						onSelect(search);
 					}
 				} else {
-					setOptions([]);
+					setOptions(defaultOptions ?? []);
 					onSelect(null);
 					setSearch('');
 				}

src/components/Suggester/Suggester.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { type ReactNode, useEffect, useMemo } from 'react';
 import type { LunaticComponentProps } from '../type';
 import { CustomSuggester } from './CustomSuggester';
 import { createSearching } from './helpers';
@@ -23,10 +23,29 @@ export function Suggester({
 	readOnly,
 	workersBasePath,
 	response,
+	optionResponses = [],
+	executeExpression,
+	iteration,
 }: LunaticComponentProps<'Suggester'>) {
 	const { state, fetchInfos, infos } = useSuggesterInfo(storeName, idbVersion);
-	const onChange = (v: string | null) => {
-		handleChange(response, v);
+	const onChange = (
+		v: string | null | { id?: string; [key: string]: ReactNode }
+	) => {
+		if (v && typeof v === 'object' && optionResponses) {
+			if (v.id) {
+				handleChange(response, v.id);
+			}
+			for (const optionResponse of optionResponses) {
+				if (optionResponse.attribute in v) {
+					handleChange(
+						{ name: optionResponse.name },
+						v[optionResponse.attribute] as string | null
+					);
+				}
+			}
+		} else {
+			handleChange(response, v as string | null);
+		}
 	};
 
 	// Fetch suggester info when the suggester is mounted
@@ -44,6 +63,31 @@ export function Suggester({
 		[infos, storeName, idbVersion, workersBasePath]
 	);
 
+	// Default options should not change between render
+	// so we can break the rule of hooks here
+	const defaultOptions = useMemo(() => {
+		if (!value) {
+			return [];
+		}
+		const labelResponse = optionResponses?.find((o) => o.attribute === 'label');
+		if (!labelResponse) {
+			return [];
+		}
+		const label = executeExpression<ReactNode>(labelResponse.name, {
+			iteration,
+		});
+		if (!label) {
+			return [];
+		}
+		return [
+			{
+				id: value,
+				label: label,
+				value: value,
+			},
+		];
+	}, []);
+
 	return (
 		<SuggesterStatus
 			storeName={storeName}
@@ -68,6 +112,7 @@ export function Suggester({
 					className={className}
 					optionRenderer={optionRenderer}
 					labelRenderer={labelRenderer}
+					defaultOptions={defaultOptions}
 					onSelect={onChange}
 					searching={searching}
 					disabled={disabled}

src/components/shared/Combobox/Combobox.tsx

@@ -31,6 +31,7 @@ type Props = ComboboxSelectionProps &
 		errors?: LunaticError[];
 		onChange?: (s: string | null) => void;
 		onSelect: (s: string | null) => void;
+		onBlur?: () => void;
 		options: ComboboxOptionType[];
 		readOnly?: boolean;
 	};
@@ -56,6 +57,7 @@ function LunaticComboBox({
 	label,
 	description,
 	errors,
+	onBlur,
 }: Props) {
 	const [expanded, setExpanded] = useState(false);
 	const [focused, setFocused] = useState(false);
@@ -76,6 +78,7 @@ function LunaticComboBox({
 		if (disabled || readOnly) {
 			return;
 		}
+		onBlur?.();
 		setExpanded(false);
 		setFocused(false);
 	};

src/components/type.ts

@@ -216,6 +216,9 @@ type ComponentPropsByType = {
 		idbVersion?: string;
 		focused: boolean;
 		response: { name: string };
+		optionResponses?: { name: string; attribute: string }[];
+		executeExpression: LunaticState['executeExpression'];
+		iteration: LunaticState['pager']['iteration'];
 	};
 	Summary: LunaticBaseProps<string | null> & {
 		executeExpression: LunaticState['executeExpression'];

src/stories/suggester/fakeReferentiel.json

@@ -0,0 +1,12 @@
+[
+	{
+		"id": "brosse",
+		"label": "Brosse à cheveux",
+		"price": 20
+	},
+	{
+		"id": "balle",
+		"label": "Balle rebondissante",
+		"price": 10
+	}
+]

src/stories/suggester/source-option-responses.json

@@ -0,0 +1,145 @@
+{
+	"suggesters": [
+		{
+			"name": "products",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 3,
+					"stemmer": false
+				}
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": {
+					"language": "French",
+					"pattern": "[\\w.]+",
+					"min": 3,
+					"stemmer": false
+				}
+			},
+			"version": "1"
+		}
+	],
+	"components": [
+		{
+			"componentType": "Suggester",
+			"response": {
+				"name": "PRODUCT"
+			},
+			"optionResponses": [
+				{
+					"name": "PRODUCT_NAME",
+					"attribute": "label"
+				},
+				{
+					"name": "PRODUCT_PRICE",
+					"attribute": "price"
+				}
+			],
+			"storeName": "products",
+			"conditionFilter": {
+				"type": "VTL",
+				"value": "true"
+			},
+			"id": "lt4ezymk",
+			"page": "1",
+			"label": {
+				"type": "VTL|MD",
+				"value": "\"➡ 1. \" || \"Quel est votre produit préféré ?\""
+			},
+			"mandatory": false,
+			"maxLength": 249
+		},
+		{
+			"componentType": "Input",
+			"response": {
+				"name": "NOM"
+			},
+			"conditionFilter": {
+				"type": "VTL",
+				"value": "true"
+			},
+			"id": "prenom",
+			"page": "2",
+			"label": {
+				"type": "VTL|MD",
+				"value": "\"➡ 2. Vous aimez \" || PRODUCT_NAME || \" à \" || cast(PRODUCT_PRICE, string) || \"€ mais quel est votre prénom ?\""
+			},
+			"mandatory": false,
+			"maxLength": 249
+		}
+	],
+	"pagination": "question",
+	"resizing": {},
+	"label": {
+		"type": "VTL|MD",
+		"value": "Suggester"
+	},
+	"lunaticModelVersion": "2.5.0",
+	"modele": "SUGGESTER",
+	"enoCoreVersion": "2.7.1",
+	"generatingDate": "27-02-2024 13:43:43",
+	"missing": false,
+	"id": "lt4f6mib",
+	"maxPage": "2",
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "PRODUCT"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "PRODUCT_PRICE"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "PRODUCT_NAME"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "PRODUCT_PRICE"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "PRENOM"
+		}
+	]
+}

src/stories/suggester/suggester.stories.jsx

@@ -3,6 +3,7 @@ import defaultArgTypes from '../utils/default-arg-types';
 import Orchestrator from '../utils/orchestrator';
 import { getReferentiel } from '../utils/referentiel';
 import source from './source';
+import sourceOptionResponses from './source-option-responses';
 
 const stories = {
 	title: 'Components/Suggester',
@@ -15,10 +16,27 @@ export default stories;
 const Template = (args) => <Orchestrator {...args} />;
 export const Default = Template.bind({});
 
+const getFakeReferentiel = async (name) => {
+	try {
+		return (await import(`./fakeReferentiel.json`)).default;
+	} catch (error) {
+		console.log('error', error);
+		throw new Error(`Unknown référentiel ${name}`);
+	}
+};
+
 Default.args = {
 	id: 'suggester',
 	source,
 	autoSuggesterLoading: true,
 	getReferentiel,
 	pagination: true,
 };
+export const OptionResponses = Template.bind({});
+OptionResponses.args = {
+	id: 'suggester-with-option',
+	source: sourceOptionResponses,
+	getReferentiel: getFakeReferentiel,
+	autoSuggesterLoading: true,
+	pagination: true,
+};