RosterForLoop

Le composant RosterForLoop fonctionne comme une boucle non paginée mais présente les différents champs dans un tableau.

• components, tableau contenant les composants enfant à cette boucle
• lines, permet le contrôle sur le nombre de lignes (ajouter / supprimer)
  • min, nombre minimal de lignes
  • max, nombre maximal de lignes
• headers, définit l'en-tête du tableau (optionel)

Voir le type

Source

{
  "$schema": "../../../lunatic-schema.json",
  "maxPage": "3",
  "components": [
    {
      "id": "seq",
      "componentType": "Sequence",
      "label": {
        "value": "\"Description des individus de votre logement\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "page": "1"
    },
    {
      "id": "loop-prenom",
      "componentType": "RosterForLoop",
      "header": [
        {
          "headerCell": true,
          "label": {
            "value": "",
            "type": "TXT"
          }
        },
        {
          "headerCell": true,
          "label": {
            "value": "Prénom",
            "type": "TXT"
          }
        },
        {
          "headerCell": true,
          "label": {
            "value": "Age",
            "type": "TXT"
          }
        }
      ],
      "label": {
        "value": "\"Ajouter un individu\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "bindingDependencies": [
        "PRENOM",
        "AGE"
      ],
      "lines": {
        "min": {
          "value": "1",
          "type": "VTL"
        },
        "max": {
          "value": "10",
          "type": "VTL"
        }
      },
      "page": "1",
      "components": [
        {
          "componentType": "Text",
          "label": {
            "value": "\"Individu \" || cast(GLOBAL_ITERATION_INDEX, string)",
            "type": "VTL"
          }
        },
        {
          "componentType": "Input",
          "conditionFilter": {
            "value": "true",
            "type": "VTL"
          },
          "maxLength": 30,
          "bindingDependencies": [
            "PRENOM"
          ],
          "id": "prenom",
          "response": {
            "name": "PRENOM"
          }
        },
        {
          "componentType": "Input",
          "conditionFilter": {
            "value": "true",
            "type": "VTL"
          },
          "maxLength": 30,
          "bindingDependencies": [
            "AGE"
          ],
          "id": "age",
          "response": {
            "name": "AGE"
          }
        }
      ]
    },
    {
      "id": "loop",
      "componentType": "Loop",
      "loopDependencies": [
        "PRENOM"
      ],
      "iterations": {
        "value": "count(PRENOM)",
        "type": "VTL"
      },
      "page": "2",
      "maxPage": "1",
      "depth": 1,
      "paginatedLoop": true,
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "components": [
        {
          "id": "age",
          "label": {
            "value": "PRENOM || \", quel est vôtre âge ?\"",
            "type": "VTL"
          },
          "conditionFilter": {
            "value": "true",
            "type": "VTL"
          },
          "page": "2.1",
          "componentType": "InputNumber",
          "min": 0,
          "max": 120,
          "decimals": 0,
          "response": {
            "name": "AGE"
          }
        }
      ]
    },
    {
      "id": "seq-end",
      "componentType": "Sequence",
      "label": {
        "value": "\"End\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "page": "3"
    }
  ],
  "resizing": {
    "PRENOM": {
      "size": "count(PRENOM)",
      "variables": [
        "AGE"
      ]
    }
  },
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "PRENOM",
      "values": {
        "PREVIOUS": [
          null
        ],
        "COLLECTED": [
          null
        ],
        "FORCED": [
          null
        ],
        "EDITED": [
          null
        ],
        "INPUTTED": [
          null
        ]
      }
    },
    {
      "variableType": "COLLECTED",
      "name": "AGE",
      "values": {
        "PREVIOUS": [
          null
        ],
        "COLLECTED": [
          null
        ],
        "FORCED": [
          null
        ],
        "EDITED": [
          null
        ],
        "INPUTTED": [
          null
        ]
      }
    }
  ]
}

Data

{}

Code

import {
  type LunaticData,
  type LunaticSource,
  type LunaticState,
  useLunatic,
  LunaticComponents,
  ModalControls,
} from '@inseefr/lunatic';
import { useState } from 'react';

type Props = {
  source: LunaticSource;
  data: LunaticData;
  options?: {initialPage?: LunaticState['pageTag']},
};

export function FormRendererWithNavigation({ source, data, options }: Props) {
  const {
    getComponents,
    isLastPage,
    isFirstPage,
    goPreviousPage,
    goNextPage,
    Provider,
    compileControls,
  } = useLunatic(source, data, {
    initialPage: '1' as LunaticState['pageTag'],
    ...options
  });

  // Les contrôles doivent être vérifiés manuellement
  const [errors, setErrors] = useState<ReturnType<typeof compileControls>>();
  const handleNext = () => {
    const currentPageErrors = compileControls();
    if (currentPageErrors.currentErrors) {
      setErrors(currentPageErrors);
    } else {
      goNextPage();
    }
  };
  const forceNext = () => {
    setErrors(undefined);
    goNextPage();
  };
  const closeModal = () => {
    setErrors(undefined);
  };

  return (
    <div>
      <Provider>
        <LunaticComponents
          components={getComponents()}
          componentProps={() => ({
            errors: errors?.currentErrors,
          })}
        />
      </Provider>
      <div style={{ marginTop: '.7rem', display: 'flex', gap: '.2rem' }}>
        <button className="button button--primary" disabled={isFirstPage} onClick={goPreviousPage}>
          Précédent
        </button>
        <button className="button button--primary" disabled={isLastPage} onClick={handleNext}>
          Suivant
        </button>
      </div>
      {errors && (
        <ModalControls
          errors={errors.currentErrors}
          goNext={forceNext}
          onClose={closeModal}
          isCritical={errors.isCritical}
        />
      )}
    </div>
  );
}

Rendu

Loading...