103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { searchActiveEmployees, type EmployeeSearchResult } from "@/actions/employees";
|
|
import { staffPositionInternally } from "@/actions/positions";
|
|
import { Lookup } from "@/components/ui/Lookup";
|
|
import { Modal } from "@/components/ui/Modal";
|
|
import { useToast } from "@/components/ui/Toast";
|
|
|
|
type StaffInternallyModalProps = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
positionId: string;
|
|
positionTitle: string;
|
|
isLead: boolean;
|
|
};
|
|
|
|
export function StaffInternallyModal({ open, onClose, positionId, positionTitle, isLead }: StaffInternallyModalProps) {
|
|
const { showToast } = useToast();
|
|
const router = useRouter();
|
|
const [employee, setEmployee] = useState<EmployeeSearchResult | null>(null);
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function handleSubmit() {
|
|
if (!employee) return;
|
|
setPending(true);
|
|
const result = await staffPositionInternally({ position_id: positionId, employee_id: employee.id });
|
|
setPending(false);
|
|
if (result.success) {
|
|
showToast(`${employee.first_name} ${employee.last_name} wurde intern besetzt.`);
|
|
router.refresh();
|
|
onClose();
|
|
setEmployee(null);
|
|
} else {
|
|
showToast(result.error ?? "Fehler beim Besetzen.", "error");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
onClose={onClose}
|
|
title="Intern besetzen"
|
|
footer={
|
|
<>
|
|
<button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={pending || !employee}
|
|
className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
|
|
>
|
|
Besetzen
|
|
</button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-sm text-ink-body">
|
|
Position: <span className="font-semibold">{positionTitle}</span>
|
|
</p>
|
|
{isLead && (
|
|
<div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
|
|
Dies ist eine Führungsposition: Das gesamte Team wird der ausgewählten Person unterstellt.
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className="mb-1 block text-sm font-semibold text-ink">Mitarbeiter:in*</label>
|
|
{!employee ? (
|
|
<Lookup<EmployeeSearchResult>
|
|
placeholder="Name oder Titel…"
|
|
onSearch={searchActiveEmployees}
|
|
onSelect={setEmployee}
|
|
renderResult={(e) => (
|
|
<div>
|
|
<div className="font-semibold text-ink">
|
|
{e.first_name} {e.last_name}
|
|
</div>
|
|
<div className="text-xs text-ink-muted">{e.job_title}</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center justify-between rounded border border-border bg-surface p-3">
|
|
<div>
|
|
<div className="text-sm font-semibold text-ink">
|
|
{employee.first_name} {employee.last_name}
|
|
</div>
|
|
<div className="text-xs text-ink-muted">{employee.job_title}</div>
|
|
</div>
|
|
<button type="button" onClick={() => setEmployee(null)} className="text-xs text-ink-muted hover:text-ink">
|
|
Ändern
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|