From b93441d1f2638c288fd7c61311c44982950f5f27 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 1 Aug 2024 14:50:00 +0300 Subject: [PATCH 01/45] Client:Hiding badges__quickButtons. --- .../Section/Body/TableView/TableContainer.js | 7 +++ .../Section/Body/TableView/TableHeader.js | 56 +++++++++---------- .../TableView/sub-components/RecentRowData.js | 4 +- .../Body/TableView/sub-components/RowData.js | 14 ++++- .../table/sub-components/TableHeaderCell.tsx | 4 +- 5 files changed, 51 insertions(+), 34 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 6dbf73b5e7..e040836ea5 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -50,6 +50,13 @@ const contextCss = css` `; const StyledTableContainer = styled(TableContainer)` + .badges__quickButtons { + padding-left: 16px; + display: flex; + flex-grow: 2; + justify-content: flex-end; + } + .table-row-selected { .table-container_file-name-cell { ${fileNameCss} 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 76b188ceb9..8a21277f30 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -109,13 +109,13 @@ class FilesTableHeader extends React.Component { onChange: this.onColumnChange, onClick: this.onRoomsFilter, }, - { - key: "QuickButtons", - title: "", - enable: this.props.roomColumnQuickButtonsIsEnabled, - defaultSize: 52, - resizable: false, - }, + // { + // key: "QuickButtons", + // title: "", + // enable: this.props.roomColumnQuickButtonsIsEnabled, + // defaultSize: 52, + // resizable: false, + // }, ]; showStorageInfo && @@ -199,13 +199,13 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 52, - resizable: false, - }, + // { + // key: "QuickButtons", + // title: "", + // enable: this.props.quickButtonsColumnIsEnabled, + // defaultSize: 52, + // resizable: false, + // }, ]; defaultColumns.push(...columns); } else if (isRecentTab) { @@ -278,13 +278,13 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 52, - resizable: false, - }, + // { + // key: "QuickButtons", + // title: "", + // enable: this.props.quickButtonsColumnIsEnabled, + // defaultSize: 52, + // resizable: false, + // }, ]; defaultColumns.push(...columns); } else { @@ -348,13 +348,13 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 52, - resizable: false, - }, + // { + // key: "QuickButtons", + // title: "", + // enable: this.props.quickButtonsColumnIsEnabled, + // defaultSize: 52, + // resizable: false, + // }, ]; defaultColumns.push(...columns); } 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..945c285056 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 @@ -213,7 +213,7 @@ const RecentRowDataComponent = (props) => { ) : (
)} - {quickButtonsColumnIsEnabled ? ( + {/* {quickButtonsColumnIsEnabled ? ( { ) : (
- )} + )} */} ); }; 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 65d6583162..60b94bfbe1 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 @@ -63,6 +63,10 @@ const RowDataComponent = (props) => { const lastColumn = getLastColumn(tableStorageName); + console.log("lastColumn", lastColumn); + console.log("quickButtonsComponent", quickButtonsComponent); + console.log("sizeColumnIsEnabled", sizeColumnIsEnabled); + return ( <> { {badgesComponent} + {/* {lastColumn === "Name" ? quickButtonsComponent : <>} */} {authorColumnIsEnabled ? ( @@ -101,6 +106,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {/* {lastColumn === "Author" ? quickButtonsComponent : <>} */} ) : (
@@ -124,6 +130,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {/* {lastColumn === "Created" ? quickButtonsComponent : <>} */} ) : (
@@ -144,6 +151,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {/* {lastColumn === "Modified" ? quickButtonsComponent : <>} */} ) : (
@@ -164,6 +172,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {/* {lastColumn === "Size" ? quickButtonsComponent : <>} */} ) : (
@@ -186,11 +195,12 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {/* {lastColumn === "Type" ? quickButtonsComponent : <>} */} ) : (
)} - {quickButtonsColumnIsEnabled ? ( + {/* {quickButtonsColumnIsEnabled ? ( { ) : (
- )} + )} */} ); }; diff --git a/packages/shared/components/table/sub-components/TableHeaderCell.tsx b/packages/shared/components/table/sub-components/TableHeaderCell.tsx index a22a18ed3c..bfae281ca4 100644 --- a/packages/shared/components/table/sub-components/TableHeaderCell.tsx +++ b/packages/shared/components/table/sub-components/TableHeaderCell.tsx @@ -82,7 +82,7 @@ const TableHeaderCell = ({ data-default={isDefault} data-enable={enable} data-min-width={minWidth} - data-default-size={defaultSize} + // data-default-size={defaultSize} sortingVisible={sortingVisible} ref={tagRef} > @@ -121,7 +121,7 @@ const TableHeaderCell = ({ data-enable={enable} data-default={isDefault} data-min-width={minWidth} - data-default-size={defaultSize} + // data-default-size={defaultSize} sortingVisible={sortingVisible} >
From f62d9ee64deaf6d95df3f9eda369eba9fa5e9a21 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 1 Aug 2024 14:51:01 +0300 Subject: [PATCH 02/45] Shared:Changing the function to display the last column and the Name column too. --- packages/shared/utils/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/utils/index.ts b/packages/shared/utils/index.ts index 6f4d74fba9..2ef9af784f 100644 --- a/packages/shared/utils/index.ts +++ b/packages/shared/utils/index.ts @@ -179,7 +179,7 @@ export const getLastColumn = (tableStorageName: string) => { (column) => column !== "false" && column !== "QuickButtons", ); - if (filterColumns.length > 1) return filterColumns[filterColumns.length - 1]; + if (filterColumns.length > 0) return filterColumns[filterColumns.length - 1]; return null; }; From 398f1480b57122f76e57eb2f0a45b2fd4a64e1e8 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:51:08 +0300 Subject: [PATCH 03/45] Client:Table:Add quickButtonsComponent in table cell. --- .../Body/TableView/sub-components/RowData.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) 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 60b94bfbe1..ee41b09a12 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 @@ -63,10 +63,6 @@ const RowDataComponent = (props) => { const lastColumn = getLastColumn(tableStorageName); - console.log("lastColumn", lastColumn); - console.log("quickButtonsComponent", quickButtonsComponent); - console.log("sizeColumnIsEnabled", sizeColumnIsEnabled); - return ( <> { {badgesComponent} - {/* {lastColumn === "Name" ? quickButtonsComponent : <>} */} + {lastColumn === "Name" ? quickButtonsComponent : <>} {authorColumnIsEnabled ? ( @@ -106,7 +102,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {/* {lastColumn === "Author" ? quickButtonsComponent : <>} */} + {lastColumn === "Author" ? quickButtonsComponent : <>} ) : (
@@ -130,7 +126,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {/* {lastColumn === "Created" ? quickButtonsComponent : <>} */} + {lastColumn === "Created" ? quickButtonsComponent : <>} ) : (
@@ -151,7 +147,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {/* {lastColumn === "Modified" ? quickButtonsComponent : <>} */} + {lastColumn === "Modified" ? quickButtonsComponent : <>} ) : (
@@ -172,7 +168,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {/* {lastColumn === "Size" ? quickButtonsComponent : <>} */} + {lastColumn === "Size" ? quickButtonsComponent : <>} ) : (
@@ -195,7 +191,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {/* {lastColumn === "Type" ? quickButtonsComponent : <>} */} + {lastColumn === "Type" ? quickButtonsComponent : <>} ) : (
From 393fb016b3b24e02efc491df2b10d8658cd473fd Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:53:41 +0300 Subject: [PATCH 04/45] Shared:Table:Fix jump context menu in row after adding/hiding a column after removing a column with quick buttons. --- 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 c7557492d2..2f7d9a9f5c 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -412,7 +412,7 @@ class TableHeaderComponent extends React.Component< if (!container) return; - const containerWidth = +container.clientWidth; + const containerWidth = container.getBoundingClientRect().width; const defaultWidth = tableContainer .map((column) => getSubstring(column)) From 902feb36542210c174dcf6d45964f290446285d9 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 5 Aug 2024 17:55:23 +0300 Subject: [PATCH 05/45] Shared:IconButton:Fixed flickering of quick buttons with color when adding/hiding a column. --- packages/shared/components/icon-button/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/icon-button/IconButton.tsx b/packages/shared/components/icon-button/IconButton.tsx index 018d31f7a2..90fa472833 100644 --- a/packages/shared/components/icon-button/IconButton.tsx +++ b/packages/shared/components/icon-button/IconButton.tsx @@ -64,7 +64,7 @@ const IconButton = ({ const [currentIconName, setCurrentIconName] = React.useState(iconName); const [currentIconColor, setCurrentIconColor] = React.useState< string | undefined - >(iconName); + >(color); const onMouseEnterAction = (e: React.MouseEvent) => { if (isDisabled) return; From 260445c4c6c49fe9dbf21a1bb099623ed3577af1 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:32:24 +0300 Subject: [PATCH 06/45] Client:QuickButtons:Added quick buttons to the last column in the table rooms. --- .../pages/Home/Section/Body/TableView/TableHeader.js | 2 +- .../Body/TableView/sub-components/RoomsRowData.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 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 f97adabdf0..269d443fa2 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -119,7 +119,7 @@ class FilesTableHeader extends React.Component { ]; showStorageInfo && - columns.splice(columns.length - 1, 0, { + columns.splice(columns.length, 0, { key: "Storage", title: isDefaultRoomsQuotaSet && !isArchiveFolder 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 bcc5ffc22c..0c91284b7b 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 @@ -85,6 +85,7 @@ const RoomsRowDataComponent = (props) => { {badgesComponent} + {lastColumn === "Name" ? quickButtonsComponent : <>} {roomColumnTypeIsEnabled ? ( @@ -104,6 +105,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {lastColumn === "Type" ? quickButtonsComponent : <>} ) : (
@@ -122,6 +124,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {lastColumn === "Tags" ? quickButtonsComponent : <>} ) : (
@@ -144,6 +147,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {lastColumn === "Owner" ? quickButtonsComponent : <>} ) : (
@@ -166,6 +170,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> + {lastColumn === "Activity" ? quickButtonsComponent : <>} ) : (
@@ -178,12 +183,13 @@ const RoomsRowDataComponent = (props) => { type="room" isReadOnly={!item?.security?.EditRoom} /> + {lastColumn === "Storage" ? quickButtonsComponent : <>} ) : (
))} - {roomColumnQuickButtonsIsEnabled ? ( + {/* {roomColumnQuickButtonsIsEnabled ? ( { ) : (
- )} + )} */} ); }; From 0cbf7e5e8806bdadb8bf4657b24ebff8027d3042 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:49:29 +0300 Subject: [PATCH 07/45] Client:QuickButtons:Removed the column with quick buttons in the trash. --- .../TableView/sub-components/TrashRowData.js | 20 ------------------- 1 file changed, 20 deletions(-) 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 61e66530a5..0fca4c3090 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 @@ -217,26 +217,6 @@ const TrashRowDataComponent = (props) => { ) : (
)} - {quickButtonsColumnIsEnabled ? ( - - - {quickButtonsComponent} - - - ) : ( -
- )} ); }; From 31408a3c6c23157be94df39e6646e8489f2103c6 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 7 Aug 2024 15:33:18 +0300 Subject: [PATCH 08/45] Client:QuickButtons:Fix padding. --- .../Home/Section/Body/TableView/StyledTable.js | 2 +- .../Home/Section/Body/TableView/TableContainer.js | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 3 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 e1d424da6b..1a45ef146d 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -232,7 +232,7 @@ const StyledTableRow = styled(TableRow)` .no-extra-space { p { - margin-inline-end: 0 !important; + margin-inline-end: 8px !important; } } `; 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 e040836ea5..2a3f53d980 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -51,10 +51,21 @@ const contextCss = css` const StyledTableContainer = styled(TableContainer)` .badges__quickButtons { - padding-left: 16px; display: flex; - flex-grow: 2; + flex-grow: 1; justify-content: flex-end; + + .badge { + padding-left: 16px; + } + + .badge:first-child { + padding-left: 8px; + } + + .badge:last-child { + padding-right: 8px; + } } .table-row-selected { From db1738c2f21bbc39d656f22f8b2efcf365f342c4 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:05:15 +0300 Subject: [PATCH 09/45] Client:QuickButtons:Fix styles. --- .../Section/Body/TableView/StyledTable.js | 15 ++-- .../Section/Body/TableView/TableContainer.js | 18 ----- .../TableView/sub-components/RecentRowData.js | 25 +------ .../TableView/sub-components/RoomsRowData.js | 69 +++++++++++-------- .../Body/TableView/sub-components/RowData.js | 68 +++++++++++------- .../TableView/sub-components/TrashRowData.js | 5 +- 6 files changed, 92 insertions(+), 108 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 e1d8d0fbbd..46eb4fbad3 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -136,9 +136,7 @@ const StyledTableRow = styled(TableRow)` `} } - .table-container_element-wrapper, - .table-container_quick-buttons-wrapper { - padding-inline-end: 0; + .table-container_element-wrapper { } .table-container_element-wrapper, @@ -306,7 +304,10 @@ const StyledBadgesContainer = styled.div` `; const StyledQuickButtonsContainer = styled.div` - width: 100%; + display: flex; + justify-content: flex-end; + align-items: center; + flex-grow: 1; .badges { display: flex; @@ -315,11 +316,7 @@ const StyledQuickButtonsContainer = styled.div` } .badge { - padding: 12px 7px; - } - - .badge:last-child { - margin-inline-end: 3px; + padding: 12px 8px; } .lock-file { 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 2a3f53d980..6dbf73b5e7 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -50,24 +50,6 @@ const contextCss = css` `; const StyledTableContainer = styled(TableContainer)` - .badges__quickButtons { - display: flex; - flex-grow: 1; - justify-content: flex-end; - - .badge { - padding-left: 16px; - } - - .badge:first-child { - padding-left: 8px; - } - - .badge:last-child { - padding-right: 8px; - } - } - .table-row-selected { .table-container_file-name-cell { ${fileNameCss} 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 945c285056..8a3bc75bcc 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 @@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; import { classNames, getLastColumn } from "@docspace/shared/utils"; -import { - StyledBadgesContainer, - StyledQuickButtonsContainer, -} from "../StyledTable"; +import { StyledBadgesContainer } from "../StyledTable"; const RecentRowDataComponent = (props) => { const { @@ -213,26 +210,6 @@ const RecentRowDataComponent = (props) => { ) : (
)} - {/* {quickButtonsColumnIsEnabled ? ( - - - {quickButtonsComponent} - - - ) : ( -
- )} */} ); }; 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 0c91284b7b..6bd34d2727 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 @@ -85,7 +85,13 @@ const RoomsRowDataComponent = (props) => { {badgesComponent} - {lastColumn === "Name" ? quickButtonsComponent : <>} + {lastColumn === "Name" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} {roomColumnTypeIsEnabled ? ( @@ -105,7 +111,13 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Type" ? quickButtonsComponent : <>} + {lastColumn === "Type" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -124,7 +136,13 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Tags" ? quickButtonsComponent : <>} + {lastColumn === "Tags" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -147,7 +165,13 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Owner" ? quickButtonsComponent : <>} + {lastColumn === "Owner" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -170,7 +194,13 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Activity" ? quickButtonsComponent : <>} + {lastColumn === "Activity" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -183,32 +213,17 @@ const RoomsRowDataComponent = (props) => { type="room" isReadOnly={!item?.security?.EditRoom} /> - {lastColumn === "Storage" ? quickButtonsComponent : <>} + {lastColumn === "Storage" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
))} - - {/* {roomColumnQuickButtonsIsEnabled ? ( - - - {quickButtonsComponent} - - - ) : ( -
- )} */} ); }; 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 ee41b09a12..5b497f5c30 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 @@ -84,7 +84,13 @@ const RowDataComponent = (props) => { {badgesComponent} - {lastColumn === "Name" ? quickButtonsComponent : <>} + {lastColumn === "Name" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} {authorColumnIsEnabled ? ( @@ -102,7 +108,13 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Author" ? quickButtonsComponent : <>} + {lastColumn === "Author" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -126,7 +138,13 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Created" ? quickButtonsComponent : <>} + {lastColumn === "Created" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -147,7 +165,13 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Modified" ? quickButtonsComponent : <>} + {lastColumn === "Modified" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -168,7 +192,13 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Size" ? quickButtonsComponent : <>} + {lastColumn === "Size" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
@@ -191,31 +221,17 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Type" ? quickButtonsComponent : <>} + {lastColumn === "Type" ? ( + + {quickButtonsComponent} + + ) : ( + <> + )} ) : (
)} - {/* {quickButtonsColumnIsEnabled ? ( - - - {quickButtonsComponent} - - - ) : ( -
- )} */} ); }; 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 0fca4c3090..7cefdaf1f3 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 @@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; import { classNames, getLastColumn } from "@docspace/shared/utils"; -import { - StyledBadgesContainer, - StyledQuickButtonsContainer, -} from "../StyledTable"; +import { StyledBadgesContainer } from "../StyledTable"; import ErasureCell from "./ErasureCell"; import RoomCell from "./RoomCell"; From af60c740e07c67b720bc615ac4e818cec66e0772 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:14:21 +0300 Subject: [PATCH 10/45] Client:QuickButtons:Delete column Quick Buttons. --- .../Section/Body/TableView/TableHeader.js | 32 ------------------- .../TableView/sub-components/RecentRowData.js | 4 --- .../Body/TableView/sub-components/RowData.js | 4 --- .../TableView/sub-components/TrashRowData.js | 5 --- packages/client/src/store/TableStore.js | 12 ------- 5 files changed, 57 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 269d443fa2..2262f1b6f0 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -109,13 +109,6 @@ class FilesTableHeader extends React.Component { onChange: this.onColumnChange, onClick: this.onRoomsFilter, }, - // { - // key: "QuickButtons", - // title: "", - // enable: this.props.roomColumnQuickButtonsIsEnabled, - // defaultSize: 52, - // resizable: false, - // }, ]; showStorageInfo && @@ -199,13 +192,6 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - // { - // key: "QuickButtons", - // title: "", - // enable: this.props.quickButtonsColumnIsEnabled, - // defaultSize: 52, - // resizable: false, - // }, ]; defaultColumns.push(...columns); } else if (isRecentTab) { @@ -278,13 +264,6 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - // { - // key: "QuickButtons", - // title: "", - // enable: this.props.quickButtonsColumnIsEnabled, - // defaultSize: 52, - // resizable: false, - // }, ]; defaultColumns.push(...columns); } else { @@ -348,13 +327,6 @@ class FilesTableHeader extends React.Component { // onClick: this.onFilter, onChange: this.onColumnChange, }, - // { - // key: "QuickButtons", - // title: "", - // enable: this.props.quickButtonsColumnIsEnabled, - // defaultSize: 52, - // resizable: false, - // }, ]; defaultColumns.push(...columns); } @@ -639,14 +611,12 @@ export default inject( sizeTrashColumnIsEnabled, typeColumnIsEnabled, typeTrashColumnIsEnabled, - quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, roomColumnNameIsEnabled, roomColumnTypeIsEnabled, roomColumnTagsIsEnabled, roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, @@ -690,14 +660,12 @@ export default inject( sizeTrashColumnIsEnabled, typeColumnIsEnabled, typeTrashColumnIsEnabled, - quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, roomColumnNameIsEnabled, roomColumnTypeIsEnabled, roomColumnTagsIsEnabled, roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, 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 8a3bc75bcc..d425eab1cf 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 @@ -42,7 +42,6 @@ const RecentRowDataComponent = (props) => { modifiedColumnIsEnabled, sizeColumnIsEnabled, typeColumnIsEnabled, - quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, dragStyles, @@ -55,7 +54,6 @@ const RecentRowDataComponent = (props) => { inProgress, showHotkeyBorder, badgesComponent, - quickButtonsComponent, tableStorageName, } = props; @@ -221,7 +219,6 @@ export default inject(({ tableStore }) => { modifiedColumnIsEnabled, sizeColumnIsEnabled, typeColumnIsEnabled, - quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, tableStorageName, } = tableStore; @@ -232,7 +229,6 @@ export default inject(({ tableStore }) => { modifiedColumnIsEnabled, sizeColumnIsEnabled, typeColumnIsEnabled, - quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, tableStorageName, }; 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 5b497f5c30..7862870d54 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 @@ -45,8 +45,6 @@ const RowDataComponent = (props) => { modifiedColumnIsEnabled, sizeColumnIsEnabled, typeColumnIsEnabled, - quickButtonsColumnIsEnabled, - dragStyles, selectionProp, value, @@ -243,7 +241,6 @@ export default inject(({ tableStore }) => { modifiedColumnIsEnabled, sizeColumnIsEnabled, typeColumnIsEnabled, - quickButtonsColumnIsEnabled, tableStorageName, } = tableStore; @@ -253,7 +250,6 @@ export default inject(({ tableStore }) => { modifiedColumnIsEnabled, 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 7cefdaf1f3..28eb938384 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 @@ -45,8 +45,6 @@ const TrashRowDataComponent = (props) => { erasureColumnIsEnabled, sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, - quickButtonsColumnIsEnabled, - dragStyles, selectionProp, value, @@ -57,7 +55,6 @@ const TrashRowDataComponent = (props) => { inProgress, showHotkeyBorder, badgesComponent, - quickButtonsComponent, tableStorageName, } = props; @@ -226,7 +223,6 @@ export default inject(({ tableStore }) => { erasureColumnIsEnabled, sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, - quickButtonsColumnIsEnabled, tableStorageName, } = tableStore; @@ -237,7 +233,6 @@ export default inject(({ tableStore }) => { erasureColumnIsEnabled, sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, - quickButtonsColumnIsEnabled, tableStorageName, }; })(observer(TrashRowDataComponent)); diff --git a/packages/client/src/store/TableStore.js b/packages/client/src/store/TableStore.js index 8d63973d2a..498c38a41b 100644 --- a/packages/client/src/store/TableStore.js +++ b/packages/client/src/store/TableStore.js @@ -55,7 +55,6 @@ class TableStore { roomColumnTypeIsEnabled = false; roomColumnTagsIsEnabled = true; roomColumnOwnerIsEnabled = false; - roomColumnQuickButtonsIsEnabled = true; roomColumnActivityIsEnabled = true; roomQuotaColumnIsEnable = false; @@ -67,7 +66,6 @@ class TableStore { modifiedColumnIsEnabled = true; sizeColumnIsEnabled = true; typeColumnIsEnabled = true; - quickButtonsColumnIsEnabled = true; lastOpenedColumnIsEnabled = true; authorTrashColumnIsEnabled = true; @@ -143,10 +141,6 @@ class TableStore { this.typeColumnIsEnabled = enable; }; - setQuickButtonsColumn = (enable) => { - this.quickButtonsColumnIsEnabled = enable; - }; - setAuthorTrashColumn = (enable) => (this.authorTrashColumnIsEnabled = enable); setCreatedTrashColumn = (enable) => (this.createdTrashColumnIsEnabled = enable); @@ -232,7 +226,6 @@ class TableStore { this.setErasureColumn(splitColumns.includes("Erasure")); this.setSizeTrashColumn(splitColumns.includes("SizeTrash")); this.setTypeTrashColumn(splitColumns.includes("TypeTrash")); - this.setQuickButtonsColumn(splitColumns.includes("QuickButtons")); return; } @@ -241,7 +234,6 @@ class TableStore { 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")); } }; @@ -315,10 +307,6 @@ class TableStore { this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled); return; - case "QuickButtons": - this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled); - return; - case "Owner": this.setRoomColumnOwner(!this.roomColumnOwnerIsEnabled); return; From 2fca5d4ac128060a78fd2cdb48b0bb368298568c Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 7 Aug 2024 18:23:07 +0300 Subject: [PATCH 11/45] Shared:TableHeader:Removed line commenting. --- .../components/table/sub-components/TableHeaderCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/shared/components/table/sub-components/TableHeaderCell.tsx b/packages/shared/components/table/sub-components/TableHeaderCell.tsx index bfae281ca4..a22a18ed3c 100644 --- a/packages/shared/components/table/sub-components/TableHeaderCell.tsx +++ b/packages/shared/components/table/sub-components/TableHeaderCell.tsx @@ -82,7 +82,7 @@ const TableHeaderCell = ({ data-default={isDefault} data-enable={enable} data-min-width={minWidth} - // data-default-size={defaultSize} + data-default-size={defaultSize} sortingVisible={sortingVisible} ref={tagRef} > @@ -121,7 +121,7 @@ const TableHeaderCell = ({ data-enable={enable} data-default={isDefault} data-min-width={minWidth} - // data-default-size={defaultSize} + data-default-size={defaultSize} sortingVisible={sortingVisible} >
From c6dd338bb79774dc35b10f858149e6b125028f6b Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 8 Aug 2024 10:37:19 +0300 Subject: [PATCH 12/45] Client:TableRow:Refactoring. --- .../TableView/sub-components/RoomsRowData.js | 56 ++++--------------- .../Body/TableView/sub-components/RowData.js | 53 ++++-------------- 2 files changed, 22 insertions(+), 87 deletions(-) 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 6bd34d2727..c9ad73fa71 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 @@ -41,7 +41,6 @@ const RoomsRowDataComponent = (props) => { const { roomColumnTypeIsEnabled, roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, @@ -63,6 +62,11 @@ const RoomsRowDataComponent = (props) => { } = props; const lastColumn = getLastColumn(tableStorageName); + const quickButtonsComponentNode = ( + + {quickButtonsComponent} + + ); return ( <> @@ -85,13 +89,7 @@ const RoomsRowDataComponent = (props) => { {badgesComponent} - {lastColumn === "Name" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Name" ? quickButtonsComponentNode : <>} {roomColumnTypeIsEnabled ? ( @@ -111,13 +109,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Type" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Type" ? quickButtonsComponentNode : <>} ) : (
@@ -136,13 +128,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Tags" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Tags" ? quickButtonsComponentNode : <>} ) : (
@@ -165,13 +151,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Owner" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Owner" ? quickButtonsComponentNode : <>} ) : (
@@ -194,13 +174,7 @@ const RoomsRowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Activity" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Activity" ? quickButtonsComponentNode : <>} ) : (
@@ -213,13 +187,7 @@ const RoomsRowDataComponent = (props) => { type="room" isReadOnly={!item?.security?.EditRoom} /> - {lastColumn === "Storage" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Storage" ? quickButtonsComponentNode : <>} ) : (
@@ -232,7 +200,6 @@ export default inject(({ currentQuotaStore, tableStore }) => { const { roomColumnTypeIsEnabled, roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, @@ -244,7 +211,6 @@ export default inject(({ currentQuotaStore, tableStore }) => { roomQuotaColumnIsEnable, roomColumnTypeIsEnabled, roomColumnOwnerIsEnabled, - roomColumnQuickButtonsIsEnabled, roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, showStorageInfo, 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 7862870d54..75cbfe1cee 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,11 @@ const RowDataComponent = (props) => { } = props; const lastColumn = getLastColumn(tableStorageName); + const quickButtonsComponentNode = ( + + {quickButtonsComponent} + + ); return ( <> @@ -82,13 +87,7 @@ const RowDataComponent = (props) => { {badgesComponent} - {lastColumn === "Name" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Name" ? quickButtonsComponentNode : <>} {authorColumnIsEnabled ? ( @@ -106,13 +105,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Author" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Author" ? quickButtonsComponentNode : <>} ) : (
@@ -136,13 +129,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Created" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Created" ? quickButtonsComponentNode : <>} ) : (
@@ -163,13 +150,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Modified" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Modified" ? quickButtonsComponentNode : <>} ) : (
@@ -190,13 +171,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Size" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Size" ? quickButtonsComponentNode : <>} ) : (
@@ -219,13 +194,7 @@ const RowDataComponent = (props) => { sideColor={theme.filesSection.tableView.row.sideColor} {...props} /> - {lastColumn === "Type" ? ( - - {quickButtonsComponent} - - ) : ( - <> - )} + {lastColumn === "Type" ? quickButtonsComponentNode : <>} ) : (
From fdc06cf61c2bc7feb61c209a29dd3ae32c5dd56d Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Wed, 24 Jul 2024 13:14:34 +0200 Subject: [PATCH 13/45] Client: InfoPanel Groups: Fix getting all members in one request. Add infinite loader --- .../CreateEditGroupDialog/EditGroupDialog.tsx | 2 +- .../Body/views/Groups/GroupMember.js | 2 +- .../GroupMembersList/GroupMembersList.tsx | 155 ++++++++++++++++++ .../Home/InfoPanel/Body/views/Groups/index.js | 95 +++++++++-- .../Body/views/Groups/useFetchGroup.js | 2 +- packages/shared/api/groups/index.ts | 10 +- packages/shared/api/groups/types.ts | 1 + 7 files changed, 246 insertions(+), 21 deletions(-) create mode 100644 packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMembersList/GroupMembersList.tsx diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx index c0027e0286..9f706cbc83 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx +++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/EditGroupDialog.tsx @@ -143,7 +143,7 @@ const EditGroupDialog = ({ if (groupParams.groupMembers) return; setFetchMembersIsLoading(true); - getGroupById(group.id)! + getGroupById(group.id, true)! .then((data: any) => { prevGroupParams.current.groupMembers = data.members; setInitialMembersIds(data.members.map((gm) => gm.id)); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMember.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMember.js index 4b2487f9a2..f0d4ad9672 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMember.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMember.js @@ -84,7 +84,7 @@ const GroupMember = ({ className="avatar" role={groupMember.role || "user"} size={"min"} - source={groupMember.avatarSmall} + source={groupMember.avatarSmall || groupMember.avatar} />
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMembersList/GroupMembersList.tsx b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMembersList/GroupMembersList.tsx new file mode 100644 index 0000000000..08800bb675 --- /dev/null +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/GroupMembersList/GroupMembersList.tsx @@ -0,0 +1,155 @@ +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 +// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + +import React, { useCallback, useEffect, useState } from "react"; +import { + ListRowProps, + Index, + IndexRange, + InfiniteLoader, + List, + WindowScroller, +} from "react-virtualized"; +import styled from "styled-components"; + +import { TUser } from "@docspace/shared/api/people/types"; +import { RowLoader } from "@docspace/shared/skeletons/selector"; + +import GroupMember from "../GroupMember"; + +const ROW_HEIGHT = 50; + +export const StyledList = styled(List)` + width: ${({ width }) => `${width - 40}px`} !important; + + .group-member-row-loader { + padding: 0; + } +`; + +interface GroupMembersListProps { + members: TUser[]; + loadNextPage: (startIndex: number) => Promise; + hasNextPage: boolean; + total: number; +} + +export const GroupMembersList = ({ + members, + loadNextPage, + hasNextPage, + total, +}: GroupMembersListProps) => { + const [scrollElement, setScrollElement] = useState( + null, + ); + const [isNextPageLoading, setIsNextPageLoading] = useState(false); + + const itemsCount = hasNextPage ? members.length + 1 : members.length; + + const isItemLoaded = useCallback( + ({ index }: Index) => { + return !hasNextPage || index < itemsCount; + }, + [hasNextPage, itemsCount], + ); + + const loadMoreItems = useCallback( + async ({ startIndex }: IndexRange) => { + setIsNextPageLoading(true); + if (!isNextPageLoading) { + await loadNextPage(startIndex - 1); + } + setIsNextPageLoading(false); + }, + [isNextPageLoading, loadNextPage], + ); + + const renderRow = ({ key, index, style }: ListRowProps) => { + const item = members[index]; + + return ( +
+ {item ? ( + + ) : ( + + )} +
+ ); + }; + + useEffect(() => { + const scrollEl = document.querySelector(".info-panel-scroll"); + + if (scrollEl) { + setScrollElement(scrollEl as HTMLDivElement); + } + }, []); + + if (!scrollElement) { + return null; + } + + return ( + + {({ onRowsRendered, registerChild }) => ( + + {({ height, isScrolling, scrollTop }) => { + const scrollRect = scrollElement.getBoundingClientRect(); + + return ( + + ); + }} + + )} + + ); +}; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/index.js index ac9bebf5b7..f250e63b2b 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/index.js @@ -26,14 +26,20 @@ import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; -import * as Styled from "../../styles/groups.styled"; -import withLoader from "@docspace/client/src/HOCs/withLoader"; -import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body"; -import GroupMember from "./GroupMember"; -import useFetchGroup from "./useFetchGroup"; import { useParams } from "react-router-dom"; import { useState, useEffect } from "react"; +import withLoader from "@docspace/client/src/HOCs/withLoader"; +import InfoPanelViewLoader from "@docspace/shared/skeletons/info-panel/body"; +import api from "@docspace/shared/api"; +import AccountsFilter from "@docspace/shared/api/people/filter"; +import { MIN_LOADER_TIMER } from "@docspace/shared/selectors/Files/FilesSelector.constants"; + +import GroupMember from "./GroupMember"; +import * as Styled from "../../styles/groups.styled"; +import useFetchGroup from "./useFetchGroup"; +import { GroupMembersList } from "./GroupMembersList/GroupMembersList"; + const Groups = ({ infoPanelSelection, currentGroup, @@ -42,6 +48,9 @@ const Groups = ({ setInfoPanelSelectedGroup, }) => { const [isShowLoader, setIsShowLoader] = useState(false); + const [areMembersLoading, setAreMembersLoading] = useState(false); + const [groupMembers, setGroupMembers] = useState(null); + const [total, setTotal] = useState(0); const { groupId: paramsGroupId } = useParams(); const isInsideGroup = !!paramsGroupId; @@ -51,32 +60,88 @@ const Groups = ({ const groupId = isInsideGroup ? paramsGroupId : infoPanelSelection?.id; const setGroup = isInsideGroup ? setCurrentGroup : setInfoPanelSelectedGroup; + const groupManager = group?.manager; + + const loadNextPage = async (startIndex) => { + const startLoadingTime = new Date(); + + try { + if (startIndex === 0) { + setAreMembersLoading(true); + } + + const pageCount = 100; + const filter = AccountsFilter.getDefault(); + filter.group = groupId; + filter.page = startIndex / pageCount; + filter.pageCount = pageCount; + + const res = await api.people.getUserList(filter); + + const membersWithoutManager = groupManager + ? res.items.filter((item) => item.id !== groupManager.id) + : res.items; + + setTotal(res.total); + if (startIndex === 0 || !groupMembers) { + setGroupMembers(membersWithoutManager); + } else { + setGroupMembers([...groupMembers, ...membersWithoutManager]); + } + } catch (e) { + console.log(e); + } finally { + const nowDate = new Date(); + const diff = Math.abs(nowDate.getTime() - startLoadingTime.getTime()); + + if (diff < MIN_LOADER_TIMER) { + setTimeout(() => { + setAreMembersLoading(false); + }, MIN_LOADER_TIMER - diff); + } else { + setAreMembersLoading(false); + } + } + }; + useFetchGroup(groupId, group?.id, setGroup); + useEffect(() => { + if (group) { + loadNextPage(0); + } + }, [group]); + useEffect(() => { const showLoaderTimer = setTimeout(() => setIsShowLoader(true), 500); return () => clearTimeout(showLoaderTimer); }, []); - const groupManager = group?.manager; - const groupMembers = group?.members?.filter( - (user) => user.id !== groupManager?.id, - ); - if (!group) { - if (isShowLoader) return ; + if (isShowLoader) + return ( + + + + ); return null; } + const totalWithoutManager = groupManager ? total - 1 : total; + return ( {groupManager && } - {!groupMembers ? ( + {!groupMembers || areMembersLoading ? ( ) : ( - groupMembers?.map((groupMember) => ( - - )) + )} ); diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/useFetchGroup.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/useFetchGroup.js index c65aff8872..cb2b08f351 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/useFetchGroup.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Groups/useFetchGroup.js @@ -45,7 +45,7 @@ const useFetchGroup = (groupId, fetchedGroupId, setGroup) => { setIsLoading(true); } - getGroupById(groupId, abortControllerRef.current?.signal) + getGroupById(groupId, false, abortControllerRef.current?.signal) .then((data) => { if (isMount.current) startTransition(() => setGroup(data)); }) diff --git a/packages/shared/api/groups/index.ts b/packages/shared/api/groups/index.ts index e9f642f9cf..25f72dc909 100644 --- a/packages/shared/api/groups/index.ts +++ b/packages/shared/api/groups/index.ts @@ -69,12 +69,16 @@ export const getGroups = (filter = Filter.getDefault()) => { }); }; -export const getGroupById = (groupId: string, signal: AbortSignal) => { +export const getGroupById = ( + groupId: string, + includeMembers: boolean = false, + signal?: AbortSignal, +) => { return request({ method: "get", - url: `/group/${groupId}`, + url: `/group/${groupId}?includeMembers=${includeMembers}`, signal, - }); + }) as Promise; }; export const getGroupsByName = async ( diff --git a/packages/shared/api/groups/types.ts b/packages/shared/api/groups/types.ts index 1669911d06..e8d103736e 100644 --- a/packages/shared/api/groups/types.ts +++ b/packages/shared/api/groups/types.ts @@ -34,6 +34,7 @@ export type TGroup = { name: string; parent: string; isGroup?: boolean; + members?: TUser[]; membersCount: number; shared?: boolean; isLDAP: boolean; From a8e5a244f72aa631092eab4ea2585c287bbc0a4c Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Mon, 29 Jul 2024 14:48:36 +0200 Subject: [PATCH 14/45] Client: EditGroupDialog: Rewrite dialog to work with infinite loader --- .../CreateEditGroupDialog.styled.ts | 32 ++ .../CreateGroupDialog.tsx | 4 +- .../CreateEditGroupDialog/EditGroupDialog.tsx | 287 ++++++++++-------- .../sub-components/BodyLoader/BodyLoader.tsx | 43 +++ .../sub-components/GroupMemberRow/index.tsx | 19 +- .../GroupMembersList/GroupMembersList.tsx | 152 ++++++++++ .../SelectGroupManagerPanel.tsx | 7 +- .../sub-components/HeadOfGroupParam/index.tsx | 27 +- .../sub-components/MembersParam/index.tsx | 78 +++-- .../MembersSelector.tsx} | 63 ++-- .../create-components/SelectMembersPanel.tsx} | 66 ++-- .../edit-components/SelectMembersPanel.tsx | 62 ++++ .../components/panels/AddUsersPanel/index.tsx | 19 +- packages/client/src/store/EditGroupStore.ts | 248 +++++++++++++++ packages/client/src/store/GroupsStore.ts | 2 +- packages/client/src/store/index.js | 4 + packages/shared/api/groups/index.ts | 2 +- packages/shared/api/groups/types.ts | 2 +- .../components/selector/Selector.types.ts | 3 + 19 files changed, 849 insertions(+), 271 deletions(-) create mode 100644 packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/BodyLoader/BodyLoader.tsx create mode 100644 packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/GroupMembersList/GroupMembersList.tsx rename packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/{MembersParam/SelectGroupMembersPanel.tsx => MembersSelector/MembersSelector.tsx} (67%) rename packages/client/src/components/dialogs/CreateEditGroupDialog/{utils/index.ts => sub-components/create-components/SelectMembersPanel.tsx} (54%) create mode 100644 packages/client/src/components/dialogs/CreateEditGroupDialog/sub-components/edit-components/SelectMembersPanel.tsx create mode 100644 packages/client/src/store/EditGroupStore.ts diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts index 795b0eaac0..e0d9b7ae7c 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts +++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts @@ -34,3 +34,35 @@ export const StyledModal = styled(ModalDialog)` padding-top: 20px; } `; + +export const StyledBodyLoader = styled.div` + box-sizing: border-box; + display: flex; + flex-direction: column; + + .title-section { + margin-bottom: 14px; + } + + .group-title { + margin-bottom: 4px; + height: 16px; + padding-top: 4px; + } + + .manager-title, + .members-title { + padding-block: 8px; + } + + .add-member-container { + display: flex; + align-items: center; + gap: 8px; + margin-block: 8px; + } + + .member-row { + padding-inline: 0; + } +`; diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx index 71cf29c8ba..3c0d2bfdaf 100644 --- a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx +++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateGroupDialog.tsx @@ -42,7 +42,7 @@ import GroupNameParam from "./sub-components/GroupNameParam"; import HeadOfGroup from "./sub-components/HeadOfGroupParam"; import MembersParam from "./sub-components/MembersParam"; import SelectGroupManagerPanel from "./sub-components/HeadOfGroupParam/SelectGroupManagerPanel"; -import SelectGroupMembersPanel from "./sub-components/MembersParam/SelectGroupMembersPanel"; +import { SelectMembersPanel } from "./sub-components/create-components/SelectMembersPanel"; interface CreateGroupDialogProps { visible: boolean; @@ -177,7 +177,7 @@ const CreateGroupDialog = ({ )} {selectMembersPanelIsVisible && ( - ; + +type EditGroupDialogProps = { + group: TGroup; visible: boolean; onClose: () => void; - updateGroup: ( - groupId: string, - groupName: string, - groupManager: string, - membersToAdd: string[], - membersToRemove: string[], - ) => Promise; -} + injectedProps?: InjectedProps; +}; const EditGroupDialog = ({ group, visible, onClose, - updateGroup, - setInfoPanelSelectedGroup, + + injectedProps, }: EditGroupDialogProps) => { + const { + initGroupData, + resetGroupData, + isInit, + loadMembers, + manager, + addManager, + removeManager, + members, + addMembers, + removeMember, + currentTotal, + submitChanges, + title, + setTitle, + hasChanges, + } = injectedProps!; + const { t } = useTranslation(["PeopleTranslations", "Common"]); - - const [initialMembersIds, setInitialMembersIds] = useState([]); - - const [isCreateGroupLoading, setCreateGroupIsLoading] = - useState(false); - - const [isFetchMembersLoading, setFetchMembersIsLoading] = - useState(false); - - const [groupParams, setGroupParams] = useState({ - groupName: group.name, - groupManager: group.manager, - groupMembers: null, - }); - - const prevGroupParams = useRef({ ...groupParams }); - - const onChangeGroupName = (e: ChangeEvent) => - setGroupParams((prev) => ({ ...prev, groupName: e.target.value })); - - const setGroupManager = (groupManager: object | null) => - setGroupParams((prev) => ({ ...prev, groupManager })); - - const setGroupMembers = (groupMembers: object[]) => - setGroupParams((prev) => ({ ...prev, groupMembers })); - + const [isSubmitting, setIsSubmitting] = useState(false); const [selectGroupMangerPanelIsVisible, setSelectGroupMangerPanelIsVisible] = useState(false); + const [selectMembersPanelIsVisible, setSelectMembersPanelIsVisible] = + useState(false); + + const onChangeGroupName = (e: ChangeEvent) => { + setTitle(e.target.value); + }; + + const closeModal = () => { + resetGroupData(); + onClose(); + }; const onShowSelectGroupManagerPanel = () => setSelectGroupMangerPanelIsVisible(true); const onHideSelectGroupManagerPanel = () => setSelectGroupMangerPanelIsVisible(false); - const [selectMembersPanelIsVisible, setSelectMembersPanelIsVisible] = - useState(false); - const onShowSelectMembersPanel = () => setSelectMembersPanelIsVisible(true); const onHideSelectMembersPanel = () => setSelectMembersPanelIsVisible(false); const onEditGroup = async () => { - setCreateGroupIsLoading(true); + setIsSubmitting(true); - const groupManagerId = groupParams.groupManager?.id || undefined; + await submitChanges(); - const newMembersIds = - groupParams.groupMembers?.map((gm: any) => gm.id) || []; - const membersToAdd = newMembersIds.filter( - (gm) => !initialMembersIds.includes(gm), - ); - const membersToDelete = initialMembersIds.filter( - (gm) => !newMembersIds.includes(gm), - ); - - await updateGroup( - group.id, - groupParams.groupName, - groupManagerId, - membersToAdd, - membersToDelete, - ); - - setCreateGroupIsLoading(false); - onClose(); + setIsSubmitting(false); + closeModal(); }; - const notEnoughGroupParamsToEdit = - !groupParams.groupName || - (!groupParams.groupManager && !groupParams.groupMembers?.length); - - const groupParamsNotChanged = compareGroupParams( - groupParams, - prevGroupParams.current, - ); - useEffect(() => { - if (groupParams.groupMembers) return; - setFetchMembersIsLoading(true); + initGroupData(group); - getGroupById(group.id, true)! - .then((data: any) => { - prevGroupParams.current.groupMembers = data.members; - setInitialMembersIds(data.members.map((gm) => gm.id)); - setGroupMembers(data.members); - }) - .then((data) => { - setInfoPanelSelectedGroup(data); - }) - .catch((err) => console.error(err)) - .finally(() => setFetchMembersIsLoading(false)); - }, [group.id]); + return () => { + resetGroupData(); + }; + }, []); + + const notEnoughParamsToEdit = !title || (!manager && !members?.length); return ( <> {t("PeopleTranslations:EditGroup")} - - - {!isFetchMembersLoading && ( - + {isInit ? ( + <> + + + + + + ) : ( + )} @@ -198,21 +186,21 @@ const EditGroupDialog = ({ id="edit-group-modal_submit" tabIndex={5} label={t("Common:SaveButton")} - size="normal" + size={ButtonSize.normal} primary scale onClick={onEditGroup} - isDisabled={notEnoughGroupParamsToEdit || groupParamsNotChanged} - isLoading={isCreateGroupLoading} + isDisabled={!hasChanges || notEnoughParamsToEdit} + isLoading={isSubmitting} />