- updates and fixes;

src/assets/scss/components/appForm.scss

@@ -43,6 +43,11 @@
   }
 }
 
+.appForm__fieldItem {
+  display: flex;
+  gap: 0.5rem;
+}
+
 .appForm__fileUploadItem {
   display: flex;
   justify-content: space-between;
@@ -73,11 +78,13 @@
   gap: 1rem;
   justify-content: space-between;
   flex-wrap: wrap;
+  container-name: form_two_cols;
+  container-type: inline-size;
 
   > div {
     flex: 1 1 auto;
     min-width: 300px;
-    max-width: 700px;
+    max-width: 48%;
     display: flex;
     flex-direction: column;
     gap: 14px;
@@ -87,6 +94,15 @@
     }
   }
 }
+
+@container form_two_cols (max-width: 620px) {
+  .appForm__twoCols {
+    > div {
+      max-width: 100%;
+    }
+  }
+}
+
 .appForm__repeaterItem {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   border-left: 3px solid #dadada;

src/components/FormField/components/FileuploadAsync/index.js

@@ -8,7 +8,7 @@ import { FileUpload } from 'primereact/fileupload';
 import { Tag } from 'primereact/tag';
 import { Button } from 'primereact/button';
 
-const Fileupload = ({
+const FileuploadAsync = ({
                         fieldName,
                         setDataFn,
                         label,
@@ -150,4 +150,4 @@ const Fileupload = ({
     )
 }
 
-export default Fileupload;
+export default FileuploadAsync;

src/components/FormField/components/Radio/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { RadioButton } from 'primereact/radiobutton';
+
+const Radio = ({
+                       fieldName,
+                       label,
+                       control,
+                       errors,
+                       defaultValue,
+                       config = {},
+                       infoText = null,
+                       options = []
+                   }) => {
+    const input = <Controller
+        name={fieldName}
+        control={control}
+        defaultValue={defaultValue}
+        rules={config}
+        render={({ field, fieldState }) =>
+    options.map(o => <div className="appForm__fieldItem" key={o.name}>
+        <RadioButton
+            id={`${fieldName}_${o.name}`}
+            name={fieldName}
+            value={o.name}
+            onChange={(e) => field.onChange(e.value)}
+            checked={field.value === o.name}/>
+        <label htmlFor={`${fieldName}_${o.name}`}>{o.label}</label>
+    </div>)}/>
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            {input}
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default Radio;

src/components/FormField/components/Select/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { Dropdown } from 'primereact/dropdown';
+
+const Select = ({
+                       fieldName,
+                       label,
+                       control,
+                       errors,
+                       defaultValue,
+                       config = {},
+                       infoText = null,
+                       inputgroup = false,
+                       icon = null,
+                       placeholder = '',
+                       options = []
+                   }) => {
+    const input = <Controller
+        name={fieldName}
+        control={control}
+        defaultValue={defaultValue}
+        rules={config}
+        render={({ field, fieldState }) => (
+            <Dropdown
+                value={field.value}
+                onChange={(e) => field.onChange(e.value)}
+                options={options}
+                optionLabel="label"
+                placeholder={placeholder}
+                className={classNames({ 'p-invalid': fieldState.invalid })}/>
+        )}/>
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required ? '*' : null}
+            </label>
+            {inputgroup
+                ? <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        {icon}
+                    </span>
+                    {input}
+                </div>
+                : input}
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default Select;

src/components/FormField/index.js

@@ -7,9 +7,11 @@ import TextInput from './components/TextInput';
 import TextArea from './components/TextArea';
 import Datepicker from './components/Datepicker';
 import DatepickerRange from './components/DatepickerRange';
-import Fileupload from './components/Fileupload';
+import FileuploadAsync from './components/FileuploadAsync';
 import NumberInput from './components/NumberInput';
 import Switch from './components/Switch';
+import Select from './components/Select';
+import Radio from './components/Radio';
 
 const FormField = (props) => {
     const fields = {
@@ -17,9 +19,11 @@ const FormField = (props) => {
         textarea: TextArea,
         datepicker: Datepicker,
         datepickerrange: DatepickerRange,
-        fileupload: Fileupload,
+        fileuploadasync: FileuploadAsync,
         numberinput: NumberInput,
-        switch: Switch
+        switch: Switch,
+        select: Select,
+        radio: Radio
     }
     const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;
 

src/components/FormFieldRepeater/index.js

@@ -1,13 +1,14 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { head, isNil, pluck } from 'ramda';
+import { head, isEmpty, isNil } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { Menu } from 'primereact/menu';
 import { Dropdown } from 'primereact/dropdown';
+import { diff } from 'deep-object-diff';
 
 const FormFieldRepeater = ({
                                data,
@@ -84,11 +85,20 @@ const FormFieldRepeater = ({
     }, [stateFieldData]);
 
     useEffect(() => {
-        const storeFieldData = data[fieldName] ?? [];
+        const storeFieldData = data ?? [];
         setStateFieldData(storeFieldData);
         register(fieldName, config);
     }, []);
 
+    useEffect(() => {
+        const diffData = diff(data, stateFieldData);
+
+        if (!isEmpty(diffData)) {
+            const storeFieldData = data ?? [];
+            setStateFieldData(storeFieldData);
+        }
+    }, [data]);
+
     useEffect(() => {
         setStateOptionsData([...options]);
     }, [options]);

src/components/FormFieldRepeaterFaq/index.js

@@ -36,15 +36,15 @@ const FormFieldRepeaterFaq = ({
     }
 
     const selectItem = (e) => {
-        const targetedOption = head(stateOptionsData.filter(o => o.question === e.value));
+        const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
-
+        console.log('selected:', e, stateOptionsData, targetedOption)
         if (targetedOption) {
             setStateFieldData([...stateFieldData, targetedOption]);
         }
     }
 
     const addNewItem = () => {
-        const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true };
+        const newItem = { id: null, lookUpDataId: null, title: '', value: '', isVisible: true };
         setStateFieldData([...stateFieldData, newItem]);
     }
 
@@ -61,8 +61,8 @@ const FormFieldRepeaterFaq = ({
 
     const editItem = (e, index) => {
         e.stopPropagation();
-        setQuestion(stateFieldData[index].question);
+        setQuestion(stateFieldData[index].title);
-        setAnswer(stateFieldData[index].response);
+        setAnswer(stateFieldData[index].value);
         setEditDataIndex(index);
         setIsVisibleEditDialog(true);
     }
@@ -75,7 +75,7 @@ const FormFieldRepeaterFaq = ({
     }
 
     const onChangeEditItem = (value, key) => {
-        if (key === 'question') {
+        if (key === 'title') {
             setQuestion(value);
         } else {
             setAnswer(value)
@@ -85,8 +85,8 @@ const FormFieldRepeaterFaq = ({
     const saveEditDialog = () => {
         const newData = stateFieldData.map((o, i) => {
             if (i === editDataIndex) {
-                o.question = question;
+                o.title = question;
-                o.response = answer;
+                o.value = answer;
                 return o
             } else {
                 return o;
@@ -113,7 +113,7 @@ const FormFieldRepeaterFaq = ({
     const usedExistingValues = useCallback(() => {
         return stateFieldData
             .filter(o => o.lookUpDataId)
-            .map(o => o.question)
+            .map(o => o.title)
     }, [stateFieldData]);
 
     useEffect(() => {
@@ -149,9 +149,9 @@ const FormFieldRepeaterFaq = ({
                 <Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
                         icon="pi pi-plus" onClick={addNewItem}/>
                 <Dropdown onChange={(e) => selectItem(e)}
-                          optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
+                          optionDisabled={(opt) => usedExistingValues().includes(opt.title)}
                           options={stateOptionsData}
-                          optionLabel="question"/>
+                          optionLabel="title"/>
             </div>
             <Accordion activeIndex={0}>
                 {stateFieldData.map((o, i) => <AccordionTab key={i}
@@ -165,21 +165,21 @@ const FormFieldRepeaterFaq = ({
                                                                             offLabel=""
                                                                             checked={o.isVisible}
                                                                             onChange={(e) => setChecked(e, i)}/>
-                                                                        {o.question}
+                                                                        {o.title}
                                                                     </div>
                                                                     <div className="appForm__faqTabItem">
                                                                         <Button icon="pi pi-pencil" severity="success"
-                                                                                aria-label="Edit"
+                                                                                aria-label={__('Modifica', 'gepafin')}
                                                                                 onClick={(e) => editItem(e, i)}/>
                                                                         <Button icon="pi pi-times" severity="danger"
-                                                                                aria-label="Cancel"
+                                                                                aria-label={__('Cancella', 'gepafin')}
                                                                                 onClick={() => removeItem(i)}/>
                                                                     </div>
                                                                 </div>
                                                             }
                 >
                     <p className="m-0">
-                        {o.response}
+                        {o.value}
                     </p>
                 </AccordionTab>)}
             </Accordion>
@@ -192,11 +192,11 @@ const FormFieldRepeaterFaq = ({
                 <div className="appPage__spacer"></div>
                 <div className="appForm__field">
                     <label>{__('Titolo FAQ', 'gepafin')}</label>
-                    <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
+                    <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'title')}/>
                 </div>
                 <div className="appForm__field">
                     <label>{__('Risposta', 'gepafin')}</label>
-                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
+                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'value')}
                                    rows={5}
                                    cols={30}/>
                 </div>

src/components/ProtectedRoute/index.js

@@ -1,16 +1,10 @@
 import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
-// store
-import { useStore } from '../../store';
-
 // tools
 import AuthenticationService from '../../service/authentication-service';
 
 const ProtectedRoute = () => {
-    // we need this to track existance of the token
-    const token = useStore().main.token();
-
     if (!AuthenticationService.wasLoggedIn()) {
         return (<Navigate to={'/login'} replace/>);
     }
@@ -23,9 +17,9 @@ const ProtectedRoute = () => {
         return (<Navigate to={'/login?redirectReason=auth_required'} replace/>);
     }
 
-    /*if (window.location.pathname === '/') {
+    if (window.location.pathname === '/') {
         return (<Navigate to={'/'} replace/>);
-    }*/
+    }
 
     return <Outlet/>;
 }

src/helpers/set404FromErrorResponse.js

@@ -0,0 +1,9 @@
+import { storeSet } from '../store';
+
+const set404FromErrorResponse = (data) => {
+    if (data && data.status === 'NOT_FOUND') {
+        storeSet.main.isError404(true);
+    }
+}
+
+export default set404FromErrorResponse;

src/layouts/DefaultLayout/index.js

@@ -1,6 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { __ } from '@wordpress/i18n';
+import { useLocation } from 'react-router-dom';
+
+// store
+import { useStore, storeSet } from '../../store';
 
 // components
 import { Toolbar } from 'primereact/toolbar';
@@ -15,6 +19,12 @@ import AppSidebar from './components/AppSidebar';
 
 const DefaultLayout = ({ children }) => {
     const menuLeft = useRef(null);
+    const isError404 = useStore().main.isError404();
+    const location = useLocation();
+
+    useEffect(() => {
+        storeSet.main.isError404(false);
+    }, [location]);
 
     const startContent = <Link to="/">
         <LogoIcon/>
@@ -47,7 +57,9 @@ const DefaultLayout = ({ children }) => {
             <div className="inner">
                 <AppSidebar/>
                 <main>
-                    {children}
+                    {isError404
+                        ? <p>Error 404</p>
+                        : children}
 
                     <footer>
                         <p>{__('© 2024 Gepafin. Tutti i diritti riservati.', 'gepafin')}</p>

src/pages/Bandi/components/AllBandiTable/index.js

@@ -36,11 +36,6 @@ const AllBandiTable = () => {
     const [statuses, setStatuses] = useState([]);
 
     useEffect(() => {
-        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        if (isAsyncRequest !== 0) {
-            return;
-        }
-
         storeSet.main.setAsyncRequest();
         BandoService.getBandi(getCallback, errGetCallbacks);
     }, []);

src/pages/BandoEdit/components/BandoEditFormStep1/index.js

@@ -198,7 +198,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
             />
 
             <FormFieldRepeater
-                data={values}
+                data={values['aimedTo']}
                 setDataFn={setValue}
                 fieldName="aimedTo"
                 options={aimedToOptions}

src/pages/BandoEdit/components/BandoEditFormStep2/index.js

@@ -156,7 +156,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
                 }}/>
 
             <FormField
-                type="fileupload"
+                type="fileuploadasync"
                 setDataFn={setValue}
                 fieldName="docs"
                 label={__('Documentazione', 'gepafin')}
@@ -173,7 +173,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
             />
 
             <FormField
-                type="fileupload"
+                type="fileuploadasync"
                 setDataFn={setValue}
                 fieldName="images"
                 label={__('Immagine del Bando', 'gepafin')}
@@ -186,7 +186,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
             />
 
             <FormFieldRepeater
-                data={values}
+                data={values['checkList']}
                 setDataFn={setValue}
                 fieldName="checkList"
                 options={checklistOptions}

src/pages/BandoEdit/index.js

@@ -20,6 +20,7 @@ import BandoEditFormStep1 from './components/BandoEditFormStep1';
 import BandoEditFormStep2 from './components/BandoEditFormStep2';
 import { Messages } from 'primereact/messages';
 import FormsService from '../../service/forms-service';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const BandoEdit = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -94,6 +95,10 @@ const BandoEdit = () => {
         navigate(`/bandi/${id}/forms`);
     }
 
+    const openBandoFlowManagement = () => {
+        navigate(`/bandi/${id}/flow`);
+    }
+
     const validateBando = () => {
         storeSet.main.setAsyncRequest();
         bandoMsgs.current.clear();
@@ -182,7 +187,8 @@ const BandoEdit = () => {
     }
 
     const errGetCallback = (data) => {
-        standardErrCallback(data);
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     const standardErrCallback = (data) => {
@@ -289,11 +295,21 @@ const BandoEdit = () => {
 
                     <div className="appPageSection">
                         <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
+
+                        <div className="row">
                             <Button
                                 type="button"
                                 onClick={openBandoFormManagement}
                                 label={__('Crea/modifica form', 'gepafin')}/>
 
+                            <Button
+                                type="button"
+                                onClick={openBandoFlowManagement}
+                                icon="pi pi-sitemap"
+                                iconPos="right"
+                                label={__('Gestisci flusso dei form', 'gepafin')}/>
+                        </div>
+
                         {forms.length
                             ? <ul className="">
                                 {forms.map(o => <li key={o.id}>

src/pages/BandoForms/index.js

@@ -13,6 +13,7 @@ import FormsService from '../../service/forms-service';
 
 // store
 import { storeSet } from '../../store';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const BandoForms = () => {
     const { id } = useParams();
@@ -30,6 +31,10 @@ const BandoForms = () => {
         navigate(`/bandi/${id}`);
     }
 
+    const openBandoFlowManagement = () => {
+        navigate(`/bandi/${id}/flow`);
+    }
+
     const goToEditForm = () => {
         if (selectedForm && selectedForm !== 0) {
             navigate(`/bandi/${id}/forms/${selectedForm}`);
@@ -49,6 +54,11 @@ const BandoForms = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    const errGetFormsCallback = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
     useEffect(() => {
         const parsed = parseInt(id)
         const bandoId = !isNaN(parsed) ? parsed : 0;
@@ -58,7 +68,7 @@ const BandoForms = () => {
         ])
 
         storeSet.main.setAsyncRequest();
-        FormsService.getFormsForCall(bandoId, getFormsCallback, () => {});
+        FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
     }, [id]);
 
     return (
@@ -73,14 +83,6 @@ const BandoForms = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPage__content">
-                <div className="appPageSection">
-                    <Button
-                        type="button"
-                        outlined
-                        onClick={goToEditBando}
-                        label={__('Modifica bando', 'gepafin')}
-                        icon="pi pi-arrow-left" iconPos="left"/>
-                </div>
 
                 <div className="appPageSection__withBorder disabled">
                     <h2>{__('Usa un template', 'gepafin')}</h2>
@@ -136,6 +138,25 @@ const BandoForms = () => {
                             icon="pi pi-cog" iconPos="right"/>
                     </div>
                 </div>
+
+                <div className="appPageSection">
+
+                    <div className="row">
+                        <Button
+                            type="button"
+                            outlined
+                            onClick={goToEditBando}
+                            label={__('Indietro', 'gepafin')}
+                            icon="pi pi-arrow-left" iconPos="left"/>
+
+                        <Button
+                            type="button"
+                            onClick={openBandoFlowManagement}
+                            icon="pi pi-sitemap"
+                            iconPos="right"
+                            label={__('Gestisci flusso dei form', 'gepafin')}/>
+                    </div>
+                </div>
             </div>
         </div>
     )

src/pages/BandoFormsEdit/index.js

@@ -16,6 +16,8 @@ import { InputText } from 'primereact/inputtext';
 
 // api
 import FormsService from '../../service/forms-service';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import { elementItems } from '../../tempData';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
@@ -76,6 +78,7 @@ const BandoFormsEdit = () => {
         confirmPopup({
             target: event.currentTarget,
             message: __('Sei sicuro di cancellare questo form?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
             icon: 'pi pi-info-circle',
             defaultFocus: 'reject',
             acceptClassName: 'p-button-danger',
@@ -84,9 +87,9 @@ const BandoFormsEdit = () => {
         });
     };
 
-    const doPublish = () => {
+    /*const doPublish = () => {
         console.log('doPublish');
-    }
+    }*/
 
     const doDelete = () => {
         storeSet.main.setAsyncRequest();
@@ -108,7 +111,8 @@ const BandoFormsEdit = () => {
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.elementItems(data.data);
+            storeSet.main.elementItems(elementItems);
+            //storeSet.main.elementItems(data.data);
         }
         storeSet.main.unsetAsyncRequest();
     }
@@ -130,7 +134,7 @@ const BandoFormsEdit = () => {
     }
 
     const errGetFormCallbacks = (data) => {
-        console.log('errGetElementItemsCallbacks', data)
+        set404FromErrorResponse(data);
         storeSet.main.unsetAsyncRequest();
     }
 
@@ -198,10 +202,10 @@ const BandoFormsEdit = () => {
                         outlined
                         onClick={openPreview}
                         label={__('Visualizza Anteprima Beneficiario', 'gepafin')} icon="pi pi-image" iconPos="right"/>
-                    <Button
+                    {/*<Button
                         disabled={true}
                         onClick={doPublish}
-                        label={__('Pubblica', 'gepafin')}/>
+                        label={__('Pubblica', 'gepafin')}/>*/}
                 </div>
                 <div className="appPageSection__actions">
                     <ConfirmPopup />

src/pages/BandoFormsPreview/index.js

@@ -1,68 +1,75 @@
 import React, { useState, useEffect } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { bandoTest, formData } from '../../tempData';
+import { klona } from 'klona';
+import { head } from 'ramda';
+import { useForm } from 'react-hook-form';
 
-// tools
+// store
-import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
+import { storeSet, useStore } from '../../store';
-import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+
+// api
+import FormsService from '../../service/forms-service';
 
 // components
 import { Skeleton } from 'primereact/skeleton';
-import { Accordion } from 'primereact/accordion';
-import { AccordionTab } from 'primereact/accordion';
-import { InputTextarea } from 'primereact/inputtextarea';
 import { Button } from 'primereact/button';
-import { useForm } from 'react-hook-form';
-import { is, isNil } from 'ramda';
 import FormField from '../../components/FormField';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const BandoFormsPreview = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
-    const [bando, setBando] = useState({});
+    const [formData, setFormData] = useState([]);
-    const [data, setData] = useState({});
+    const [formName, setFormName] = useState('');
-    const [isLoading, setIsLoading] = useState(true);
+    const isAsyncRequest = useStore().main.isAsyncRequest();
     const {
         control,
         handleSubmit,
-        formState: { errors, isValid },
+        formState: { errors },
-        setValue,
-        register,
-        trigger,
         getValues,
-        clearErrors
     } = useForm({ defaultValues: {}, mode: 'onChange' });
     const values = getValues();
 
-    const onSubmit = (formData) => {
+    const onSubmit = () => {}
-        console.log('onSubmit', formData);
-    };
 
     const closePreview = () => {
-        navigate(`/bandi/${id}`);
+        const parsedId = parseInt(id)
+        const bandoId = !isNaN(parsedId) ? parsedId : 0;
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        navigate(`/bandi/${bandoId}/forms/${bandoFormId}`);
+    }
+
+    const getFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setFormName(data.data.label);
+            const elements = klona(data.data.content);
+            setFormData(elements);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormCallbacks = (data) => {
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     useEffect(() => {
-        //const parsed = parseInt(id)
+        const parsedFormId = parseInt(formId)
-        //const bandoId = !isNaN(parsed) ? parsed : 0;
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
-        setTimeout(() => {
+        if (bandoFormId) {
-            const data = formData;
+            storeSet.main.setAsyncRequest();
-            setData(data);
+            FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
-
+        }
-            const bandoData = bandoTest;
+    }, [id, formId]);
-            setBando(bandoData);
-
-            setIsLoading(false)
-        }, 3000);
-    }, [id]);
 
     return (
         <div className="appPage">
-            {!isLoading
+            {!isAsyncRequest
                 ? <div className="appPage__pageHeader">
-                    <h1>{sprintf(__('Domanda per il Bando: %s', 'gepafin'), bando.name)}</h1>
+                    <h1>{formName}</h1>
                 </div>
                 : <>
                     <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
@@ -71,7 +78,7 @@ const BandoFormsPreview = () => {
 
             <div className="appPage__spacer"></div>
 
-            {!isLoading
+            {!isAsyncRequest
                 ? <div className="appPage__content">
                     <div className="appPageSection__preview">
                         <Button
@@ -83,15 +90,23 @@ const BandoFormsPreview = () => {
                     </div>
 
                     <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-                        {data.content.map(o => <FormField
+                        {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'));
+                            return <FormField
                                 key={o.id}
                                 type={o.name}
                                 fieldName={`field_${o.id}`}
-                            label={o.label}
+                                label={label ? label.value : ''}
+                                placeholder={placeholder ? placeholder.value : ''}
                                 control={control}
                                 errors={errors}
                                 defaultValue={values[`field_${o.id}`]}
-                        />)}
+                                config={o.validators}
+                                options={options ? options.value : []}
+                            />
+                        })}
                     </form>
 
                     <div className="appPageSection__preview">

src/pages/BandoView/index.js

@@ -18,6 +18,7 @@ import { InputTextarea } from 'primereact/inputtextarea';
 import { Button } from 'primereact/button';
 import BandoService from '../../service/bando-service';
 import { Messages } from 'primereact/messages';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 
 const BandoView = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -64,6 +65,7 @@ const BandoView = () => {
                 }
             ]);
         }
+        set404FromErrorResponse(data);
         storeSet.main.unsetAsyncRequest();
     }
 

src/routes.js

@@ -15,7 +15,6 @@ import BandoForms from './pages/BandoForms';
 import BandoFormsPreview from './pages/BandoFormsPreview';
 
 const routes = ({ role }) => {
-
     return (
         <Routes>
             <Route element={<ProtectedRoute/>}>

src/store/initial.js

@@ -1,6 +1,7 @@
 const initialStore = {
     // ui related
     isAsyncRequest: 0, // number
+    isError404: false,
     // user
     userData: {},
     token: '',

src/tempData.js

@@ -263,7 +263,7 @@ export const elementItems = [
     },
     {
         id: 3,
-        name: 'textinput',
+        name: 'numberinput',
         label: 'Number Input',
         settings: [
             {
@@ -272,7 +272,7 @@ export const elementItems = [
             },
             {
                 name: "placeholder",
-                value: ""
+                value: 0
             }
         ],
         validators: {
@@ -317,14 +317,50 @@ export const elementItems = [
             {
                 name: "options",
                 value: [
-                    { name: "opt1", label: "Opt1" }
+                    { name: "opt1", label: "Opt1" },
+                    { name: "opt2", label: "Opt2" }
                 ]
             }
         ],
         validators: {
             isRequired: false,
-            min: null,
+            custom: null
-            max: null,
+        }
+    },
+    {
+        id: 6,
+        name: 'select',
+        label: 'Select',
+        settings: [
+            {
+                name: "label",
+                value: "Select"
+            },
+            {
+                name: "options",
+                value: [
+                    { name: "opt1", label: "Opt1" },
+                    { name: "opt2", label: "Opt2" }
+                ]
+            }
+        ],
+        validators: {
+            isRequired: false,
+            custom: null
+        }
+    },
+    {
+        id: 7,
+        name: 'datepicker',
+        label: 'Datepicker',
+        settings: [
+            {
+                name: "label",
+                value: "Datepicker"
+            }
+        ],
+        validators: {
+            isRequired: false,
             custom: null
         }
     }