refactoring
This commit is contained in:
parent
1d11ad3eb5
commit
da34b776c4
@ -11,74 +11,85 @@ const StyledLastSessionBlock = styled.div`
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
|
||||
.session-info-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 10px 0px;
|
||||
}
|
||||
|
||||
.session-info-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.session-info-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.session-info-left-container {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 24px;
|
||||
`}
|
||||
p {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 0px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 0px;
|
||||
`}
|
||||
}
|
||||
.session-info-label {
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 24px;
|
||||
padding-right: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 24px;
|
||||
padding-left: 0px;
|
||||
`}
|
||||
}
|
||||
|
||||
.session-info-value {
|
||||
justify-self: start;
|
||||
font-weight: 600;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.session-info-right-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
p {
|
||||
font-weight: 600;
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.online {
|
||||
font-weight: 600;
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
|
||||
::first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const LastSessionBlock = (props) => {
|
||||
const { t, sessionData } = props;
|
||||
const { status, platform, browser, ip, country, city } = sessionData;
|
||||
const { t, sessionStatus, userData } = props;
|
||||
const { sessions } = userData;
|
||||
const { platform, browser, ip, city, country } = sessions;
|
||||
|
||||
const isOnline = status === "Online";
|
||||
const isOnline = sessionStatus === "online";
|
||||
|
||||
return (
|
||||
<StyledLastSessionBlock>
|
||||
<Text className="subtitle">{t("Profile:LastSession")}</Text>
|
||||
<Box className="session-info-wrapper">
|
||||
<div className="session-info-left-container">
|
||||
<Text>{t("Common:Active")}</Text>
|
||||
<Text>{t("Common:Platform")}</Text>
|
||||
<Text>{t("Common:Browser")}</Text>
|
||||
<Text>{t("Common:Location")}</Text>
|
||||
<div className="session-info-row">
|
||||
<Text className="session-info-label">{t("Common:Active")}</Text>
|
||||
<Text className={isOnline ? "online" : "session-info-value"}>
|
||||
{sessionStatus}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="session-info-right-container">
|
||||
<Text className={isOnline && "online"}>{status}</Text>
|
||||
<Text>{platform}</Text>
|
||||
<Text>{browser}</Text>
|
||||
<Text>
|
||||
<div className="session-info-row">
|
||||
<Text className="session-info-label">{t("Common:Platform")}</Text>
|
||||
<Text className="session-info-value">{platform}</Text>
|
||||
</div>
|
||||
<div className="session-info-row">
|
||||
<Text className="session-info-label">{t("Common:Browser")}</Text>
|
||||
<Text className="session-info-value">
|
||||
{browser?.split(".")[0] ?? ""}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="session-info-row">
|
||||
<Text className="session-info-label">{t("Common:Location")}</Text>
|
||||
<Text className="session-info-value" truncate>
|
||||
{(country || city) && (
|
||||
<>
|
||||
{country}
|
||||
|
@ -45,17 +45,19 @@ const UserInfoBlock = (props) => {
|
||||
setDisplayName,
|
||||
} = props;
|
||||
|
||||
const { avatar, displayName, isAdmin, isOwner } = userData;
|
||||
const role = isOwner ? "owner" : isAdmin ? "admin" : null;
|
||||
const { avatar, displayName, isAdmin, isOwner, isRoomAdmin, isCollaborator } =
|
||||
userData;
|
||||
|
||||
const getUserType = () => {
|
||||
if (userData.isOwner) return t("Common:Owner");
|
||||
if (userData.isAdmin) return t("Common:DocspaceAdmin");
|
||||
if (userData.isRoomAdmin) return t("Common:RoomAdmin");
|
||||
if (userData.isCollaborator) return t("Common:PowerUser");
|
||||
if (isOwner) return t("Common:Owner");
|
||||
if (isAdmin) return t("Common:DocspaceAdmin");
|
||||
if (isRoomAdmin) return t("Common:RoomAdmin");
|
||||
if (isCollaborator) return t("Common:PowerUser");
|
||||
return t("Common:User");
|
||||
};
|
||||
|
||||
const role = isOwner ? "owner" : isAdmin ? "admin" : null;
|
||||
|
||||
const onClickLogout = () => {
|
||||
setLogoutAllDialogVisible(true);
|
||||
setDisplayName(displayName);
|
||||
|
@ -83,12 +83,14 @@ const UserSessionsPanel = (props) => {
|
||||
|
||||
export default inject(({ setup, dialogsStore }) => {
|
||||
const { userSessionsPanelVisible, setUserSessionPanelVisible } = dialogsStore;
|
||||
|
||||
const {
|
||||
setLogoutAllDialogVisible,
|
||||
setDisableDialogVisible,
|
||||
userModalData,
|
||||
sessionModalData,
|
||||
setDisplayName,
|
||||
sessionStatus,
|
||||
} = setup;
|
||||
|
||||
return {
|
||||
@ -99,6 +101,7 @@ export default inject(({ setup, dialogsStore }) => {
|
||||
visible: userSessionsPanelVisible,
|
||||
setVisible: setUserSessionPanelVisible,
|
||||
setDisplayName,
|
||||
sessionStatus,
|
||||
};
|
||||
})(
|
||||
withTranslation(["Settings", "Profile", "Common"])(
|
||||
|
@ -167,12 +167,11 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
|
||||
item={item}
|
||||
hideColumns={hideColumns}
|
||||
displayName={item.displayName}
|
||||
// status={item.status}
|
||||
// browser={item.browser}
|
||||
// platform={item.platform}
|
||||
// country={item.country}
|
||||
// city={item.city}
|
||||
// ip={item.ip}
|
||||
sessionStatus={item.status}
|
||||
connections={item.connections}
|
||||
sessions={item.sessions}
|
||||
isOwner={item.isOwner}
|
||||
isAdmin={item.isAdmin}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
|
@ -79,8 +79,7 @@ const Sessions = ({
|
||||
viewAs,
|
||||
setViewAs,
|
||||
currentDeviceType,
|
||||
allSessions,
|
||||
setAllSessions,
|
||||
setSessions,
|
||||
clearSelection,
|
||||
disableDialogVisible,
|
||||
logoutDialogVisible,
|
||||
@ -93,6 +92,9 @@ const Sessions = ({
|
||||
socketHelper,
|
||||
getUserSessionsById,
|
||||
displayName,
|
||||
allSessions,
|
||||
setAllSessions,
|
||||
setSessionsFromSocket,
|
||||
}) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
@ -107,7 +109,7 @@ const Sessions = ({
|
||||
});
|
||||
|
||||
socketHelper.on("statuses-in-portal", (data) => {
|
||||
console.log(data);
|
||||
setSessionsFromSocket(data);
|
||||
});
|
||||
}, [socketHelper]);
|
||||
|
||||
@ -118,7 +120,8 @@ const Sessions = ({
|
||||
getUserSessionsById(user.id),
|
||||
);
|
||||
const sessions = await Promise.all(sessionsPromises);
|
||||
setAllSessions([...sessions]);
|
||||
setSessions(sessions);
|
||||
setAllSessions();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
@ -137,6 +140,8 @@ const Sessions = ({
|
||||
currentDeviceType,
|
||||
});
|
||||
|
||||
console.log(JSON.parse(JSON.stringify(allSessions)));
|
||||
|
||||
const onClickRemoveAllSessions = () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
@ -231,8 +236,13 @@ const Sessions = ({
|
||||
export default inject(({ settingsStore, setup, peopleStore }) => {
|
||||
const { socketHelper, currentDeviceType } = settingsStore;
|
||||
const { getUsersList } = peopleStore.usersStore;
|
||||
const { clearSelection, allSessions, setAllSessions, setAllConnections } =
|
||||
peopleStore.selectionStore;
|
||||
const {
|
||||
clearSelection,
|
||||
allSessions,
|
||||
setSessions,
|
||||
setAllSessions,
|
||||
setSessionsFromSocket,
|
||||
} = peopleStore.selectionStore;
|
||||
|
||||
const {
|
||||
viewAs,
|
||||
@ -253,7 +263,7 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
|
||||
viewAs,
|
||||
setViewAs,
|
||||
allSessions,
|
||||
setAllSessions,
|
||||
setSessions,
|
||||
clearSelection,
|
||||
disableDialogVisible,
|
||||
logoutDialogVisible,
|
||||
@ -264,9 +274,10 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
|
||||
platformModalData,
|
||||
socketHelper,
|
||||
getUsersList,
|
||||
setAllConnections,
|
||||
getUserSessionsById,
|
||||
displayName,
|
||||
setAllSessions,
|
||||
setSessionsFromSocket,
|
||||
};
|
||||
})(
|
||||
withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(
|
||||
|
@ -31,7 +31,8 @@ import { getUserStatus } from "../helpers/people-helpers";
|
||||
class SelectionStore {
|
||||
peopleStore = null;
|
||||
allSessions = [];
|
||||
allConnections = [];
|
||||
sessions = [];
|
||||
sessionsFromSocket = [];
|
||||
selection = [];
|
||||
selectionUsersRights = {
|
||||
isVisitor: 0,
|
||||
@ -260,7 +261,7 @@ class SelectionStore {
|
||||
setSelected = (selected, isSessionsPage) => {
|
||||
this.bufferSelection = null;
|
||||
this.selected = selected;
|
||||
const sessions = this.allSessions;
|
||||
const sessions = this.sessions;
|
||||
const list = this.peopleStore.usersStore.peopleList;
|
||||
|
||||
if (selected !== "none" && selected !== "close") {
|
||||
@ -425,22 +426,35 @@ class SelectionStore {
|
||||
|
||||
get isHeaderIndeterminate() {
|
||||
return (
|
||||
this.isHeaderVisible && this.selection.length !== this.allSessions.length
|
||||
this.isHeaderVisible && this.selection.length !== this.sessions.length
|
||||
);
|
||||
}
|
||||
|
||||
get isHeaderChecked() {
|
||||
return (
|
||||
this.isHeaderVisible && this.selection.length === this.allSessions.length
|
||||
this.isHeaderVisible && this.selection.length === this.sessions.length
|
||||
);
|
||||
}
|
||||
|
||||
setAllSessions = (sessions) => {
|
||||
this.allSessions = sessions;
|
||||
setSessions = (sessions) => {
|
||||
this.sessions = sessions;
|
||||
};
|
||||
|
||||
setAllConnections = (connections) => {
|
||||
this.allConnections = connections;
|
||||
setSessionsFromSocket = (data) => {
|
||||
this.sessionsFromSocket = data;
|
||||
};
|
||||
|
||||
setAllSessions = () => {
|
||||
this.allSessions = this.sessions.map((session) => {
|
||||
const socketData = this.sessionsFromSocket.find(
|
||||
(user) => user.id === session.id,
|
||||
);
|
||||
return {
|
||||
...session,
|
||||
status: socketData ? socketData.status : "offline",
|
||||
sessions: socketData ? socketData.sessions.slice(-1)[0] : [],
|
||||
};
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -107,6 +107,7 @@ class SettingsSetupStore {
|
||||
|
||||
securityLifetime = [];
|
||||
|
||||
sessionStatus = "";
|
||||
displayName = "";
|
||||
sessionsIsInit = false;
|
||||
sessions = [];
|
||||
@ -616,6 +617,10 @@ class SettingsSetupStore {
|
||||
setDisplayName = (name) => {
|
||||
this.displayName = name;
|
||||
};
|
||||
|
||||
setSessionStatus = (status) => {
|
||||
this.sessionStatus = status;
|
||||
};
|
||||
}
|
||||
|
||||
export default SettingsSetupStore;
|
||||
|
Loading…
Reference in New Issue
Block a user