- added login page;

- added file upload;
- added faq item edit modal;

.env

@@ -1,3 +1,3 @@
 REACT_APP_TAB_TITLE=Gepafin
-REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
+REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1
 REACT_APP_LOGO_FILENAME=logo.svg

environments/dev/dev.env

@@ -1,3 +1,3 @@
 REACT_APP_TAB_TITLE=Gepafin
-REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
+REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1
 REACT_APP_LOGO_FILENAME=logo.svg

package-lock.json

@@ -15,6 +15,7 @@
         "@wordpress/i18n": "^5.5.0",
         "@wordpress/react-i18n": "^4.5.0",
         "dompurify": "3.1.6",
+        "fast-deep-equal": "^3.1.3",
         "html-react-parser": "5.1.12",
         "jwt-decode": "4.0.0",
         "klona": "2.0.6",

package.json

@@ -10,6 +10,7 @@
     "@wordpress/i18n": "^5.5.0",
     "@wordpress/react-i18n": "^4.5.0",
     "dompurify": "3.1.6",
+    "fast-deep-equal": "^3.1.3",
     "html-react-parser": "5.1.12",
     "jwt-decode": "4.0.0",
     "klona": "2.0.6",

src/assets/scss/components/appForm.scss

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   gap: 14px;
+  padding: 5px 0;
 
   label {
     font-size: 14px;
@@ -40,14 +41,32 @@
     }
   }
 }
+
+.appForm__fileUploadItem {
+  display: flex;
+  justify-content: space-between;
+}
+
+.appForm__fileUploadItemName {
+
+}
+
+.appForm__row {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+}
+
 .appForm__oneCol {
   display: flex;
   flex-direction: column;
+  gap: 7px;
 
   label {
     font-weight: 400;
   }
 }
+
 .appForm__twoCols {
   display: flex;
   gap: 1rem;
@@ -99,4 +118,12 @@
 .appForm__faqTabItem {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
+
+  .p-togglebutton[data-p-highlight="true"] {
+    .p-button:not(.p-button-danger) {
+      background: var(--menuitem-active-background);
+      border: 1px solid var(--menuitem-active-background);
+    }
+  }
 }

src/assets/scss/components/appPage.scss

@@ -1,6 +1,7 @@
 .appPage {
     display: flex;
     flex-direction: column;
+    flex-grow: 2;
 
     h1 {
         color: var(--primary-color);
@@ -26,6 +27,10 @@
     }
 }
 
+.appPageSection__table {
+    width: 100%;
+}
+
 .appTableHeader {
     display: flex;
     justify-content: space-between;
@@ -65,12 +70,5 @@
 .appPageSection__actions {
     display: flex;
     gap: 24px;
-    margin-bottom: 24px;
+    padding: 24px 0 48px;
-}
-
-.mb-2 {
-    margin-bottom: 4px;
-}
-.mb-8 {
-    margin-bottom: 16px;
 }

src/assets/scss/components/formBuilder.scss

@@ -32,6 +32,9 @@
 
 .formBuilder__element {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
   padding: 10px 20px;
   border: 1px dashed var(--button-secondary-borderColor);
   font-size: 14px;
@@ -61,8 +64,8 @@
   list-style: none;
   padding: 0;
   margin: 0;
-
+}
-  li {
+.formBuilder__elementItem {
   display: flex;
   padding: 10px 20px;
   border: 1px dashed var(--button-secondary-borderColor);
@@ -70,5 +73,12 @@
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
+
+  &:hover {
+    cursor: grab;
   }
 }
+
+.formBuilder__elementSettings {
+  width: 40rem;
+}

src/assets/scss/components/layout.scss

@@ -0,0 +1,89 @@
+html {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  font-family: 'Montserrat';
+
+  p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
+    font-family: 'Montserrat';
+    color: var(--global-textColor);
+  }
+}
+
+#root, .wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.inner {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-grow: 1;
+
+  > aside {
+    flex: 0 0 320px;
+    border-right: 1px solid var(--menu-borderColor);
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li a, li button {
+        display: flex;
+        padding: 10.5px 17.5px;
+        align-items: center;
+        gap: 7px;
+        width: 100%;
+        border: 0;
+        border-bottom: 1px solid var(--menu-borderColor);
+        color: var(--menuitem-color);
+        background-color: transparent;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 100%;
+        text-decoration: none;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        i {
+          color: var(--text-color-secondary);
+        }
+
+        &.active {
+          color: var(--menuitem-active-color);
+          background-color: var(--menuitem-active-background);
+
+          i {
+            color: white;
+          }
+
+          span {
+            color: var(--menuitem-active-color);
+          }
+        }
+      }
+    }
+  }
+
+  > main {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 0 24px 50px;
+  }
+}

src/assets/scss/components/login.scss

@@ -0,0 +1,14 @@
+.appPageLogin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.appPageLogin__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 540px;
+  padding: 24px;
+}

src/assets/scss/components/misc.scss

@@ -0,0 +1,59 @@
+.p-steps {
+  .p-highlight {
+    span.p-steps-number {
+      color: var(--menuitem-active-color);
+    }
+  }
+}
+.p-badge {
+  color: var(--menuitem-active-color);
+}
+.p-button:not(.p-button-outlined, .p-button-secondary),
+.p-button:not(.p-button-outlined, .p-button-secondary) span {
+  color: var(--menuitem-active-color);
+}
+.p-fileupload-row {
+  .p-button-danger {
+    background-color: #f44336;
+    opacity: 0.8;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+.p-tag {
+  .p-tag-value {
+    color: var(--menuitem-active-color);
+  }
+}
+
+.p-paginator-page {
+  color: var(--menuitem-active-color);
+}
+
+.p-datepicker-buttonbar .p-button {
+  color: var(--global-textColor);
+}
+
+.p-message.p-message-error {
+  background: #ffdbdb;
+  border-left: 5px solid #C2504D;
+
+  svg {
+    path {
+      fill: var(--global-textColor);
+    }
+  }
+}
+
+
+
+.mb-2 {
+  margin-bottom: 4px;
+}
+.mb-8 {
+  margin-bottom: 16px;
+}
+.mr-8 {
+  margin-right: 16px;
+}

src/assets/scss/components/statsBigBadges.scss

@@ -5,6 +5,7 @@
     align-items: center;
     grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
     gap: 24px;
+    width: 100%;
 }
 
 .statsBigBadges__gridItem {

src/assets/scss/theme.scss

@@ -12,6 +12,7 @@
   --card-borderColor-color: #EEC137;
   --button-secondary-borderColor: #C79807;
   --button-secondary-background: var(--menu-borderColor);
+  --global-textColor: #4B5563;
 
   --card-full-background-color-2: #EEC137;
   --card-full-background-color-3: #FA8E42;
@@ -19,91 +20,7 @@
   --card-full-background-color-1: #3B7C43;
 }
 
-html {
+@import "./components/layout.scss";
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-body {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  margin: 0;
-  font-family: 'Montserrat';
-
-  p, span, input, label, textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
-    font-family: 'Montserrat';
-  }
-}
-
-#root, .wrapper {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-.inner {
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  flex-grow: 1;
-
-  > aside {
-    flex: 0 0 320px;
-    border-right: 1px solid var(--menu-borderColor);
-
-    ul {
-      display: flex;
-      flex-direction: column;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li a, li button {
-        display: flex;
-        padding: 10.5px 17.5px;
-        align-items: center;
-        gap: 7px;
-        width: 100%;
-        border: 0;
-        border-bottom: 1px solid var(--menu-borderColor);
-        color: var(--menuitem-color);
-        background-color: transparent;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 100%;
-        text-decoration: none;
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        i {
-          color: var(--text-color-secondary);
-        }
-
-        &.active {
-          color: var(--menuitem-active-color);
-          background-color: var(--menuitem-active-background);
-
-          i {
-            color: white;
-          }
-        }
-      }
-    }
-  }
-
-  > main {
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    padding: 0 24px 50px;
-  }
-}
-
 @import "./components/topBar.scss";
 @import "./components/appPage.scss";
 @import "./components/statsBigBadges.scss";
@@ -111,3 +28,5 @@ body {
 @import "./components/appForm.scss";
 @import "./components/pageBando.scss";
 @import "./components/formBuilder.scss";
+@import "./components/misc.scss";
+@import "./components/login.scss";

src/components/FormField/components/Datepicker/index.js

@@ -9,7 +9,7 @@ const Datepicker = ({
                         label,
                         control,
                         errors,
-                        defaultValue,
+                        defaultValue = [],
                         config = {},
                         infoText = null,
                         minDate = null,
@@ -27,7 +27,7 @@ const Datepicker = ({
                     rules={config}
                     render={({ field, fieldState }) => (
                         <Calendar id={field.name}
-                                  value={field.value}
+                                  value={field.value ?? []}
                                   onChange={(e) => field.onChange(e.value)}
                                   dateFormat="dd/mm/yy"
                                   mask="99/99/9999"

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

@@ -11,13 +11,15 @@ const DatepickerRange = ({
                         label,
                         control,
                         errors,
-                        defaultValue,
+                        defaultValue = [],
                         config = {},
                         infoText = null,
                         minDate = null,
                         maxDate = null
                     }) => {
-    const datesDefaultValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue.length ? defaultValue.map(v => new Date(v)) : [];
+    const datesDefaultValue = !isNil(defaultValue) && defaultValue.length
+        ? defaultValue.map(v => new Date(v))
+        : [];
     return (
         <>
             <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
@@ -31,12 +33,8 @@ const DatepickerRange = ({
                     render={({ field, fieldState }) => (
                         <Calendar id={field.name}
                                   value={field.value}
-                                  onChange={(e) => {
+                                  onChange={field.onChange}
-                                      const formattedValues = e.value.map(d => d ? d.toISOString() : d);
+
-                                        console.log('formattedValues', formattedValues);
-                                      field.onChange(formattedValues)
-                                  }}
-                                  dateFormat="dd/mm/yy"
                                   mask="99/99/9999"
                                   showIcon
                                   minDate={minDate}
@@ -44,6 +42,7 @@ const DatepickerRange = ({
                                   selectionMode="range"
                                   readOnlyInput
                                   hideOnRangeSelection
+                                  showButtonBar
                                   className={classNames({ 'p-invalid': fieldState.invalid })}/>
                     )}/>
             {infoText ? <small>{infoText}</small> : null}

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

@@ -1,38 +1,121 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { classNames } from 'primereact/utils';
-import { Controller } from 'react-hook-form';
 import { __ } from '@wordpress/i18n';
+
+import FileUploadService from '../../../../service/file-upload-service';
+
 import { FileUpload } from 'primereact/fileupload';
+import { Tag } from 'primereact/tag';
+import { Button } from 'primereact/button';
 
 const Fileupload = ({
                         fieldName,
+                        setDataFn,
                         label,
-                        control,
                         errors,
-                        defaultValue,
+                        register,
+                        defaultValue = [],
                         config = {},
                         infoText = null,
                         accept = 'image/*',
-                        api = '/api/upload',
+                        doctype = 'images',
                         emptyText = __('Trascina qui il tuo file', 'gepafin'),
                         chooseLabel = __('Aggiungi immagine', 'gepafin'),
                         multiple = false
                     }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const inputRef = useRef();
+
+    const customBase64Uploader = (event) => {
+        const formData = new FormData()
+        for (const file of event.files) {
+            formData.append('file', file)
+        }
+        /*for (const pair of formData.entries()) {
+            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();
+            inputRef.current.setUploadedFiles(files);
+            inputRef.current.setFiles([]);
+        }
+    }
+
+    const errorCallback = (err) => {
+        console.log('err', err);
+    }
+
+    const itemTemplate = (file) => {
+        return (
+            <div className="appForm__fileUploadItem">
+                <span className="appForm__fileUploadItemName">
+                    {file.name}
+                </span>
+                {file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
+                {!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
+                <Button icon="pi pi-times" severity="danger"
+                        aria-label={__('Anulla', 'gepafin')}
+                        onClick={() => onTemplateRemove(file)}/>
+            </div>
+        );
+    };
+
+    const onTemplateRemove = (file) => {
+        if (file.id) {
+            FileUploadService.deleteFile(
+                {},
+                (data) => dCallback(data, file.id),
+                dErrorCallback,
+                [['id', file.id]]
+            );
+        } else {
+            const files = inputRef.current.getFiles()
+            const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
+            inputRef.current.setFiles(newFiles);
+        }
+    }
+
+    const dCallback = (data, id) => {
+        if (data.status === 'SUCCESS') {
+            setStateFieldData(prevState => {
+                const newFiles = prevState.filter(o => o.id !== id);
+                inputRef.current.setUploadedFiles(newFiles);
+                console.log('newFiles', newFiles);
+                return newFiles;
+            });
+        }
+    }
+
+    const dErrorCallback = (err) => {
+        console.log('err', err);
+    }
+
+    useEffect(() => {
+        setStateFieldData(defaultValue);
+        register(fieldName, config)
+    }, []);
+
+    useEffect(() => {
+        inputRef.current.setUploadedFiles(stateFieldData);
+        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
+    }, [stateFieldData])
+
     return (
         <>
             <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                 {label}{config.required ? '*' : null}
             </label>
-            <Controller
-                name={fieldName}
-                control={control}
-                defaultValue={defaultValue}
-                rules={config}
-                render={({ field, fieldState }) => (
             <FileUpload
-                        id={field.name}
+                ref={inputRef}
-                        name={`${field.name}[]`}
+                id={fieldName}
-                        url={api}
+                name={fieldName}
+                url={'/document/uploadFile'}
                 multiple={multiple}
                 accept={accept}
                 maxFileSize={1000000}
@@ -40,11 +123,11 @@ const Fileupload = ({
                 chooseLabel={chooseLabel}
                 cancelLabel={__('Cancella', 'gepafin')}
                 uploadLabel={__('Carica', 'gepafin')}
-                        className={classNames({ 'p-invalid': fieldState.invalid })}/>
+                className={classNames({ 'p-invalid': errors[fieldName] })}
-                )}/>
+                itemTemplate={itemTemplate}
+                customUpload
+                uploadHandler={customBase64Uploader}/>
             {infoText ? <small>{infoText}</small> : null}
-            {defaultValue ? <p>Uploaded:</p> : null}
-            {defaultValue}
         </>)
 }
 

src/components/FormField/components/Switch/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { classNames } from 'primereact/utils';
+import { Controller } from 'react-hook-form';
+import { isNil, isEmpty } from 'ramda';
+
+// components
+import { InputSwitch } from 'primereact/inputswitch';
+
+const Switch = ({
+                    fieldName,
+                    label,
+                    control,
+                    errors,
+                    defaultValue,
+                    config = {},
+                    infoText = null,
+                    onLabel = '',
+                    offLabel = ''
+                }) => {
+    const properValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue !== false;
+
+    const input = <Controller
+        name={fieldName}
+        control={control}
+        defaultValue={properValue}
+        rules={config}
+        render={({ field, fieldState }) => (
+            <InputSwitch
+                checked={field.value}
+                onChange={(e) => field.onChange(e.value)}
+                className={classNames({ 'p-invalid': fieldState.invalid })}/>
+        )}/>
+    return (
+        <>
+            <div className="appForm__row">
+                <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] }, 'mr-8')}>
+                    {label}{config.required ? '*' : null}
+                </label>
+                <div className="appForm__row">
+                    {offLabel ? <span>{offLabel}</span> : null}
+                    {input}
+                    {onLabel ? <span>{onLabel}</span> : null}
+                </div>
+            </div>
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default Switch;

src/components/FormField/components/TextInput/index.js

@@ -12,7 +12,9 @@ const TextInput = ({
                        config = {},
                        infoText = null,
                        inputgroup = false,
-                       icon = null
+                       icon = null,
+                       placeholder = '',
+                       inputtype = 'text'
                    }) => {
     const input = <Controller
         name={fieldName}
@@ -22,6 +24,8 @@ const TextInput = ({
         render={({ field, fieldState }) => (
             <InputText id={field.name}
                        {...field}
+                       type={inputtype}
+                       placeholder={placeholder}
                        className={classNames({ 'p-invalid': fieldState.invalid })}/>
         )}/>
     return (

src/components/FormField/index.js

@@ -9,6 +9,7 @@ import Datepicker from './components/Datepicker';
 import DatepickerRange from './components/DatepickerRange';
 import Fileupload from './components/Fileupload';
 import NumberInput from './components/NumberInput';
+import Switch from './components/Switch';
 
 const FormField = (props) => {
     const fields = {
@@ -17,7 +18,8 @@ const FormField = (props) => {
         datepicker: Datepicker,
         datepickerrange: DatepickerRange,
         fileupload: Fileupload,
-        numberinput: NumberInput
+        numberinput: NumberInput,
+        switch: Switch
     }
     const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;
 

src/components/FormFieldRepeater/index.js

@@ -1,6 +1,9 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
+import { isEmpty } from 'ramda';
+
+// components
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { Menu } from 'primereact/menu';
@@ -14,7 +17,8 @@ const FormFieldRepeater = ({
                                errors,
                                register,
                                label,
-                               infoText
+                               infoText,
+                               config = {}
                            }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
@@ -76,13 +80,13 @@ const FormFieldRepeater = ({
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({...o, status: o.id ? 'existing' : 'new'}))
+        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
         setStateFieldData(newData);
-        register(fieldName)
+        register(fieldName, config);
     }, [])
 
     useEffect(() => {
-        setDataFn(fieldName, [...stateFieldData]);
+        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
     }, [stateFieldData])
 
     return (

src/components/FormFieldRepeaterCriteria/index.js

@@ -18,7 +18,8 @@ const FormFieldRepeaterCriteria = ({
                                        errors,
                                        register,
                                        label,
-                                       infoText
+                                       infoText,
+                                       config = {}
                                    }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
@@ -72,6 +73,7 @@ const FormFieldRepeaterCriteria = ({
 
     const onThresholdChange = (value) => {
         setThreshold(value);
+        setDataFn('threshold', value, { shouldValidate: true });
     }
 
     const properField = (item, i) => {
@@ -92,16 +94,19 @@ const FormFieldRepeaterCriteria = ({
         const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
         setStateFieldData(newData);
         setThreshold(data['threshold'])
-        register(fieldName)
+        register(fieldName, config)
+        register('threshold', {
+            required: __('È obbligatorio', 'gepafin')
+        })
     }, [])
 
     useEffect(() => {
-        setDataFn(fieldName, [...stateFieldData]);
+        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
     }, [stateFieldData])
 
     return (
         <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
-            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] || errors['threshold'] })}>
                 {label}
             </label>
             <div className="appForm__oneCol">

src/components/FormFieldRepeaterFaq/index.js

@@ -1,11 +1,16 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { InputText } from 'primereact/inputtext';
+import { isEmpty } from 'ramda';
+
+// components
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 import { Accordion, AccordionTab } from 'primereact/accordion';
 import { ToggleButton } from 'primereact/togglebutton';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
 
 const FormFieldRepeaterFaq = ({
                                   data,
@@ -15,17 +20,24 @@ const FormFieldRepeaterFaq = ({
                                   errors,
                                   register,
                                   label,
-                                  infoText
+                                  config = {},
+                                  setError,
+                                  clearErrors
                               }) => {
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [question, setQuestion] = useState('');
+    const [answer, setAnswer] = useState('');
+    const [editDataIndex, setEditDataIndex] = useState(null);
+    const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
 
     const removeItem = (index) => {
         const newData = stateFieldData.toSpliced(index, 1);
         setStateFieldData(newData);
     }
 
-    const selectItem = () => {
+    const selectItem = (e) => {
-        setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
+        const chosen = {...e.value};
+        setStateFieldData([...stateFieldData, chosen]);
     }
 
     const onInputChange = (e, index) => {
@@ -40,7 +52,8 @@ const FormFieldRepeaterFaq = ({
     }
 
     const addNewItem = () => {
-
+        const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
+        setStateFieldData([...stateFieldData, newItem]);
     }
 
     const setChecked = (e, index) => {
@@ -56,7 +69,53 @@ const FormFieldRepeaterFaq = ({
 
     const editItem = (e, index) => {
         e.stopPropagation();
-        console.log('editItem')
+        setQuestion(stateFieldData[index].question);
+        setAnswer(stateFieldData[index].answer);
+        setEditDataIndex(index);
+        setIsVisibleEditDialog(true);
+    }
+
+    const hideEditDialog = () => {
+        setIsVisibleEditDialog(false);
+        setQuestion('');
+        setAnswer('');
+        setEditDataIndex(null);
+    }
+
+    const onChangeEditItem = (value, key) => {
+        if (key === 'question') {
+            setQuestion(value);
+        } else {
+            setAnswer(value)
+        }
+    }
+
+    const saveEditDialog = () => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === editDataIndex) {
+                o.question = question;
+                o.answer = answer;
+                return o
+            } else {
+                return o;
+            }
+        });
+        setStateFieldData(newData);
+        setIsVisibleEditDialog(false);
+        setQuestion('');
+        setAnswer('');
+        setEditDataIndex(null);
+    }
+
+    const headerEditDialog = () => {
+        return <span>{__('Aggiungi/modifica FAQ', 'gepafin')}</span>
+    }
+
+    const footerEditDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
+            <Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
+        </div>
     }
 
     const usedExistingValues = stateFieldData
@@ -67,11 +126,11 @@ const FormFieldRepeaterFaq = ({
         const storeFieldData = data[fieldName] ?? [];
         const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
         setStateFieldData(newData);
-        register(fieldName)
+        register(fieldName, config)
     }, [])
 
     useEffect(() => {
-        setDataFn(fieldName, [...stateFieldData]);
+        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
     }, [stateFieldData])
 
     return (
@@ -102,7 +161,8 @@ const FormFieldRepeaterFaq = ({
                                                                     </div>
                                                                     <div className="appForm__faqTabItem">
                                                                         <Button icon="pi pi-pencil" severity="success"
-                                                                                aria-label="Edit" onClick={(e) => editItem(e, i)}/>
+                                                                                aria-label="Edit"
+                                                                                onClick={(e) => editItem(e, i)}/>
                                                                         <Button icon="pi pi-times" severity="danger"
                                                                                 aria-label="Cancel"
                                                                                 onClick={() => removeItem(i)}/>
@@ -115,6 +175,21 @@ const FormFieldRepeaterFaq = ({
                     </p>
                 </AccordionTab>)}
             </Accordion>
+            <Dialog
+                visible={isVisibleEditDialog}
+                modal header={headerEditDialog}
+                footer={footerEditDialog}
+                style={{ maxWidth: '50rem' }}
+                onHide={hideEditDialog}>
+                <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} />
+                </div>
+            </Dialog>
         </div>
     )
 }

src/components/ProtectedRoute/index.js

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

src/components/TopBarProfileMenu/index.js

@@ -1,13 +1,14 @@
 import React, { useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 
+// store
+import { storeSet } from '../../store';
+
 // components
 import { Menu } from 'primereact/menu';
 import { Avatar } from 'primereact/avatar';
-import { Toast } from 'primereact/toast';
 
 const TopBarProfileMenu = ({ menuLeftRef }) => {
-    const toast = useRef();
 
     let items = [
         {
@@ -36,13 +37,12 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
             label: __('Logout', 'gepafin'),
             icon: 'pi pi-sign-out',
             command: () => {
-                console.log('logout')
+                storeSet.main.doLogout();
             }
         }
     ];
 
     return <>
-        <Toast ref={toast}/>
         <Menu model={items} popup ref={menuLeftRef} id="topBar_profileMenu" className="topBar__menuProfile"/>
     </>
 }

src/components/UnsavedChangesDetector/index.js

@@ -0,0 +1,34 @@
+import { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import equal from 'fast-deep-equal';
+
+// tools
+
+const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
+    const [initial] = useState(initialData);
+
+    const warnIfUnsavedChanges = useCallback((event) => {
+        const updatedData = getValuesFn()
+        const isEqual = equal(initial, updatedData);
+
+        if (!isEqual) {
+            event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');
+        }
+
+        return event.returnValue;
+    }, [initial])
+
+    useEffect(() => {
+        window.addEventListener('beforeunload', (e) => {
+            warnIfUnsavedChanges(e);
+        });
+
+        return () => {
+            window.removeEventListener('beforeunload', (e) => {
+                warnIfUnsavedChanges(e);
+            });
+        }
+    }, []);
+}
+
+export default UnsavedChangesDetector;

src/helpers/uniqid.js

@@ -0,0 +1,8 @@
+/**
+ * Generate unique id
+ *
+ * @returns {string}
+ */
+const uniqid = (l = 'a') => l + Math.random().toString(16).substring(2, 11);
+
+export default uniqid;

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

@@ -148,7 +148,7 @@ const AllBandiTable = () => {
     const header = renderHeader();
 
     return(
-        <div className="latestBandiTable">
+        <div className="appPageSection__table">
             <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
                        filters={filters}
                        globalFilterFields={['name', 'status']}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { Button } from 'primereact/button';
+
+const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
+    return (
+        <div className="appPageSection">
+            <div className="appPageSection__actions">
+                <Button
+                    type="submit"
+                    label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
+                <Button
+                    type="button"
+                    disabled={true}
+                    outlined
+                    onClick={openPreview}
+                    label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
+                <Button
+                    type="button"
+                    disabled={true}
+                    outlined
+                    onClick={openPreviewEvaluation}
+                    label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
+                    iconPos="right"/>
+            </div>
+        </div>
+    )
+}
+
+export default BandoEditFormActions;

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

@@ -0,0 +1,209 @@
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { isEmpty, isNil, is } from 'ramda';
+
+// components
+import FormField from '../../../../components/FormField';
+import FormFieldRepeater from '../../../../components/FormFieldRepeater';
+import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
+import BandoEditFormActions from '../BandoEditFormActions';
+import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
+
+const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
+    const navigate = useNavigate();
+    const {
+        control,
+        handleSubmit,
+        formState: { errors, isValid },
+        setValue,
+        register,
+        trigger,
+        getValues,
+        clearErrors
+    } = useForm({defaultValues: initialData, mode: 'onChange'});
+    const values = getValues();
+    let minDateStart = new Date();
+
+    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);
+    };
+
+    // TODO temp data
+    const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
+    const exampleOfFaqOptions = [
+        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor', visible: true }
+    ];
+    // end of temp data
+
+    const openPreview = () => {
+        navigate('/bandi/preview/11');
+    }
+
+    const openPreviewEvaluation = () => {
+        navigate('/bandi/preview-evaluation/11');
+    }
+
+    useImperativeHandle(
+        ref,
+        () => {
+            return {
+                isFormValid: () => {
+                    return isValid;
+                },
+                getErrors: () => {
+                    return errors;
+                }
+            }
+        }, [errors, isValid]);
+
+    useEffect(() => {
+        trigger().then(() => clearErrors());
+    }, []);
+
+    return (
+        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+            <UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
+            <FormField
+                type="switch"
+                fieldName="confidi"
+                label={__('Bando Confidi', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['confidi']}
+                onLabel={__('Si', 'gepafin')}
+                offLabel={__('No', 'gepafin')}
+            />
+
+            <FormField
+                type="textinput"
+                fieldName="name"
+                label={__('Titolo del Bando', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['name']}
+                config={{ required: __('È obbligatorio', 'gepafin') }}
+            />
+
+            <FormField
+                type="textarea"
+                fieldName="descriptionShort"
+                label={__('Descrizione breve', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['descriptionShort']}
+                config={{
+                    required: __('È obbligatorio', 'gepafin')
+                }}
+            />
+
+            <FormField
+                type="textarea"
+                fieldName="descriptionLong"
+                label={__('Descrizione completa', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['descriptionLong']}
+                config={{
+                    required: __('È obbligatorio', 'gepafin'),
+                    minLength: 200
+                }}
+                infoText={__('Almeno 200 caratteri', 'gepafin')}
+            />
+
+            <FormFieldRepeater
+                data={values}
+                setDataFn={setValue}
+                fieldName="aimedTo"
+                options={exampleOfAimedToOptions}
+                errors={errors}
+                register={register}
+                trigger={trigger}
+                config={{
+                    validate: {
+                        minOneItem: v => !isEmpty(v) || __('Almeno 1 tipo di destinatari', 'gepafin'),
+                        noEmptyValue: v => v
+                            .filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
+                    }
+                }}
+                label={<>{__('A chi si rivolge', 'gepafin')}*
+                    <span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
+            />
+
+            <FormField
+                type="textarea"
+                fieldName="documentationRequested"
+                label={__('Documentazione richiesta', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['documentationRequested']}
+                config={{
+                    required: __('È obbligatorio', 'gepafin')
+                }}
+            />
+
+            <FormField
+                type="datepickerrange"
+                fieldName="dates"
+                label={__('Dati di pubblicazione', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['dates']}
+                config={{ required: __('È obbligatorio', 'gepafin') }}
+                minDate={minDateStart}
+            />
+
+            <div className="appForm__twoCols">
+                <FormField
+                    type="numberinput"
+                    fieldName="amount"
+                    label={__('Dotazione del Bando', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['amount']}
+                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                    inputgroup={true}
+                    icon="€"
+                />
+
+                <FormField
+                    type="numberinput"
+                    fieldName="amountMax"
+                    label={__('Importo massimo per Progetto', 'gepafin')}
+                    control={control}
+                    errors={errors}
+                    defaultValue={values['amountMax']}
+                    config={{ required: __('È obbligatorio', 'gepafin') }}
+                    inputgroup={true}
+                    icon="€"
+                />
+            </div>
+
+            <FormFieldRepeaterFaq
+                data={values}
+                setDataFn={setValue}
+                fieldName="faq"
+                options={exampleOfFaqOptions}
+                errors={errors}
+                register={register}
+                trigger={trigger}
+                config={{
+                    validate: {
+                        noEmptyValue: v => v
+                            .filter(o => isEmpty(o.question) || isEmpty(o.answer)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
+                    }
+                }}
+                label={__('FAQ', 'gepafin')}/>
+
+            <BandoEditFormActions
+                openPreview={openPreview}
+                openPreviewEvaluation={openPreviewEvaluation}/>
+        </form>
+    )
+})
+
+export default BandoEditFormStep1;

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

@@ -0,0 +1,146 @@
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { is, isEmpty, isNil } from 'ramda';
+
+// components
+import FormField from '../../../../components/FormField';
+import FormFieldRepeater from '../../../../components/FormFieldRepeater';
+import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
+import BandoEditFormActions from '../BandoEditFormActions';
+import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
+
+const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
+    const navigate = useNavigate();
+    const {
+        control,
+        handleSubmit,
+        formState: { errors, isValid },
+        setValue,
+        register,
+        trigger,
+        getValues,
+        clearErrors
+    } = useForm({defaultValues: initialData, mode: 'onChange'});
+    const values = getValues();
+
+    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);
+    };
+
+    // TODO temp data
+    const exampleOfCriteriaOptions = [
+        { id: 15, value: 'Innovatività del progetto', score: 9 },
+        { id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
+        { id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
+    ];
+    const exampleOfChecklistOptions = [
+        { id: 15, value: 'Innovatività del progetto' }
+    ];
+    // end of temp data
+
+    const openPreview = () => {
+        navigate('/bandi/preview/11');
+    }
+
+    const openPreviewEvaluation = () => {
+        navigate('/bandi/preview-evaluation/11');
+    }
+
+    useImperativeHandle(
+        ref,
+        () => {
+            return {
+                isFormValid: () => {
+                    return isValid;
+                },
+                getErrors: () => {
+                    return errors;
+                }
+            }
+        }, []);
+
+    useEffect(() => {
+        trigger().then(() => clearErrors());
+    }, []);
+
+    return (
+        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+            <UnsavedChangesDetector initialData={initialData} getValuesFn={getValues}/>
+            <FormFieldRepeaterCriteria
+                data={values}
+                setDataFn={setValue}
+                fieldName="criteria"
+                options={exampleOfCriteriaOptions}
+                errors={errors}
+                register={register}
+                label={<>{__('Criteri di valutazione', 'gepafin')}*
+                    <span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}
+                config={{
+                    validate: {
+                        minOneItem: v => !isEmpty(v) || __('Almeno 1 criterio di valutazione', 'gepafin'),
+                        noEmptyValue: v => v
+                            .filter(o => isEmpty(o.value) || isEmpty(o.score)).length === 0
+                            || __('Non lasciare il valore vuoto', 'gepafin')
+                    }
+                }}/>
+
+            <FormField
+                type="fileupload"
+                setDataFn={setValue}
+                fieldName="documentation"
+                label={__('Documentazione', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['documentation']}
+                config={{ required: __('È obbligatorio', 'gepafin') }}
+                accept="application/pdf,application/vnd.ms-excel"
+                chooseLabel={__('Aggiungi documento', 'gepafin')}
+                multiple={true}
+                doctype='document'
+                register={register}
+            />
+
+            <FormField
+                type="fileupload"
+                setDataFn={setValue}
+                fieldName="images"
+                label={__('Immagine del Bando', 'gepafin')}
+                control={control}
+                errors={errors}
+                defaultValue={values['images']}
+                doctype='images'
+                register={register}
+            />
+
+            <FormFieldRepeater
+                data={values}
+                setDataFn={setValue}
+                fieldName="checklist"
+                options={exampleOfChecklistOptions}
+                errors={errors}
+                register={register}
+                label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
+                    <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
+                config={{
+                    validate: {
+                        minOneItem: v => !isEmpty(v) || __('Almeno 1 elemento', 'gepafin'),
+                        noEmptyValue: v => v
+                            .filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
+                    }
+                }}
+            />
+
+            <button type="button" onClick={() => console.log(getValues())}>Check</button>
+            <BandoEditFormActions
+                openPreview={openPreview}
+                openPreviewEvaluation={openPreviewEvaluation}/>
+        </form>
+    )
+})
+
+export default BandoEditFormStep2;

src/pages/BandoEdit/index.js

@@ -1,57 +1,71 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
 
 // components
 import getBandoLabel from '../../helpers/getBandoLabel';
 import { Button } from 'primereact/button';
-import { Dropdown } from 'primereact/dropdown';
-import FormField from '../../components/FormField';
-import FormFieldRepeater from '../../components/FormFieldRepeater';
 import { Skeleton } from 'primereact/skeleton';
-import FormFieldRepeaterCriteria from '../../components/FormFieldRepeaterCriteria';
+import { Steps } from 'primereact/steps';
-import FormFieldRepeaterFaq from '../../components/FormFieldRepeaterFaq';
+import BandoEditFormStep1 from './components/BandoEditFormStep1';
+import BandoEditFormStep2 from './components/BandoEditFormStep2';
+import { Messages } from 'primereact/messages';
+import { is, isNil } from 'ramda';
 
 const BandoEdit = () => {
     const navigate = useNavigate();
     const { id } = useParams();
+    const [activeStep, setActiveStep] = useState(0)
     const [data, setData] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
     const [templates, setTemplate] = useState(null);
-    const {
+    const formRef = useRef(null);
-        control,
+    const stepErrorMsgs = useRef(null);
-        reset,
-        handleSubmit,
-        formState: { errors },
-        setValue,
-        register
-    } = useForm(data);
-    let minDateStart = new Date();
 
-    const onSubmit = formData => console.log(formData);
+    const stepItems = [
-
+        {
-    // temp
+            label: __('Testi', 'gepafin'),
-    const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
+            command: () => {
-    const exampleOfCriteriaOptions = [
+                if (activeStep === 0) {
-        { id: 15, value: 'Innovatività del progetto', score: 9 },
+                    return false
-        { id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
-        { id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
-    ];
-    const exampleOfFaqOptions = [
-        { id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
-    ];
-    const exampleOfChecklistOptions = [
-        { id: 15, value: 'Innovatività del progetto' }
-    ];
-
-    const openPreview = () => {
-        navigate('/bandi/preview/11');
                 }
+                stepErrorMsgs.current.clear();
+                if (formRef.current.isFormValid()) {
+                    goToStep(0)
+                } else {
+                    stepErrorMsgs.current.show([
+                        { sticky: true, severity: 'error', summary: 'Error',
+                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
+                            closable: true }
+                    ]);
+                }
+            }
+        },
+        {
+            label: __('Gestione', 'gepafin'),
+            command: () => {
+                if (activeStep === 1) {
+                    return false
+                }
+                stepErrorMsgs.current.clear();
+                const isFormValid = formRef.current.isFormValid();
+                console.log('before go to step 1:', isFormValid)
+                if (isFormValid) {
+                    goToStep(1);
+                } else {
+                    stepErrorMsgs.current.show([
+                        { sticky: true, severity: 'error', summary: 'Error',
+                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
+                            closable: true }
+                    ]);
+                }
+            }
+        }
+    ];
 
-    const openPreviewEvaluation = () => {
+    const goToStep = (step) => {
-        navigate('/bandi/preview-evaluation/11');
+        setActiveStep(step);
     }
 
     const openBandoFormManagement = () => {
@@ -62,23 +76,63 @@ const BandoEdit = () => {
         const parsed = parseInt(id)
         const bandoId = !isNaN(parsed) ? parsed : 0;
 
-        setTimeout(() => {
         const data = 0 === bandoId
             ? {
                 status: 'draft',
                 name: ''
             }
             : {
-                    name: 'Bando Innovazione 2024',
+                "name": "Innovazione digitale 2024",
-                    description: '',
+                "confidi": false,
-                    start_date: '2024-08-08T00:00:00+00:00',
+                "descriptionShort": "Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.",
-                    end_date: '2024-08-30T00:00:00+00:00',
+                "descriptionLong": "Il bando \"Innovazione Digitale 2024\" mira a sostenere le PMI nell'adozione di tecnologie digitali innovative. I progetti finanziabili includono l'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.",
-                    submissions: 24,
+                "documentationRequested": "Documentazione richiesta*",
-                    status: 'publish',
+                "dates": [
+                    "2024-08-27T22:00:00.000Z",
+                    "2024-10-29T23:00:00.000Z"
+                ],
+                "amount": 0,
+                "amountMax": 0,
+                "aimedTo": [
+                    {
+                        "id": 3,
+                        "value": "PMI con sede in Umbria",
+                        "status": "existing"
+                    }
+                ],
+                "faq": [
+                    {
+                        "id": 2,
+                        "question": "Question 1?",
+                        "answer": "Lorem ipsum dolor",
+                        "visible": true,
+                        "status": "existing"
+                    }
+                ],
+                "documentation": [
+                    /*{
+                        createdDate: "2024-08-23T12:40:47.700350791",
+                        description: null,
+                        filePath: "https://mementoresources.s3.eu-west-1.amazonaws.com/gepafin/SCR-20240820-kiwn.pdf",
+                        id: 10,
+                        name: "SCR-20240820-kiwn.pdf",
+                        updatedDate: "2024-08-23T12:40:47.700373894"
+                    }*/
+                ],
+                status: 'draft',
                 id: 11
             }
+
+            if (bandoId === 0) {
+                setData(data);
+                setIsLoading(false);
+            } else {
+                setTimeout(() => {
+                    if (!isNil(data.dates) && data.dates.length) {
+                        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
+                    }
+
                     setData(data);
-            reset();
 
                     const templates = [
                         { name: 'Il mio template', value: 22 },
@@ -86,7 +140,8 @@ const BandoEdit = () => {
                     ];
                     setTemplate(templates);
                     setIsLoading(false);
-        }, 3000);
+                }, 2000);
+            }
     }, [id]);
 
     return (
@@ -101,7 +156,7 @@ const BandoEdit = () => {
 
             <div className="appPage__spacer"></div>
 
-            {!isLoading
+            {/*!isLoading
                 ? <div className="pageBando__templateSelection">
                     <div className="appForm__field">
                         <label htmlFor="template">
@@ -120,178 +175,23 @@ const BandoEdit = () => {
                         label={__('Applica', 'gepafin')}
                         icon="pi pi-check"
                         iconPos="right"/>
-                </div> : null}
+                </div> : null*/}
+            {!isLoading
+                ? <Steps
+                    model={stepItems}
+                    activeIndex={activeStep}
+                    readOnly={false}/>
+                : null}
 
             <div className="appPage__spacer"></div>
 
+            <Messages ref={stepErrorMsgs} />
+
             {!isLoading
                 ? <>
-                    <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                    {activeStep === 0
-                        <FormField
+                        ? <BandoEditFormStep1 initialData={data} ref={formRef}/>
-                            type="textinput"
+                        : <BandoEditFormStep2 initialData={data} ref={formRef}/>}
-                            fieldName="name"
-                            label={__('Titolo del Bando', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['name']}
-                            config={{ required: __('È obbligatorio', 'gepafin') }}
-                        />
-
-                        <FormField
-                            type="textarea"
-                            fieldName="descriptionShort"
-                            label={__('Descrizione breve', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['descriptionShort']}
-                            config={{
-                                required: __('È obbligatorio', 'gepafin')
-                            }}
-                        />
-
-                        <FormField
-                            type="textarea"
-                            fieldName="descriptionLong"
-                            label={__('Descrizione completa', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['descriptionLong']}
-                            config={{
-                                required: __('È obbligatorio', 'gepafin'),
-                                minLength: 200
-                            }}
-                            infoText={__('Almeno 200 caratteri', 'gepafin')}
-                        />
-
-                        <FormFieldRepeater
-                            data={data}
-                            setDataFn={setValue}
-                            fieldName="aimedTo"
-                            options={exampleOfAimedToOptions}
-                            errors={errors}
-                            register={register}
-                            label={<>{__('A chi si rivolge', 'gepafin')}*
-                                <span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
-                        />
-
-                        <FormField
-                            type="textarea"
-                            fieldName="documentationRequested"
-                            label={__('Documentazione richiesta', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['documentationRequested']}
-                            config={{
-                                required: __('È obbligatorio', 'gepafin')
-                            }}
-                        />
-
-                        <FormField
-                            type="datepickerrange"
-                            fieldName="dates"
-                            label={__('Dati di pubblicazione', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['dates']}
-                            config={{ required: __('È obbligatorio', 'gepafin') }}
-                            minDate={minDateStart}
-                        />
-
-                        <div className="appForm__twoCols">
-                            <FormField
-                                type="numberinput"
-                                fieldName="amount"
-                                label={__('Dotazione del Bando', 'gepafin')}
-                                control={control}
-                                errors={errors}
-                                defaultValue={data['amount']}
-                                config={{ required: __('È obbligatorio', 'gepafin') }}
-                                inputgroup={true}
-                                icon="€"
-                            />
-
-                            <FormField
-                                type="numberinput"
-                                fieldName="amountMax"
-                                label={__('Importo massimo per Progetto', 'gepafin')}
-                                control={control}
-                                errors={errors}
-                                defaultValue={data['amountMax']}
-                                config={{ required: __('È obbligatorio', 'gepafin') }}
-                                inputgroup={true}
-                                icon="€"
-                            />
-                        </div>
-
-                        <FormFieldRepeaterCriteria
-                            data={data}
-                            setDataFn={setValue}
-                            fieldName="criteria"
-                            options={exampleOfCriteriaOptions}
-                            errors={errors}
-                            register={register}
-                            label={<>{__('Criteri di valutazione', 'gepafin')}*
-                                <span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}/>
-
-                        <FormField
-                            type="fileupload"
-                            fieldName="documentation"
-                            label={__('Documentazione', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['documentation']}
-                            config={{ required: __('È obbligatorio', 'gepafin') }}
-                            accept="application/pdf,application/vnd.ms-excel"
-                            chooseLabel={__('Aggiungi documento', 'gepafin')}
-                            multiple={true}
-                        />
-
-                        <FormField
-                            type="fileupload"
-                            fieldName="images"
-                            label={__('Immagine del Bando', 'gepafin')}
-                            control={control}
-                            errors={errors}
-                            defaultValue={data['documentation']}
-                        />
-
-                        <FormFieldRepeaterFaq
-                            data={data}
-                            setDataFn={setValue}
-                            fieldName="faq"
-                            options={exampleOfFaqOptions}
-                            errors={errors}
-                            register={register}
-                            label={__('FAQ', 'gepafin')}/>
-
-                        <FormFieldRepeater
-                            data={data}
-                            setDataFn={setValue}
-                            fieldName="checklist"
-                            options={exampleOfChecklistOptions}
-                            errors={errors}
-                            register={register}
-                            label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
-                                <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
-                        />
-
-                        <div className="appPageSection">
-                            <div className="appPageSection__actions">
-                                <Button
-                                    type="submit"
-                                    label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
-                                <Button
-                                    type="button"
-                                    onClick={openPreview}
-                                    label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
-                                <Button
-                                    type="button"
-                                    onClick={openPreviewEvaluation}
-                                    label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
-                                    iconPos="right"/>
-                            </div>
-                        </div>
-                    </form>
 
                     <div className="appPageSection">
                         <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>

src/pages/BandoEditForm/components/BuilderElement/index.js

@@ -1,65 +0,0 @@
-import React, { useRef,  } from 'react'
-import { useDrag, useDrop } from 'react-dnd'
-import { ItemTypes } from '../ItemTypes';
-
-
-const BuilderElement = ({ id, text, index, move  }) => {
-    const ref = useRef(null);
-
-    const [{ handlerId }, drop] = useDrop({
-        accept: ItemTypes.FIELD,
-        collect(monitor) {
-            return {
-                handlerId: monitor.getHandlerId(),
-            }
-        },
-        hover(item, monitor) {
-            if (!ref.current) {
-                return
-            }
-            const dragIndex = item.index
-            const hoverIndex = index
-
-            if (dragIndex === hoverIndex) {
-                return
-            }
-
-            const hoverBoundingRect = ref.current?.getBoundingClientRect()
-            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
-            const clientOffset = monitor.getClientOffset()
-            const hoverClientY = clientOffset.y - hoverBoundingRect.top
-
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                return
-            }
-
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                return
-            }
-
-            move(dragIndex, hoverIndex)
-            item.index = hoverIndex
-        },
-    });
-
-    const [{ isDragging }, drag] = useDrag({
-        type: ItemTypes.FIELD,
-        item: () => {
-            return { id, index }
-        },
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    });
-
-    const opacity = isDragging ? 0 : 1;
-    drag(drop(ref));
-
-    return (
-        <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
-            {text}
-        </div>
-    )
-}
-
-export default BuilderElement;

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

@@ -1,73 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import { __ } from '@wordpress/i18n';
-
-// components
-import BuilderElement from '../BuilderElement';
-
-const FormBuilder = () => {
-        const [fields, setFields] = useState([
-            {
-                id: 1,
-                text: 'Write a cool JS library',
-            },
-            {
-                id: 2,
-                text: 'Make it generic enough',
-            }
-        ]);
-        const [items, setItems] = useState([
-            {
-                id: 1,
-                label: 'Text Input'
-            },
-            {
-                id: 2,
-                label: 'Text Area'
-            }
-        ])
-
-        const moveField = useCallback((dragIndex, hoverIndex) => {
-            console.log('dragIndex, hoverIndex:', dragIndex, hoverIndex)
-            /*setFields((prevCards) =>
-                update(prevCards, {
-                    $splice: [
-                        [dragIndex, 1],
-                        [hoverIndex, 0, prevCards[dragIndex]],
-                    ],
-                }),
-            )*/
-        }, []);
-
-        const renderField = useCallback((card, index) => {
-            return (
-                <BuilderElement
-                    key={card.id}
-                    index={index}
-                    id={card.id}
-                    text={card.text}
-                    move={moveField}
-                />
-            )
-        }, []);
-
-        return (
-            <div className="formBuilder">
-                <div className="formBuilder__main">
-                    <h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
-                    <div className="formBuilder__content">
-                        {fields.map((field, i) => renderField(field, i))}
-                    </div>
-                </div>
-                <div className="formBuilder__aside">
-                    <h2>{__('Elementi del Form', 'gepafin')}</h2>
-                    <ul className="formBuilder__list">
-                        {items.map((item) => <li key={item.id}>
-                            {item.label}
-                        </li>)}
-                    </ul>
-                </div>
-            </div>
-        )
-}
-
-export default FormBuilder;

src/pages/BandoForms/index.js

@@ -5,7 +5,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 // components
 import { Button } from 'primereact/button';
 
-const BandoEditForms = () => {
+const BandoForms = () => {
     const { id } = useParams();
     const navigate = useNavigate();
     //const [data, setData] = useState({});
@@ -44,4 +44,4 @@ const BandoEditForms = () => {
 
 }
 
-export default BandoEditForms;
+export default BandoForms;

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

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react'
+import { useDrag, useDrop } from 'react-dnd'
+import { ItemTypes } from '../ItemTypes';
+
+// store
+import { storeSet } from '../../../../store';
+
+// components
+import { Button } from 'primereact/button';
+
+const BuilderElement = ({ id, name, label, index, move  }) => {
+    const ref = useRef(null);
+
+    const [{ handlerId }, drop] = useDrop({
+        accept: ItemTypes.FIELD,
+        collect(monitor) {
+            return {
+                handlerId: monitor.getHandlerId(),
+            }
+        },
+        hover(item, monitor) {
+            if (!ref.current) {
+                return
+            }
+            const dragIndex = item.index
+
+            if (dragIndex > -1) {
+                const hoverIndex = index
+
+                if (dragIndex === hoverIndex) {
+                    return
+                }
+
+                const hoverBoundingRect = ref.current?.getBoundingClientRect()
+                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+                const clientOffset = monitor.getClientOffset()
+                const hoverClientY = clientOffset.y - hoverBoundingRect.top
+
+                if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                    return
+                }
+
+                if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                    return
+                }
+
+                move(dragIndex, hoverIndex, item)
+                item.index = hoverIndex
+            } else {
+                let hoverIndex = index
+
+                const hoverBoundingRect = ref.current?.getBoundingClientRect()
+                const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+                const clientOffset = monitor.getClientOffset()
+                const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+                if (hoverClientY > hoverMiddleY) {
+                    hoverIndex = hoverIndex + 1;
+                }
+
+                move(dragIndex, hoverIndex, item)
+                item.index = hoverIndex;
+            }
+        },
+    });
+
+    const [{ isDragging }, drag] = useDrag({
+        type: ItemTypes.FIELD,
+        item: () => {
+            return { id, name, index }
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+
+    const openSettings = (id) => {
+        storeSet.main.activeElement(id);
+    }
+
+    const opacity = isDragging ? 0 : 1;
+    drag(drop(ref));
+
+    return (
+        <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
+            {label}
+            <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined />
+        </div>
+    )
+}
+
+export default BuilderElement;

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

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react'
+import { useDrag } from 'react-dnd'
+import { ItemTypes } from '../ItemTypes';
+import uniqid from '../../../../helpers/uniqid';
+
+
+const BuilderElementItem = ({ dbId, name, label, move  }) => {
+    const ref = useRef(null);
+
+    const [{ isDragging }, drag] = useDrag(() => ({
+        type: ItemTypes.FIELD,
+        item: () => {
+            return { name, dbId, id: uniqid(), index: -1 }
+        },
+        end: (item, monitor) => {
+            const dropResult = monitor.getDropResult()
+            if (item && dropResult) {
+                return item;
+            }
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+            handlerId: monitor.getHandlerId(),
+        }),
+    }))
+
+    const opacity = isDragging ? 0.4 : 1
+    drag(ref);
+
+    return (
+        <div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
+            {label}
+        </div>
+    )
+}
+
+export default BuilderElementItem;

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

@@ -0,0 +1,98 @@
+import React, { useCallback, useState, useEffect } from 'react'
+import { __ } from '@wordpress/i18n';
+import { head, isEmpty } from 'ramda';
+
+// store
+import { storeGet, storeSet, useStore } from '../../../../store';
+
+// components
+import BuilderElement from '../BuilderElement';
+import BuilderElementItem from '../BuilderElementItem';
+import { Sidebar } from 'primereact/sidebar';
+
+const FormBuilder = () => {
+    const [fields, setFields] = useState([]);
+    const [items, setItems] = useState([]);
+    const activeElement = useStore().main.activeElement();
+
+    const moveField = useCallback((dragIndex, hoverIndex, item) => {
+        setFields((prevFields) => {
+            if (dragIndex === -1) {
+                const configs = storeGet.main.elementItems();
+                const itemCfg = head(configs.filter(o => o.id === item.dbId));
+                const newItem = {
+                    ...itemCfg,
+                    id: item.id,
+                    dbId: item.dbId
+                }
+                return prevFields.toSpliced(hoverIndex, 0, newItem);
+            } else {
+                let newFields = prevFields.toSpliced(dragIndex, 1);
+                return newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]);
+            }
+        })
+    }, []);
+
+    const renderField = useCallback((field, index) => {
+        return (
+            <BuilderElement
+                key={field.id}
+                index={index}
+                id={field.id}
+                label={field.label}
+                name={field.name}
+                move={moveField}
+            />
+        )
+    }, []);
+
+    useEffect(() => {
+        const elements = storeGet.main.elements();
+        const elementItems = storeGet.main.elementItems();
+        setFields(elements);
+        setItems(elementItems);
+    }, [])
+
+    const renderItem = useCallback((item, index) => {
+        return (
+            <BuilderElementItem
+                key={item.id}
+                dbId={item.id}
+                label={item.label}
+                name={item.name}
+                move={moveField}
+            />
+        )
+    }, []);
+
+    const closeSettings = () => {
+        storeSet.main.activeElement('');
+    }
+
+    return (
+        <>
+            <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
+                <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
+                <p>
+                    Form fields here
+                </p>
+            </Sidebar>
+            <div className="formBuilder">
+                <div className="formBuilder__main">
+                    <h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
+                    <div className="formBuilder__content">
+                        {fields.map((field, i) => renderField(field, i))}
+                    </div>
+                </div>
+                <div className="formBuilder__aside">
+                    <h2>{__('Elementi del Form', 'gepafin')}</h2>
+                    <ul className="formBuilder__list">
+                        {items.map((item) => renderItem(item))}
+                    </ul>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default FormBuilder;

src/pages/BandoFormsEdit/index.js

@@ -1,18 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 
+// store
+import { storeSet } from '../../store';
+
 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';
 
-const BandoEditForm = () => {
+const BandoFormsEdit = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
-    //const [data, setData] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
-    //const [isLoading, setIsLoading] = useState(true);
 
     const goBack = () => {
         navigate('/bandi/11/forms');
@@ -31,12 +33,47 @@ const BandoEditForm = () => {
     }
 
     useEffect(() => {
-        const parsed = parseInt(id)
+        //const parsed = parseInt(id)
-        const bandoId = !isNaN(parsed) ? parsed : 0;
+        //const bandoId = !isNaN(parsed) ? parsed : 0;
-        const parsedFormId = parseInt(formId)
+        //const parsedFormId = parseInt(formId)
-        const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+        //const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
+
+        // 1. TODO get builder content data from API
+        const elements = [
+            {
+                id: 'a123456',
+                name: 'textinput',
+                dbId: 1,
+                label: 'Full Name',
+            },
+            {
+                id: 'a456789',
+                name: 'textarea',
+                dbId: 2,
+                label: 'Bio',
+            }
+        ]
+        const elementItems = [
+            {
+                id: 1,
+                name: 'textinput',
+                label: 'Text Input'
+            },
+            {
+                id: 2,
+                name: 'textarea',
+                label: 'Text Area'
+            },
+            {
+                id: 3, // DB id
+                name: 'piva',
+                label: 'P.IVA'
+            },
+        ]
+        storeSet.main.elements(elements);
+        storeSet.main.elementItems(elementItems);
+        setIsLoading(false);
 
-        // TODO
     }, [id]);
 
     return (
@@ -52,7 +89,7 @@ const BandoEditForm = () => {
 
             <div className="appPageSection">
                 <DndProvider backend={HTML5Backend}>
-                    <FormBuilder/>
+                    {!isLoading ? <FormBuilder/>: null}
                 </DndProvider>
             </div>
 
@@ -84,4 +121,4 @@ const BandoEditForm = () => {
 
 }
 
-export default BandoEditForm;
+export default BandoFormsEdit;

src/pages/BandoView/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
 import { Skeleton } from 'primereact/skeleton';
@@ -11,8 +11,8 @@ const BandoView = () => {
     const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
-        const parsed = parseInt(id)
+        //const parsed = parseInt(id)
-        const bandoId = !isNaN(parsed) ? parsed : 0;
+        //const bandoId = !isNaN(parsed) ? parsed : 0;
 
         setTimeout(() => {
             const data = {

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

@@ -148,7 +148,7 @@ const LatestBandiTable = () => {
     const header = renderHeader();
 
     return(
-        <div className="latestBandiTable">
+        <div className="appPageSection__table">
             <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
                        filters={filters}
                        globalFilterFields={['name', 'status']}

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

@@ -102,7 +102,7 @@ const LatestUsersActivityTable = () => {
     const header = renderHeader();
 
     return(
-        <div className="latestBandiTable">
+        <div className="appPageSection__table">
             <DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
                        filters={filters}
                        globalFilterFields={['name', 'status']}

src/pages/Login/index.js

@@ -1,10 +1,109 @@
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { useForm } from 'react-hook-form';
+import { classNames } from 'primereact/utils';
+import { isEmpty } from 'ramda';
+
+// tools
+import AuthenticationService from '../../service/authentication-service';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// components
+import FormField from '../../components/FormField';
+import LogoIcon from '../../icons/LogoIcon';
+import { Button } from 'primereact/button';
+import { Messages } from 'primereact/messages';
 
 const Login = () => {
+    const token = useStore().main.token();
+    const [loading, setLoading] = useState(false);
+    const errorMsgs = useRef(null);
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+    } = useForm({ mode: 'onChange' });
+
+    const onSubmit = (formData) => {
+        errorMsgs.current.clear();
+        setLoading(true);
+        const request = {
+            ...formData,
+            rememberMe: true
+        }
+
+        AuthenticationService.login(request, loginCallback, loginError);
+    };
+
+    const loginCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            storeSet.main.setAuthData({
+                token: data.data.token,
+                userData: data.data.user
+            });
+        } else {
+            errorMsgs.current.show([
+                { sticky: true, severity: 'error', summary: 'Error',
+                    detail: data.message,
+                    closable: true }
+            ]);
+        }
+        setLoading(false);
+    }
+
+    const loginError = (err) => {
+        errorMsgs.current.show([
+            { sticky: true, severity: 'error', summary: 'Error',
+                detail: sprintf(__('%s', 'gepafin'), err),
+                closable: true }
+        ]);
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        if (!isEmpty(token)) {
+            setLoading(true);
+            window.location.replace('/')
+        }
+    }, [token]);
+
     return (
-        <div>
+        <div className={classNames(['appPage', 'appPageLogin'])}>
-            {__('Login page', 'gepafin')}
+            <div className="appPageLogin__wrapper">
+                <LogoIcon/>
+
+                <h1>{__('Accedi o Registrati', 'gepafin')}</h1>
+
+                <div className="appPage__spacer"></div>
+
+                <Messages ref={errorMsgs}/>
+
+                <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                    <FormField
+                        type="textinput"
+                        fieldName="email"
+                        label={__('Email', 'gepafin')}
+                        control={control}
+                        errors={errors}
+                        config={{ required: __('È obbligatorio', 'gepafin') }}
+                        placeholder="sample@example.com"
+                    />
+
+                    <FormField
+                        type="textinput"
+                        inputtype="password"
+                        fieldName="password"
+                        label={__('Password', 'gepafin')}
+                        control={control}
+                        errors={errors}
+                        config={{ required: __('È obbligatorio', 'gepafin') }}
+                    />
+
+                    <Button label={__('Accedi', 'gepafin')} disabled={loading}/>
+                </form>
+            </div>
         </div>
     )
 }

src/routes.js

@@ -9,8 +9,8 @@ import DefaultLayout from './layouts/DefaultLayout';
 import Bandi from './pages/Bandi';
 import BandoEdit from './pages/BandoEdit';
 import BandoView from './pages/BandoView';
-import BandoEditForms from './pages/BandoEditForms';
+import BandoFormsEdit from './pages/BandoFormsEdit';
-import BandoEditForm from './pages/BandoEditForm';
+import BandoForms from './pages/BandoForms';
 
 const routes = () => (
     <Routes>
@@ -20,8 +20,8 @@ const routes = () => (
             <Route path="/bandi/preview/:id" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
             <Route path="/bandi/preview-evaluation/:id" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
             <Route path="/bandi/:id" element={<DefaultLayout><BandoEdit/></DefaultLayout>}/>
-            <Route path="/bandi/:id/forms" element={<DefaultLayout><BandoEditForms/></DefaultLayout>}/>
+            <Route path="/bandi/:id/forms" element={<DefaultLayout><BandoForms/></DefaultLayout>}/>
-            <Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoEditForm/></DefaultLayout>}/>
+            <Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoFormsEdit/></DefaultLayout>}/>
         </Route>
         <Route exact path="/login" element={<Login/>}/>
         {/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}

src/service/authentication-service.js

@@ -58,11 +58,11 @@ export default class AuthenticationService {
     };
 
     static login = (loginRequest, callback, errCallback) => {
-        NetworkService.unauthorizedPost(`${API_BASE_URL}/user/login/`, loginRequest, callback, errCallback);
+        NetworkService.unauthorizedPost(`${API_BASE_URL}/user/login`, loginRequest, callback, errCallback);
     };
 
     static registerUser = (registerRequest, callback, errCallback) => {
-        NetworkService.post(`${API_BASE_URL}/user/register/`, registerRequest, callback, errCallback);
+        NetworkService.post(`${API_BASE_URL}/user/register`, registerRequest, callback, errCallback);
     };
 
     static forgotPassword = (request, callback, errCallback) => {
@@ -74,6 +74,6 @@ export default class AuthenticationService {
     }
 
     static changePassword = (request, callback, errCallback) => {
-        NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password/`, request, callback, errCallback);
+        NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password`, request, callback, errCallback);
     }
 }

src/service/file-upload-service.js

@@ -0,0 +1,14 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class FileUploadService {
+
+    static uploadFile = (body, callback, errCallback, queryParams) => {
+        NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile`, body, callback, errCallback, queryParams);
+    };
+
+    static deleteFile = (body, callback, errCallback, queryParams) => {
+        NetworkService.delete(`${API_BASE_URL}/document/deleteFile`, body, callback, errCallback, queryParams);
+    };
+}

src/service/network-service.js

@@ -85,6 +85,47 @@ export class NetworkService {
             .catch(err => errorCallback(err));
     };
 
+    static postMultiPart = (url, body, callback, errorCallback, queryParams) => {
+
+        if (queryParams) {
+            url += '?'
+            for (let i = 0; i < queryParams.length; i++) {
+                if (queryParams[i] && this.isNotBlank(queryParams[i][0]) && this.isNotBlank(queryParams[i][1])) {
+                    let param = queryParams[i][0] + '=' + queryParams[i][1]
+
+                    if (i !== queryParams.length - 1)
+                        param += '&'
+
+                    url += param;
+                }
+            }
+
+            if (url.charAt(url.length) === '&')
+                url = url.substring(0, url.length - 1);
+        }
+
+        fetch(url, {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+                //'Content-Type': 'multipart/form-data',
+                'Authorization': 'Bearer ' + storeGet.main.getToken(),
+            },
+            body: body
+        })
+            .then(async response => {
+                let status = response.status;
+                return { response: await response.json(), status: status }
+            })
+            .then(data => {
+                if (data.status >= 400 && data.status <= 599)
+                    errorCallback(data.response)
+                else
+                    callback(data.response)
+            })
+            .catch(err => errorCallback(err));
+    };
+
     static unauthorizedPost = (url, body, callback, errorCallback) => {
         fetch(url, {
             method: 'POST',

src/store/actions.js

@@ -12,4 +12,12 @@ export const actionsAlpha = (set, get, api) => ({
 })
 
 export const actionsBeta = (set, get, api) => ({
+    setAuthData: ({ userData, token }) => {
+        set.userData(userData);
+        set.token(token);
+    },
+    doLogout: () => {
+        set.userData({});
+        set.token('');
+    }
 });

src/store/initial.js

@@ -1,6 +1,15 @@
 const initialStore = {
     // ui related
     isAsyncRequest: 0, // number
+    // user
+    userData: {},
+    token: '',
+    // bando form
+    bandoFormErrors: {},
+    // form builder
+    elements: [],
+    elementItems: [],
+    activeElement: ''
 }
 
 export default initialStore;

src/store/selectors.js

@@ -1,9 +1,6 @@
-import { isEmpty } from 'ramda';
-
 const selectors = (state, get, api) => ({
     getToken: () => {
-        const userData = get.userData();
+        return get.token();
-        return userData.access && !isEmpty(userData.access) ? userData.access : null;
     },
 })
 

src/store/zustand-x-opts.js

@@ -6,9 +6,7 @@ const zustandXOpts = {
         enabled: true,
         partialize: (state) => ({
             userData: state.userData,
-            hubsList: state.hubsList,
+            token: state.token
-            chosenHub: state.chosenHub,
-            groups: state.groups,
         }),
     }
 }