Merge pull request #104 from workfloworchestrator/1936-has-next

1936 has next

Author: DutchBen

frontend/.changeset/ripe-sides-cough.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Exports components from components/render folder

frontend/.changeset/whole-shoes-unite.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Adds hasNext property for multistep forms

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

@@ -20,10 +20,12 @@ const Footer = () => {
         sendLabel,
         footerComponent,
         allowUntouchedSubmit,
+        hasNext,
+        formInputData,
     } = usePydanticFormContext();
 
     const t = useTranslations('footer');
-
+    const submitButtonLabel = sendLabel ?? hasNext ? t('send') : t('submit');
     const PreviousButton = () => (
         <button
             type="button"
@@ -75,7 +77,7 @@ const Footer = () => {
                     !rhf.formState.isSubmitting)
             }
         >
-            {sendLabel ?? t('send')}
+            {submitButtonLabel}
         </button>
     );
 
@@ -88,8 +90,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/components/index.ts

@@ -1,2 +1,3 @@
 export * from './fields';
 export * from './zodValidationsPresets';
+export * from './render';

frontend/packages/pydantic-forms/src/components/render/FormRenderer.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
 import { RenderFields } from '@/components/render';
-import type { FormRenderer as Renderer } from '@/types';
+import type { FormRenderComponent } from '@/types';
 
-export const FormRenderer: Renderer = ({ pydanticFormComponents }) => {
+export const FormRenderer: FormRenderComponent = ({
+    pydanticFormComponents,
+}) => {
     return <RenderFields pydanticFormComponents={pydanticFormComponents} />;
 };

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

@@ -9,6 +9,7 @@ import React, {
     createContext,
     useCallback,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -151,6 +152,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
 
@@ -172,10 +174,24 @@ function PydanticFormContextProvider({
         componentMatcher,
     );
 
+    const initialData = useMemo(
+        () =>
+            getFormValuesFromFieldOrLabels(
+                pydanticFormSchema,
+                {
+                    ...formLabels?.data,
+                    ...customData,
+                },
+                componentMatcher,
+            ),
+        [componentMatcher, customData, formLabels?.data, pydanticFormSchema],
+    );
+
     // initialize the react-hook-form
     const rhf = useForm({
         resolver: zodResolver(resolver),
         mode: 'all',
+        values: initialData,
     });
 
     // Adds watch subscripton on form values
@@ -220,8 +236,15 @@ function PydanticFormContextProvider({
         }
 
         setFormInputHistory(new Map<string, object>());
-        rhf.reset();
-    }, [apiResponse, isFullFilled, onSuccess, rhf, skipSuccessNotice]);
+        rhf.reset(initialData);
+    }, [
+        apiResponse,
+        initialData,
+        isFullFilled,
+        onSuccess,
+        rhf,
+        skipSuccessNotice,
+    ]);
 
     // a useeffect for whenever the error response updates
     // sometimes we need to update the form,
@@ -235,6 +258,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);
         }
 
@@ -251,26 +277,16 @@ function PydanticFormContextProvider({
             return;
         }
 
-        const initialData = getFormValuesFromFieldOrLabels(
-            pydanticFormSchema,
-            {
-                ...formLabels?.data,
-                ...customData,
-            },
-            componentMatcher,
-        );
-
-        rhf.reset(initialData);
-    }, [customData, formLabels, pydanticFormSchema, rhf, componentMatcher]);
+        rhf.reset(undefined, { keepDefaultValues: true });
+    }, [pydanticFormSchema, rhf]);
 
     // a useeffect for filling data whenever formdefinition or labels update
     useEffect(() => {
-        // this makes sure default values are set.
-        resetFormData();
         getHashForArray(formInputData).then((hash) => {
             const currentStepFromHistory = formInputHistory.get(hash);
 
             if (currentStepFromHistory) {
+                rhf.reset();
                 Object.entries(currentStepFromHistory).forEach(
                     ([fieldName, fieldValue]) =>
                         rhf.setValue(fieldName, fieldValue, {
@@ -300,7 +316,6 @@ function PydanticFormContextProvider({
     const submitFormFn = useCallback(() => {
         setIsSending(true);
         addFormInputData(rhf?.getValues(), !!errorDetails);
-
         window.scrollTo(0, 0);
     }, [rhf, errorDetails, addFormInputData]);
 
@@ -362,6 +377,7 @@ function PydanticFormContextProvider({
         setFormInputData([]);
         setIsFullFilled(false);
         setRawSchema(undefined);
+        setHasNext(false);
     }, []);
 
     const PydanticFormContextState = {
@@ -393,6 +409,8 @@ function PydanticFormContextProvider({
         formKey,
         formIdKey,
         clearForm,
+        formInputData,
+        hasNext,
     };
 
     return (

frontend/packages/pydantic-forms/src/core/helper.ts

@@ -256,10 +256,14 @@ export const isNullableField = (field: PydanticFormField) =>
  * And labelData (this holds the current values from API)
  */
 export const getFormValuesFromFieldOrLabels = (
-    pydanticFormSchema: PydanticFormSchema,
+    pydanticFormSchema?: PydanticFormSchema,
     labelData?: Record<string, string>,
     componentMatcher?: PydanticFormsContextConfig['componentMatcher'],
 ) => {
+    if (!pydanticFormSchema) {
+        return {};
+    }
+
     const fieldValues: Record<string, string> = {};
 
     const includedFields: string[] = [];

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 {
@@ -247,7 +249,7 @@ export type PydanticFormZodValidationFn = (
     rhf?: ReturnType<typeof useForm>,
 ) => z.ZodTypeAny;
 
-export type RowRenderer = React.JSXElementConstructor<{
+export type RowRenderComponent = React.JSXElementConstructor<{
     title: string;
     description?: string;
     required?: boolean;
@@ -293,9 +295,9 @@ export interface PydanticFormsContextConfig {
 
     componentMatcher?: ComponentMatcher;
 
-    formRenderer?: FormRenderer;
+    formRenderer?: FormRenderComponent;
     footerRenderer?: React.JSXElementConstructor<object>;
-    rowRenderer?: RowRenderer;
+    rowRenderer?: RowRenderComponent;
 
     // Extend field definitions
     fieldDetailProvider?: PydanticFormFieldDetailProvider;
@@ -313,7 +315,7 @@ export interface PydanticFormsContextConfig {
     locale?: Locale;
 }
 
-export type FormRenderer = React.JSXElementConstructor<{
+export type FormRenderComponent = React.JSXElementConstructor<{
     pydanticFormComponents: PydanticFormComponents;
 }>;
 
@@ -384,6 +386,9 @@ export interface PydanticFormApiResponse {
     form: PydanticFormSchemaRawJson;
     success?: boolean;
     validation_errors: PydanticFormApiValidationError[];
+    meta?: {
+        hasNext?: boolean;
+    };
 }
 
 export interface PydanticFormBaseSchema {