From 68f6152e6fd6857608f84931ede3cf0a5d8edf4e Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Wed, 8 Jan 2025 11:20:27 +0100
Subject: [PATCH] - added render for last row with autosum;

---
 src/assets/scss/components/formBuilder.scss   | 39 +++++++++
 .../components/DefaultCell/index.js           | 20 +++++
 .../components/LastRowCell/index.js           | 21 +++++
 .../components/NumericFormulaCell/index.js    | 29 +++++++
 .../components/Table/RenderTable/index.js     | 40 +++++----
 .../FormField/components/Table/index.js       | 50 ++++++++---
 .../ElementSettingTableColumns/index.js       | 83 +++++++++++++++++--
 src/pages/BandoFormsPreview/index.js          |  4 +-
 8 files changed, 252 insertions(+), 34 deletions(-)
 create mode 100644 src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js
 create mode 100644 src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js
 create mode 100644 src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js

diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss
index 40ba8ca..9f70641 100644
--- a/src/assets/scss/components/formBuilder.scss
+++ b/src/assets/scss/components/formBuilder.scss
@@ -257,4 +257,43 @@
   &: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;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js
new file mode 100644
index 0000000..4a3086e
--- /dev/null
+++ b/src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js
@@ -0,0 +1,20 @@
+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);
+    };
+
+    return (
+        <input
+            disabled={disabled}
+            value={initialValue ?? ''}
+            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
+            onBlur={onBlur}
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default DefaultCell;
\ No newline at end of file
diff --git a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js
new file mode 100644
index 0000000..cb56a61
--- /dev/null
+++ 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) ? 0 : v);
+
+        if (cellValue === 'sum') {
+            cellValue = sum(getAllRowsValues);
+        } else {
+            cellValue = 0;
+        }
+    }
+
+    return <td>{cellValue}</td>;
+};
+
+export default LastRowCell;
\ No newline at end of file
diff --git a/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js
new file mode 100644
index 0000000..089bc82
--- /dev/null
+++ b/src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js
@@ -0,0 +1,29 @@
+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 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}
+            onBlur={onBlur}
+            step="any"
+            className="w-full px-2 py-1 border rounded"
+        />
+    );
+};
+
+export default NumericFormulaCell;
\ No newline at end of file
diff --git a/src/components/FormField/components/Table/RenderTable/index.js b/src/components/FormField/components/Table/RenderTable/index.js
index e30ac5e..604a453 100644
--- 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>
     )
diff --git a/src/components/FormField/components/Table/index.js b/src/components/FormField/components/Table/index.js
index d08e21e..8ebd19b 100644
--- 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,11 +169,16 @@ 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')}
-            </div>
+                </div>
                 : null}
         </>)
 }
diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
index fd6212a..49af3a1 100644
--- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { wrap } from 'object-path-immutable';
 import { isEmpty, pathOr } from 'ramda';
@@ -57,6 +57,17 @@ 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) {
@@ -67,6 +78,16 @@ const ElementSettingTableColumns = ({
         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();
@@ -98,7 +119,17 @@ const ElementSettingTableColumns = ({
     const setColFormulaChecked = (index) => {
         const newData = stateFieldData.map((o, i) => {
             if (i === index) {
-                o.enableFormula = o.enableFormula !== true;
+                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;
         });
@@ -115,11 +146,12 @@ const ElementSettingTableColumns = ({
             </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: 'number', label: __('Numerico', 'gepafin') }
+                        { value: 'numeric', label: __('Numerico', 'gepafin') }
                     ]}/>
             </div>
             <div>
@@ -160,6 +192,48 @@ const ElementSettingTableColumns = ({
         </>
     }
 
+    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);
@@ -174,8 +248,6 @@ const ElementSettingTableColumns = ({
         });
     }, [stateFieldData, rowsData]);
 
-    //stateFieldData.filter(o => o.predefined)
-
     return (
         <>
             <div className="formElementSettings__repeater">
@@ -220,6 +292,7 @@ const ElementSettingTableColumns = ({
                     </Accordion>
                 </div>
                 : null}
+            {lastRow()}
         </>
     )
 }
diff --git a/src/pages/BandoFormsPreview/index.js b/src/pages/BandoFormsPreview/index.js
index 8d34160..d9e3d30 100644
--- 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>