BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- saving progress;

Browse Source
This commit is contained in:
Vitalii Kiiko
2025-01-23 12:54:27 +01:00
parent d9bd7f3578
commit e99a9b2058
7 changed files with 62 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/components/appForm.scss
View File

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

15
src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js
View File

@@ -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 <td>{cellValue}</td>;

44
src/components/FormField/components/CriteriaTable/RenderTable/index.js
View File

@@ -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 (
<table>
<thead>
@@ -68,14 +82,14 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
</tr>
);
})}
{!isEmpty(lastRow)
{!isEmpty(lastRowCfg)
? <tr>
{columns.map((o) => <LastRowCell
{columnsCfg.map((o) => <LastRowCell
key={o.accessorKey}
columnId={o.accessorKey}
columnMeta={o.meta}
lastRows={lastRow}
getColumnDataFn={getColumnData}/>)}
lastRowCfg={lastRowCfg}
tableValue={tableValue}/>)}
</tr>
: null}
</tbody>

32
src/components/FormField/components/CriteriaTable/index.js
View File

@@ -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 (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired || (config.validate && config.validate.nonEmptyTables)
? <span className="appForm__field--required">*</span> : null}
</label>
{rows ? <RenderTable
columns={columns}
data={rows}
lastRow={lastRow}
setRowsFn={updateRows}
disabled={disabled}/> : null}
{tableValue
? <RenderTable
columnsCfg={columns}
tableValue={tableValue}
lastRowCfg={lastRow}
setTableValueFn={updateValue}
disabled={disabled}/> : null}
</>)
}

4
src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js
View File

@@ -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) {

14
src/components/FormField/components/Table/RenderTable/index.js
View File

@@ -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 }) => {
</tr>
);
})}
{!isEmpty(lastRow)
{!isEmpty(lastRowCfg)
? <tr>
{columns.map((o) => <LastRowCell
{columnsCfg.map((o) => <LastRowCell
key={o.accessorKey}
columnId={o.accessorKey}
columnMeta={o.meta}
lastRows={lastRow}
lastRowCfg={lastRowCfg}
getColumnDataFn={getColumnData}/>)}
</tr>
: null}

6
src/components/FormField/components/Table/index.js
View File

@@ -170,9 +170,9 @@ const Table = ({
? <span className="appForm__field--required">*</span> : null}
</label>
{rows ? <RenderTable
columns={columns}
data={rows}
lastRow={lastRow}
columnsCfg={columns}
rowsData={rows}
lastRowCfg={lastRow}
setRowsFn={updateRows}
disabled={disabled}/> : null}
{!isEmpty(columns) && !shouldDisableNewRows