1936: Adds hasNext property for multistep forms

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/form/Footer.tsx

@@ -20,8 +20,9 @@ const Footer = () => {
         sendLabel,
         footerComponent,
         allowUntouchedSubmit,
+        hasNext,
+        formInputData,
     } = usePydanticFormContext();
-
     const t = useTranslations('footer');
 
     const PreviousButton = () => (
@@ -75,7 +76,7 @@ const Footer = () => {
                     !rhf.formState.isSubmitting)
             }
         >
-            {sendLabel ?? t('send')}
+            {sendLabel ?? hasNext ? t('send') : t('submit')}
         </button>
     );
 
@@ -88,8 +89,10 @@ const Footer = () => {
                     !rhf.formState.isDirty && (
                         <div>Het formulier is nog niet aangepast</div>
                     )}
+                {formInputData && formInputData.length > 0 && (
+                    <PreviousButton />
+                )}
 
-                <PreviousButton />
                 <ResetButton />
 
                 {!!onCancel && <CancelButton />}

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -151,6 +151,7 @@ function PydanticFormContextProvider({
     // we cache the form scheme so when there is an error, we still have the form
     // the form is not in the error response
     const [rawSchema, setRawSchema] = useState<PydanticFormSchemaRawJson>();
+    const [hasNext, setHasNext] = useState<boolean>(false);
 
     // extract the JSON schema to a more usable custom schema
 
@@ -235,6 +236,9 @@ function PydanticFormContextProvider({
         // when we receive a form from the JSON, we fully reset the scheme
         if (apiResponse?.form) {
             setRawSchema(apiResponse.form);
+            if (apiResponse.meta) {
+                setHasNext(!!apiResponse.meta.hasNext);
+            }
             setErrorDetails(undefined);
         }
 
@@ -362,6 +366,7 @@ function PydanticFormContextProvider({
         setFormInputData([]);
         setIsFullFilled(false);
         setRawSchema(undefined);
+        setHasNext(false);
     }, []);
 
     const PydanticFormContextState = {
@@ -393,6 +398,8 @@ function PydanticFormContextProvider({
         formKey,
         formIdKey,
         clearForm,
+        formInputData,
+        hasNext,
     };
 
     return (

frontend/packages/pydantic-forms/src/messages/en-GB.json

@@ -2,6 +2,7 @@
     "footer": {
         "cancel": "Cancel",
         "send": "Send",
+        "submit": "Submit",
         "reset": "Reset",
         "previous": "Previous",
         "next": "Next",

frontend/packages/pydantic-forms/src/messages/nl-NL.json

@@ -2,6 +2,7 @@
     "footer": {
         "cancel": "Annuleren",
         "send": "Verzenden",
+        "submit": "Indienen",
         "reset": "Resetten",
         "notModifiedYet": "Het formulier is nog niet aangepast",
         "notFilledYet": "Het formulier is nog niet ingevuld",

frontend/packages/pydantic-forms/src/types.ts

@@ -78,6 +78,8 @@ export interface PydanticFormContextProps {
     formKey: string;
     formIdKey?: string;
     clearForm: () => void;
+    hasNext: boolean;
+    formInputData: object[];
 }
 
 export enum PydanticFormState {
@@ -384,6 +386,9 @@ export interface PydanticFormApiResponse {
     form: PydanticFormSchemaRawJson;
     success?: boolean;
     validation_errors: PydanticFormApiValidationError[];
+    meta?: {
+        hasNext?: boolean;
+    };
 }
 
 export interface PydanticFormBaseSchema {