araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Add components for SelectField and TextLinkButton

Browse source
This commit is contained in:
araemer 2025-11-13 20:37:26 +01:00
parent e539f9201b
commit c8b8435b69
3 changed files with 101 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

107
frontend/src/components/users/UserManagementPage.tsx
View file

@ -1,6 +1,6 @@
import {useEffect, useState} from "react";
import {createUser, fetchCurrentUser, updateUser} from "../../api/points/UserPoint";
import type {UserDto} from "../../api/dtos/UserDto.ts"; // @todo add model and mapper!
import type {UserDto} from "../../api/dtos/UserDto.ts";
import ContentBackground from "../basics/ContentBackground";
import ContentBody from "../basics/ContentBody";
import StickyHeader from "../basics/StickyHeader";
@ -14,12 +14,14 @@ import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
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";
/**
* UserManagementPage
* -------------------
* Displays a two-column layout:
* - Left: list of all users
* - Left: list of all users (wider on desktop)
* - Right: edit form for selected or new user
*
* Allows:
@ -55,6 +57,7 @@ export default function UserManagementPage() {
setSelectedUser(me);
//}
};
/** Handles selecting a user from the list */
const handleSelectUser = (user: UserDto) => {
setSelectedUser({...user});
@ -98,6 +101,11 @@ export default function UserManagementPage() {
});
};
const roleOptions = [
{value: "user", label: "Benutzer"},
{value: "admin", label: "Administrator"}
];
return (
<PageContainer>
<ContentBackground>
@ -120,17 +128,17 @@ export default function UserManagementPage() {
</StickyHeader>
<ContentBody>
<div className="flex flex-col md:flex-row gap-6">
{/* User List @todo selector component!*/}
<div className="md:w-1/3 border-r border-gray-300">
<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>
<ul className="space-y-1">
{users.map((user) => (
<li
key={user.id ?? user.userName}
className={clsx(
"p-2 hover:bg-gray-200",
selectedUser?.id === user.id && "bg-gray-300 font-semibold"
"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)}
>
@ -141,20 +149,13 @@ export default function UserManagementPage() {
</div>
{/* Edit Form */}
<div className="md:w-2/3">
<div className="md:w-1/2 lg:w-3/5 pl-6">
{selectedUser ? (
<div>
<h2>
{selectedUser.id ? "Benutzer bearbeiten" : "Neuen Benutzer anlegen"}
</h2>
<form
onSubmit={(e) => {
e.preventDefault();
handleSave();
}}
className="flex flex-col gap-3 max-w-md"
>
{/* @todo create component for laben and input field combination */}
<div className="flex flex-col gap-3 max-w-md">
<label>Benutzername</label>
<input
type="text"
@ -164,6 +165,7 @@ export default function UserManagementPage() {
setSelectedUser({...selectedUser, userName: e.target.value})
}
/>
<label>Vorname</label>
<input
type="text"
@ -173,6 +175,7 @@ export default function UserManagementPage() {
setSelectedUser({...selectedUser, firstName: e.target.value})
}
/>
<label>Nachname</label>
<input
type="text"
@ -182,6 +185,7 @@ export default function UserManagementPage() {
setSelectedUser({...selectedUser, lastName: e.target.value})
}
/>
<label>E-Mail</label>
<input
type="email"
@ -192,46 +196,47 @@ export default function UserManagementPage() {
}
/>
{isAdmin && (<label>Benutzergruppe</label>)}
{isAdmin && (
// @todo style
<select
className="input-field"
value={selectedUser.role ?? "user"}
onChange={(e) =>
setSelectedUser({...selectedUser, role: e.target.value})
}
>
<option value="user">Benutzer</option>
<option value="admin">Administrator</option>
</select>
<>
<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>)}
{!selectedUser.id && (
<PasswordField
onPasswordChanged={setPassword}
onKeyDown={() => {
}}
/>
)}
{!selectedUser.id && (<label>Passwort bestätigen</label>)}
{!selectedUser.id && (
<PasswordField
placeholder="Passwort bestätigen"
onPasswordChanged={setConfirmPassword}
onKeyDown={() => {
}}
/>
<>
<label>Passwort</label>
<PasswordField
onPasswordChanged={setPassword}
onKeyDown={() => {
}}
/>
<label>Passwort bestätigen</label>
<PasswordField
placeholder="Passwort bestätigen"
onPasswordChanged={setConfirmPassword}
onKeyDown={() => {
}}
/>
</>
)}
{/* Change password button for existing user */}
{/* Change password link for existing user */}
{selectedUser.id && (
<Button
text="Passwort ändern"
onClick={openPasswordModal}
/>
<div className="mt-2 text-right">
<TextLinkButton
text="Passwort ändern"
onClick={openPasswordModal}
/>
</div>
)}
<ButtonGroupLayout>
@ -245,7 +250,7 @@ export default function UserManagementPage() {
onClick={loadData}
/>
</ButtonGroupLayout>
</form>
</div>
</div>
) : (
<p className="text-gray-600">Bitte einen Benutzer auswählen.</p>
@ -264,4 +269,4 @@ export default function UserManagementPage() {
</ContentBackground>
</PageContainer>
);
}
}