2022-07-11 13:18:35 +00:00
|
|
|
import React from "react";
|
2022-07-12 08:19:31 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2022-07-11 13:18:35 +00:00
|
|
|
import { inject, observer } from "mobx-react";
|
2022-07-11 20:10:44 +00:00
|
|
|
import { withRouter } from "react-router";
|
|
|
|
import { useTranslation } from "react-i18next";
|
2022-07-11 13:18:35 +00:00
|
|
|
import Avatar from "@appserver/components/avatar";
|
|
|
|
import Text from "@appserver/components/text";
|
|
|
|
import ContextMenuButton from "@appserver/components/context-menu-button";
|
2022-07-11 20:10:44 +00:00
|
|
|
import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
|
2022-07-12 08:19:31 +00:00
|
|
|
import { isTablet } from "@appserver/components/utils/device";
|
2022-07-12 08:35:06 +00:00
|
|
|
import { combineUrl } from "@appserver/common/utils";
|
|
|
|
import { AppServerConfig } from "@appserver/common/constants";
|
2022-07-18 13:00:44 +00:00
|
|
|
import { StyledArticleProfile } from "../styled-article";
|
2022-07-12 08:35:06 +00:00
|
|
|
|
|
|
|
const { proxyURL } = AppServerConfig;
|
|
|
|
|
|
|
|
const PROXY_HOMEPAGE_URL = combineUrl(proxyURL, "/");
|
|
|
|
const PROFILE_SELF_URL = combineUrl(
|
|
|
|
PROXY_HOMEPAGE_URL,
|
|
|
|
"/products/people/view/@self"
|
|
|
|
);
|
|
|
|
const PROFILE_MY_URL = combineUrl(PROXY_HOMEPAGE_URL, "/my");
|
2022-07-11 13:18:35 +00:00
|
|
|
|
2022-07-13 11:03:08 +00:00
|
|
|
const ArticleProfile = (props) => {
|
2022-07-11 20:10:44 +00:00
|
|
|
const {
|
|
|
|
history,
|
|
|
|
user,
|
|
|
|
isPersonal,
|
|
|
|
modules,
|
|
|
|
settingsModule,
|
|
|
|
currentProductId,
|
|
|
|
debugInfo,
|
|
|
|
peopleAvailable,
|
2022-07-12 08:19:31 +00:00
|
|
|
showText,
|
2022-07-12 10:59:37 +00:00
|
|
|
setHotkeyPanelVisible,
|
2022-07-12 11:01:31 +00:00
|
|
|
logout,
|
2022-07-18 11:09:29 +00:00
|
|
|
setIsAboutDialogVisible,
|
2022-07-11 20:10:44 +00:00
|
|
|
} = props;
|
|
|
|
const { t } = useTranslation("Common");
|
2022-07-11 13:18:35 +00:00
|
|
|
|
|
|
|
const getUserRole = (user) => {
|
|
|
|
let isModuleAdmin = user.listAdminModules && user.listAdminModules.length;
|
|
|
|
|
|
|
|
if (user.isOwner) return "owner";
|
|
|
|
if (user.isAdmin || isModuleAdmin) return "admin";
|
|
|
|
if (user.isVisitor) return "guest";
|
|
|
|
return "user";
|
|
|
|
};
|
|
|
|
|
2022-07-11 20:10:44 +00:00
|
|
|
const onProfileClick = () => {
|
2022-07-12 08:35:06 +00:00
|
|
|
peopleAvailable
|
|
|
|
? history.push(PROFILE_SELF_URL)
|
|
|
|
: history.push(PROFILE_MY_URL);
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onSettingsClick = () => {
|
2022-07-12 08:35:06 +00:00
|
|
|
const settingsUrl =
|
|
|
|
settingsModule && combineUrl(PROXY_HOMEPAGE_URL, settingsModule.link);
|
|
|
|
history.push(settingsUrl);
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onHotkeysClick = () => {
|
2022-07-12 10:59:37 +00:00
|
|
|
setHotkeyPanelVisible(true);
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onAboutClick = () => {
|
2022-07-18 11:09:29 +00:00
|
|
|
setIsAboutDialogVisible(true);
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onLogoutClick = () => {
|
2022-07-12 11:01:31 +00:00
|
|
|
logout && logout();
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const onDebugClick = () => {
|
|
|
|
console.log("onDebugClick");
|
|
|
|
};
|
|
|
|
|
2022-07-11 13:18:35 +00:00
|
|
|
const getContextOptions = () => {
|
2022-07-11 20:10:44 +00:00
|
|
|
const settings =
|
|
|
|
settingsModule && !isPersonal
|
|
|
|
? {
|
|
|
|
key: "SettingsBtn",
|
|
|
|
icon: "/static/images/catalog.settings.react.svg",
|
|
|
|
label: t("Common:Settings"),
|
|
|
|
onClick: onSettingsClick,
|
|
|
|
}
|
|
|
|
: null;
|
|
|
|
|
|
|
|
let hotkeys = null;
|
|
|
|
if (modules) {
|
|
|
|
const moduleIndex = modules.findIndex((m) => m.appName === "files");
|
|
|
|
|
|
|
|
if (
|
|
|
|
moduleIndex !== -1 &&
|
|
|
|
modules[moduleIndex].id === currentProductId &&
|
|
|
|
!isMobile
|
|
|
|
) {
|
|
|
|
hotkeys = {
|
|
|
|
key: "HotkeysBtn",
|
|
|
|
icon: "/static/images/hotkeys.react.svg",
|
|
|
|
label: t("Common:Hotkeys"),
|
|
|
|
onClick: onHotkeysClick,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const actions = [
|
|
|
|
{
|
|
|
|
key: "ProfileBtn",
|
|
|
|
icon: "/static/images/profile.react.svg",
|
|
|
|
label: t("Common:Profile"),
|
|
|
|
onClick: onProfileClick,
|
|
|
|
},
|
|
|
|
settings,
|
|
|
|
hotkeys,
|
|
|
|
{
|
|
|
|
key: "AboutBtn",
|
|
|
|
icon: "/static/images/info.react.svg",
|
|
|
|
label: t("AboutCompanyTitle"),
|
|
|
|
onClick: onAboutClick,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
isSeparator: true,
|
|
|
|
key: "separator",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "LogoutBtn",
|
|
|
|
icon: "/static/images/logout.react.svg",
|
|
|
|
label: t("LogoutButton"),
|
|
|
|
onClick: onLogoutClick,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
if (debugInfo) {
|
|
|
|
actions.splice(3, 0, {
|
|
|
|
key: "DebugBtn",
|
|
|
|
label: "Debug Info",
|
|
|
|
onClick: onDebugClick,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return actions;
|
2022-07-11 13:18:35 +00:00
|
|
|
};
|
|
|
|
|
2022-07-12 08:19:31 +00:00
|
|
|
const tablet = isTablet();
|
|
|
|
const avatarSize = tablet ? "min" : "base";
|
|
|
|
const userRole = getUserRole(user);
|
|
|
|
|
2022-07-11 13:18:35 +00:00
|
|
|
return (
|
2022-07-18 13:00:44 +00:00
|
|
|
<StyledArticleProfile showText={showText} tablet={tablet}>
|
2022-07-11 13:18:35 +00:00
|
|
|
<Avatar
|
2022-07-12 08:19:31 +00:00
|
|
|
size={avatarSize}
|
2022-07-11 13:18:35 +00:00
|
|
|
role={userRole}
|
|
|
|
source={user.avatar}
|
|
|
|
userName={user.displayName}
|
|
|
|
/>
|
2022-07-12 08:19:31 +00:00
|
|
|
{(!tablet || showText) && (
|
|
|
|
<>
|
2022-07-12 11:09:15 +00:00
|
|
|
<Text fontSize="12px" fontWeight={600} noSelect>
|
2022-07-12 08:19:31 +00:00
|
|
|
{user.displayName}
|
|
|
|
</Text>
|
|
|
|
<div className="option-button">
|
|
|
|
<ContextMenuButton
|
|
|
|
zIndex={402}
|
|
|
|
directionX="left"
|
|
|
|
directionY="top"
|
2022-07-13 11:03:08 +00:00
|
|
|
iconName="/static/images/vertical-dots.react.svg"
|
2022-07-12 08:19:31 +00:00
|
|
|
size={15}
|
|
|
|
isFill
|
|
|
|
getData={getContextOptions}
|
|
|
|
isDisabled={false}
|
|
|
|
usePortal={true}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)}
|
2022-07-18 13:00:44 +00:00
|
|
|
</StyledArticleProfile>
|
2022-07-11 13:18:35 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-07-11 20:10:44 +00:00
|
|
|
export default withRouter(
|
2022-07-18 11:09:29 +00:00
|
|
|
inject(({ auth, aboutDialogStore }) => {
|
2022-07-12 11:01:31 +00:00
|
|
|
const { userStore, settingsStore, logout } = auth;
|
2022-07-11 20:10:44 +00:00
|
|
|
const { user } = userStore;
|
2022-07-12 10:59:37 +00:00
|
|
|
const {
|
|
|
|
personal: isPersonal,
|
|
|
|
currentProductId,
|
|
|
|
debugInfo,
|
|
|
|
setHotkeyPanelVisible,
|
|
|
|
} = settingsStore;
|
2022-07-11 20:10:44 +00:00
|
|
|
const modules = auth.availableModules;
|
|
|
|
const settingsModule = modules.find((module) => module.id === "settings");
|
2022-07-18 11:09:29 +00:00
|
|
|
const { setIsAboutDialogVisible } = aboutDialogStore;
|
2022-07-11 13:18:35 +00:00
|
|
|
|
2022-07-11 20:10:44 +00:00
|
|
|
return {
|
|
|
|
user,
|
|
|
|
isPersonal,
|
|
|
|
modules,
|
|
|
|
settingsModule,
|
|
|
|
currentProductId,
|
|
|
|
peopleAvailable: modules.some((m) => m.appName === "people"),
|
|
|
|
debugInfo,
|
2022-07-12 10:59:37 +00:00
|
|
|
setHotkeyPanelVisible,
|
2022-07-12 11:01:31 +00:00
|
|
|
logout,
|
2022-07-18 11:09:29 +00:00
|
|
|
setIsAboutDialogVisible,
|
2022-07-11 20:10:44 +00:00
|
|
|
};
|
2022-07-13 11:03:08 +00:00
|
|
|
})(observer(ArticleProfile))
|
2022-07-11 20:10:44 +00:00
|
|
|
);
|