updates

.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>

src/assets/scss/components/appPage.scss

@@ -90,6 +90,13 @@
         line-height: normal;
         margin: 0 0 24px;
     }
+
+    .row {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        padding: 5px 0;
+    }
 }
 
 .appPageSection__withBorder {

src/assets/scss/components/misc.scss

@@ -8,8 +8,8 @@
 .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, .p-confirm-popup-reject),
-.p-button:not(.p-button-outlined, .p-button-secondary) span {
+.p-button:not(.p-button-outlined, .p-button-secondary, .p-confirm-popup-reject) span {
   color: var(--menuitem-active-color);
 }
 .p-fileupload-row {

src/components/FormFieldRepeaterFaq/index.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { head } from 'ramda';
+import { head, isEmpty } from 'ramda';
+import { diff } from 'deep-object-diff';
 
 // components
 import { Button } from 'primereact/button';
@@ -116,18 +117,27 @@ const FormFieldRepeaterFaq = ({
     }, [stateFieldData]);
 
     useEffect(() => {
-        const storeFieldData = data[fieldName] ?? [];
+        const storeFieldData = data ?? [];
         setStateFieldData(storeFieldData);
         setStateOptionsData([...options, ...storeFieldData]);
         register(fieldName, config)
     }, []);
 
+    useEffect(() => {
+        const diffData = diff(data, stateFieldData);
+
+        if (!isEmpty(diffData)) {
+            const storeFieldData = data ?? [];
+            setStateFieldData(storeFieldData);
+        }
+    }, [data]);
+
     useEffect(() => {
         setStateOptionsData([...options]);
     }, [options]);
 
     useEffect(() => {
-        setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
+        setDataFn(fieldName, stateFieldData, { shouldValidate: true });
     }, [stateFieldData]);
 
     return (

src/components/TopBarProfileMenu/index.js

@@ -10,6 +10,7 @@ import { Avatar } from 'primereact/avatar';
 
 const TopBarProfileMenu = ({ menuLeftRef }) => {
     const userData = useTrackedStore().main.userData();
+    const fulleName = `${userData.firstName} ${userData.lastName}`;
 
     let items = [
         {
@@ -18,19 +19,19 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
                     <div className="topBar__menuProfileItem">
                         <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
                         <div className="userInfo">
-                            <span className="userName">{`${userData.firstName} ${userData.lastName}`}</span>
+                            <span className="userName" title={fulleName}>{fulleName}</span>
-                            <span className="userEmail">{userData.email}</span>
+                            <span className="userEmail" title={userData.email}>{userData.email}</span>
                         </div>
                     </div>
                 );
             }
         },
-        {
+        /*{
             label: __('Il mio profilo', 'gepafin'),
             command: () => {
                 console.log('go to profile page')
             }
-        },
+        },*/
         {
             separator: true
         },

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

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { isEmpty, isNil, is } from 'ramda';
+import { klona } from 'klona';
 
 // components
 import FormField from '../../../../components/FormField';
@@ -12,6 +13,8 @@ import BandoEditFormActions from '../BandoEditFormActions';
 import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
 import BandoService from '../../../../service/bando-service';
 import LookupdataService from '../../../../service/lookupdata-service';
+
+// store
 import { storeSet, useStore } from '../../../../store';
 
 const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
@@ -126,7 +129,11 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
     }, [initialData]);
 
     useEffect(() => {
-        reset(formInitialData);
+        const newFormData = klona(formInitialData);
+        if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
+            newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+        }
+        reset(newFormData);
     }, [formInitialData]);
 
     useEffect(() => {
@@ -259,7 +266,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
             </div>
 
             <FormFieldRepeaterFaq
-                data={values}
+                data={values['faq']}
                 setDataFn={setValue}
                 fieldName="faq"
                 options={faqOptions}

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

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { is, isEmpty, isNil } from 'ramda';
+import { klona } from 'klona';
 
 // components
 import FormField from '../../../../components/FormField';
@@ -121,7 +122,11 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
     }, [initialData]);
 
     useEffect(() => {
-        reset(formInitialData);
+        const newFormData = klona(formInitialData);
+        if (!isNil(formInitialData.dates) && formInitialData.dates.length) {
+            newFormData.dates = formInitialData.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+        }
+        reset(newFormData);
     }, [formInitialData]);
 
     useEffect(() => {

src/pages/BandoEdit/index.js

@@ -308,7 +308,7 @@ const BandoEdit = () => {
                     <div className="appPageSection">
                         <h2>{__('Publicca il Form', 'gepafin')}</h2>
 
-                        <div className="appPageSection__actions">
+                        <div className="row">
                             <Button
                                 type="button"
                                 outlined

src/pages/BandoForms/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useParams, useNavigate } from 'react-router-dom';
 import { isEmpty } from 'ramda';
+import { classNames } from 'primereact/utils';
 
 // components
 import { Button } from 'primereact/button';
@@ -114,7 +115,7 @@ const BandoForms = () => {
                     </div>
                 </div>
 
-                <div className="appPageSection__withBorder">
+                <div className={classNames(["appPageSection__withBorder", (isEmpty(forms) ? 'disabled' : '')])}>
                     <h2>{__('Modifica form esistente', 'gepafin')}</h2>
                     <div className="row">
                         <p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p>

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

@@ -100,11 +100,13 @@ const BuilderElementSettings = ({ closeSettings }) => {
                             ? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
                                 <label htmlFor={o.name}>{o.name}</label>
                                 {o.name === 'options'
-                                    ? <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions} />
+                                    ?
+                                    <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions}/>
                                     : <InputText id={o.name} aria-describedby={`${o.name}-help`}
-                                           value={o.value}
+                                                 value={o.value}
-                                           onChange={(e) => onChange(e.target.value, o.name)}/>}
+                                                 onChange={(e) => onChange(e.target.value, o.name)}/>}
-                            </div>) : null}
+                            </div>)
+                            : null}
                     </TabPanel>
                     <TabPanel header={__('Validation', 'gepafin')}>
                         {validators
@@ -128,11 +130,11 @@ const BuilderElementSettings = ({ closeSettings }) => {
                                     : null}
                                 {textBasedValidatorFields.includes(k) && !isNil(validators[k])
                                     ? <div className="formElementSettings__field">
-                                    <label htmlFor={k}>{k}</label>
+                                        <label htmlFor={k}>{k}</label>
-                                    <InputText id={k} aria-describedby={`${k}-help`}
+                                        <InputText id={k} aria-describedby={`${k}-help`}
-                                               value={validators[k]}
+                                                   value={validators[k]}
-                                               onChange={(e) => onChangeValidator(e.target.value, k)}/>
+                                                   onChange={(e) => onChangeValidator(e.target.value, k)}/>
-                                </div> : null}
+                                    </div> : null}
                             </div>) : null}
                     </TabPanel>
                 </TabView>

src/pages/BandoFormsEdit/index.js

@@ -11,9 +11,10 @@ import { storeSet, storeGet, useStore } from '../../store';
 // components
 import FormBuilder from './components/FormBuilder';
 import { Button } from 'primereact/button';
-
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
-// components
 import { InputText } from 'primereact/inputtext';
+
+// api
 import FormsService from '../../service/forms-service';
 
 const BandoFormsEdit = () => {
@@ -46,7 +47,7 @@ const BandoFormsEdit = () => {
         if (bandoFormId === 0) {
             FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
         } else {
-            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback)
+            FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback);
         }
     }
 
@@ -71,10 +72,40 @@ const BandoFormsEdit = () => {
         navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
     }
 
+    const confirmDelete = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di cancellare questo form?', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: doDelete,
+            reject: () => {}
+        });
+    };
+
     const doPublish = () => {
         console.log('doPublish');
     }
 
+    const doDelete = () => {
+        storeSet.main.setAsyncRequest();
+        FormsService.deleteForm(formId, formDeleteCallback, errFormDeleteCallback)
+    }
+
+    const formDeleteCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const bandoId = getBandoId();
+            navigate(`/bandi/${bandoId}/forms`);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errFormDeleteCallback = (data) => {
+        console.log('errFormDeleteCallback', data)
+        storeSet.main.unsetAsyncRequest();
+    }
+
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
             storeSet.main.elementItems(data.data);
@@ -172,6 +203,13 @@ const BandoFormsEdit = () => {
                         onClick={doPublish}
                         label={__('Pubblica', 'gepafin')}/>
                 </div>
+                <div className="appPageSection__actions">
+                    <ConfirmPopup />
+                    <Button
+                        onClick={confirmDelete}
+                        severity="danger"
+                        label={__('Cancella', 'gepafin')} icon="pi pi-trash" iconPos="right"/>
+                </div>
             </div>
         </div>
     )

src/service/forms-service.js

@@ -23,4 +23,8 @@ export default class FormsService {
     static getFormById = (id, callback, errCallback) => {
         NetworkService.get(`${API_BASE_URL}/form/${id}`, callback, errCallback);
     };
+
+    static deleteForm = (id, callback, errCallback) => {
+        NetworkService.delete(`${API_BASE_URL}/form/${id}`, {}, callback, errCallback);
+    };
 }