- added setting enabling table in CSV report;

src/assets/scss/components/formBuilder.scss

@@ -256,6 +256,10 @@
     grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr;
   }
 
+  &.tableRowCsv {
+    grid-template-columns: 3fr 5fr 1fr;
+  }
+
   > div {
     display: flex;
     align-items: center;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js

@@ -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}

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js

@@ -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,

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumnsForCsv/index.js

@@ -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;

src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js

@@ -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}

src/pages/BandoFormsEdit/index.js

@@ -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
+            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('elementItems', data.data
+                .filter(o => o.id !== 22)
+                .sort((a, b) => a.sortOrder - b.sortOrder));*/
         }
         storeSet('unsetAsyncRequest');
     }

src/store/initial.js

@@ -21,6 +21,7 @@ const initialStore = {
     selectedElement: '',
     draggingElementId: 0,
     bandoCriteria: [],
+    chosenFieldSettings: [],
     // flow
     flowData: [],
     flowForms: [],

src/tempData.js

@@ -576,8 +576,8 @@ export const elementItems = [
                 value: false
             },
             {
-                name: "reportHeader",
+                name: "reportColumns",
-                value: ""
+                value: []
             }
         ],
         validators: {