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 7e296add5f..9181a889c0 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -2,6 +2,7 @@ import React from "react"; import TableHeader from "@docspace/components/table-container/TableHeader"; import { inject, observer } from "mobx-react"; import { withTranslation } from "react-i18next"; +import { Events } from "SRC_DIR/helpers/filesConstants"; class FilesTableHeader extends React.Component { constructor(props) { @@ -246,6 +247,10 @@ class FilesTableHeader extends React.Component { const tableColumns = columns.map((c) => c.enable && c.key); this.setTableColumns(tableColumns); + + const event = new Event(Events.CHANGE_COLUMN); + + window.dispatchEvent(event); }; onFilter = (sortBy) => { diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js index 9d17602b52..cad6d92542 100644 --- a/packages/client/src/pages/Home/Section/Filter/index.js +++ b/packages/client/src/pages/Home/Section/Filter/index.js @@ -20,6 +20,7 @@ import { getDefaultRoomName } from "@docspace/client/src/helpers/filesUtils"; import withLoader from "../../../../HOCs/withLoader"; import { toastr } from "@docspace/components"; +import { TableVersions } from "SRC_DIR/helpers/constants"; const getFilterType = (filterValues) => { const filterType = result( @@ -109,6 +110,14 @@ const getTags = (filterValues) => { return tags; }; +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 SectionFilterContent = ({ t, filter, @@ -785,35 +794,132 @@ const SectionFilterContent = ({ }, [createThumbnails]); const getSortData = React.useCallback(() => { - const commonOptions = isRooms - ? [ - { key: "AZ", label: t("Common:Name"), default: true }, - { key: "roomType", label: t("Common:Type"), default: true }, - { key: "Tags", label: t("Tags"), default: true }, - { key: "Author", label: t("Common:Owner"), default: true }, - { key: "DateAndTime", label: t("ByLastModifiedDate"), default: true }, - ] - : [ - { key: "AZ", label: t("Common:Name"), default: true }, - { key: "Type", label: t("Common:Type"), default: true }, - { key: "Size", label: t("Common:Size"), default: true }, - { - key: "DateAndTimeCreation", - label: t("ByCreationDate"), - default: true, - }, - { key: "DateAndTime", label: t("ByLastModifiedDate"), default: true }, - ]; + const commonOptions = []; - if (!personal && !isRooms) { - commonOptions.splice(1, 0, { - key: "Author", - label: t("ByAuthor"), - default: true, - }); + const name = { key: "AZ", label: t("Common:Name"), default: true }; + const modifiedDate = { + key: "DateAndTime", + label: t("ByLastModifiedDate"), + default: true, + }; + + const type = { key: "Type", label: t("Common:Type"), default: true }; + const size = { key: "Size", label: t("Common:Size"), default: true }; + const creationDate = { + key: "DateAndTimeCreation", + label: t("ByCreationDate"), + default: true, + }; + const authorOption = { + key: "Author", + label: t("ByAuthor"), + default: true, + }; + + const owner = { key: "Author", label: t("Common:Owner"), default: true }; + const tags = { key: "Tags", label: t("Tags"), default: true }; + const roomType = { + key: "roomType", + label: t("Common:Type"), + default: true, + }; + + commonOptions.push(name); + + if (viewAs === "table") { + if (isRooms) { + const availableSort = localStorage + .getItem(`${TABLE_ROOMS_COLUMNS}=${userId}`) + .split(","); + + const infoPanelColumnsSize = localStorage + ?.getItem(`${COLUMNS_SIZE_INFO_PANEL}=${userId}`) + ?.split(" "); + + if (availableSort.includes("Type")) { + const idx = availableSort.findIndex((x) => x === "Type"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(roomType); + } + + if (availableSort.includes("Tags")) { + const idx = availableSort.findIndex((x) => x === "Tags"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(tags); + } + + if (availableSort.includes("Owner")) { + const idx = availableSort.findIndex((x) => x === "Owner"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(owner); + } + + if (availableSort.includes("Activity")) { + const idx = availableSort.findIndex((x) => x === "Activity"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(modifiedDate); + } + } else { + const availableSort = localStorage + .getItem(`${TABLE_COLUMNS}=${userId}`) + .split(","); + + const infoPanelColumnsSize = localStorage + ?.getItem(`${COLUMNS_SIZE_INFO_PANEL}=${userId}`) + ?.split(" "); + + if (availableSort.includes("Author") && !isPersonalRoom) { + const idx = availableSort.findIndex((x) => x === "Author"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(authorOption); + } + if (availableSort.includes("Create")) { + const idx = availableSort.findIndex((x) => x === "Create"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(creationDate); + } + if (availableSort.includes("Modified")) { + const idx = availableSort.findIndex((x) => x === "Modified"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(modifiedDate); + } + if (availableSort.includes("Size")) { + const idx = availableSort.findIndex((x) => x === "Size"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(size); + } + if (availableSort.includes("Type")) { + const idx = availableSort.findIndex((x) => x === "Type"); + const hide = infoPanelVisible && infoPanelColumnsSize[idx] === "0px"; + + !hide && commonOptions.push(type); + } + } + } else { + if (isRooms) { + commonOptions.push(roomType); + commonOptions.push(tags); + commonOptions.push(owner); + commonOptions.push(modifiedDate); + } else { + commonOptions.push(authorOption); + commonOptions.push(creationDate); + commonOptions.push(modifiedDate); + commonOptions.push(size); + commonOptions.push(type); + } } + return commonOptions; - }, [personal, isRooms, t]); + }, [personal, isRooms, t, userId, infoPanelVisible, viewAs, isPersonalRoom]); const removeSelectedItem = React.useCallback( ({ key, group }) => { diff --git a/packages/common/store/InfoPanelStore.js b/packages/common/store/InfoPanelStore.js index b04a1c018a..ccfcce92d2 100644 --- a/packages/common/store/InfoPanelStore.js +++ b/packages/common/store/InfoPanelStore.js @@ -1,4 +1,5 @@ import { makeAutoObservable } from "mobx"; +import { Events } from "SRC_DIR/helpers/filesConstants"; class InfoPanelStore { isVisible = false; @@ -9,14 +10,24 @@ class InfoPanelStore { toggleIsVisible = () => { this.isVisible = !this.isVisible; + const event = new Event(Events.CHANGE_COLUMN); + + window.dispatchEvent(event); }; setVisible = () => { this.isVisible = true; + const event = new Event(Events.CHANGE_COLUMN); + + window.dispatchEvent(event); }; setIsVisible = (bool) => { this.isVisible = bool; + + const event = new Event(Events.CHANGE_COLUMN); + + window.dispatchEvent(event); }; }