- added criteria setting for form fields;
- added dynamic data setitng for form fields;
This commit is contained in:
Vitalii Kiiko
@@ -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) => {
|
||||
@@ -96,32 +100,37 @@ const BuilderElementSettings = ({ closeSettings }) => {
|
||||
setValidators(newValidators);
|
||||
}
|
||||
|
||||
const dynamicDataOptions = (type) => {
|
||||
const onChangeCriteriaData = (value) => {
|
||||
setCriteria(value);
|
||||
}
|
||||
|
||||
|
||||
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}/>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ const initialStore = {
|
||||
elementItems: [],
|
||||
activeElement: '',
|
||||
draggingElementId: 0,
|
||||
bandoCriteria: [],
|
||||
// flow
|
||||
flowData: [],
|
||||
flowForms: [],
|
||||
|
||||
Reference in New Issue
Block a user