diff --git a/react/admin-panel/src/elements/profile-link.jsx b/react/admin-panel/src/elements/profile-link.jsx new file mode 100644 index 0000000..659cc6c --- /dev/null +++ b/react/admin-panel/src/elements/profile-link.jsx @@ -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 + + {text ? text : (user.fullName || user.name)} + +} \ No newline at end of file diff --git a/react/admin-panel/src/elements/sidebar.js b/react/admin-panel/src/elements/sidebar.js index 44afe9d..b6a6a0c 100644 --- a/react/admin-panel/src/elements/sidebar.js +++ b/react/admin-panel/src/elements/sidebar.js @@ -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) { {L("account.logged_in_as")}: - - - {drawerOpen && {api.user?.name || L("account.not_logged_in")}} - + navigate("/admin/profile")} /> diff --git a/react/admin-panel/src/views/user/user-list.js b/react/admin-panel/src/views/user/user-list.js index 6678853..da4444a 100644 --- a/react/admin-panel/src/views/user/user-list.js +++ b/react/admin-panel/src/views/user/user-list.js @@ -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 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, diff --git a/react/shared/elements/profile-picture.js b/react/shared/elements/profile-picture.js index b96a74f..46af72d 100644 --- a/react/shared/elements/profile-picture.js +++ b/react/shared/elements/profile-picture.js @@ -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