287 lines
14 KiB
JavaScript
287 lines
14 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { head, isEmpty, isNil, uniq } from 'ramda';
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
import { klona } from 'klona';
|
|
import { wrap } from 'object-path-immutable';
|
|
|
|
// store
|
|
import { storeGet, storeSet, useStoreValue } from '../../../../store';
|
|
|
|
// components
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Button } from 'primereact/button';
|
|
import { Tag } from 'primereact/tag';
|
|
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';
|
|
|
|
import { dynamicDataOptions } from '../../../../configData';
|
|
|
|
const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
|
const elements = useStoreValue('formElements');
|
|
const activeElement = useStoreValue('activeElement');
|
|
const criteriaOptions = useStoreValue('bandoCriteria');
|
|
const [activeElementData, setActiveElementData] = useState({});
|
|
const [settings, setSettings] = useState([]);
|
|
const [validators, setValidators] = useState({});
|
|
const [dynamicData, setDynamicData] = useState([]);
|
|
const [criteria, setCriteria] = useState([]);
|
|
const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength'];
|
|
const customValidationOptions = [
|
|
{ value: 'isPIVA', label: 'isPIVA' },
|
|
{ value: 'isCodiceFiscale', label: 'isCodiceFiscale' },
|
|
{ value: 'isCAP', label: 'isCAP' },
|
|
{ value: 'isIBAN', label: 'isIBAN' },
|
|
{ value: 'isEmail', label: 'isEmail' },
|
|
{ value: 'isEmailPEC', label: 'isEmailPEC' },
|
|
{ value: 'isUrl', label: 'isUrl' },
|
|
{ value: 'isMarcaDaBollo', label: 'isMarcaDaBollo' },
|
|
{ value: 'minChecks', label: 'minChecks' },
|
|
{ value: 'maxChecks', label: 'maxChecks' },
|
|
{ value: 'nonEmptyTables', label: 'nonEmptyTables' }
|
|
]
|
|
|
|
const onChange = (value, name) => {
|
|
const newSettings = settings
|
|
.map(o => {
|
|
if (o.name === name) {
|
|
o.value = value;
|
|
}
|
|
|
|
return o;
|
|
});
|
|
|
|
setSettings(newSettings);
|
|
storeSet('chosenFieldSettings', newSettings);
|
|
}
|
|
|
|
const onUpdateOptions = (name, value) => {
|
|
const newSettings = settings
|
|
.map(o => {
|
|
if (o.name === name) {
|
|
o.value = value;
|
|
}
|
|
|
|
return o;
|
|
});
|
|
|
|
setSettings(newSettings);
|
|
storeSet('chosenFieldSettings', newSettings);
|
|
}
|
|
|
|
const saveSettings = () => {
|
|
let newActiveElementData = klona(activeElementData);
|
|
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('formElements', newElements);
|
|
closeSettingsFn();
|
|
}
|
|
|
|
const showField = (value, key) => {
|
|
let newValidators = klona(validators);
|
|
if (value) {
|
|
newValidators[key] = '';
|
|
} else {
|
|
newValidators[key] = null;
|
|
}
|
|
setValidators(newValidators);
|
|
}
|
|
|
|
const toggleRequired = (value, key) => {
|
|
let newValidators = klona(validators);
|
|
newValidators[key] = value;
|
|
setValidators(newValidators);
|
|
}
|
|
|
|
const onChangeValidator = (value, name) => {
|
|
let newValidators = klona(validators);
|
|
newValidators[name] = value;
|
|
setValidators(newValidators);
|
|
}
|
|
|
|
const onChangeCriteriaData = (value) => {
|
|
setCriteria(value);
|
|
}
|
|
|
|
const getDynamicDataOptions = (type) => {
|
|
return dynamicDataOptions[type] ?? [];
|
|
}
|
|
|
|
useEffect(() => {
|
|
const chosen = head(elements.filter(o => o.id === activeElement));
|
|
const elementItems = storeGet('elementItems');
|
|
const chosenElementItemCfg = head(elementItems.filter(o => o.name === chosen.name));
|
|
let settings = [];
|
|
|
|
if (chosenElementItemCfg && chosenElementItemCfg.settings) {
|
|
settings = chosenElementItemCfg.settings.map((o) => {
|
|
const setting = head(chosen.settings.filter(s => s.name === o.name));
|
|
return setting ? klona(setting) : klona(o)
|
|
});
|
|
}
|
|
|
|
settings = uniq([...settings, ...chosen.settings]).filter(o => context === 'call'
|
|
? !['isRequestedAmount', 'isDelegation', ''].includes(o.name)
|
|
: !['isChecklistItem'].includes(o.name));
|
|
|
|
if (chosen) {
|
|
setActiveElementData(klona(chosen));
|
|
setSettings(settings);
|
|
storeSet('chosenFieldSettings', settings);
|
|
setValidators(klona(chosen.validators));
|
|
setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
|
|
setCriteria(chosen.criteria ? chosen.criteria : []);
|
|
} else {
|
|
setActiveElementData({});
|
|
setSettings([]);
|
|
setValidators({});
|
|
setDynamicData([]);
|
|
setCriteria([]);
|
|
}
|
|
}, [activeElement]);
|
|
|
|
return (activeElementData
|
|
? <div className="formElementSettings">
|
|
<Tag value={activeElementData.name} severity="info"/>
|
|
<TabView className="formElementSettings__tabs">
|
|
<TabPanel header={__('Presentation', 'gepafin')}>
|
|
{settings
|
|
? settings
|
|
.filter(o => ![
|
|
'variable', 'formula', 'reportEnable', 'reportHeader', 'reportColumns'
|
|
].includes(o.name))
|
|
.map((o) => <ElementSetting
|
|
key={o.name}
|
|
setting={o}
|
|
callStatus={callStatus}
|
|
changeFn={onChange}
|
|
updateDataFn={onUpdateOptions}/>)
|
|
: null}
|
|
{!isNil(dynamicDataOptions[activeElementData.name]) && context === 'application'
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor="dynamicData">{__('Dati dinamici', 'gepafin')}</label>
|
|
<Dropdown
|
|
id="dynamicData"
|
|
value={dynamicData}
|
|
filter
|
|
onChange={(e) => setDynamicData(e.value)}
|
|
options={getDynamicDataOptions(activeElementData.name)}
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
showClear
|
|
placeholder={__('Scegli', 'gepafin')}/>
|
|
</div> : null}
|
|
</TabPanel>
|
|
{!isEmpty(validators)
|
|
? <TabPanel header={__('Validation', 'gepafin')}>
|
|
{validators
|
|
? Object.keys(validators).map((k) => <div
|
|
className="formElementSettings__field" key={k}>
|
|
{k === 'isRequired'
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor={k}>{__('Obligatorio?', 'gepafin')}</label>
|
|
<InputSwitch
|
|
checked={validators[k]}
|
|
onChange={(e) => toggleRequired(e.value, k)}/>
|
|
</div>
|
|
: null}
|
|
{numberBasedValidatorFields.includes(k) || 'pattern' === k || 'custom' === k
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
|
|
<InputSwitch
|
|
checked={!isNil(validators[k])}
|
|
onChange={(e) => showField(e.value, k)}/>
|
|
</div>
|
|
: null}
|
|
{k === 'custom' && !isNil(validators[k])
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor={k}>{__('Personalizzato', 'gepafin')}</label>
|
|
<Dropdown
|
|
id={`enable_${k}`}
|
|
value={validators[k]}
|
|
onChange={(e) => onChangeValidator(e.value, k)}
|
|
options={customValidationOptions}
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
showClear
|
|
placeholder={__('Scegli', 'gepafin')}/>
|
|
</div>
|
|
: null}
|
|
{'pattern' === k && !isNil(validators[k])
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor={k}>{k}</label>
|
|
<InputText id={k} aria-describedby={`${k}-help`}
|
|
value={validators[k]}
|
|
onChange={(e) => onChangeValidator(e.target.value, k)}/>
|
|
</div> : null}
|
|
{numberBasedValidatorFields.includes(k) && !isNil(validators[k])
|
|
? <div className="formElementSettings__field">
|
|
<label htmlFor={k}>{k}</label>
|
|
<InputText id={k}
|
|
aria-describedby={`${k}-help`}
|
|
value={validators[k]}
|
|
keyfilter="int"
|
|
placeholder="0"
|
|
onChange={(e) => onChangeValidator(e.target.value, k)}/>
|
|
</div> : null}
|
|
</div>) : null}
|
|
</TabPanel> : null}
|
|
{context === 'application'
|
|
? <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> : null}
|
|
{settings && settings
|
|
.filter(o => ['variable', 'formula'].includes(o.name)).length > 0
|
|
? <TabPanel header={__('Calcolo', 'gepafin')}>
|
|
{settings
|
|
? settings
|
|
.filter(o => ['variable', 'formula'].includes(o.name))
|
|
.map((o) => <ElementSetting
|
|
key={o.name}
|
|
setting={o}
|
|
callStatus={callStatus}
|
|
changeFn={onChange}
|
|
updateDataFn={onUpdateOptions}/>)
|
|
: null}
|
|
</TabPanel> : null}
|
|
<TabPanel header={__('Rapporto CSV', 'gepafin')}>
|
|
{settings
|
|
? settings
|
|
.filter(o => ['reportEnable', 'reportHeader', 'reportColumns'].includes(o.name))
|
|
.map((o) => <ElementSetting
|
|
key={o.name}
|
|
setting={o}
|
|
callStatus={callStatus}
|
|
changeFn={onChange}
|
|
updateDataFn={onUpdateOptions}/>)
|
|
: null}
|
|
</TabPanel>
|
|
</TabView>
|
|
|
|
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|
<Button label={__('Annulla', 'gepafin')} onClick={closeSettingsFn} severity="danger"/>
|
|
<Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
|
|
</div>
|
|
</div>
|
|
: null
|
|
)
|
|
}
|
|
|
|
export default BuilderElementSettings; |