- 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) => {
|
||||
@@ -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}/>
|
||||
|
||||
Reference in New Issue
Block a user