added view sessions panel
This commit is contained in:
parent
2618ee7411
commit
68ebaafb4e
@ -10,6 +10,7 @@ import {
|
||||
InvitePanel,
|
||||
EditLinkPanel,
|
||||
EmbeddingPanel,
|
||||
UserSessionsPanel,
|
||||
} from "../panels";
|
||||
import {
|
||||
ConnectDialog,
|
||||
@ -89,6 +90,7 @@ const Panels = (props) => {
|
||||
changeRoomOwnerIsVisible,
|
||||
deletePluginDialogVisible,
|
||||
shareFolderDialogVisible,
|
||||
userSessionsPanelVisible,
|
||||
} = props;
|
||||
|
||||
const { t } = useTranslation(["Translations", "Common"]);
|
||||
@ -194,6 +196,8 @@ const Panels = (props) => {
|
||||
<ChangeRoomOwnerPanel key="change-room-owner" />
|
||||
),
|
||||
shareFolderDialogVisible && <ShareFolderDialog key="share-folder-dialog" />,
|
||||
|
||||
userSessionsPanelVisible && <UserSessionsPanel key="user-sessions-panel" />,
|
||||
];
|
||||
};
|
||||
|
||||
@ -247,6 +251,7 @@ export default inject(
|
||||
leaveRoomDialogVisible,
|
||||
changeRoomOwnerIsVisible,
|
||||
shareFolderDialogVisible,
|
||||
userSessionsPanelVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
const { preparationPortalDialogVisible } = backup;
|
||||
@ -307,6 +312,7 @@ export default inject(
|
||||
changeRoomOwnerIsVisible,
|
||||
deletePluginDialogVisible,
|
||||
shareFolderDialogVisible,
|
||||
userSessionsPanelVisible,
|
||||
};
|
||||
}
|
||||
)(observer(Panels));
|
||||
|
@ -0,0 +1,32 @@
|
||||
import styled from "styled-components";
|
||||
import { Scrollbar } from "@docspace/shared/components/scrollbar";
|
||||
import { Base } from "@docspace/shared/themes";
|
||||
|
||||
const StyledUserSessionsPanel = styled.div`
|
||||
.user-sessions-panel {
|
||||
.scroll-body {
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-sessions-header {
|
||||
padding: 0px 16px;
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
|
||||
.header-text {
|
||||
font-weight: 700;
|
||||
font-size: 21px;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledScrollbar = styled(Scrollbar)`
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
height: calc(100vh - 87px) !important;
|
||||
`;
|
||||
|
||||
StyledUserSessionsPanel.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledUserSessionsPanel, StyledScrollbar };
|
@ -0,0 +1,108 @@
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { Base } from "@docspace/shared/themes";
|
||||
import { tablet } from "@docspace/shared/utils";
|
||||
import { Row } from "@docspace/shared/components/row";
|
||||
import { Avatar } from "@docspace/shared/components/avatar";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
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;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const checkedStyle = css`
|
||||
background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
|
||||
${marginStyles}
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
padding: 24px 20px;
|
||||
`;
|
||||
|
||||
const UserSessions = (props) => {
|
||||
const {
|
||||
t,
|
||||
data,
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
setSessionModalData,
|
||||
} = props;
|
||||
|
||||
const contextOptions = [
|
||||
{
|
||||
key: "LogoutAllSessions",
|
||||
label: t("Settings:LogoutAllSessions"),
|
||||
icon: RemoveSvgUrl,
|
||||
onClick: onClickLogout,
|
||||
},
|
||||
{
|
||||
key: "Separator",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "Disable",
|
||||
label: t("Common:DisableUserButton"),
|
||||
icon: TrashReactSvgUrl,
|
||||
onClick: onClickDisable,
|
||||
},
|
||||
];
|
||||
|
||||
const onClickLogout = () => {
|
||||
setLogoutAllDialogVisible(true);
|
||||
setSessionModalData({ displayName: data.displayName });
|
||||
};
|
||||
|
||||
const onClickDisable = () => {
|
||||
setDisableDialogVisible(true);
|
||||
};
|
||||
|
||||
console.log(data);
|
||||
|
||||
const element = (
|
||||
<Avatar size="large" userName={data.displayName} source={data.avatar} />
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Row
|
||||
key={data.userId}
|
||||
data={data}
|
||||
element={element}
|
||||
mode={"modern"}
|
||||
className={"user-row"}
|
||||
withoutBorder
|
||||
contextOptions={contextOptions}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup }) => {
|
||||
const {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
setSessionModalData,
|
||||
sessionModalData,
|
||||
} = setup;
|
||||
|
||||
return {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
setSessionModalData,
|
||||
data: sessionModalData,
|
||||
};
|
||||
})(withTranslation(["Settings", "Profile", "Common"])(observer(UserSessions)));
|
@ -0,0 +1,56 @@
|
||||
import { useRef } from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
|
||||
import { Backdrop } from "@docspace/shared/components/backdrop";
|
||||
import { Aside } from "@docspace/shared/components/aside";
|
||||
import { Heading } from "@docspace/shared/components/heading";
|
||||
|
||||
import UserSessions from "./UserSessions";
|
||||
|
||||
import {
|
||||
StyledUserSessionsPanel,
|
||||
StyledScrollbar,
|
||||
} from "./StyledUserSessionsPanel";
|
||||
|
||||
const UserSessionsPanel = (props) => {
|
||||
const { visible, setVisible } = props;
|
||||
|
||||
const scrollRef = useRef(null);
|
||||
|
||||
const onClose = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledUserSessionsPanel>
|
||||
<Backdrop
|
||||
onClick={onClose}
|
||||
visible={visible}
|
||||
isAside={true}
|
||||
zIndex={210}
|
||||
/>
|
||||
<Aside
|
||||
className="user-sessions-panel"
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div className="user-sessions-header">
|
||||
<Heading className="header-text">Active sessions</Heading>
|
||||
</div>
|
||||
|
||||
<StyledScrollbar ref={scrollRef} stype="mediumBlack">
|
||||
<UserSessions />
|
||||
</StyledScrollbar>
|
||||
</Aside>
|
||||
</StyledUserSessionsPanel>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ dialogsStore }) => {
|
||||
const { userSessionsPanelVisible, setUserSessionPanelVisible } = dialogsStore;
|
||||
|
||||
return {
|
||||
visible: userSessionsPanelVisible,
|
||||
setVisible: setUserSessionPanelVisible,
|
||||
};
|
||||
})(observer(UserSessionsPanel));
|
@ -7,6 +7,7 @@ import UploadPanel from "./UploadPanel";
|
||||
import HotkeyPanel from "./HotkeysPanel";
|
||||
import InvitePanel from "./InvitePanel";
|
||||
import EditLinkPanel from "./EditLinkPanel";
|
||||
import UserSessionsPanel from "./UserSessionsPanel";
|
||||
|
||||
export {
|
||||
AddUsersPanel,
|
||||
@ -18,4 +19,5 @@ export {
|
||||
HotkeyPanel,
|
||||
InvitePanel,
|
||||
EditLinkPanel,
|
||||
UserSessionsPanel,
|
||||
};
|
||||
|
@ -307,6 +307,7 @@ const SectionHeaderContent = (props) => {
|
||||
isSeveralSelection,
|
||||
peopleSelection,
|
||||
setSessionModalData,
|
||||
setUserSessionPanelVisible,
|
||||
} = props;
|
||||
const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
|
||||
const arrayOfParams = getArrayOfParams();
|
||||
@ -345,7 +346,7 @@ const SectionHeaderContent = (props) => {
|
||||
);
|
||||
|
||||
const onClickSessions = () => {
|
||||
console.log("view sessions");
|
||||
setUserSessionPanelVisible(true);
|
||||
};
|
||||
|
||||
const onClickLogout = () => {
|
||||
@ -462,7 +463,7 @@ const SectionHeaderContent = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth, setup, common, peopleStore }) => {
|
||||
export default inject(({ auth, setup, common, peopleStore, dialogsStore }) => {
|
||||
const { currentQuotaStore } = auth;
|
||||
const {
|
||||
isBrandingAndCustomizationAvailable,
|
||||
@ -497,6 +498,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
|
||||
|
||||
const { admins, selectorIsOpen } = setup.security.accessRight;
|
||||
const { isLoadedSectionHeader, setIsLoadedSectionHeader } = common;
|
||||
const { setUserSessionPanelVisible } = dialogsStore;
|
||||
return {
|
||||
addUsers,
|
||||
removeAdmins,
|
||||
@ -525,6 +527,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
|
||||
setLogoutDialogVisible,
|
||||
setLogoutAllDialogVisible,
|
||||
setSessionModalData,
|
||||
setUserSessionPanelVisible,
|
||||
};
|
||||
})(
|
||||
withLoading(
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useCallback } from "react";
|
||||
import { Base } from "@docspace/shared/themes";
|
||||
@ -128,6 +129,7 @@ StyledTableRow.defaultProps = { theme: Base };
|
||||
const SessionsTableRow = (props) => {
|
||||
const {
|
||||
t,
|
||||
id,
|
||||
item,
|
||||
element,
|
||||
checkedProps,
|
||||
@ -145,10 +147,12 @@ const SessionsTableRow = (props) => {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
setSessionModalData,
|
||||
onlineSessionsSocket,
|
||||
setUserSessionPanelVisible,
|
||||
} = props;
|
||||
|
||||
const onClickSessions = () => {
|
||||
console.log("view sessions");
|
||||
setUserSessionPanelVisible(true);
|
||||
};
|
||||
|
||||
const onClickLogout = () => {
|
||||
@ -160,6 +164,13 @@ const SessionsTableRow = (props) => {
|
||||
setDisableDialogVisible(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onlineSessionsSocket.emit("getStatusesInPortal", { id });
|
||||
onlineSessionsSocket.on("statuses-in-room", (data) => {
|
||||
console.log(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const contextOptions = [
|
||||
{
|
||||
key: "ViewSessions",
|
||||
@ -282,7 +293,9 @@ const SessionsTableRow = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup }) => {
|
||||
export default inject(({ auth, setup, dialogsStore }) => {
|
||||
const { onlineSessionsSocket } = auth.settingsStore;
|
||||
const { setUserSessionPanelVisible } = dialogsStore;
|
||||
const {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
@ -293,5 +306,7 @@ export default inject(({ setup }) => {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
setSessionModalData,
|
||||
onlineSessionsSocket,
|
||||
setUserSessionPanelVisible,
|
||||
};
|
||||
})(withContent(observer(SessionsTableRow)));
|
||||
|
@ -77,8 +77,8 @@ class DialogsStore {
|
||||
leaveRoomDialogVisible = false;
|
||||
changeRoomOwnerIsVisible = false;
|
||||
changeRoomOwnerData = null;
|
||||
|
||||
shareFolderDialogVisible = false;
|
||||
userSessionsPanelVisible = false;
|
||||
|
||||
constructor(
|
||||
authStore,
|
||||
@ -436,6 +436,10 @@ class DialogsStore {
|
||||
setShareFolderDialogVisible = (visible) => {
|
||||
this.shareFolderDialogVisible = visible;
|
||||
};
|
||||
|
||||
setUserSessionPanelVisible = (visible) => {
|
||||
this.userSessionsPanelVisible = visible;
|
||||
};
|
||||
}
|
||||
|
||||
export default DialogsStore;
|
||||
|
@ -539,9 +539,16 @@ class SettingsSetupStore {
|
||||
setSessionModalData = (data) => {
|
||||
this.sessionModalData = {
|
||||
id: data.id,
|
||||
avatar: data.avatar,
|
||||
displayName: data.displayName,
|
||||
status: data.status,
|
||||
platform: data.platform,
|
||||
browser: data.browser,
|
||||
country: data.country,
|
||||
city: data.city,
|
||||
date: data.date,
|
||||
ip: data.ip,
|
||||
userId: data.userId,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user