diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js new file mode 100644 index 0000000000..be6df41d28 --- /dev/null +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -0,0 +1,279 @@ +import styled, { css } from "styled-components"; +import Base from "@docspace/components/themes/base"; +import TableRow from "@docspace/components/table-container/TableRow"; +import DragAndDrop from "@docspace/components/drag-and-drop"; + +const hotkeyBorderStyle = css` + border-bottom: 1px solid; + border-image-slice: 1; + border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px); +`; + +const rowCheckboxDraggingStyle = css` + margin-left: -20px; + padding-left: 20px; + + border-bottom: 1px solid; + border-image-slice: 1; + border-image-source: ${(props) => `linear-gradient(to right, + ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; +`; + +const contextMenuWrapperDraggingStyle = css` + margin-right: -20px; + padding-right: 20px; + + border-bottom: 1px solid; + border-image-slice: 1; + border-image-source: ${(props) => `linear-gradient(to left, + ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; +`; + +const StyledTableRow = styled(TableRow)` + ${(props) => + props.isRoom && + css` + .table-container_cell { + height: 48px; + max-height: 48px; + } + + .table-container_row-checkbox { + padding-left: 20px !important; + } + `} + ${(props) => + !props.isDragging && + css` + :hover { + .table-container_cell { + cursor: pointer; + background: ${(props) => + `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; + + margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")}; + ${(props) => + !props.showHotkeyBorder && + css` + border-top: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + `} + } + .table-container_file-name-cell { + margin-left: -24px; + padding-left: 24px; + } + .table-container_row-context-menu-wrapper { + margin-right: -20px; + padding-right: 18px; + } + } + `} + .table-container_cell { + background: ${(props) => + (props.checked || props.isActive) && + `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; + cursor: ${(props) => + !props.isThirdPartyFolder && + (props.checked || props.isActive) && + "url(/static/images/cursor.palm.react.svg), auto !important"}; + + ${(props) => + props.inProgress && + css` + pointer-events: none; + /* cursor: wait; */ + `} + + ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"} + } + + .table-container_element-wrapper, + .table-container_quick-buttons-wrapper { + padding-right: 0px; + } + + .table-container_element-wrapper, + .table-container_row-loader { + min-width: ${(props) => (props.isRoom ? "40px" : "36px")}; + } + + .table-container_element-container { + width: 32px; + height: 32px; + + display: flex; + justify-content: center; + align-items: center; + } + + .table-container_row-loader { + svg { + margin-left: 4px; + } + } + + .table-container_row-checkbox { + padding-left: 20px; + width: 16px; + } + + .table-container_file-name-cell { + ${(props) => + props.showHotkeyBorder && + css` + margin-left: -24px; + padding-left: 24px; + ${hotkeyBorderStyle} + `}; + ${(props) => props.dragging && rowCheckboxDraggingStyle}; + } + + .table-container_row-context-menu-wrapper { + padding-right: 0px; + + ${(props) => props.dragging && contextMenuWrapperDraggingStyle}; + ${(props) => + props.showHotkeyBorder && + css` + margin-right: -20px; + padding-right: 18px; + ${hotkeyBorderStyle} + `}; + } + + .edit { + svg:not(:root) { + width: 12px; + height: 12px; + } + } + + ${(props) => + props.showHotkeyBorder && + css` + .table-container_cell { + margin-top: -2px; + + border-top: 1px solid #2da7db !important; + border-right: 0; + border-left: 0; + } + .table-container_file-name-cell > .table-container_cell { + margin-top: 2px; + border-top: 0px !important; + } + + .item-file-name, + .row_update-text, + .expandButton, + .badges, + .tag, + .author-cell, + .table-container_cell > p { + margin-top: 2px; + } + `} +`; + +const StyledDragAndDrop = styled(DragAndDrop)` + display: contents; +`; + +const StyledBadgesContainer = styled.div` + margin-left: 8px; + + display: flex; + align-items: center; + + ${(props) => + props.showHotkeyBorder && + css` + margin-top: 1px; + `} + + .badges { + display: flex; + align-items: center; + margin-right: 12px; + } + + .badges:last-child { + margin-left: 0px; + } + + .badge { + cursor: pointer; + margin-right: 8px; + } + + .new-items { + min-width: 12px; + width: max-content; + margin: 0 -2px -2px -2px; + } + + .badge-version { + width: max-content; + margin: 0 5px -2px -2px; + + > div { + padding: 0 3.3px 0 4px; + p { + letter-spacing: 0.5px; + font-size: 8px; + font-weight: 800; + } + } + } + + .badge-new-version { + width: max-content; + } +`; + +const StyledQuickButtonsContainer = styled.div` + width: 100%; + + .badges { + display: flex; + justify-content: flex-end; + align-items: center; + } + + .badge { + margin-right: 14px; + } + + .badge:last-child { + margin-right: 10px; + } + + .lock-file { + svg { + height: 12px; + } + } + + .favorite { + margin-top: 1px; + } + + .share-button-icon:hover { + cursor: pointer; + path { + fill: ${(props) => + props.theme.filesSection.tableView.row.shareHoverColor}; + } + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } +`; + +StyledQuickButtonsContainer.defaultProps = { theme: Base }; + +export { + StyledBadgesContainer, + StyledQuickButtonsContainer, + StyledTableRow, + StyledDragAndDrop, +}; 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 19bb4bcefc..8eff2fe72f 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useCallback } from "react"; import elementResizeDetectorMaker from "element-resize-detector"; import TableContainer from "@docspace/components/table-container"; import { inject, observer } from "mobx-react"; @@ -8,7 +8,6 @@ import TableBody from "@docspace/components/table-container/TableBody"; import { isMobile } from "react-device-detect"; import styled, { css } from "styled-components"; import { Base } from "@docspace/components/themes"; -import { TableVersions } from "SRC_DIR/helpers/constants"; const marginCss = css` margin-top: -1px; @@ -99,14 +98,6 @@ const StyledTableContainer = styled(TableContainer)` StyledTableContainer.defaultProps = { theme: Base }; -const TABLE_COLUMNS = `filesTableColumns_ver-${TableVersions.Files}`; -const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`; -const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`; - -const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`; -const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`; -const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`; - const elementResizeDetector = elementResizeDetectorMaker({ strategy: "scroll", callOnAdd: false, @@ -121,12 +112,13 @@ const Table = ({ setHeaderBorder, theme, infoPanelVisible, - userId, fetchMoreFiles, hasMoreFiles, filterTotal, isRooms, withPaging, + columnStorageName, + columnInfoPanelStorageName, }) => { const [tagCount, setTagCount] = React.useState(null); const [hideColumns, setHideColumns] = React.useState(false); @@ -149,7 +141,7 @@ const Table = ({ } }, [sectionWidth]); - React.useEffect(() => { + useEffect(() => { return () => { if (!tagRef?.current) return; @@ -157,7 +149,7 @@ const Table = ({ }; }, []); - const onResize = React.useCallback( + const onResize = useCallback( (node) => { const element = tagRef?.current ? tagRef?.current : node; @@ -172,7 +164,7 @@ const Table = ({ [tagCount] ); - const onSetTagRef = React.useCallback((node) => { + const onSetTagRef = useCallback((node) => { if (node) { tagRef.current = node; onResize(node); @@ -181,28 +173,11 @@ const Table = ({ } }, []); - const tableColumns = isRooms - ? `${TABLE_ROOMS_COLUMNS}=${userId}` - : `${TABLE_COLUMNS}=${userId}`; - const columnStorageName = isRooms - ? `${COLUMNS_ROOMS_SIZE}=${userId}` - : `${COLUMNS_SIZE}=${userId}`; - const columnInfoPanelStorageName = isRooms - ? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}` - : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; - return ( { +export default inject(({ filesStore, treeFoldersStore, auth, tableStore }) => { const { isVisible: infoPanelVisible } = auth.infoPanelStore; const { isRoomsFolder, isArchiveFolder } = treeFoldersStore; - const isRooms = isRoomsFolder || isArchiveFolder; + const { columnStorageName, columnInfoPanelStorageName } = tableStore; + const { filesList, viewAs, @@ -276,5 +249,7 @@ export default inject(({ filesStore, treeFoldersStore, auth }) => { filterTotal: isRooms ? roomsFilterTotal : filterTotal, isRooms, withPaging, + columnStorageName, + columnInfoPanelStorageName, }; })(observer(Table)); 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 b197d839f3..010e24265d 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -4,8 +4,6 @@ import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; import { Events } from "@docspace/common/constants"; -const WITH_AUTHOR = "withAuthorColumn"; - class FilesTableHeader extends React.Component { constructor(props) { super(props); @@ -16,13 +14,7 @@ class FilesTableHeader extends React.Component { } getTableColumns = (fromUpdate = false) => { - const { - t, - personal, - tableStorageName, - isRooms, - isPersonalRoom, - } = this.props; + const { t, isRooms, getColumns } = this.props; const defaultColumns = []; @@ -32,7 +24,7 @@ class FilesTableHeader extends React.Component { key: "Name", title: t("Common:Name"), resizable: true, - enable: true, + enable: this.props.roomColumnNameIsEnabled, default: true, sortBy: "AZ", minWidth: 210, @@ -41,7 +33,7 @@ class FilesTableHeader extends React.Component { { key: "Type", title: t("Common:Type"), - enable: false, + enable: this.props.roomColumnTypeIsEnabled, resizable: true, sortBy: "roomType", onChange: this.onColumnChange, @@ -50,7 +42,7 @@ class FilesTableHeader extends React.Component { { key: "Tags", title: t("Common:Tags"), - enable: true, + enable: this.props.roomColumnTagsIsEnabled, resizable: true, sortBy: "Tags", withTagRef: true, @@ -60,7 +52,7 @@ class FilesTableHeader extends React.Component { { key: "Owner", title: t("ByOwner"), - enable: false, + enable: this.props.roomColumnOwnerIsEnabled, resizable: true, sortBy: "Author", onChange: this.onColumnChange, @@ -69,7 +61,7 @@ class FilesTableHeader extends React.Component { { key: "Activity", title: t("ByLastModified"), - enable: true, + enable: this.props.roomColumnActivityIsEnabled, resizable: true, sortBy: "DateAndTime", onChange: this.onColumnChange, @@ -79,38 +71,30 @@ class FilesTableHeader extends React.Component { defaultColumns.push(...columns); } else { - const authorOption = { - key: "Author", - title: t("ByAuthor"), - enable: false, - resizable: true, - sortBy: "Author", - - // isDisabled: isPersonalRoom, - onClick: this.onFilter, - onChange: this.onColumnChange, - }; - - // if (isPersonalRoom) { - // authorOption.defaultSize = 0; - // } - const columns = [ { key: "Name", title: t("Common:Name"), resizable: true, - enable: true, + enable: this.props.nameColumnIsEnabled, default: true, sortBy: "AZ", minWidth: 210, onClick: this.onFilter, }, - authorOption, + { + key: "Author", + title: t("ByAuthor"), + enable: this.props.authorColumnIsEnabled, + resizable: true, + sortBy: "Author", + onClick: this.onFilter, + onChange: this.onColumnChange, + }, { key: "Created", title: t("ByCreation"), - enable: true, + enable: this.props.createdColumnIsEnabled, resizable: true, sortBy: "DateAndTimeCreation", onClick: this.onFilter, @@ -119,7 +103,7 @@ class FilesTableHeader extends React.Component { { key: "Modified", title: t("ByLastModified"), - enable: true, + enable: this.props.modifiedColumnIsEnabled, resizable: true, sortBy: "DateAndTime", onClick: this.onFilter, @@ -128,7 +112,7 @@ class FilesTableHeader extends React.Component { { key: "Size", title: t("Common:Size"), - enable: true, + enable: this.props.sizeColumnIsEnabled, resizable: true, sortBy: "Size", onClick: this.onFilter, @@ -137,7 +121,7 @@ class FilesTableHeader extends React.Component { { key: "Type", title: t("Common:Type"), - enable: true, + enable: this.props.typeColumnIsEnabled, resizable: true, sortBy: "Type", onClick: this.onFilter, @@ -146,20 +130,18 @@ class FilesTableHeader extends React.Component { { key: "QuickButtons", title: "", - enable: true, + enable: this.props.quickButtonsColumnIsEnabled, defaultSize: 75, resizable: false, }, ]; - personal && columns.splice(1, 1); - defaultColumns.push(...columns); } - const storageColumns = localStorage.getItem(tableStorageName); + const columns = getColumns(defaultColumns); + const storageColumns = localStorage.getItem(this.tableStorageName); const splitColumns = storageColumns && storageColumns.split(","); - const columns = this.getColumns(defaultColumns, splitColumns); const resetColumnsSize = (splitColumns && splitColumns.length !== columns.length) || !splitColumns; @@ -167,17 +149,15 @@ class FilesTableHeader extends React.Component { this.setTableColumns(tableColumns); if (fromUpdate) { this.setState({ - columns: columns, - resetColumnsSize: resetColumnsSize, - isRooms: isRooms, - isPersonalRoom: isPersonalRoom, + columns, + resetColumnsSize, + isRooms, }); } else { this.state = { - columns: columns, - resetColumnsSize: resetColumnsSize, - isRooms: isRooms, - isPersonalRoom: isPersonalRoom, + columns, + resetColumnsSize, + isRooms, }; } }; @@ -214,15 +194,12 @@ class FilesTableHeader extends React.Component { this.isBeginScrolling = true; }; + componentDidUpdate(prevProps) { if (this.props.isRooms !== this.state.isRooms) { return this.getTableColumns(true); } - if (this.props.isPersonalRoom !== this.state.isPersonalRoom) { - return this.getTableColumns(true); - } - const { columns } = this.state; if (this.props.withContent !== prevProps.withContent) { const columnIndex = columns.findIndex((c) => c.key === "Share"); @@ -244,56 +221,21 @@ class FilesTableHeader extends React.Component { componentWillUnmount() { this.customScrollElm.removeEventListener("scroll", this.onBeginScroll); } - getColumns = (defaultColumns, splitColumns) => { - const { isPersonalRoom, isRooms } = this.props; - const columns = []; - - if (splitColumns) { - for (let col of defaultColumns) { - const column = splitColumns.find((key) => key === col.key); - column ? (col.enable = true) : (col.enable = false); - - if (!isRooms) { - if (column === "Author" && isPersonalRoom) { - col.enable = false; - } - - if (col.key === "Author" && !isPersonalRoom) { - if (!col.enable) { - const withAuthor = localStorage.getItem(WITH_AUTHOR); - - if (withAuthor === "true") { - col.enable = true; - } - } - } - } - - columns.push(col); - } - return columns; - } else { - return defaultColumns; - } - }; - - onColumnChange = (key, e) => { + onColumnChange = (key) => { const { columns } = this.state; const columnIndex = columns.findIndex((c) => c.key === key); if (columnIndex === -1) return; + this.props.setColumnEnable(key); + columns[columnIndex].enable = !columns[columnIndex].enable; this.setState({ columns }); const tableColumns = columns.map((c) => c.enable && c.key); this.setTableColumns(tableColumns); - if (key === "Author") { - localStorage.setItem(WITH_AUTHOR, columns[columnIndex].enable); - } - const event = new Event(Events.CHANGE_COLUMN); window.dispatchEvent(event); @@ -356,7 +298,6 @@ class FilesTableHeader extends React.Component { setHideColumns, } = this.props; - // const { sortBy, sortOrder } = filter; const { columns, resetColumnsSize } = this.state; const sortBy = isRooms ? roomsFilter.sortBy : filter.sortBy; @@ -402,7 +343,7 @@ class FilesTableHeader extends React.Component { } export default inject( - ({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => { + ({ auth, filesStore, selectedFolderStore, treeFoldersStore, tableStore }) => { const { isVisible: infoPanelVisible } = auth.infoPanelStore; const { @@ -416,17 +357,43 @@ export default inject( roomsFilter, fetchRooms, } = filesStore; - const { isRecentFolder, isPersonalRoom } = treeFoldersStore; + const { isRecentFolder } = treeFoldersStore; const withContent = canShare; const sortingVisible = !isRecentFolder; - const { personal, withPaging } = auth.settingsStore; + const { withPaging } = auth.settingsStore; + + const { + tableStorageName, + columnStorageName, + columnInfoPanelStorageName, + filesColumnStorageName, + roomsColumnStorageName, + filesColumnInfoPanelStorageName, + roomsColumnInfoPanelStorageName, + + nameColumnIsEnabled, + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + roomColumnNameIsEnabled, + roomColumnTypeIsEnabled, + roomColumnTagsIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnActivityIsEnabled, + + getColumns, + setColumnEnable, + } = tableStore; return { isHeaderChecked, filter, selectedFolderId: selectedFolderStore.id, withContent, - personal, sortingVisible, setIsLoading, @@ -441,7 +408,30 @@ export default inject( infoPanelVisible, withPaging, - isPersonalRoom, + tableStorageName, + columnStorageName, + columnInfoPanelStorageName, + filesColumnStorageName, + roomsColumnStorageName, + filesColumnInfoPanelStorageName, + roomsColumnInfoPanelStorageName, + + nameColumnIsEnabled, + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + roomColumnNameIsEnabled, + roomColumnTypeIsEnabled, + roomColumnTagsIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnActivityIsEnabled, + + getColumns, + setColumnEnable, }; } )( 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 23414f02d9..0b7687189b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -6,303 +6,24 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons"; import withFileActions from "../../../../../HOCs/withFileActions"; import ItemIcon from "../../../../../components/ItemIcon"; import { withTranslation } from "react-i18next"; -import TableRow from "@docspace/components/table-container/TableRow"; -import TableCell from "@docspace/components/table-container/TableCell"; -import DragAndDrop from "@docspace/components/drag-and-drop"; -import FileNameCell from "./sub-components/FileNameCell"; -import SizeCell from "./sub-components/SizeCell"; -import AuthorCell from "./sub-components/AuthorCell"; -import DateCell from "./sub-components/DateCell"; -import TypeCell from "./sub-components/TypeCell"; -import TagsCell from "./sub-components/TagsCell"; -import styled, { css } from "styled-components"; -import Base from "@docspace/components/themes/base"; import { classNames } from "@docspace/components/utils/classNames"; - -const hotkeyBorderStyle = css` - border-bottom: 1px solid; - border-image-slice: 1; - border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px); -`; - -const rowCheckboxDraggingStyle = css` - margin-left: -20px; - padding-left: 20px; - - border-bottom: 1px solid; - border-image-slice: 1; - border-image-source: ${(props) => `linear-gradient(to right, - ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; -`; - -const contextMenuWrapperDraggingStyle = css` - margin-right: -20px; - padding-right: 20px; - - border-bottom: 1px solid; - border-image-slice: 1; - border-image-source: ${(props) => `linear-gradient(to left, - ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`}; -`; - -const StyledTableRow = styled(TableRow)` - ${(props) => - props.isRoom && - css` - .table-container_cell { - height: 48px; - max-height: 48px; - } - - .table-container_row-checkbox { - padding-left: 20px !important; - } - `} - ${(props) => - !props.isDragging && - css` - :hover { - .table-container_cell { - cursor: pointer; - background: ${(props) => - `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; - - margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")}; - ${(props) => - !props.showHotkeyBorder && - css` - border-top: ${(props) => - `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; - `} - } - .table-container_file-name-cell { - margin-left: -24px; - padding-left: 24px; - } - .table-container_row-context-menu-wrapper { - margin-right: -20px; - padding-right: 18px; - } - } - `} - .table-container_cell { - background: ${(props) => - (props.checked || props.isActive) && - `${props.theme.filesSection.tableView.row.backgroundActive} !important`}; - cursor: ${(props) => - !props.isThirdPartyFolder && - (props.checked || props.isActive) && - "url(/static/images/cursor.palm.react.svg), auto !important"}; - - ${(props) => - props.inProgress && - css` - pointer-events: none; - /* cursor: wait; */ - `} - - ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"} - } - - .table-container_element-wrapper, - .table-container_quick-buttons-wrapper { - padding-right: 0px; - } - - .table-container_element-wrapper, - .table-container_row-loader { - min-width: ${(props) => (props.isRoom ? "40px" : "36px")}; - } - - .table-container_element-container { - width: 32px; - height: 32px; - - display: flex; - justify-content: center; - align-items: center; - } - - .table-container_row-loader { - svg { - margin-left: 4px; - } - } - - .table-container_row-checkbox { - padding-left: 20px; - width: 16px; - } - - .table-container_file-name-cell { - ${(props) => - props.showHotkeyBorder && - css` - margin-left: -24px; - padding-left: 24px; - ${hotkeyBorderStyle} - `}; - ${(props) => props.dragging && rowCheckboxDraggingStyle}; - } - - .table-container_row-context-menu-wrapper { - padding-right: 0px; - - ${(props) => props.dragging && contextMenuWrapperDraggingStyle}; - ${(props) => - props.showHotkeyBorder && - css` - margin-right: -20px; - padding-right: 18px; - ${hotkeyBorderStyle} - `}; - } - - .edit { - svg:not(:root) { - width: 12px; - height: 12px; - } - } - - ${(props) => - props.showHotkeyBorder && - css` - .table-container_cell { - margin-top: -2px; - - border-top: 1px solid #2da7db !important; - border-right: 0; - border-left: 0; - } - .table-container_file-name-cell > .table-container_cell { - margin-top: 2px; - border-top: 0px !important; - } - - .item-file-name, - .row_update-text, - .expandButton, - .badges, - .tag, - .author-cell, - .table-container_cell > p { - margin-top: 2px; - } - `} -`; - -const StyledDragAndDrop = styled(DragAndDrop)` - display: contents; -`; - -const StyledBadgesContainer = styled.div` - margin-left: 8px; - - display: flex; - align-items: center; - - ${(props) => - props.showHotkeyBorder && - css` - margin-top: 1px; - `} - - .badges { - display: flex; - align-items: center; - margin-right: 12px; - } - - .badges:last-child { - margin-left: 0px; - } - - .badge { - cursor: pointer; - margin-right: 8px; - } - - .new-items { - min-width: 12px; - width: max-content; - margin: 0 -2px -2px -2px; - } - - .badge-version { - width: max-content; - margin: 0 5px -2px -2px; - - > div { - padding: 0 3.3px 0 4px; - p { - letter-spacing: 0.5px; - font-size: 8px; - font-weight: 800; - } - } - } - - .badge-new-version { - width: max-content; - } -`; - -const StyledQuickButtonsContainer = styled.div` - width: 100%; - - .badges { - display: flex; - justify-content: flex-end; - align-items: center; - } - - .badge { - margin-right: 14px; - } - - .badge:last-child { - margin-right: 10px; - } - - .lock-file { - svg { - height: 12px; - } - } - - .favorite { - margin-top: 1px; - } - - .share-button-icon:hover { - cursor: pointer; - path { - fill: ${(props) => - props.theme.filesSection.tableView.row.shareHoverColor}; - } - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - } -`; - -StyledQuickButtonsContainer.defaultProps = { theme: Base }; +import RoomsRowDataComponent from "./sub-components/RoomsRowData"; +import RowDataComponent from "./sub-components/RowData"; +import { StyledTableRow, StyledDragAndDrop } from "./StyledTable"; const FilesTableRow = (props) => { const { t, fileContextClick, item, - onContentFileSelect, checkedProps, className, value, onMouseClick, - badgesComponent, dragging, isDragging, onDrop, onMouseDown, - personal, isActive, onHideContextMenu, onFilesClick, @@ -311,12 +32,9 @@ const FilesTableRow = (props) => { setFirsElemChecked, setHeaderBorder, theme, - quickButtonsComponent, getContextModel, showHotkeyBorder, - tableColumns, id, - hideColumns, isRooms, } = props; const { acceptBackground, background } = theme.dragAndDrop; @@ -374,33 +92,6 @@ const FilesTableRow = (props) => { } }, [checkedProps, isActive, showHotkeyBorder]); - let availableColumns = []; - let authorAvailableDrag = true; - let createdAvailableDrag = true; - let modifiedAvailableDrag = true; - let sizeAvailableDrag = true; - let typeAvailableDrag = true; - let ownerAvailableDrag = true; - let tagsAvailableDrag = true; - let activityAvailableDrag = true; - let buttonsAvailableDrag = true; - - if (dragging && isDragging) { - availableColumns = localStorage.getItem(tableColumns).split(","); - - authorAvailableDrag = availableColumns.includes("Author") && !hideColumns; - createdAvailableDrag = availableColumns.includes("Created") && !hideColumns; - modifiedAvailableDrag = - availableColumns.includes("Modified") && !hideColumns; - sizeAvailableDrag = availableColumns.includes("Size") && !hideColumns; - typeAvailableDrag = availableColumns.includes("Type") && !hideColumns; - buttonsAvailableDrag = availableColumns.includes("QuickButtons"); - ownerAvailableDrag = availableColumns.includes("Owner") && !hideColumns; - tagsAvailableDrag = availableColumns.includes("Tags") && !hideColumns; - activityAvailableDrag = - availableColumns.includes("Activity") && !hideColumns; - } - const idWithFileExst = item.fileExst ? `${item.id}_${item.fileExst}` : item.id ?? ""; @@ -446,161 +137,18 @@ const FilesTableRow = (props) => { } isRoom={item.isRoom} > - - - - {badgesComponent} - - - - {(item.isRoom || isRooms) && ( - - - - )} - - {!item.isRoom && isRooms && ( - - )} - - {item.isRoom && ( - - - - )} - - {!personal && ( - - - - )} - - {!item.isRoom && !isRooms && ( - - - - )} - - - - - - {!item.isRoom && !isRooms && ( - - - - )} - - {!item.isRoom && !isRooms && ( - - - - )} - {!item.isRoom && !isRooms && ( - - - {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 new file mode 100644 index 0000000000..c921e3db43 --- /dev/null +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -0,0 +1,143 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import TableCell from "@docspace/components/table-container/TableCell"; +import FileNameCell from "./FileNameCell"; +import TypeCell from "./TypeCell"; +import TagsCell from "./TagsCell"; +import AuthorCell from "./AuthorCell"; +import DateCell from "./DateCell"; +import { classNames } from "@docspace/components/utils/classNames"; +import { StyledBadgesContainer } from "../StyledTable"; + +const RoomsRowDataComponent = (props) => { + const { + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + + dragStyles, + selectionProp, + value, + theme, + onContentFileSelect, + checkedProps, + element, + inProgress, + showHotkeyBorder, + badgesComponent, + } = props; + + return ( + <> + + + + {badgesComponent} + + + + {roomColumnTypeIsEnabled ? ( + + + + ) : ( +
+ )} + + {roomColumnTagsIsEnabled ? ( + + + + ) : ( +
+ )} + + {roomColumnOwnerIsEnabled ? ( + + + + ) : ( +
+ )} + + {roomColumnActivityIsEnabled ? ( + + + + ) : ( +
+ )} + + ); +}; + +export default inject(({ tableStore }) => { + const { + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + } = tableStore; + + return { + roomColumnTypeIsEnabled, + roomColumnOwnerIsEnabled, + roomColumnTagsIsEnabled, + roomColumnActivityIsEnabled, + }; +})(observer(RoomsRowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js new file mode 100644 index 0000000000..66ccde0381 --- /dev/null +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -0,0 +1,186 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import TableCell from "@docspace/components/table-container/TableCell"; +import FileNameCell from "./FileNameCell"; +import TypeCell from "./TypeCell"; +import AuthorCell from "./AuthorCell"; +import DateCell from "./DateCell"; +import SizeCell from "./SizeCell"; +import { classNames } from "@docspace/components/utils/classNames"; +import { + StyledBadgesContainer, + StyledQuickButtonsContainer, +} from "../StyledTable"; + +const RowDataComponent = (props) => { + const { + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + + dragStyles, + selectionProp, + value, + theme, + onContentFileSelect, + checkedProps, + element, + inProgress, + showHotkeyBorder, + badgesComponent, + quickButtonsComponent, + } = props; + + return ( + <> + + + + {badgesComponent} + + + + {authorColumnIsEnabled ? ( + + + + ) : ( +
+ )} + + {createdColumnIsEnabled ? ( + + + + ) : ( +
+ )} + + {modifiedColumnIsEnabled ? ( + + + + ) : ( +
+ )} + + {sizeColumnIsEnabled ? ( + + + + ) : ( +
+ )} + + {typeColumnIsEnabled ? ( + + + + ) : ( +
+ )} + {quickButtonsColumnIsEnabled ? ( + + + {quickButtonsComponent} + + + ) : ( +
+ )} + + ); +}; + +export default inject(({ tableStore }) => { + const { + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + } = tableStore; + + return { + authorColumnIsEnabled, + createdColumnIsEnabled, + modifiedColumnIsEnabled, + sizeColumnIsEnabled, + typeColumnIsEnabled, + quickButtonsColumnIsEnabled, + }; +})(observer(RowDataComponent)); diff --git a/packages/client/src/store/TableStore.js b/packages/client/src/store/TableStore.js new file mode 100644 index 0000000000..6bb9631372 --- /dev/null +++ b/packages/client/src/store/TableStore.js @@ -0,0 +1,205 @@ +import { makeAutoObservable } from "mobx"; +import { TableVersions } from "SRC_DIR/helpers/constants"; + +const TABLE_COLUMNS = `filesTableColumns_ver-${TableVersions.Files}`; +const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`; + +const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`; +const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`; + +const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`; +const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`; + +class TableStore { + authStore; + treeFoldersStore; + + roomColumnNameIsEnabled = true; // always true + roomColumnTypeIsEnabled = false; + roomColumnTagsIsEnabled = true; + roomColumnOwnerIsEnabled = false; + roomColumnActivityIsEnabled = true; + + nameColumnIsEnabled = true; // always true + authorColumnIsEnabled = false; + createdColumnIsEnabled = true; + modifiedColumnIsEnabled = true; + sizeColumnIsEnabled = true; + typeColumnIsEnabled = true; + quickButtonsColumnIsEnabled = true; + + constructor(authStore, treeFoldersStore) { + makeAutoObservable(this); + + this.authStore = authStore; + this.treeFoldersStore = treeFoldersStore; + } + + setRoomColumnType = (enable) => { + this.roomColumnTypeIsEnabled = enable; + }; + + setRoomColumnTags = (enable) => { + this.roomColumnTagsIsEnabled = enable; + }; + + setRoomColumnOwner = (enable) => { + this.roomColumnOwnerIsEnabled = enable; + }; + + setRoomColumnActivity = (enable) => { + this.roomColumnActivityIsEnabled = enable; + }; + + setAuthorColumn = (enable) => { + this.authorColumnIsEnabled = enable; + }; + setCreatedColumn = (enable) => { + this.createdColumnIsEnabled = enable; + }; + setModifiedColumn = (enable) => { + this.modifiedColumnIsEnabled = enable; + }; + setSizeColumn = (enable) => { + this.sizeColumnIsEnabled = enable; + }; + setTypeColumn = (enable) => { + this.typeColumnIsEnabled = enable; + }; + setQuickButtonsColumn = (enable) => { + this.quickButtonsColumnIsEnabled = enable; + }; + + setColumnsEnable = () => { + const storageColumns = localStorage.getItem(this.tableStorageName); + const splitColumns = storageColumns && storageColumns.split(","); + + if (splitColumns) { + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + + if (isRooms) { + this.setRoomColumnType(splitColumns.includes("Type")); + this.setRoomColumnTags(splitColumns.includes("Tags")); + this.setRoomColumnOwner(splitColumns.includes("Owner")); + this.setRoomColumnActivity(splitColumns.includes("Activity")); + } else { + this.setAuthorColumn(splitColumns.includes("Author")); + this.setCreatedColumn(splitColumns.includes("Created")); + this.setModifiedColumn(splitColumns.includes("Modified")); + this.setSizeColumn(splitColumns.includes("Size")); + this.setTypeColumn(splitColumns.includes("Type")); + this.setQuickButtonsColumn(splitColumns.includes("QuickButtons")); + } + } + }; + + setColumnEnable = (key) => { + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + + switch (key) { + case "Author": + this.setAuthorColumn(!this.authorColumnIsEnabled); + return; + case "Created": + this.setCreatedColumn(!this.createdColumnIsEnabled); + return; + case "Modified": + this.setModifiedColumn(!this.modifiedColumnIsEnabled); + return; + case "Size": + this.setSizeColumn(!this.sizeColumnIsEnabled); + return; + case "Type": + isRooms + ? this.setRoomColumnType(!this.roomColumnTypeIsEnabled) + : this.setTypeColumn(!this.typeColumnIsEnabled); + return; + case "QuickButtons": + this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled); + return; + case "Owner": + this.setRoomColumnOwner(!this.roomColumnOwnerIsEnabled); + return; + case "Tags": + this.setRoomColumnTags(!this.roomColumnTagsIsEnabled); + return; + case "Activity": + this.setRoomColumnActivity(!this.roomColumnActivityIsEnabled); + return; + default: + return; + } + }; + + getColumns = (defaultColumns) => { + const storageColumns = localStorage.getItem(this.tableStorageName); + const splitColumns = storageColumns && storageColumns.split(","); + + const columns = []; + + if (splitColumns) { + this.setColumnsEnable(); + + for (let col of defaultColumns) { + const column = splitColumns.find((key) => key === col.key); + column ? (col.enable = true) : (col.enable = false); + + columns.push(col); + } + return columns; + } else { + return defaultColumns; + } + }; + + get tableStorageName() { + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + const userId = this.authStore.userStore.user.id; + + return isRooms + ? `${TABLE_ROOMS_COLUMNS}=${userId}` + : `${TABLE_COLUMNS}=${userId}`; + } + + get columnStorageName() { + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + const userId = this.authStore.userStore.user.id; + + return isRooms + ? `${COLUMNS_ROOMS_SIZE}=${userId}` + : `${COLUMNS_SIZE}=${userId}`; + } + + get columnInfoPanelStorageName() { + const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore; + const isRooms = isRoomsFolder || isArchiveFolder; + const userId = this.authStore.userStore.user.id; + + return isRooms + ? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}` + : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; + } + + get filesColumnStorageName() { + const userId = this.authStore.userStore.user.id; + return `${COLUMNS_SIZE}=${userId}`; + } + get roomsColumnStorageName() { + const userId = this.authStore.userStore.user.id; + return `${COLUMNS_ROOMS_SIZE}=${userId}`; + } + get filesColumnInfoPanelStorageName() { + const userId = this.authStore.userStore.user.id; + return `${COLUMNS_SIZE_INFO_PANEL}=${userId}`; + } + get roomsColumnInfoPanelStorageName() { + const userId = this.authStore.userStore.user.id; + return `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`; + } +} + +export default TableStore; diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js index 3f51e00c8d..b5d439ad23 100644 --- a/packages/client/src/store/index.js +++ b/packages/client/src/store/index.js @@ -31,6 +31,7 @@ import TagsStore from "./TagsStore"; import PeopleStore from "./PeopleStore"; import OformsStore from "./OformsStore"; import AccessRightsStore from "./AccessRightsStore"; +import TableStore from "./TableStore"; const oformsStore = new OformsStore(authStore); @@ -136,6 +137,8 @@ const profileActionsStore = new ProfileActionsStore( selectedFolderStore ); +const tableStore = new TableStore(authStore, treeFoldersStore); + authStore.infoPanelStore.authStore = authStore; authStore.infoPanelStore.settingsStore = settingsStore; authStore.infoPanelStore.filesStore = filesStore; @@ -170,6 +173,7 @@ const store = { hotkeyStore, selectFileDialogStore, oformsStore, + tableStore, tagsStore,