1830: Moves buttons to componment in footer

Author: Ruben van Leeuwen

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

@@ -24,57 +24,77 @@ const Footer = () => {
 
     const t = useTranslations('footer');
 
-    return (
-        <div style={{ height: '200px' }}>
-            {footerComponent && <div>{footerComponent}</div>}{' '}
-            <div style={{ display: 'flex', gap: '16px' }}>
-                {rhf.formState.isValid &&
-                    !allowUntouchedSubmit &&
-                    !rhf.formState.isDirty && (
-                        <div>Het formulier is nog niet aangepast</div>
-                    )}
+    const PreviousButton = () => (
+        <button
+            type="button"
+            onClick={() => onPrevious?.()}
+            style={{ padding: '12px' }}
+        >
+            {t('previous')}
+        </button>
+    );
 
+    const ResetButton = () => {
+        return (
+            resetButtonAlternative ?? (
                 <button
                     type="button"
-                    onClick={() => onPrevious?.()}
+                    onClick={(e) => {
+                        resetForm(e);
+                    }}
                     style={{ padding: '12px' }}
                 >
-                    Back
+                    {t('reset')}
                 </button>
-                {resetButtonAlternative ?? (
-                    <button
-                        type="button"
-                        onClick={(e) => {
-                            resetForm(e);
-                        }}
-                        style={{ padding: '12px' }}
-                    >
-                        {t('reset')}
-                    </button>
-                )}
-                {!!onCancel &&
-                    (cancelButton ?? (
-                        <button
-                            type="button"
-                            onClick={onCancel}
-                            style={{ padding: '12px' }}
-                        >
-                            {t('cancel')}
-                        </button>
-                    ))}
+            )
+        );
+    };
 
+    const CancelButton = () => {
+        return (
+            cancelButton ?? (
                 <button
-                    type="submit"
+                    type="button"
+                    onClick={onCancel}
                     style={{ padding: '12px' }}
-                    disabled={
-                        !rhf.formState.isValid ||
-                        (!allowUntouchedSubmit &&
-                            !rhf.formState.isDirty &&
-                            !rhf.formState.isSubmitting)
-                    }
                 >
-                    {sendLabel ?? t('send')}
+                    {t('cancel')}
                 </button>
+            )
+        );
+    };
+
+    const SubmitButton = () => (
+        <button
+            type="submit"
+            style={{ padding: '12px' }}
+            disabled={
+                !rhf.formState.isValid ||
+                (!allowUntouchedSubmit &&
+                    !rhf.formState.isDirty &&
+                    !rhf.formState.isSubmitting)
+            }
+        >
+            {sendLabel ?? t('send')}
+        </button>
+    );
+
+    return (
+        <div style={{ height: '200px' }}>
+            {footerComponent && <div>{footerComponent}</div>}{' '}
+            <div style={{ display: 'flex', gap: '16px' }}>
+                {rhf.formState.isValid &&
+                    !allowUntouchedSubmit &&
+                    !rhf.formState.isDirty && (
+                        <div>Het formulier is nog niet aangepast</div>
+                    )}
+
+                <PreviousButton />
+                <ResetButton />
+
+                {!!onCancel && <CancelButton />}
+
+                <SubmitButton />
             </div>
             <div
                 style={{

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

@@ -3,6 +3,8 @@
         "cancel": "Cancel",
         "send": "Send",
         "reset": "Reset",
+        "previous": "Previous",
+        "next": "Next",
         "notModifiedYet": "The form has not been modified yet",
         "notFilledYet": "The form has not been filled in yet"
     },

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

@@ -5,14 +5,8 @@
         "reset": "Resetten",
         "notModifiedYet": "Het formulier is nog niet aangepast",
         "notFilledYet": "Het formulier is nog niet ingevuld",
-        "yola": {
-            "poweredBy": "Powered by"
-        },
-        "hola": {
-            "dolla": {
-                "poweredBy": "Powered by"
-            }
-        }
+        "previous": "Vorige",
+        "next": "Volgende"
     },
     "renderForm": {
         "loading": "Formulier wordt geladen...",