added tablet view
This commit is contained in:
parent
98e923494e
commit
1d48cc2926
@ -0,0 +1,4 @@
|
||||
const RowView = () => {
|
||||
return <div>RowView</div>;
|
||||
};
|
||||
export default RowView;
|
@ -0,0 +1,125 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import TableHeader from "@docspace/components/table-container/TableHeader";
|
||||
|
||||
const TABLE_VERSION = "5";
|
||||
const TABLE_COLUMNS = `GoogleWorkspaceColumns_ver-${TABLE_VERSION}`;
|
||||
|
||||
const getColumns = (defaultColumns, userId) => {
|
||||
const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
|
||||
const columns = [];
|
||||
|
||||
if (storageColumns) {
|
||||
const splitColumns = storageColumns.split(",");
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
const SessionsTableHeader = (props) => {
|
||||
const {
|
||||
t,
|
||||
userId,
|
||||
sectionWidth,
|
||||
tableRef,
|
||||
columnStorageName,
|
||||
columnInfoPanelStorageName,
|
||||
} = props;
|
||||
|
||||
const defaultColumns = [
|
||||
{
|
||||
key: "User",
|
||||
title: t("Common:User"),
|
||||
resizable: true,
|
||||
enable: true,
|
||||
default: true,
|
||||
active: true,
|
||||
minWidth: 180,
|
||||
// checkbox: {
|
||||
// value: isChecked,
|
||||
// isIndeterminate,
|
||||
// onChange: toggleAll,
|
||||
// },
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "Status",
|
||||
title: t("Common:Status"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "Platform",
|
||||
title: t("Common:Platform"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "Country",
|
||||
title: t("Common:Country"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
{
|
||||
key: "IpAddress",
|
||||
title: t("Common:IpAddress"),
|
||||
enable: true,
|
||||
resizable: true,
|
||||
onChange: onColumnChange,
|
||||
},
|
||||
];
|
||||
|
||||
const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
|
||||
|
||||
function onColumnChange(key, e) {
|
||||
const columnIndex = columns.findIndex((c) => c.key === key);
|
||||
|
||||
if (columnIndex === -1) return;
|
||||
|
||||
setColumns((prevColumns) =>
|
||||
prevColumns.map((item, index) =>
|
||||
index === columnIndex ? { ...item, enable: !item.enable } : item
|
||||
)
|
||||
);
|
||||
|
||||
const tableColumns = columns.map((c) => c.enable && c.key);
|
||||
localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setColumns(getColumns(defaultColumns));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TableHeader
|
||||
checkboxSize="48px"
|
||||
containerRef={tableRef}
|
||||
columns={columns}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
sectionWidth={sectionWidth}
|
||||
checkboxMargin="12px"
|
||||
showSettings={true}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
return {
|
||||
userId: auth.userStore.user.id,
|
||||
};
|
||||
})(observer(SessionsTableHeader));
|
@ -0,0 +1,89 @@
|
||||
import TableRow from "@docspace/components/table-container/TableRow";
|
||||
import TableCell from "@docspace/components/table-container/TableCell";
|
||||
import Text from "@docspace/components/text";
|
||||
import Avatar from "@docspace/components/avatar";
|
||||
import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
.avatar {
|
||||
margin-right: 6px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SessionsTableRow = ({
|
||||
t,
|
||||
avatar,
|
||||
role,
|
||||
displayName,
|
||||
status,
|
||||
browser,
|
||||
platform,
|
||||
country,
|
||||
city,
|
||||
ip,
|
||||
userId,
|
||||
}) => {
|
||||
const contextOptions = [
|
||||
{
|
||||
key: "ViewSessions",
|
||||
label: t("Settings:ViewSessions"),
|
||||
icon: SettingsIcon,
|
||||
onClick: () => console.log("view session"),
|
||||
},
|
||||
{
|
||||
key: "LogoutAllSessions",
|
||||
label: t("Settings:LogoutAllSessions"),
|
||||
icon: SettingsIcon,
|
||||
onClick: () => console.log("logout session"),
|
||||
},
|
||||
{
|
||||
key: "Separator",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "Disable",
|
||||
label: t("PeopleTranslations:DisableUserButton"),
|
||||
icon: SettingsIcon,
|
||||
onClick: () => console.log("disable"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledTableRow
|
||||
onClick={() => console.log("selected row")}
|
||||
contextOptions={contextOptions}
|
||||
>
|
||||
<TableCell>
|
||||
<Avatar
|
||||
className="avatar"
|
||||
userName={displayName}
|
||||
role={role}
|
||||
source={avatar}
|
||||
size={"small"}
|
||||
/>
|
||||
<Text>{displayName}</Text>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Text>{status}</Text>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Text>{platform}, </Text>
|
||||
<Text>{browser}</Text>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Text>{country}, </Text>
|
||||
<Text>{city}</Text>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Text>{ip}</Text>
|
||||
</TableCell>
|
||||
</StyledTableRow>
|
||||
);
|
||||
};
|
||||
|
||||
export default SessionsTableRow;
|
@ -0,0 +1,124 @@
|
||||
import { useRef } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import SessionsTableHeader from "./SessionsTableHeader";
|
||||
import SessionsTableRow from "./SessionsTableRow";
|
||||
import TableContainer from "@docspace/components/table-container/TableContainer";
|
||||
import TableBody from "@docspace/components/table-container/TableBody";
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
margin: 0 0 24px;
|
||||
|
||||
.header-container-text {
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-list-item:has(.selected-table-row) {
|
||||
background-color: ${(props) =>
|
||||
props.theme.filesSection.tableView.row.backgroundActive};
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
justify-content: flex-end;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0px;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTableContainer.defaultProps = { theme: Base };
|
||||
|
||||
const TABLE_VERSION = "6";
|
||||
const COLUMNS_SIZE = `sessionsColumnsSize_ver-${TABLE_VERSION}`;
|
||||
const INFO_PANEL_COLUMNS_SIZE = `infoPanelSessionsColumnsSize_ver-${TABLE_VERSION}`;
|
||||
|
||||
const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
|
||||
const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
|
||||
|
||||
return (
|
||||
<StyledTableContainer forwardedRef={tableRef} useReactWindow>
|
||||
<SessionsTableHeader
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
tableRef={tableRef}
|
||||
userId={userId}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
// isIndeterminate={isIndeterminate}
|
||||
// isChecked={checkedUsers.withEmail.length === withEmailUsers.length}
|
||||
// toggleAll={toggleAll}
|
||||
/>
|
||||
<TableBody
|
||||
itemHeight={49}
|
||||
useReactWindow
|
||||
infoPanelVisible={false}
|
||||
columnStorageName={columnStorageName}
|
||||
columnInfoPanelStorageName={columnInfoPanelStorageName}
|
||||
filesLength={sessionsData.length}
|
||||
hasMoreFiles={false}
|
||||
itemCount={sessionsData.length}
|
||||
fetchMoreFiles={() => {}}
|
||||
>
|
||||
{sessionsData.map((session) => (
|
||||
<SessionsTableRow
|
||||
t={t}
|
||||
key={session.id}
|
||||
avatar={session.avatar}
|
||||
displayName={session.displayName}
|
||||
status={session.status}
|
||||
platform={session.platform}
|
||||
browser={session.browser}
|
||||
country={session.country}
|
||||
city={session.city}
|
||||
ip={session.ip}
|
||||
userId={session.userId}
|
||||
// isChecked={isAccountChecked(data.key, checkedAccountType)}
|
||||
// toggleAccount={(e) => handleToggle(e, data)}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { id: userId } = auth.userStore.user;
|
||||
|
||||
return {
|
||||
userId,
|
||||
};
|
||||
})(observer(TableView));
|
@ -0,0 +1,35 @@
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Consumer } from "@docspace/components/utils/context";
|
||||
|
||||
import TableView from "./TableView";
|
||||
import RowView from "./RowView";
|
||||
|
||||
const SessionsTable = ({ t, viewAs, sessionsData }) => {
|
||||
return (
|
||||
<Consumer>
|
||||
{(context) =>
|
||||
viewAs === "table" ? (
|
||||
<TableView
|
||||
t={t}
|
||||
sectionWidth={context.sectionWidth}
|
||||
sessionsData={sessionsData}
|
||||
/>
|
||||
) : (
|
||||
<RowView
|
||||
t={t}
|
||||
sectionWidth={context.sectionWidth}
|
||||
sessionsData={sessionsData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ setup }) => {
|
||||
const { viewAs } = setup;
|
||||
|
||||
return {
|
||||
viewAs,
|
||||
};
|
||||
})(observer(SessionsTable));
|
@ -0,0 +1,97 @@
|
||||
const allSessionsData = [
|
||||
{
|
||||
id: 1,
|
||||
avatar: "",
|
||||
displayName: "Ilya Genkin",
|
||||
status: "Online",
|
||||
platform: "Windows 10",
|
||||
browser: "Chrome 120",
|
||||
country: "Russia",
|
||||
city: "Kstovo",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.18.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ef",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
avatar: "",
|
||||
displayName: "Timur Aliev",
|
||||
status: "Online",
|
||||
platform: "Mac OS 14.1.2",
|
||||
browser: "Safari 17",
|
||||
country: "Uzbekistan",
|
||||
city: "Tashkent",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.19.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ea",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
avatar: "",
|
||||
displayName: "Aleksei Safronov",
|
||||
status: "8 minutes ago",
|
||||
platform: "Windows 10",
|
||||
browser: "Chrome 119",
|
||||
country: "Armenia",
|
||||
city: "Yerevan",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.20.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4eb",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
displayName: "Dmitry Vanyukov",
|
||||
status: "3 hours ago",
|
||||
platform: "Mac OS 14.1.2",
|
||||
browser: "Safari 15",
|
||||
country: "Russia",
|
||||
city: "Kuznechikha",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.21.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ec",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
displayName: "Elizabeth Rayen",
|
||||
status: "Yesterday, 5:12 PM",
|
||||
platform: "Mac OS X 10",
|
||||
browser: "Chrome 119",
|
||||
country: "Germany",
|
||||
city: " Frankfurt",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.22.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ed",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
displayName: "Djalilova Saida",
|
||||
status: "Yesterday, 5:12 PM",
|
||||
platform: "Windows 11",
|
||||
browser: "Chrome 120",
|
||||
country: "Uzbekistan",
|
||||
city: " Tashkent",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.22.0.1",
|
||||
mobile: false,
|
||||
page: "http://192.168.0.239/wizard",
|
||||
tenantId: 1,
|
||||
userId: "66faa6e4-f133-11ea-b126-00ffeec8b4ed",
|
||||
},
|
||||
];
|
||||
|
||||
export default allSessionsData;
|
@ -1,13 +1,102 @@
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import { mobile, tablet } from "@docspace/components/utils/device";
|
||||
import { MainContainer } from "../StyledSecurity";
|
||||
import Text from "@docspace/components/text";
|
||||
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
|
||||
import SessionsTable from "./SessionsTable";
|
||||
import allSessionsData from "./allSessionsData";
|
||||
import styled from "styled-components";
|
||||
|
||||
import Text from "@docspace/components/text";
|
||||
import Button from "@docspace/components/button";
|
||||
|
||||
const DownLoadWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
padding-inline: 16px;
|
||||
inset-inline: 0;
|
||||
}
|
||||
|
||||
.download-report_button {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
|
||||
line-height: ${(props) => props.theme.getCorrectFontSize("20px")};
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
@media ${tablet} {
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("14px")};
|
||||
line-height: 16px;
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.download-report_description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
|
||||
line-height: 16px;
|
||||
|
||||
height: 16px;
|
||||
|
||||
margin: 0;
|
||||
color: ${(props) =>
|
||||
props.theme.client.settings.security.auditTrail
|
||||
.downloadReportDescriptionColor};
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
`;
|
||||
|
||||
const Sessions = ({
|
||||
t,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
currentDeviceType,
|
||||
isLoadingDownloadReport,
|
||||
}) => {
|
||||
useViewEffect({
|
||||
view: viewAs,
|
||||
setView: setViewAs,
|
||||
currentDeviceType,
|
||||
});
|
||||
|
||||
const Sessions = ({ t }) => {
|
||||
return (
|
||||
<MainContainer>
|
||||
<Text className="subtitle">{t("SessionsSubtitle")}</Text>
|
||||
|
||||
<SessionsTable t={t} sessionsData={allSessionsData} />
|
||||
|
||||
<DownLoadWrapper>
|
||||
<Button
|
||||
className="download-report_button"
|
||||
primary
|
||||
label={t("DownloadReportBtnText")}
|
||||
size="normal"
|
||||
minwidth="auto"
|
||||
onClick={() => console.log("get report")}
|
||||
isLoading={isLoadingDownloadReport}
|
||||
/>
|
||||
<span className="download-report_description">
|
||||
{t("DownloadReportDescription")}
|
||||
</span>
|
||||
</DownLoadWrapper>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
@ -15,39 +104,18 @@ const Sessions = ({ t }) => {
|
||||
export default inject(({ auth, setup }) => {
|
||||
const { culture, currentDeviceType } = auth.settingsStore;
|
||||
const { user } = auth.userStore;
|
||||
const { viewAs, setViewAs, isLoadingDownloadReport } = setup;
|
||||
const locale = (user && user.cultureName) || culture || "en";
|
||||
|
||||
const {
|
||||
getAllSessions,
|
||||
removeAllSessions,
|
||||
removeSession,
|
||||
logoutVisible,
|
||||
setLogoutVisible,
|
||||
logoutAllVisible,
|
||||
setLogoutAllVisible,
|
||||
removeAllExecptThis,
|
||||
sessionsIsInit,
|
||||
sessions,
|
||||
currentSession,
|
||||
getSessions,
|
||||
setSessions,
|
||||
} = setup;
|
||||
|
||||
return {
|
||||
locale,
|
||||
getAllSessions,
|
||||
removeAllSessions,
|
||||
removeSession,
|
||||
logoutVisible,
|
||||
setLogoutVisible,
|
||||
logoutAllVisible,
|
||||
setLogoutAllVisible,
|
||||
removeAllExecptThis,
|
||||
sessionsIsInit,
|
||||
sessions,
|
||||
currentSession,
|
||||
getSessions,
|
||||
setSessions,
|
||||
viewAs,
|
||||
setViewAs,
|
||||
currentDeviceType,
|
||||
isLoadingDownloadReport,
|
||||
};
|
||||
})(withTranslation(["Settings", "Common"])(observer(Sessions)));
|
||||
})(
|
||||
withTranslation(["Settings", "Common", "PeopleTranslations"])(
|
||||
observer(Sessions)
|
||||
)
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user