Merge pull request #29 from Kitzanos/feature/30-better-tables

Feature/30 better tables

src/assets/scss/components/formBuilder.scss

@@ -191,16 +191,109 @@
 }
 
 .formElementSettings__repeater {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 1fr;
   gap: 0.5rem;
 }
 
 .formElementSettings__repeaterItem {
+  display: grid;
+  grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr;
+  gap: 12px;
 
+  > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    input, select, .p-dropdown {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
 }
 
-.formElementSettings__subRepeater {
+.formElementSettings__subRepeaterWrapper {
-  padding: 10px 20px;
+  display: grid;
-  background-color: #f9f9f9;
+  grid-template-columns: 1fr;
+  gap: 7px;
+}
+
+.formElementSettings__subRepeaterItem {
+  display: grid;
+  grid-template-columns: 9.3fr 0.7fr;
+  gap: 12px;
+
+  > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    input, select, .p-dropdown {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.formElementSettings__repeaterItemIconBtn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 2rem;
+  color: var(--table-border-color);
+
+  i {
+    font-size: 2rem;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: var(--menuitem-active-background);
+  }
+
+  &:not([data-active="false"]) {
+    color: var(--menuitem-active-background);
+  }
+}
+
+.formElementSettings__lastRowHeader {
+  display: grid;
+  grid-template-columns: 8.3fr 1.7fr;
+  gap: 7px;
+}
+
+.formElementSettings__lastRowHeaderTitle {
+  display: flex;
+  height: 40px;
+  padding: 10.5px 17.5px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  color: white;
+}
+
+.formElementSettings__lastRowItem {
+  display: grid;
+  grid-template-columns: 1.7fr 8.3fr;
+  gap: 7px;
+
+  > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    input, select, .p-dropdown {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
 }

src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js

@@ -0,0 +1,25 @@
+const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onBlur = (e) => {
+        table.options.meta?.updateData(index, id, e.target.value);
+    };
+
+    const onFocus = (e) => {
+        e.target.select();
+    }
+
+    return (
+        <input
+            disabled={disabled}
+            value={initialValue ?? ''}
+            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default DefaultCell;

src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js

@@ -0,0 +1,21 @@
+import { head, isEmpty, isNil, sum } from 'ramda';
+
+const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => {
+    const cellData = head(lastRows.filter(o => !isNil(o[columnId])));
+    let cellValue = cellData[columnId];
+
+    if (columnMeta.enableFormula) {
+        const getAllRowsValues = getColumnDataFn(columnId)
+            .map(v => isEmpty(v) || isNil(v) ? 0 : v);
+
+        if (cellValue === 'sum') {
+            cellValue = sum(getAllRowsValues);
+        } else {
+            cellValue = 0;
+        }
+    }
+
+    return <td>{cellValue}</td>;
+};
+
+export default LastRowCell;

src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js

@@ -0,0 +1,34 @@
+const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onBlur = (e) => {
+        const numValue = e.target.value === 0 ? null : Number(e.target.value);
+        table.options.meta?.updateData(index, id, numValue);
+    };
+
+    const onFocus = (e) => {
+        e.target.select();
+    }
+
+    const onChange = (e) => {
+        if (e.target.value === 0 || !isNaN(e.target.value)) {
+            table.options.meta?.updateData(index, id, e.target.value);
+        }
+    };
+
+    return (
+        <input
+            type="number"
+            disabled={disabled}
+            value={initialValue ?? 0}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            step="any"
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default NumericFormulaCell;

src/components/FormField/components/Table/RenderTable/index.js

@@ -1,31 +1,22 @@
 import React from 'react';
 import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { wrap } from 'object-path-immutable';
+import { isEmpty } from 'ramda';
 
-const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
+// components
+import DefaultCell from './components/DefaultCell';
+import LastRowCell from './components/LastRowCell';
+
+const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
     const table = useReactTable({
         data,
         columns,
         defaultColumn: {
-            cell: ({ getValue, row: { index }, column: { id }, table }) => {
+            cell: DefaultCell
-                const initialValue = getValue();
-
-                const onBlur = (e) => {
-                    table.options.meta?.updateData(index, id, e.target.value);
-                };
-
-                return (
-                    <input
-                        disabled={disabled}
-                        value={initialValue ? initialValue : ''}
-                        onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
-                        onBlur={onBlur}
-                    />
-                );
-            },
         },
         getCoreRowModel: getCoreRowModel(),
         meta: {
+            disabled,
             updateData: (rowIndex, columnId, value) => {
                 const newRowsData = wrap(data).set([rowIndex, columnId], value).value();
                 setRowsFn(newRowsData);
@@ -33,6 +24,11 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
         }
     });
 
+    const getColumnData = (columnId) => {
+        const rows = table.getRowModel().rows;
+        return rows.map(row => row.getValue(columnId));
+    };
+
     return (
         <table>
             <thead>
@@ -72,6 +68,16 @@ const RenderTable = ({ data, columns, setRowsFn, disabled }) => {
                     </tr>
                 );
             })}
+            {!isEmpty(lastRow)
+                ? <tr>
+                    {columns.map((o) => <LastRowCell
+                        key={o.accessorKey}
+                        columnId={o.accessorKey}
+                        columnMeta={o.meta}
+                        lastRows={lastRow}
+                        getColumnDataFn={getColumnData}/>)}
+                </tr>
+                : null}
             </tbody>
         </table>
     )

src/components/FormField/components/Table/index.js

@@ -10,6 +10,7 @@ import { Button } from 'primereact/button';
 import RenderTable from './RenderTable';
 import { klona } from 'klona';
 import { nonEmptyTables } from '../../../../helpers/validators';
+import NumericFormulaCell from './RenderTable/components/NumericFormulaCell';
 
 const Table = ({
                    fieldName,
@@ -25,6 +26,7 @@ const Table = ({
     const [columnsCfg, setColumnsCfg] = useState([]);
     const [rowsCfg, setRowsCfg] = useState([]);
     const [columns, setColumns] = useState([]);
+    const [lastRow, setLastRow] = useState([]);
     const [rows, setRows] = useState(null);
     const [shouldDisableNewRows, setShouldDisableNewRows] = useState(false);
     const [rowIndexToDelete, rowRowIndexToDelete] = useState(null);
@@ -72,19 +74,23 @@ const Table = ({
 
     useEffect(() => {
         let shouldDisableNewRows = false;
-
         let newColumns = columnsCfg.map((o) => {
             const item = {
                 accessorKey: o.name,
                 header: () => o.label,
-                footer: (props) => props.column.id
+                footer: (props) => props.column.id,
+                meta: {
+                    predefined: o.predefined,
+                    enableFormula: o.enableFormula,
+                    fieldtype: o.fieldtype
+                }
             }
 
             if (o.predefined) {
                 shouldDisableNewRows = true;
-                item.cell = (info) => {
+                item.cell = (info) => info.getValue();
-                    return info.getValue();
+            } else if (o.enableFormula || o.fieldtype === 'numeric') {
-                }
+                item.cell = NumericFormulaCell;
             }
 
             return item;
@@ -97,7 +103,7 @@ const Table = ({
                 accessorKey: 'actions',
                 header: () => '',
                 footer: (props) => props.column.id,
-                cell: ({row: { index }}) => <Button
+                cell: ({ row: { index } }) => <Button
                     disabled={disabled}
                     type="button"
                     icon="pi pi-times"
@@ -108,7 +114,7 @@ const Table = ({
         }
 
         setColumns(newColumns);
-    }, [columnsCfg]);
+    }, [columnsCfg, disabled]);
 
     useEffect(() => {
         setRows(rowsCfg);
@@ -125,7 +131,26 @@ const Table = ({
         rowsData = isEmpty(rowsData) ? [obj] : rowsData;
         setColumnsCfg(stateFieldData);
         setRowsCfg(rowsData);
-    }, [tableColumns]);
+
+        let lastRowData = stateFieldData.reduce((acc, cur) => {
+            const value = cur.enableFormula ? cur.lastRowFormula : (cur.lastRowText ? cur.lastRowText : '');
+            acc.push({ [cur.name]: value });
+            return acc;
+        }, []);
+
+        if (!shouldDisableNewRows) {
+            lastRowData.push({ actions: '' })
+        }
+
+        const lastRowValues = lastRowData
+            .map(o => {
+                const values = Object.values(o);
+                return values[0];
+            })
+            .filter(v => !isEmpty(v));
+
+        setLastRow(!isEmpty(lastRowValues) ? lastRowData : []);
+    }, [tableColumns, shouldDisableNewRows]);
 
     useEffect(() => {
         if (!equal(rows, defaultValue)) {
@@ -144,7 +169,12 @@ const Table = ({
                 {label}{config.required || config.isRequired || (config.validate && config.validate.nonEmptyTables)
                 ? <span className="appForm__field--required">*</span> : null}
             </label>
-            {rows ? <RenderTable columns={columns} data={rows} setRowsFn={updateRows} disabled={disabled}/> : null}
+            {rows ? <RenderTable
+                columns={columns}
+                data={rows}
+                lastRow={lastRow}
+                setRowsFn={updateRows}
+                disabled={disabled}/> : null}
             {!isEmpty(columns) && !shouldDisableNewRows
                 ? <div className="addNewTableRow" onClick={addNewRow}>
                     {__('Aggiungi una riga', 'gepafin')}

src/pages/BandoForms/index.js

@@ -290,6 +290,7 @@ const BandoForms = () => {
                     <h2>{__('Modifica form esistente', 'gepafin')}</h2>
                     <div className="row">
                         <p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p>
+                        <div className="row">
                             <Dropdown
                                 id="form"
                                 disabled={isEmpty(forms)}
@@ -307,6 +308,7 @@ const BandoForms = () => {
                                 icon="pi pi-cog" iconPos="right"/>
                         </div>
                     </div>
+                </div>
 
                 <div className="appPageSection">
 

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

@@ -23,7 +23,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         options: __('Opzioni', 'gepafin'),
         mime: __('Tipo di file', 'gepafin'),
         text: __('Testo formattato', 'gepafin'),
-        table_columns: __('Colonne', 'gepafin'),
+        table_columns: '',
     }
 
     const renderHeader = () => {

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { wrap } from 'object-path-immutable';
-import { pathOr } from 'ramda';
+import { isEmpty, pathOr } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -10,6 +10,8 @@ import { InputSwitch } from 'primereact/inputswitch';
 
 // tools
 import uniqid from '../../../../../../helpers/uniqid';
+import { Dropdown } from 'primereact/dropdown';
+import { Accordion, AccordionTab } from 'primereact/accordion';
 
 const ElementSettingTableColumns = ({
                                         value,
@@ -55,6 +57,37 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
+    const onLastRowInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowText = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onTypeChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.fieldtype = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onLastRowFormulaChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowFormula = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
     const onSubInputChange = (e, name, index) => {
         const { value } = e.target;
         const newRowsData = wrap(rowsData).set([index, name], value).value();
@@ -83,23 +116,124 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
-    const properField = (item, i) => {
+    const setColFormulaChecked = (index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                const newVal = o.enableFormula !== true;
+                o.enableFormula = newVal;
+                if (newVal) {
+                    o.lastRowFormula = 'sum';
+                    o.fieldtype = 'numeric';
+                    delete o.lastRowText;
+                } else {
+                    delete o.lastRowFormula;
+                    delete o.fieldtype;
+                    o.lastRowText = '';
+                }
+            }
+            return o;
+        });
+        setStateFieldData(newData);
+    }
+
+    const properFields = (item, i) => {
         return <>
-            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
+            <div>
-            <div className="flex-1">
+                <InputText
-                <span>{__('Predefinito?', 'gepafin')}</span>
+                    value={item.label}
+                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <Dropdown
+                    disabled={item.enableFormula}
+                    value={item.fieldtype ? item.fieldtype : 'text'}
+                    onChange={(e) => onTypeChange(e.value, i)}
+                    options={[
+                        { value: 'text', label: __('Testo', 'gepafin') },
+                        { value: 'numeric', label: __('Numerico', 'gepafin') }
+                    ]}/>
+            </div>
+            <div>
+                <button
+                    className="formElementSettings__repeaterItemIconBtn"
+                    onClick={() => setColFormulaChecked(i)}
+                    data-active={item.enableFormula ? item.enableFormula : false}
+                    type="button">
+                    <i className="pi pi-calculator"></i>
+                </button>
+            </div>
+            <div>
                 <InputSwitch
                     checked={item.predefined}
                     disabled={bandoStatus === 'PUBLISH'}
                     onChange={(e) => setChecked(e.value, i)}/>
             </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeItem(i)}/>
+            </div>
         </>
     }
 
     const properSubField = (item, i, name) => {
-        return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+        return <>
+            <div>
+                <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+            </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeRow(i)}/>
+            </div>
+        </>
     }
 
+    const properFieldsLastRow = (item, i) => {
+        return <>
+            <div>
+                <span>{sprintf(__('Colonna %d'), i + 1)}</span>
+            </div>
+            {item.enableFormula
+                ? <div>
+                    <Dropdown
+                        value={item.lastRowFormula}
+                        onChange={(e) => onLastRowFormulaChange(e.value, i)}
+                        options={[
+                            { value: 'sum', label: __('Somma automatica', 'gepafin') }
+                        ]}/>
+                </div>
+                : <div>
+                    <InputText
+                        value={item.lastRowText}
+                        onInput={(e) => onLastRowInputChange(e, i)}/>
+                </div>}
+        </>
+    }
+
+    const lastRow = useCallback(() => {
+        return <div className="formElementSettings__repeater">
+            <div className="formElementSettings__lastRowHeader">
+                <div className="formElementSettings__lastRowHeaderTitle">
+                    {__('Definisci ultima righa', 'gepafin')}
+                </div>
+                <Button type="button"
+                        outlined
+                        label={__('Pulisci', 'gepafin')}
+                        iconPos="right"
+                        icon="pi pi-refresh"
+                        onClick={() => {
+                        }}/>
+            </div>
+            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__lastRowItem">
+                {properFieldsLastRow(o, i)}
+            </div>)}
+        </div>
+    }, [stateFieldData]);
+
     useEffect(() => {
         const stateFieldData = pathOr([], ['stateFieldData'], value);
         setStateFieldData(stateFieldData);
@@ -114,34 +248,38 @@ const ElementSettingTableColumns = ({
         });
     }, [stateFieldData, rowsData]);
 
-    stateFieldData.filter(o => o.predefined)
-
     return (
         <>
             <div className="formElementSettings__repeater">
+                {stateFieldData.length > 0
+                    ? <div className="formElementSettings__repeaterItem">
+                        <div>{__('Colonne', 'gepafin')}</div>
+                        <div>{__('Tipo', 'gepafin')}</div>
+                        <div>{__('Calcola', 'gepafin')}</div>
+                        <div>{__('Predefinito?', 'gepafin')}</div>
+                        <div></div>
+                    </div> : null}
                 {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="p-inputgroup flex-1">
+                    {properFields(o, i)}
-                        {properField(o, i)}
-                        <Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
-                    </div>
                 </div>)}
-                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined
+                        label={__('Aggiungi colonna', 'gepafin')} onClick={addNewItem}/>
             </div>
             {stateFieldData
-                .filter(o => o.predefined)
+                .filter(o => o.predefined).length > 0
-                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
+                ? <div className="formElementSettings__subRepeaterWrapper">
-                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
+                    <Accordion activeIndex={0}>
-                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
+                        {stateFieldData
-                        <div className="formElementSettings__repeater">
+                            //.filter(o => o.predefined)
+                            .map((o, i) =>
+                                o.predefined
+                                    ? <AccordionTab
+                                        key={i}
+                                        header={sprintf(__('Righe per colonna: %s'), !isEmpty(o.label) ? o.label : i + 1)}>
+                                        <div className="formElementSettings__subRepeaterWrapper">
                                             {rowsData.map((c, k) => {
-                                return <div key={k} className="formElementSettings__repeaterItem">
+                                                return <div key={k} className="formElementSettings__subRepeaterItem">
-                                    <div className="p-inputgroup flex-1">
                                                     {properSubField(c, k, o.name)}
-                                        <Button icon="pi pi-times"
-                                                disabled={bandoStatus === 'PUBLISH'}
-                                                className="p-button-danger"
-                                                onClick={() => removeRow(k)}/>
-                                    </div>
                                                 </div>
                                             })}
                                             <Button type="button"
@@ -150,8 +288,11 @@ const ElementSettingTableColumns = ({
                                                     label={__('Aggiungi una riga', 'gepafin')}
                                                     onClick={addNewRow}/>
                                         </div>
+                                    </AccordionTab> : null)}
+                    </Accordion>
                 </div>
-                </div>)}
+                : null}
+            {lastRow()}
         </>
     )
 }

src/pages/BandoFormsPreview/index.js

@@ -155,8 +155,8 @@ const BandoFormsPreview = () => {
                                 }, {});
 
                                 return ['paragraph'].includes(o.name) && text
-                                    ? <div>
+                                    ? <div key={o.id}>
-                                        <div className="ql-editor" key={o.id}>
+                                        <div className="ql-editor">
                                             {renderHtmlContent(text.value)}
                                         </div>
                                     </div>