Add components for SelectField and TextLinkButton
This commit is contained in:
araemer
parent
e539f9201b
commit
c8b8435b69
3 changed files with 101 additions and 51 deletions
25
frontend/src/components/basics/SelectField.tsx
Normal file
25
frontend/src/components/basics/SelectField.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
type SelectFieldProps = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: { value: string; label: string }[];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* SelectField - A dropdown styled consistently with input fields
|
||||
*/
|
||||
export default function SelectField({value, onChange, options, className = ''}: SelectFieldProps) {
|
||||
return (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className={`p-2 w-full border rounded-md bg-white border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900 cursor-pointer ${className}`}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
20
frontend/src/components/basics/TextLinkButton.tsx
Normal file
20
frontend/src/components/basics/TextLinkButton.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
type TextLinkButtonProps = {
|
||||
text: string;
|
||||
onClick: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* TextLinkButton - A button styled as a hyperlink
|
||||
*/
|
||||
export default function TextLinkButton({text, onClick, className = ''}: TextLinkButtonProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`text-blue-600 hover:text-blue-800 hover:underline transition-colors bg-transparent border-none p-0 cursor-pointer ${className}`}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -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"
|
||||
<>
|
||||
<label>Benutzergruppe</label>
|
||||
<SelectField
|
||||
value={selectedUser.role ?? "user"}
|
||||
onChange={(e) =>
|
||||
setSelectedUser({...selectedUser, role: e.target.value})
|
||||
onChange={(value) =>
|
||||
setSelectedUser({...selectedUser, role: value})
|
||||
}
|
||||
>
|
||||
<option value="user">Benutzer</option>
|
||||
<option value="admin">Administrator</option>
|
||||
</select>
|
||||
options={roleOptions}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Show password field only when creating new user */}
|
||||
{!selectedUser.id && (<label>Passwort</label>)}
|
||||
{!selectedUser.id && (
|
||||
<>
|
||||
<label>Passwort</label>
|
||||
<PasswordField
|
||||
onPasswordChanged={setPassword}
|
||||
onKeyDown={() => {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!selectedUser.id && (<label>Passwort bestätigen</label>)}
|
||||
{!selectedUser.id && (
|
||||
|
||||
<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
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue