Web: added row view
This commit is contained in:
parent
8545801272
commit
28c5389335
@ -0,0 +1,76 @@
|
||||
import Row from "@docspace/components/row";
|
||||
import SessionsRowContent from "./SessionsRowContent";
|
||||
|
||||
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 SessionsRow = (props) => {
|
||||
const {
|
||||
t,
|
||||
data,
|
||||
sectionWidth,
|
||||
avatar,
|
||||
displayName,
|
||||
status,
|
||||
browser,
|
||||
platform,
|
||||
country,
|
||||
city,
|
||||
ip,
|
||||
userId,
|
||||
} = props;
|
||||
const contextOptions = [
|
||||
{
|
||||
key: "ViewSessions",
|
||||
label: t("Settings:ViewSessions"),
|
||||
icon: HistoryFinalizedReactSvgUrl,
|
||||
onClick: () => console.log("view session"),
|
||||
},
|
||||
{
|
||||
key: "LogoutAllSessions",
|
||||
label: t("Settings:LogoutAllSessions"),
|
||||
icon: RemoveSvgUrl,
|
||||
onClick: () => console.log("logout session"),
|
||||
},
|
||||
{
|
||||
key: "Separator",
|
||||
isSeparator: true,
|
||||
},
|
||||
{
|
||||
key: "Disable",
|
||||
label: t("Common:DisableUserButton"),
|
||||
icon: TrashReactSvgUrl,
|
||||
onClick: () => console.log("disable"),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Row
|
||||
key={data.id}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
checkbox
|
||||
contextButton
|
||||
contextOptions={contextOptions}
|
||||
// checked={isChecked}
|
||||
// onClick={toggleAccount}
|
||||
// onSelect={toggleAccount}
|
||||
// contextButtonSpacerWidth="0"
|
||||
>
|
||||
<SessionsRowContent
|
||||
userId={userId}
|
||||
avatar={avatar}
|
||||
displayName={displayName}
|
||||
status={status}
|
||||
browser={browser}
|
||||
platform={platform}
|
||||
country={country}
|
||||
city={city}
|
||||
ip={ip}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default SessionsRow;
|
||||
@ -0,0 +1,145 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import Text from "@docspace/components/text";
|
||||
import Box from "@docspace/components/box";
|
||||
import RowContent from "@docspace/components/row-content";
|
||||
import Avatar from "@docspace/components/avatar";
|
||||
|
||||
const StyledRowContent = styled(RowContent)`
|
||||
.rowMainContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 10px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 10px;
|
||||
`}
|
||||
}
|
||||
|
||||
.session-info {
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
span {
|
||||
color: #a3a9ae;
|
||||
}
|
||||
}
|
||||
.additional-row-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.session-platform,
|
||||
.session-location,
|
||||
.session-ip {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #a3a9ae;
|
||||
}
|
||||
|
||||
.session-platform,
|
||||
.session-location {
|
||||
position: relative;
|
||||
span {
|
||||
:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: -7px;
|
||||
`
|
||||
: css`
|
||||
right: -7px;
|
||||
`}
|
||||
width: 2px;
|
||||
height: 12px;
|
||||
background: ${(props) => props.theme.activeSessions.sortHeaderColor};
|
||||
}
|
||||
}
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 6px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 6px;
|
||||
`}
|
||||
}
|
||||
|
||||
.session-location {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
|
||||
.session-ip {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 6px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 6px;
|
||||
`}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const SessionsRowContent = (props) => {
|
||||
const {
|
||||
sectionWidth,
|
||||
avatar,
|
||||
displayName,
|
||||
status,
|
||||
platform,
|
||||
browser,
|
||||
country,
|
||||
city,
|
||||
ip,
|
||||
userId,
|
||||
} = props;
|
||||
|
||||
// const isOnline = status === "Online";
|
||||
|
||||
const contentData = [
|
||||
<Box key={userId} displayProp="flex" alignItems="center">
|
||||
<Avatar
|
||||
className="avatar"
|
||||
userName={displayName}
|
||||
source={avatar}
|
||||
size={"small"}
|
||||
/>
|
||||
<Box className="session-info">
|
||||
<Box className="main-row-content">
|
||||
<div className="username">
|
||||
{displayName} <span>{status}</span>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Box className="additional-row-content">
|
||||
<div className="session-platform">
|
||||
{platform}, <span>{browser}</span>
|
||||
</div>
|
||||
<div className="session-location">
|
||||
{country}, <span>{city}</span>
|
||||
</div>
|
||||
<div className="session-ip">{ip}</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>,
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledRowContent sectionWidth={sectionWidth}>
|
||||
{contentData}
|
||||
</StyledRowContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default SessionsRowContent;
|
||||
@ -1,4 +1,53 @@
|
||||
const RowView = () => {
|
||||
return <div>RowView</div>;
|
||||
import { inject, observer } from "mobx-react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import RowContainer from "@docspace/components/row-container";
|
||||
import SessionsRow from "./SessionsRow";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin 0px 0px 20px;
|
||||
`;
|
||||
|
||||
const RowView = (props) => {
|
||||
const { t, sectionWidth, sessionsData } = props;
|
||||
|
||||
return (
|
||||
sessionsData.length !== 0 && (
|
||||
<StyledRowContainer
|
||||
className="people-row-container"
|
||||
useReactWindow={false}
|
||||
itemHeight={58}
|
||||
itemCount={6}
|
||||
filesLength={sessionsData.length}
|
||||
>
|
||||
{sessionsData.map((session) => (
|
||||
<SessionsRow
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
data={session}
|
||||
key={session.id}
|
||||
avatar={session.avatar}
|
||||
displayName={session.displayName}
|
||||
status={session.status}
|
||||
browser={session.browser}
|
||||
platform={session.platform}
|
||||
country={session.country}
|
||||
city={session.city}
|
||||
ip={session.ip}
|
||||
userId={session.userId}
|
||||
// isChecked={isAccountChecked(data.key, checkedAccountType)}
|
||||
// toggleAccount={() => handleToggle(data)}
|
||||
/>
|
||||
))}
|
||||
</StyledRowContainer>
|
||||
)
|
||||
);
|
||||
};
|
||||
export default RowView;
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { id: userId } = auth.userStore.user;
|
||||
|
||||
return {
|
||||
userId,
|
||||
};
|
||||
})(observer(RowView));
|
||||
|
||||
@ -77,21 +77,6 @@ const allSessionsData = [
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user