116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import Modal from '@/components/ui/Modal';
|
|
import type { UserWithAvatar } from './types';
|
|
|
|
type EditUserModalProps = {
|
|
open: boolean;
|
|
user: UserWithAvatar;
|
|
arbeitsname: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
saving: boolean;
|
|
onArbeitsnameChange: (value: string) => void;
|
|
onFirstNameChange: (value: string) => void;
|
|
onLastNameChange: (value: string) => void;
|
|
onClose: () => void;
|
|
onSubmit: () => void;
|
|
};
|
|
|
|
export default function EditUserModal({
|
|
open,
|
|
user,
|
|
arbeitsname,
|
|
firstName,
|
|
lastName,
|
|
saving,
|
|
onArbeitsnameChange,
|
|
onFirstNameChange,
|
|
onLastNameChange,
|
|
onClose,
|
|
onSubmit,
|
|
}: EditUserModalProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
title="User bearbeiten"
|
|
tone="info"
|
|
variant="centered"
|
|
size="md"
|
|
primaryAction={{
|
|
label: saving ? 'Speichere …' : 'Speichern',
|
|
onClick: onSubmit,
|
|
variant: 'primary',
|
|
}}
|
|
secondaryAction={{
|
|
label: 'Abbrechen',
|
|
onClick: onClose,
|
|
variant: 'secondary',
|
|
}}
|
|
>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
onSubmit();
|
|
}}
|
|
className="space-y-3 text-sm"
|
|
>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
NW-Kennung *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-2.5 py-1.5 text-sm text-gray-900 shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
|
value={user.nwkennung}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
Arbeitsname *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
|
|
value={arbeitsname}
|
|
onChange={(e) => onArbeitsnameChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
Vorname *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
|
|
value={firstName}
|
|
onChange={(e) => onFirstNameChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
|
|
Nachname *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
|
|
value={lastName}
|
|
onChange={(e) => onLastNameChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|