- added setting enabling table in CSV report;
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { head, is, isEmpty, isNil, uniq } from 'ramda';
|
||||
|
||||
@@ -19,6 +19,7 @@ import ElementSettingChips from '../ElementSettingChips';
|
||||
import ElementSettingCriteriaTableColumns from '../ElementSettingCriteriaTableColumns';
|
||||
|
||||
import { mimeTypes } from '../../../../../../configData';
|
||||
import ElementSettingTableColumnsForCsv from '../ElementSettingTableColumnsForCsv';
|
||||
|
||||
|
||||
const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
|
||||
@@ -41,7 +42,8 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
|
||||
formula: __('Formula di calcolo automatico', 'gepafin'),
|
||||
isChecklistItem: __('Fa parte di "checklist"?', 'gepafin'),
|
||||
reportEnable: __('Aggiungere nel report CSV?', 'gepafin'),
|
||||
reportHeader: __('Nome della colonna nel CSV', 'gepafin')
|
||||
reportHeader: __('Nome della colonna nel CSV', 'gepafin'),
|
||||
reportColumns: __('', 'gepafin')
|
||||
}
|
||||
|
||||
const settingDescription = {
|
||||
@@ -120,11 +122,23 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
|
||||
return <InputSwitch
|
||||
checked={setting.value}
|
||||
onChange={(e) => changeFn(e.value, setting.name)}/>
|
||||
} else if (setting.name === 'reportColumns') {
|
||||
return <ElementSettingTableColumnsForCsv
|
||||
value={is(Object, setting.value) ? setting.value : {}}
|
||||
name={setting.name}
|
||||
bandoStatus={bandoStatus}
|
||||
setDataFn={updateDataFn}/>
|
||||
} else if (['variable'].includes(setting.name)) {
|
||||
return <ElementSettingChips
|
||||
restrictedValues={[]}
|
||||
changeFn={(value) => changeFn(value, setting.name)}
|
||||
value={setting.value}/>
|
||||
} else if (setting.name === 'table_columns') {
|
||||
return <ElementSettingTableColumns
|
||||
value={is(Object, setting.value) ? setting.value : {}}
|
||||
name={setting.name}
|
||||
bandoStatus={bandoStatus}
|
||||
setDataFn={updateDataFn}/>
|
||||
} else {
|
||||
return <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
|
||||
value={setting.value}
|
||||
|
||||
@@ -13,6 +13,7 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
|
||||
// tools
|
||||
import uniqid from '../../../../../../helpers/uniqid';
|
||||
import removeKey from '../../../../../../helpers/removeKey';
|
||||
import { klona } from 'klona';
|
||||
|
||||
const ElementSettingTableColumns = ({
|
||||
value,
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { head, pathOr } from 'ramda';
|
||||
|
||||
// components
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
|
||||
// store
|
||||
import { storeGet } from '../../../../../../store';
|
||||
|
||||
const ElementSettingTableColumnsForCsv = ({
|
||||
name,
|
||||
setDataFn
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
const canBeEnabled = stateFieldData.filter(o => o.predefined).length > 0;
|
||||
|
||||
const onInputChange = (e, index) => {
|
||||
const { value } = e.target;
|
||||
const newData = stateFieldData.map((o, i) => {
|
||||
if (i === index) {
|
||||
o.labelCsv = value;
|
||||
}
|
||||
return o;
|
||||
})
|
||||
setStateFieldData(newData);
|
||||
}
|
||||
|
||||
const setChecked = (value, index) => {
|
||||
let name = '';
|
||||
const newData = stateFieldData.map((o, i) => {
|
||||
if (i === index) {
|
||||
o.enableCsv = value;
|
||||
name = o.name;
|
||||
}
|
||||
return o;
|
||||
});
|
||||
|
||||
setStateFieldData(newData);
|
||||
}
|
||||
|
||||
const properFields = useCallback((item, i) => {
|
||||
return <>
|
||||
<div>
|
||||
<InputText
|
||||
value={item.label}
|
||||
disabled={true}
|
||||
placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
|
||||
onInput={(e) => onInputChange(e, i)}/>
|
||||
</div>
|
||||
<div>
|
||||
<InputText
|
||||
value={item.labelCsv}
|
||||
disabled={!canBeEnabled}
|
||||
placeholder={item.label}
|
||||
onInput={(e) => onInputChange(e, i)}/>
|
||||
</div>
|
||||
<div>
|
||||
<InputSwitch
|
||||
checked={item.enableCsv}
|
||||
disabled={!canBeEnabled}
|
||||
onChange={(e) => setChecked(e.value, i)}/>
|
||||
</div>
|
||||
</>
|
||||
}, [canBeEnabled]);
|
||||
|
||||
useEffect(() => {
|
||||
const settings = storeGet('chosenFieldSettings');
|
||||
let newValue = []
|
||||
|
||||
if (settings) {
|
||||
const setting = head(settings.filter(o => o.name === 'table_columns'));
|
||||
const settingReports = head(settings.filter(o => o.name === 'reportColumns'));
|
||||
const settingData = pathOr([], ['value', 'stateFieldData'], setting);
|
||||
const settingReportData = pathOr([], ['value'], settingReports);
|
||||
const canBeEnabled = settingData.filter(o => o.predefined).length > 0;
|
||||
newValue = settingData.map((o) => {
|
||||
const existing = pathOr({}, [], head(settingReportData.filter(s => s.name === o.name)));
|
||||
const existingEnabled = pathOr(false, ['enableCsv'], existing);
|
||||
return {
|
||||
...o,
|
||||
...existing,
|
||||
predefined: o.predefined,
|
||||
enableCsv: !canBeEnabled ? false : existingEnabled
|
||||
}
|
||||
});
|
||||
}
|
||||
setStateFieldData(newValue);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setDataFn(name, stateFieldData);
|
||||
}, [stateFieldData]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!canBeEnabled
|
||||
? <p>{__('Almeno una colonna deve essere predefinita! ⚠️')}</p> : null}
|
||||
<div className="formElementSettings__repeater">
|
||||
{stateFieldData.length > 0
|
||||
? <div className="formElementSettings__repeaterItem tableRowCsv">
|
||||
<div>{__('Colonna', 'gepafin')}</div>
|
||||
<div>{__('Header CSV', 'gepafin')}</div>
|
||||
<div>{__('Abilitato?', 'gepafin')}</div>
|
||||
</div> : null}
|
||||
{stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem tableRowCsv">
|
||||
{properFields(o, i)}
|
||||
</div>)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ElementSettingTableColumnsForCsv;
|
||||
@@ -54,6 +54,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
||||
});
|
||||
|
||||
setSettings(newSettings);
|
||||
storeSet('chosenFieldSettings', newSettings);
|
||||
}
|
||||
|
||||
const onUpdateOptions = (name, value) => {
|
||||
@@ -67,6 +68,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
||||
});
|
||||
|
||||
setSettings(newSettings);
|
||||
storeSet('chosenFieldSettings', newSettings);
|
||||
}
|
||||
|
||||
const saveSettings = () => {
|
||||
@@ -131,6 +133,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
||||
if (chosen) {
|
||||
setActiveElementData(klona(chosen));
|
||||
setSettings(settings);
|
||||
storeSet('chosenFieldSettings', settings);
|
||||
setValidators(klona(chosen.validators));
|
||||
setDynamicData(chosen.dynamicData ? chosen.dynamicData : '');
|
||||
setCriteria(chosen.criteria ? chosen.criteria : []);
|
||||
@@ -150,7 +153,9 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
||||
<TabPanel header={__('Presentation', 'gepafin')}>
|
||||
{settings
|
||||
? settings
|
||||
.filter(o => !['variable', 'formula', 'reportEnable', 'reportHeader'].includes(o.name))
|
||||
.filter(o => ![
|
||||
'variable', 'formula', 'reportEnable', 'reportHeader', 'reportColumns'
|
||||
].includes(o.name))
|
||||
.map((o) => <ElementSetting
|
||||
key={o.name}
|
||||
setting={o}
|
||||
@@ -259,7 +264,7 @@ const BuilderElementSettings = ({ closeSettingsFn, callStatus, context }) => {
|
||||
<TabPanel header={__('Rapporto CSV', 'gepafin')}>
|
||||
{settings
|
||||
? settings
|
||||
.filter(o => ['reportEnable', 'reportHeader'].includes(o.name))
|
||||
.filter(o => ['reportEnable', 'reportHeader', 'reportColumns'].includes(o.name))
|
||||
.map((o) => <ElementSetting
|
||||
key={o.name}
|
||||
setting={o}
|
||||
|
||||
@@ -27,7 +27,7 @@ import BandoService from '../../service/bando-service';
|
||||
import DocumentCategoryService from '../../service/document-category-service';
|
||||
|
||||
// TODO temp data
|
||||
//import { elementItems } from '../../tempData';
|
||||
import { elementItems } from '../../tempData';
|
||||
|
||||
const BandoFormsEdit = () => {
|
||||
const { id, formId } = useParams();
|
||||
@@ -220,12 +220,12 @@ const BandoFormsEdit = () => {
|
||||
|
||||
const getElementItemsCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
/*storeSet('elementItems', elementItems
|
||||
.filter(o => o.id !== 22)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder));*/
|
||||
storeSet('elementItems', data.data
|
||||
storeSet('elementItems', elementItems
|
||||
.filter(o => o.id !== 22)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder));
|
||||
/*storeSet('elementItems', data.data
|
||||
.filter(o => o.id !== 22)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder));*/
|
||||
}
|
||||
storeSet('unsetAsyncRequest');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user