profile link

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 <Box display={"grid"} sx={newSx} gridTemplateColumns={size + "px auto"} alignItems={"center"} {...other}>
+        <ProfilePicture user={user} size={size} />
+        {text ? text : (user.fullName || user.name)}
+    </Box>
+}

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) {
                 <Divider/>
                 <ListItem sx={{display: 'block'}}>
                     <Box sx={{opacity: drawerOpen ? 1 : 0}}>{L("account.logged_in_as")}:</Box>
-                    <ProfileLink to={"/admin/profile"}>
+                    <ProfileLink user={api.user} size={30} sx={{marginTop: 1, gridGap: 16, fontWeight: "bold" }}
-                        <ProfilePicture user={api.user}/>
+                        onClick={() => navigate("/admin/profile")} />
-                        {drawerOpen && <span>{api.user?.name || L("account.not_logged_in")}</span>}
-                    </ProfileLink>
                 </ListItem>
                 <Divider/>
                 <List>

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 <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,

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 <PictureBox src={`/img/uploads/user/${user.id}/${user.profilePicture}`} sx={sx}
                     alt={L("account.profile_picture_of") + " " + (user.fullName || user.name)}