From 782ec5fda789abdb40e04d3d499d7f224004ff88 Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Tue, 15 Oct 2024 15:20:27 +0200
Subject: [PATCH] - added criteria setting for form fields; - added dynamic
 data setitng for form fields;

---
 .../BuilderElementSettings/index.js           | 105 ++++++++++--------
 .../components/FormBuilder/index.js           |   2 +-
 src/pages/BandoFormsEdit/index.js             |  18 ++-
 src/store/initial.js                          |   1 +
 4 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
index 2e91fd9..6d0edf0 100644
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
@@ -15,14 +15,17 @@ import { TabView, TabPanel } from 'primereact/tabview';
 import { InputSwitch } from 'primereact/inputswitch';
 import ElementSetting from './components/ElementSetting';
 import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
 
-const BuilderElementSettings = ({ closeSettings }) => {
+const BuilderElementSettings = ({ closeSettingsFn }) => {
     const elements = useStore().main.formElements();
     const activeElement = useStore().main.activeElement();
+    const criteriaOptions = useStore().main.bandoCriteria();
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
     const [validators, setValidators] = useState({});
-    const [dynamicData, setDynamicData] = useState({});
+    const [dynamicData, setDynamicData] = useState('');
+    const [criteria, setCriteria] = useState([]);
     const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern'];
     const customValidationOptions = [
         { value: 'isPIVA', label: 'isPIVA' },
@@ -69,9 +72,10 @@ const BuilderElementSettings = ({ closeSettings }) => {
         newActiveElementData = wrap(newActiveElementData).set(['settings'], settings).value();
         newActiveElementData = wrap(newActiveElementData).set(['validators'], validators).value();
         newActiveElementData = wrap(newActiveElementData).set(['dynamicData'], dynamicData).value();
+        newActiveElementData = wrap(newActiveElementData).set(['criteria'], criteria).value();
         const newElements = elements.map(o => o.id === newActiveElementData.id ? newActiveElementData : o);
         storeSet.main.formElements(newElements);
-        closeSettings();
+        closeSettingsFn();
     }
 
     const showField = (value, key) => {
@@ -95,33 +99,38 @@ const BuilderElementSettings = ({ closeSettings }) => {
         newValidators[name] = value;
         setValidators(newValidators);
     }
+    
+    const onChangeCriteriaData = (value) => {
+        setCriteria(value);
+    }
 
-    const dynamicDataOptions = (type) => {
+
+    const getDynamicDataOptions = (type) => {
         switch (type) {
             case 'datepicker' :
                 return [
-                    {label: 'user dateOfBirth', value: 'user.dateOfBirth'}
+                    { label: 'user dateOfBirth', value: 'user.dateOfBirth' }
                 ]
             default :
                 return [
-                    {label: 'company name', value: 'company.companyName'},
-                    {label: 'company vatNumber', value: 'company.vatNumber'},
-                    {label: 'company codiceFiscale', value: 'company.codiceFiscale'},
-                    {label: 'company address', value: 'company.address'},
-                    {label: 'company phoneNumber', value: 'company.phoneNumber'},
-                    {label: 'company city', value: 'company.city'},
-                    {label: 'company province', value: 'company.province'},
-                    {label: 'company cap', value: 'company.cap'},
-                    {label: 'company country', value: 'company.country'},
-                    {label: 'company pec', value: 'company.pec'},
-                    {label: 'company email', value: 'company.email'},
-                    {label: 'company contactName', value: 'company.contactName'},
-                    {label: 'company contactEmail', value: 'company.contactEmail'},
-                    {label: 'user email', value: 'user.email'},
-                    {label: 'user firstName', value: 'user.firstName'},
-                    {label: 'user lastName', value: 'user.lastName'},
-                    {label: 'user phoneNumber', value: 'user.phoneNumber'},
-                    {label: 'user codiceFiscale', value: 'user.codiceFiscale'}
+                    { label: 'company name', value: 'company.companyName' },
+                    { label: 'company vatNumber', value: 'company.vatNumber' },
+                    { label: 'company codiceFiscale', value: 'company.codiceFiscale' },
+                    { label: 'company address', value: 'company.address' },
+                    { label: 'company phoneNumber', value: 'company.phoneNumber' },
+                    { label: 'company city', value: 'company.city' },
+                    { label: 'company province', value: 'company.province' },
+                    { label: 'company cap', value: 'company.cap' },
+                    { label: 'company country', value: 'company.country' },
+                    { label: 'company pec', value: 'company.pec' },
+                    { label: 'company email', value: 'company.email' },
+                    { label: 'company contactName', value: 'company.contactName' },
+                    { label: 'company contactEmail', value: 'company.contactEmail' },
+                    { label: 'user email', value: 'user.email' },
+                    { label: 'user firstName', value: 'user.firstName' },
+                    { label: 'user lastName', value: 'user.lastName' },
+                    { label: 'user phoneNumber', value: 'user.phoneNumber' },
+                    { label: 'user codiceFiscale', value: 'user.codiceFiscale' }
                 ]
         }
     }
@@ -134,11 +143,13 @@ const BuilderElementSettings = ({ closeSettings }) => {
             setSettings(klona(chosen.settings));
             setValidators(klona(chosen.validators));
             setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
+            setCriteria(chosen.criteria ? chosen.criteria : []);
         } else {
             setActiveElementData({});
             setSettings([]);
             setValidators({});
             setDynamicData('');
+            setCriteria([]);
         }
     }, [activeElement]);
 
@@ -156,16 +167,16 @@ const BuilderElementSettings = ({ closeSettings }) => {
                             : null}
                         {['textinput', 'datepicker'].includes(activeElementData.name)
                             ? <div className="formElementSettings__field">
-                            <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
-                            <Dropdown
-                                id="dynamicData"
-                                value={dynamicData}
-                                onChange={(e) => setDynamicData(e.value)}
-                                options={dynamicDataOptions(activeElementData.name)}
-                                optionLabel="label"
-                                optionValue="value"
-                                placeholder={__('Scegli', 'gepafin')}/>
-                        </div> : null}
+                                <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
+                                <Dropdown
+                                    id="dynamicData"
+                                    value={dynamicData}
+                                    onChange={(e) => setDynamicData(e.value)}
+                                    options={getDynamicDataOptions(activeElementData.name)}
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    placeholder={__('Scegli', 'gepafin')}/>
+                            </div> : null}
                     </TabPanel>
                     {!isEmpty(validators)
                         ? <TabPanel header={__('Validation', 'gepafin')}>
@@ -210,20 +221,20 @@ const BuilderElementSettings = ({ closeSettings }) => {
                                         </div> : null}
                                 </div>) : null}
                         </TabPanel> : null}
-                    {/*{['textinput', 'datepicker'].includes(activeElementData.name)
-                        ? <TabPanel header={__('Dati', 'gepafin')}>
-                            <div className="formElementSettings__field">
-                                <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
-                                <Dropdown
-                                    id="dynamicData"
-                                    value={[]}
-                                    onChange={(e) => onChangeDynamicData(e.value, 'dynamicData')}
-                                    options={customValidationOptions}
-                                    optionLabel="label"
-                                    optionValue="value"
-                                    placeholder={__('Scegli', 'gepafin')}/>
-                            </div>
-                    </TabPanel> : null}*/}
+                    <TabPanel header={__('Criteri', 'gepafin')}>
+                        <div className="formElementSettings__field">
+                            <label htmlFor="criteria">{__('Criteri di valutazione', 'gepafin')}</label>
+                            <MultiSelect
+                                id="criteria"
+                                value={criteria}
+                                onChange={(e) => onChangeCriteriaData(e.value)}
+                                options={criteriaOptions}
+                                optionLabel="label"
+                                optionValue="value"
+                                display="chip"
+                                placeholder={__('Scegli', 'gepafin')}/>
+                        </div>
+                    </TabPanel>
                 </TabView>
 
                 <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
diff --git a/src/pages/BandoFormsEdit/components/FormBuilder/index.js b/src/pages/BandoFormsEdit/components/FormBuilder/index.js
index cacf84e..95a8122 100644
--- a/src/pages/BandoFormsEdit/components/FormBuilder/index.js
+++ b/src/pages/BandoFormsEdit/components/FormBuilder/index.js
@@ -57,7 +57,7 @@ const FormBuilder = () => {
         <>
             <Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
                 <h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
-                {!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
+                {!isEmpty(activeElement) ? <BuilderElementSettings closeSettingsFn={closeSettings}/> : null}
             </Sidebar>
             <div className="formBuilder">
                 <div className="formBuilder__main">
diff --git a/src/pages/BandoFormsEdit/index.js b/src/pages/BandoFormsEdit/index.js
index 1233076..2519744 100644
--- a/src/pages/BandoFormsEdit/index.js
+++ b/src/pages/BandoFormsEdit/index.js
@@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { klona } from 'klona';
-import { isEmpty } from 'ramda';
+import { isEmpty, pathOr } from 'ramda';
 
 // store
 import { storeSet, storeGet, useStore } from '../../store';
@@ -21,6 +21,7 @@ import { Messages } from 'primereact/messages';
 // api
 import FormsService from '../../service/forms-service';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import BandoService from '../../service/bando-service';
 
 // TODO temp data
 //import { elementItems } from '../../tempData';
@@ -243,7 +244,20 @@ const BandoFormsEdit = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    const getBandoCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const criteria = pathOr([], ['data', 'criteria'], data);
+            const criteriaOptions = criteria.map(o => ({value: o.lookUpDataId, label: o.value}));
+            storeSet.main.bandoCriteria(criteriaOptions);
+        }
+    }
+
+    const errGetBandoCallback = (data) => {
+        set404FromErrorResponse(data);
+    }
+
     useEffect(() => {
+        const bandoId = getBandoId();
         const parsedFormId = parseInt(formId)
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
 
@@ -253,12 +267,14 @@ const BandoFormsEdit = () => {
         if (bandoFormId) {
             storeSet.main.setAsyncRequest();
             FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
+            BandoService.getBando(bandoId, getBandoCallback, errGetBandoCallback);
         }
 
         return () => {
             storeSet.main.formId(0);
             storeSet.main.formLabel('');
             storeSet.main.formElements([]);
+            storeSet.main.bandoCriteria([]);
         }
     }, [id, formId]);
 
diff --git a/src/store/initial.js b/src/store/initial.js
index c5aa75e..5cc368f 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -17,6 +17,7 @@ const initialStore = {
     elementItems: [],
     activeElement: '',
     draggingElementId: 0,
+    bandoCriteria: [],
     // flow
     flowData: [],
     flowForms: [],