continued the kita-planer
This commit is contained in:
t.indorf
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { BellRing, Loader2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
checkAndSendDutyReminders,
|
||||
upsertDutyAssignment,
|
||||
} from "./actions";
|
||||
|
||||
const UNASSIGNED = "__unassigned__";
|
||||
|
||||
export type DutyPlanWeekDto = {
|
||||
key: string;
|
||||
label: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
};
|
||||
|
||||
export type DutyPlanDutyTypeDto = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
};
|
||||
|
||||
export type DutyPlanFamilyDto = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type DutyPlanAssignmentDto = {
|
||||
id: string;
|
||||
dutyTypeId: string;
|
||||
familyId: string;
|
||||
startDate: string;
|
||||
};
|
||||
|
||||
export function DutyPlanner({
|
||||
weeks,
|
||||
dutyTypes,
|
||||
families,
|
||||
assignments,
|
||||
}: {
|
||||
weeks: DutyPlanWeekDto[];
|
||||
dutyTypes: DutyPlanDutyTypeDto[];
|
||||
families: DutyPlanFamilyDto[];
|
||||
assignments: DutyPlanAssignmentDto[];
|
||||
}) {
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [pendingCell, setPendingCell] = useState<string | null>(null);
|
||||
|
||||
const assignmentByCell = new Map(
|
||||
assignments.map((assignment) => [
|
||||
`${assignment.startDate}:${assignment.dutyTypeId}`,
|
||||
assignment,
|
||||
]),
|
||||
);
|
||||
|
||||
function handleAssignmentChange(
|
||||
week: DutyPlanWeekDto,
|
||||
dutyTypeId: string,
|
||||
value: string,
|
||||
) {
|
||||
const cellKey = `${week.startDate}:${dutyTypeId}`;
|
||||
setPendingCell(cellKey);
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await upsertDutyAssignment({
|
||||
dutyTypeId,
|
||||
familyId: value === UNASSIGNED ? null : value,
|
||||
startDate: week.startDate,
|
||||
endDate: week.endDate,
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
toast.error(result.error);
|
||||
} else {
|
||||
toast.success(
|
||||
value === UNASSIGNED
|
||||
? "Zuweisung entfernt"
|
||||
: "Dienstplan aktualisiert",
|
||||
);
|
||||
}
|
||||
setPendingCell(null);
|
||||
});
|
||||
}
|
||||
|
||||
function sendReminders() {
|
||||
startTransition(async () => {
|
||||
const result = await checkAndSendDutyReminders();
|
||||
if (result.error) {
|
||||
toast.error(result.error);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success(
|
||||
`Erinnerungen versendet: ${result.sent ?? 0}. Ohne Empfaenger: ${
|
||||
result.skipped ?? 0
|
||||
}.`,
|
||||
);
|
||||
|
||||
if (result.errors?.length) {
|
||||
toast.warning(`${result.errors.length} Erinnerung(en) fehlgeschlagen.`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (dutyTypes.length === 0) {
|
||||
return (
|
||||
<div className="rounded-md border border-dashed p-8 text-center">
|
||||
<p className="text-sm font-medium">Noch keine Diensttypen</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Lege zuerst einen Diensttyp an, danach erscheint hier das Planungsgrid.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={sendReminders}
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<BellRing className="h-4 w-4" />
|
||||
)}
|
||||
Reminder diese Woche senden
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-md border">
|
||||
<table className="w-full min-w-[760px] border-collapse text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/50">
|
||||
<th className="sticky left-0 z-10 w-56 bg-muted/95 px-4 py-3 text-left font-medium">
|
||||
Woche
|
||||
</th>
|
||||
{dutyTypes.map((dutyType) => (
|
||||
<th
|
||||
key={dutyType.id}
|
||||
className="min-w-56 px-4 py-3 text-left font-medium"
|
||||
>
|
||||
<div>{dutyType.name}</div>
|
||||
{dutyType.description && (
|
||||
<div className="mt-1 line-clamp-1 text-xs font-normal text-muted-foreground">
|
||||
{dutyType.description}
|
||||
</div>
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{weeks.map((week) => (
|
||||
<tr key={week.key} className="border-b last:border-b-0">
|
||||
<td className="sticky left-0 z-10 bg-background px-4 py-3 font-medium">
|
||||
{week.label}
|
||||
</td>
|
||||
{dutyTypes.map((dutyType) => {
|
||||
const cellKey = `${week.startDate}:${dutyType.id}`;
|
||||
const currentAssignment = assignmentByCell.get(cellKey);
|
||||
return (
|
||||
<td key={cellKey} className="px-4 py-3">
|
||||
<Select
|
||||
value={currentAssignment?.familyId ?? UNASSIGNED}
|
||||
onValueChange={(value) =>
|
||||
handleAssignmentChange(week, dutyType.id, value)
|
||||
}
|
||||
disabled={isPending && pendingCell === cellKey}
|
||||
>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue placeholder="Familie wählen" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={UNASSIGNED}>
|
||||
Nicht zugewiesen
|
||||
</SelectItem>
|
||||
{families.map((family) => (
|
||||
<SelectItem key={family.id} value={family.id}>
|
||||
{family.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user