react-table-edit 1.5.21 → 1.5.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/table/data-table.d.ts +0 -1
- package/dist/component/table/gourp-col.d.ts +8 -0
- package/dist/component/table/header.d.ts +2 -0
- package/dist/component/table-view/content.d.ts +2 -0
- package/dist/component/table-view/index.d.ts +1 -0
- package/dist/component/utils.d.ts +0 -1
- package/dist/component/wizard/index.d.ts +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +80 -57
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +80 -57
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IColumnTable } from '../type';
|
|
2
|
+
type IFProps = {
|
|
3
|
+
contentColumns: IColumnTable[];
|
|
4
|
+
groupColumns?: string[];
|
|
5
|
+
visibleGroupColumn?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare const RenderColGroup: ({ contentColumns, groupColumns, visibleGroupColumn }: IFProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -24,6 +24,8 @@ type IFDataProps = {
|
|
|
24
24
|
container: any;
|
|
25
25
|
optionsFilter: any;
|
|
26
26
|
formatSetting?: IFTableEditFormat;
|
|
27
|
+
groupColumns?: string[];
|
|
28
|
+
visibleGroupColumn?: boolean;
|
|
27
29
|
setColumns?: (columns: IHeaderColumnTable[]) => void;
|
|
28
30
|
changeFilter: (data: IFFilterTable[]) => void;
|
|
29
31
|
setContentColumns: (col: any[]) => void;
|
|
@@ -16,6 +16,8 @@ type IContentColProps = {
|
|
|
16
16
|
isMulti?: boolean;
|
|
17
17
|
fieldKey: string;
|
|
18
18
|
zeroVisiable?: boolean;
|
|
19
|
+
groupColumns?: string[];
|
|
20
|
+
visibleGroupColumn?: boolean;
|
|
19
21
|
setSelectedRows: (value: any[]) => void;
|
|
20
22
|
};
|
|
21
23
|
export declare const RenderContentCol: (props: IContentColProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -41,7 +41,6 @@ export declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
41
41
|
export declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
|
|
42
42
|
levels: any[][];
|
|
43
43
|
flat: any[];
|
|
44
|
-
flatVisble: any[];
|
|
45
44
|
flatVisbleContent: any[];
|
|
46
45
|
objWidthFixLeft: Record<number, number>;
|
|
47
46
|
objWidthFixRight: Record<number, number>;
|
package/dist/index.d.ts
CHANGED
|
@@ -709,6 +709,7 @@ type TableViewProps = {
|
|
|
709
709
|
zeroVisiable?: boolean;
|
|
710
710
|
groupSetting?: {
|
|
711
711
|
client?: boolean;
|
|
712
|
+
visibleGroupColumn?: boolean;
|
|
712
713
|
groupColumns: string[];
|
|
713
714
|
onGroup: (props: any) => void;
|
|
714
715
|
};
|
|
@@ -770,7 +771,6 @@ declare const FindNodeByPath: (tree: any[], path: string) => {
|
|
|
770
771
|
declare const calculateTableStructure: (columns: any[], settingColumns?: IFSettingColumns[]) => {
|
|
771
772
|
levels: any[][];
|
|
772
773
|
flat: any[];
|
|
773
|
-
flatVisble: any[];
|
|
774
774
|
flatVisbleContent: any[];
|
|
775
775
|
objWidthFixLeft: Record<number, number>;
|
|
776
776
|
objWidthFixRight: Record<number, number>;
|
|
@@ -795,7 +795,7 @@ type IFSteps = {
|
|
|
795
795
|
done?: boolean;
|
|
796
796
|
loading?: boolean;
|
|
797
797
|
disable?: boolean;
|
|
798
|
-
|
|
798
|
+
visible?: boolean;
|
|
799
799
|
};
|
|
800
800
|
type IFProps = {
|
|
801
801
|
steps: IFSteps[];
|
package/dist/index.js
CHANGED
|
@@ -19986,8 +19986,8 @@ const calculateTableStructure = (columns, settingColumns) => {
|
|
|
19986
19986
|
}
|
|
19987
19987
|
traverse(columns);
|
|
19988
19988
|
// Danh sách các cột được hiển thị
|
|
19989
|
-
const flatVisble = flat.filter((e) => e.visible !== false)
|
|
19990
|
-
const flatVisbleContent =
|
|
19989
|
+
// const flatVisble = flat.filter((e) => e.visible !== false)
|
|
19990
|
+
const flatVisbleContent = flat.filter((x) => x.visible !== false && x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
|
|
19991
19991
|
// Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
|
|
19992
19992
|
const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
|
|
19993
19993
|
const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
|
|
@@ -19997,7 +19997,7 @@ const calculateTableStructure = (columns, settingColumns) => {
|
|
|
19997
19997
|
return {
|
|
19998
19998
|
levels,
|
|
19999
19999
|
flat,
|
|
20000
|
-
flatVisble,
|
|
20000
|
+
// flatVisble,
|
|
20001
20001
|
flatVisbleContent,
|
|
20002
20002
|
objWidthFixLeft,
|
|
20003
20003
|
objWidthFixRight,
|
|
@@ -20585,12 +20585,6 @@ editDisable, addDisable, toolbarSetting, buttonSetting) => {
|
|
|
20585
20585
|
}
|
|
20586
20586
|
};
|
|
20587
20587
|
|
|
20588
|
-
const RenderColGroup = ({ contentColumns }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => (jsxRuntime.jsx("col", { style: {
|
|
20589
|
-
width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
|
|
20590
|
-
minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
|
|
20591
|
-
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
20592
|
-
} }, index))) }));
|
|
20593
|
-
|
|
20594
20588
|
const IconCustom = (props) => {
|
|
20595
20589
|
const { iconName, size } = props;
|
|
20596
20590
|
if (iconName === '') {
|
|
@@ -36812,6 +36806,15 @@ const FooterCol = ({ col, indexCol, dataSource, objWidthFix, formatSetting }) =>
|
|
|
36812
36806
|
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: col.haveSum === true && col.type === "numeric" && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Number(sumValue) >= 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false) })) : (jsxRuntime.jsx("div", { style: { color: formatSetting?.colorNegative ?? "red" }, children: `${formatSetting?.prefixNegative ?? "-"}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ",", formatSetting?.thousandSeparator ?? ".", col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ""}` })) })) }) })) }, `summarycell-${indexCol}`));
|
|
36813
36807
|
};
|
|
36814
36808
|
|
|
36809
|
+
const RenderColGroup = ({ contentColumns, groupColumns, visibleGroupColumn }) => (jsxRuntime.jsx("colgroup", { children: contentColumns.map((col, index) => {
|
|
36810
|
+
return (col.visible !== false &&
|
|
36811
|
+
(visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx("col", { style: {
|
|
36812
|
+
width: typeof col.width === 'number' ? `${col.width}px` : col.width || undefined,
|
|
36813
|
+
minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth || undefined,
|
|
36814
|
+
maxWidth: typeof col.maxWidth === 'number' ? `${col.maxWidth}px` : col.maxWidth || undefined
|
|
36815
|
+
} }, index)));
|
|
36816
|
+
}) }));
|
|
36817
|
+
|
|
36815
36818
|
var reactResizable = {exports: {}};
|
|
36816
36819
|
|
|
36817
36820
|
var Resizable$2 = {};
|
|
@@ -38984,7 +38987,7 @@ const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
|
|
|
38984
38987
|
};
|
|
38985
38988
|
|
|
38986
38989
|
const HeaderTableCol = (props) => {
|
|
38987
|
-
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
|
|
38990
|
+
const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti, groupColumns, visibleGroupColumn } = props;
|
|
38988
38991
|
const { t } = reactI18next.useTranslation();
|
|
38989
38992
|
const headerRef = React$5.useRef(null);
|
|
38990
38993
|
const order = orderBy.find((item) => item.key === col.field);
|
|
@@ -39003,7 +39006,7 @@ const HeaderTableCol = (props) => {
|
|
|
39003
39006
|
const checkOverflow = () => {
|
|
39004
39007
|
return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
|
|
39005
39008
|
};
|
|
39006
|
-
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
|
|
39009
|
+
return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
|
|
39007
39010
|
top: `${indexParent * 42}px`,
|
|
39008
39011
|
left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
|
|
39009
39012
|
right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
|
|
@@ -39046,7 +39049,7 @@ const HeaderTableCol = (props) => {
|
|
|
39046
39049
|
}, children: jsxRuntime.jsx(DropdownItem$1, { className: "p-1", style: { borderRadius: '6px' }, tag: "div", header: true, children: jsxRuntime.jsx(FilterComponent, { setOpenFilter: setOpenFilter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] }))] }))] }))] }) }) })) }, `header-${indexCol}`));
|
|
39047
39050
|
};
|
|
39048
39051
|
|
|
39049
|
-
const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns,
|
|
39052
|
+
const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFiltering, allowSorting, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
|
|
39050
39053
|
const filteredData = React$5.useMemo(() => {
|
|
39051
39054
|
const arr = dataSource.map((row, index) => ({ data: row, indexRow: index }));
|
|
39052
39055
|
if (((filterBy && filterBy.length > 0) || (searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm)) && searchClient) {
|
|
@@ -39082,7 +39085,7 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
|
|
|
39082
39085
|
}
|
|
39083
39086
|
};
|
|
39084
39087
|
}, []);
|
|
39085
|
-
return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns:
|
|
39088
|
+
return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
|
|
39086
39089
|
return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
|
|
39087
39090
|
return (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
|
|
39088
39091
|
setFilterBy([...val]);
|
|
@@ -39839,7 +39842,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
39839
39842
|
const searchClient = searchSetting?.searchEnable && (searchSetting?.searchClient || !(editDisable || addDisable));
|
|
39840
39843
|
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
|
|
39841
39844
|
const fieldUniKey = columns.filter((item) => item.isUnikey === true)?.map((item) => item.field);
|
|
39842
|
-
const { levels: headerColumns,
|
|
39845
|
+
const { levels: headerColumns, flatVisbleContent: visibleContentColumns, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, objHeaderWidthFixLeft, objHeaderWidthFixRight, indexFirstEdit, indexLastEdit } = React$5.useMemo(() => {
|
|
39843
39846
|
const rs = calculateTableStructure(columns, settingColumns?.value);
|
|
39844
39847
|
setContentColumns(rs.flat);
|
|
39845
39848
|
return rs;
|
|
@@ -40213,7 +40216,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
|
|
|
40213
40216
|
}
|
|
40214
40217
|
}
|
|
40215
40218
|
};
|
|
40216
|
-
return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns,
|
|
40219
|
+
return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
|
|
40217
40220
|
handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
|
|
40218
40221
|
}, setContentColumns: (newColumns) => {
|
|
40219
40222
|
setContentColumns(newColumns);
|
|
@@ -49059,12 +49062,14 @@ const Wizard = React$5.forwardRef((props, ref) => {
|
|
|
49059
49062
|
const { steps, activeStep, setActiveStep, className = '', headerClassName = '', contentClassName = '', contentWrapperClassName = '', type = 'horizontal', heightContent = 'auto', widthContent = '100%', separator = jsxRuntime.jsx(SvgChevronRight, { fontSize: 17 }) } = props;
|
|
49060
49063
|
// ** Renders Wizard Header
|
|
49061
49064
|
const renderHeader = () => {
|
|
49062
|
-
return steps
|
|
49063
|
-
|
|
49064
|
-
|
|
49065
|
+
return steps
|
|
49066
|
+
.filter((x) => x.visible !== false)
|
|
49067
|
+
.map((step, index) => {
|
|
49068
|
+
return (jsxRuntime.jsxs(React$5.Fragment, { children: [index !== 0 && index !== steps.length ? jsxRuntime.jsx("div", { className: "line", children: separator }) : null, jsxRuntime.jsx("div", { className: classNames$1('step', {
|
|
49069
|
+
crossed: step.done !== undefined ? step.done : activeStep > index + 1,
|
|
49065
49070
|
disable: step.disable,
|
|
49066
|
-
active:
|
|
49067
|
-
}), "data-target": `#${step.id}`, children: jsxRuntime.jsxs("button", { type:
|
|
49071
|
+
active: index + 1 === activeStep
|
|
49072
|
+
}), "data-target": `#${step.id}`, children: jsxRuntime.jsxs("button", { type: "button", disabled: step.disable, className: "step-trigger", onClick: () => setActiveStep?.(index + 1), children: [jsxRuntime.jsx("span", { className: "bs-stepper-box", children: step.icon ? step.icon : index + 1 }), jsxRuntime.jsxs("span", { className: "bs-stepper-label", children: [jsxRuntime.jsxs("span", { className: "bs-stepper-title", children: [step.title, " "] }), step.loading && jsxRuntime.jsx(Spinner$1, { className: "text-info", style: { borderWidth: 2, height: 15, width: 15, marginRight: 3 } }), " ", step.subtitle ? jsxRuntime.jsx("span", { className: "bs-stepper-subtitle", children: step.subtitle }) : null] })] }) })] }, step.id));
|
|
49068
49073
|
});
|
|
49069
49074
|
};
|
|
49070
49075
|
// ** Renders Wizard Content
|
|
@@ -49072,7 +49077,7 @@ const Wizard = React$5.forwardRef((props, ref) => {
|
|
|
49072
49077
|
return steps.map((step, index) => {
|
|
49073
49078
|
return (jsxRuntime.jsx("div", { className: classNames$1('content', {
|
|
49074
49079
|
[contentClassName]: contentClassName,
|
|
49075
|
-
'active dstepper-block': activeStep ===
|
|
49080
|
+
'active dstepper-block': activeStep === index + 1
|
|
49076
49081
|
}), id: step.id, children: step.content }, step.id));
|
|
49077
49082
|
});
|
|
49078
49083
|
};
|
|
@@ -68334,13 +68339,11 @@ const ModalImportComponent = (props) => {
|
|
|
68334
68339
|
const [isSaveSetting, setIsSaveSetting] = React$5.useState(true);
|
|
68335
68340
|
const formSchema = create().shape({
|
|
68336
68341
|
step: create$1(),
|
|
68337
|
-
sheetId: create$2()
|
|
68338
|
-
.when('step', {
|
|
68342
|
+
sheetId: create$2().when('step', {
|
|
68339
68343
|
is: 1,
|
|
68340
68344
|
then: create$2().required(`${t('Sheet name')} ${t('is required')}`)
|
|
68341
68345
|
}),
|
|
68342
|
-
headerRow: create$1()
|
|
68343
|
-
.when('step', {
|
|
68346
|
+
headerRow: create$1().when('step', {
|
|
68344
68347
|
is: 1,
|
|
68345
68348
|
then: create$1().required(`${t('Header row')} ${t('is required')}`)
|
|
68346
68349
|
})
|
|
@@ -68375,29 +68378,29 @@ const ModalImportComponent = (props) => {
|
|
|
68375
68378
|
};
|
|
68376
68379
|
const onSubmit = (data) => {
|
|
68377
68380
|
if (getValues('step') === 1) {
|
|
68378
|
-
getColumnsSheetExcel(data.file, data.headerRow ?? 0, data.sheetId ??
|
|
68381
|
+
getColumnsSheetExcel(data.file, data.headerRow ?? 0, data.sheetId ?? '', handleSetColumns);
|
|
68379
68382
|
}
|
|
68380
68383
|
else if (getValues('step') === 2) {
|
|
68381
|
-
const check = data.dataMap.find(x => x.isRequired && !x.column);
|
|
68384
|
+
const check = data.dataMap.find((x) => x.isRequired && !x.column);
|
|
68382
68385
|
if (check) {
|
|
68383
68386
|
messageBoxError(t, `Vui lòng chọn trường ghép cho cột <<${check.header}>>`);
|
|
68384
68387
|
return;
|
|
68385
68388
|
}
|
|
68386
|
-
mapDataImportExcel(dataMerge, getValues('headerRow') ?? 0, data.dataMap, handleValidate)
|
|
68387
|
-
.then((arr) => {
|
|
68389
|
+
mapDataImportExcel(dataMerge, getValues('headerRow') ?? 0, data.dataMap, handleValidate).then((arr) => {
|
|
68388
68390
|
setCheckInitValidate(true);
|
|
68389
68391
|
if (isSaveSetting) {
|
|
68390
|
-
updateGeneralSettingApi(data.dataMap.map(x => ({ ...x, column: undefined })));
|
|
68392
|
+
updateGeneralSettingApi(data.dataMap.map((x) => ({ ...x, column: undefined })));
|
|
68391
68393
|
}
|
|
68392
68394
|
validateExcelApi(arr)
|
|
68393
68395
|
.then((rs) => {
|
|
68394
68396
|
setCheckInitValidate(false);
|
|
68395
|
-
const list = rs.map((item) => ({ ...item, errors: item.errors.map((x) =>
|
|
68397
|
+
const list = rs.map((item) => ({ ...item, errors: item.errors.map((x) => connectString(t, x)) }));
|
|
68396
68398
|
setDataValidate(list);
|
|
68397
68399
|
setDataInvalid(list.filter((x) => x.errors?.length > 0));
|
|
68398
68400
|
setDataValid(list.filter((x) => x.error || x.errors?.length === 0));
|
|
68399
68401
|
setValue('step', 3);
|
|
68400
|
-
})
|
|
68402
|
+
})
|
|
68403
|
+
.catch(() => {
|
|
68401
68404
|
notificationError(t('GetFail'));
|
|
68402
68405
|
setCheckInitValidate(false);
|
|
68403
68406
|
});
|
|
@@ -68405,7 +68408,7 @@ const ModalImportComponent = (props) => {
|
|
|
68405
68408
|
}
|
|
68406
68409
|
else if (getValues('step') === 3) {
|
|
68407
68410
|
if (dataInvalid.length > 0) {
|
|
68408
|
-
messageBoxConfirm(t, handleAdd, dataValid,
|
|
68411
|
+
messageBoxConfirm(t, handleAdd, dataValid, 'The data from your excel file still has invalid rows. Please double check or import only valid lines now.');
|
|
68409
68412
|
}
|
|
68410
68413
|
else {
|
|
68411
68414
|
handleAdd(dataValid);
|
|
@@ -68425,34 +68428,35 @@ const ModalImportComponent = (props) => {
|
|
|
68425
68428
|
else {
|
|
68426
68429
|
setDataError([]);
|
|
68427
68430
|
}
|
|
68428
|
-
})
|
|
68431
|
+
})
|
|
68432
|
+
.catch(() => {
|
|
68429
68433
|
setCheckInit(false);
|
|
68430
68434
|
notificationError(t('AddFail'));
|
|
68431
68435
|
});
|
|
68432
68436
|
};
|
|
68433
68437
|
const getDataType = (e) => {
|
|
68434
|
-
return
|
|
68438
|
+
return e.dataType === 'numeric' || e.dataType === 'datetime' || e.dataType === 'date' ? e.dataType : e.dataType === 'boolean' ? 'checkbox' : 'text';
|
|
68435
68439
|
};
|
|
68436
68440
|
const defaultValidateExcelColumns = [
|
|
68437
68441
|
{
|
|
68438
68442
|
field: 'row',
|
|
68439
|
-
headerText:
|
|
68443
|
+
headerText: 'Row',
|
|
68440
68444
|
fixedType: 'left',
|
|
68441
68445
|
textAlign: 'center',
|
|
68442
68446
|
width: 80
|
|
68443
68447
|
},
|
|
68444
68448
|
{
|
|
68445
68449
|
field: 'result',
|
|
68446
|
-
headerText:
|
|
68450
|
+
headerText: 'Result',
|
|
68447
68451
|
fixedType: 'left',
|
|
68448
68452
|
width: 140,
|
|
68449
68453
|
template: (props) => {
|
|
68450
|
-
return
|
|
68454
|
+
return props.errors?.length === 0 ? jsxRuntime.jsx("span", { className: "text-success", children: t('Valid') }) : jsxRuntime.jsx("span", { className: "text-danger", children: t('Invalid') });
|
|
68451
68455
|
}
|
|
68452
68456
|
},
|
|
68453
68457
|
{
|
|
68454
68458
|
field: 'errorDetail',
|
|
68455
|
-
headerText:
|
|
68459
|
+
headerText: 'Error detail',
|
|
68456
68460
|
fixedType: 'left',
|
|
68457
68461
|
width: 550,
|
|
68458
68462
|
template: (props) => {
|
|
@@ -68466,16 +68470,18 @@ const ModalImportComponent = (props) => {
|
|
|
68466
68470
|
console.log(watch('dataMap'));
|
|
68467
68471
|
}, [watch('dataMap')]);
|
|
68468
68472
|
const handleFormOpened = () => {
|
|
68469
|
-
getGeneralSettingApi()
|
|
68473
|
+
getGeneralSettingApi()
|
|
68474
|
+
.then((rs) => {
|
|
68470
68475
|
const arr = rs?.value ? JSON.parse(rs.value) : [];
|
|
68471
68476
|
setValue('dataMap', [...mapColumn].map((x) => {
|
|
68472
|
-
const ele = arr.find(y => x.field === y.field);
|
|
68477
|
+
const ele = arr.find((y) => x.field === y.field);
|
|
68473
68478
|
if (ele) {
|
|
68474
68479
|
x.headerDefault = ele.headerDefault;
|
|
68475
68480
|
}
|
|
68476
68481
|
return x;
|
|
68477
68482
|
}));
|
|
68478
|
-
})
|
|
68483
|
+
})
|
|
68484
|
+
.catch(() => {
|
|
68479
68485
|
setValue('dataMap', [...mapColumn]);
|
|
68480
68486
|
});
|
|
68481
68487
|
if (headerValidateExcelColumns && headerValidateExcelColumns.length > 0) {
|
|
@@ -68484,7 +68490,7 @@ const ModalImportComponent = (props) => {
|
|
|
68484
68490
|
else {
|
|
68485
68491
|
setValidateExcelColumns([
|
|
68486
68492
|
...defaultValidateExcelColumns,
|
|
68487
|
-
...mapColumn.map(e => ({
|
|
68493
|
+
...mapColumn.map((e) => ({
|
|
68488
68494
|
field: e.field,
|
|
68489
68495
|
headerText: e.header,
|
|
68490
68496
|
width: e.width ?? 150,
|
|
@@ -68506,7 +68512,7 @@ const ModalImportComponent = (props) => {
|
|
|
68506
68512
|
setValue('step', 2);
|
|
68507
68513
|
}
|
|
68508
68514
|
};
|
|
68509
|
-
return (jsxRuntime.jsx(Modal$1, { isOpen: openModal, toggle: handleModal, backdrop:
|
|
68515
|
+
return (jsxRuntime.jsx(Modal$1, { isOpen: openModal, toggle: handleModal, backdrop: "static", className: "modal-dialog-centered modal-xl", contentClassName: "p-0", onOpened: handleFormOpened, onClosed: handleModalClosed, children: jsxRuntime.jsxs(Form$1, { id: "form-modal-globalzone", className: "todo-modal modal-form-content", children: [jsxRuntime.jsx(ModalHeader, { typeModal: 'Import', handleModal: handleModal, title: "Import Excel" }), jsxRuntime.jsx(Scrollbars, { autoHide: true, autoHeight: true, autoHeightMax: windowSize.innerHeight - 120, children: jsxRuntime.jsx(ModalBody$1, { children: jsxRuntime.jsx("div", { style: { marginTop: '-25px' }, className: "modern-horizontal-wizard", children: jsxRuntime.jsx(Wizard, { activeStep: watch('step'), type: "modern-horizontal", steps: [
|
|
68510
68516
|
{
|
|
68511
68517
|
id: 'upload-file',
|
|
68512
68518
|
title: t('Upload file'),
|
|
@@ -68525,12 +68531,12 @@ const ModalImportComponent = (props) => {
|
|
|
68525
68531
|
{
|
|
68526
68532
|
id: 'handle-error',
|
|
68527
68533
|
title: t('Error result'),
|
|
68528
|
-
|
|
68534
|
+
visible: !!headerErrorExcelColumns,
|
|
68529
68535
|
content: jsxRuntime.jsx(TabHandleErrorImportExcel, { formatNumber: formatNumber, dataError: dataError, headerHandleErrorExcelColumns: headerErrorExcelColumns ?? [], windowSize: windowSize })
|
|
68530
68536
|
}
|
|
68531
|
-
] }) }) }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between align-items-center p-1", style: { boxShadow:
|
|
68537
|
+
] }) }) }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-between align-items-center p-1", style: { boxShadow: '0 4px 24px 0 rgb(34 41 47 / 10%)' }, children: [jsxRuntime.jsx("div", { className: "d-flex align-items-center", children: watch('step') === 2 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Input$1, { checked: isSaveSetting, type: "checkbox", className: "me-50", onChange: (val) => {
|
|
68532
68538
|
setIsSaveSetting(val.target.checked);
|
|
68533
|
-
} }), jsxRuntime.jsx("span", { children: "L\u01B0u th\u00F4ng tin gh\u00E9p tr\u01B0\u1EDDng d\u1EEF li\u1EC7u" })] }) }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center", children: [jsxRuntime.jsx(Button$1$1, { disabled: !getValues('file'), color: "primary", outline: true, className: `update-btn update-todo-item me-1 ${watch('step') !== 1 ? '' : 'd-none'}`, onClick: handleBackStep, children: t('Back') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') !== 3 ? '' : 'd-none'}`, disabled: !watch('file') || checkInitValidate, color: "primary", onClick: handleSubmit(onSubmit), children: t('Next') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') === 3 ? '' : 'd-none'}`, disabled: dataValid.length === 0 || !getValues('file') || checkInit, color: "primary", onClick: handleSubmit(onSubmit), children: t('Import') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleModal, outline: true, children: t('Close') })] })] })] }) }));
|
|
68539
|
+
} }), jsxRuntime.jsx("span", { children: "L\u01B0u th\u00F4ng tin gh\u00E9p tr\u01B0\u1EDDng d\u1EEF li\u1EC7u" })] })) }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center", children: [jsxRuntime.jsx(Button$1$1, { disabled: !getValues('file'), color: "primary", outline: true, className: `update-btn update-todo-item me-1 ${watch('step') !== 1 ? '' : 'd-none'}`, onClick: handleBackStep, children: t('Back') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') !== 3 ? '' : 'd-none'}`, disabled: !watch('file') || checkInitValidate, color: "primary", onClick: handleSubmit(onSubmit), children: t('Next') }), jsxRuntime.jsx(Button$1$1, { className: `update-btn update-todo-item me-1 ${watch('step') === 3 ? '' : 'd-none'}`, disabled: dataValid.length === 0 || !getValues('file') || checkInit, color: "primary", onClick: handleSubmit(onSubmit), children: t('Import') }), jsxRuntime.jsx(Button$1$1, { color: "secondary", onClick: handleModal, outline: true, children: t('Close') })] })] })] }) }));
|
|
68534
68540
|
};
|
|
68535
68541
|
|
|
68536
68542
|
const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParent, resources, resourceCode, windowSize, renderModal }) => {
|
|
@@ -68663,7 +68669,7 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68663
68669
|
};
|
|
68664
68670
|
|
|
68665
68671
|
const RenderContentCol = (props) => {
|
|
68666
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
|
|
68672
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, groupColumns, visibleGroupColumn, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
|
|
68667
68673
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68668
68674
|
const checkOverflow = () => {
|
|
68669
68675
|
const element = document.getElementById(cellId);
|
|
@@ -68733,7 +68739,7 @@ const RenderContentCol = (props) => {
|
|
|
68733
68739
|
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, children: displayText }) }))] }));
|
|
68734
68740
|
}
|
|
68735
68741
|
};
|
|
68736
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
|
|
68742
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (visibleGroupColumn || !groupColumns?.includes(col.field)) && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
|
|
68737
68743
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68738
68744
|
right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
|
|
68739
68745
|
}, onClick: (e) => {
|
|
@@ -68781,12 +68787,27 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68781
68787
|
}
|
|
68782
68788
|
setExpandsAll(true);
|
|
68783
68789
|
}, [groupSetting?.groupColumns]);
|
|
68784
|
-
const { levels: headerColumns,
|
|
68790
|
+
const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
|
|
68785
68791
|
const rs = calculateTableStructure(columns, settingColumns?.value);
|
|
68786
68792
|
setContentColumns(rs.flat);
|
|
68787
68793
|
return rs;
|
|
68788
68794
|
}, [columns, settingColumns]);
|
|
68789
68795
|
const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
|
|
68796
|
+
const firstColSpan = React$5.useMemo(() => {
|
|
68797
|
+
let count = 0;
|
|
68798
|
+
let index = 3;
|
|
68799
|
+
for (let i = 0; i < contentColumns.length; i++) {
|
|
68800
|
+
const col = contentColumns[i];
|
|
68801
|
+
if (col.visible !== false && (groupSetting?.visibleGroupColumn || !groupColumns?.includes(col.field))) {
|
|
68802
|
+
count++;
|
|
68803
|
+
}
|
|
68804
|
+
if (count === 3) {
|
|
68805
|
+
index = i;
|
|
68806
|
+
break;
|
|
68807
|
+
}
|
|
68808
|
+
}
|
|
68809
|
+
return index;
|
|
68810
|
+
}, [contentColumns, groupColumns]);
|
|
68790
68811
|
// Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
|
|
68791
68812
|
const viewData = React$5.useMemo(() => {
|
|
68792
68813
|
if (!dataSource || dataSource.length === 0) {
|
|
@@ -68995,7 +69016,6 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
68995
69016
|
}
|
|
68996
69017
|
}
|
|
68997
69018
|
}, [selectedItem]);
|
|
68998
|
-
const firstColSpan = flatVisble.length > 6 ? 3 : Math.floor(flatVisble.length / 2);
|
|
68999
69019
|
const RenderContent = ({ datas, level = 0 }) => {
|
|
69000
69020
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: datas.map((row, indexRow) => {
|
|
69001
69021
|
const [expand, setExpand] = React$5.useState(row.expand ?? true);
|
|
@@ -69020,12 +69040,15 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69020
69040
|
if (col.template) {
|
|
69021
69041
|
value = col.template(row, indexRow) ?? '';
|
|
69022
69042
|
}
|
|
69023
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan:
|
|
69043
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: 3, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: { marginLeft: level * 20, transform: expand ? 'rotate(90deg)' : 'rotate(0deg)' }, fontSize: 15, onClick: () => {
|
|
69024
69044
|
setExpand(!expand);
|
|
69025
69045
|
setExpandsAll(undefined);
|
|
69026
69046
|
row.expand = !expand;
|
|
69027
69047
|
} }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69028
|
-
|
|
69048
|
+
console.log(indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field)));
|
|
69049
|
+
console.log(firstColSpan);
|
|
69050
|
+
console.log(!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field));
|
|
69051
|
+
if (indexCol < firstColSpan || colSum.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns?.includes(colSum.field))) {
|
|
69029
69052
|
return;
|
|
69030
69053
|
}
|
|
69031
69054
|
let sumValue = row[colSum.field];
|
|
@@ -69046,11 +69069,11 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69046
69069
|
}
|
|
69047
69070
|
else {
|
|
69048
69071
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69049
|
-
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable }, indexCol))) }, `row-content-${indexRow}`));
|
|
69072
|
+
return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn }, indexCol))) }, `row-content-${indexRow}`));
|
|
69050
69073
|
}
|
|
69051
69074
|
}) }));
|
|
69052
69075
|
};
|
|
69053
|
-
return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns:
|
|
69076
|
+
return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
|
|
69054
69077
|
return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting.optionsFilter, allowFiltering: querySetting.allowFiltering, allowSorting: querySetting.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
|
|
69055
69078
|
setFilterBy([...val]);
|
|
69056
69079
|
if (querySetting?.changeFilter) {
|
|
@@ -69061,9 +69084,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
|
|
|
69061
69084
|
if (querySetting?.changeOrder) {
|
|
69062
69085
|
querySetting.changeOrder(val);
|
|
69063
69086
|
}
|
|
69064
|
-
}, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
|
|
69087
|
+
}, columns: contentColumns, groupColumns: groupColumns, visibleGroupColumn: groupSetting?.visibleGroupColumn, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
|
|
69065
69088
|
}) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsxRuntime.jsx(RenderContent, { datas: viewData }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
|
|
69066
|
-
if (col.visible === false) {
|
|
69089
|
+
if (col.visible === false || (!groupSetting?.visibleGroupColumn && groupColumns.includes(col.field))) {
|
|
69067
69090
|
return;
|
|
69068
69091
|
}
|
|
69069
69092
|
const item = columnsAggregate?.find((x) => x.field === col.field);
|