profile link
This commit is contained in:
parent
59818eb321
commit
675025800b
20
react/admin-panel/src/elements/profile-link.jsx
Normal file
20
react/admin-panel/src/elements/profile-link.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
import ProfilePicture from "shared/elements/profile-picture";
|
||||
import {Box} from "@mui/material";
|
||||
|
||||
export default function ProfileLink(props) {
|
||||
const {size, user, text, sx, ...other} = props;
|
||||
|
||||
let newSx = sx ? {...sx} : {};
|
||||
if (!newSx.hasOwnProperty("gridGap")) {
|
||||
newSx.gridGap = 8;
|
||||
}
|
||||
|
||||
if (props.onClick && !newSx.hasOwnProperty("cursor")) {
|
||||
newSx.cursor = "pointer";
|
||||
}
|
||||
|
||||
return <Box display={"grid"} sx={newSx} gridTemplateColumns={size + "px auto"} alignItems={"center"} {...other}>
|
||||
<ProfilePicture user={user} size={size} />
|
||||
{text ? text : (user.fullName || user.name)}
|
||||
</Box>
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {Link, useNavigate} from "react-router-dom";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import {LocaleContext} from "shared/locale";
|
||||
import {
|
||||
Box, Divider,
|
||||
@ -13,26 +13,10 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import ProfilePicture from "shared/elements/profile-picture";
|
||||
import {Dns, Groups, People, QueryStats, Security, Settings, Route, ArrowBack, Translate} from "@mui/icons-material";
|
||||
import useCurrentPath from "shared/hooks/current-path";
|
||||
import ProfileLink from "./profile-link";
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const ProfileLink = styled(Link)((props) => ({
|
||||
"& > div": {
|
||||
width: 30,
|
||||
height: 30,
|
||||
justifySelf: "center",
|
||||
},
|
||||
color: "inherit",
|
||||
fontWeight: "bold",
|
||||
marginTop: props.theme.spacing(1),
|
||||
display: "grid",
|
||||
gridTemplateColumns: "35px auto",
|
||||
"& > span": {
|
||||
alignSelf: "center",
|
||||
marginLeft: props.theme.spacing(1)
|
||||
},
|
||||
}));
|
||||
|
||||
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -212,10 +196,8 @@ export default function Sidebar(props) {
|
||||
<Divider/>
|
||||
<ListItem sx={{display: 'block'}}>
|
||||
<Box sx={{opacity: drawerOpen ? 1 : 0}}>{L("account.logged_in_as")}:</Box>
|
||||
<ProfileLink to={"/admin/profile"}>
|
||||
<ProfilePicture user={api.user}/>
|
||||
{drawerOpen && <span>{api.user?.name || L("account.not_logged_in")}</span>}
|
||||
</ProfileLink>
|
||||
<ProfileLink user={api.user} size={30} sx={{marginTop: 1, gridGap: 16, fontWeight: "bold" }}
|
||||
onClick={() => navigate("/admin/profile")} />
|
||||
</ListItem>
|
||||
<Divider/>
|
||||
<List>
|
||||
|
@ -9,10 +9,12 @@ import {
|
||||
NumericColumn,
|
||||
StringColumn
|
||||
} from "shared/elements/data-table";
|
||||
import {Chip} from "@mui/material";
|
||||
import {Box, Chip} from "@mui/material";
|
||||
import {Edit, Add} from "@mui/icons-material";
|
||||
import usePagination from "shared/hooks/pagination";
|
||||
import ViewContent from "../../elements/view-content";
|
||||
import ProfilePicture from "shared/elements/profile-picture";
|
||||
import ProfileLink from "../../elements/profile-link";
|
||||
|
||||
export default function UserListView(props) {
|
||||
|
||||
@ -55,9 +57,18 @@ export default function UserListView(props) {
|
||||
return column;
|
||||
})();
|
||||
|
||||
const nameColumn = (() => {
|
||||
let column = new DataColumn(L("account.username"), "name");
|
||||
column.renderData = (L, entry) => {
|
||||
return <ProfileLink user={entry} text={entry.name} size={30}
|
||||
onClick={() => navigate("/admin/user/" + entry.id)}/>
|
||||
}
|
||||
return column;
|
||||
})();
|
||||
|
||||
const columnDefinitions = [
|
||||
new NumericColumn(L("general.id"), "id"),
|
||||
new StringColumn(L("account.username"), "name"),
|
||||
nameColumn,
|
||||
new StringColumn(L("account.full_name"), "fullName"),
|
||||
new StringColumn(L("account.email"), "email"),
|
||||
groupColumn,
|
||||
|
@ -24,7 +24,7 @@ const PicturePlaceholderBox = styled(Box)((props) => ({
|
||||
|
||||
export default function ProfilePicture(props) {
|
||||
|
||||
const {user, ...other} = props;
|
||||
const {user, size, ...other} = props;
|
||||
const {translate: L} = useContext(LocaleContext);
|
||||
|
||||
const initials = (user.fullName || user.name)
|
||||
@ -35,6 +35,11 @@ export default function ProfilePicture(props) {
|
||||
const isClickable = !!other.onClick;
|
||||
const sx = isClickable ? {cursor: "pointer"} : {};
|
||||
|
||||
if (size) {
|
||||
sx.width = size;
|
||||
sx.height = size;
|
||||
}
|
||||
|
||||
if (user.profilePicture) {
|
||||
return <PictureBox src={`/img/uploads/user/${user.id}/${user.profilePicture}`} sx={sx}
|
||||
alt={L("account.profile_picture_of") + " " + (user.fullName || user.name)}
|
||||
|
Loading…
Reference in New Issue
Block a user