From 16172920174223dad5b83c82a18abc9515e1f169 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 16 Apr 2024 13:25:01 +0300 Subject: [PATCH] Web: Files: Templates: added table view --- .../Section/Body/TableView/TableContainer.js | 6 +- .../Section/Body/TableView/TableHeader.js | 714 ++++++++++-------- .../Home/Section/Body/TableView/TableRow.js | 11 +- .../TableView/sub-components/ContentCell.js | 56 ++ .../sub-components/TemplatesRowData.js | 174 +++++ packages/client/src/store/TableStore.js | 92 ++- packages/client/src/store/TreeFoldersStore.js | 8 + 7 files changed, 714 insertions(+), 347 deletions(-) create mode 100644 packages/client/src/pages/Home/Section/Body/TableView/sub-components/ContentCell.js create mode 100644 packages/client/src/pages/Home/Section/Body/TableView/sub-components/TemplatesRowData.js 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 89c0c671d1..90543c311b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -133,6 +133,7 @@ const Table = ({ filterTotal, isRooms, isTrashFolder, + isTemplatesFolder, withPaging, columnStorageName, columnInfoPanelStorageName, @@ -205,6 +206,7 @@ const Table = ({ theme={theme} tagCount={tagCount} isRooms={isRooms} + isTemplates={isTemplatesFolder} isTrashFolder={isTrashFolder} hideColumns={hideColumns} isHighlight={ @@ -266,7 +268,8 @@ export default inject( }) => { const { isVisible: infoPanelVisible } = infoPanelStore; - const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore; + const { isRoomsFolder, isArchiveFolder, isTrashFolder, isTemplatesFolder } = + treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; const { columnStorageName, columnInfoPanelStorageName } = tableStore; @@ -300,6 +303,7 @@ export default inject( filterTotal: isRooms ? roomsFilterTotal : filterTotal, isRooms, isTrashFolder, + isTemplatesFolder, withPaging, columnStorageName, columnInfoPanelStorageName, diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js index 2f9120af9b..bce70e125d 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -40,323 +40,413 @@ class FilesTableHeader extends React.Component { this.isBeginScrolling = false; } + getTemplatesColumns = () => { + const { t, isDefaultRoomsQuotaSet, showStorageInfo, isArchiveFolder } = + this.props; + + const columns = [ + { + key: "Name", + title: t("Common:Name"), + resizable: true, + enable: this.props.roomColumnNameIsEnabled, + default: true, + sortBy: SortByFieldName.Name, + minWidth: 210, + onClick: this.onRoomsFilter, + }, + { + key: "Type", + title: t("Common:Type"), + enable: this.props.roomColumnTypeIsEnabled, + resizable: true, + sortBy: SortByFieldName.RoomType, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + { + key: "Content", + title: t("Common:Content"), + enable: this.props.contentColumnsIsEnabled, + resizable: true, + // sortBy: SortByFieldName.Author, + onChange: this.onColumnChange, + // onClick: this.onRoomsFilter, + }, + { + key: "Owner", + title: t("Common:Owner"), + enable: this.props.roomColumnOwnerIsEnabled, + resizable: true, + sortBy: SortByFieldName.Author, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + + { + key: "QuickButtons", + title: "", + enable: this.props.roomColumnQuickButtonsIsEnabled, + defaultSize: 75, + resizable: false, + }, + ]; + + showStorageInfo && + columns.splice(columns.length - 1, 0, { + key: "Storage", + title: + isDefaultRoomsQuotaSet && !isArchiveFolder + ? t("Common:StorageAndQuota") + : t("Common:Storage"), + enable: this.props.roomQuotaColumnIsEnable, + sortBy: SortByFieldName.UsedSpace, + resizable: true, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }); + + return [...columns]; + }; + + getRoomsColumns = () => { + const { t, isDefaultRoomsQuotaSet, showStorageInfo, isArchiveFolder } = + this.props; + + const columns = [ + { + key: "Name", + title: t("Common:Name"), + resizable: true, + enable: this.props.roomColumnNameIsEnabled, + default: true, + sortBy: SortByFieldName.Name, + minWidth: 210, + onClick: this.onRoomsFilter, + }, + { + key: "Type", + title: t("Common:Type"), + enable: this.props.roomColumnTypeIsEnabled, + resizable: true, + sortBy: SortByFieldName.RoomType, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + { + key: "Tags", + title: t("Common:Tags"), + enable: this.props.roomColumnTagsIsEnabled, + resizable: true, + sortBy: SortByFieldName.Tags, + withTagRef: true, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + { + key: "Owner", + title: t("Common:Owner"), + enable: this.props.roomColumnOwnerIsEnabled, + resizable: true, + sortBy: SortByFieldName.Author, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + { + key: "Activity", + title: t("ByLastModified"), + enable: this.props.roomColumnActivityIsEnabled, + resizable: true, + sortBy: SortByFieldName.ModifiedDate, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }, + { + key: "QuickButtons", + title: "", + enable: this.props.roomColumnQuickButtonsIsEnabled, + defaultSize: 75, + resizable: false, + }, + ]; + + showStorageInfo && + columns.splice(columns.length - 1, 0, { + key: "Storage", + title: + isDefaultRoomsQuotaSet && !isArchiveFolder + ? t("Common:StorageAndQuota") + : t("Common:Storage"), + enable: this.props.roomQuotaColumnIsEnable, + sortBy: SortByFieldName.UsedSpace, + resizable: true, + onChange: this.onColumnChange, + onClick: this.onRoomsFilter, + }); + + return [...columns]; + }; + + getTrashFolderColumns = () => { + const { t } = this.props; + + const columns = [ + { + key: "Name", + title: t("Common:Name"), + resizable: true, + enable: this.props.nameColumnIsEnabled, + default: true, + sortBy: SortByFieldName.Name, + minWidth: 210, + onClick: this.onFilter, + }, + { + key: "Room", + title: t("Common:Room"), + enable: this.props.roomColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Room, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "AuthorTrash", + title: t("ByAuthor"), + enable: this.props.authorTrashColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Author, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "CreatedTrash", + title: t("ByCreation"), + enable: this.props.createdTrashColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.CreationDate, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Erasure", + title: t("ByErasure"), + enable: this.props.erasureColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.ModifiedDate, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "SizeTrash", + title: t("Common:Size"), + enable: this.props.sizeTrashColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Size, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "TypeTrash", + title: t("Common:Type"), + enable: this.props.typeTrashColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Type, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "QuickButtons", + title: "", + enable: this.props.quickButtonsColumnIsEnabled, + defaultSize: 75, + resizable: false, + }, + ]; + + return [...columns]; + }; + + getRecentTabColumns = () => { + const { t, isPublicRoom } = this.props; + + const authorBlock = !isPublicRoom + ? { + key: "Author", + title: t("ByAuthor"), + enable: this.props.authorColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Author, + // onClick: this.onFilter, + onChange: this.onColumnChange, + } + : {}; + + const columns = [ + { + key: "Name", + title: t("Common:Name"), + resizable: true, + enable: this.props.nameColumnIsEnabled, + default: true, + sortBy: SortByFieldName.Name, + minWidth: 210, + onClick: this.onFilter, + }, + { ...authorBlock }, + { + key: "Created", + title: t("ByCreation"), + enable: this.props.createdColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.CreationDate, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "LastOpened", + title: t("DateLastOpened"), + enable: this.props.lastOpenedColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.LastOpened, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Modified", + title: t("ByLastModified"), + enable: this.props.modifiedColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.ModifiedDate, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Size", + title: t("Common:Size"), + enable: this.props.sizeColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Size, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Type", + title: t("Common:Type"), + enable: this.props.typeColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Type, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "QuickButtons", + title: "", + enable: this.props.quickButtonsColumnIsEnabled, + defaultSize: 75, + resizable: false, + }, + ]; + + return [...columns]; + }; + + getFilesColumns = () => { + const { t, isPublicRoom } = this.props; + + const authorBlock = !isPublicRoom + ? { + key: "Author", + title: t("ByAuthor"), + enable: this.props.authorColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Author, + // onClick: this.onFilter, + onChange: this.onColumnChange, + } + : {}; + + const columns = [ + { + key: "Name", + title: t("Common:Name"), + resizable: true, + enable: this.props.nameColumnIsEnabled, + default: true, + sortBy: SortByFieldName.Name, + minWidth: 210, + onClick: this.onFilter, + }, + { ...authorBlock }, + { + key: "Created", + title: t("ByCreation"), + enable: this.props.createdColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.CreationDate, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Modified", + title: t("ByLastModified"), + enable: this.props.modifiedColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.ModifiedDate, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Size", + title: t("Common:Size"), + enable: this.props.sizeColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Size, + onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "Type", + title: t("Common:Type"), + enable: this.props.typeColumnIsEnabled, + resizable: true, + sortBy: SortByFieldName.Type, + // onClick: this.onFilter, + onChange: this.onColumnChange, + }, + { + key: "QuickButtons", + title: "", + enable: this.props.quickButtonsColumnIsEnabled, + defaultSize: 75, + resizable: false, + }, + ]; + + return [...columns]; + }; + + getDefaultColumns = () => { + const { isRooms, isTrashFolder, isRecentTab, isTemplatesFolder } = + this.props; + + if (isTemplatesFolder) return this.getTemplatesColumns(); + else if (isRooms) return this.getRoomsColumns(); + else if (isTrashFolder) return this.getTrashFolderColumns(); + else if (isRecentTab) return this.getRecentTabColumns(); + else return this.getFilesColumns(); + }; + getTableColumns = (fromUpdate = false) => { const { - t, - isRooms, - isTrashFolder, getColumns, columnStorageName, columnInfoPanelStorageName, - isPublicRoom, isFrame, frameTableColumns, - isRecentTab, - isDefaultRoomsQuotaSet, - showStorageInfo, - isArchiveFolder, } = this.props; - const defaultColumns = []; - - if (isRooms) { - const columns = [ - { - key: "Name", - title: t("Common:Name"), - resizable: true, - enable: this.props.roomColumnNameIsEnabled, - default: true, - sortBy: SortByFieldName.Name, - minWidth: 210, - onClick: this.onRoomsFilter, - }, - { - key: "Type", - title: t("Common:Type"), - enable: this.props.roomColumnTypeIsEnabled, - resizable: true, - sortBy: SortByFieldName.RoomType, - onChange: this.onColumnChange, - onClick: this.onRoomsFilter, - }, - { - key: "Tags", - title: t("Common:Tags"), - enable: this.props.roomColumnTagsIsEnabled, - resizable: true, - sortBy: SortByFieldName.Tags, - withTagRef: true, - onChange: this.onColumnChange, - onClick: this.onRoomsFilter, - }, - { - key: "Owner", - title: t("Common:Owner"), - enable: this.props.roomColumnOwnerIsEnabled, - resizable: true, - sortBy: SortByFieldName.Author, - onChange: this.onColumnChange, - onClick: this.onRoomsFilter, - }, - { - key: "Activity", - title: t("ByLastModified"), - enable: this.props.roomColumnActivityIsEnabled, - resizable: true, - sortBy: SortByFieldName.ModifiedDate, - onChange: this.onColumnChange, - onClick: this.onRoomsFilter, - }, - { - key: "QuickButtons", - title: "", - enable: this.props.roomColumnQuickButtonsIsEnabled, - defaultSize: 75, - resizable: false, - }, - ]; - - showStorageInfo && - columns.splice(columns.length - 1, 0, { - key: "Storage", - title: - isDefaultRoomsQuotaSet && !isArchiveFolder - ? t("Common:StorageAndQuota") - : t("Common:Storage"), - enable: this.props.roomQuotaColumnIsEnable, - sortBy: SortByFieldName.UsedSpace, - resizable: true, - onChange: this.onColumnChange, - onClick: this.onRoomsFilter, - }); - - defaultColumns.push(...columns); - } else if (isTrashFolder) { - const columns = [ - { - key: "Name", - title: t("Common:Name"), - resizable: true, - enable: this.props.nameColumnIsEnabled, - default: true, - sortBy: SortByFieldName.Name, - minWidth: 210, - onClick: this.onFilter, - }, - { - key: "Room", - title: t("Common:Room"), - enable: this.props.roomColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Room, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "AuthorTrash", - title: t("ByAuthor"), - enable: this.props.authorTrashColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Author, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "CreatedTrash", - title: t("ByCreation"), - enable: this.props.createdTrashColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.CreationDate, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Erasure", - title: t("ByErasure"), - enable: this.props.erasureColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.ModifiedDate, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "SizeTrash", - title: t("Common:Size"), - enable: this.props.sizeTrashColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Size, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "TypeTrash", - title: t("Common:Type"), - enable: this.props.typeTrashColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Type, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, - resizable: false, - }, - ]; - defaultColumns.push(...columns); - } else if (isRecentTab) { - const authorBlock = !isPublicRoom - ? { - key: "Author", - title: t("ByAuthor"), - enable: this.props.authorColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Author, - // onClick: this.onFilter, - onChange: this.onColumnChange, - } - : {}; - - const columns = [ - { - key: "Name", - title: t("Common:Name"), - resizable: true, - enable: this.props.nameColumnIsEnabled, - default: true, - sortBy: SortByFieldName.Name, - minWidth: 210, - onClick: this.onFilter, - }, - { ...authorBlock }, - { - key: "Created", - title: t("ByCreation"), - enable: this.props.createdColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.CreationDate, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "LastOpened", - title: t("DateLastOpened"), - enable: this.props.lastOpenedColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.LastOpened, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Modified", - title: t("ByLastModified"), - enable: this.props.modifiedColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.ModifiedDate, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Size", - title: t("Common:Size"), - enable: this.props.sizeColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Size, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Type", - title: t("Common:Type"), - enable: this.props.typeColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Type, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, - resizable: false, - }, - ]; - defaultColumns.push(...columns); - } else { - const authorBlock = !isPublicRoom - ? { - key: "Author", - title: t("ByAuthor"), - enable: this.props.authorColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Author, - // onClick: this.onFilter, - onChange: this.onColumnChange, - } - : {}; - - const columns = [ - { - key: "Name", - title: t("Common:Name"), - resizable: true, - enable: this.props.nameColumnIsEnabled, - default: true, - sortBy: SortByFieldName.Name, - minWidth: 210, - onClick: this.onFilter, - }, - { ...authorBlock }, - { - key: "Created", - title: t("ByCreation"), - enable: this.props.createdColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.CreationDate, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Modified", - title: t("ByLastModified"), - enable: this.props.modifiedColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.ModifiedDate, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Size", - title: t("Common:Size"), - enable: this.props.sizeColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Size, - onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "Type", - title: t("Common:Type"), - enable: this.props.typeColumnIsEnabled, - resizable: true, - sortBy: SortByFieldName.Type, - // onClick: this.onFilter, - onChange: this.onColumnChange, - }, - { - key: "QuickButtons", - title: "", - enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, - resizable: false, - }, - ]; - defaultColumns.push(...columns); - } + const defaultColumns = this.getDefaultColumns(); let columns = getColumns(defaultColumns); const storageColumns = localStorage.getItem(this.props.tableStorageName); @@ -614,7 +704,8 @@ export default inject( roomsFilter, setRoomsFilter, } = filesStore; - const { isRecentTab, isArchiveFolder, isTrashFolder } = treeFoldersStore; + const { isRecentTab, isArchiveFolder, isTrashFolder, isTemplatesFolder } = + treeFoldersStore; const withContent = canShare; const sortingVisible = true; const { withPaging, isFrame, frameConfig } = settingsStore; @@ -638,7 +729,7 @@ export default inject( typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, - + contentColumnsIsEnabled, roomColumnNameIsEnabled, roomColumnTypeIsEnabled, roomColumnTagsIsEnabled, @@ -689,7 +780,7 @@ export default inject( typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, - + contentColumnsIsEnabled, roomColumnNameIsEnabled, roomColumnTypeIsEnabled, roomColumnTagsIsEnabled, @@ -711,6 +802,7 @@ export default inject( isDefaultRoomsQuotaSet, showStorageInfo, isArchiveFolder, + isTemplatesFolder, }; }, )( 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..e102620b20 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -35,6 +35,7 @@ import { classNames } from "@docspace/shared/utils"; import RoomsRowDataComponent from "./sub-components/RoomsRowData"; import TrashRowDataComponent from "./sub-components/TrashRowData"; import RecentRowDataComponent from "./sub-components/RecentRowData"; +import TemplatesRowData from "./sub-components/TemplatesRowData"; import RowDataComponent from "./sub-components/RowData"; import { StyledTableRow, StyledDragAndDrop } from "./StyledTable"; @@ -64,6 +65,7 @@ const FilesTableRow = (props) => { showHotkeyBorder, id, isRooms, + isTemplates, isTrashFolder, isHighlight, hideColumns, @@ -185,7 +187,14 @@ const FilesTableRow = (props) => { badgeUrl={badgeUrl} canDrag={canDrag} > - {isRooms ? ( + {isTemplates ? ( + + ) : isRooms ? ( { + const { contentLength, providerKey, foldersCount, filesCount } = item; + + const additionalComponent = () => { + if (!contentLength && !providerKey && !isMobile()) + return `${t("Translations:Folders")}: ${foldersCount} | ${t("Translations:Files")}: ${filesCount}`; + + return ""; + }; + + const additionalInfo = additionalComponent(); + + return ( + + {additionalInfo} + + ); +}; + +export default ContentCell; diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TemplatesRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TemplatesRowData.js new file mode 100644 index 0000000000..f9b38d47d3 --- /dev/null +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TemplatesRowData.js @@ -0,0 +1,174 @@ +// (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 from "react"; +import { inject, observer } from "mobx-react"; +import { TableCell } from "@docspace/shared/components/table"; +import FileNameCell from "./FileNameCell"; +import TypeCell from "./TypeCell"; +import AuthorCell from "./AuthorCell"; +import ContentCell from "./ContentCell"; +import { classNames } from "@docspace/shared/utils"; +import { StyledBadgesContainer } from "../StyledTable"; +import { StyledQuickButtonsContainer } from "../StyledTable"; + +const TemplatesRowData = (props) => { + const { + t, + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + contentColumnsIsEnabled, + + dragStyles, + selectionProp, + value, + theme, + onContentFileSelect, + checkedProps, + element, + inProgress, + showHotkeyBorder, + badgesComponent, + quickButtonsComponent, + item, + } = props; + + return ( + <> + + + + {badgesComponent} + + + + {roomColumnTypeIsEnabled ? ( + + + + ) : ( +
+ )} + + {contentColumnsIsEnabled ? ( + + + + ) : ( +
+ )} + + {roomColumnOwnerIsEnabled ? ( + + + + ) : ( +
+ )} + + {roomColumnQuickButtonsIsEnabled ? ( + + + {quickButtonsComponent} + + + ) : ( +
+ )} + + ); +}; + +export default inject(({ currentQuotaStore, tableStore }) => { + const { + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + contentColumnsIsEnabled, + } = tableStore; + + return { + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnQuickButtonsIsEnabled, + contentColumnsIsEnabled, + }; +})(observer(TemplatesRowData)); diff --git a/packages/client/src/store/TableStore.js b/packages/client/src/store/TableStore.js index b837cd7c54..20a45fb392 100644 --- a/packages/client/src/store/TableStore.js +++ b/packages/client/src/store/TableStore.js @@ -32,18 +32,21 @@ const TABLE_ACCOUNTS_PEOPLE_COLUMNS = `peopleTableColumns_ver-${TableVersions.Pe const TABLE_ACCOUNTS_GROUPS_COLUMNS = `groupsTableColumns_ver-${TableVersions.Groups}`; const TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS = `insideGroupTableColumns_ver-${TableVersions.InsideGroup}`; const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`; +const TABLE_TEMPLATES_ROOM_COLUMNS = `templatesRoomsTableColumns_ver-${TableVersions.Rooms}`; const TABLE_TRASH_COLUMNS = `trashTableColumns_ver-${TableVersions.Trash}`; const TABLE_RECENT_COLUMNS = `recentTableColumns_ver-${TableVersions.Recent}`; const TABLE_SDK_COLUMNS = `filesSDKTableColumns_ver-${TableVersions.Files}`; const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`; const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`; +const COLUMNS_TEMPLATES_ROOM_SIZE = `templatesRoomsColumnsSize_ver-${TableVersions.Rooms}`; const COLUMNS_TRASH_SIZE = `trashColumnsSize_ver-${TableVersions.Trash}`; const COLUMNS_RECENT_SIZE = `recentColumnsSize_ver-${TableVersions.Recent}`; const COLUMNS_SDK_SIZE = `filesSDKColumnsSize_ver-${TableVersions.Files}`; const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`; const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`; +const COLUMNS_TEMPLATES_ROOM_SIZE_INFO_PANEL = `templatesRoomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`; const COLUMNS_TRASH_SIZE_INFO_PANEL = `trashColumnsSizeInfoPanel_ver-${TableVersions.Trash}`; const COLUMNS_RECENT_SIZE_INFO_PANEL = `recentColumnsSizeInfoPanel_ver-${TableVersions.Recent}`; const COLUMNS_SDK_SIZE_INFO_PANEL = `filesSDKColumnsSizeInfoPanel_ver-${TableVersions.Files}`; @@ -72,6 +75,7 @@ class TableStore { typeColumnIsEnabled = true; quickButtonsColumnIsEnabled = true; lastOpenedColumnIsEnabled = true; + contentColumnsIsEnabled = true; authorTrashColumnIsEnabled = true; createdTrashColumnIsEnabled = false; @@ -102,6 +106,10 @@ class TableStore { this.roomColumnTypeIsEnabled = enable; }; + setTemplatesContent = (enable) => { + this.contentColumnsIsEnabled = enable; + }; + setRoomColumnTags = (enable) => { this.roomColumnTagsIsEnabled = enable; }; @@ -188,9 +196,17 @@ class TableStore { getIsAccountsPeople, getIsAccountsGroups, getIsAccountsInsideGroup, + isTemplatesFolder, } = this.treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; + if (isTemplatesFolder) { + this.setRoomColumnType(splitColumns.includes("Type")); + this.setTemplatesContent(splitColumns.includes("Content")); + this.setRoomColumnOwner(splitColumns.includes("Owner")); + return; + } + if (isRooms) { this.setRoomColumnType(splitColumns.includes("Type")); this.setRoomColumnTags(splitColumns.includes("Tags")); @@ -310,6 +326,9 @@ class TableStore { : this.setTypeColumn(!this.typeColumnIsEnabled); return; + case "Content": + this.setTemplatesContent(!this.contentColumnsIsEnabled); + case "TypeTrash": this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled); return; @@ -389,6 +408,7 @@ class TableStore { getIsAccountsGroups, isRecentTab, getIsAccountsInsideGroup, + isTemplatesFolder, } = this.treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; @@ -396,56 +416,60 @@ class TableStore { const isFrame = this.settingsStore.isFrame; if (isFrame) return `${TABLE_SDK_COLUMNS}=${userId}`; - - return isRooms - ? `${TABLE_ROOMS_COLUMNS}=${userId}` - : getIsAccountsPeople() - ? `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}` - : getIsAccountsGroups() - ? `${TABLE_ACCOUNTS_GROUPS_COLUMNS}=${userId}` - : getIsAccountsInsideGroup() - ? `${TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS}=${userId}` - : isTrashFolder - ? `${TABLE_TRASH_COLUMNS}=${userId}` - : isRecentTab - ? `${TABLE_RECENT_COLUMNS}=${userId}` - : `${TABLE_COLUMNS}=${userId}`; + else if (isTemplatesFolder) + return `${TABLE_TEMPLATES_ROOM_COLUMNS}=${userId}`; + else if (isRooms) return `${TABLE_ROOMS_COLUMNS}=${userId}`; + else if (getIsAccountsPeople()) + return `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}`; + else if (getIsAccountsGroups()) + return `${TABLE_ACCOUNTS_GROUPS_COLUMNS}=${userId}`; + else if (getIsAccountsInsideGroup()) + return `${TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS}=${userId}`; + else if (isTrashFolder) return `${TABLE_TRASH_COLUMNS}=${userId}`; + else if (isRecentTab) return `${TABLE_RECENT_COLUMNS}=${userId}`; + else return `${TABLE_COLUMNS}=${userId}`; } get columnStorageName() { - const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } = - this.treeFoldersStore; + const { + isRoomsFolder, + isArchiveFolder, + isTrashFolder, + isRecentTab, + isTemplatesFolder, + } = this.treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; const userId = this.userStore.user?.id; const isFrame = this.settingsStore.isFrame; if (isFrame) return `${COLUMNS_SDK_SIZE}=${userId}`; - - return isRooms - ? `${COLUMNS_ROOMS_SIZE}=${userId}` - : isTrashFolder - ? `${COLUMNS_TRASH_SIZE}=${userId}` - : isRecentTab - ? `${COLUMNS_RECENT_SIZE}=${userId}` - : `${COLUMNS_SIZE}=${userId}`; + else if (isTemplatesFolder) + return `${COLUMNS_TEMPLATES_ROOM_SIZE}=${userId}`; + else if (isRooms) return `${COLUMNS_ROOMS_SIZE}=${userId}`; + else if (isTrashFolder) return `${COLUMNS_TRASH_SIZE}=${userId}`; + else if (isRecentTab) return `${COLUMNS_RECENT_SIZE}=${userId}`; + else return `${COLUMNS_SIZE}=${userId}`; } get columnInfoPanelStorageName() { - const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } = - this.treeFoldersStore; + const { + isRoomsFolder, + isArchiveFolder, + isTrashFolder, + isRecentTab, + isTemplatesFolder, + } = this.treeFoldersStore; const isRooms = isRoomsFolder || isArchiveFolder; const userId = this.userStore.user?.id; const isFrame = this.settingsStore.isFrame; if (isFrame) return `${COLUMNS_SDK_SIZE_INFO_PANEL}=${userId}`; - - return isRooms - ? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}` - : isTrashFolder - ? `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}` - : isRecentTab - ? `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}` - : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; + else if (isTemplatesFolder) + return `${COLUMNS_TEMPLATES_ROOM_SIZE_INFO_PANEL}=${userId}`; + else if (isRooms) return `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`; + else if (isTrashFolder) return `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}`; + else if (isRecentTab) return `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}`; + else return `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; } get filesColumnStorageName() { diff --git a/packages/client/src/store/TreeFoldersStore.js b/packages/client/src/store/TreeFoldersStore.js index 8524a624d9..a84206b308 100644 --- a/packages/client/src/store/TreeFoldersStore.js +++ b/packages/client/src/store/TreeFoldersStore.js @@ -339,6 +339,14 @@ class TreeFoldersStore { ); } + get isTemplatesFolder() { + // return true; + return ( + this.templatesFolder && + this.selectedFolderStore.id === this.templatesFolder.id + ); + } + get isRoomsFolderRoot() { return FolderType.Rooms === this.selectedFolderStore.rootFolderType; }