779 lines
25 KiB
TypeScript
779 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useState, useTransition } from "react";
|
|
import {
|
|
DutyAssignmentStatus,
|
|
RsvpMode,
|
|
TerminStatus,
|
|
TerminType,
|
|
} from "@prisma/client";
|
|
import { format } from "date-fns";
|
|
import { de } from "date-fns/locale";
|
|
import {
|
|
AlertTriangle,
|
|
Calendar,
|
|
Clock,
|
|
MapPin,
|
|
MoreHorizontal,
|
|
WashingMachine,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
import { RsvpForm } from "@/components/rsvp-form";
|
|
import type { RsvpEventDto } from "@/lib/rsvp";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { AdminTerminModal } from "./admin-termin-modal";
|
|
import { TerminRequestModal } from "./termin-request-modal";
|
|
import { MitbringselList } from "./mitbringsel-list";
|
|
import { createNotdienstSwapRequest, deleteTerminAdmin } from "../actions";
|
|
|
|
export type TerminListItemDto = {
|
|
kind: "termin";
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
type: TerminType;
|
|
status: TerminStatus;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
allDay: boolean;
|
|
mitbringselListEnabled: boolean;
|
|
requiresRsvp: boolean;
|
|
rsvpMode: RsvpMode;
|
|
rsvpDeadline: Date | null;
|
|
hasRsvpResponses: boolean;
|
|
rsvpEvent?: RsvpEventDto;
|
|
participantInfo: string | null;
|
|
showParticipantInfo: boolean;
|
|
mitbringselItems?: {
|
|
id: string;
|
|
userId: string;
|
|
content: string;
|
|
user: { firstName: string; lastName: string };
|
|
}[];
|
|
};
|
|
|
|
export type DutyCalendarItemDto = {
|
|
kind: "duty";
|
|
id: string;
|
|
title: string;
|
|
familyName: string;
|
|
status: DutyAssignmentStatus;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
isOwn: boolean;
|
|
};
|
|
|
|
export type NotdienstCalendarItemDto = {
|
|
kind: "notdienst";
|
|
id: string;
|
|
planId: string;
|
|
planYear: number;
|
|
planMonth: number;
|
|
title: string;
|
|
familyId: string;
|
|
familyName: string;
|
|
childName: string;
|
|
isOwn: boolean;
|
|
canRequestSwap: boolean;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
};
|
|
|
|
export type NotdienstSwapOptionDto = {
|
|
id: string;
|
|
date: Date;
|
|
childName: string;
|
|
familyName: string;
|
|
};
|
|
|
|
export type CalendarListItemDto =
|
|
| TerminListItemDto
|
|
| DutyCalendarItemDto
|
|
| NotdienstCalendarItemDto;
|
|
|
|
export function TerminList({
|
|
termine,
|
|
userId,
|
|
isAdmin,
|
|
notdienstSwapOptions = [],
|
|
}: {
|
|
termine: CalendarListItemDto[];
|
|
userId: string;
|
|
isAdmin: boolean;
|
|
notdienstSwapOptions?: NotdienstSwapOptionDto[];
|
|
}) {
|
|
if (termine.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex max-h-[280px] min-h-[260px] flex-col items-center justify-center px-6 py-12 text-center">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--accent-soft)] text-[var(--accent-deep)]">
|
|
<Calendar className="h-6 w-6 [stroke-width:1.7]" />
|
|
</div>
|
|
<h3 className="mt-5 text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
|
|
Keine Termine in diesem Zeitraum
|
|
</h3>
|
|
<p className="mt-2 max-w-md text-sm leading-6 text-[var(--ink-soft)]">
|
|
Lege den ersten Termin an, damit Eltern planen können.
|
|
</p>
|
|
<div className="mt-5">
|
|
{isAdmin ? (
|
|
<AdminTerminModal
|
|
triggerLabel="+ Termin anlegen"
|
|
triggerClassName=""
|
|
/>
|
|
) : (
|
|
<TerminRequestModal
|
|
triggerLabel="+ Termin anlegen"
|
|
triggerVariant="default"
|
|
triggerClassName=""
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const groups = groupByMonth(termine);
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{groups.map((group) => (
|
|
<section key={group.key}>
|
|
<div className="mb-3 flex items-center justify-between gap-3">
|
|
<h2 className="text-lg font-medium tracking-[-0.02em] text-[var(--ink)]">
|
|
{group.label}
|
|
</h2>
|
|
<span className="rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)] tabular-nums">
|
|
{group.items.length}{" "}
|
|
{group.items.length === 1 ? "Termin" : "Termine"}
|
|
</span>
|
|
</div>
|
|
<Card className="overflow-hidden p-0">
|
|
<div className="divide-y divide-[var(--hairline-soft)]">
|
|
{group.items.map((item) =>
|
|
item.kind === "duty" ? (
|
|
<DutyRow
|
|
key={`duty-${item.id}`}
|
|
duty={item}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
) : item.kind === "notdienst" ? (
|
|
<NotdienstRow
|
|
key={`notdienst-${item.id}`}
|
|
notdienst={item}
|
|
isAdmin={isAdmin}
|
|
notdienstSwapOptions={notdienstSwapOptions}
|
|
/>
|
|
) : (
|
|
<TerminRow
|
|
key={`termin-${item.id}`}
|
|
termin={item}
|
|
userId={userId}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
),
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DutyRow({
|
|
duty,
|
|
isAdmin,
|
|
}: {
|
|
duty: DutyCalendarItemDto;
|
|
isAdmin: boolean;
|
|
}) {
|
|
const color = duty.isOwn ? "oklch(0.60 0.16 160)" : "oklch(0.75 0.08 160)";
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
|
|
<div
|
|
className="absolute inset-y-3 left-0 w-[3px] rounded-r-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
<DateTile date={duty.startDate} />
|
|
<div className="min-w-0">
|
|
<h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
|
|
{duty.title}
|
|
</h3>
|
|
<p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
|
|
<Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
|
|
{format(duty.startDate, "dd.MM.", { locale: de })} -{" "}
|
|
{format(duty.endDate, "dd.MM.yyyy", { locale: de })}
|
|
<WashingMachine className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
|
|
{duty.familyName}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 relative">
|
|
<CategoryPill color={color}>
|
|
{duty.isOwn ? "Mein Elterndienst" : "Elterndienst"}
|
|
</CategoryPill>
|
|
{isAdmin ? (
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Mehr Optionen"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMenuOpen(!menuOpen);
|
|
}}
|
|
>
|
|
<MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
|
|
</Button>
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setMenuOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 mt-1 w-56 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
|
|
<a
|
|
href="/dashboard/admin/dienste"
|
|
className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Dienst im Planer bearbeiten
|
|
</a>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="w-9 h-9" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
function TerminRow({
|
|
termin,
|
|
userId,
|
|
isAdmin,
|
|
}: {
|
|
termin: TerminListItemDto;
|
|
userId: string;
|
|
isAdmin: boolean;
|
|
}) {
|
|
const color = getTypeColor(termin.type);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
|
const [isDeleting, startDeleteTransition] = useTransition();
|
|
|
|
const handleDeleteConfirm = () => {
|
|
startDeleteTransition(async () => {
|
|
const res = await deleteTerminAdmin(termin.id);
|
|
if (res.error) {
|
|
toast.error(res.error);
|
|
} else {
|
|
toast.success("Termin wurde erfolgreich gelöscht.");
|
|
setDeleteOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Dialog>
|
|
<div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
|
|
<div
|
|
className="absolute inset-y-3 left-0 w-[3px] rounded-r-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
<DateTile date={termin.startDate} />
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
|
|
{termin.title}
|
|
</h3>
|
|
{termin.status === TerminStatus.PENDING && (
|
|
<Badge variant="warning">Ausstehend</Badge>
|
|
)}
|
|
</div>
|
|
<p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
|
|
<Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
|
|
{formatTerminTime(termin)}
|
|
<MapPin className="ml-1 h-3.5 w-3.5 [stroke-width:1.7]" />
|
|
Kita
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 relative">
|
|
<CategoryPill color={color}>
|
|
{getTypeLabel(termin.type)}
|
|
</CategoryPill>
|
|
<DialogTrigger asChild>
|
|
<Button variant="ghost" size="sm">
|
|
Details
|
|
</Button>
|
|
</DialogTrigger>
|
|
{isAdmin ? (
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Mehr Optionen"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMenuOpen(!menuOpen);
|
|
}}
|
|
>
|
|
<MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
|
|
</Button>
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setMenuOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 mt-1 w-48 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
|
|
<AdminTerminModal
|
|
existingTermin={termin}
|
|
triggerLabel="Bearbeiten"
|
|
triggerVariant="ghost"
|
|
triggerClassName="flex w-full items-center justify-start rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)] font-normal h-auto bg-transparent border-0"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--danger)] hover:bg-[var(--danger-soft)] text-left font-normal"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMenuOpen(false);
|
|
setDeleteOpen(true);
|
|
}}
|
|
>
|
|
Löschen
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="w-9 h-9" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{termin.title}</DialogTitle>
|
|
<DialogDescription>
|
|
{format(termin.startDate, "PP", { locale: de })}
|
|
{!termin.allDay &&
|
|
` · ${format(termin.startDate, "p", { locale: de })} - ${format(
|
|
termin.endDate,
|
|
"p",
|
|
{ locale: de },
|
|
)}`}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid gap-4">
|
|
<div className="flex">
|
|
<CategoryPill color={color}>
|
|
{getTypeLabel(termin.type)}
|
|
</CategoryPill>
|
|
</div>
|
|
|
|
{termin.description ? (
|
|
<p className="whitespace-pre-wrap text-sm leading-6 text-[var(--ink-soft)]">
|
|
{termin.description}
|
|
</p>
|
|
) : (
|
|
<p className="text-sm italic text-[var(--ink-faint)]">
|
|
Keine Beschreibung hinterlegt.
|
|
</p>
|
|
)}
|
|
|
|
{termin.rsvpEvent ? (
|
|
<section className="rounded-lg border border-[var(--hairline)] p-4">
|
|
<h3 className="mb-3 font-medium">Eure Rückmeldung</h3>
|
|
<RsvpForm
|
|
key={JSON.stringify(termin.rsvpEvent)}
|
|
event={termin.rsvpEvent}
|
|
/>
|
|
</section>
|
|
) : null}
|
|
|
|
{termin.participantInfo && termin.showParticipantInfo && (
|
|
<div className="rounded-lg border border-[var(--warn)] bg-[var(--warn-soft)] p-4 text-sm text-[var(--ink)]">
|
|
<div className="mb-1 flex items-center gap-2 font-medium">
|
|
<AlertTriangle className="h-4 w-4 text-[var(--warn)] [stroke-width:1.7]" />
|
|
Wichtiger Hinweis für Teilnehmer
|
|
</div>
|
|
<p className="whitespace-pre-wrap">{termin.participantInfo}</p>
|
|
</div>
|
|
)}
|
|
|
|
{termin.mitbringselListEnabled && (
|
|
<div className="mt-3 border-t border-[var(--hairline-soft)] pt-3">
|
|
<MitbringselList
|
|
terminId={termin.id}
|
|
items={termin.mitbringselItems || []}
|
|
currentUserId={userId}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Delete Confirmation Dialog */}
|
|
<Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Termin unwiderruflich löschen?</DialogTitle>
|
|
<DialogDescription>
|
|
Möchtest du den Termin “{termin.title}” wirklich
|
|
löschen? Alle zugehörigen Teilnahmen und Mitbringsel-Einträge
|
|
gehen verloren.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setDeleteOpen(false)}
|
|
disabled={isDeleting}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDeleteConfirm}
|
|
disabled={isDeleting}
|
|
>
|
|
{isDeleting ? "Wird gelöscht..." : "Löschen"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DateTile({ date }: { date: Date }) {
|
|
return (
|
|
<div className="flex h-14 w-14 flex-col items-center justify-center rounded-lg border border-[var(--hairline)] bg-[var(--surface-2)]">
|
|
<span className="text-[22px] font-medium leading-none tracking-[-0.02em] text-[var(--ink)] tabular-nums">
|
|
{format(date, "d", { locale: de })}
|
|
</span>
|
|
<span className="mt-1 text-[10px] font-semibold uppercase text-[var(--ink-muted)] [letter-spacing:0.08em]">
|
|
{format(date, "EEE", { locale: de })}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CategoryPill({
|
|
color,
|
|
children,
|
|
}: {
|
|
color: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<span
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-[var(--hairline)] bg-[var(--surface-2)] px-2.5 py-1 text-[11px] font-semibold text-[var(--ink-soft)]"
|
|
style={{ color }}
|
|
>
|
|
<span
|
|
className="h-1.5 w-1.5 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function groupByMonth(items: CalendarListItemDto[]) {
|
|
const groups = new Map<
|
|
string,
|
|
{ key: string; label: string; items: CalendarListItemDto[] }
|
|
>();
|
|
|
|
items.forEach((item) => {
|
|
const key = format(item.startDate, "yyyy-MM");
|
|
const label = format(item.startDate, "MMMM yyyy", { locale: de });
|
|
const group = groups.get(key) ?? { key, label, items: [] };
|
|
group.items.push(item);
|
|
groups.set(key, group);
|
|
});
|
|
|
|
return Array.from(groups.values());
|
|
}
|
|
|
|
function formatTerminTime(termin: TerminListItemDto) {
|
|
if (termin.allDay) return "ganztägig";
|
|
return `${format(termin.startDate, "HH:mm", { locale: de })} - ${format(
|
|
termin.endDate,
|
|
"HH:mm",
|
|
{ locale: de },
|
|
)}`;
|
|
}
|
|
|
|
function getTypeColor(type: TerminType): string {
|
|
switch (type) {
|
|
case TerminType.KITA_FEST:
|
|
case TerminType.MITMACH_TAG:
|
|
return "var(--good)";
|
|
case TerminType.SCHLIESSTAG:
|
|
case TerminType.TEAMTAG:
|
|
return "var(--danger)";
|
|
case TerminType.GEBURTSTAG_INTERN:
|
|
case TerminType.GEBURTSTAG_EXTERN:
|
|
return "oklch(0.50 0.10 320)";
|
|
case TerminType.ELTERNABEND:
|
|
case TerminType.MITGLIEDERVERSAMMLUNG:
|
|
case TerminType.ELTERNCAFE:
|
|
return "oklch(0.50 0.10 280)";
|
|
default:
|
|
return "var(--ink-muted)";
|
|
}
|
|
}
|
|
|
|
function getTypeLabel(type: TerminType): string {
|
|
switch (type) {
|
|
case TerminType.KITA_FEST:
|
|
return "Kita-Fest";
|
|
case TerminType.MITMACH_TAG:
|
|
return "Mitmach-Tag";
|
|
case TerminType.SCHLIESSTAG:
|
|
return "Schließtag";
|
|
case TerminType.TEAMTAG:
|
|
return "Teamtag";
|
|
case TerminType.ELTERNABEND:
|
|
return "Elternabend";
|
|
case TerminType.MITGLIEDERVERSAMMLUNG:
|
|
return "Mitgliederversammlung";
|
|
case TerminType.ELTERNCAFE:
|
|
return "Elterncafe";
|
|
case TerminType.GEBURTSTAG_INTERN:
|
|
return "Geburtstag";
|
|
case TerminType.GEBURTSTAG_EXTERN:
|
|
return "Raumanfrage";
|
|
default:
|
|
return "Sonstiges";
|
|
}
|
|
}
|
|
|
|
export function NotdienstSwapDialog({
|
|
target,
|
|
options,
|
|
trigger,
|
|
}: {
|
|
target: NotdienstCalendarItemDto;
|
|
options: NotdienstSwapOptionDto[];
|
|
trigger: ReactNode;
|
|
}) {
|
|
const selectableOptions = options.filter((option) => option.id !== target.id);
|
|
const [open, setOpen] = useState(false);
|
|
const [offeredAssignmentId, setOfferedAssignmentId] = useState(
|
|
selectableOptions[0]?.id ?? "",
|
|
);
|
|
const [message, setMessage] = useState("");
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleSubmit = () => {
|
|
if (!offeredAssignmentId) {
|
|
toast.error("Bitte wähle einen eigenen Notdienst als Tausch-Angebot.");
|
|
return;
|
|
}
|
|
|
|
startTransition(async () => {
|
|
const result = await createNotdienstSwapRequest({
|
|
targetAssignmentId: target.id,
|
|
offeredAssignmentId,
|
|
message,
|
|
});
|
|
|
|
if ("error" in result && result.error) {
|
|
toast.error(result.error);
|
|
return;
|
|
}
|
|
|
|
toast.success("Tauschanfrage wurde versendet.");
|
|
setOpen(false);
|
|
setMessage("");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Notdienst tauschen</DialogTitle>
|
|
<DialogDescription>
|
|
Frage Familie {target.familyName}, ob ihr den Notdienst am{" "}
|
|
{format(target.startDate, "dd.MM.yyyy", { locale: de })} tauschen
|
|
könnt.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-[var(--ink)]">
|
|
Dein Tausch-Angebot
|
|
</label>
|
|
<select
|
|
className="w-full rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2 text-sm text-[var(--ink)] ring-offset-[var(--surface)] hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
|
|
value={offeredAssignmentId}
|
|
disabled={isPending || selectableOptions.length === 0}
|
|
onChange={(event) => setOfferedAssignmentId(event.target.value)}
|
|
>
|
|
{selectableOptions.length === 0 ? (
|
|
<option value="">
|
|
Kein eigener zukünftiger Notdienst verfügbar
|
|
</option>
|
|
) : (
|
|
selectableOptions.map((option) => (
|
|
<option key={option.id} value={option.id}>
|
|
{format(option.date, "dd.MM.yyyy", { locale: de })} -{" "}
|
|
{option.childName}
|
|
</option>
|
|
))
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-1.5 block text-sm font-medium text-[var(--ink)]">
|
|
Nachricht optional
|
|
</label>
|
|
<textarea
|
|
value={message}
|
|
onChange={(event) => setMessage(event.target.value)}
|
|
maxLength={500}
|
|
rows={3}
|
|
className="w-full resize-none rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-3 py-2 text-sm text-[var(--ink)] ring-offset-[var(--surface)] placeholder:text-[var(--ink-muted)] hover:border-[var(--accent-mid)] focus-visible:border-[var(--accent)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]"
|
|
placeholder="Zum Beispiel: Wir sind an dem Tag verreist."
|
|
disabled={isPending}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setOpen(false)}
|
|
disabled={isPending}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={isPending || selectableOptions.length === 0}
|
|
>
|
|
Anfrage senden
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function NotdienstRow({
|
|
notdienst,
|
|
isAdmin,
|
|
notdienstSwapOptions,
|
|
}: {
|
|
notdienst: NotdienstCalendarItemDto;
|
|
isAdmin: boolean;
|
|
notdienstSwapOptions: NotdienstSwapOptionDto[];
|
|
}) {
|
|
const color = notdienst.isOwn ? "oklch(0.60 0.18 45)" : "oklch(0.75 0.10 50)";
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="relative grid grid-cols-[56px_minmax(0,1fr)_auto] items-center gap-4 px-5 py-4 transition-colors hover:bg-[var(--surface-2)]">
|
|
<div
|
|
className="absolute inset-y-3 left-0 w-[3px] rounded-r-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
<DateTile date={notdienst.startDate} />
|
|
<div className="min-w-0">
|
|
<h3 className="truncate text-[15px] font-semibold text-[var(--ink)]">
|
|
{notdienst.title}
|
|
</h3>
|
|
<p className="mt-1 flex flex-wrap items-center gap-2 text-[13px] text-[var(--ink-soft)]">
|
|
<Clock className="h-3.5 w-3.5 [stroke-width:1.7]" />
|
|
{format(notdienst.startDate, "dd.MM.yyyy", { locale: de })}{" "}
|
|
(ganztägig)
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-[var(--ink-muted)]" />
|
|
Kind: {notdienst.childName}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 relative">
|
|
<CategoryPill color={color}>
|
|
{notdienst.isOwn ? "Mein Notdienst" : "Notdienst"}
|
|
</CategoryPill>
|
|
{isAdmin ? (
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Mehr Optionen"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMenuOpen(!menuOpen);
|
|
}}
|
|
>
|
|
<MoreHorizontal className="h-4 w-4 [stroke-width:1.7]" />
|
|
</Button>
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-40"
|
|
onClick={() => setMenuOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 mt-1 w-56 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-1.5 shadow-lg z-50 animate-in fade-in-50 slide-in-from-top-1 duration-150">
|
|
<a
|
|
href={`/dashboard/notdienst/plan?year=${notdienst.planYear}&month=${notdienst.planMonth}`}
|
|
className="flex w-full items-center rounded-lg px-2.5 py-2 text-sm text-[var(--ink)] hover:bg-[var(--surface-2)]"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
Notdienst im Planer bearbeiten
|
|
</a>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
{notdienst.canRequestSwap ? (
|
|
<NotdienstSwapDialog
|
|
target={notdienst}
|
|
options={notdienstSwapOptions}
|
|
trigger={
|
|
<Button size="sm" variant="outline" className="h-8 px-2.5 text-xs">
|
|
Tausch anfragen
|
|
</Button>
|
|
}
|
|
/>
|
|
) : !isAdmin ? <div className="w-9 h-9" /> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|