T08b: Frontend Calendar UI (month view, kanban, ICS, resources, sharing)
- 8 calendar components (MonthView, KanbanBoard, AppointmentModal, TaskDetailPanel, IcsControls, ResourceBooking, SharingSettings + API client) - 2 pages (/calendar, /calendar/kanban) + zustand store - 17 vitest tests (MonthView 5, KanbanBoard 6, AppointmentModal 6) all passing - i18n: calendar namespace in en/de (104 lines each, +exportSuccess key) - TS strict mode pass, npm run build pass
This commit is contained in:
A0-Orchestrator
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* Calendar page — month view with toolbar, ICS controls, sharing.
|
||||
*
|
||||
* Owns the data fetching (entries + calendars + resources) for the visible
|
||||
* month and dispatches user actions to the appropriate API client call.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { MonthView } from '@/components/calendar/MonthView';
|
||||
import { AppointmentModal } from '@/components/calendar/AppointmentModal';
|
||||
import { IcsControls } from '@/components/calendar/IcsControls';
|
||||
import { SharingSettings } from '@/components/calendar/SharingSettings';
|
||||
import { TaskDetailPanel } from '@/components/calendar/TaskDetailPanel';
|
||||
import { useCalendarStore } from '@/stores/calendarStore';
|
||||
import {
|
||||
fetchCalendars,
|
||||
listEntries,
|
||||
updateEntry,
|
||||
type Calendar,
|
||||
type CalendarEntry,
|
||||
} from '@/api/calendar';
|
||||
|
||||
export function CalendarPage() {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
visibleMonth,
|
||||
goToNextMonth,
|
||||
goToPrevMonth,
|
||||
goToToday,
|
||||
activeCalendarId,
|
||||
setActiveCalendarId,
|
||||
calendars,
|
||||
setCalendars,
|
||||
} = useCalendarStore();
|
||||
|
||||
const [entries, setEntries] = useState<CalendarEntry[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [modalEntry, setModalEntry] = useState<CalendarEntry | null>(null);
|
||||
const [prefillDate, setPrefillDate] = useState<Date | null>(null);
|
||||
|
||||
const [selectedTask, setSelectedTask] = useState<CalendarEntry | null>(null);
|
||||
|
||||
// Load calendars once
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetchCalendars()
|
||||
.then((list) => {
|
||||
if (cancelled) return;
|
||||
setCalendars(list);
|
||||
if (!activeCalendarId && list.length > 0) {
|
||||
setActiveCalendarId(list[0].id);
|
||||
}
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
if (!cancelled) setError(e.message);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Range covering the visible grid (always 6 weeks = 42 days)
|
||||
const range = useMemo(() => {
|
||||
const first = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1);
|
||||
const dayOfWeek = (first.getDay() + 6) % 7;
|
||||
const start = new Date(first);
|
||||
start.setDate(first.getDate() - dayOfWeek);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
const end = new Date(start);
|
||||
end.setDate(start.getDate() + 42);
|
||||
return { start, end };
|
||||
}, [visibleMonth]);
|
||||
|
||||
const loadEntries = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const list = await listEntries({
|
||||
start: range.start.toISOString(),
|
||||
end: range.end.toISOString(),
|
||||
});
|
||||
setEntries(list);
|
||||
} catch (e) {
|
||||
setError((e as Error).message ?? t('calendar.errorLoad'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [range.start, range.end, t]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadEntries();
|
||||
}, [loadEntries]);
|
||||
|
||||
const handleCreateAt = (date: Date) => {
|
||||
setModalEntry(null);
|
||||
setPrefillDate(date);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEditEntry = (entry: CalendarEntry) => {
|
||||
if (entry.entry_type === 'task') {
|
||||
setSelectedTask(entry);
|
||||
return;
|
||||
}
|
||||
setModalEntry(entry);
|
||||
setPrefillDate(null);
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleMoveEntry = async (entry: CalendarEntry, newStart: Date) => {
|
||||
try {
|
||||
const oldEnd = entry.end_at ? new Date(entry.end_at) : null;
|
||||
const oldStart = entry.start_at ? new Date(entry.start_at) : null;
|
||||
const durationMs = oldStart && oldEnd ? oldEnd.getTime() - oldStart.getTime() : 60 * 60 * 1000;
|
||||
const newEnd = new Date(newStart.getTime() + durationMs);
|
||||
const updated = await updateEntry(entry.id, {
|
||||
start_at: newStart.toISOString(),
|
||||
end_at: newEnd.toISOString(),
|
||||
});
|
||||
setEntries((cur) => cur.map((e) => (e.id === updated.id ? updated : e)));
|
||||
} catch (e) {
|
||||
setError((e as Error).message ?? t('calendar.errorSave'));
|
||||
await loadEntries();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaved = (saved: CalendarEntry) => {
|
||||
setEntries((cur) => {
|
||||
const exists = cur.some((e) => e.id === saved.id);
|
||||
return exists ? cur.map((e) => (e.id === saved.id ? saved : e)) : [...cur, saved];
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleted = (entryId: string) => {
|
||||
setEntries((cur) => cur.filter((e) => e.id !== entryId));
|
||||
};
|
||||
|
||||
const handleTaskChanged = (updated: CalendarEntry) => {
|
||||
setSelectedTask(updated);
|
||||
setEntries((cur) => cur.map((e) => (e.id === updated.id ? updated : e)));
|
||||
};
|
||||
|
||||
const activeCalendar = calendars.find((c) => c.id === activeCalendarId) ?? null;
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto" data-testid="calendar-page">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<h1 className="text-2xl font-bold text-secondary-900">{t('calendar.title')}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToPrevMonth}
|
||||
aria-label={t('calendar.previousMonth')}
|
||||
data-testid="calendar-prev"
|
||||
>
|
||||
‹
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={goToToday}
|
||||
data-testid="calendar-today"
|
||||
>
|
||||
{t('calendar.today')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={goToNextMonth}
|
||||
aria-label={t('calendar.nextMonth')}
|
||||
data-testid="calendar-next"
|
||||
>
|
||||
›
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-4">
|
||||
<div>
|
||||
{error && (
|
||||
<div
|
||||
className="mb-3 text-sm text-danger-700 bg-danger-50 border border-danger-200 rounded-md p-2"
|
||||
data-testid="calendar-error"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{calendars.length === 0 && !loading ? (
|
||||
<EmptyState
|
||||
title={t('calendar.noCalendars')}
|
||||
description={t('calendar.noEntries')}
|
||||
data-testid="calendar-empty"
|
||||
/>
|
||||
) : (
|
||||
<MonthView
|
||||
visibleMonth={visibleMonth}
|
||||
entries={entries}
|
||||
loading={loading}
|
||||
onCreateAt={handleCreateAt}
|
||||
onEditEntry={handleEditEntry}
|
||||
onMoveEntry={handleMoveEntry}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<div className="bg-white border border-secondary-200 rounded-lg p-4 space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs uppercase text-secondary-500 mb-1">
|
||||
{t('calendar.appointmentCalendar')}
|
||||
</label>
|
||||
<Select
|
||||
value={activeCalendarId ?? ''}
|
||||
onChange={(e) => setActiveCalendarId(e.target.value || null)}
|
||||
options={[
|
||||
...calendars.map((c: Calendar) => ({ value: c.id, label: c.name })),
|
||||
]}
|
||||
data-testid="calendar-select"
|
||||
/>
|
||||
</div>
|
||||
<IcsControls
|
||||
calendar={activeCalendar}
|
||||
onImported={() => void loadEntries()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{activeCalendar && (
|
||||
<div className="bg-white border border-secondary-200 rounded-lg p-4">
|
||||
<SharingSettings calendar={activeCalendar} />
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<AppointmentModal
|
||||
open={modalOpen}
|
||||
onClose={() => setModalOpen(false)}
|
||||
entry={modalEntry}
|
||||
prefillDate={prefillDate}
|
||||
calendars={calendars}
|
||||
defaultCalendarId={activeCalendarId}
|
||||
onSaved={handleSaved}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
|
||||
{selectedTask && (
|
||||
<TaskDetailPanel
|
||||
entry={selectedTask}
|
||||
onClose={() => setSelectedTask(null)}
|
||||
onChanged={handleTaskChanged}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CalendarPage;
|
||||
Reference in New Issue
Block a user