react-table-edit 1.5.35 → 1.5.37
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-view/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +196 -63
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +196 -63
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -41,6 +41,7 @@ type TableViewProps = {
|
|
|
41
41
|
contextMenuItems?: IContextItem[];
|
|
42
42
|
handleContextMenuClick?: (context: IContextItem, data: any) => void;
|
|
43
43
|
isMulti?: boolean;
|
|
44
|
+
haveSum?: boolean;
|
|
44
45
|
handleSelect?: (data: any) => void;
|
|
45
46
|
};
|
|
46
47
|
declare const TableView: React.FC<TableViewProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -743,6 +743,7 @@ type TableViewProps = {
|
|
|
743
743
|
contextMenuItems?: IContextItem[];
|
|
744
744
|
handleContextMenuClick?: (context: IContextItem, data: any) => void;
|
|
745
745
|
isMulti?: boolean;
|
|
746
|
+
haveSum?: boolean;
|
|
746
747
|
handleSelect?: (data: any) => void;
|
|
747
748
|
};
|
|
748
749
|
declare const TableView: React__default.FC<TableViewProps>;
|
package/dist/index.js
CHANGED
|
@@ -68737,15 +68737,39 @@ const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, sty
|
|
|
68737
68737
|
};
|
|
68738
68738
|
|
|
68739
68739
|
const RenderContentCol = (props) => {
|
|
68740
|
-
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti } = props;
|
|
68740
|
+
const { col, indexCol, indexRow, isSelected, row, zeroVisiable, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, setSelectedRows, handleCloseContext, handleDoubleClick, fieldKey, isMulti, } = props;
|
|
68741
68741
|
const cellId = `content-${idTable}-row${indexRow}col-${indexCol}`;
|
|
68742
68742
|
const checkOverflow = () => {
|
|
68743
68743
|
const element = document.getElementById(cellId);
|
|
68744
68744
|
return element && element.scrollWidth > element.clientWidth;
|
|
68745
68745
|
};
|
|
68746
68746
|
const RenderElement = () => {
|
|
68747
|
-
if (col.
|
|
68748
|
-
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer
|
|
68747
|
+
if (col.field === '#' || col.type === '#') {
|
|
68748
|
+
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer text-center', {
|
|
68749
|
+
'r-active-cell': isSelected,
|
|
68750
|
+
}), style: {
|
|
68751
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68752
|
+
? 600
|
|
68753
|
+
: 400,
|
|
68754
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68755
|
+
}, onDoubleClick: (e) => {
|
|
68756
|
+
e.preventDefault();
|
|
68757
|
+
handleCloseContext();
|
|
68758
|
+
handleDoubleClick?.(row, col);
|
|
68759
|
+
}, children: indexRow + 1 }));
|
|
68760
|
+
}
|
|
68761
|
+
else if (col.type === 'checkbox' || col.field === 'checkbox') {
|
|
68762
|
+
return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68763
|
+
'r-active-cell': isSelected,
|
|
68764
|
+
}), style: {
|
|
68765
|
+
display: 'flex',
|
|
68766
|
+
justifyContent: col.textAlign === 'center'
|
|
68767
|
+
? 'center'
|
|
68768
|
+
: col.textAlign === 'right'
|
|
68769
|
+
? 'flex-end'
|
|
68770
|
+
: 'flex-start',
|
|
68771
|
+
alignItems: 'center',
|
|
68772
|
+
}, onClick: (e) => {
|
|
68749
68773
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
68750
68774
|
if (index > -1) {
|
|
68751
68775
|
if (isMulti) {
|
|
@@ -68771,8 +68795,11 @@ const RenderContentCol = (props) => {
|
|
|
68771
68795
|
let value = row[col.field];
|
|
68772
68796
|
// ✅ Format dữ liệu theo loại cột
|
|
68773
68797
|
if (col.type === 'numeric') {
|
|
68774
|
-
value =
|
|
68775
|
-
|
|
68798
|
+
value =
|
|
68799
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
68800
|
+
if (!zeroVisiable &&
|
|
68801
|
+
!(row?.sortOrder < 0 || row?.sortOrder > 100000) &&
|
|
68802
|
+
(value === '0' || value === 0)) {
|
|
68776
68803
|
value = '';
|
|
68777
68804
|
}
|
|
68778
68805
|
}
|
|
@@ -68780,39 +68807,63 @@ const RenderContentCol = (props) => {
|
|
|
68780
68807
|
value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
|
|
68781
68808
|
}
|
|
68782
68809
|
else if (col.type === 'datetime') {
|
|
68783
|
-
value = value
|
|
68810
|
+
value = value
|
|
68811
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
68812
|
+
: '';
|
|
68784
68813
|
}
|
|
68785
68814
|
if (col.template) {
|
|
68786
68815
|
value = col.template(row, indexRow) ?? '';
|
|
68787
68816
|
}
|
|
68788
68817
|
const isNegative = col.type === 'numeric' && Number(row[col.field]) < 0;
|
|
68789
|
-
const textColor = isNegative
|
|
68790
|
-
|
|
68791
|
-
|
|
68792
|
-
const
|
|
68793
|
-
|
|
68794
|
-
|
|
68795
|
-
|
|
68818
|
+
const textColor = isNegative
|
|
68819
|
+
? (formatSetting?.colorNegative ?? 'red')
|
|
68820
|
+
: undefined;
|
|
68821
|
+
const prefix = isNegative ? (formatSetting?.prefixNegative ?? '-') : '';
|
|
68822
|
+
const suffix = isNegative ? (formatSetting?.suffixNegative ?? '') : '';
|
|
68823
|
+
const displayText = isNegative
|
|
68824
|
+
? `${prefix}${value}${suffix}`
|
|
68825
|
+
: (value ?? '');
|
|
68826
|
+
return (jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-div cursor-pointer', {
|
|
68827
|
+
'r-active-cell': isSelected,
|
|
68828
|
+
}), style: {
|
|
68829
|
+
fontWeight: row.sortOrder < 0 || row.sortOrder > 100000 || row.haveBoldType
|
|
68830
|
+
? 600
|
|
68831
|
+
: 400,
|
|
68832
|
+
fontStyle: row.haveItalicType ? 'italic' : 'normal',
|
|
68796
68833
|
}, onDoubleClick: (e) => {
|
|
68797
68834
|
e.preventDefault();
|
|
68798
68835
|
handleCloseContext();
|
|
68799
68836
|
handleDoubleClick?.(row, col);
|
|
68800
68837
|
}, children: [jsxRuntime.jsx("div", { className: "r-cell-text", style: {
|
|
68801
68838
|
display: 'flex',
|
|
68802
|
-
justifyContent: col.textAlign === 'center'
|
|
68803
|
-
|
|
68839
|
+
justifyContent: col.textAlign === 'center'
|
|
68840
|
+
? 'center'
|
|
68841
|
+
: col.textAlign === 'right'
|
|
68842
|
+
? 'flex-end'
|
|
68843
|
+
: 'flex-start',
|
|
68844
|
+
alignItems: 'center',
|
|
68804
68845
|
}, children: jsxRuntime.jsx("div", { id: cellId, style: {
|
|
68805
68846
|
color: textColor,
|
|
68806
68847
|
overflow: 'hidden',
|
|
68807
68848
|
textOverflow: 'ellipsis',
|
|
68808
68849
|
whiteSpace: 'pre',
|
|
68809
|
-
maxWidth: '100%'
|
|
68810
|
-
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor },
|
|
68850
|
+
maxWidth: '100%',
|
|
68851
|
+
}, children: displayText }) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: cellId, placement: "top", children: jsxRuntime.jsx("div", { style: { color: textColor }, onClick: (e) => {
|
|
68852
|
+
e.stopPropagation();
|
|
68853
|
+
e.preventDefault();
|
|
68854
|
+
}, children: displayText }) }))] }));
|
|
68811
68855
|
}
|
|
68812
68856
|
};
|
|
68813
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
|
|
68857
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && col.isGroup !== true && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, {
|
|
68858
|
+
'fixed-last': (col.fixedType === 'left' &&
|
|
68859
|
+
indexCol === lastObjWidthFixLeft) ||
|
|
68860
|
+
(col.fixedType === 'right' &&
|
|
68861
|
+
indexCol === fisrtObjWidthFixRight),
|
|
68862
|
+
}, { 'r-active': isSelected }), style: {
|
|
68814
68863
|
left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
|
|
68815
|
-
right: col.fixedType === 'right'
|
|
68864
|
+
right: col.fixedType === 'right'
|
|
68865
|
+
? objWidthFixRight[indexCol]
|
|
68866
|
+
: undefined,
|
|
68816
68867
|
}, onClick: (e) => {
|
|
68817
68868
|
if (e.target.nodeName === 'DIV' || e.target.nodeName === 'TD') {
|
|
68818
68869
|
const index = selectedRows?.findIndex((x) => x[fieldKey] === row[fieldKey]);
|
|
@@ -68833,12 +68884,11 @@ const RenderContentCol = (props) => {
|
|
|
68833
68884
|
setSelectedRows([row]);
|
|
68834
68885
|
}
|
|
68835
68886
|
}
|
|
68836
|
-
e.stopPropagation();
|
|
68837
68887
|
}
|
|
68838
68888
|
}, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
|
|
68839
68889
|
};
|
|
68840
68890
|
|
|
68841
|
-
const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick }) => {
|
|
68891
|
+
const TableView = ({ idTable, dataSource, height = 400, haveSum, columns, isLoading, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, zeroVisiable, isMulti, handleDoubleClick, contextMenuItems, handleContextMenuClick, }) => {
|
|
68842
68892
|
const { t } = reactI18next.useTranslation();
|
|
68843
68893
|
const gridRef = React$5.useRef(null);
|
|
68844
68894
|
const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
|
|
@@ -68846,7 +68896,8 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68846
68896
|
const [orderBy, setOrderBy] = React$5.useState([]);
|
|
68847
68897
|
const [filterBy, setFilterBy] = React$5.useState([]);
|
|
68848
68898
|
const [searchTerm, setSearchTerm] = React$5.useState('');
|
|
68849
|
-
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
|
|
68899
|
+
const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ??
|
|
68900
|
+
'id';
|
|
68850
68901
|
const [contentColumns, setContentColumns] = React$5.useState([]);
|
|
68851
68902
|
const [groupColumns, setGroupColumns] = React$5.useState([]);
|
|
68852
68903
|
const [expandsAll, setExpandsAll] = React$5.useState(true);
|
|
@@ -68865,7 +68916,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68865
68916
|
}
|
|
68866
68917
|
setExpandsAll(true);
|
|
68867
68918
|
}, [groupSetting?.groupColumns]);
|
|
68868
|
-
const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
|
|
68919
|
+
const { levels: headerColumns, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, } = React$5.useMemo(() => {
|
|
68869
68920
|
const rs = calculateTableStructure(columns, settingColumns?.value, groupSetting?.groupColumns);
|
|
68870
68921
|
setContentColumns(rs.flat);
|
|
68871
68922
|
return rs;
|
|
@@ -68894,7 +68945,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68894
68945
|
if (searchTerm) {
|
|
68895
68946
|
datas = datas.filter((row) => {
|
|
68896
68947
|
return searchSetting?.keyField?.some((key) => {
|
|
68897
|
-
return row[key]
|
|
68948
|
+
return row[key]
|
|
68949
|
+
?.toString()
|
|
68950
|
+
.toLowerCase()
|
|
68951
|
+
.includes(searchTerm.trim().toLowerCase());
|
|
68898
68952
|
});
|
|
68899
68953
|
});
|
|
68900
68954
|
}
|
|
@@ -68903,7 +68957,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68903
68957
|
return filterBy.every((filter) => {
|
|
68904
68958
|
const { key, value, ope } = filter;
|
|
68905
68959
|
const rowValue = row[key];
|
|
68906
|
-
if (rowValue === undefined ||
|
|
68960
|
+
if (rowValue === undefined ||
|
|
68961
|
+
rowValue === null ||
|
|
68962
|
+
value === undefined ||
|
|
68963
|
+
value === null) {
|
|
68907
68964
|
return false;
|
|
68908
68965
|
}
|
|
68909
68966
|
const valStr = String(rowValue).toLowerCase();
|
|
@@ -68966,10 +69023,19 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68966
69023
|
}
|
|
68967
69024
|
};
|
|
68968
69025
|
const searchTemplate = () => {
|
|
68969
|
-
return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
|
|
69026
|
+
return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined
|
|
69027
|
+
? searchSetting?.searchTerm
|
|
69028
|
+
: searchTerm, setSearchTerm: searchSetting?.setSearchTerm
|
|
69029
|
+
? searchSetting?.setSearchTerm
|
|
69030
|
+
: setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
|
|
68970
69031
|
};
|
|
68971
69032
|
const groupbtnTemplate = () => {
|
|
68972
|
-
return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
|
|
69033
|
+
return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[0]
|
|
69034
|
+
? {
|
|
69035
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerText ??
|
|
69036
|
+
contentColumns.find((x) => x.field === groupColumns[0])?.headerText),
|
|
69037
|
+
}
|
|
69038
|
+
: undefined, onChange: (val) => {
|
|
68973
69039
|
if (val) {
|
|
68974
69040
|
groupColumns[0] = val.field;
|
|
68975
69041
|
}
|
|
@@ -68977,7 +69043,12 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68977
69043
|
groupColumns.pop();
|
|
68978
69044
|
}
|
|
68979
69045
|
setGroupColumns([...groupColumns]);
|
|
68980
|
-
}, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
|
|
69046
|
+
}, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[1]
|
|
69047
|
+
? {
|
|
69048
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerText ??
|
|
69049
|
+
contentColumns.find((x) => x.field === groupColumns[1])?.headerText),
|
|
69050
|
+
}
|
|
69051
|
+
: undefined, onChange: (val) => {
|
|
68981
69052
|
if (val) {
|
|
68982
69053
|
groupColumns[1] = val.field;
|
|
68983
69054
|
}
|
|
@@ -68985,7 +69056,12 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68985
69056
|
groupColumns.pop();
|
|
68986
69057
|
}
|
|
68987
69058
|
setGroupColumns([...groupColumns]);
|
|
68988
|
-
}, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
|
|
69059
|
+
}, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: contentColumns, fieldLabel: 'headerText', fieldValue: 'field', value: groupColumns[2]
|
|
69060
|
+
? {
|
|
69061
|
+
headerText: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerText ??
|
|
69062
|
+
contentColumns.find((x) => x.field === groupColumns[2])?.headerText),
|
|
69063
|
+
}
|
|
69064
|
+
: undefined, onChange: (val) => {
|
|
68989
69065
|
if (groupSetting) {
|
|
68990
69066
|
if (val) {
|
|
68991
69067
|
groupColumns[2] = val.field;
|
|
@@ -68996,7 +69072,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
68996
69072
|
setGroupColumns([...groupColumns]);
|
|
68997
69073
|
}
|
|
68998
69074
|
}, isClearable: groupColumns?.length === 3 }) })] }), jsxRuntime.jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
|
|
68999
|
-
groupSetting?.onGroup({
|
|
69075
|
+
groupSetting?.onGroup({
|
|
69076
|
+
columnGrouped: groupColumns.filter((x) => x),
|
|
69077
|
+
});
|
|
69000
69078
|
document.getElementById('group-dropdown-toggle')?.click();
|
|
69001
69079
|
}, children: `${t('Apply')}` }), jsxRuntime.jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
|
|
69002
69080
|
groupSetting?.onGroup({ columnGrouped: [] });
|
|
@@ -69004,14 +69082,16 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69004
69082
|
}, children: `${t('Delete')}` })] })] })] }));
|
|
69005
69083
|
};
|
|
69006
69084
|
const chooseColumnsTemplate = () => {
|
|
69007
|
-
return jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
|
|
69085
|
+
return (jsxRuntime.jsx(SvgSettings, { className: "r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }));
|
|
69008
69086
|
};
|
|
69009
69087
|
const expandTemplate = () => {
|
|
69010
69088
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
|
|
69011
69089
|
setExpandsAll(true);
|
|
69012
|
-
}, color: "#7F7F7F", size: 24 })), expandsAll && jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
|
|
69090
|
+
}, color: "#7F7F7F", size: 24 })), expandsAll && (jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 }))] }));
|
|
69013
69091
|
};
|
|
69014
|
-
const defaultToolbarOption = searchSetting?.searchEnable
|
|
69092
|
+
const defaultToolbarOption = searchSetting?.searchEnable
|
|
69093
|
+
? [{ template: searchTemplate, align: 'left' }]
|
|
69094
|
+
: [];
|
|
69015
69095
|
if (groupSetting) {
|
|
69016
69096
|
defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
|
|
69017
69097
|
}
|
|
@@ -69020,7 +69100,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69020
69100
|
}
|
|
69021
69101
|
let toolbarTopOption = [];
|
|
69022
69102
|
if (toolbarSetting?.toolbarOptions) {
|
|
69023
|
-
toolbarTopOption = [
|
|
69103
|
+
toolbarTopOption = [
|
|
69104
|
+
...defaultToolbarOption,
|
|
69105
|
+
...toolbarSetting?.toolbarOptions,
|
|
69106
|
+
];
|
|
69024
69107
|
}
|
|
69025
69108
|
else {
|
|
69026
69109
|
toolbarTopOption = [...defaultToolbarOption];
|
|
@@ -69049,11 +69132,11 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69049
69132
|
}
|
|
69050
69133
|
};
|
|
69051
69134
|
React$5.useEffect(() => {
|
|
69052
|
-
console.log(selectedRows);
|
|
69053
|
-
console.log(isMulti);
|
|
69054
69135
|
if (setSelectedItem) {
|
|
69055
69136
|
if (isMulti) {
|
|
69056
|
-
if (dataSource &&
|
|
69137
|
+
if (dataSource &&
|
|
69138
|
+
selectedRows &&
|
|
69139
|
+
selectedRows?.length !== selectedItem?.length) {
|
|
69057
69140
|
setSelectedItem([...selectedRows]);
|
|
69058
69141
|
if (handleSelect) {
|
|
69059
69142
|
handleSelect([...selectedRows]);
|
|
@@ -69062,7 +69145,8 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69062
69145
|
}
|
|
69063
69146
|
else {
|
|
69064
69147
|
if (dataSource && selectedRows?.length > 0) {
|
|
69065
|
-
if (!selectedItem ||
|
|
69148
|
+
if (!selectedItem ||
|
|
69149
|
+
selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
69066
69150
|
setSelectedItem({ ...selectedRows[0] });
|
|
69067
69151
|
if (handleSelect) {
|
|
69068
69152
|
handleSelect({ ...selectedRows[0] });
|
|
@@ -69081,7 +69165,8 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69081
69165
|
React$5.useEffect(() => {
|
|
69082
69166
|
if (!isMulti) {
|
|
69083
69167
|
if (dataSource && selectedItem && selectedItem[fieldKey]) {
|
|
69084
|
-
if (selectedRows?.length === 0 ||
|
|
69168
|
+
if (selectedRows?.length === 0 ||
|
|
69169
|
+
selectedItem[fieldKey] !== selectedRows[0][fieldKey]) {
|
|
69085
69170
|
setSelectedRows([selectedItem]);
|
|
69086
69171
|
}
|
|
69087
69172
|
}
|
|
@@ -69090,7 +69175,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69090
69175
|
}
|
|
69091
69176
|
}
|
|
69092
69177
|
else {
|
|
69093
|
-
if (dataSource &&
|
|
69178
|
+
if (dataSource &&
|
|
69179
|
+
selectedItem &&
|
|
69180
|
+
selectedRows?.length !== selectedItem.length) {
|
|
69094
69181
|
setSelectedRows(selectedItem ? [...selectedItem] : []);
|
|
69095
69182
|
}
|
|
69096
69183
|
}
|
|
@@ -69108,44 +69195,68 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69108
69195
|
const col = contentColumns.find((x) => x.field === row.field);
|
|
69109
69196
|
let value = row[col.field];
|
|
69110
69197
|
if (col.type === 'numeric') {
|
|
69111
|
-
value =
|
|
69198
|
+
value =
|
|
69199
|
+
formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
|
|
69112
69200
|
}
|
|
69113
69201
|
else if (col.type === 'date') {
|
|
69114
|
-
value = value
|
|
69202
|
+
value = value
|
|
69203
|
+
? formatDateTime(value, formatSetting?.dateFormat)
|
|
69204
|
+
: '';
|
|
69115
69205
|
}
|
|
69116
69206
|
else if (col.type === 'datetime') {
|
|
69117
|
-
value = value
|
|
69207
|
+
value = value
|
|
69208
|
+
? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm')
|
|
69209
|
+
: '';
|
|
69118
69210
|
}
|
|
69119
69211
|
if (col.template) {
|
|
69120
69212
|
value = col.template(row, indexRow) ?? '';
|
|
69121
69213
|
}
|
|
69122
|
-
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: {
|
|
69214
|
+
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: {
|
|
69215
|
+
marginLeft: level * 20,
|
|
69216
|
+
transform: expand ? 'rotate(90deg)' : 'rotate(0deg)',
|
|
69217
|
+
}, fontSize: 15, onClick: () => {
|
|
69123
69218
|
setExpand(!expand);
|
|
69124
69219
|
setExpandsAll(undefined);
|
|
69125
69220
|
row.expand = !expand;
|
|
69126
69221
|
} }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
|
|
69127
|
-
if (indexCol <= firstColSpan ||
|
|
69222
|
+
if (indexCol <= firstColSpan ||
|
|
69223
|
+
colSum.visible === false ||
|
|
69224
|
+
colSum.isGroup === true) {
|
|
69128
69225
|
return;
|
|
69129
69226
|
}
|
|
69130
69227
|
let sumValue = row[colSum.field];
|
|
69131
|
-
const haveSum = row[colSum.field] !== undefined &&
|
|
69132
|
-
|
|
69228
|
+
const haveSum = row[colSum.field] !== undefined &&
|
|
69229
|
+
row[colSum.field] !== null;
|
|
69230
|
+
if (!haveSum &&
|
|
69231
|
+
colSum.haveSum === true &&
|
|
69232
|
+
colSum.type === 'numeric') {
|
|
69133
69233
|
sumValue = row.children.reduce(function (accumulator, currentValue) {
|
|
69134
|
-
return Number(accumulator ?? 0) +
|
|
69234
|
+
return (Number(accumulator ?? 0) +
|
|
69235
|
+
Number(currentValue[colSum.field] ?? 0));
|
|
69135
69236
|
}, 0);
|
|
69136
69237
|
}
|
|
69137
69238
|
if (colSum.type === 'numeric') {
|
|
69138
69239
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false);
|
|
69139
|
-
if (!zeroVisiable &&
|
|
69240
|
+
if (!zeroVisiable &&
|
|
69241
|
+
(sumValue === '0' || sumValue === 0)) {
|
|
69140
69242
|
sumValue = '';
|
|
69141
69243
|
}
|
|
69142
69244
|
}
|
|
69143
|
-
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
|
|
69144
|
-
|
|
69245
|
+
return (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsx("div", { className: "r-rowcell-div", style: {
|
|
69246
|
+
justifyContent: colSum.textAlign
|
|
69247
|
+
? colSum.textAlign
|
|
69248
|
+
: 'left',
|
|
69249
|
+
}, children: (haveSum || colSum.haveSum === true) &&
|
|
69250
|
+
Number(row[colSum.field] ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69251
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69252
|
+
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `group-sum-cell-${level}-${indexRow}-${indexCol}`));
|
|
69253
|
+
})] }), expand && (jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 }))] }, `row-${level}-${indexRow}`));
|
|
69145
69254
|
}
|
|
69146
69255
|
else {
|
|
69147
69256
|
const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
|
|
69148
|
-
return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
|
|
69257
|
+
return (jsxRuntime.jsx("tr", { id: `row-content-${indexRow}`, "aria-rowindex": indexRow + 1, role: "row", className: classNames$1('r-row', {
|
|
69258
|
+
'r-last-row': level === 0 && indexRow === viewData.length - 1,
|
|
69259
|
+
}), onContextMenu: (e) => {
|
|
69149
69260
|
e.preventDefault();
|
|
69150
69261
|
handleContextMenu(e, row);
|
|
69151
69262
|
}, children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMulti, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row, zeroVisiable: zeroVisiable, handleCloseContext: handleCloseContext, handleDoubleClick: handleDoubleClick }, indexCol))) }, `row-content-${indexRow}`));
|
|
@@ -69160,7 +69271,7 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69160
69271
|
x: e.clientX,
|
|
69161
69272
|
y: e.clientY,
|
|
69162
69273
|
row,
|
|
69163
|
-
show: true
|
|
69274
|
+
show: true,
|
|
69164
69275
|
});
|
|
69165
69276
|
}, 100);
|
|
69166
69277
|
};
|
|
@@ -69175,7 +69286,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69175
69286
|
virtualDivRef.current.style.height = '0px';
|
|
69176
69287
|
}
|
|
69177
69288
|
}, [context]);
|
|
69178
|
-
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: {
|
|
69289
|
+
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: {
|
|
69290
|
+
height: `${height ? `${height}px` : 'auto'}`,
|
|
69291
|
+
position: 'relative',
|
|
69292
|
+
}, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: contentColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
|
|
69179
69293
|
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: true, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting?.optionsFilter, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
|
|
69180
69294
|
setFilterBy([...val]);
|
|
69181
69295
|
if (querySetting?.changeFilter) {
|
|
@@ -69187,26 +69301,38 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69187
69301
|
querySetting.changeOrder(val);
|
|
69188
69302
|
}
|
|
69189
69303
|
}, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
|
|
69190
|
-
}) }), 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) => {
|
|
69304
|
+
}) }), 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 || haveSum) && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
|
|
69191
69305
|
if (col.visible === false || col.isGroup === true) {
|
|
69192
69306
|
return;
|
|
69193
69307
|
}
|
|
69194
69308
|
const item = columnsAggregate?.find((x) => x.field === col.field);
|
|
69195
69309
|
let sumValue = item?.value;
|
|
69196
|
-
if (!item &&
|
|
69310
|
+
if (!item &&
|
|
69311
|
+
col.haveSum === true &&
|
|
69312
|
+
col.type === 'numeric') {
|
|
69197
69313
|
sumValue = viewData.reduce(function (accumulator, currentValue) {
|
|
69198
|
-
return Number(accumulator ?? 0) +
|
|
69314
|
+
return (Number(accumulator ?? 0) +
|
|
69315
|
+
Number(currentValue[col.field] ?? 0));
|
|
69199
69316
|
}, 0);
|
|
69200
69317
|
}
|
|
69201
69318
|
if (col.type === 'numeric') {
|
|
69202
69319
|
sumValue = formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false);
|
|
69203
69320
|
}
|
|
69204
69321
|
return (jsxRuntime.jsx("td", { className: classNames$1(`p-0 px-50 r-footer fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }), style: {
|
|
69205
|
-
left: col.fixedType === 'left'
|
|
69206
|
-
|
|
69207
|
-
|
|
69208
|
-
|
|
69209
|
-
|
|
69322
|
+
left: col.fixedType === 'left'
|
|
69323
|
+
? objWidthFixLeft[indexCol]
|
|
69324
|
+
: undefined,
|
|
69325
|
+
right: col.fixedType === 'right'
|
|
69326
|
+
? objWidthFixRight[indexCol]
|
|
69327
|
+
: undefined,
|
|
69328
|
+
textAlign: col.textAlign ? col.textAlign : 'left',
|
|
69329
|
+
}, children: jsxRuntime.jsx("div", { className: "r-footer-div", children: (item || col.haveSum === true) &&
|
|
69330
|
+
Number(item?.value ?? '0') < 0 ? (jsxRuntime.jsxs("div", { style: {
|
|
69331
|
+
color: formatSetting?.colorNegative ?? 'red',
|
|
69332
|
+
}, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${sumValue}${formatSetting?.suffixNegative ?? ''}`] })) : (sumValue) }) }, `summarycell-${indexCol}`));
|
|
69333
|
+
}) })) })] }), jsxRuntime.jsx("div", { ref: virtualDivRef }), context &&
|
|
69334
|
+
(contextMenuItems?.length ?? 0) > 0 &&
|
|
69335
|
+
handleContextMenuClick && (jsxRuntime.jsx(Popover$1, { className: "r-context-popover", placement: "right-start", isOpen: context.show, target: virtualDivRef.current, toggle: handleCloseContext, fade: false, children: jsxRuntime.jsx(PopoverBody$1, { children: contextMenuItems?.map((item, index) => {
|
|
69210
69336
|
return (jsxRuntime.jsxs("div", { className: "r-context-item", onClick: () => {
|
|
69211
69337
|
handleCloseContext();
|
|
69212
69338
|
handleContextMenuClick?.(item, context.row);
|
|
@@ -69215,7 +69341,14 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isLoading, form
|
|
|
69215
69341
|
setOpenPopupSetupColumn(!openPopupSetupColumn);
|
|
69216
69342
|
}, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
|
|
69217
69343
|
if (saveSettingColumn) {
|
|
69218
|
-
saveSettingColumn(newColumns.map((x, index) => ({
|
|
69344
|
+
saveSettingColumn(newColumns.map((x, index) => ({
|
|
69345
|
+
field: x.field,
|
|
69346
|
+
headerText: x.headerDisplay,
|
|
69347
|
+
visible: x.visible,
|
|
69348
|
+
fixedType: x.fixedType,
|
|
69349
|
+
width: x.width,
|
|
69350
|
+
sortOrder: index + 1,
|
|
69351
|
+
})));
|
|
69219
69352
|
}
|
|
69220
69353
|
} })] }));
|
|
69221
69354
|
};
|