Merge pull request #3 from Kitzanos/feature/bando-form-editor

Form editor

src/App.js

@@ -4,11 +4,34 @@ import Routes from './routes';
 import { createI18n, setLocaleData } from '@wordpress/i18n';
 import { I18nProvider } from '@wordpress/react-i18n';
 import './assets/scss/theme.scss';
+import AuthenticationService from './service/authentication-service';
+
+// store
+import { useStore, storeSet } from './store';
 
 const i18n = createI18n({}, 'gepafin');
 
 function App() {
+    const role = useStore().main.getRole();
+
+    const callback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.userData(data.data);
+        } else {
+            storeSet.main.doLogout();
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errCallback = (data) => {
+        storeSet.main.doLogout();
+        storeSet.main.unsetAsyncRequest();
+    }
+
     useEffect(() => {
+        storeSet.main.setAsyncRequest();
+        AuthenticationService.me(callback, errCallback);
+
         fetch('/languages/en_US.json')
             .then((res) => res.json())
             .then(res => {
@@ -19,7 +42,7 @@ function App() {
     return (
         <I18nProvider i18n={i18n}>
             <BrowserRouter>
-                <Routes/>
+                <Routes role={role}/>
             </BrowserRouter>
         </I18nProvider>
     );

src/assets/scss/components/appPage.scss

@@ -100,6 +100,8 @@
     padding: 17px;
     border-radius: 6px;
     border: 1px solid var(--card-borderColor-color);
+    container-name: section_with_border;
+    container-type: inline-size;
 
     &.disabled {
         filter: grayscale(1);
@@ -140,6 +142,15 @@
     }
 }
 
+@container section_with_border (max-width: 600px) {
+    .appPageSection__withBorder {
+        .row {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
+}
+
 .appPageSection__hero {
     display: flex;
     height: 172px;
@@ -198,4 +209,5 @@
     display: flex;
     gap: 24px;
     padding: 24px 0 48px;
+    flex-wrap: wrap;
 }

src/assets/scss/components/formBuilder.scss

@@ -12,9 +12,9 @@
 
   h2 {
     color: #404D5B;
-    font-size: 21px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
   }
 }
@@ -58,7 +58,7 @@
 
   .actions {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 }
 
@@ -69,9 +69,9 @@
 
   h2 {
     color: #404D5B;
-    font-size: 21px;
+    font-size: 14px;
     font-style: normal;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
   }
 }
@@ -113,4 +113,24 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+}
+
+.formElementSettings__tabs {
+  width: 100%;
+
+  .p-tabview-nav-link[aria-selected="true"] {
+    background-color: var(--message-info-background);
+  }
+
+  .p-tabview-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.formElementSettings__repeater {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

src/assets/scss/components/layout.scss

@@ -86,6 +86,7 @@ body {
     padding: 0 24px 20px;
     display: flex;
     flex-direction: column;
+    width: calc(100% - 320px);
 
     > footer {
       margin-top: auto;

src/assets/scss/components/misc.scss

@@ -36,16 +36,39 @@
 }
 
 .p-message.p-message-error {
-  background: #ffdbdb;
+  background: var(--message-error-background);
-  border-left: 5px solid #C2504D;
+  border-left: 5px solid var(--message-error-color);
+
+  span.p-message-detail, span.p-message-summary {
+    color: var(--message-error-color);
+  }
 
   svg {
     path {
-      fill: var(--global-textColor);
+      fill: var(--message-error-color);
     }
   }
 }
 
+.p-message.p-message-info {
+  background: var(--message-info-background);
+  border-left: 5px solid var(--message-info-color);
+
+  span.p-message-detail, span.p-message-summary {
+    color: var(--message-info-color);
+  }
+
+  svg {
+    path {
+      fill: var(--message-info-color);
+    }
+  }
+}
+
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  background: #C9E3CC;
+}
+
 .p-accordion {
   width: 100%;
 }

src/assets/scss/components/statsBigBadges.scss

@@ -1,13 +1,18 @@
 .statsBigBadges {
 }
+
 .statsBigBadges__grid {
     display: grid;
-    align-items: center;
+    align-items: stretch;
-    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
+    gap: 1rem;
     width: 100%;
 }
 
+.statsBigBadges__grid .statsBigBadges__gridItem span {
+    color: #FFF;
+}
+
 .statsBigBadges__gridItem {
     display: flex;
     justify-content: space-between;
@@ -42,4 +47,10 @@
         border: 1px solid var(--yellow-500);
         background: var(--card-full-background-color-1);
     }
+}
+
+@media (max-width: 1240px) {
+    .statsBigBadges__grid {
+        grid-template-columns: 1fr;
+    }
 }

src/assets/scss/theme.scss

@@ -15,6 +15,10 @@
   --global-textColor: #4B5563;
   --theme-highlight-background: #BADEBE;
   --primary-text: #3B7C43;
+  --message-error-background: #ffdbdb;
+  --message-error-color: #C2504D;
+  --message-info-background: rgba(219, 234, 254, 0.70);
+  --message-info-color: #3B82F6;
 
   --card-full-background-color-2: #EEC137;
   --card-full-background-color-3: #FA8E42;

src/components/FormField/components/DatepickerRange/index.js

@@ -34,7 +34,7 @@ const DatepickerRange = ({
                         <Calendar id={field.name}
                                   value={field.value}
                                   onChange={field.onChange}
-
+                                  dateFormat="dd/mm/yy"
                                   mask="99/99/9999"
                                   showIcon
                                   minDate={minDate}

src/components/FormField/components/Fileupload/index.js

@@ -21,9 +21,11 @@ const Fileupload = ({
                         doctype = 'images',
                         emptyText = __('Trascina qui il tuo file', 'gepafin'),
                         chooseLabel = __('Aggiungi immagine', 'gepafin'),
-                        multiple = false
+                        multiple = false,
+                        callId = 0
                     }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [acceptFormats, setAcceptFormats] = useState('');
     const inputRef = useRef();
 
     const customBase64Uploader = (event) => {
@@ -31,14 +33,10 @@ const Fileupload = ({
         for (const file of event.files) {
             formData.append('file', file)
         }
-        /*for (const pair of formData.entries()) {
+        FileUploadService.uploadFile(callId, formData, callback, errorCallback, [['documentType', doctype.toUpperCase()]]);
-            console.log(pair[0], pair[1]);
-        }*/
-        FileUploadService.uploadFile(formData, callback, errorCallback, [['documentType', doctype.toUpperCase()]]);
     };
 
     const callback = (data) => {
-        console.log('data', data);
         if (data.status === 'SUCCESS') {
             setStateFieldData(data.data);
             const files = inputRef.current.getFiles();
@@ -86,7 +84,6 @@ const Fileupload = ({
             setStateFieldData(prevState => {
                 const newFiles = prevState.filter(o => o.id !== id);
                 inputRef.current.setUploadedFiles(newFiles);
-                console.log('newFiles', newFiles);
                 return newFiles;
             });
         }
@@ -96,39 +93,61 @@ const Fileupload = ({
         console.log('err', err);
     }
 
+    const onBeforeDrop = (e) => {
+        return validateFileInputType(e.dataTransfer.files);
+    }
+
+    const validateFileInputType = ( files ) => {
+        const MIMEtype = new RegExp( acceptFormats );
+
+        return Array.prototype.every.call( files, function passesAcceptedFormat( file ){
+            return MIMEtype.test( file.type );
+        } );
+    }
+
     useEffect(() => {
         setStateFieldData(defaultValue);
         register(fieldName, config)
     }, []);
 
+    useEffect(() => {
+        // eslint-disable-next-line no-useless-escape
+        setAcceptFormats(accept.replace( /\*/g, '.\*' ).replace( /,/g, '|' ));
+    }, [accept]);
+
     useEffect(() => {
         inputRef.current.setUploadedFiles(stateFieldData);
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
     }, [stateFieldData])
 
     return (
-        <>
+        callId && callId !== 0
-            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+            ? <>
-                {label}{config.required ? '*' : null}
+                <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
-            </label>
+                    {label}{config.required ? '*' : null}
-            <FileUpload
+                    {acceptFormats ? ' (' + acceptFormats.split('|').join(', ') + ')' : null}
-                ref={inputRef}
+                </label>
-                id={fieldName}
+                <FileUpload
-                name={fieldName}
+                    ref={inputRef}
-                url={'/document/uploadFile'}
+                    id={fieldName}
-                multiple={multiple}
+                    name={fieldName}
-                accept={accept}
+                    url={'/document/uploadFile'}
-                maxFileSize={1000000}
+                    multiple={multiple}
-                emptyTemplate={<p>{emptyText}</p>}
+                    accept={accept}
-                chooseLabel={chooseLabel}
+                    maxFileSize={1000000}
-                cancelLabel={__('Cancella', 'gepafin')}
+                    emptyTemplate={<p>{emptyText}</p>}
-                uploadLabel={__('Carica', 'gepafin')}
+                    chooseLabel={chooseLabel}
-                className={classNames({ 'p-invalid': errors[fieldName] })}
+                    cancelLabel={__('Cancella', 'gepafin')}
-                itemTemplate={itemTemplate}
+                    uploadLabel={__('Carica', 'gepafin')}
-                customUpload
+                    className={classNames({ 'p-invalid': errors[fieldName] })}
-                uploadHandler={customBase64Uploader}/>
+                    itemTemplate={itemTemplate}
-            {infoText ? <small>{infoText}</small> : null}
+                    customUpload
-        </>)
+                    onBeforeDrop={onBeforeDrop}
+                    uploadHandler={customBase64Uploader}/>
+                {infoText ? <small>{infoText}</small> : null}
+            </>
+            : null
+    )
 }
 
 export default Fileupload;

src/components/FormFieldRepeater/index.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { isEmpty } from 'ramda';
+import { head, isNil, pluck } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -22,19 +22,20 @@ const FormFieldRepeater = ({
                            }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [stateOptionsData, setStateOptionsData] = useState([]);
     const menuItems = [
         {
             type: 'existing',
             label: __('Esistente', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
             }
         },
         {
             type: 'new',
             label: __('Nuovo', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
             }
         }
     ]
@@ -45,14 +46,14 @@ const FormFieldRepeater = ({
     }
 
     const selectItem = (e, index) => {
-        const newData = stateFieldData.map((o, i) => {
+        const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
-            if (i === index) {
+
-                o.value = e.value;
+        if (targetedOption) {
-                o.id = e.id;
+            const newData = stateFieldData.map((o, i) => {
-            }
+                return i === index ? targetedOption : o;
-            return o;
+            })
-        })
+            setStateFieldData(newData);
-        setStateFieldData(newData);
+        }
     }
 
     const onInputChange = (e, index) => {
@@ -67,24 +68,30 @@ const FormFieldRepeater = ({
     }
 
     const properField = (item, i) => {
-        return item.status === 'new'
+        return !isNil(item.lookUpDataId)
-            ? <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
+            ? <Dropdown value={item.value}
-            : <Dropdown value={item.value}
                         onChange={(e) => selectItem(e, i)}
-                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
+                        optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
-                        options={options} optionLabel="value"/>
+                        options={stateOptionsData}
+                        optionLabel="value"/>
+            : <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
     }
 
-    const usedExistingValues = stateFieldData
+    const usedExistingValues = useCallback(() => {
-        .filter(o => o.status === 'existing')
+        return stateFieldData
-        .map(o => o.value);
+            .filter(o => o.lookUpDataId > 0)
+            .map(o => o.value)
+    }, [stateFieldData]);
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
+        setStateFieldData(storeFieldData);
-        setStateFieldData(newData);
         register(fieldName, config);
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        setStateOptionsData([...options]);
+    }, [options]);
 
     useEffect(() => {
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
@@ -100,7 +107,7 @@ const FormFieldRepeater = ({
                     {properField(o, i)}
                     <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                 </div>
-                {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
+                {isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
             </div>)}
             <Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
             <Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}

src/components/FormFieldRepeaterCriteria/index.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { head } from 'ramda';
+import { head, isNil, pluck } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -23,20 +23,21 @@ const FormFieldRepeaterCriteria = ({
                                    }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [stateOptionsData, setStateOptionsData] = useState([]);
     const [threshold, setThreshold] = useState(0);
     const menuItems = [
         {
             type: 'existing',
             label: __('Esistente', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
             }
         },
         {
             type: 'new',
             label: __('Nuovo', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
             }
         }
     ]
@@ -47,17 +48,12 @@ const FormFieldRepeaterCriteria = ({
     }
 
     const selectItem = (e, index) => {
-        const targetedOption = head(options.filter(o => o.value === e.value));
+        const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
+
         if (targetedOption) {
             const newData = stateFieldData.map((o, i) => {
-                if (i === index) {
+                return i === index ? targetedOption : o;
-                    o.value = targetedOption.value;
+            })
-                    o.score = targetedOption.score;
-                    o.id = targetedOption.id;
-                }
-                return o;
-            });
-            console.log('newData', newData)
             setStateFieldData(newData);
         }
     }
@@ -78,32 +74,38 @@ const FormFieldRepeaterCriteria = ({
     }
 
     const properField = (item, i) => {
-        return item.status === 'new'
+        return !isNil(item.lookUpDataId)
-            ? <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
+            ? <Dropdown value={item.value}
-            : <Dropdown value={item.value}
                         onChange={(e) => selectItem(e, i)}
-                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
+                        optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
-                        options={options} optionLabel="value"/>
+                        options={stateOptionsData} optionLabel="value"/>
+            : <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
     }
 
-    const usedExistingValues = stateFieldData
+    const usedExistingValues = useCallback(() => {
-        .filter(o => o.status === 'existing')
+        return stateFieldData
-        .map(o => o.value);
+            .filter(o => o.lookUpDataId > 0)
+            .map(o => o.value)
+    }, [stateFieldData]);
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
+        setStateFieldData(storeFieldData);
-        setStateFieldData(newData);
+        setStateOptionsData([...options, ...storeFieldData]);
         setThreshold(data['threshold'])
         register(fieldName, config)
         register('threshold', {
             required: __('È obbligatorio', 'gepafin')
         })
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        setStateOptionsData([...options]);
+    }, [options]);
 
     useEffect(() => {
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
-    }, [stateFieldData])
+    }, [stateFieldData]);
 
     return (
         <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -126,7 +128,7 @@ const FormFieldRepeaterCriteria = ({
                         {properField(o, i)}
                             <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                         </div>
-                        {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
+                        {isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
                     </div>
                     <div>
                         <label htmlFor="criterionMin">{__('Punteggio', 'gepafin')}</label>

src/components/FormFieldRepeaterFaq/index.js

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { isEmpty } from 'ramda';
+import { head } from 'ramda';
 
 // components
 import { Button } from 'primereact/button';
@@ -20,11 +20,10 @@ const FormFieldRepeaterFaq = ({
                                   errors,
                                   register,
                                   label,
-                                  config = {},
+                                  config = {}
-                                  setError,
-                                  clearErrors
                               }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [stateOptionsData, setStateOptionsData] = useState([]);
     const [question, setQuestion] = useState('');
     const [answer, setAnswer] = useState('');
     const [editDataIndex, setEditDataIndex] = useState(null);
@@ -36,12 +35,15 @@ const FormFieldRepeaterFaq = ({
     }
 
     const selectItem = (e) => {
-        const chosen = {...e.value};
+        const targetedOption = head(stateOptionsData.filter(o => o.question === e.value));
-        setStateFieldData([...stateFieldData, chosen]);
+
+        if (targetedOption) {
+            setStateFieldData([...stateFieldData, targetedOption]);
+        }
     }
 
     const addNewItem = () => {
-        const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
+        const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true };
         setStateFieldData([...stateFieldData, newItem]);
     }
 
@@ -49,7 +51,7 @@ const FormFieldRepeaterFaq = ({
         e.preventDefault();
         const newData = stateFieldData.map((o, i) => {
             if (i === index) {
-                o.visible = e.value;
+                o.isVisible = e.value;
             }
             return o;
         });
@@ -59,7 +61,7 @@ const FormFieldRepeaterFaq = ({
     const editItem = (e, index) => {
         e.stopPropagation();
         setQuestion(stateFieldData[index].question);
-        setAnswer(stateFieldData[index].answer);
+        setAnswer(stateFieldData[index].response);
         setEditDataIndex(index);
         setIsVisibleEditDialog(true);
     }
@@ -83,7 +85,7 @@ const FormFieldRepeaterFaq = ({
         const newData = stateFieldData.map((o, i) => {
             if (i === editDataIndex) {
                 o.question = question;
-                o.answer = answer;
+                o.response = answer;
                 return o
             } else {
                 return o;
@@ -102,25 +104,31 @@ const FormFieldRepeaterFaq = ({
 
     const footerEditDialog = () => {
         return <div>
-            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
-            <Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
+            <Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
         </div>
     }
 
-    const usedExistingValues = stateFieldData
+    const usedExistingValues = useCallback(() => {
-        .filter(o => o.status === 'existing')
+        return stateFieldData
-        .map(o => o.question);
+            .filter(o => o.lookUpDataId)
+            .map(o => o.question)
+    }, [stateFieldData]);
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
+        setStateFieldData(storeFieldData);
-        setStateFieldData(newData);
+        setStateOptionsData([...options, ...storeFieldData]);
         register(fieldName, config)
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        setStateOptionsData([...options]);
+    }, [options]);
 
     useEffect(() => {
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
-    }, [stateFieldData])
+    }, [stateFieldData]);
 
     return (
         <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -131,8 +139,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.value)}
-                          options={options} optionLabel="question"/>
+                          options={stateOptionsData}
+                          optionLabel="question"/>
             </div>
             <Accordion activeIndex={0}>
                 {stateFieldData.map((o, i) => <AccordionTab key={i}
@@ -144,7 +153,7 @@ const FormFieldRepeaterFaq = ({
                                                                             offIcon="pi pi-eye-slash"
                                                                             onLabel=""
                                                                             offLabel=""
-                                                                            checked={o.visible}
+                                                                            checked={o.isVisible}
                                                                             onChange={(e) => setChecked(e, i)}/>
                                                                         {o.question}
                                                                     </div>
@@ -160,7 +169,7 @@ const FormFieldRepeaterFaq = ({
                                                             }
                 >
                     <p className="m-0">
-                        {o.answer}
+                        {o.response}
                     </p>
                 </AccordionTab>)}
             </Accordion>
@@ -170,14 +179,18 @@ const FormFieldRepeaterFaq = ({
                 footer={footerEditDialog}
                 style={{ maxWidth: '50rem' }}
                 onHide={hideEditDialog}>
+                <div className="appPage__spacer"></div>
                 <div className="appForm__field">
                     <label>{__('Titolo FAQ', 'gepafin')}</label>
                     <InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
                 </div>
                 <div className="appForm__field">
                     <label>{__('Risposta', 'gepafin')}</label>
-                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'answer')} rows={5} cols={30} />
+                    <InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
+                                   rows={5}
+                                   cols={30}/>
                 </div>
+                <div className="appPage__spacer"></div>
             </Dialog>
         </div>
     )

src/components/TopBarProfileMenu/index.js

@@ -2,13 +2,14 @@ import React, { useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 
 // store
-import { storeSet } from '../../store';
+import { storeSet, useTrackedStore } from '../../store';
 
 // components
 import { Menu } from 'primereact/menu';
 import { Avatar } from 'primereact/avatar';
 
 const TopBarProfileMenu = ({ menuLeftRef }) => {
+    const userData = useTrackedStore().main.userData();
 
     let items = [
         {
@@ -17,8 +18,8 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
                     <div className="topBar__menuProfileItem">
                         <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                         <div className="userInfo">
-                            <span className="userName">Mario Rossi</span>
+                            <span className="userName">{`${userData.firstName} ${userData.lastName}`}</span>
-                            <span className="userEmail">mario.rossi@example.com</span>
+                            <span className="userEmail">{userData.email}</span>
                         </div>
                     </div>
                 );

src/components/UnsavedChangesDetector/index.js

@@ -5,7 +5,7 @@ import equal from 'fast-deep-equal';
 // tools
 
 const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
-    const [initial] = useState(initialData);
+    const [initial, setInitial] = useState(initialData);
 
     const warnIfUnsavedChanges = useCallback((event) => {
         const updatedData = getValuesFn();
@@ -16,7 +16,11 @@ const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
         }
 
         return event.returnValue;
-    }, [initial])
+    }, [initialData]);
+
+    useEffect(() => {
+        setInitial(initialData);
+    }, [initialData])
 
     useEffect(() => {
         window.addEventListener('beforeunload', (e) => {

src/helpers/getBandoLabel.js

@@ -2,14 +2,17 @@ import { __ } from '@wordpress/i18n';
 
 const getBandoLabel = (status) => {
     switch (status) {
-        case 'publish':
+        case 'PUBLISH':
             return __('Pubblicato', 'gepafin');
 
-        case 'draft':
+        case 'READY_TO_PUBLISH':
+            return __('Pronto', 'gepafin');
+
+        case 'DRAFT':
             return __('Bozza', 'gepafin');
 
-        case 'closed':
+        case 'EXPIRED':
-            return __('Chiuso', 'gepafin');
+            return __('Scaduto', 'gepafin');
 
         default:
             return '';

src/helpers/getBandoSeverity.js

@@ -1,12 +1,15 @@
 const getBandoSeverity = (status) => {
     switch (status) {
-        case 'publish':
+        case 'PUBLISH':
             return 'success';
 
-        case 'draft':
+        case 'READY_TO_PUBLISH':
+            return 'info';
+
+        case 'DRAFT':
             return 'warning';
 
-        case 'closed':
+        case 'EXPIRED':
             return 'closed';
 
         default:

src/helpers/getDateFromISOstring.js

@@ -1,6 +1,6 @@
 const getDateFromISOstring = (value, options = {}) => {
-    const optionsMerged = options || { day: '2-digit', month: '2-digit', year: 'numeric', dateStyle: 'short' }
+    const optionsMerged = options || { day: '2-digit', month: '2-digit', year: 'numeric', hour12: false }
-    return Intl.DateTimeFormat('it-IT', optionsMerged).format(new Date(value))
+    return value ? Intl.DateTimeFormat('it-IT', optionsMerged).format(new Date(value)) : value;
 }
 
 export default getDateFromISOstring;

src/layouts/DefaultLayout/components/AppSidebar/index.js

@@ -1,52 +1,66 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
+import { intersection } from 'ramda';
+
+// store
+import { useStore } from '../../../../store';
 
 // components
 import { NavLink } from 'react-router-dom';
 
 const AppSidebar = () => {
+    const permissions = useStore().main.getPermissions();
+
     const items = [
         {
             label: __('Riepilogo', 'gepafin'),
             icon: 'pi pi-objects-column',
             href: '/',
-            id: 1
+            id: 1,
+            enable: true
         },
         {
             label: __('Gestione Bandi', 'gepafin'),
             icon: 'pi pi-file',
             href: '/bandi',
-            id: 2
+            id: 2,
+            enable: intersection(permissions, ['VIEW_CALLS', 'MANAGE_TENDERS']).length
         },
         {
             label: __('Gestione Utenti', 'gepafin'),
             icon: 'pi pi-users',
-            href: '/utenti',
+            //href: '/utenti',
-            id: 3
+            id: 3,
+            enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS']).length
         },
         {
             label: __('Configurazione', 'gepafin'),
             icon: 'pi pi-cog',
-            href: '/configurazione',
+            //href: '/configurazione',
-            id: 4
+            id: 4,
+            enable: false
         },
         {
             label: __('Report e Analisi', 'gepafin'),
             icon: 'pi pi-chart-bar',
-            href: '/stats',
+            //href: '/stats',
-            id: 5
+            id: 5,
+            enable: false
         },
         {
             label: __('Log di Sistema', 'gepafin'),
             icon: 'pi pi-receipt',
             clickFn: () => {},
-            id: 6
+            id: 6,
+            enable: false
         }
     ]
 
     return <aside>
         <ul>
-            {items.map(o => <li key={o.id}>
+            {items
+                .filter(o => o.enable)
+                .map(o => <li key={o.id}>
                 {o.href
                     ? <NavLink to={o.href}>
                     <i className={o.icon}></i>

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

@@ -1,10 +1,17 @@
 import React, { useState, useEffect} from 'react';
 import { __ } from '@wordpress/i18n';
-import { uniq } from 'ramda';
+import { is, uniq } from 'ramda';
+
+// store
+import { storeSet, storeGet } from '../../../../store';
 
 // tools
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+
+// api
+import BandoService from '../../../../service/bando-service';
 
 // components
 import { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -20,6 +27,7 @@ import { Tag } from 'primereact/tag';
 import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { Link } from 'react-router-dom';
 
+
 const AllBandiTable = () => {
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
@@ -28,56 +36,36 @@ const AllBandiTable = () => {
     const [statuses, setStatuses] = useState([]);
 
     useEffect(() => {
-        // TODO
+        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        const items = [
+        if (isAsyncRequest !== 0) {
-            {
+            return;
-                name: 'Bando Innovazione 2024',
+        }
-                start_date: '2024-08-08T00:00:00+00:00',
+
-                end_date: '2024-08-30T00:00:00+00:00',
+        storeSet.main.setAsyncRequest();
-                submissions: 24,
+        BandoService.getBandi(getCallback, errGetCallbacks);
-                status: 'publish',
-                id: 11
-            },
-            {
-                name: 'Bando Sostenibilità 2024',
-                start_date: '2024-07-28T00:00:00+00:00',
-                end_date: '2024-08-15T00:00:00+00:00',
-                submissions: 35,
-                status: 'draft',
-                id: 9
-            },
-            {
-                name: 'Bando A',
-                start_date: '2024-06-28T00:00:00+00:00',
-                end_date: '2024-06-15T00:00:00+00:00',
-                submissions: 2,
-                status: 'closed',
-                id: 2
-            }
-        ]
-        setItems(getFormattedBandiData(items));
-        setStatuses(uniq(items.map(o => o.status)))
-        setLoading(false);
-        initFilters();
     }, []);
 
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setItems(getFormattedBandiData(data.data));
+            setStatuses(uniq(data.data.map(o => o.status)))
+            initFilters();
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallbacks = (data) => {
+        console.log('errGetCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
     const getFormattedBandiData = (data) => {
-        return [...(data || [])].map((d) => {
+        return data.map((d) => {
-            d.start_date = new Date(d.start_date);
+            d.dates = d.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
-            d.end_date = new Date(d.end_date);
-
             return d;
         });
     };
 
-    const formatDate = (value) => {
-        return value.toLocaleDateString('it-IT', {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric'
-        });
-    };
-
     const clearFilter = () => {
         initFilters();
     };
@@ -116,11 +104,11 @@ const AllBandiTable = () => {
     };
 
     const dateStartBodyTemplate = (rowData) => {
-        return formatDate(rowData.start_date);
+        return getDateFromISOstring(rowData.dates[0]);
     };
 
     const dateEndBodyTemplate = (rowData) => {
-        return formatDate(rowData.end_date);
+        return getDateFromISOstring(rowData.dates[1]);
     };
 
     const dateFilterTemplate = (options) => {

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
+import { isNil } from 'ramda';
 
 // components
 import { Button } from 'primereact/button';
 
-const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
+const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation }) => {
     return (
         <div className="appPageSection">
             <div className="appPageSection__actions">
@@ -13,7 +14,7 @@ const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
                     label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                 <Button
                     type="button"
-                    disabled={false}
+                    disabled={isNil(id)}
                     outlined
                     onClick={openPreview}
                     label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
@@ -10,9 +10,16 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
 import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
 import BandoEditFormActions from '../BandoEditFormActions';
 import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
+import BandoService from '../../../../service/bando-service';
+import LookupdataService from '../../../../service/lookupdata-service';
+import { storeSet, useStore } from '../../../../store';
 
 const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
     const navigate = useNavigate();
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const [aimedToOptions, setAimedToOptions] = useState([]);
+    const [faqOptions, setFaqOptions] = useState([]);
+    const [formInitialData, setFormInitialData] = useState(initialData);
     const {
         control,
         handleSubmit,
@@ -21,8 +28,13 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         register,
         trigger,
         getValues,
-        clearErrors
+        clearErrors,
-    } = useForm({defaultValues: initialData, mode: 'onChange'});
+        reset
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData;
+        }, [formInitialData]), mode: 'onChange'
+    });
     const values = getValues();
     let minDateStart = new Date();
 
@@ -30,22 +42,67 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         if (!isNil(formData.dates) && formData.dates.length) {
             formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
         }
-        console.log('onSubmit', formData);
+
+        if (!formData.id) {
+            BandoService.createBando(formData, createCallback, errCreateCallback);
+        } else {
+            BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
+        }
     };
 
-    // TODO temp data
+    const createCallback = (data) => {
-    const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
+        if (data.status === 'SUCCESS') {
-    const exampleOfFaqOptions = [
+            const values = getValues();
-        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor', visible: true }
+            if (!values.id && data.data.id) {
-    ];
+                navigate(`/bandi/${data.data.id}`);
-    // end of temp data
+            } else {
+                setFormInitialData(data.data);
+                reset();
+            }
+        }
+    }
+
+    const errCreateCallback = (data) => {
+        console.log('errCreateCallback', data);
+    }
 
     const openPreview = () => {
-        navigate('/bandi/11/preview');
+        navigate(`/bandi/${values.id}/preview`);
     }
 
     const openPreviewEvaluation = () => {
-        navigate('/bandi/11/preview-evaluation');
+        navigate(`/bandi/${values.id}/preview-evaluation`);
+    }
+
+    const lookupdataCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const aimedTo = data.data
+                .filter(o => o.type === 'AIMED_TO')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        lookUpDataId: o.id
+                    };
+                });
+            setAimedToOptions(aimedTo);
+            const faqItems = data.data
+                .filter(o => o.type === 'FAQ')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        lookUpDataId: o.id
+                    };
+                });
+            setFaqOptions(faqItems);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errLookupdataCallback = (data) => {
+        console.log('errLookupdataCallback', data);
+        storeSet.main.unsetAsyncRequest();
     }
 
     useImperativeHandle(
@@ -65,12 +122,26 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
         }, [errors, isValid]);
 
     useEffect(() => {
+        setFormInitialData(initialData);
+    }, [initialData]);
+
+    useEffect(() => {
+        reset(formInitialData);
+    }, [formInitialData]);
+
+    useEffect(() => {
+        if (isAsyncRequest !== 0) {
+            return;
+        }
+
         trigger().then(() => clearErrors());
+        //storeSet.main.setAsyncRequest();
+        LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]])
     }, []);
 
     return (
         <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
-            <UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
+            <UnsavedChangesDetector initialData={formInitialData} getValuesFn={getValues}/>
             <FormField
                 type="switch"
                 fieldName="confidi"
@@ -123,7 +194,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
                 data={values}
                 setDataFn={setValue}
                 fieldName="aimedTo"
-                options={exampleOfAimedToOptions}
+                options={aimedToOptions}
                 errors={errors}
                 register={register}
                 trigger={trigger}
@@ -191,7 +262,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
                 data={values}
                 setDataFn={setValue}
                 fieldName="faq"
-                options={exampleOfFaqOptions}
+                options={faqOptions}
                 errors={errors}
                 register={register}
                 trigger={trigger}
@@ -210,6 +281,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
             </div>
 
             <BandoEditFormActions
+                id={values.id}
                 openPreview={openPreview}
                 openPreviewEvaluation={openPreviewEvaluation}/>
         </form>

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
@@ -10,9 +10,14 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
 import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
 import BandoEditFormActions from '../BandoEditFormActions';
 import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
+import BandoService from '../../../../service/bando-service';
+import LookupdataService from '../../../../service/lookupdata-service';
 
 const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
     const navigate = useNavigate();
+    const [criteriaOptions, setCriteriaOptions] = useState([]);
+    const [checklistOptions, setChecklistOptions] = useState([]);
+    const [formInitialData, setFormInitialData] = useState(initialData);
     const {
         control,
         handleSubmit,
@@ -21,27 +26,71 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
         register,
         trigger,
         getValues,
-        clearErrors
+        clearErrors,
-    } = useForm({defaultValues: initialData, mode: 'onChange'});
+        reset
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData;
+        }, [formInitialData]), mode: 'onChange'
+    });
     const values = getValues();
+    const step2Props = ['threshold', 'criteria', 'checkList', 'docs', 'images'];
 
     const onSubmit = (formData) => {
         if (!isNil(formData.dates) && formData.dates.length) {
             formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
         }
-        console.log('onSubmit', formData);
+
+        const forSubmit = Object.keys(formData).reduce((acc, cur) => {
+            if (step2Props.includes(cur)) {
+                acc[cur] = formData[cur];
+            }
+            return acc;
+        }, {});
+
+        BandoService.updateBandoStep2(formData.id, forSubmit, createCallback, errCreateCallback);
     };
 
-    // TODO temp data
+    const createCallback = (data) => {
-    const exampleOfCriteriaOptions = [
+        if (data.status === 'SUCCESS') {
-        { id: 15, value: 'Innovatività del progetto', score: 9 },
+            setFormInitialData(data.data);
-        { id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
+            reset();
-        { id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
+        }
-    ];
+    }
-    const exampleOfChecklistOptions = [
+
-        { id: 15, value: 'Innovatività del progetto' }
+    const errCreateCallback = (data) => {
-    ];
+        console.log('errCreateCallback', data);
-    // end of temp data
+    }
+
+    const lookupdataCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const criteria = data.data
+                .filter(o => o.type === 'EVALUATION_CRITERIA')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        score: 0,
+                        lookUpDataId: o.id
+                    };
+                });
+            setCriteriaOptions(criteria);
+            const checklist = data.data
+                .filter(o => o.type === 'CHECKLIST')
+                .map(o => {
+                    delete o.type;
+                    return {
+                        ...o,
+                        lookUpDataId: o.id
+                    };
+                });
+            setChecklistOptions(checklist);
+        }
+    }
+
+    const errLookupdataCallback = (data) => {
+        console.log('errLookupdataCallback', data)
+    }
 
     const openPreview = () => {
         navigate('/bandi/preview/11');
@@ -67,8 +116,17 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
             }
         }, [errors, isValid]);
 
+    useEffect(() => {
+        setFormInitialData(initialData);
+    }, [initialData]);
+
+    useEffect(() => {
+        reset(formInitialData);
+    }, [formInitialData]);
+
     useEffect(() => {
         trigger().then(() => clearErrors());
+        LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['CHECKLIST', 'EVALUATION_CRITERIA']]])
     }, []);
 
     return (
@@ -78,7 +136,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
                 data={values}
                 setDataFn={setValue}
                 fieldName="criteria"
-                options={exampleOfCriteriaOptions}
+                options={criteriaOptions}
                 errors={errors}
                 register={register}
                 label={<>{__('Criteri di valutazione', 'gepafin')}*
@@ -95,17 +153,18 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
             <FormField
                 type="fileupload"
                 setDataFn={setValue}
-                fieldName="documentation"
+                fieldName="docs"
                 label={__('Documentazione', 'gepafin')}
                 control={control}
                 errors={errors}
-                defaultValue={values['documentation']}
+                defaultValue={values['docs']}
                 config={{ required: __('È obbligatorio', 'gepafin') }}
                 accept="application/pdf,application/vnd.ms-excel"
                 chooseLabel={__('Aggiungi documento', 'gepafin')}
                 multiple={true}
                 doctype='document'
                 register={register}
+                callId={values.id}
             />
 
             <FormField
@@ -118,13 +177,14 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
                 defaultValue={values['images']}
                 doctype='images'
                 register={register}
+                callId={values.id}
             />
 
             <FormFieldRepeater
                 data={values}
                 setDataFn={setValue}
-                fieldName="checklist"
+                fieldName="checkList"
-                options={exampleOfChecklistOptions}
+                options={checklistOptions}
                 errors={errors}
                 register={register}
                 label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*

src/pages/BandoEdit/index.js

@@ -1,31 +1,37 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-//import equal from 'fast-deep-equal';
 import { is, isNil } from 'ramda';
 
-// components
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import BandoService from '../../service/bando-service';
+
+// tools
 import getBandoLabel from '../../helpers/getBandoLabel';
+
+// components
 import { Button } from 'primereact/button';
 import { Skeleton } from 'primereact/skeleton';
 import { Steps } from 'primereact/steps';
 import BandoEditFormStep1 from './components/BandoEditFormStep1';
 import BandoEditFormStep2 from './components/BandoEditFormStep2';
 import { Messages } from 'primereact/messages';
-
+import FormsService from '../../service/forms-service';
-// TODO temp
-import { bandoTest } from '../../tempData';
 
 const BandoEdit = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
     const navigate = useNavigate();
     const { id } = useParams();
-    const [activeStep, setActiveStep] = useState(0)
+    const [activeStep, setActiveStep] = useState(null)
     const [data, setData] = useState({});
-    const [isLoading, setIsLoading] = useState(true);
+    const [forms, setForms] = useState([]);
     //const [selectedTemplate, setSelectedTemplate] = useState(null);
     //const [templates, setTemplate] = useState(null);
     const formRef = useRef(null);
-    const stepErrorMsgs = useRef(null);
+    const bandoMsgs = useRef(null);
 
     const stepItems = [
         {
@@ -34,7 +40,7 @@ const BandoEdit = () => {
                 if (activeStep === 0) {
                     return false
                 }
-                stepErrorMsgs.current.clear();
+                bandoMsgs.current.clear();
                 const isFormValid = formRef.current.isFormValid();
                 //const values = formRef.current.getValues();
                 //const diffData = equal(values, data);
@@ -42,10 +48,13 @@ const BandoEdit = () => {
                 if (isFormValid) {
                     goToStep(0)
                 } else {
-                    stepErrorMsgs.current.show([
+                    bandoMsgs.current.show([
-                        { sticky: true, severity: 'error', summary: 'Error',
+                        {
+                            id: '98',
+                            sticky: true, severity: 'error', summary: 'Error',
                             detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
-                            closable: true }
+                            closable: true
+                        }
                     ]);
                 }
             }
@@ -56,7 +65,7 @@ const BandoEdit = () => {
                 if (activeStep === 1) {
                     return false
                 }
-                stepErrorMsgs.current.clear();
+                bandoMsgs.current.clear();
                 const isFormValid = formRef.current.isFormValid();
                 //const values = formRef.current.getValues();
                 //const diffData = equal(values, data);
@@ -64,10 +73,13 @@ const BandoEdit = () => {
                 if (isFormValid) {
                     goToStep(1);
                 } else {
-                    stepErrorMsgs.current.show([
+                    bandoMsgs.current.show([
-                        { sticky: true, severity: 'error', summary: 'Error',
+                        {
+                            id: '98',
+                            sticky: true, severity: 'error', summary: 'Error',
                             detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
-                            closable: true }
+                            closable: true
+                        }
                     ]);
                 }
             }
@@ -79,40 +91,151 @@ const BandoEdit = () => {
     }
 
     const openBandoFormManagement = () => {
-        navigate('/bandi/11/forms');
+        navigate(`/bandi/${id}/forms`);
+    }
+
+    const validateBando = () => {
+        storeSet.main.setAsyncRequest();
+        bandoMsgs.current.clear();
+        BandoService.validateBando(id, validateCallback, errValidateCallback);
+    }
+
+    const validateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (bandoMsgs.current) {
+                bandoMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'success', summary: '',
+                        detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errValidateCallback = (data) => {
+        standardErrCallback(data);
+    }
+
+    const publishBando = () => {
+        storeSet.main.setAsyncRequest();
+        bandoMsgs.current.clear();
+        BandoService.updateBandoStatus(id, publishCallback, errPublishCallback, [['status', 'PUBLISH']]);
+    }
+
+    const publishCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (bandoMsgs.current) {
+                bandoMsgs.current.show([
+                    {
+                        id: '99',
+                        sticky: true, severity: 'success', summary: '',
+                        detail: __('Pubblicato!', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errPublishCallback = (data) => {
+        standardErrCallback(data);
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (!isNil(data.data.dates) && data.data.dates.length) {
+                data.data.dates = data.data.dates.map(v => is(String, v) ? new Date(v) : v);
+            }
+
+            if (data.data.status === 'READY_TO_PUBLISH') {
+                bandoMsgs.current.clear();
+                bandoMsgs.current.show([
+                    {
+                        id: '1',
+                        sticky: true, severity: 'info', summary: 'Info',
+                        detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
+                        closable: false
+                    }
+                ]);
+            } else if (data.data.status === 'DRAFT') {
+                if (bandoMsgs.current) {
+                    bandoMsgs.current.clear();
+                    bandoMsgs.current.show([
+                        {
+                            id: '1',
+                            sticky: true, severity: 'info', summary: 'Info',
+                            detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
+                            closable: false
+                        }
+                    ]);
+                }
+            }
+
+            setData(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        standardErrCallback(data);
+    }
+
+    const standardErrCallback = (data) => {
+        if (bandoMsgs.current && data.message) {
+            bandoMsgs.current.show([
+                {
+                    sticky: true, severity: 'error', summary: 'Error',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setForms(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
     }
 
     useEffect(() => {
+        storeSet.main.setAsyncRequest();
+        setActiveStep(0);
+
         const parsed = parseInt(id)
         const bandoId = !isNaN(parsed) ? parsed : 0;
 
-        const data = 0 === bandoId
+        if (bandoId === 0) {
-            ? {
+            setData({
                 status: 'draft',
                 name: ''
-            }
+            });
-            : bandoTest;
+            storeSet.main.unsetAsyncRequest();
 
-            if (bandoId === 0) {
+            if (bandoMsgs.current) {
-                setData(data);
+                bandoMsgs.current.clear();
-                setIsLoading(false);
+                bandoMsgs.current.show([
-            } else {
+                    {
-                setTimeout(() => {
+                        id: '1',
-                    if (!isNil(data.dates) && data.dates.length) {
+                        sticky: true, severity: 'info', summary: 'Info',
-                        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
+                        detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
+                        closable: false
                     }
-
+                ]);
-                    setData(data);
-
-                    /*const templates = [
-                        { name: 'Il mio template', value: 22 },
-                        { name: 'Template #11', value: 11 },
-                    ];
-                    setTemplate(templates);*/
-                    setIsLoading(false);
-                }, 2000);
             }
-    }, [id]);
+        } else {
+            BandoService.getBando(id, getCallback, errGetCallback);
+            FormsService.getFormsForCall(id, getFormsCallback, () => {
+            });
+        }
+    }, []);
 
     return (
         <div className="appPage">
@@ -146,7 +269,7 @@ const BandoEdit = () => {
                         icon="pi pi-check"
                         iconPos="right"/>
                 </div> : null*/}
-            {!isLoading
+            {!isAsyncRequest
                 ? <Steps
                     model={stepItems}
                     activeIndex={activeStep}
@@ -155,13 +278,14 @@ const BandoEdit = () => {
 
             <div className="appPage__spacer"></div>
 
-            <Messages ref={stepErrorMsgs} />
+            <Messages ref={bandoMsgs}/>
 
-            {!isLoading
+            {!isAsyncRequest
                 ? <>
                     {activeStep === 0
-                        ? <BandoEditFormStep1 initialData={data} ref={formRef}/>
+                        ? <BandoEditFormStep1 initialData={data} ref={formRef}/> : null}
-                        : <BandoEditFormStep2 initialData={data} ref={formRef}/>}
+                    {activeStep === 1
+                        ? <BandoEditFormStep2 initialData={data} ref={formRef}/> : null}
 
                     <div className="appPageSection">
                         <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
@@ -169,6 +293,34 @@ const BandoEdit = () => {
                             type="button"
                             onClick={openBandoFormManagement}
                             label={__('Crea/modifica form', 'gepafin')}/>
+
+                        {forms.length
+                            ? <ul className="">
+                                {forms.map(o => <li key={o.id}>
+                                    {o.label}
+                                </li>)}
+                            </ul>
+                            : <p>No forms created yet.</p>}
+                    </div>
+
+                    <div className="appPage__spacer"></div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Publicca il Form', 'gepafin')}</h2>
+
+                        <div className="appPageSection__actions">
+                            <Button
+                                type="button"
+                                outlined
+                                disabled={!(data.status === 'DRAFT')}
+                                onClick={validateBando}
+                                label={__('Validate', 'gepafin')}/>
+                            <Button
+                                type="button"
+                                disabled={!(data.status === 'READY_TO_PUBLISH')}
+                                onClick={publishBando}
+                                label={__('Publish', 'gepafin')}/>
+                        </div>
                     </div>
                 </>
                 : <>

src/pages/BandoForms/index.js

@@ -1,18 +1,25 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useParams, useNavigate } from 'react-router-dom';
+import { isEmpty } from 'ramda';
 
 // components
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 
+// service
+import FormsService from '../../service/forms-service';
+
+// store
+import { storeSet } from '../../store';
+
 const BandoForms = () => {
     const { id } = useParams();
     const navigate = useNavigate()
-    const [templates, setTemplate] = useState(null);
+    const [templates, setTemplates] = useState(null);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
-    //const [data, setData] = useState({});
+    const [selectedForm, setSelectedForm] = useState(null);
-    //const [isLoading, setIsLoading] = useState(true);
+    const [forms, setForms] = useState([]);
 
     const doCreateNewForm = () => {
         navigate(`/bandi/${id}/forms/new`);
@@ -22,17 +29,35 @@ const BandoForms = () => {
         navigate(`/bandi/${id}`);
     }
 
+    const goToEditForm = () => {
+        if (selectedForm && selectedForm !== 0) {
+            navigate(`/bandi/${id}/forms/${selectedForm}`);
+        }
+    }
+
+    const goToEditFormFromTemplate = () => {
+        console.log('goToEditFormFromTemplate', selectedTemplate)
+        //navigate(`/bandi/${id}`);
+    }
+
+    const getFormsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const forms = data.data.map(o => ({label: o.label, value: o.id}))
+            setForms(forms);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
     useEffect(() => {
         const parsed = parseInt(id)
         const bandoId = !isNaN(parsed) ? parsed : 0;
 
-        const templates = [
+        setTemplates([
-                        { name: 'Il mio template', value: 22 },
+            {label: "Form template", value: 11}
-                        { name: 'Template #11', value: 11 },
+        ])
-        ];
-        setTemplate(templates);
 
-        // TODO
+        storeSet.main.setAsyncRequest();
+        FormsService.getFormsForCall(bandoId, getFormsCallback, () => {});
     }, [id]);
 
     return (
@@ -66,8 +91,15 @@ const BandoForms = () => {
                             value={selectedTemplate}
                             onChange={(e) => setSelectedTemplate(e.value)}
                             options={templates}
-                            optionLabel="name"
+                            optionLabel="label"
                             placeholder={__('Seleziona template', 'gepafin')}/>
+                        <Button
+                            type="button"
+                            outlined
+                            disabled={true}
+                            onClick={goToEditFormFromTemplate}
+                            label={__('Crea', 'gepafin')}
+                            icon="pi pi-plus" iconPos="right"/>
                     </div>
                 </div>
 
@@ -82,15 +114,25 @@ const BandoForms = () => {
                     </div>
                 </div>
 
-                <div className="appPageSection__withBorder disabled">
+                <div className="appPageSection__withBorder">
-                    <h2>{__('Modifica Form esistente', 'gepafin')}</h2>
+                    <h2>{__('Modifica form esistente', 'gepafin')}</h2>
                     <div className="row">
                         <p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p>
+                        <Dropdown
+                            id="form"
+                            disabled={isEmpty(forms)}
+                            value={selectedForm}
+                            onChange={(e) => setSelectedForm(e.value)}
+                            options={forms}
+                            optionLabel="label"
+                            placeholder={__('Seleziona form', 'gepafin')}/>
                         <Button
                             type="button"
-                            disabled={true}
+                            outlined
-                            onClick={doCreateNewForm}
+                            disabled={!selectedForm}
-                            label={__('Modifica', 'gepafin')}/>
+                            onClick={goToEditForm}
+                            label={__('Modifica', 'gepafin')}
+                            icon="pi pi-cog" iconPos="right"/>
                     </div>
                 </div>
             </div>

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+
+const ElementSettingRepeater = ({
+                                    value,
+                                    name,
+                                    setDataFn
+                                }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+
+    const removeItem = (index) => {
+        const newData = stateFieldData.toSpliced(index, 1);
+        setStateFieldData(newData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '' }]);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.label = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const properField = (item, i) => {
+        return <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+    }
+
+    useEffect(() => {
+        const storeFieldData = value ?? [];
+        setStateFieldData(storeFieldData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, [...stateFieldData]);
+    }, [stateFieldData])
+
+    return (
+        <div className="formElementSettings__repeater">
+            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                <div className="p-inputgroup flex-1">
+                    {properField(o, i)}
+                    <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
+                </div>
+            </div>)}
+            <Button type="button" label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+        </div>
+    )
+}
+
+export default ElementSettingRepeater;

src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { head } from 'ramda';
+import { head, isNil } from 'ramda';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { klona } from 'klona';
 
 // store
@@ -10,12 +10,17 @@ import { storeSet, useStore } from '../../../../store';
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { Tag } from 'primereact/tag';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { InputSwitch } from 'primereact/inputswitch';
+import ElementSettingRepeater from './components/ElementSettingRepeater';
 
-const BuilderElementSettings = () => {
+const BuilderElementSettings = ({ closeSettings }) => {
-    const elements = useStore().main.elements();
+    const elements = useStore().main.formElements();
     const activeElement = useStore().main.activeElement();
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
+    const [validators, setValidators] = useState({});
+    const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern', 'custom'];
 
     const onChange = (value, name) => {
         const newSettings = settings
@@ -30,10 +35,47 @@ const BuilderElementSettings = () => {
         setSettings(newSettings);
     }
 
+    const onUpdateOptions = (name, value) => {
+        const newSettings = settings
+            .map(o => {
+                if (o.name === name) {
+                    o.value = value;
+                }
+
+                return o;
+            });
+
+        setSettings(newSettings);
+    }
+
     const saveSettings = () => {
         activeElementData.settings = settings;
+        activeElementData.validators = validators;
         const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
-        storeSet.main.elements(newElements);
+        storeSet.main.formElements(newElements);
+        closeSettings();
+    }
+
+    const showField = (value, key) => {
+        let newValidators = klona(validators);
+        if (value) {
+            newValidators[key] = '';
+        } else {
+            newValidators[key] = null;
+        }
+        setValidators(newValidators);
+    }
+
+    const toggleRequired = (value, key) => {
+        let newValidators = klona(validators);
+        newValidators[key] = value;
+        setValidators(newValidators);
+    }
+
+    const onChangeValidator = (value, name) => {
+        let newValidators = klona(validators);
+        newValidators[name] = value;
+        setValidators(newValidators);
     }
 
     useEffect(() => {
@@ -41,22 +83,59 @@ const BuilderElementSettings = () => {
         if (chosen) {
             setActiveElementData(klona(chosen));
             setSettings(klona(chosen.settings));
+            setValidators(klona(chosen.validators))
         } else {
             setActiveElementData({});
             setSettings([]);
+            setValidators({})
         }
     }, [activeElement])
 
     return (activeElementData
             ? <div className="formElementSettings">
                 <Tag value={activeElementData.name} severity="info"/>
-                {settings
+                <TabView className="formElementSettings__tabs">
-                    ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
+                    <TabPanel header={__('Presentation', 'gepafin')}>
-                    <label htmlFor={o.name}>{o.name}</label>
+                        {settings
-                    <InputText id={o.name} aria-describedby={`${o.name}-help`}
+                            ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
-                               value={o.value}
+                                <label htmlFor={o.name}>{o.name}</label>
-                               onChange={(e) => onChange(e.target.value, o.name)}/>
+                                {o.name === 'options'
-                </div>) : null}
+                                    ? <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions} />
+                                    : <InputText id={o.name} aria-describedby={`${o.name}-help`}
+                                           value={o.value}
+                                           onChange={(e) => onChange(e.target.value, o.name)}/>}
+                            </div>) : null}
+                    </TabPanel>
+                    <TabPanel header={__('Validation', 'gepafin')}>
+                        {validators
+                            ? Object.keys(validators).map((k) => <div
+                                className="formElementSettings__field" key={k}>
+                                {k === 'isRequired'
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={k}>{__('Required?', 'gepafin')}</label>
+                                        <InputSwitch
+                                            checked={validators[k]}
+                                            onChange={(e) => toggleRequired(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k)
+                                    ? <div className="formElementSettings__field">
+                                        <label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
+                                        <InputSwitch
+                                            checked={!isNil(validators[k])}
+                                            onChange={(e) => showField(e.value, k)}/>
+                                    </div>
+                                    : null}
+                                {textBasedValidatorFields.includes(k) && !isNil(validators[k])
+                                    ? <div className="formElementSettings__field">
+                                    <label htmlFor={k}>{k}</label>
+                                    <InputText id={k} aria-describedby={`${k}-help`}
+                                               value={validators[k]}
+                                               onChange={(e) => onChangeValidator(e.target.value, k)}/>
+                                </div> : null}
+                            </div>) : null}
+                    </TabPanel>
+                </TabView>
 
                 <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
             </div>

src/pages/BandoFormsEdit/components/FormBuilder/index.js

@@ -48,7 +48,7 @@ const FormBuilder = () => {
         <>
             <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
                 <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
-                {!isEmpty(activeElement) ? <BuilderElementSettings/> : null}
+                {!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
             </Sidebar>
             <div className="formBuilder">
                 <div className="formBuilder__main">

src/pages/BandoFormsEdit/index.js

@@ -6,52 +6,121 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { klona } from 'klona';
 
 // store
-import { storeSet, storeGet } from '../../store';
+import { storeSet, storeGet, useStore } from '../../store';
 
 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';
 
-// TODO temp
+// components
-import { formData, elementItems } from '../../tempData';
 import { InputText } from 'primereact/inputtext';
+import FormsService from '../../service/forms-service';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
-    const [isLoading, setIsLoading] = useState(true);
     const [formName, setFormName] = useState('');
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+
+    const getBandoId = () => {
+        const parsed = parseInt(id)
+        return !isNaN(parsed) ? parsed : 0;
+    }
 
     const goBack = () => {
-        navigate(`/bandi/${id}/forms`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms`);
     }
 
     const doSave = () => {
-        console.log('doSave', storeGet.main.formElements());
+        const content = storeGet.main.formElements();
+        const bandoId = getBandoId();
+        const parsedFormId = parseInt(formId)
+        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        const formData = {
+            label: formName,
+            content
+        }
+
+        storeSet.main.setAsyncRequest();
+        if (bandoFormId === 0) {
+            FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
+        } else {
+            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback)
+        }
+    }
+
+    const formCreateCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const parsed = parseInt(id)
+            const bandoId = !isNaN(parsed) ? parsed : 0;
+            if (data.data.id) {
+                navigate(`/bandi/${bandoId}/forms/${data.data.id}`);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errFormCreateCallback = (data) => {
+        console.log('errFormCreateCallback', data)
+        storeSet.main.unsetAsyncRequest();
     }
 
     const openPreview = () => {
-        navigate(`/bandi/${id}/forms/${formId}/preview`);
+        const bandoId = getBandoId();
+        navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
     }
 
     const doPublish = () => {
         console.log('doPublish');
     }
 
+    const getElementItemsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.elementItems(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetElementItemsCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.formId(data.data.id);
+            storeSet.main.formLabel(data.data.label);
+            setFormName(data.data.label);
+            const elements = klona(data.data.content);
+            storeSet.main.formElements(elements);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetFormCallbacks = (data) => {
+        console.log('errGetElementItemsCallbacks', 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;
-        //const parsedFormId = parseInt(formId)
-        //const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
-        // 1. TODO get builder content data from API
+        storeSet.main.setAsyncRequest();
-        storeSet.main.formLabel(formData.label);
+        FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);
-        const elements = klona(formData.content);
-        storeSet.main.formElements(elements);
-        storeSet.main.elementItems(elementItems);
-        setIsLoading(false);
 
-    }, [id]);
+        if (bandoFormId) {
+            storeSet.main.setAsyncRequest();
+            FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
+        }
+
+        return () => {
+            storeSet.main.formId(0);
+            storeSet.main.formLabel('');
+            storeSet.main.formElements([]);
+        }
+    }, [id, formId]);
 
     return (
         <div className="appPage">
@@ -65,11 +134,11 @@ const BandoFormsEdit = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appForm__field">
-                <label htmlFor="label">{__('Form label', 'gepafin')}</label>
+                <label htmlFor="label">{__('Assegna un nome a questo form', 'gepafin')}</label>
                 <InputText
                     id="label"
                     value={formName}
-                    placeholder={__('Nome della forma', 'gepafin')}
+                    placeholder=""
                     onChange={(e) => setFormName(e.target.value)}
                     aria-describedby="label-help"/>
             </div>
@@ -78,7 +147,7 @@ const BandoFormsEdit = () => {
 
             <div className="appPageSection">
                 <DndProvider backend={HTML5Backend}>
-                    {!isLoading ? <FormBuilder/> : null}
+                    {!isAsyncRequest ? <FormBuilder/> : null}
                 </DndProvider>
             </div>
 

src/pages/BandoView/index.js

@@ -1,7 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { bandoTest } from '../../tempData';
+import { is, isEmpty } from 'ramda';
+
+// store
+import { storeSet, useStore } from '../../store';
 
 // tools
 import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -13,13 +16,16 @@ import { Accordion } from 'primereact/accordion';
 import { AccordionTab } from 'primereact/accordion';
 import { InputTextarea } from 'primereact/inputtextarea';
 import { Button } from 'primereact/button';
+import BandoService from '../../service/bando-service';
+import { Messages } from 'primereact/messages';
 
 const BandoView = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
     const { id } = useParams();
     const navigate = useNavigate();
     const [data, setData] = useState({});
     const [newQuestion, setNewQuestion] = useState('');
-    const [isLoading, setIsLoading] = useState(true);
+    const bandoMsgs = useRef(null);
 
     const closePreview = () => {
         navigate(`/bandi/${id}`);
@@ -41,20 +47,41 @@ const BandoView = () => {
 
     }
 
-    useEffect(() => {
+    const getCallback = (data) => {
-        //const parsed = parseInt(id)
+        if (data.status === 'SUCCESS') {
-        //const bandoId = !isNaN(parsed) ? parsed : 0;
+            setData(getFormattedBandiData(data.data));
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
 
-        setTimeout(() => {
+    const errGetCallback = (data) => {
-            const data = bandoTest;
+        if (bandoMsgs.current && data.message) {
-            setData(data);
+            bandoMsgs.current.show([
-            setIsLoading(false)
+                {
-        }, 3000);
+                    sticky: true, severity: 'error', summary: 'Error',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedBandiData = (data) => {
+        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+        return data;
+    };
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const bandoId = !isNaN(parsed) ? parsed : 0;
+
+        BandoService.getBando(bandoId, getCallback, errGetCallback);
     }, [id]);
 
     return (
         <div className="appPage">
-            {!isLoading
+            {!isAsyncRequest && !isEmpty(data)
                 ? <div className="appPage__pageHeader">
                     <h1>{data.name}</h1>
                     <p>
@@ -68,8 +95,9 @@ const BandoView = () => {
                 </>}
 
             <div className="appPage__spacer"></div>
+            <Messages ref={bandoMsgs}/>
 
-            {!isLoading
+            {!isAsyncRequest && !isEmpty(data)
                 ? <div className="appPage__content">
                     <div className="appPageSection__preview">
                         <Button
@@ -107,11 +135,11 @@ const BandoView = () => {
                         <div className="appPageSection__withBorder">
                             <p className="appPageSection__pMeta">
                                 <span>{__('Data apertura', 'gepafin')}</span>
-                                <span></span>
+                                <span>{getDateFromISOstring(data.dates[0])}</span>
                             </p>
                             <p className="appPageSection__pMeta">
                                 <span>{__('Data chiusura', 'gepafin')}</span>
-                                <span></span>
+                                <span>{getDateFromISOstring(data.dates[1])}</span>
                             </p>
                         </div>
                     </div>
@@ -156,7 +184,7 @@ const BandoView = () => {
                         <h2>{__('Allegati', 'gepafin')}</h2>
                         <div className="row rowContent">
                             <ul>
-                                {data.documentation.map((o, i) => <li key={i}>
+                                {data.docs.map((o, i) => <li key={i}>
                                     <a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
                                 </li>)}
                             </ul>
@@ -168,7 +196,7 @@ const BandoView = () => {
                         <Accordion>
                             {data.faq.map((o, i) => <AccordionTab key={i} header={o.question}>
                                 <p>
-                                    {o.answer}
+                                    {o.response}
                                 </p>
                             </AccordionTab>)}
                         </Accordion>
@@ -196,12 +224,14 @@ const BandoView = () => {
                         <div className="appPageSection__actions">
                             <Button
                                 type="button"
+                                disabled={true}
                                 outlined
                                 onClick={scaricaBando}
                                 label={__('Scarica Bando Completo', 'gepafin')}
                                 icon="pi pi-download" iconPos="right"/>
                             <Button
                                 type="button"
+                                disabled={true}
                                 outlined
                                 onClick={scaricaModulistica}
                                 label={__('Scarica Modulistica', 'gepafin')}

src/pages/DashboardBenefeciario/components/LatestBandiTable/index.js

@@ -0,0 +1,176 @@
+import React, { useState, useEffect} from 'react';
+import { __ } from '@wordpress/i18n';
+import { uniq } from 'ramda';
+
+// tools
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
+import { Tag } from 'primereact/tag';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+
+
+const LatestBandiTable = () => {
+    const [items, setItems] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [statuses, setStatuses] = useState([]);
+
+    useEffect(() => {
+        // TODO
+        const items = [
+            {
+                name: 'Bando Innovazione 2024',
+                start_date: '2024-08-08T00:00:00+00:00',
+                end_date: '2024-08-30T00:00:00+00:00',
+                submissions: 24,
+                status: 'publish',
+                id: 11
+            },
+            {
+                name: 'Bando Sostenibilità 2024',
+                start_date: '2024-07-28T00:00:00+00:00',
+                end_date: '2024-08-15T00:00:00+00:00',
+                submissions: 35,
+                status: 'publish',
+                id: 9
+            },
+            {
+                name: 'Bando A',
+                start_date: '2024-06-28T00:00:00+00:00',
+                end_date: '2024-06-15T00:00:00+00:00',
+                submissions: 2,
+                status: 'closed',
+                id: 2
+            }
+        ]
+        setItems(getFormattedBandiData(items));
+        setStatuses(uniq(items.map(o => o.status)))
+        setLoading(false);
+        initFilters();
+    }, []);
+
+    const getFormattedBandiData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.start_date = new Date(d.start_date);
+            d.end_date = new Date(d.end_date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('it-IT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            submissions: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
+                </IconField>
+            </div>
+        );
+    };
+
+    const dateStartBodyTemplate = (rowData) => {
+        return formatDate(rowData.start_date);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        return formatDate(rowData.end_date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
+    };
+
+    const header = renderHeader();
+
+    return(
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
+                       filters={filters}
+                       globalFilterFields={['name', 'status']}
+                       header={header}
+                       emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
+                <Column field="name" header={__('Nome Bando', 'gepafin')} filter filterPlaceholder="Search by name"
+                        style={{ minWidth: '12rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
+                        style={{ minWidth: '10rem' }}
+                        body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
+                        style={{ minWidth: '10rem' }}
+                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column header={__('Domande ricevute', 'gepafin')} filterField="submissions" dataType="numeric"
+                        style={{ minWidth: '10rem' }} field="submissions"
+                        filter filterElement={balanceFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
+                        style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
+                        filterElement={statusFilterTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestBandiTable;

src/pages/DashboardBenefeciario/components/LatestUsersActivityTable/index.js

@@ -0,0 +1,123 @@
+import React, { useState, useEffect} from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
+
+const LatestUsersActivityTable = () => {
+    const [items, setItems] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+
+    useEffect(() => {
+        // TODO
+        const bandi = [
+            {
+                date: '2024-08-02T00:00:00+14:32',
+                email: 'mario.rossi@gepafin.it',
+                action: 'Valutazione Domanda',
+                details: 'Bando Innovazione 2024 - Domanda #123',
+                id: 11
+            },
+            {
+                date: '2024-08-01T00:00:00+08:23',
+                email: 'laura.bianchi@gepafin.it',
+                action: 'Creazione Bando',
+                details: 'Nuovo bando "Formazione 2025" in bozza',
+                id: 9
+            }
+        ]
+        setItems(getFormattedBandiData(bandi));
+        setLoading(false);
+        initFilters();
+    }, []);
+
+    const getFormattedBandiData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('it-IT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            email: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
+                </IconField>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const header = renderHeader();
+
+    return(
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
+                       filters={filters}
+                       globalFilterFields={['name', 'status']}
+                       header={header}
+                       emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
+                <Column header={__('Timestamp', 'gepafin')} filterField="date" dataType="date"
+                        style={{ minWidth: '10rem' }}
+                        body={dateBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column field="email" header={__('Utente', 'gepafin')} filter filterPlaceholder="Search by email"
+                        style={{ minWidth: '12rem' }}/>
+                <Column field="action" header={__('Azione', 'gepafin')}/>
+                <Column field="dettails" header={__('Dettagli', 'gepafin')}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestUsersActivityTable;

src/pages/DashboardBenefeciario/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router-dom';
+
+// components
+import LatestBandiTable from './components/LatestBandiTable';
+import LatestUsersActivityTable from './components/LatestUsersActivityTable';
+import { Button } from 'primereact/button';
+
+const DashboardBenefeciario = () => {
+    const navigate = useNavigate();
+
+    const onGoToCreateNewBando = () => {
+        navigate('/bandi/new');
+    }
+
+    const onGoToUsers = () => {
+        console.log('onGoToUsers')
+    }
+
+    const onGoToStats = () => {
+        console.log('onGoToStats')
+    }
+
+    const onGoToSettings = () => {
+        console.log('onGoToSettings')
+    }
+
+    return(
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Dashboard', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection statsBigBadges">
+                <h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
+                <div className="statsBigBadges__grid">
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Domande attivi', 'gepafin')}</span>
+                        <span>3</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Bandi osservati', 'gepafin')}</span>
+                        <span>42</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Documenti da integrare', 'gepafin')}</span>
+                        <span>2</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DashboardBenefeciario;

src/routes.js

@@ -5,6 +5,7 @@ import PageNotFound from './pages/PageNotFound';
 import Login from './pages/Login';
 import ProtectedRoute from './components/ProtectedRoute';
 import Dashboard from './pages/Dashboard';
+import DashboardBenefeciario from './pages/DashboardBenefeciario';
 import DefaultLayout from './layouts/DefaultLayout';
 import Bandi from './pages/Bandi';
 import BandoEdit from './pages/BandoEdit';
@@ -13,21 +14,41 @@ import BandoFormsEdit from './pages/BandoFormsEdit';
 import BandoForms from './pages/BandoForms';
 import BandoFormsPreview from './pages/BandoFormsPreview';
 
-const routes = () => (
+const routes = ({ role }) => {
-    <Routes>
+
-        <Route element={<ProtectedRoute/>}>
+    return (
-            <Route path="/" element={<DefaultLayout><Dashboard/></DefaultLayout>}/>
+        <Routes>
-            <Route path="/bandi" element={<DefaultLayout><Bandi/></DefaultLayout>}/>
+            <Route element={<ProtectedRoute/>}>
-            <Route path="/bandi/:id" element={<DefaultLayout><BandoEdit/></DefaultLayout>}/>
+                <Route path="/" element={<DefaultLayout>
-            <Route path="/bandi/:id/preview" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
+                    {'ROLE_SUPER_ADMIN' === role ? <Dashboard/> : null}
-            <Route path="/bandi/:id/preview-evaluation" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
+                    {'ROLE_BENEFICIARY' === role ? <DashboardBenefeciario/> : null}
-            <Route path="/bandi/:id/forms" element={<DefaultLayout><BandoForms/></DefaultLayout>}/>
+                </DefaultLayout>}/>
-            <Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoFormsEdit/></DefaultLayout>}/>
+                <Route path="/bandi" element={<DefaultLayout>
-            <Route path="/bandi/:id/forms/:formId/preview" element={<DefaultLayout><BandoFormsPreview/></DefaultLayout>}/>
+                    {'ROLE_SUPER_ADMIN' === role ? <Bandi/> : null}
-        </Route>
+                </DefaultLayout>}/>
-        <Route exact path="/login" element={<Login/>}/>
+                <Route path="/bandi/:id" element={<DefaultLayout>
-        {/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoEdit/> : null}
-        <Route path="*" element={<PageNotFound/>}/>
+                </DefaultLayout>}/>
-    </Routes>);
+                <Route path="/bandi/:id/preview" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
+                </DefaultLayout>}/>
+                <Route path="/bandi/:id/preview-evaluation" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
+                </DefaultLayout>}/>
+                <Route path="/bandi/:id/forms" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoForms/> : null}
+                </DefaultLayout>}/>
+                <Route path="/bandi/:id/forms/:formId" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoFormsEdit/> : null}
+                </DefaultLayout>}/>
+                <Route path="/bandi/:id/forms/:formId/preview" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoFormsPreview/> : null}
+                </DefaultLayout>}/>
+            </Route>
+            <Route exact path="/login" element={<Login/>}/>
+            {/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}
+            <Route path="*" element={<PageNotFound/>}/>
+        </Routes>)
+};
 
 export default routes;

src/service/authentication-service.js

@@ -76,4 +76,8 @@ export default class AuthenticationService {
     static changePassword = (request, callback, errCallback) => {
         NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password`, request, callback, errCallback);
     }
+
+    static me = (callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/user/me`, callback, errCallback);
+    };
 }

src/service/bando-service.js

@@ -0,0 +1,34 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class BandoService {
+
+    static getBandi = (callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback);
+    };
+
+    static getBando = (id, callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback);
+    };
+
+    static validateBando = (id, callback, errCallback) => {
+        NetworkService.post(`${API_BASE_URL}/call/validate/${id}`, {}, callback, errCallback);
+    };
+
+    static createBando = (body, callback, errCallback, queryParams) => {
+        NetworkService.post(`${API_BASE_URL}/call/step1`, body, callback, errCallback, queryParams);
+    };
+
+    static updateBandoStep1 = (id, body, callback, errCallback) => {
+        NetworkService.put(`${API_BASE_URL}/call/step1/${id}`, body, callback, errCallback);
+    };
+
+    static updateBandoStep2 = (id, body, callback, errCallback) => {
+        NetworkService.put(`${API_BASE_URL}/call/step2/${id}`, body, callback, errCallback);
+    };
+
+    static updateBandoStatus = (id, callback, errCallback, queryParams) => {
+        NetworkService.put(`${API_BASE_URL}/call/${id}/status`, {}, callback, errCallback, queryParams);
+    };
+}

src/service/file-upload-service.js

@@ -4,8 +4,8 @@ const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
 
 export default class FileUploadService {
 
-    static uploadFile = (body, callback, errCallback, queryParams) => {
+    static uploadFile = (id, body, callback, errCallback, queryParams) => {
-        NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile`, body, callback, errCallback, queryParams);
+        NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile/call/${id}`, body, callback, errCallback, queryParams);
     };
 
     static deleteFile = (body, callback, errCallback, queryParams) => {

src/service/forms-service.js

@@ -0,0 +1,26 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class FormsService {
+
+    static getElementItems = (callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/formField`, callback, errCallback);
+    };
+
+    static getFormsForCall = (id, callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/form/call/${id}`, callback, errCallback);
+    };
+
+    static createFormForCall = (id, body, callback, errCallback) => {
+        NetworkService.post(`${API_BASE_URL}/form/call/${id}`, body, callback, errCallback);
+    };
+
+    static updateForm = (id, body, callback, errCallback) => {
+        NetworkService.put(`${API_BASE_URL}/form/${id}`, body, callback, errCallback);
+    };
+
+    static getFormById = (id, callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/form/${id}`, callback, errCallback);
+    };
+}

src/service/lookupdata-service.js

@@ -0,0 +1,10 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class LookupdataService {
+
+    static getItems = (callback, errCallback, queryParams) => {
+        NetworkService.get(`${API_BASE_URL}/lookUpData/type`, callback, errCallback, queryParams);
+    };
+}

src/store/initial.js

@@ -4,10 +4,8 @@ const initialStore = {
     // user
     userData: {},
     token: '',
-    // bando form
-    bandoFormErrors: {},
     // form builder
-    formId: '',
+    formId: 0,
     formLabel: '',
     formElements: [],
     elementItems: [],

src/store/selectors.js

@@ -2,6 +2,14 @@ const selectors = (state, get, api) => ({
     getToken: () => {
         return get.token();
     },
+    getRole: () => {
+        const userData = get.userData();
+        return userData.role ? userData.role.roleType : '';
+    },
+    getPermissions: () => {
+        const userData = get.userData();
+        return userData.role ? userData.role.permissions : [];
+    },
 })
 
 export default selectors;

src/store/zustand-x-opts.js

@@ -5,7 +5,7 @@ const zustandXOpts = {
     persist: {
         enabled: true,
         partialize: (state) => ({
-            userData: state.userData,
+            //userData: state.userData,
             token: state.token
         }),
     }