393 lines
12 KiB
TypeScript
393 lines
12 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
|
|
|
|
import { ConfirmDialog } from '#/components/confirm-dialog'
|
|
import { StaffMemberDetailDialog } from '#/components/staff-member-detail-dialog'
|
|
import { StaffTabs } from '#/components/staff-tabs'
|
|
import { getCurrentStaffUser } from '#/lib/auth'
|
|
import { authClient } from '#/lib/auth-client'
|
|
import { phoneSchema } from '#/lib/phone'
|
|
import { listStaffMembers } from '#/lib/staff'
|
|
|
|
export const Route = createFileRoute('/staff/team')({
|
|
component: StaffTeam,
|
|
beforeLoad: async () => {
|
|
const staffUser = await getCurrentStaffUser()
|
|
if (!staffUser) {
|
|
throw redirect({ to: '/staff/login' })
|
|
}
|
|
if (staffUser.role !== 'admin') {
|
|
throw redirect({ to: '/staff' })
|
|
}
|
|
return { staffUser }
|
|
},
|
|
loader: async ({ context }) => {
|
|
const members = await listStaffMembers()
|
|
return { staffUser: context.staffUser, members }
|
|
},
|
|
})
|
|
|
|
type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]
|
|
|
|
type FormState = {
|
|
name: string
|
|
email: string
|
|
phone: string
|
|
password: string
|
|
role: 'admin' | 'user'
|
|
}
|
|
|
|
function emptyForm(): FormState {
|
|
return { name: '', email: '', phone: '', password: '', role: 'user' }
|
|
}
|
|
|
|
function StaffTeam() {
|
|
const router = useRouter()
|
|
const { staffUser, members } = Route.useLoaderData()
|
|
|
|
const [form, setForm] = useState<FormState>(emptyForm)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState<string | null>(null)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [busyId, setBusyId] = useState<string | null>(null)
|
|
const [viewingMember, setViewingMember] = useState<StaffMember | null>(null)
|
|
const [pendingRemove, setPendingRemove] = useState<StaffMember | null>(null)
|
|
|
|
async function handleCreate(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const phoneResult = phoneSchema.safeParse(form.phone)
|
|
if (!phoneResult.success) {
|
|
setError('Bitte geben Sie eine gültige Telefonnummer an')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
|
|
const { error: createError } = await authClient.admin.createUser({
|
|
name: form.name,
|
|
email: form.email,
|
|
password: form.password,
|
|
role: form.role,
|
|
data: { phone: phoneResult.data },
|
|
})
|
|
|
|
if (createError) {
|
|
setError(createError.message ?? 'Etwas ist schiefgelaufen')
|
|
setIsSubmitting(false)
|
|
return
|
|
}
|
|
|
|
setSuccess('Mitarbeiter wurde angelegt.')
|
|
setForm(emptyForm())
|
|
setIsSubmitting(false)
|
|
await router.invalidate()
|
|
}
|
|
|
|
async function confirmRemove() {
|
|
const member = pendingRemove
|
|
if (!member) return
|
|
|
|
setPendingRemove(null)
|
|
setBusyId(member.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const { error: removeError } = await authClient.admin.removeUser({ userId: member.id })
|
|
|
|
if (removeError) {
|
|
setError(removeError.message ?? 'Etwas ist schiefgelaufen')
|
|
} else {
|
|
setSuccess('Zugang wurde entfernt.')
|
|
await router.invalidate()
|
|
}
|
|
|
|
setBusyId(null)
|
|
}
|
|
|
|
async function handleToggleRole(member: StaffMember) {
|
|
const nextRole = member.role === 'admin' ? 'user' : 'admin'
|
|
setBusyId(member.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const { error: roleError } = await authClient.admin.setRole({ userId: member.id, role: nextRole })
|
|
|
|
if (roleError) {
|
|
setError(roleError.message ?? 'Etwas ist schiefgelaufen')
|
|
} else {
|
|
setSuccess('Rolle wurde aktualisiert.')
|
|
await router.invalidate()
|
|
}
|
|
|
|
setBusyId(null)
|
|
}
|
|
|
|
async function handleToggleBan(member: StaffMember) {
|
|
setBusyId(member.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const { error: banError } = member.banned
|
|
? await authClient.admin.unbanUser({ userId: member.id })
|
|
: await authClient.admin.banUser({ userId: member.id })
|
|
|
|
if (banError) {
|
|
setError(banError.message ?? 'Etwas ist schiefgelaufen')
|
|
} else {
|
|
setSuccess(member.banned ? 'Zugang wurde reaktiviert.' : 'Zugang wurde gesperrt.')
|
|
await router.invalidate()
|
|
}
|
|
|
|
setBusyId(null)
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await authClient.signOut()
|
|
await router.navigate({ to: '/staff/login' })
|
|
await router.invalidate()
|
|
}
|
|
|
|
async function handleSetPhone(member: StaffMember) {
|
|
const newPhone = window.prompt(`Telefonnummer für ${member.name}:`, member.phone ?? '')
|
|
|
|
if (newPhone === null) {
|
|
return
|
|
}
|
|
|
|
const phoneResult = phoneSchema.safeParse(newPhone)
|
|
if (!phoneResult.success) {
|
|
setError('Bitte geben Sie eine gültige Telefonnummer an')
|
|
return
|
|
}
|
|
|
|
setBusyId(member.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const { error: phoneError } = await authClient.admin.updateUser({
|
|
userId: member.id,
|
|
data: { phone: phoneResult.data },
|
|
})
|
|
|
|
if (phoneError) {
|
|
setError(phoneError.message ?? 'Etwas ist schiefgelaufen')
|
|
} else {
|
|
setSuccess(`Telefonnummer für ${member.name} wurde aktualisiert.`)
|
|
await router.invalidate()
|
|
}
|
|
|
|
setBusyId(null)
|
|
}
|
|
|
|
async function handleSetPassword(member: StaffMember) {
|
|
const newPassword = window.prompt(`Neues Passwort für ${member.name} (mind. 8 Zeichen):`)
|
|
|
|
if (!newPassword) {
|
|
return
|
|
}
|
|
|
|
setBusyId(member.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
const { error: passwordError } = await authClient.admin.setUserPassword({
|
|
userId: member.id,
|
|
newPassword,
|
|
})
|
|
|
|
if (passwordError) {
|
|
setError(passwordError.message ?? 'Etwas ist schiefgelaufen')
|
|
} else {
|
|
setSuccess(`Passwort für ${member.name} wurde geändert.`)
|
|
}
|
|
|
|
setBusyId(null)
|
|
}
|
|
|
|
return (
|
|
<div className="staff-page">
|
|
<div className="staff-nav">
|
|
<header className="staff-topbar">
|
|
<Link className="wordmark" to="/">
|
|
Steakhaus <span>bei Mirko</span>
|
|
</Link>
|
|
<div className="staff-topbar-right">
|
|
<span>Angemeldet als {staffUser.name}</span>
|
|
<button type="button" className="btn btn-secondary" onClick={handleLogout}>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="staff-tabs-bar">
|
|
<StaffTabs role={staffUser.role} />
|
|
</div>
|
|
</div>
|
|
|
|
<main className="page staff-main">
|
|
<h1 className="section-heading">Mitarbeiter</h1>
|
|
|
|
<section className="staff-form-section">
|
|
<h2 className="section-heading staff-subheading">Neuer Mitarbeiter</h2>
|
|
|
|
<form className="reservation-form" onSubmit={handleCreate}>
|
|
<div className="form-row">
|
|
<label>
|
|
Name
|
|
<input
|
|
type="text"
|
|
value={form.name}
|
|
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
E-Mail
|
|
<input
|
|
type="email"
|
|
value={form.email}
|
|
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Telefon
|
|
<input
|
|
type="tel"
|
|
inputMode="tel"
|
|
pattern="[+]?[0-9()\-.\s]{6,30}"
|
|
title="Nur Ziffern, Leerzeichen und + ( ) - ."
|
|
value={form.phone}
|
|
onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<div className="form-row">
|
|
<label>
|
|
Passwort
|
|
<input
|
|
type="password"
|
|
value={form.password}
|
|
onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
|
|
minLength={8}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Rolle
|
|
<select
|
|
value={form.role}
|
|
onChange={(e) => setForm((f) => ({ ...f, role: e.target.value as FormState['role'] }))}
|
|
>
|
|
<option value="user">Mitarbeiter</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Wird angelegt …' : 'Anlegen'}
|
|
</button>
|
|
|
|
{error && <p className="message message-error">{error}</p>}
|
|
{success && <p className="message message-success">{success}</p>}
|
|
</form>
|
|
</section>
|
|
|
|
<section className="staff-table-section">
|
|
<div className="table-scroll">
|
|
<table className="reservations-table reservations-table-clickable">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>E-Mail</th>
|
|
<th>Telefon</th>
|
|
<th>Rolle</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{members.map((member) => (
|
|
<tr key={member.id} onClick={() => setViewingMember(member)}>
|
|
<td>{member.name}</td>
|
|
<td>{member.email}</td>
|
|
<td>{member.phone || <span className="muted">—</span>}</td>
|
|
<td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
|
|
<td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
|
|
<td onClick={(event) => event.stopPropagation()}>
|
|
<div className="table-actions">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
disabled={busyId === member.id}
|
|
onClick={() => handleToggleRole(member)}
|
|
>
|
|
{member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
disabled={busyId === member.id}
|
|
onClick={() => handleSetPhone(member)}
|
|
>
|
|
Telefon bearbeiten
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
disabled={busyId === member.id}
|
|
onClick={() => handleSetPassword(member)}
|
|
>
|
|
Passwort setzen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
disabled={busyId === member.id || member.id === staffUser.id}
|
|
onClick={() => handleToggleBan(member)}
|
|
>
|
|
{member.banned ? 'Entsperren' : 'Sperren'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger"
|
|
disabled={busyId === member.id || member.id === staffUser.id}
|
|
onClick={() => setPendingRemove(member)}
|
|
>
|
|
Entfernen
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<StaffMemberDetailDialog member={viewingMember} onClose={() => setViewingMember(null)} />
|
|
|
|
<ConfirmDialog
|
|
open={pendingRemove !== null}
|
|
title="Zugang entfernen"
|
|
message={pendingRemove && <>Zugang für <strong>{pendingRemove.name}</strong> wirklich entfernen?</>}
|
|
warning="Diese Aktion kann nicht rückgängig gemacht werden."
|
|
confirmLabel="Entfernen"
|
|
danger
|
|
onConfirm={confirmRemove}
|
|
onCancel={() => setPendingRemove(null)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|