From f2b692153ded811854b32a067bcdb44564996f6e Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 17 Jun 2024 10:09:42 +0300 Subject: [PATCH 1/7] Shared:TableHeader:Fixed moving columns left and right so they reach their minimum width. --- .../shared/components/table/TableHeader.tsx | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index 4591a7e07a..8313db0fa6 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -912,6 +912,7 @@ const defaultMinColumnSize = 110; const settingsSize = 24; const minSizeFirstColumn = 210; +const handleOffset = 8; class TableHeader extends React.Component< TableHeaderProps, @@ -991,7 +992,7 @@ class TableHeader extends React.Component< ? leftColumn.dataset.minWidth : defaultMinColumnSize; - if (leftColumn.clientWidth <= +minSize) { + if (leftColumn.getBoundingClientRect().width <= +minSize) { if (colIndex < 0) return false; this.moveToLeft(widths, newWidth, colIndex - 1); return; @@ -1037,11 +1038,20 @@ class TableHeader extends React.Component< const defaultColumn = document.getElementById(`column_${colIndex}`); if (!defaultColumn || defaultColumn.dataset.defaultSize) return; - const handleOffset = 8; - if (column2Width + offset - handleOffset >= defaultMinColumnSize) { widths[+columnIndex] = `${newWidth + handleOffset}px`; widths[colIndex] = `${column2Width + offset - handleOffset}px`; + } else if (column2Width !== defaultMinColumnSize) { + const widthTableNumber: number[] = []; + widths.forEach((item) => widthTableNumber.push(+item.slice(0, -2))); + + const width = + widthTableNumber[+columnIndex] + + widthTableNumber[+colIndex] - + defaultMinColumnSize; + + widths[+columnIndex] = `${width}px`; + widths[colIndex] = `${defaultMinColumnSize}px`; } else { if (colIndex === columns.length) return false; this.moveToRight(widths, newWidth, colIndex + 1); @@ -1115,7 +1125,7 @@ class TableHeader extends React.Component< if (!column) return; const columnSize = column.getBoundingClientRect(); - const newWidth = isRtl + let newWidth = isRtl ? columnSize.right - e.clientX : e.clientX - columnSize.left; @@ -1126,11 +1136,19 @@ class TableHeader extends React.Component< ? column.dataset.minWidth : defaultMinColumnSize; - if (newWidth <= +minSize) { - const columnChanged = this.moveToLeft(widths, newWidth); + if (newWidth <= +minSize - handleOffset) { + const currentWidth = +widths[+columnIndex].slice(0, -2); - if (!columnChanged) { - widths[+columnIndex] = widths[+columnIndex]; + // Move left + if (currentWidth !== +minSize) { + newWidth = +minSize - handleOffset; + this.moveToRight(widths, newWidth); + } else { + const columnChanged = this.moveToLeft(widths, newWidth); + + if (!columnChanged) { + widths[+columnIndex] = widths[+columnIndex]; + } } } else { this.moveToRight(widths, newWidth); From f3be15bbb383e86f8b8200740a2ba35124ab652a Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 19 Jun 2024 22:11:32 +0300 Subject: [PATCH 2/7] Client:Table:In the table, the width of the column with quick buttons has been reduced, and the last column in the table has been indented to make the content wider. --- .../Section/Body/TableView/TableHeader.js | 8 ++-- .../TableView/sub-components/AuthorCell.js | 3 +- .../TableView/sub-components/CellStyles.js | 13 +++++++ .../Body/TableView/sub-components/DateCell.js | 2 + .../Body/TableView/sub-components/RoomCell.js | 3 +- .../TableView/sub-components/RoomsRowData.js | 28 ++++++++++++++ .../Body/TableView/sub-components/RowData.js | 37 +++++++++++++++++++ .../Body/TableView/sub-components/SizeCell.js | 3 +- .../Body/TableView/sub-components/TypeCell.js | 3 +- 9 files changed, 92 insertions(+), 8 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 5123b02d70..0b64e54096 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -111,7 +111,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.roomColumnQuickButtonsIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -201,7 +201,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -280,7 +280,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -350,7 +350,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js index 58c8434158..adaeddaba6 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js @@ -30,7 +30,7 @@ import { StyledText, StyledAuthorCell } from "./CellStyles"; import { Avatar } from "@docspace/shared/components/avatar"; import { decode } from "he"; -const AuthorCell = ({ fileOwner, sideColor, item }) => { +const AuthorCell = ({ fileOwner, sideColor, item, removeExtraSpace }) => { const { avatarSmall, hasAvatar } = item.createdBy; const avatarSource = hasAvatar ? avatarSmall : DefaultUserPhotoSize32PngUrl; @@ -48,6 +48,7 @@ const AuthorCell = ({ fileOwner, sideColor, item }) => { fontWeight={600} title={decode(fileOwner)} truncate + removeExtraSpace={removeExtraSpace} > {decode(fileOwner)} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js index 1b9c61db4e..c0d9e59ac8 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js @@ -37,6 +37,19 @@ const StyledText = styled(Text)` : css` margin-right: 12px; `} + + ${(props) => + props.removeExtraSpace && + css` + ${(props) => + props.theme.interfaceDirection === "rtl" + ? css` + margin-left: 0px; + ` + : css` + margin-right: 0px; + `} + `} `; const StyledTypeCell = styled(StyledText)` diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js index df40057a43..196596639e 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js @@ -34,6 +34,7 @@ const DateCell = ({ sideColor, lastOpenedDate, isRecentTab, + removeExtraSpace, }) => { const date = isRecentTab ? lastOpenedDate @@ -49,6 +50,7 @@ const DateCell = ({ color={sideColor} className="row_update-text" truncate + removeExtraSpace={removeExtraSpace} > {date && date} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js index 7990a2733b..caaa9a8c2e 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js @@ -32,7 +32,7 @@ import { StyledText } from "./CellStyles"; import { getFolderPath } from "@docspace/shared/api/files"; import { CategoryType } from "@docspace/client/src/helpers/constants"; -const RoomCell = ({ sideColor, item }) => { +const RoomCell = ({ sideColor, item, removeExtraSpace }) => { const { originRoomTitle, originId, originTitle } = item; const [path, setPath] = useState([]); @@ -66,6 +66,7 @@ const RoomCell = ({ sideColor, item }) => { truncate data-tooltip-id={"" + item.id} data-tip={""} + removeExtraSpace={removeExtraSpace} > {originRoomTitle || originTitle || ""} , diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js index 6d3cb0322f..09fc519f22 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -61,6 +61,19 @@ const RoomsRowDataComponent = (props) => { item, } = props; + const lastColumn = + showStorageInfo && roomQuotaColumnIsEnable + ? "roomQuotaColumnIsEnable" + : roomColumnActivityIsEnabled + ? "roomColumnActivityIsEnabled" + : roomColumnOwnerIsEnabled + ? "roomColumnOwnerIsEnabled" + : roomColumnTagsIsEnabled + ? "roomColumnTagsIsEnabled" + : roomColumnTypeIsEnabled + ? "roomColumnTypeIsEnabled" + : "fileNameColumn"; + return ( <> { > @@ -130,6 +148,11 @@ const RoomsRowDataComponent = (props) => { {...selectionProp} > @@ -148,6 +171,11 @@ const RoomsRowDataComponent = (props) => { {...selectionProp} > diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js index 8ccdd392fc..44c0d35c29 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -60,6 +60,18 @@ const RowDataComponent = (props) => { quickButtonsComponent, } = props; + const lastColumn = typeColumnIsEnabled + ? "typeColumnIsEnabled" + : sizeColumnIsEnabled + ? "sizeColumnIsEnabled" + : modifiedColumnIsEnabled + ? "modifiedColumnIsEnabled" + : createdColumnIsEnabled + ? "createdColumnIsEnabled" + : authorColumnIsEnabled + ? "authorColumnIsEnabled" + : "fileNameColumn"; + return ( <> { > @@ -111,6 +128,11 @@ const RowDataComponent = (props) => { @@ -127,6 +149,11 @@ const RowDataComponent = (props) => { > @@ -143,6 +170,11 @@ const RowDataComponent = (props) => { > @@ -161,6 +193,11 @@ const RowDataComponent = (props) => { > diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js index f1d77f4da8..9821f4d4cd 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js @@ -27,7 +27,7 @@ import React from "react"; import { StyledText } from "./CellStyles"; -const SizeCell = ({ t, item, sideColor }) => { +const SizeCell = ({ t, item, sideColor, removeExtraSpace }) => { const { fileExst, contentLength, providerKey, filesCount, foldersCount } = item; const date = fileExst || contentLength ? contentLength : ""; @@ -39,6 +39,7 @@ const SizeCell = ({ t, item, sideColor }) => { fontWeight={600} title={date} truncate + removeExtraSpace={removeExtraSpace} > {date} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TypeCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TypeCell.js index 5d11dc81b0..20d29fcbbc 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TypeCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TypeCell.js @@ -29,7 +29,7 @@ import { StyledTypeCell } from "./CellStyles"; import { FileType } from "@docspace/shared/enums"; import { getDefaultRoomName } from "../../../../../../helpers/filesUtils"; -const TypeCell = ({ t, item, sideColor }) => { +const TypeCell = ({ t, item, sideColor, removeExtraSpace }) => { const { fileExst, fileTypeName, fileType, roomType } = item; const getItemType = () => { switch (fileType) { @@ -69,6 +69,7 @@ const TypeCell = ({ t, item, sideColor }) => { color={sideColor} truncate title={data} + removeExtraSpace={removeExtraSpace} > {type}  From 9de5d75a26b5702195c757dd5c3a4fa9e6578371 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Thu, 20 Jun 2024 18:22:22 +0300 Subject: [PATCH 3/7] Client:Table:Rewrite get lastColumn. --- .../Section/Body/TableView/TableContainer.js | 7 ++- .../Home/Section/Body/TableView/TableRow.js | 3 + .../TableView/sub-components/RoomsRowData.js | 45 ++++++--------- .../Body/TableView/sub-components/RowData.js | 56 +++++++------------ 4 files changed, 47 insertions(+), 64 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 9a16198ff7..6ce3143869 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -138,6 +138,7 @@ const Table = ({ columnInfoPanelStorageName, highlightFile, currentDeviceType, + tableStorageName, }) => { const [tagCount, setTagCount] = React.useState(null); const [hideColumns, setHideColumns] = React.useState(false); @@ -210,6 +211,7 @@ const Table = ({ isHighlight={ highlightFile.id == item.id && highlightFile.isExst === !item.fileExst } + tableStorageName={tableStorageName} /> )); }, [ @@ -223,6 +225,7 @@ const Table = ({ highlightFile.id, highlightFile.isExst, isTrashFolder, + tableStorageName, ]); return ( @@ -270,7 +273,8 @@ export default inject( const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; - const { columnStorageName, columnInfoPanelStorageName } = tableStore; + const { columnStorageName, columnInfoPanelStorageName, tableStorageName } = + tableStore; const { filesList, @@ -306,6 +310,7 @@ export default inject( columnInfoPanelStorageName, highlightFile, currentDeviceType, + tableStorageName, }; }, )(observer(Table)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js index 0b00b54524..79cfe57bd9 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -72,6 +72,7 @@ const FilesTableRow = (props) => { badgeUrl, isRecentTab, canDrag, + tableStorageName, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -189,6 +190,7 @@ const FilesTableRow = (props) => { ) : isTrashFolder ? ( @@ -209,6 +211,7 @@ const FilesTableRow = (props) => { element={element} dragStyles={dragStyles} selectionProp={selectionProp} + tableStorageName={tableStorageName} {...props} /> )} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js index 09fc519f22..cdf1238ca2 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -59,20 +59,23 @@ const RoomsRowDataComponent = (props) => { badgesComponent, quickButtonsComponent, item, + tableStorageName, } = props; - const lastColumn = - showStorageInfo && roomQuotaColumnIsEnable - ? "roomQuotaColumnIsEnable" - : roomColumnActivityIsEnabled - ? "roomColumnActivityIsEnabled" - : roomColumnOwnerIsEnabled - ? "roomColumnOwnerIsEnabled" - : roomColumnTagsIsEnabled - ? "roomColumnTagsIsEnabled" - : roomColumnTypeIsEnabled - ? "roomColumnTypeIsEnabled" - : "fileNameColumn"; + let lastColumn = null; + + if (roomColumnQuickButtonsIsEnabled && tableStorageName) { + const storageColumns = localStorage.getItem(tableStorageName); + if (!storageColumns) return; + + const columns = storageColumns.split(","); + const filterColumns = columns.filter( + (column) => column !== "false" && column !== "QuickButtons", + ); + + if (filterColumns.length > 1) + lastColumn = filterColumns[filterColumns.length - 1]; + } return ( <> @@ -108,11 +111,7 @@ const RoomsRowDataComponent = (props) => { > @@ -148,11 +147,7 @@ const RoomsRowDataComponent = (props) => { {...selectionProp} > @@ -171,11 +166,7 @@ const RoomsRowDataComponent = (props) => { {...selectionProp} > diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js index 44c0d35c29..243f4ff924 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -58,19 +58,23 @@ const RowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + tableStorageName, } = props; - const lastColumn = typeColumnIsEnabled - ? "typeColumnIsEnabled" - : sizeColumnIsEnabled - ? "sizeColumnIsEnabled" - : modifiedColumnIsEnabled - ? "modifiedColumnIsEnabled" - : createdColumnIsEnabled - ? "createdColumnIsEnabled" - : authorColumnIsEnabled - ? "authorColumnIsEnabled" - : "fileNameColumn"; + let lastColumn = null; + + if (quickButtonsColumnIsEnabled && tableStorageName) { + const storageColumns = localStorage.getItem(tableStorageName); + + if (!storageColumns) return; + const columns = storageColumns.split(","); + const filterColumns = columns.filter( + (column) => column !== "false" && column !== "QuickButtons", + ); + + if (filterColumns.length > 1) + lastColumn = filterColumns[filterColumns.length - 1]; + } return ( <> @@ -104,11 +108,7 @@ const RowDataComponent = (props) => { > @@ -128,11 +128,7 @@ const RowDataComponent = (props) => { @@ -149,11 +145,7 @@ const RowDataComponent = (props) => { > @@ -170,11 +162,7 @@ const RowDataComponent = (props) => { > @@ -193,11 +181,7 @@ const RowDataComponent = (props) => { > From b6c7e60e2678ebdf555c821a0b3646355f484d11 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 24 Jun 2024 12:21:54 +0300 Subject: [PATCH 4/7] Client:Table:Delete removeExtraSpace, lastColumn calculation moved to Table component. --- .../Section/Body/TableView/StyledTable.js | 6 + .../Section/Body/TableView/TableContainer.js | 117 +++++++++++++++++- .../Home/Section/Body/TableView/TableRow.js | 8 +- .../TableView/sub-components/AuthorCell.js | 3 +- .../TableView/sub-components/CellStyles.js | 13 -- .../Body/TableView/sub-components/DateCell.js | 2 - .../TableView/sub-components/RecentRowData.js | 25 ++++ .../Body/TableView/sub-components/RoomCell.js | 3 +- .../TableView/sub-components/RoomsRowData.js | 32 ++--- .../Body/TableView/sub-components/RowData.js | 42 +++---- .../Body/TableView/sub-components/SizeCell.js | 3 +- .../TableView/sub-components/TrashRowData.js | 25 ++++ .../Body/TableView/sub-components/TypeCell.js | 3 +- 13 files changed, 212 insertions(+), 70 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index 1c70c17312..02b8418d14 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -323,6 +323,12 @@ const StyledTableRow = styled(TableRow)` `} } `} + + .no-extra-space { + p { + margin-right: 0px !important; + } + } `; const StyledDragAndDrop = styled(DragAndDrop)` diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 6ce3143869..dd56206989 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -139,9 +139,33 @@ const Table = ({ highlightFile, currentDeviceType, tableStorageName, + + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + roomQuotaColumnIsEnable, + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + + lastOpenedColumnIsEnabled, + + authorTrashColumnIsEnabled, + createdTrashColumnIsEnabled, + roomColumnIsEnabled, + erasureColumnIsEnabled, + sizeTrashColumnIsEnabled, + typeTrashColumnIsEnabled, }) => { const [tagCount, setTagCount] = React.useState(null); const [hideColumns, setHideColumns] = React.useState(false); + const [lastColumn, setLastColumn] = React.useState(null); const ref = useRef(null); const tagRef = useRef(null); @@ -191,6 +215,42 @@ const Table = ({ if (!isRooms) setTagCount(0); }, [isRooms]); + React.useEffect(() => { + if (!tableStorageName) return; + + const storageColumns = localStorage.getItem(tableStorageName); + if (!storageColumns) return; + + const columns = storageColumns.split(","); + const filterColumns = columns.filter( + (column) => column !== "false" && column !== "QuickButtons", + ); + + if (filterColumns.length > 1) + setLastColumn(filterColumns[filterColumns.length - 1]); + }, [ + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + roomQuotaColumnIsEnable, + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + lastOpenedColumnIsEnabled, + authorTrashColumnIsEnabled, + createdTrashColumnIsEnabled, + roomColumnIsEnabled, + erasureColumnIsEnabled, + sizeTrashColumnIsEnabled, + typeTrashColumnIsEnabled, + tableStorageName, + ]); + const filesListNode = useMemo(() => { return filesList.map((item, index) => ( )); }, [ @@ -225,7 +285,7 @@ const Table = ({ highlightFile.id, highlightFile.isExst, isTrashFolder, - tableStorageName, + lastColumn, ]); return ( @@ -273,8 +333,34 @@ export default inject( const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; - const { columnStorageName, columnInfoPanelStorageName, tableStorageName } = - tableStore; + const { + columnStorageName, + columnInfoPanelStorageName, + tableStorageName, + + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + roomQuotaColumnIsEnable, + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + + authorTrashColumnIsEnabled, + createdTrashColumnIsEnabled, + roomColumnIsEnabled, + erasureColumnIsEnabled, + sizeTrashColumnIsEnabled, + typeTrashColumnIsEnabled, + + lastOpenedColumnIsEnabled, + } = tableStore; const { filesList, @@ -311,6 +397,29 @@ export default inject( highlightFile, currentDeviceType, tableStorageName, + + roomQuotaColumnIsEnable, + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + lastOpenedColumnIsEnabled, + + authorTrashColumnIsEnabled, + createdTrashColumnIsEnabled, + roomColumnIsEnabled, + erasureColumnIsEnabled, + sizeTrashColumnIsEnabled, + typeTrashColumnIsEnabled, }; }, )(observer(Table)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js index 79cfe57bd9..c77ff2eccd 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -72,7 +72,7 @@ const FilesTableRow = (props) => { badgeUrl, isRecentTab, canDrag, - tableStorageName, + lastColumn, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -190,13 +190,14 @@ const FilesTableRow = (props) => { ) : isTrashFolder ? ( ) : isRecentTab ? ( @@ -204,6 +205,7 @@ const FilesTableRow = (props) => { element={element} dragStyles={dragStyles} selectionProp={selectionProp} + lastColumn={lastColumn} {...props} /> ) : ( @@ -211,7 +213,7 @@ const FilesTableRow = (props) => { element={element} dragStyles={dragStyles} selectionProp={selectionProp} - tableStorageName={tableStorageName} + lastColumn={lastColumn} {...props} /> )} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js index adaeddaba6..58c8434158 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js @@ -30,7 +30,7 @@ import { StyledText, StyledAuthorCell } from "./CellStyles"; import { Avatar } from "@docspace/shared/components/avatar"; import { decode } from "he"; -const AuthorCell = ({ fileOwner, sideColor, item, removeExtraSpace }) => { +const AuthorCell = ({ fileOwner, sideColor, item }) => { const { avatarSmall, hasAvatar } = item.createdBy; const avatarSource = hasAvatar ? avatarSmall : DefaultUserPhotoSize32PngUrl; @@ -48,7 +48,6 @@ const AuthorCell = ({ fileOwner, sideColor, item, removeExtraSpace }) => { fontWeight={600} title={decode(fileOwner)} truncate - removeExtraSpace={removeExtraSpace} > {decode(fileOwner)} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js index c0d9e59ac8..1b9c61db4e 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js @@ -37,19 +37,6 @@ const StyledText = styled(Text)` : css` margin-right: 12px; `} - - ${(props) => - props.removeExtraSpace && - css` - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 0px; - ` - : css` - margin-right: 0px; - `} - `} `; const StyledTypeCell = styled(StyledText)` diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js index 196596639e..df40057a43 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/DateCell.js @@ -34,7 +34,6 @@ const DateCell = ({ sideColor, lastOpenedDate, isRecentTab, - removeExtraSpace, }) => { const date = isRecentTab ? lastOpenedDate @@ -50,7 +49,6 @@ const DateCell = ({ color={sideColor} className="row_update-text" truncate - removeExtraSpace={removeExtraSpace} > {date && date} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js index 90323eaf1b..1396e2f3e6 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js @@ -59,6 +59,7 @@ const RecentRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + lastColumn, } = props; return ( @@ -90,6 +91,10 @@ const RecentRowDataComponent = (props) => { !authorColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Author" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Created" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "LastOpened" ? "no-extra-space" : "", + )} > { !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Modified" ? "no-extra-space" : "", + )} > { !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Size" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > { +const RoomCell = ({ sideColor, item }) => { const { originRoomTitle, originId, originTitle } = item; const [path, setPath] = useState([]); @@ -66,7 +66,6 @@ const RoomCell = ({ sideColor, item, removeExtraSpace }) => { truncate data-tooltip-id={"" + item.id} data-tip={""} - removeExtraSpace={removeExtraSpace} > {originRoomTitle || originTitle || ""} , diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js index cdf1238ca2..0576ad3869 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -59,24 +59,9 @@ const RoomsRowDataComponent = (props) => { badgesComponent, quickButtonsComponent, item, - tableStorageName, + lastColumn, } = props; - let lastColumn = null; - - if (roomColumnQuickButtonsIsEnabled && tableStorageName) { - const storageColumns = localStorage.getItem(tableStorageName); - if (!storageColumns) return; - - const columns = storageColumns.split(","); - const filterColumns = columns.filter( - (column) => column !== "false" && column !== "QuickButtons", - ); - - if (filterColumns.length > 1) - lastColumn = filterColumns[filterColumns.length - 1]; - } - return ( <> { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > @@ -145,9 +133,12 @@ const RoomsRowDataComponent = (props) => { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Owner" ? "no-extra-space" : "", + )} > @@ -164,9 +155,12 @@ const RoomsRowDataComponent = (props) => { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Activity" ? "no-extra-space" : "", + )} > diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js index 243f4ff924..a93956ec6b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -58,24 +58,9 @@ const RowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, - tableStorageName, + lastColumn, } = props; - let lastColumn = null; - - if (quickButtonsColumnIsEnabled && tableStorageName) { - const storageColumns = localStorage.getItem(tableStorageName); - - if (!storageColumns) return; - const columns = storageColumns.split(","); - const filterColumns = columns.filter( - (column) => column !== "false" && column !== "QuickButtons", - ); - - if (filterColumns.length > 1) - lastColumn = filterColumns[filterColumns.length - 1]; - } - return ( <> { !authorColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Author" ? "no-extra-space" : "", + )} > @@ -124,11 +112,14 @@ const RowDataComponent = (props) => { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Created" ? "no-extra-space" : "", + )} > @@ -142,10 +133,13 @@ const RowDataComponent = (props) => { !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Modified" ? "no-extra-space" : "", + )} > @@ -159,10 +153,13 @@ const RowDataComponent = (props) => { !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Size" ? "no-extra-space" : "", + )} > @@ -178,10 +175,13 @@ const RowDataComponent = (props) => { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js index 9821f4d4cd..f1d77f4da8 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js @@ -27,7 +27,7 @@ import React from "react"; import { StyledText } from "./CellStyles"; -const SizeCell = ({ t, item, sideColor, removeExtraSpace }) => { +const SizeCell = ({ t, item, sideColor }) => { const { fileExst, contentLength, providerKey, filesCount, foldersCount } = item; const date = fileExst || contentLength ? contentLength : ""; @@ -39,7 +39,6 @@ const SizeCell = ({ t, item, sideColor, removeExtraSpace }) => { fontWeight={600} title={date} truncate - removeExtraSpace={removeExtraSpace} > {date} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js index 8dd85c15a4..0c2bd3b511 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js @@ -61,6 +61,7 @@ const TrashRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + lastColumn, } = props; return ( @@ -92,6 +93,10 @@ const TrashRowDataComponent = (props) => { !roomColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Room" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "AuthorTrash" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "CreatedTrash" ? "no-extra-space" : "", + )} > { !erasureColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Erasure" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "SizeTrash" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "TypeTrash" ? "no-extra-space" : "", + )} > { +const TypeCell = ({ t, item, sideColor }) => { const { fileExst, fileTypeName, fileType, roomType } = item; const getItemType = () => { switch (fileType) { @@ -69,7 +69,6 @@ const TypeCell = ({ t, item, sideColor, removeExtraSpace }) => { color={sideColor} truncate title={data} - removeExtraSpace={removeExtraSpace} > {type}  From 119c1bdba8ad5a6ea2342647cd097b2b936f24e8 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 25 Jun 2024 17:39:28 +0300 Subject: [PATCH 5/7] Shared:Table:Add getLastColumn, refactoring. --- .../Section/Body/TableView/TableContainer.js | 116 +----------------- .../Home/Section/Body/TableView/TableRow.js | 5 - .../TableView/sub-components/RecentRowData.js | 8 +- .../TableView/sub-components/RoomsRowData.js | 8 +- .../Body/TableView/sub-components/RowData.js | 8 +- .../TableView/sub-components/TrashRowData.js | 8 +- packages/shared/utils/index.ts | 16 +++ 7 files changed, 41 insertions(+), 128 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index dd56206989..9a16198ff7 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -138,34 +138,9 @@ const Table = ({ columnInfoPanelStorageName, highlightFile, currentDeviceType, - tableStorageName, - - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, - quickButtonsColumnIsEnabled, - - roomQuotaColumnIsEnable, - roomColumnTypeIsEnabled, - roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, - roomColumnTagsIsEnabled, - roomColumnActivityIsEnabled, - - lastOpenedColumnIsEnabled, - - authorTrashColumnIsEnabled, - createdTrashColumnIsEnabled, - roomColumnIsEnabled, - erasureColumnIsEnabled, - sizeTrashColumnIsEnabled, - typeTrashColumnIsEnabled, }) => { const [tagCount, setTagCount] = React.useState(null); const [hideColumns, setHideColumns] = React.useState(false); - const [lastColumn, setLastColumn] = React.useState(null); const ref = useRef(null); const tagRef = useRef(null); @@ -215,42 +190,6 @@ const Table = ({ if (!isRooms) setTagCount(0); }, [isRooms]); - React.useEffect(() => { - if (!tableStorageName) return; - - const storageColumns = localStorage.getItem(tableStorageName); - if (!storageColumns) return; - - const columns = storageColumns.split(","); - const filterColumns = columns.filter( - (column) => column !== "false" && column !== "QuickButtons", - ); - - if (filterColumns.length > 1) - setLastColumn(filterColumns[filterColumns.length - 1]); - }, [ - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, - quickButtonsColumnIsEnabled, - roomQuotaColumnIsEnable, - roomColumnTypeIsEnabled, - roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, - roomColumnTagsIsEnabled, - roomColumnActivityIsEnabled, - lastOpenedColumnIsEnabled, - authorTrashColumnIsEnabled, - createdTrashColumnIsEnabled, - roomColumnIsEnabled, - erasureColumnIsEnabled, - sizeTrashColumnIsEnabled, - typeTrashColumnIsEnabled, - tableStorageName, - ]); - const filesListNode = useMemo(() => { return filesList.map((item, index) => ( )); }, [ @@ -285,7 +223,6 @@ const Table = ({ highlightFile.id, highlightFile.isExst, isTrashFolder, - lastColumn, ]); return ( @@ -333,34 +270,7 @@ export default inject( const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; - const { - columnStorageName, - columnInfoPanelStorageName, - tableStorageName, - - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, - quickButtonsColumnIsEnabled, - - roomQuotaColumnIsEnable, - roomColumnTypeIsEnabled, - roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, - roomColumnTagsIsEnabled, - roomColumnActivityIsEnabled, - - authorTrashColumnIsEnabled, - createdTrashColumnIsEnabled, - roomColumnIsEnabled, - erasureColumnIsEnabled, - sizeTrashColumnIsEnabled, - typeTrashColumnIsEnabled, - - lastOpenedColumnIsEnabled, - } = tableStore; + const { columnStorageName, columnInfoPanelStorageName } = tableStore; const { filesList, @@ -396,30 +306,6 @@ export default inject( columnInfoPanelStorageName, highlightFile, currentDeviceType, - tableStorageName, - - roomQuotaColumnIsEnable, - roomColumnTypeIsEnabled, - roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, - roomColumnTagsIsEnabled, - roomColumnActivityIsEnabled, - - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, - quickButtonsColumnIsEnabled, - - lastOpenedColumnIsEnabled, - - authorTrashColumnIsEnabled, - createdTrashColumnIsEnabled, - roomColumnIsEnabled, - erasureColumnIsEnabled, - sizeTrashColumnIsEnabled, - typeTrashColumnIsEnabled, }; }, )(observer(Table)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js index c77ff2eccd..0b00b54524 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -72,7 +72,6 @@ const FilesTableRow = (props) => { badgeUrl, isRecentTab, canDrag, - lastColumn, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -190,14 +189,12 @@ const FilesTableRow = (props) => { ) : isTrashFolder ? ( ) : isRecentTab ? ( @@ -205,7 +202,6 @@ const FilesTableRow = (props) => { element={element} dragStyles={dragStyles} selectionProp={selectionProp} - lastColumn={lastColumn} {...props} /> ) : ( @@ -213,7 +209,6 @@ const FilesTableRow = (props) => { element={element} dragStyles={dragStyles} selectionProp={selectionProp} - lastColumn={lastColumn} {...props} /> )} diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js index 1396e2f3e6..b8af6e6856 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -59,9 +59,11 @@ const RecentRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, - lastColumn, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { typeColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -254,5 +257,6 @@ export default inject(({ tableStore }) => { typeColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, + tableStorageName, }; })(observer(RecentRowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js index 0576ad3869..bcc5ffc22c 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import TagsCell from "./TagsCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer } from "../StyledTable"; import { StyledQuickButtonsContainer } from "../StyledTable"; import SpaceQuota from "SRC_DIR/components/SpaceQuota"; @@ -59,9 +59,11 @@ const RoomsRowDataComponent = (props) => { badgesComponent, quickButtonsComponent, item, - lastColumn, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, + tableStorageName, } = tableStore; const { showStorageInfo } = currentQuotaStore; @@ -224,5 +227,6 @@ export default inject(({ currentQuotaStore, tableStore }) => { roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, showStorageInfo, + tableStorageName, }; })(observer(RoomsRowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js index a93956ec6b..65d6583162 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -58,9 +58,11 @@ const RowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, - lastColumn, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { sizeColumnIsEnabled, typeColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -229,5 +232,6 @@ export default inject(({ tableStore }) => { sizeColumnIsEnabled, typeColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, }; })(observer(RowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js index 0c2bd3b511..61e66530a5 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -61,9 +61,11 @@ const TrashRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, - lastColumn, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -258,5 +261,6 @@ export default inject(({ tableStore }) => { sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, }; })(observer(TrashRowDataComponent)); diff --git a/packages/shared/utils/index.ts b/packages/shared/utils/index.ts index 7c41ffc1a8..cab623a058 100644 --- a/packages/shared/utils/index.ts +++ b/packages/shared/utils/index.ts @@ -164,3 +164,19 @@ export const getTitleWithoutExtension = ( ? titleWithoutExst : item.title; }; + +export const getLastColumn = (tableStorageName: string) => { + if (!tableStorageName) return; + + const storageColumns = localStorage.getItem(tableStorageName); + if (!storageColumns) return; + + const columns = storageColumns.split(","); + const filterColumns = columns.filter( + (column) => column !== "false" && column !== "QuickButtons", + ); + + if (filterColumns.length > 1) return filterColumns[filterColumns.length - 1]; + + return null; +}; From 67c56a93bbe6b582cd50ad9874076bc7b4e5f5d9 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 25 Jun 2024 18:55:33 +0300 Subject: [PATCH 6/7] Shared:Table:Refactoring. --- packages/shared/components/table/TableHeader.tsx | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index f752dc8699..2b9f28e6a3 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -164,12 +164,9 @@ class TableHeader extends React.Component< widths[+columnIndex] = `${newWidth + handleOffset}px`; widths[colIndex] = `${column2Width + offset - handleOffset}px`; } else if (column2Width !== defaultMinColumnSize) { - const widthTableNumber: number[] = []; - widths.forEach((item) => widthTableNumber.push(+item.slice(0, -2))); - const width = - widthTableNumber[+columnIndex] + - widthTableNumber[+colIndex] - + getSubstring(widths[+columnIndex]) + + getSubstring(widths[+colIndex]) - defaultMinColumnSize; widths[+columnIndex] = `${width}px`; @@ -265,13 +262,7 @@ class TableHeader extends React.Component< if (currentWidth !== +minSize) { newWidth = +minSize - handleOffset; this.moveToRight(widths, newWidth); - } else { - const columnChanged = this.moveToLeft(widths, newWidth); - - if (!columnChanged) { - widths[+columnIndex] = widths[+columnIndex]; - } - } + } else this.moveToLeft(widths, newWidth); } else { this.moveToRight(widths, newWidth); } From 7b51012c7e2e70902a15699a3992b73ad8886c70 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 26 Jun 2024 11:00:36 +0300 Subject: [PATCH 7/7] Shared:Table:Refactoring. --- packages/shared/components/table/TableHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index 2b9f28e6a3..1fb1e43b49 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -256,7 +256,7 @@ class TableHeader extends React.Component< : defaultMinColumnSize; if (newWidth <= +minSize - handleOffset) { - const currentWidth = +widths[+columnIndex].slice(0, -2); + const currentWidth = getSubstring(widths[+columnIndex]); // Move left if (currentWidth !== +minSize) {