From 92c4f384c295733c339f45aa867e0961c4d2b9f8 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Sat, 27 Apr 2024 18:03:44 +0300 Subject: [PATCH] Web: Files: SDK: fixed table view --- .../Section/Body/TableView/TableHeader.js | 11 ----- packages/client/src/store/TableStore.js | 41 ++++++++++++++----- .../shared/components/table/TableHeader.tsx | 8 ++-- 3 files changed, 35 insertions(+), 25 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 2f9120af9b..829d9cbf2b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -50,7 +50,6 @@ class FilesTableHeader extends React.Component { columnInfoPanelStorageName, isPublicRoom, isFrame, - frameTableColumns, isRecentTab, isDefaultRoomsQuotaSet, showStorageInfo, @@ -366,15 +365,6 @@ class FilesTableHeader extends React.Component { !splitColumns || isFrame; - if (isFrame && frameTableColumns) { - const frameTableArray = frameTableColumns.split(","); - - columns = columns.map((col) => { - col.enable = frameTableArray.includes(col.key) ? true : false; - return col; - }); - } - const tableColumns = columns.map((c) => c.enable && c.key); this.setTableColumns(tableColumns); @@ -705,7 +695,6 @@ export default inject( publicRoomKey, isFrame, - frameTableColumns: frameConfig?.viewTableColumns, isRecentTab, showSettings: frameConfig?.showSettings, isDefaultRoomsQuotaSet, diff --git a/packages/client/src/store/TableStore.js b/packages/client/src/store/TableStore.js index b837cd7c54..fbdd93d8ad 100644 --- a/packages/client/src/store/TableStore.js +++ b/packages/client/src/store/TableStore.js @@ -34,13 +34,11 @@ const TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS = `insideGroupTableColumns_ver-${Table const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`; const TABLE_TRASH_COLUMNS = `trashTableColumns_ver-${TableVersions.Trash}`; const TABLE_RECENT_COLUMNS = `recentTableColumns_ver-${TableVersions.Recent}`; -const TABLE_SDK_COLUMNS = `filesSDKTableColumns_ver-${TableVersions.Files}`; const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`; const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`; const COLUMNS_TRASH_SIZE = `trashColumnsSize_ver-${TableVersions.Trash}`; const COLUMNS_RECENT_SIZE = `recentColumnsSize_ver-${TableVersions.Recent}`; -const COLUMNS_SDK_SIZE = `filesSDKColumnsSize_ver-${TableVersions.Files}`; const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`; const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`; @@ -176,9 +174,13 @@ class TableStore { setAccountsInsideGroupColumnGroup = (enable) => (this.groupAccountsInsideGroupColumnIsEnabled = enable); - setColumnsEnable = () => { + setColumnsEnable = (frameTableColumns) => { const storageColumns = localStorage.getItem(this.tableStorageName); - const splitColumns = storageColumns && storageColumns.split(","); + const splitColumns = storageColumns + ? storageColumns.split(",") + : frameTableColumns + ? frameTableColumns.split(",") + : null; if (splitColumns) { const { @@ -360,8 +362,10 @@ class TableStore { }; getColumns = (defaultColumns) => { + const { isFrame, frameConfig } = this.settingsStore; const storageColumns = localStorage.getItem(this.tableStorageName); const splitColumns = storageColumns && storageColumns.split(","); + const frameTableColumns = frameConfig?.viewTableColumns; const columns = []; @@ -375,11 +379,20 @@ class TableStore { columns.push(col); } return columns; + } else if (isFrame && frameTableColumns) { + this.setColumnsEnable(frameTableColumns); + + const frameTableArray = frameTableColumns.split(","); + return defaultColumns.map((col) => { + col.enable = frameTableArray.includes(col.key) ? true : false; + return col; + }); } else { return defaultColumns; } }; + // Column names get tableStorageName() { const { isRoomsFolder, @@ -395,9 +408,9 @@ class TableStore { const userId = this.userStore.user?.id; const isFrame = this.settingsStore.isFrame; - if (isFrame) return `${TABLE_SDK_COLUMNS}=${userId}`; - return isRooms + + const tableStorageName = isRooms ? `${TABLE_ROOMS_COLUMNS}=${userId}` : getIsAccountsPeople() ? `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}` @@ -410,8 +423,11 @@ class TableStore { : isRecentTab ? `${TABLE_RECENT_COLUMNS}=${userId}` : `${TABLE_COLUMNS}=${userId}`; + + return isFrame ? `SDK_${tableStorageName}` : tableStorageName; } + // Table column sizes get columnStorageName() { const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } = this.treeFoldersStore; @@ -419,17 +435,18 @@ class TableStore { const userId = this.userStore.user?.id; const isFrame = this.settingsStore.isFrame; - if (isFrame) return `${COLUMNS_SDK_SIZE}=${userId}`; - - return isRooms + const columnStorageName = isRooms ? `${COLUMNS_ROOMS_SIZE}=${userId}` : isTrashFolder ? `${COLUMNS_TRASH_SIZE}=${userId}` : isRecentTab ? `${COLUMNS_RECENT_SIZE}=${userId}` : `${COLUMNS_SIZE}=${userId}`; + + return isFrame ? `SDK_${columnStorageName}` : columnStorageName; } + // Column names for info-panel get columnInfoPanelStorageName() { const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } = this.treeFoldersStore; @@ -439,13 +456,17 @@ class TableStore { if (isFrame) return `${COLUMNS_SDK_SIZE_INFO_PANEL}=${userId}`; - return isRooms + const columnInfoPanelStorageName = isRooms ? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}` : isTrashFolder ? `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}` : isRecentTab ? `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}` : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; + + return isFrame + ? `SDK_${columnInfoPanelStorageName}` + : columnInfoPanelStorageName; } get filesColumnStorageName() { diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index 46798d3d01..985205a7bb 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -1205,7 +1205,7 @@ class TableHeader extends React.Component< // TODO: If defaultSize(75px) is less than defaultMinColumnSize(110px) the calculations work correctly const defaultSize = - columns.find((col) => col.defaultSize)?.defaultSize || 0; + columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0; // TODO: Fixed columns size if something went wrong if (storageSize) { @@ -1621,7 +1621,7 @@ class TableHeader extends React.Component< let countColumns = 0; const defaultColumnSize = - columns.find((col) => col.defaultSize)?.defaultSize || 0; + columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0; newGridTemplateColumns.forEach((item, index) => { const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize); @@ -1703,8 +1703,8 @@ class TableHeader extends React.Component< : document.getElementById("table-container"); const containerWidth = container ? container.clientWidth : 0; - const firstColumnPercent = 40; - const percent = 60 / enableColumns.length; + const firstColumnPercent = enableColumns.length > 0 ? 40 : 100; + const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0; const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`; const otherColumns = `${(containerWidth * percent) / 100}px`;