87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Dashboard-Kalenderraster (Client): Karten mit Kalender-Modal und
|
|
* Bearbeiten-Modal.
|
|
*
|
|
* - Klick auf die Karte oeffnet das Kalender-Modal (Uebersicht mit
|
|
* Tag/Woche/Monat und Reservierungen).
|
|
* - Stift-Icon oeffnet das Bearbeiten-Modal (Einstellungen) - nur
|
|
* fuer berechtigte Benutzer (Admins, siehe canManageCalendar).
|
|
* - Beide Modals sind per X-Icon, ESC und Hintergrund-Klick schliessbar.
|
|
*/
|
|
import { useState } from 'react';
|
|
import { CalendarCard, getCardGradient } from '@/components/calendar/CalendarCard';
|
|
import { CalendarModal } from '@/components/calendar/CalendarModal';
|
|
import { EditCalendarModal } from '@/components/admin/EditCalendarModal';
|
|
import type { ManagedCalendar } from '@/components/admin/CalendarManager';
|
|
|
|
export function DashboardCalendarGrid({
|
|
calendars,
|
|
currentUserId,
|
|
isAdmin,
|
|
}: {
|
|
calendars: ManagedCalendar[];
|
|
currentUserId: string;
|
|
isAdmin: boolean;
|
|
}) {
|
|
/** Kalender, dessen Uebersicht gerade offen ist (null = geschlossen). */
|
|
const [openCalendar, setOpenCalendar] = useState<ManagedCalendar | null>(null);
|
|
/** Kalender, dessen Einstellungen gerade bearbeitet werden. */
|
|
const [editingCalendar, setEditingCalendar] = useState<ManagedCalendar | null>(null);
|
|
|
|
return (
|
|
<>
|
|
<ul className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
{calendars.map((calendar, index) => (
|
|
<li key={calendar.id}>
|
|
<CalendarCard
|
|
title={calendar.title}
|
|
subtitle={calendar.isOwn ? 'Mein Kalender' : calendar.ownerEmail}
|
|
isActive={calendar.isActive}
|
|
memberCount={calendar.memberCount}
|
|
href={`/calendar/${calendar.id}`}
|
|
linkLabel={`Kalender ${calendar.title} oeffnen`}
|
|
gradient={getCardGradient(index)}
|
|
editLabel={
|
|
isAdmin ? `Kalender ${calendar.title} bearbeiten` : undefined
|
|
}
|
|
onEdit={
|
|
isAdmin
|
|
? () => {
|
|
setOpenCalendar(null);
|
|
setEditingCalendar(calendar);
|
|
}
|
|
: undefined
|
|
}
|
|
onOpen={() => {
|
|
setEditingCalendar(null);
|
|
setOpenCalendar(calendar);
|
|
}}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{openCalendar && (
|
|
<CalendarModal
|
|
key={openCalendar.id}
|
|
calendarId={openCalendar.id}
|
|
calendarTitle={openCalendar.title}
|
|
currentUserId={currentUserId}
|
|
isAdmin={isAdmin}
|
|
maxReservationMinutes={openCalendar.maxReservationMinutes}
|
|
onClose={() => setOpenCalendar(null)}
|
|
/>
|
|
)}
|
|
|
|
{editingCalendar && (
|
|
<EditCalendarModal
|
|
key={editingCalendar.id}
|
|
calendar={editingCalendar}
|
|
onClose={() => setEditingCalendar(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
} |