Question

Le composant Question entoure une question en lui donnant un contexte supplémentaire avec un titre une description et des déclarations.

Source

{
  "$schema": "../../../lunatic-schema.json",
  "pagination": "question",
  "maxPage": "2",
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "TESTTEXTE",
      "values": {
        "COLLECTED": null
      }
    },
    {
      "variableType": "COLLECTED",
      "name": "QNUM",
      "values": {
        "COLLECTED": null
      }
    }
  ],
  "components": [
    {
      "componentType": "Question",
      "id": "idQuestion",
      "page": "1",
      "label": {
        "type": "VTL|MD",
        "value": "\"Question\""
      },
      "description": {
        "type": "VTL|MD",
        "value": "\"Description de la question\""
      },
      "declarations": [
        {
          "declarationType": "HELP",
          "id": "idQuestion-help1",
          "label": {
            "type": "VTL|MD",
            "value": "\"Contenu de la  première déclaration avant (contexte)\""
          },
          "position": "BEFORE_QUESTION_TEXT"
        },
        {
          "declarationType": "HELP",
          "id": "idQuestion-help2",
          "label": {
            "type": "VTL|MD",
            "value": "\"Contenu de la  deuxième déclaration avant (contexte)\""
          },
          "position": "BEFORE_QUESTION_TEXT"
        },
        {
          "declarationType": "HELP",
          "id": "idQuestion-help3",
          "label": {
            "type": "VTL|MD",
            "value": "\"Contenu de la première déclaration après (Information)\""
          },
          "position": "AFTER_QUESTION_TEXT"
        },
        {
          "declarationType": "HELP",
          "id": "idQuestion-help4",
          "label": {
            "type": "VTL|MD",
            "value": "\"Contenu de la deuxième déclaration après (Information)\""
          },
          "position": "AFTER_QUESTION_TEXT"
        }
      ],
      "components": [
        {
          "componentType": "Input",
          "bindingDependencies": [
            "TESTTEXTE"
          ],
          "controls": [
            {
              "bindingDependencies": [
                "TESTTEXTE"
              ],
              "criticality": "WARN",
              "errorMessage": {
                "type": "VTL|MD",
                "value": "\"L'input ne peut pas valoir BLABLA\""
              },
              "typeOfControl": "CONSISTENCY",
              "control": {
                "type": "VTL",
                "value": "not(nvl(TESTTEXTE,\"\") = \"BLABLA\")"
              },
              "id": "kfxn6f16-CI-0"
            },
            {
              "bindingDependencies": [
                "TESTTEXTE"
              ],
              "criticality": "WARN",
              "errorMessage": {
                "type": "VTL|MD",
                "value": "\"Cette phrase un peu longue s’affiche si on a du vide pour la variable sur le texte inférieur à 255 caractères et voilà\""
              },
              "typeOfControl": "CONSISTENCY",
              "control": {
                "type": "VTL",
                "value": "not(isnull(TESTTEXTE))"
              },
              "id": "kfxn6f16-CI-1"
            }
          ],
          "response": {
            "name": "TESTTEXTE"
          },
          "conditionFilter": {
            "type": "VTL",
            "value": "true"
          },
          "id": "kfxn6f16",
          "page": "1",
          "label": {
            "type": "VTL|MD",
            "value": "\"Le label du champ input\""
          },
          "isMandatory": false,
          "maxLength": 15,
          "declarations": [
            {
              "declarationType": "INSTRUCTION",
              "id": "kfxn6f16-kfxn36ru",
              "label": {
                "type": "VTL|MD",
                "value": "\"Tester la saisie de BLABLA\""
              },
              "position": "AFTER_QUESTION_TEXT"
            }
          ]
        }
      ]
    },
    {
      "componentType": "Question",
      "id": "idQuestion2",
      "page": "2",
      "label": {
        "type": "VTL|MD",
        "value": "\"Question 2\""
      },
      "description": {
        "type": "VTL|MD",
        "value": "\"Description de la question 2\""
      },
      "components": [
        {
          "id": "k0dzbfek",
          "componentType": "InputNumber",
          "isMandatory": false,
          "page": "2",
          "min": 0,
          "max": 100,
          "decimals": 0,
          "label": {
            "value": "\"➡ 1. \" || \"Test de supériorité stricte - Saisie d’un nombre compris entre 0 et 100 - Si valeur supérieure à 5 message d’info. si superieur à 6,5 autre message \"",
            "type": "VTL|MD"
          },
          "declarations": [
            {
              "id": "k0dzbfek-kzgzg0bk",
              "declarationType": "HELP",
              "position": "AFTER_QUESTION_TEXT",
              "label": {
                "value": "\"Tester 2 et 20 (pour vérifier ordre numérique et lexico)\"",
                "type": "VTL|MD"
              }
            }
          ],
          "conditionFilter": {
            "value": "true",
            "type": "VTL"
          },
          "controls": [
            {
              "id": "k0dzbfek-CI-0",
              "criticality": "WARN",
              "control": {
                "value": "not(cast(nvl(QNUM,0),integer) > 5)",
                "type": "VTL"
              },
              "errorMessage": {
                "value": "\"sup à 5\"",
                "type": "VTL|MD"
              },
              "bindingDependencies": [
                "QNUM"
              ],
              "typeOfControl": "CONSISTENCY"
            },
            {
              "id": "k0dzbfek-CI-1",
              "criticality": "WARN",
              "control": {
                "value": "not(cast(nvl(QNUM,0),integer) > 6.5)",
                "type": "VTL"
              },
              "errorMessage": {
                "value": "\"superieur à 6.5\"",
                "type": "VTL|MD"
              },
              "bindingDependencies": [
                "QNUM"
              ],
              "typeOfControl": "CONSISTENCY"
            }
          ],
          "bindingDependencies": [
            "QNUM"
          ],
          "response": {
            "name": "QNUM"
          }
        }
      ]
    }
  ]
}

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...