root
408 lines
14 KiB
React
408 lines
14 KiB
React
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||
import axios from "axios";
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardBody,
|
||
Typography,
|
||
Chip,
|
||
Button,
|
||
Select,
|
||
Option,
|
||
Input
|
||
} from "@material-tailwind/react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { PaginationControls, usePage } from "@/components/PageProvider.jsx";
|
||
import { useMaintenance } from "@/components/MaintenanceProvider.jsx";
|
||
import { useToast } from "@/components/ToastProvider.jsx";
|
||
|
||
const normalizeUserGroups = (rawGroups) => {
|
||
if (!Array.isArray(rawGroups)) {
|
||
return [];
|
||
}
|
||
return rawGroups
|
||
.map((group) => {
|
||
if (group && typeof group === "object") {
|
||
const id = Number(group.id);
|
||
const name = typeof group.name === "string" ? group.name : "";
|
||
if (!name) {
|
||
return null;
|
||
}
|
||
return {
|
||
id: Number.isFinite(id) ? id : null,
|
||
name
|
||
};
|
||
}
|
||
if (typeof group === "string") {
|
||
const name = group.trim();
|
||
return name ? { id: null, name } : null;
|
||
}
|
||
return null;
|
||
})
|
||
.filter(Boolean);
|
||
};
|
||
|
||
export function Users() {
|
||
const [users, setUsers] = useState([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [searchQuery, setSearchQuery] = useState("");
|
||
|
||
const { showToast } = useToast();
|
||
const { maintenance } = useMaintenance();
|
||
const maintenanceActive = Boolean(maintenance?.active);
|
||
const navigate = useNavigate();
|
||
const noop = useCallback(() => { }, []);
|
||
|
||
const {
|
||
page,
|
||
perPage,
|
||
perPageOptions,
|
||
perPageIsAll,
|
||
handlePerPageChange,
|
||
setPage,
|
||
setTotals,
|
||
resetPagination
|
||
} = usePage();
|
||
|
||
useEffect(() => () => resetPagination(), [resetPagination]);
|
||
|
||
const fetchUsers = useCallback(async () => {
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
const response = await axios.get("/api/users");
|
||
const items = Array.isArray(response.data?.items) ? response.data.items : [];
|
||
const sorted = items
|
||
.map((item) => ({
|
||
id: item.id,
|
||
username: item.username || "",
|
||
email: item.email || "",
|
||
isActive: Boolean(item.isActive),
|
||
avatarColor: typeof item.avatarColor === "string" ? item.avatarColor.trim() : null,
|
||
lastLogin: item.lastLogin || null,
|
||
createdAt: item.createdAt || null,
|
||
updatedAt: item.updatedAt || null,
|
||
groups: normalizeUserGroups(item.groups)
|
||
}))
|
||
.sort((a, b) => a.username.localeCompare(b.username, "de-DE"));
|
||
setUsers(sorted);
|
||
} catch (err) {
|
||
const message = err.response?.data?.error || err.message || "Unbekannter Fehler";
|
||
setError(message);
|
||
showToast({
|
||
variant: "error",
|
||
title: "Benutzer konnten nicht geladen werden",
|
||
description: message
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [showToast]);
|
||
|
||
useEffect(() => {
|
||
fetchUsers();
|
||
}, [fetchUsers]);
|
||
|
||
const handleRefresh = useCallback(() => {
|
||
fetchUsers();
|
||
}, [fetchUsers]);
|
||
|
||
const handleSearchChange = useCallback((event) => {
|
||
setSearchQuery(event.target.value);
|
||
}, []);
|
||
|
||
const handleClearSearch = useCallback(() => {
|
||
setSearchQuery("");
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (page !== 1) {
|
||
setPage(1);
|
||
}
|
||
}, [searchQuery, page, setPage]);
|
||
|
||
const filteredUsers = useMemo(() => {
|
||
const query = searchQuery.trim().toLowerCase();
|
||
if (!query) {
|
||
return users;
|
||
}
|
||
return users.filter((user) => {
|
||
const haystacks = [
|
||
user.username,
|
||
user.email,
|
||
...user.groups.map((group) => group.name)
|
||
].map((value) => String(value || "").toLowerCase());
|
||
return haystacks.some((value) => value.includes(query));
|
||
});
|
||
}, [users, searchQuery]);
|
||
|
||
const perPageNumber = useMemo(() => {
|
||
if (perPageIsAll) {
|
||
return null;
|
||
}
|
||
const numeric = Number(perPage);
|
||
return Number.isFinite(numeric) && numeric > 0 ? numeric : null;
|
||
}, [perPage, perPageIsAll]);
|
||
|
||
const paginatedUsers = useMemo(() => {
|
||
if (perPageIsAll || !perPageNumber) {
|
||
return filteredUsers;
|
||
}
|
||
const startIndex = (page - 1) * perPageNumber;
|
||
return filteredUsers.slice(startIndex, startIndex + perPageNumber);
|
||
}, [filteredUsers, page, perPageIsAll, perPageNumber]);
|
||
|
||
const filteredCount = filteredUsers.length;
|
||
const visibleCount = paginatedUsers.length;
|
||
|
||
useEffect(() => {
|
||
if (perPageIsAll) {
|
||
setTotals(filteredCount, filteredCount);
|
||
if (page !== 1) {
|
||
setPage(1);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const numeric = Number(perPage);
|
||
if (!Number.isFinite(numeric) || numeric <= 0) {
|
||
setTotals(filteredCount, filteredCount);
|
||
return;
|
||
}
|
||
|
||
const maxPages = Math.max(1, Math.ceil(filteredCount / numeric));
|
||
if (page > maxPages) {
|
||
setPage(maxPages);
|
||
return;
|
||
}
|
||
|
||
setTotals(filteredCount, visibleCount);
|
||
}, [filteredCount, visibleCount, page, perPage, perPageIsAll, setPage, setTotals]);
|
||
|
||
const formatTimestamp = useCallback((value) => {
|
||
if (!value) {
|
||
return "–";
|
||
}
|
||
const normalized = typeof value === "string" ? value.replace(" ", "T") : value;
|
||
const parsed = new Date(normalized);
|
||
if (Number.isNaN(parsed.getTime())) {
|
||
return value;
|
||
}
|
||
return new Intl.DateTimeFormat("de-DE", {
|
||
dateStyle: "short",
|
||
timeStyle: "short"
|
||
}).format(parsed);
|
||
}, []);
|
||
|
||
return (
|
||
<div className="mt-12">
|
||
<Card>
|
||
<CardHeader variant="gradient" color="gray" className="mb-5 p-4">
|
||
<Typography
|
||
variant="h6"
|
||
color="white"
|
||
>
|
||
<span>Benutzerverwaltung</span>
|
||
</Typography>
|
||
</CardHeader>
|
||
<CardBody className="pt-0">
|
||
{maintenanceActive && (
|
||
<div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
|
||
Wartungsmodus aktiv – Änderungen sind deaktiviert. Die Liste kann dennoch angezeigt werden.
|
||
</div>
|
||
)}
|
||
|
||
<div className="mb-8">
|
||
|
||
<div className="flex flex-wrap gap-2"> {/* <div className="flex flex-col items-stretch gap-3 md:flex-row md:items-center">
|
||
<div>
|
||
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-blue-gray-400">
|
||
Einträge pro Seite
|
||
</label>
|
||
<select
|
||
value={perPage}
|
||
onChange={handlePerPageChange}
|
||
className="w-full rounded-lg border border-blue-gray-100 px-3 py-2 text-sm text-blue-gray-700 shadow-sm focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200 md:w-40"
|
||
>
|
||
{perPageOptions.map(({ value, label }) => (
|
||
<option key={value} value={value}>
|
||
{label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<Button
|
||
variant="outlined"
|
||
color="blue"
|
||
onClick={handleRefresh}
|
||
disabled={loading}
|
||
className="whitespace-nowrap"
|
||
>
|
||
{loading ? "Lädt ..." : "Aktualisieren"}
|
||
</Button>
|
||
</div> */}
|
||
{/* <div className="w-full md:max-w-md">
|
||
<Input
|
||
label="Suchen nach Name, E-Mail oder Gruppe"
|
||
value={searchQuery}
|
||
onChange={handleSearchChange}
|
||
disabled={loading && !users.length}
|
||
crossOrigin=""
|
||
/>
|
||
</div> */}
|
||
{/* {searchQuery && (
|
||
<Button
|
||
variant="text"
|
||
color="blue-gray"
|
||
onClick={handleClearSearch}
|
||
className="w-full md:w-auto"
|
||
>
|
||
Suche zurücksetzen
|
||
</Button>
|
||
)} */}
|
||
|
||
|
||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mt-8">
|
||
<div className="md:flex-1">
|
||
<Input
|
||
label="Suchen nach Name, E-Mail oder Gruppe"
|
||
value={searchQuery}
|
||
onChange={handleSearchChange}
|
||
disabled={loading && !users.length}
|
||
crossOrigin=""
|
||
/>
|
||
</div>
|
||
<div className="md:mt-0 mt-8 md:flex-1">
|
||
<Select
|
||
variant="static"
|
||
label="Einträge pro Seite"
|
||
onChange={noop}
|
||
value={perPage}
|
||
>
|
||
{perPageOptions.map(({ value, label }) => (
|
||
<Option key={value} value={value}>
|
||
{label}
|
||
</Option>
|
||
))}
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{error && (
|
||
<div className="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<div className="overflow-x-auto rounded-lg border border-blue-gray-50">
|
||
<table className="w-full min-w-[720px] table-auto text-left">
|
||
<thead>
|
||
<tr className="bg-blue-gray-50/50 text-xs uppercase tracking-wide text-stormGrey-400">
|
||
<th className="px-6 py-4 font-semibold">Benutzername</th>
|
||
<th className="px-6 py-4 font-semibold">E-Mail</th>
|
||
<th className="px-6 py-4 font-semibold">Gruppen</th>
|
||
<th className="px-6 py-4 font-semibold">Status</th>
|
||
<th className="px-6 py-4 font-semibold">Letzte Anmeldung</th>
|
||
<th className="px-6 py-4 font-semibold">Erstellt am</th>
|
||
<th className="px-6 py-4 font-semibold">Aktionen</th>
|
||
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{loading && users.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={7} className="px-6 py-8 text-center text-blue-gray-400">
|
||
Benutzerdaten werden geladen ...
|
||
</td>
|
||
</tr>
|
||
) : paginatedUsers.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={7} className="px-6 py-8 text-center text-blue-gray-400">
|
||
Keine Benutzer gefunden.
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
paginatedUsers.map((user, index) => {
|
||
const rowClass = index === paginatedUsers.length - 1 ? "" : "border-b border-blue-gray-50";
|
||
return (
|
||
<tr key={user.id} className={`text-sm text-stormGrey-700 ${rowClass}`}>
|
||
<td className="px-6 py-4">
|
||
<Typography variant="small" className="font-medium text-stormGrey-900">
|
||
{user.username || "–"}
|
||
</Typography>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<Typography variant="small">
|
||
{user.email || "–"}
|
||
</Typography>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
{user.groups.length > 0 ? (
|
||
<div className="flex flex-wrap gap-2">
|
||
{user.groups.map((group) => (
|
||
<Chip
|
||
key={group.id ?? group.name}
|
||
value={group.name}
|
||
size="sm"
|
||
color="blue-gray"
|
||
variant="ghost"
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<span className="text-stormGrey-400">–</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<Chip
|
||
value={user.isActive ? "Aktiv" : "Deaktiviert"}
|
||
size="sm"
|
||
color={user.isActive ? "green" : "red"}
|
||
variant="ghost"
|
||
/>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<Typography variant="small" className="antialiased font-sans mb-1 block text-xs font-medium text-stormGrey-600">
|
||
{formatTimestamp(user.lastLogin)}
|
||
</Typography>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<Typography variant="small" className="antialiased font-sans mb-1 block text-xs font-medium text-stormGrey-600">
|
||
{formatTimestamp(user.createdAt)}
|
||
</Typography>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<Button
|
||
size="sm"
|
||
variant="outlined"
|
||
color="blue-gray"
|
||
onClick={() => navigate(`/dashboard/users/${user.id}`)}
|
||
>
|
||
Details
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<Typography variant="small" color="gray">
|
||
{""}
|
||
</Typography>
|
||
<PaginationControls disabled={loading && users.length === 0} />
|
||
</div>
|
||
</CardBody>
|
||
</Card>
|
||
</div>
|
||
);
|
||
|
||
}
|
||
|
||
export default Users;
|