- added criteria setting for form fields;

- added dynamic data setitng for form fields;
2024-10-15 15:20:27 +02:00
parent a5b817e999
commit 782ec5fda7
4 changed files with 77 additions and 49 deletions
--- 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}/>
--- 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">
--- 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]);

--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -17,6 +17,7 @@ const initialStore = {
    elementItems: [],
    activeElement: '',
    draggingElementId: 0,
+    bandoCriteria: [],
    // flow
    flowData: [],
    flowForms: [],