From 8d8d84b961314a57983cfd45d676771ea2545a65 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 27 Aug 2024 14:10:00 +0300 Subject: [PATCH] Client:Table:Separating table columns of my documents and recent documents. --- .../Section/Body/TableView/TableHeader.js | 69 +++++++++++--- .../TableView/sub-components/RecentRowData.js | 66 +++++++------ packages/client/src/store/TableStore.js | 94 +++++++++++++++++-- 3 files changed, 181 insertions(+), 48 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 2e65b2b9eb..ca584fa758 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -211,9 +211,9 @@ class FilesTableHeader extends React.Component { } else if (isRecentTab) { const authorBlock = !isPublicRoom ? { - key: "Author", + key: "AuthorRecent", title: t("ByAuthor"), - enable: this.props.authorColumnIsEnabled, + enable: this.props.authorRecentColumnIsEnabled, resizable: true, sortBy: SortByFieldName.Author, // onClick: this.onFilter, @@ -221,6 +221,11 @@ class FilesTableHeader extends React.Component { } : {}; + console.log( + "getTableColumns modifiedRecentColumnIsEnabled", + this.props.modifiedRecentColumnIsEnabled, + ); + const columns = [ { key: "Name", @@ -232,11 +237,12 @@ class FilesTableHeader extends React.Component { minWidth: 210, onClick: this.onFilter, }, + { ...authorBlock }, { - key: "Created", + key: "CreatedRecent", title: t("ByCreation"), - enable: this.props.createdColumnIsEnabled, + enable: this.props.createdRecentColumnIsEnabled, resizable: true, sortBy: SortByFieldName.CreationDate, // onClick: this.onFilter, @@ -252,27 +258,27 @@ class FilesTableHeader extends React.Component { onChange: this.onColumnChange, }, { - key: "Modified", + key: "ModifiedRecent", title: t("ByLastModified"), - enable: this.props.modifiedColumnIsEnabled, + enable: this.props.modifiedRecentColumnIsEnabled, resizable: true, sortBy: SortByFieldName.ModifiedDate, // onClick: this.onFilter, onChange: this.onColumnChange, }, { - key: "Size", + key: "SizeRecent", title: t("Common:Size"), - enable: this.props.sizeColumnIsEnabled, + enable: this.props.sizeRecentColumnIsEnabled, resizable: true, sortBy: SortByFieldName.Size, onClick: this.onFilter, onChange: this.onColumnChange, }, { - key: "Type", + key: "TypeRecent", title: t("Common:Type"), - enable: this.props.typeColumnIsEnabled, + enable: this.props.typeRecentColumnIsEnabled, resizable: true, sortBy: SortByFieldName.Type, // onClick: this.onFilter, @@ -359,7 +365,11 @@ class FilesTableHeader extends React.Component { defaultColumns.push(...columns); } - let columns = getColumns(defaultColumns); + console.log("call getColumns defaultColumns", defaultColumns); + + let columns = getColumns(defaultColumns, isRecentTab); + + console.log("getTableColumns columns", columns); const storageColumns = localStorage.getItem(tableStorageName); const splitColumns = storageColumns && storageColumns.split(","); const resetColumnsSize = @@ -371,6 +381,11 @@ class FilesTableHeader extends React.Component { const sortOrder = isRooms ? roomsFilter.sortOrder : filter.sortOrder; this.setTableColumns(tableColumns); + console.log( + "fromUpdate this.props.modifiedRecentColumnIsEnabled", + fromUpdate, + this.props.modifiedRecentColumnIsEnabled, + ); if (fromUpdate) { this.setState({ columns, @@ -454,6 +469,17 @@ class FilesTableHeader extends React.Component { sortBy !== this.state.sortBy || sortOrder !== this.state.sortOrder ) { + console.log( + "isRecentTab this.state.isRecentTab", + isRecentTab, + this.state.isRecentTab, + ); + console.log("sortBy this.state.sortBy", sortBy, this.state.sortBy); + console.log( + "sortOrder this.state.sortOrder", + sortOrder, + this.state.sortOrder, + ); return this.getTableColumns(true); } @@ -464,6 +490,12 @@ class FilesTableHeader extends React.Component { if (columnIndex === -1) return; columns[columnIndex].enable = this.props.withContent; + console.log( + "componentDidUpdate columns[columnIndex].enable", + columns[columnIndex].enable, + this.props.withContent, + ); + this.setState({ columns }); } @@ -482,10 +514,11 @@ class FilesTableHeader extends React.Component { onColumnChange = (key) => { const { columns } = this.state; - + console.log("onColumnChange columns", columns); const columnIndex = columns.findIndex((c) => c.key === key); if (columnIndex === -1) return; + console.log("onColumnChange setColumnEnable", key); this.props.setColumnEnable(key); columns[columnIndex].enable = !columns[columnIndex].enable; @@ -650,6 +683,12 @@ export default inject( roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, + authorRecentColumnIsEnabled, + modifiedRecentColumnIsEnabled, + createdRecentColumnIsEnabled, + sizeRecentColumnIsEnabled, + typeRecentColumnIsEnabled, + getColumns, setColumnEnable, } = tableStore; @@ -701,6 +740,12 @@ export default inject( roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, + authorRecentColumnIsEnabled, + modifiedRecentColumnIsEnabled, + createdRecentColumnIsEnabled, + sizeRecentColumnIsEnabled, + typeRecentColumnIsEnabled, + getColumns, setColumnEnable, isTrashFolder, 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 b8af6e6856..b018b46249 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 @@ -40,11 +40,11 @@ import { const RecentRowDataComponent = (props) => { const { - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, + authorRecentColumnIsEnabled, + createdRecentColumnIsEnabled, + modifiedRecentColumnIsEnabled, + sizeRecentColumnIsEnabled, + typeRecentColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, @@ -87,15 +87,17 @@ const RecentRowDataComponent = (props) => { - {authorColumnIsEnabled ? ( + {authorRecentColumnIsEnabled ? ( {
)} - {createdColumnIsEnabled ? ( + {createdRecentColumnIsEnabled ? ( {
)} - {modifiedColumnIsEnabled ? ( + {modifiedRecentColumnIsEnabled ? ( {
)} - {sizeColumnIsEnabled ? ( + {sizeRecentColumnIsEnabled ? ( {
)} - {typeColumnIsEnabled ? ( + {typeRecentColumnIsEnabled ? ( { export default inject(({ tableStore }) => { const { - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, + authorRecentColumnIsEnabled, + createdRecentColumnIsEnabled, + modifiedRecentColumnIsEnabled, + sizeRecentColumnIsEnabled, + typeRecentColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, tableStorageName, } = tableStore; return { - authorColumnIsEnabled, - createdColumnIsEnabled, - modifiedColumnIsEnabled, - sizeColumnIsEnabled, - typeColumnIsEnabled, + authorRecentColumnIsEnabled, + createdRecentColumnIsEnabled, + modifiedRecentColumnIsEnabled, + sizeRecentColumnIsEnabled, + typeRecentColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, tableStorageName, diff --git a/packages/client/src/store/TableStore.js b/packages/client/src/store/TableStore.js index 17ecd1d76f..95de48a4b1 100644 --- a/packages/client/src/store/TableStore.js +++ b/packages/client/src/store/TableStore.js @@ -63,11 +63,17 @@ class TableStore { authorColumnIsEnabled = false; roomColumnIsEnabled = true; erasureColumnIsEnabled = true; - createdColumnIsEnabled = true; + createdColumnIsEnabled = false; modifiedColumnIsEnabled = true; sizeColumnIsEnabled = true; - typeColumnIsEnabled = true; + typeColumnIsEnabled = false; quickButtonsColumnIsEnabled = true; + + authorRecentColumnIsEnabled = true; + modifiedRecentColumnIsEnabled = false; + createdRecentColumnIsEnabled = false; + sizeRecentColumnIsEnabled = true; + typeRecentColumnIsEnabled = false; lastOpenedColumnIsEnabled = true; authorTrashColumnIsEnabled = true; @@ -120,14 +126,27 @@ class TableStore { this.authorColumnIsEnabled = enable; }; + setAuthorRecentColumn = (enable) => { + this.authorRecentColumnIsEnabled = enable; + }; + setCreatedColumn = (enable) => { this.createdColumnIsEnabled = enable; }; + setCreatedRecentColumn = (enable) => { + this.createdRecentColumnIsEnabled = enable; + }; + setModifiedColumn = (enable) => { this.modifiedColumnIsEnabled = enable; }; + setModifiedRecentColumn = (enable) => { + console.log("setModifiedRecentColumn", enable); + this.modifiedRecentColumnIsEnabled = enable; + }; + setRoomColumn = (enable) => { this.roomColumnIsEnabled = enable; }; @@ -140,10 +159,18 @@ class TableStore { this.sizeColumnIsEnabled = enable; }; + setSizeRecentColumn = (enable) => { + this.sizeRecentColumnIsEnabled = enable; + }; + setTypeColumn = (enable) => { this.typeColumnIsEnabled = enable; }; + setTypeRecentColumn = (enable) => { + this.typeRecentColumnIsEnabled = enable; + }; + setQuickButtonsColumn = (enable) => { this.quickButtonsColumnIsEnabled = enable; }; @@ -176,7 +203,7 @@ class TableStore { setAccountsInsideGroupColumnGroup = (enable) => (this.groupAccountsInsideGroupColumnIsEnabled = enable); - setColumnsEnable = (frameTableColumns) => { + setColumnsEnable = (frameTableColumns, isRecentTab) => { const storageColumns = localStorage.getItem(this.tableStorageName); const splitColumns = storageColumns ? storageColumns.split(",") @@ -184,6 +211,8 @@ class TableStore { ? frameTableColumns.split(",") : null; + console.log("splitColumns", splitColumns); + if (splitColumns) { const { isRoomsFolder, @@ -192,9 +221,21 @@ class TableStore { getIsAccountsPeople, getIsAccountsGroups, getIsAccountsInsideGroup, + // isRecentTab, + // isRecentFolder, } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + // console.log( + // "getIsAccountsPeople getIsAccountsGroups getIsAccountsInsideGroup", + // getIsAccountsPeople(), + // getIsAccountsGroups(), + // getIsAccountsInsideGroup(), + // ); + + // console.log("isRooms isTrashFolder", isRooms, isTrashFolder); + if (isRooms) { this.setRoomColumnType(splitColumns.includes("Type")); this.setRoomColumnTags(splitColumns.includes("Tags")); @@ -240,13 +281,31 @@ class TableStore { return; } + console.log("setColumnsEnable isRecentTab", isRecentTab); + console.log("window.location", window.location); + + if (isRecentTab) { + console.log( + "call setModifiedRecentColumn", + splitColumns.includes("ModifiedRecent"), + ); + + this.setModifiedRecentColumn(splitColumns.includes("ModifiedRecent")); + this.setAuthorRecentColumn(splitColumns.includes("AuthorRecent")); + this.setCreatedRecentColumn(splitColumns.includes("CreatedRecent")); + this.setLastOpenedColumn(splitColumns.includes("LastOpened")); + this.setSizeRecentColumn(splitColumns.includes("SizeRecent")); + this.setTypeRecentColumn(splitColumns.includes("TypeRecent")); + this.setQuickButtonsColumn(splitColumns.includes("QuickButtons")); + return; + } + this.setModifiedColumn(splitColumns.includes("Modified")); this.setAuthorColumn(splitColumns.includes("Author")); this.setCreatedColumn(splitColumns.includes("Created")); this.setSizeColumn(splitColumns.includes("Size")); this.setTypeColumn(splitColumns.includes("Type")); this.setQuickButtonsColumn(splitColumns.includes("QuickButtons")); - this.setLastOpenedColumn(splitColumns.includes("LastOpened")); } }; @@ -272,6 +331,9 @@ class TableStore { case "AuthorTrash": this.setAuthorTrashColumn(!this.authorTrashColumnIsEnabled); return; + case "AuthorRecent": + this.setAuthorRecentColumn(!this.authorRecentColumnIsEnabled); + return; case "Created": this.setCreatedColumn(!this.createdColumnIsEnabled); @@ -279,6 +341,9 @@ class TableStore { case "CreatedTrash": this.setCreatedTrashColumn(!this.createdTrashColumnIsEnabled); return; + case "CreatedRecent": + this.setCreatedRecentColumn(!this.createdRecentColumnIsEnabled); + return; case "Department": getIsAccountsPeople() @@ -291,6 +356,9 @@ class TableStore { case "Modified": this.setModifiedColumn(!this.modifiedColumnIsEnabled); return; + case "ModifiedRecent": + this.setModifiedRecentColumn(!this.modifiedRecentColumnIsEnabled); + return; case "Erasure": this.setErasureColumn(!this.erasureColumnIsEnabled); @@ -302,6 +370,9 @@ class TableStore { case "SizeTrash": this.setSizeTrashColumn(!this.sizeTrashColumnIsEnabled); return; + case "SizeRecent": + this.setSizeRecentColumn(!this.sizeRecentColumnIsEnabled); + return; case "Type": isRooms @@ -319,6 +390,10 @@ class TableStore { this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled); return; + case "TypeRecent": + this.setTypeRecentColumn(!this.typeRecentColumnIsEnabled); + return; + case "QuickButtons": this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled); return; @@ -370,7 +445,7 @@ class TableStore { } }; - getColumns = (defaultColumns) => { + getColumns = (defaultColumns, isRecentTab) => { const { isFrame, frameConfig } = this.settingsStore; const storageColumns = localStorage.getItem(this.tableStorageName); const splitColumns = storageColumns && storageColumns.split(","); @@ -379,16 +454,23 @@ class TableStore { const columns = []; if (splitColumns) { - this.setColumnsEnable(); + console.log( + "getColumns defaultColumns splitColumns", + defaultColumns, + splitColumns, + ); + this.setColumnsEnable(null, isRecentTab); for (let col of defaultColumns) { const column = splitColumns.find((key) => key === col.key); + column ? (col.enable = true) : (col.enable = false); columns.push(col); } return columns; } else if (isFrame && frameTableColumns) { + console.log("2"); this.setColumnsEnable(frameTableColumns); const frameTableArray = frameTableColumns.split(",");