BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added criteria setting for form fields;

Browse Source 
- added dynamic data setitng for form fields;
This commit is contained in:
Vitalii Kiiko
2024-10-15 15:20:27 +02:00
parent a5b817e999
commit 782ec5fda7
4 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
View File

@@ -15,14 +15,17 @@ import { TabView, TabPanel } from 'primereact/tabview';
import { InputSwitch } from 'primereact/inputswitch'; import { InputSwitch } from 'primereact/inputswitch';
import ElementSetting from './components/ElementSetting'; import ElementSetting from './components/ElementSetting';
import { Dropdown } from 'primereact/dropdown'; import { Dropdown } from 'primereact/dropdown';
import { MultiSelect } from 'primereact/multiselect';
const BuilderElementSettings = ({ closeSettings }) => { const BuilderElementSettings = ({ closeSettingsFn }) => {
const elements = useStore().main.formElements(); const elements = useStore().main.formElements();
const activeElement = useStore().main.activeElement(); const activeElement = useStore().main.activeElement();
const criteriaOptions = useStore().main.bandoCriteria();
const [activeElementData, setActiveElementData] = useState({}); const [activeElementData, setActiveElementData] = useState({});
const [settings, setSettings] = useState([]); const [settings, setSettings] = useState([]);
const [validators, setValidators] = 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 textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern'];
const customValidationOptions = [ const customValidationOptions = [
{ value: 'isPIVA', label: 'isPIVA' }, { value: 'isPIVA', label: 'isPIVA' },
@@ -69,9 +72,10 @@ const BuilderElementSettings = ({ closeSettings }) => {
newActiveElementData = wrap(newActiveElementData).set(['settings'], settings).value(); newActiveElementData = wrap(newActiveElementData).set(['settings'], settings).value();
newActiveElementData = wrap(newActiveElementData).set(['validators'], validators).value(); newActiveElementData = wrap(newActiveElementData).set(['validators'], validators).value();
newActiveElementData = wrap(newActiveElementData).set(['dynamicData'], dynamicData).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); const newElements = elements.map(o => o.id === newActiveElementData.id ? newActiveElementData : o);
storeSet.main.formElements(newElements); storeSet.main.formElements(newElements);
closeSettings(); closeSettingsFn();
} }
const showField = (value, key) => { const showField = (value, key) => {
@@ -96,32 +100,37 @@ const BuilderElementSettings = ({ closeSettings }) => {
setValidators(newValidators); setValidators(newValidators);
} }
const dynamicDataOptions = (type) => { const onChangeCriteriaData = (value) => {
setCriteria(value);
}
const getDynamicDataOptions = (type) => {
switch (type) { switch (type) {
case 'datepicker' : case 'datepicker' :
return [ return [
{label: 'user dateOfBirth', value: 'user.dateOfBirth'} { label: 'user dateOfBirth', value: 'user.dateOfBirth' }
] ]
default : default :
return [ return [
{label: 'company name', value: 'company.companyName'}, { label: 'company name', value: 'company.companyName' },
{label: 'company vatNumber', value: 'company.vatNumber'}, { label: 'company vatNumber', value: 'company.vatNumber' },
{label: 'company codiceFiscale', value: 'company.codiceFiscale'}, { label: 'company codiceFiscale', value: 'company.codiceFiscale' },
{label: 'company address', value: 'company.address'}, { label: 'company address', value: 'company.address' },
{label: 'company phoneNumber', value: 'company.phoneNumber'}, { label: 'company phoneNumber', value: 'company.phoneNumber' },
{label: 'company city', value: 'company.city'}, { label: 'company city', value: 'company.city' },
{label: 'company province', value: 'company.province'}, { label: 'company province', value: 'company.province' },
{label: 'company cap', value: 'company.cap'}, { label: 'company cap', value: 'company.cap' },
{label: 'company country', value: 'company.country'}, { label: 'company country', value: 'company.country' },
{label: 'company pec', value: 'company.pec'}, { label: 'company pec', value: 'company.pec' },
{label: 'company email', value: 'company.email'}, { label: 'company email', value: 'company.email' },
{label: 'company contactName', value: 'company.contactName'}, { label: 'company contactName', value: 'company.contactName' },
{label: 'company contactEmail', value: 'company.contactEmail'}, { label: 'company contactEmail', value: 'company.contactEmail' },
{label: 'user email', value: 'user.email'}, { label: 'user email', value: 'user.email' },
{label: 'user firstName', value: 'user.firstName'}, { label: 'user firstName', value: 'user.firstName' },
{label: 'user lastName', value: 'user.lastName'}, { label: 'user lastName', value: 'user.lastName' },
{label: 'user phoneNumber', value: 'user.phoneNumber'}, { label: 'user phoneNumber', value: 'user.phoneNumber' },
{label: 'user codiceFiscale', value: 'user.codiceFiscale'} { label: 'user codiceFiscale', value: 'user.codiceFiscale' }
] ]
} }
} }
@@ -134,11 +143,13 @@ const BuilderElementSettings = ({ closeSettings }) => {
setSettings(klona(chosen.settings)); setSettings(klona(chosen.settings));
setValidators(klona(chosen.validators)); setValidators(klona(chosen.validators));
setDynamicData(chosen.dynamicData ? chosen.dynamicData : ''); setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
setCriteria(chosen.criteria ? chosen.criteria : []);
} else { } else {
setActiveElementData({}); setActiveElementData({});
setSettings([]); setSettings([]);
setValidators({}); setValidators({});
setDynamicData(''); setDynamicData('');
setCriteria([]);
} }
}, [activeElement]); }, [activeElement]);
@@ -156,16 +167,16 @@ const BuilderElementSettings = ({ closeSettings }) => {
: null} : null}
{['textinput', 'datepicker'].includes(activeElementData.name) {['textinput', 'datepicker'].includes(activeElementData.name)
? <div className="formElementSettings__field"> ? <div className="formElementSettings__field">
<label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label> <label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
<Dropdown <Dropdown
id="dynamicData" id="dynamicData"
value={dynamicData} value={dynamicData}
onChange={(e) => setDynamicData(e.value)} onChange={(e) => setDynamicData(e.value)}
options={dynamicDataOptions(activeElementData.name)} options={getDynamicDataOptions(activeElementData.name)}
optionLabel="label" optionLabel="label"
optionValue="value" optionValue="value"
placeholder={__('Scegli', 'gepafin')}/> placeholder={__('Scegli', 'gepafin')}/>
</div> : null} </div> : null}
</TabPanel> </TabPanel>
{!isEmpty(validators) {!isEmpty(validators)
? <TabPanel header={__('Validation', 'gepafin')}> ? <TabPanel header={__('Validation', 'gepafin')}>
@@ -210,20 +221,20 @@ const BuilderElementSettings = ({ closeSettings }) => {
</div> : null} </div> : null}
</div>) : null} </div>) : null}
</TabPanel> : null} </TabPanel> : null}
{/*{['textinput', 'datepicker'].includes(activeElementData.name) <TabPanel header={__('Criteri', 'gepafin')}>
? <TabPanel header={__('Dati', 'gepafin')}> <div className="formElementSettings__field">
<div className="formElementSettings__field"> <label htmlFor="criteria">{__('Criteri di valutazione', 'gepafin')}</label>
<label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label> <MultiSelect
<Dropdown id="criteria"
id="dynamicData" value={criteria}
value={[]} onChange={(e) => onChangeCriteriaData(e.value)}
onChange={(e) => onChangeDynamicData(e.value, 'dynamicData')} options={criteriaOptions}
options={customValidationOptions} optionLabel="label"
optionLabel="label" optionValue="value"
optionValue="value" display="chip"
placeholder={__('Scegli', 'gepafin')}/> placeholder={__('Scegli', 'gepafin')}/>
</div> </div>
</TabPanel> : null}*/} </TabPanel>
</TabView> </TabView>
<Button label={__('Salva', 'gepafin')} onClick={saveSettings}/> <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>

2
src/pages/BandoFormsEdit/components/FormBuilder/index.js
View File

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

18
src/pages/BandoFormsEdit/index.js
View File

@@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import { DndProvider } from 'react-dnd'; import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend'; import { HTML5Backend } from 'react-dnd-html5-backend';
import { klona } from 'klona'; import { klona } from 'klona';
import { isEmpty } from 'ramda'; import { isEmpty, pathOr } from 'ramda';
// store // store
import { storeSet, storeGet, useStore } from '../../store'; import { storeSet, storeGet, useStore } from '../../store';
@@ -21,6 +21,7 @@ import { Messages } from 'primereact/messages';
// api // api
import FormsService from '../../service/forms-service'; import FormsService from '../../service/forms-service';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse'; import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import BandoService from '../../service/bando-service';
// TODO temp data // TODO temp data
//import { elementItems } from '../../tempData'; //import { elementItems } from '../../tempData';
@@ -243,7 +244,20 @@ const BandoFormsEdit = () => {
storeSet.main.unsetAsyncRequest(); 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(() => { useEffect(() => {
const bandoId = getBandoId();
const parsedFormId = parseInt(formId) const parsedFormId = parseInt(formId)
const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0; const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
@@ -253,12 +267,14 @@ const BandoFormsEdit = () => {
if (bandoFormId) { if (bandoFormId) {
storeSet.main.setAsyncRequest(); storeSet.main.setAsyncRequest();
FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks); FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
BandoService.getBando(bandoId, getBandoCallback, errGetBandoCallback);
} }
return () => { return () => {
storeSet.main.formId(0); storeSet.main.formId(0);
storeSet.main.formLabel(''); storeSet.main.formLabel('');
storeSet.main.formElements([]); storeSet.main.formElements([]);
storeSet.main.bandoCriteria([]);
} }
}, [id, formId]); }, [id, formId]);

1
src/store/initial.js
View File

@@ -17,6 +17,7 @@ const initialStore = {
elementItems: [], elementItems: [],
activeElement: '', activeElement: '',
draggingElementId: 0, draggingElementId: 0,
bandoCriteria: [],
// flow // flow
flowData: [], flowData: [],
flowForms: [], flowForms: [],