Layout changes
This commit is contained in:
araemer
parent
e1eeef8d8a
commit
bd6ee25910
4 changed files with 350 additions and 192 deletions
|
|
@ -1,29 +1,28 @@
|
|||
import {useEffect, useState} from "react";
|
||||
import {createUser, fetchAllUsers, fetchCurrentUser, updateUser} from "../../api/points/UserPoint";
|
||||
import type {UserDto} from "../../api/dtos/UserDto.ts";
|
||||
import {createUser, fetchAllUsers, fetchCurrentUser, updateUser,} from "../../api/points/UserPoint";
|
||||
import type {UserDto} from "../../api/dtos/UserDto";
|
||||
import ContentBackground from "../basics/ContentBackground";
|
||||
import ContentBody from "../basics/ContentBody";
|
||||
import StickyHeader from "../basics/StickyHeader";
|
||||
import Button from "../basics/Button";
|
||||
import {ButtonType} from "../basics/BasicButtonDefinitions";
|
||||
import clsx from "clsx";
|
||||
import PageContainer from "../basics/PageContainer.tsx";
|
||||
import {ChangePasswordModal} from "./ChangePasswordModal.tsx";
|
||||
import PasswordField from "../basics/PasswordField.tsx";
|
||||
import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
|
||||
import PageContainer from "../basics/PageContainer";
|
||||
import {ChangePasswordModal} from "./ChangePasswordModal";
|
||||
import ButtonGroupLayout from "../basics/ButtonGroupLayout";
|
||||
import {Plus, X} from "lucide-react";
|
||||
import ButtonLink from "../basics/ButtonLink.tsx";
|
||||
import {getRecipeListUrl} from "../../routes.ts";
|
||||
import TextLinkButton from "../basics/TextLinkButton.tsx";
|
||||
import SelectField from "../basics/SelectField.tsx";
|
||||
import type {CreateUserResponse} from "../../api/dtos/CreateUserResponse.ts";
|
||||
import type {UserListResponse} from "../../api/dtos/UserListResponse.ts";
|
||||
import ButtonLink from "../basics/ButtonLink";
|
||||
import {getRecipeListUrl} from "../../routes";
|
||||
import type {CreateUserResponse} from "../../api/dtos/CreateUserResponse";
|
||||
import type {UserListResponse} from "../../api/dtos/UserListResponse";
|
||||
import UserList from "./UserList";
|
||||
import UserEditForm from "./UserEditForm";
|
||||
import ErrorPopup from "../basics/ErrorPopup";
|
||||
|
||||
/**
|
||||
* UserManagementPage
|
||||
* -------------------
|
||||
* Displays a two-column layout:
|
||||
* - Left: list of all users (wider on desktop)
|
||||
* - Left: list of all users
|
||||
* - Right: edit form for selected or new user
|
||||
*
|
||||
* Allows:
|
||||
|
|
@ -36,43 +35,49 @@ export default function UserManagementPage() {
|
|||
const [selectedUser, setSelectedUser] = useState<UserDto | null>(null);
|
||||
const [currentUser, setCurrentUser] = useState<UserDto | null>(null);
|
||||
const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [passwordError, setPasswordError] = useState("");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const isAdmin = currentUser?.role === "admin";
|
||||
//@todo API enum
|
||||
const adminRole: string = "admin";
|
||||
const isAdmin = currentUser?.role === adminRole;
|
||||
|
||||
// Load current user and user list (if admin)
|
||||
useEffect(() => {
|
||||
loadData().catch(console.error);
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
const me = await fetchCurrentUser();
|
||||
setCurrentUser(me);
|
||||
try {
|
||||
const me = await fetchCurrentUser();
|
||||
setCurrentUser(me);
|
||||
|
||||
if (me.role === "admin") {
|
||||
const userResponse: UserListResponse = await fetchAllUsers();
|
||||
if (me.role === adminRole) {
|
||||
const userResponse: UserListResponse = await fetchAllUsers();
|
||||
|
||||
// Sort users alphabetically by last name, then first name
|
||||
const sortedUsers = userResponse.valueList.sort((a, b) => {
|
||||
// Compare last names first
|
||||
const lastNameCompare = (a.lastName || "").localeCompare(b.lastName || "");
|
||||
if (lastNameCompare !== 0) {
|
||||
return lastNameCompare;
|
||||
}
|
||||
// If last names are equal, compare first names
|
||||
return (a.firstName || "").localeCompare(b.firstName || "");
|
||||
});
|
||||
// Sort users alphabetically by last name, then first name
|
||||
const sortedUsers = userResponse.valueList.sort((a, b) => {
|
||||
const lastNameCompare = (a.lastName || "").localeCompare(
|
||||
b.lastName || ""
|
||||
);
|
||||
if (lastNameCompare !== 0) {
|
||||
return lastNameCompare;
|
||||
}
|
||||
return (a.firstName || "").localeCompare(b.firstName || "");
|
||||
});
|
||||
|
||||
setUsers(sortedUsers);
|
||||
|
||||
// Pre-select current user (admin's own profile)
|
||||
setSelectedUser(me);
|
||||
} else {
|
||||
setUsers([me]);
|
||||
setSelectedUser(me);
|
||||
setUsers(sortedUsers);
|
||||
setSelectedUser(me);
|
||||
} else {
|
||||
setUsers([me]);
|
||||
setSelectedUser(me);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Fehler beim Laden der Benutzerdaten"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -82,30 +87,42 @@ export default function UserManagementPage() {
|
|||
};
|
||||
|
||||
/** Handles saving user (create or update) */
|
||||
const handleSave = async () => {
|
||||
if (!selectedUser) return;
|
||||
const handleSave = async (user: UserDto, password?: string) => {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (!selectedUser.id) {
|
||||
// New user - check passwords and save
|
||||
if (confirmPassword !== password) {
|
||||
setPasswordError("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
const response: CreateUserResponse = await createUser({userData: selectedUser, password});
|
||||
if (!user.id) {
|
||||
// New user
|
||||
const response: CreateUserResponse = await createUser({
|
||||
userData: user,
|
||||
password: password || "",
|
||||
});
|
||||
const userDto = response.userData;
|
||||
if (userDto) {
|
||||
// add user to list and slect
|
||||
setUsers([...users, userDto]);
|
||||
const newUsers = [...users, userDto].sort((a, b) => {
|
||||
const lastNameCompare = (a.lastName || "").localeCompare(
|
||||
b.lastName || ""
|
||||
);
|
||||
if (lastNameCompare !== 0) {
|
||||
return lastNameCompare;
|
||||
}
|
||||
return (a.firstName || "").localeCompare(b.firstName || "");
|
||||
});
|
||||
setUsers(newUsers);
|
||||
setSelectedUser(userDto);
|
||||
}
|
||||
} else {
|
||||
// existing user - update
|
||||
const updated = await updateUser(selectedUser);
|
||||
// update user data in user list and select correct user
|
||||
setUsers(users.map(u => (u.id === updated.id ? updated : u)));
|
||||
// Existing user
|
||||
const updated = await updateUser(user);
|
||||
setUsers(users.map((u) => (u.id === updated.id ? updated : u)));
|
||||
setSelectedUser(updated);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Fehler beim Speichern der Benutzerdaten"
|
||||
);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
|
|
@ -113,8 +130,6 @@ export default function UserManagementPage() {
|
|||
|
||||
/** Opens password modal */
|
||||
const openPasswordModal = () => {
|
||||
setPassword("");
|
||||
setConfirmPassword("");
|
||||
setIsPasswordModalOpen(true);
|
||||
};
|
||||
|
||||
|
|
@ -129,16 +144,10 @@ export default function UserManagementPage() {
|
|||
});
|
||||
};
|
||||
|
||||
// @todo API enum!
|
||||
const roleOptions = [
|
||||
{value: "user", label: "Benutzer"},
|
||||
{value: "admin", label: "Administrator"}
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ContentBackground>
|
||||
<StickyHeader className={"flex justify-between items-center"}>
|
||||
<StickyHeader className="flex justify-between items-center">
|
||||
<h1>Benutzerverwaltung</h1>
|
||||
<ButtonGroupLayout>
|
||||
{isAdmin && (
|
||||
|
|
@ -149,141 +158,36 @@ export default function UserManagementPage() {
|
|||
buttonType={ButtonType.PrimaryButton}
|
||||
/>
|
||||
)}
|
||||
<ButtonLink
|
||||
icon={X}
|
||||
to={getRecipeListUrl()}
|
||||
/>
|
||||
<ButtonLink icon={X} to={getRecipeListUrl()}/>
|
||||
</ButtonGroupLayout>
|
||||
</StickyHeader>
|
||||
|
||||
<ContentBody>
|
||||
<div className="flex flex-col md:flex-row gap-0">
|
||||
{/* User List - Wider on desktop, attached to left */}
|
||||
<div className="md:w-1/2 lg:w-2/5 border-r border-gray-300 pr-6">
|
||||
<h2>Benutzer</h2>
|
||||
<ul className="space-y-1">
|
||||
{users.map((user) => (
|
||||
<li
|
||||
key={user.id ?? user.userName}
|
||||
className={clsx(
|
||||
"p-3 rounded cursor-pointer hover:bg-gray-200 transition-colors",
|
||||
selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200 font-semibold"
|
||||
)}
|
||||
onClick={() => handleSelectUser(user)}
|
||||
>
|
||||
{user.lastName}, {user.firstName} ({user.userName})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ContentBody className="p-0">
|
||||
<div className="flex flex-col md:flex-row min-h-[500px]">
|
||||
{/* User List - Left side, no padding */}
|
||||
<div className="md:w-2/5 lg:w-1/3">
|
||||
<UserList
|
||||
users={users}
|
||||
selectedUser={selectedUser}
|
||||
onSelectUser={handleSelectUser}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Edit Form */}
|
||||
<div className="md:w-1/2 lg:w-3/5 pl-6">
|
||||
{/* Edit Form - Right side, takes remaining space */}
|
||||
<div className="md:w-3/5 lg:w-2/3">
|
||||
{selectedUser ? (
|
||||
<div>
|
||||
<h2>
|
||||
{selectedUser.id ? "Benutzer bearbeiten" : "Neuen Benutzer anlegen"}
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3 max-w-md">
|
||||
<label>Benutzername</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Benutzername"
|
||||
value={selectedUser.userName}
|
||||
onChange={(e) =>
|
||||
setSelectedUser({...selectedUser, userName: e.target.value})
|
||||
}
|
||||
/>
|
||||
|
||||
<label>Vorname</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Vorname"
|
||||
value={selectedUser.firstName ?? ""}
|
||||
onChange={(e) =>
|
||||
setSelectedUser({...selectedUser, firstName: e.target.value})
|
||||
}
|
||||
/>
|
||||
|
||||
<label>Nachname</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nachname"
|
||||
value={selectedUser.lastName ?? ""}
|
||||
onChange={(e) =>
|
||||
setSelectedUser({...selectedUser, lastName: e.target.value})
|
||||
}
|
||||
/>
|
||||
|
||||
<label>E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="E-Mail"
|
||||
value={selectedUser.email ?? ""}
|
||||
onChange={(e) =>
|
||||
setSelectedUser({...selectedUser, email: e.target.value})
|
||||
}
|
||||
/>
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<label>Benutzergruppe</label>
|
||||
<SelectField
|
||||
value={selectedUser.role ?? "user"}
|
||||
onChange={(value) =>
|
||||
setSelectedUser({...selectedUser, role: value})
|
||||
}
|
||||
options={roleOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Show password field only when creating new user */}
|
||||
{!selectedUser.id && (
|
||||
<>
|
||||
<label>Passwort</label>
|
||||
<PasswordField
|
||||
onPasswordChanged={setPassword}
|
||||
onKeyDown={() => {
|
||||
}}
|
||||
/>
|
||||
|
||||
<label>Passwort bestätigen</label>
|
||||
<PasswordField
|
||||
placeholder="Passwort bestätigen"
|
||||
onPasswordChanged={setConfirmPassword}
|
||||
onKeyDown={() => {
|
||||
}}
|
||||
/>
|
||||
{passwordError && <p className="error-text mb-2">{passwordError}</p>}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Change password link for existing user */}
|
||||
{selectedUser.id && (
|
||||
<div className="mt-2 text-right">
|
||||
<TextLinkButton
|
||||
text="Passwort ändern"
|
||||
onClick={openPasswordModal}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ButtonGroupLayout>
|
||||
<Button
|
||||
text={isSaving ? "Speichern..." : "Speichern"}
|
||||
onClick={handleSave}
|
||||
buttonType={ButtonType.PrimaryButton}
|
||||
/>
|
||||
<Button
|
||||
text={"Abbrechen"}
|
||||
onClick={loadData}
|
||||
/>
|
||||
</ButtonGroupLayout>
|
||||
</div>
|
||||
</div>
|
||||
<UserEditForm
|
||||
user={selectedUser}
|
||||
isAdmin={isAdmin}
|
||||
isSaving={isSaving}
|
||||
onSave={handleSave}
|
||||
onCancel={loadData}
|
||||
onOpenPasswordModal={openPasswordModal}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-gray-600">Bitte einen Benutzer auswählen.</p>
|
||||
<div className="px-6 py-4">
|
||||
<p className="text-gray-600">Bitte einen Benutzer auswählen.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -296,6 +200,11 @@ export default function UserManagementPage() {
|
|||
onClose={() => setIsPasswordModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Error Popup */}
|
||||
{error && (
|
||||
<ErrorPopup message={error} onClose={() => setError(null)}/>
|
||||
)}
|
||||
</ContentBackground>
|
||||
</PageContainer>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue