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