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

Feature/30 better tables
2025-01-08 16:00:37 +01:00
parent b54f3a87e0 dc9f4d566d
commit 8e00ad7920
10 changed files with 441 additions and 89 deletions
--- a/src/assets/scss/components/formBuilder.scss
+++ b/src/assets/scss/components/formBuilder.scss
@@ -191,16 +191,109 @@
 }

 .formElementSettings__repeater {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  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 {
-  padding: 10px 20px;
-  background-color: #f9f9f9;
+.formElementSettings__subRepeaterWrapper {
+  display: grid;
+  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;
+    }
+  }
 }
--- a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js
+++ b/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;
--- a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js
+++ b/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;
--- a/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js
+++ b/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;
--- a/src/components/FormField/components/Table/RenderTable/index.js
+++ b/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 }) => {
-                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}
-                    />
-                );
-            },
+            cell: DefaultCell
        },
        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>
    )
--- a/src/components/FormField/components/Table/index.js
+++ b/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) => {
-                    return info.getValue();
-                }
+                item.cell = (info) => 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')}
--- a/src/pages/BandoForms/index.js
+++ b/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">

--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js
+++ b/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 = () => {
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
+import React, { useCallback, useEffect, useState } from 'react';
+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 className="flex-1">
-                <span>{__('Predefinito?', 'gepafin')}</span>
+            <div>
+                <InputText
+                    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">
-                        {properField(o, i)}
-                        <Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
-                    </div>
+                    {properFields(o, i)}
                </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)
-                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
-                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
-                        <div className="formElementSettings__repeater">
+                .filter(o => o.predefined).length > 0
+                ? <div className="formElementSettings__subRepeaterWrapper">
+                    <Accordion activeIndex={0}>
+                        {stateFieldData
+                            //.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">
-                                    <div className="p-inputgroup flex-1">
+                                                return <div key={k} className="formElementSettings__subRepeaterItem">
                                                    {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()}
        </>
    )
 }
--- a/src/pages/BandoFormsPreview/index.js
+++ b/src/pages/BandoFormsPreview/index.js
@@ -155,8 +155,8 @@ const BandoFormsPreview = () => {
                                }, {});

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