table group menu selection moved

2024-01-15 14:31:06 +05:00 · 2024-01-15 14:31:06 +05:00 · 04fd979200
commit 04fd979200
parent fe02816b9f
6 changed files with 156 additions and 241 deletions
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@ -1,6 +1,9 @@
 import DeleteReactSvgUrl from "PUBLIC_DIR/images/delete.react.svg?url";
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 import ActionsHeaderTouchReactSvgUrl from "PUBLIC_DIR/images/actions.header.touch.react.svg?url";
+import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
+import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
+import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
 import React from "react";
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
@ -11,7 +14,7 @@ import IconButton from "@docspace/components/icon-button";
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import DropDownItem from "@docspace/components/drop-down-item";
 import LoaderSectionHeader from "../loaderSectionHeader";
-import { tablet, desktop } from "@docspace/components/utils/device";
+import { tablet, desktop, mobile } from "@docspace/components/utils/device";
 import withLoading from "SRC_DIR/HOCs/withLoading";
 import Badge from "@docspace/components/badge";
 import {
@ -109,6 +112,34 @@ const HeaderContainer = styled.div`

 const StyledContainer = styled.div`
  .group-button-menu-container {
+    height: 69px;
+    position: absolute;
+    z-index: 201;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+
+    @media ${tablet} {
+      height: 60px;
+    }
+
+    @media ${mobile} {
+      height: 52px;
+    }
+
+    .table-container_group-menu {
+      border-image-slice: 0;
+      border-image-source: none;
+      border-bottom: ${(props) =>
+        props.theme.filesSection.tableView.row.borderColor};
+      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
+      padding: 0px;
+    }
+
+    .table-container_group-menu-separator {
+      margin: 0 16px;
+    }
+
    ${(props) =>
      props.viewAs === "table"
        ? css`
@ -138,6 +169,8 @@ const SectionHeaderContent = (props) => {
  const navigate = useNavigate();
  const location = useLocation();

+  const isSessionsPage = location.pathname.includes("/sessions");
+
  const [state, setState] = React.useState({
    header: "",
    isCategoryOrHeader: false,
@ -238,13 +271,17 @@ const SectionHeaderContent = (props) => {
  };

  const onCheck = (checked) => {
-    const { setSelected } = props;
-    setSelected(checked ? "all" : "close");
+    const { setupSetSelected, peopleSetSelected } = props;
+    isSessionsPage
+      ? peopleSetSelected(checked ? "all" : "close", isSessionsPage)
+      : setupSetSelected(checked ? "all" : "close");
  };

  const onSelectAll = () => {
-    const { setSelected } = props;
-    setSelected("all");
+    const { setupSetSelected, peopleSetSelected } = props;
+    isSessionsPage
+      ? peopleSetSelected("all", isSessionsPage)
+      : setupSetSelected("all");
  };

  const removeAdmins = () => {
@ -257,9 +294,13 @@ const SectionHeaderContent = (props) => {
    t,
    isLoadedSectionHeader,

-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
+    isSetupleHeaderIndeterminate,
+    isSetupHeaderVisible,
+    isSetupHeaderChecked,
+
+    isPeopleHeaderIndeterminate,
+    isPeopleHeaderVisible,
+    isPeopleHeaderChecked,
    selection,
  } = props;
  const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
@ -276,14 +317,50 @@ const SectionHeaderContent = (props) => {
    </>
  );

-  const headerMenu = [
-    {
-      label: t("Common:Delete"),
-      disabled: !selection || !selection.length > 0,
-      onClick: removeAdmins,
-      iconUrl: DeleteReactSvgUrl,
-    },
-  ];
+  const headerMenu = isSessionsPage
+    ? [
+        {
+          id: "sessions",
+          key: "Sessions",
+          label: t("Common:Sessions"),
+          onClick: () => console.log("Sessions"),
+          iconUrl: HistoryFinalizedReactSvgUrl,
+        },
+        {
+          id: "logout",
+          key: "Logout",
+          label: t("Common:Logout"),
+          onClick: () => console.log("Logout"),
+          iconUrl: RemoveSvgUrl,
+        },
+        {
+          id: "Disable",
+          key: "Disable",
+          label: t("Common:DisableUserButton"),
+          onClick: () => console.log("Disable"),
+          iconUrl: TrashReactSvgUrl,
+        },
+      ]
+    : [
+        {
+          label: t("Common:Delete"),
+          disabled: !selection || !selection.length > 0,
+          onClick: removeAdmins,
+          iconUrl: DeleteReactSvgUrl,
+        },
+      ];
+
+  const isHeaderVisible = isSessionsPage
+    ? isPeopleHeaderVisible
+    : isSetupHeaderVisible;
+
+  const isHeaderChecked = isSessionsPage
+    ? isPeopleHeaderChecked
+    : isSetupHeaderChecked;
+
+  const isHeaderIndeterminate = isSessionsPage
+    ? isPeopleHeaderIndeterminate
+    : isSetupleHeaderIndeterminate;

  return (
    <StyledContainer isHeaderVisible={isHeaderVisible}>
@ -295,6 +372,7 @@ const SectionHeaderContent = (props) => {
            isChecked={isHeaderChecked}
            isIndeterminate={isHeaderIndeterminate}
            headerMenu={headerMenu}
+            withoutInfoPanelToggler
          />
        </div>
      ) : !isLoadedSectionHeader ? (
@ -343,7 +421,7 @@ const SectionHeaderContent = (props) => {
  );
 };

-export default inject(({ auth, setup, common }) => {
+export default inject(({ auth, setup, common, peopleStore }) => {
  const { currentQuotaStore } = auth;
  const {
    isBrandingAndCustomizationAvailable,
@ -353,25 +431,32 @@ export default inject(({ auth, setup, common }) => {
  const { toggleSelector } = setup;
  const {
    selected,
-    setSelected,
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
+    setSelected: setupSetSelected,
+    isHeaderIndeterminate: isSetupHeaderIndeterminate,
+    isHeaderChecked: isSetupHeaderChecked,
+    isHeaderVisible: isSetupHeaderVisible,
    deselectUser,
    selectAll,
    selection,
  } = setup.selectionStore;
+  const {
+    isHeaderIndeterminate: isPeopleHeaderIndeterminate,
+    isHeaderChecked: isPeopleHeaderChecked,
+    isHeaderVisible: isPeopleHeaderVisible,
+    setSelected: peopleSetSelected,
+  } = peopleStore.selectionStore;
+
  const { admins, selectorIsOpen } = setup.security.accessRight;
  const { isLoadedSectionHeader, setIsLoadedSectionHeader } = common;
  return {
    addUsers,
    removeAdmins,
    selected,
-    setSelected,
    admins,
-    isHeaderIndeterminate,
-    isHeaderChecked,
-    isHeaderVisible,
+    setupSetSelected,
+    isSetupHeaderIndeterminate,
+    isSetupHeaderChecked,
+    isSetupHeaderVisible,
    deselectUser,
    selectAll,
    toggleSelector,
@ -381,6 +466,10 @@ export default inject(({ auth, setup, common }) => {
    setIsLoadedSectionHeader,
    isBrandingAndCustomizationAvailable,
    isRestoreAndAutoBackupAvailable,
+    peopleSetSelected,
+    isPeopleHeaderIndeterminate,
+    isPeopleHeaderChecked,
+    isPeopleHeaderVisible,
  };
 })(
  withLoading(
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
@ -1,15 +1,10 @@
 import { inject, observer } from "mobx-react";
-import styled, { css } from "styled-components";
 import { tablet } from "@docspace/components/utils/device";
+import styled, { css } from "styled-components";

-import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import RowContainer from "@docspace/components/row-container";
 import SessionsRow from "./SessionsRow";

-import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
-import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
-import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
-
 const marginStyles = css`
  margin-left: -24px;
  margin-right: -24px;
@ -27,43 +22,6 @@ const marginStyles = css`
 const StyledRowContainer = styled(RowContainer)`
  margin: 0 0 24px;

-  .table-group-menu {
-    height: 60px;
-    position: absolute;
-    z-index: 201;
-    top: -170px;
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            right: -16px;
-          `
-        : css`
-            left: -16px;
-          `}
-    width: 100%;
-
-    .table-container_group-menu {
-      padding: 0px 16px;
-      border-image-slice: 0;
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
-    }
-
-    .table-container_group-menu-checkbox {
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 8px;
-            `
-          : css`
-              margin-left: 8px;
-            `}
-    }
-
-    .table-container_group-menu-separator {
-      margin: 0 16px;
-    }
-  }
-
  .row-selected + .row-wrapper:not(.row-selected) {
    .user-row {
      border-top: ${(props) =>
@ -123,49 +81,7 @@ const StyledRowContainer = styled(RowContainer)`
 `;

 const RowView = (props) => {
-  const {
-    t,
-    sectionWidth,
-    sessionsData,
-    // allSessions,
-    // checkedSessions,
-    // toggleSession,
-    // toggleAllSessions,
-    // isSessionChecked,
-  } = props;
-
-  // const handleAllToggles = (checked) => {
-  //   toggleAllSessions(checked, allSessions);
-  // };
-
-  const headerMenu = [
-    {
-      id: "sessions",
-      key: "Sessions",
-      label: t("Common:Sessions"),
-      onClick: () => console.log("Sessions"),
-      iconUrl: HistoryFinalizedReactSvgUrl,
-    },
-    {
-      id: "logout",
-      key: "Logout",
-      label: t("Common:Logout"),
-      onClick: () => console.log("Logout"),
-      iconUrl: RemoveSvgUrl,
-    },
-    {
-      id: "Disable",
-      key: "Disable",
-      label: t("Common:DisableUserButton"),
-      onClick: () => console.log("Disable"),
-      iconUrl: TrashReactSvgUrl,
-    },
-  ];
-
-  // const isChecked = checkedSessions.length === allSessions.length;
-
-  // const isIndeterminate =
-  //   checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
+  const { t, sectionWidth, sessionsData } = props;

  return (
    <StyledRowContainer
@ -177,21 +93,6 @@ const RowView = (props) => {
      filesLength={sessionsData.length}
      fetchMoreFiles={() => {}}
    >
-      {/* {checkedSessions.length > 0 && (
-        <div className="table-group-menu">
-          <TableGroupMenu
-            sectionWidth={sectionWidth}
-            headerMenu={headerMenu}
-            withoutInfoPanelToggler
-            withComboBox={false}
-            checkboxOptions={[]}
-            isChecked={isChecked}
-            isIndeterminate={isIndeterminate}
-            onChange={handleAllToggles}
-          />
-        </div>
-      )} */}
-
      {sessionsData.map((item) => (
        <SessionsRow
          t={t}
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
@ -6,12 +6,7 @@ import styled, { css } from "styled-components";
 import SessionsTableHeader from "./SessionsTableHeader";
 import SessionsTableRow from "./SessionsTableRow";

-import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
-import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
-import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
-
 import TableContainer from "@docspace/components/table-container/TableContainer";
-import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 import TableBody from "@docspace/components/table-container/TableBody";

 const TABLE_VERSION = "5";
@ -57,28 +52,6 @@ const contextCss = css`
 const StyledTableContainer = styled(TableContainer)`
  margin: 0 0 24px;

-  .table-group-menu {
-    height: 69px;
-    position: absolute;
-    z-index: 201;
-    top: -25px;
-    left: 0px;
-    width: 100%;
-
-    .table-container_group-menu {
-      border-image-slice: 0;
-      border-image-source: none;
-      border-bottom: ${(props) =>
-        props.theme.filesSection.tableView.row.borderColor};
-      box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
-      padding: 0px;
-    }
-
-    .table-container_group-menu-separator {
-      margin: 0 16px;
-    }
-  }
-
  .table-container_header {
    position: absolute;
    padding: 0px 20px;
@ -157,72 +130,15 @@ const StyledTableContainer = styled(TableContainer)`

 StyledTableContainer.defaultProps = { theme: Base };

-const TableView = ({
-  t,
-  sectionWidth,
-  userId,
-  sessionsData,
-  // allSessions,
-  // checkedSessions,
-  // toggleSession,
-  // toggleAllSessions,
-  // isSessionChecked,
-}) => {
+const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
  const [hideColumns, setHideColumns] = useState(false);
  const ref = useRef(null);

-  // const handleAllToggles = (checked) => {
-  //   toggleAllSessions(checked, allSessions);
-  // };
-
  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;

-  const headerMenu = [
-    {
-      id: "sessions",
-      key: "Sessions",
-      label: t("Common:Sessions"),
-      onClick: () => console.log("Sessions"),
-      iconUrl: HistoryFinalizedReactSvgUrl,
-    },
-    {
-      id: "logout",
-      key: "Logout",
-      label: t("Common:Logout"),
-      onClick: () => console.log("Logout"),
-      iconUrl: RemoveSvgUrl,
-    },
-    {
-      id: "Disable",
-      key: "Disable",
-      label: t("Common:DisableUserButton"),
-      onClick: () => console.log("Disable"),
-      iconUrl: TrashReactSvgUrl,
-    },
-  ];
-
-  // const isChecked = checkedSessions.length === allSessions.length;
-
-  // const isIndeterminate =
-  //   checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
-
  return (
    <StyledTableContainer forwardedRef={ref} useReactWindow>
-      {/* {checkedSessions.length > 0 && (
-        <div className="table-group-menu">
-          <TableGroupMenu
-            sectionWidth={sectionWidth}
-            headerMenu={headerMenu}
-            withoutInfoPanelToggler
-            withComboBox={false}
-            checkboxOptions={[]}
-            isChecked={isChecked}
-            isIndeterminate={isIndeterminate}
-            onChange={handleAllToggles}
-          />
-        </div>
-      )} */}
      <SessionsTableHeader
        t={t}
        userId={userId}
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
@ -74,9 +74,13 @@ const Sessions = ({
  allSessions,
  setAllSessions,
  isLoadingDownloadReport,
+  clearSelection,
 }) => {
  useEffect(() => {
    setAllSessions(mockData);
+    return () => {
+      clearSelection();
+    };
  }, []);

  useViewEffect({
@ -109,25 +113,23 @@ const Sessions = ({
  );
 };

-export default inject(({ auth, setup }) => {
+export default inject(({ auth, setup, peopleStore }) => {
  const { culture, currentDeviceType } = auth.settingsStore;
  const { user } = auth.userStore;
+  const { viewAs, setViewAs, isLoadingDownloadReport } = setup;
  const locale = (user && user.cultureName) || culture || "en";
-  const {
-    viewAs,
-    setViewAs,
-    allSessions,
-    setAllSessions,
-    isLoadingDownloadReport,
-  } = setup;
+
+  const { clearSelection, allSessions, setAllSessions } =
+    peopleStore.selectionStore;

  return {
    locale,
+    currentDeviceType,
    viewAs,
    setViewAs,
-    currentDeviceType,
+    isLoadingDownloadReport,
    allSessions,
    setAllSessions,
-    isLoadingDownloadReport,
+    clearSelection,
  };
 })(withTranslation(["Settings", "Common"])(observer(Sessions)));
--- a/packages/client/src/store/SelectionPeopleStore.js
+++ b/packages/client/src/store/SelectionPeopleStore.js
@ -4,6 +4,7 @@ import { getUserStatus } from "../helpers/people-helpers";

 class SelectionStore {
  peopleStore = null;
+  allSessions = [];
  selection = [];
  selectionUsersRights = {
    isVisitor: 0,
@ -200,11 +201,15 @@ class SelectionStore {
    return newSelection;
  };

-  setSelected = (selected) => {
+  setSelected = (selected, isSessionsPage) => {
    this.bufferSelection = null;
    this.selected = selected;
+    const sessions = this.allSessions;
    const list = this.peopleStore.usersStore.peopleList;
-    this.setSelection(this.getUsersBySelected(list, selected));
+
+    isSessionsPage
+      ? this.setSelection(this.getUsersBySelected(sessions, selected))
+      : this.setSelection(this.getUsersBySelected(list, selected));

    return selected;
  };
@ -323,6 +328,26 @@ class SelectionStore {

    return users.map((u) => u.id);
  }
+
+  get isHeaderVisible() {
+    return this.selection.length > 0;
+  }
+
+  get isHeaderIndeterminate() {
+    return (
+      this.isHeaderVisible && this.selection.length !== this.allSessions.length
+    );
+  }
+
+  get isHeaderChecked() {
+    return (
+      this.isHeaderVisible && this.selection.length === this.allSessions.length
+    );
+  }
+
+  setAllSessions = (sessions) => {
+    this.allSessions = sessions;
+  };
 }

 export default SelectionStore;
--- a/packages/client/src/store/SettingsSetupStore.js
+++ b/packages/client/src/store/SettingsSetupStore.js
@ -78,8 +78,6 @@ class SettingsSetupStore {
  securityLifetime = [];

  sessionsIsInit = false;
-  allSessions = [];
-  checkedSessions = [];
  sessions = [];
  currentSession = [];

@ -184,22 +182,6 @@ class SettingsSetupStore {
    this.integration.consumers = consumers;
  };

-  setAllSessions = (sessions) => {
-    this.allSessions = sessions;
-  };
-
-  toggleSession = (id) => {
-    this.checkedSessions = this.checkedSessions.includes(id)
-      ? this.checkedSessions.filter((itemId) => itemId !== id)
-      : [...this.checkedSessions, id];
-  };
-
-  toggleAllSessions = (checked, sessions) => {
-    this.checkedSessions = checked ? sessions.map((data) => data.userId) : [];
-  };
-
-  isSessionChecked = (userId) => this.checkedSessions.includes(userId);
-
  get isSMTPInitialSettings() {
    const settings = this.integration.smtpSettings.settings;
    const initialSettings = this.integration.smtpSettings.initialSettings;