From 119d3c3b46c03dc33941045c2bb5e7fe1a7133ae Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Mon, 8 Jan 2024 23:38:18 +0500 Subject: [PATCH] added table group menu for row view --- .../SessionsTable/RowView/SessionsRow.js | 27 ++- .../RowView/SessionsRowContent.js | 5 +- .../sessions/SessionsTable/RowView/index.js | 176 ++++++++++++++++-- 3 files changed, 187 insertions(+), 21 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js index 5bd34eda9e..9ef9317b74 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js @@ -1,5 +1,8 @@ +import { useRef } from "react"; import Row from "@docspace/components/row"; import SessionsRowContent from "./SessionsRowContent"; +import Avatar from "@docspace/components/avatar"; +import Checkbox from "@docspace/components/checkbox"; import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url"; import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url"; @@ -8,7 +11,6 @@ import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url"; const SessionsRow = (props) => { const { t, - data, sectionWidth, avatar, displayName, @@ -18,7 +20,9 @@ const SessionsRow = (props) => { country, city, ip, - userId, + data, + isChecked, + toggleSession, } = props; const contextOptions = [ { @@ -45,21 +49,27 @@ const SessionsRow = (props) => { }, ]; + const rowRef = useRef(); + + const handleSessionToggle = (e) => { + e.preventDefault(); + e.stopPropagation(); + rowRef.current?.contains(e.target) || toggleSession(e); + }; + return ( { country={country} city={city} ip={ip} + rowRef={rowRef} /> ); diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js index 05cf5d3c32..bbeeba3896 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js @@ -103,9 +103,10 @@ const SessionsRowContent = (props) => { city, ip, userId, + rowRef, } = props; - // const isOnline = status === "Online"; + const isOnline = status === "Online"; const contentData = [ @@ -115,7 +116,7 @@ const SessionsRowContent = (props) => { source={avatar} size={"small"} /> - +
{displayName} {status} diff --git 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 index cd27a8ed33..b4de901b92 100644 --- 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,45 +1,199 @@ import { inject, observer } from "mobx-react"; -import styled from "styled-components"; +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 StyledRowContainer = styled(RowContainer)` - margin 0px 0px 20px; + 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; + } + + .table-list-item { + cursor: pointer; + + &:hover { + background-color: ${(props) => + props.theme.filesSection.tableView.row.backgroundActive}; + + .table-container_cell { + margin-top: -1px; + border-top: ${(props) => + `1px solid ${props.theme.filesSection.tableView.row.borderColor}`}; + + margin-left: -24px; + padding-left: 24px; + } + + .table-container_row-context-menu-wrapper { + margin-right: -20px; + padding-right: 20px; + } + } + } + } + + .header-container-text { + font-size: ${(props) => props.theme.getCorrectFontSize("12px")}; + color: #a3a9ae; + } + + .table-container_header { + position: absolute; + } `; const RowView = (props) => { - const { t, sectionWidth, sessionsData } = props; + const { + t, + sectionWidth, + sessionsData, + allSessions, + checkedSessions, + toggleSession, + toggleAllSessions, + isSessionChecked, + } = props; + + const handleToggle = (e, id) => { + e.stopPropagation(); + toggleSession(id); + }; + + 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; return ( - + {}} + > + {checkedSessions.length > 0 && ( +
+ +
+ )} + {sessionsData.map((session) => ( handleToggle(data)} + data={session} + isChecked={isSessionChecked(session.userId)} + toggleSession={(e) => handleToggle(e, session.userId)} /> ))} ); }; -export default inject(({ auth }) => { +export default inject(({ auth, setup }) => { const { id: userId } = auth.userStore.user; + const { + allSessions, + checkedSessions, + toggleSession, + toggleAllSessions, + isSessionChecked, + } = setup; return { userId, + allSessions, + checkedSessions, + toggleSession, + toggleAllSessions, + isSessionChecked, }; })(observer(RowView));