feat: fine row deletion

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "3.4.10",
+	"version": "3.4.11-rc.0",
 	"description": "Library of questionnaire components",
 	"repository": {
 		"type": "git",

src/components/Loop/Loop.tsx

@@ -51,32 +51,67 @@ export function Loop({
 		}
 	}, [nbRows, handleChanges, value]);
 
+	const removeRowWithIndex = useCallback(
+		(indexToRemove: number) => {
+			if (nbRows <= min) {
+				return;
+			}
+			// Case 0: trying to delete with wrong index
+			if (indexToRemove >= nbRows || indexToRemove < 0) {
+				return;
+			}
+			const newResponses = Object.entries(value).map(([k, v]) => {
+				return {
+					name: k,
+					value: v?.filter((_, i) => i !== indexToRemove),
+					removedIndex: indexToRemove,
+				};
+			});
+			handleChanges(newResponses);
+			setNbRows((n) => n - 1);
+		},
+		[nbRows, min, value, handleChanges]
+	);
+
 	if (nbRows <= 0) {
 		return null;
 	}
 
+	const canControlRows = min !== max && Number.isFinite(max);
+
 	return (
 		<CustomLoop
 			{...props}
 			errors={getComponentErrors(errors, props.id)}
 			addRow={nbRows === max ? undefined : addRow}
 			removeRow={nbRows === 1 ? undefined : removeRow}
-			canControlRows={min !== max && Number.isFinite(max)}
+			canControlRows={canControlRows}
 		>
 			{times(nbRows, (n) => (
-				<LunaticComponents
-					blocklist={blockedInLoopComponents}
-					key={n}
-					components={getComponents(n)}
-					componentProps={(c) => ({
-						...props,
-						...c,
-						iteration: n,
-						id: `${c.id}-${n}`,
-						errors,
-					})}
-				/>
+				<>
+					<LunaticComponents
+						blocklist={blockedInLoopComponents}
+						key={n}
+						components={getComponents(n)}
+						componentProps={(c) => ({
+							...props,
+							...c,
+							iteration: n,
+							id: `${c.id}-${n}`,
+							errors,
+						})}
+					/>
+					{canControlRows && (
+						<Button
+							onClick={() => removeRowWithIndex(n)}
+							id={`delete-action-button-${n}`}
+							label={D.DEFAULT_BUTTON_REMOVE_THIS_ROW}
+							disabled={nbRows === 1}
+						/>
+					)}
+				</>
 			))}
+			<br />
 		</CustomLoop>
 	);
 }

src/components/RosterForLoop/RosterForLoop.tsx

@@ -2,13 +2,15 @@ import { Fragment, useCallback, useState } from 'react';
 import type { LunaticComponentProps } from '../type';
 import { Table, Tbody, Td, Tr, TableHeader } from '../shared/Table';
 import { times } from '../../utils/array';
+import D from '../../i18n';
 import { LunaticComponents } from '../LunaticComponents';
 import { blockedInLoopComponents } from '../Loop/constant';
 import {
 	ComponentErrors,
 	getComponentErrors,
 } from '../shared/ComponentErrors/ComponentErrors';
 import { CustomLoop } from '../Loop/Loop';
+import { Button } from '../shared/Button/Button';
 
 const DEFAULT_MIN_ROWS = 1;
 const DEFAULT_MAX_ROWS = 12;
@@ -44,6 +46,8 @@ export const RosterForLoop = (
 		}
 	}, [max, nbRows]);
 
+	const cantRemove = nbRows === min;
+
 	const removeRow = useCallback(() => {
 		if (nbRows <= min) {
 			return;
@@ -60,6 +64,28 @@ export const RosterForLoop = (
 		handleChanges(newResponses);
 	}, [nbRows, min, valueMap, handleChanges]);
 
+	const removeRowWithIndex = useCallback(
+		(indexToRemove: number) => {
+			if (nbRows <= min) {
+				return;
+			}
+			// trying to delete with indexToRemove out of array index
+			if (indexToRemove >= nbRows || indexToRemove < 0) {
+				return;
+			}
+			const newResponses = Object.entries(valueMap).map(([k, v]) => {
+				return {
+					name: k,
+					value: v?.filter((_, i) => i !== indexToRemove),
+					removedIndex: indexToRemove,
+				};
+			});
+			handleChanges(newResponses);
+			setNbRows((n) => n - 1);
+		},
+		[nbRows, min, valueMap, handleChanges]
+	);
+
 	if (nbRows === 0) {
 		return null;
 	}
@@ -71,11 +97,13 @@ export const RosterForLoop = (
 			{...props}
 			errors={getComponentErrors(errors, props.id)}
 			addRow={nbRows === max ? undefined : addRow}
-			removeRow={nbRows === min ? undefined : removeRow}
+			removeRow={cantRemove ? undefined : removeRow}
 			canControlRows={!!(min && max && min !== max)}
 		>
 			<Table id={id}>
-				{header && <TableHeader header={header} />}
+				{header && (
+					<TableHeader header={[...header, { label: D.ACTION_HEADER }]} />
+				)}
 				<Tbody>
 					{times(nbRows, (n) => {
 						const components = getComponents(n);
@@ -104,6 +132,14 @@ export const RosterForLoop = (
 										})}
 										wrapper={(props) => <Td {...props} />}
 									/>
+									<Td id={`delete-action-${n}`}>
+										<Button
+											onClick={() => removeRowWithIndex(n)}
+											id={`delete-action-button-${n}`}
+											label={D.DEFAULT_BUTTON_REMOVE_THIS_ROW}
+											disabled={cantRemove}
+										/>
+									</Td>
 								</Tr>
 								{hasLineErrors && (
 									<Tr className="lunatic-errors">

src/components/RosterForLoop/__snapshots__/RosterForLoop.spec.tsx.snap

@@ -45,6 +45,16 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
             </div>
           </div>
         </td>
+        <td
+          class="lunatic-table-td"
+        >
+          <input
+            class="button-lunatic"
+            id="delete-action-button-0"
+            type="button"
+            value="Remove this row"
+          />
+        </td>
       </tr>
       <tr
         class="lunatic-table-tr"
@@ -75,6 +85,16 @@ exports[`RosterForLoop > renders the right number of columns 1`] = `
             </div>
           </div>
         </td>
+        <td
+          class="lunatic-table-td"
+        >
+          <input
+            class="button-lunatic"
+            id="delete-action-button-1"
+            type="button"
+            value="Remove this row"
+          />
+        </td>
       </tr>
     </tbody>
   </table>

src/i18n/dictionary.ts

@@ -1,6 +1,11 @@
 const dictionary = {
 	DEFAULT_BUTTON_ADD: { fr: 'Ajouter une ligne', en: 'Add row' },
 	DEFAULT_BUTTON_REMOVE: { fr: 'Supprimer une ligne', en: 'Remove row' },
+	DEFAULT_BUTTON_REMOVE_THIS_ROW: {
+		fr: 'Supprimer cette ligne',
+		en: 'Remove this row',
+	},
+	ACTION_HEADER: { fr: 'Action', en: 'Action' },
 	MODAL_IGNORE: { fr: 'Poursuivre', en: 'Ignore' },
 	MODAL_CORRECT: { fr: 'Corriger ma réponse', en: 'Correct' },
 	DK: { fr: 'Ne sais pas', en: "Don't know" },

src/stories/pairwise/data.json

@@ -1,6 +1,6 @@
 {
 	"COLLECTED": {
-		"PRENOM": { "COLLECTED": ["Dad", "Mom", "Unknow"] },
+		"PRENOM": { "COLLECTED": ["Dad", "Mom", "Daughter"] },
 		"AGE": { "COLLECTED": [30, 29, 5] },
 		"LINKS": {
 			"COLLECTED": [[null]]

src/stories/pairwise/source.json

@@ -341,7 +341,9 @@
 	"resizing": {
 		"PRENOM": {
 			"sizeForLinksVariables": ["count(PRENOM)", "count(PRENOM)"],
-			"linksVariables": ["LINKS"]
+			"linksVariables": ["LINKS"],
+			"size": "count(PRENOM)",
+			"variables": ["AGE"]
 		}
 	}
 }

src/type.source.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,