updated form fields and application logic;

2024-09-12 17:17:48 +02:00
parent 19e17ec2d7
commit a8471ba7aa
42 changed files with 1423 additions and 231 deletions
--- a/src/pages/BandoApplication/index.js
+++ b/src/pages/BandoApplication/index.js
@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { klona } from 'klona';
+import { head, is, isNil } from 'ramda';
+import { useForm } from 'react-hook-form';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import FormsService from '../../service/forms-service';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Button } from 'primereact/button';
+import FormField from '../../components/FormField';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
+import { formData as testformData } from '../../tempData';
+import BandoService from '../../service/bando-service';
+
+const BandoApplication = () => {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState([]);
+    const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        getValues,
+    } = useForm({ defaultValues: {}, mode: 'onChange' });
+    const values = getValues();
+
+    const onSubmit = (formData) => {
+        const newFormData = Object.keys(formData).reduce((acc, cur) => {
+            acc.push({
+                'fieldId': cur,
+                'fieldValue': formData[cur] && formData[cur].getMonth ? formData[cur].toISOString() : formData[cur]
+            });
+            return acc;
+        }, []);
+        console.log('newFormData', newFormData)
+    };
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            /*const forms = data.data;
+            setFormName(forms[0].label);
+            const elements = klona(forms[0].content);
+            setFormData(elements);*/
+            //console.log('testformData.content', testformData.content);
+            setFormName(testformData.label);
+            setFormData(testformData.content);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallbacks = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    useEffect(() => {
+        const bandoId = getBandoId();
+
+        if (bandoId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormsForCall(bandoId, getCallback, errGetCallbacks);
+        }
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            {!isAsyncRequest
+                ? <div className="appPage__pageHeader">
+                    <h1>{formName}</h1>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                </>}
+
+            <div className="appPage__spacer"></div>
+
+            {!isAsyncRequest
+                ? <div className="appPage__content">
+                    <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                        {formData.map(o => {
+                            const label = head(o.settings.filter(o => o.name === 'label'));
+                            const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
+                            const options = head(o.settings.filter(o => o.name === 'options'));
+                            const step = head(o.settings.filter(o => o.name === 'step'));
+                            const mime = head(o.settings.filter(o => o.name === 'mime').join(','));
+
+                            return <FormField
+                                key={o.id}
+                                type={o.name}
+                                fieldName={o.id}
+                                label={label ? label.value : ''}
+                                placeholder={placeholder ? placeholder.value : ''}
+                                control={control}
+                                errors={errors}
+                                defaultValue={values[o.id]}
+                                maxFractionDigits={step}
+                                accept={mime}
+                                config={o.validators}
+                                options={options ? options.value : []}
+                            />
+                        })}
+
+                        <div className="appPage__spacer"></div>
+
+                        <div className="appPageSection__hr">
+                            <span>{__('Azioni rapide', 'gepafin')}</span>
+                        </div>
+
+                        <div className="appPageSection">
+                            <div className="appPageSection__actions">
+                                <Button
+                                    outlined
+                                    label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
+                                <Button
+                                    type="button"
+                                    disabled={true}
+                                    onClick={() => {
+                                    }}
+                                    label={__('Vai avanti', 'gepafin')} icon="pi pi-arrow-right" iconPos="right"/>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default BandoApplication;