From e99a9b20582043522779fd610ad12231e22ecbb5 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Thu, 23 Jan 2025 12:54:27 +0100 Subject: [PATCH] - saving progress; --- src/assets/scss/components/appForm.scss | 2 +- .../components/LastRowCell/index.js | 15 ++----- .../CriteriaTable/RenderTable/index.js | 44 ++++++++++++------- .../components/CriteriaTable/index.js | 32 +++++++------- .../components/LastRowCell/index.js | 4 +- .../components/Table/RenderTable/index.js | 14 +++--- .../FormField/components/Table/index.js | 6 +-- 7 files changed, 62 insertions(+), 55 deletions(-) diff --git a/src/assets/scss/components/appForm.scss b/src/assets/scss/components/appForm.scss index 405d28e..2f5ef85 100644 --- a/src/assets/scss/components/appForm.scss +++ b/src/assets/scss/components/appForm.scss @@ -88,7 +88,6 @@ color: var(--global-textColor); font-size: 15px; text-align: left; - text-align: start; } th { @@ -97,6 +96,7 @@ } td { + min-width: 120px; input { width: 100%; padding: 3px 5px; diff --git a/src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js index 3a35e77..c9e12a0 100644 --- a/src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js +++ b/src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js @@ -1,18 +1,11 @@ -import { head, isEmpty, isNil, sum } from 'ramda'; +import { head, isNil, pathOr } from 'ramda'; -const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => { - const cellData = head(lastRows.filter(o => !isNil(o[columnId]))); +const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, tableValue = []}) => { + const cellData = head(lastRowCfg.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; - } + cellValue = pathOr(0, ['total'], tableValue); } return {cellValue}; diff --git a/src/components/FormField/components/CriteriaTable/RenderTable/index.js b/src/components/FormField/components/CriteriaTable/RenderTable/index.js index 604a453..c15d7c8 100644 --- a/src/components/FormField/components/CriteriaTable/RenderTable/index.js +++ b/src/components/FormField/components/CriteriaTable/RenderTable/index.js @@ -1,16 +1,17 @@ import React from 'react'; import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { wrap } from 'object-path-immutable'; -import { isEmpty } from 'ramda'; +import { head, isEmpty, isNil, pathOr, sum } from 'ramda'; // components import DefaultCell from './components/DefaultCell'; import LastRowCell from './components/LastRowCell'; -const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { +const RenderTable = ({ tableValue = {}, columnsCfg, lastRowCfg, setTableValueFn, disabled }) => { + const rows = pathOr([], ['rows'], tableValue) const table = useReactTable({ - data, - columns, + data: rows, + columns: columnsCfg, defaultColumn: { cell: DefaultCell }, @@ -18,17 +19,30 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { meta: { disabled, updateData: (rowIndex, columnId, value) => { - const newRowsData = wrap(data).set([rowIndex, columnId], value).value(); - setRowsFn(newRowsData); + const columnCfgData = head(columnsCfg.filter(o => o.accessorKey === columnId)); + const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId]))); + const cellValue = cellData[columnId]; + let newRowsData = wrap(tableValue).set(['rows', rowIndex, columnId], value).value(); + let total = pathOr(0, ['total'], tableValue); + + if (columnCfgData.meta.enableFormula) { + const getAllRowsValues = newRowsData.rows + .map(row => row[columnId]) + .map(v => isEmpty(v) || isNil(v) ? 0 : v); + + if (cellValue === 'sum') { + total = sum(getAllRowsValues); + } else { + total = 0; + } + } + + newRowsData = wrap(newRowsData).set(['total'], total).value(); + setTableValueFn(newRowsData); }, } }); - const getColumnData = (columnId) => { - const rows = table.getRowModel().rows; - return rows.map(row => row.getValue(columnId)); - }; - return ( @@ -68,14 +82,14 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { ); })} - {!isEmpty(lastRow) + {!isEmpty(lastRowCfg) ? - {columns.map((o) => )} + lastRowCfg={lastRowCfg} + tableValue={tableValue}/>)} : null} diff --git a/src/components/FormField/components/CriteriaTable/index.js b/src/components/FormField/components/CriteriaTable/index.js index e1d65f2..3801617 100644 --- a/src/components/FormField/components/CriteriaTable/index.js +++ b/src/components/FormField/components/CriteriaTable/index.js @@ -27,12 +27,12 @@ const Table = ({ const [rowsCfg, setRowsCfg] = useState([]); const [columns, setColumns] = useState([]); const [lastRow, setLastRow] = useState([]); - const [rows, setRows] = useState(null); + const [tableValue, setTableValue] = useState(null); - const updateRows = useCallback((data) => { - setRows(data); + const updateValue = useCallback((data) => { + setTableValue(data); setDataFn(fieldName, data, { shouldValidate: true }); - }, [rows, defaultValue]); + }, [tableValue, defaultValue]); const properConfig = (config) => { let newConfig = klona(config); @@ -71,7 +71,7 @@ const Table = ({ }, [columnsCfg, disabled]); useEffect(() => { - setRows(rowsCfg); + setTableValue(rowsCfg); }, [rowsCfg]); useEffect(() => { @@ -84,7 +84,7 @@ const Table = ({ let rowsData = pathOr([obj], ['rowsData'], tableColumns); rowsData = isEmpty(rowsData) ? [obj] : rowsData; setColumnsCfg(stateFieldData); - setRowsCfg(rowsData); + setRowsCfg({rows: rowsData, total: 0}); let lastRowData = stateFieldData.reduce((acc, cur) => { const value = cur.enableFormula ? cur.lastRowFormula : (cur.lastRowText ? cur.lastRowText : ''); @@ -103,29 +103,29 @@ const Table = ({ }, [tableColumns]); useEffect(() => { - if (!equal(rows, defaultValue)) { - setRows(defaultValue); + if (!equal(tableValue, defaultValue)) { + setTableValue(defaultValue); } }, [defaultValue]); useEffect(() => { - setRows(defaultValue); + setTableValue(defaultValue); register(fieldName, properConfig(config)); }, []); - console.log('rows', rows, lastRow, tableColumns) return ( <> - {rows ? : null} + {tableValue + ? : null} ) } diff --git a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js index 3a35e77..84bd57b 100644 --- a/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js +++ b/src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js @@ -1,7 +1,7 @@ import { head, isEmpty, isNil, sum } from 'ramda'; -const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => { - const cellData = head(lastRows.filter(o => !isNil(o[columnId]))); +const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, getColumnDataFn}) => { + const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId]))); let cellValue = cellData[columnId]; if (columnMeta.enableFormula) { diff --git a/src/components/FormField/components/Table/RenderTable/index.js b/src/components/FormField/components/Table/RenderTable/index.js index 604a453..43cf9ac 100644 --- a/src/components/FormField/components/Table/RenderTable/index.js +++ b/src/components/FormField/components/Table/RenderTable/index.js @@ -7,10 +7,10 @@ import { isEmpty } from 'ramda'; import DefaultCell from './components/DefaultCell'; import LastRowCell from './components/LastRowCell'; -const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { +const RenderTable = ({ rowsData, columnsCfg, lastRowCfg, setRowsFn, disabled }) => { const table = useReactTable({ - data, - columns, + data: rowsData, + columns: columnsCfg, defaultColumn: { cell: DefaultCell }, @@ -18,7 +18,7 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { meta: { disabled, updateData: (rowIndex, columnId, value) => { - const newRowsData = wrap(data).set([rowIndex, columnId], value).value(); + const newRowsData = wrap(rowsData).set([rowIndex, columnId], value).value(); setRowsFn(newRowsData); }, } @@ -68,13 +68,13 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => { ); })} - {!isEmpty(lastRow) + {!isEmpty(lastRowCfg) ? - {columns.map((o) => )} : null} diff --git a/src/components/FormField/components/Table/index.js b/src/components/FormField/components/Table/index.js index 8ebd19b..c925b08 100644 --- a/src/components/FormField/components/Table/index.js +++ b/src/components/FormField/components/Table/index.js @@ -170,9 +170,9 @@ const Table = ({ ? * : null} {rows ? : null} {!isEmpty(columns) && !shouldDisableNewRows