From cc644180a5fc10b218a93e885ee7073d1e4c780b Mon Sep 17 00:00:00 2001 From: DmitrySychugov Date: Fri, 14 Jun 2024 19:46:34 +0500 Subject: [PATCH] Client: fixed table bug with indexing mode --- .../Section/Body/TableView/TableHeader.js | 5 +-- .../shared/components/table/Table.types.ts | 2 +- .../shared/components/table/TableHeader.tsx | 36 +++++++++++++++++-- .../table/sub-components/TableHeaderCell.tsx | 3 ++ 4 files changed, 40 insertions(+), 6 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js index 6bdd51499e..473d9d62df 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -363,9 +363,9 @@ class FilesTableHeader extends React.Component { key: "Index", title: "#", enable: this.props.indexColumnIsEnabled, - minWidth: 75, + minWidth: 60, resizable: false, - shortColumn: true, + isShort: true, onChange: this.onColumnChange, }); } @@ -583,6 +583,7 @@ class FilesTableHeader extends React.Component { columnInfoPanelStorageName={columnInfoPanelStorageName} sectionWidth={sectionWidth} resetColumnsSize={resetColumnsSize} + isIndexing={isIndexing} sortingVisible={isIndexing ? false : sortingVisible} isIndexEditingMode={isIndexEditingMode} infoPanelVisible={infoPanelVisible} diff --git a/packages/shared/components/table/Table.types.ts b/packages/shared/components/table/Table.types.ts index 1e9a10f116..c1c518f34d 100644 --- a/packages/shared/components/table/Table.types.ts +++ b/packages/shared/components/table/Table.types.ts @@ -50,7 +50,7 @@ export type TTableColumn = { defaultSize?: number; default?: boolean; resizable?: boolean; - shortColumn?: boolean; + isShort?: boolean; checkbox?: { value: boolean; isIndeterminate: boolean; diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index ecd0fba81c..7973f4fbca 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -1329,13 +1329,31 @@ class TableHeader extends React.Component< } if (hideColumnsConst) { + const shortColumnSize = + columns.find((col) => col.isShort && col.enable)?.minWidth || 0; + tableInfoPanelContainer.forEach((item, index) => { const column = document.getElementById(`column_${index}`); + const isSettingColumn = + Number(index) === tableInfoPanelContainer.length - 1; + const isQuickButtonColumn = + Number(index) === tableInfoPanelContainer.length - 2; + + if (isIndexEditingMode && isSettingColumn) { + gridTemplateColumns.push("75px"); + } + + if (isIndexEditingMode && isQuickButtonColumn) { + gridTemplateColumns.push("24px"); + } + if (column?.dataset?.minWidth && column?.dataset?.default) { gridTemplateColumns.push( - `${containerWidth - defaultSize - settingsSize}px`, + `${containerWidth - defaultSize - shortColumnSize - settingsSize}px`, ); + } else if (column?.dataset?.minWidth && column?.dataset?.shortColum) { + gridTemplateColumns.push(`${column?.dataset?.minWidth}px`); } else if ( item === `${defaultSize}px` || item === `${settingsSize}px` @@ -1501,6 +1519,8 @@ class TableHeader extends React.Component< (column ? column.dataset.enable === "true" : item !== "0px"); const defaultColumnSize = column && column.dataset.defaultSize; const isSettingColumn = Number(index) === tableContainer.length - 1; + const isQuickButtonColumn = + Number(index) === tableContainer.length - 2; const isActiveNow = item === "0px" && enable; if (isActiveNow && column) activeColumnIndex = index; @@ -1525,6 +1545,8 @@ class TableHeader extends React.Component< } else if (item !== `${settingsSize}px` || isIndexEditingMode) { const percent = (getSubstring(item) / oldWidth) * 100; + let newSettingsSize = isIndexEditingMode ? 0 : settingsSize; + if (percent === 100) { const enableColumnsLength = columns.filter( (column) => !column.defaultSize && column.enable, @@ -1543,7 +1565,7 @@ class TableHeader extends React.Component< : percent === 0 ? `${defaultMinColumnSize}px` : `${ - ((containerWidth - defaultSize - settingsSize) * + ((containerWidth - defaultSize - newSettingsSize) * percent) / 100 }px`; @@ -1567,6 +1589,14 @@ class TableHeader extends React.Component< newItemWidth = `${defaultMinColumnSize}px`; } + if (isIndexEditingMode && isSettingColumn) { + newItemWidth = "75px"; + } + + if (isIndexEditingMode && isQuickButtonColumn) { + newItemWidth = `24px`; + } + gridTemplateColumns.push(newItemWidth); } else { gridTemplateColumns.push(item); @@ -1729,7 +1759,7 @@ class TableHeader extends React.Component< for (const col of columns) { if (col.default) { str += `${wideColumnSize} `; - } else if (col.shortColumn) { + } else if (col.isShort) { str += `${col.minWidth}px `; } else str += col.enable diff --git a/packages/shared/components/table/sub-components/TableHeaderCell.tsx b/packages/shared/components/table/sub-components/TableHeaderCell.tsx index a22a18ed3c..7dcae05aee 100644 --- a/packages/shared/components/table/sub-components/TableHeaderCell.tsx +++ b/packages/shared/components/table/sub-components/TableHeaderCell.tsx @@ -55,6 +55,7 @@ const TableHeaderCell = ({ withTagRef, default: isDefault, checkbox, + isShort, } = column; const isActive = (sortBy && column.sortBy === sortBy) || active; @@ -82,6 +83,7 @@ const TableHeaderCell = ({ data-default={isDefault} data-enable={enable} data-min-width={minWidth} + data-short-colum={isShort} data-default-size={defaultSize} sortingVisible={sortingVisible} ref={tagRef} @@ -120,6 +122,7 @@ const TableHeaderCell = ({ id={`column_${index}`} data-enable={enable} data-default={isDefault} + data-short-colum={isShort} data-min-width={minWidth} data-default-size={defaultSize} sortingVisible={sortingVisible}