Implement Delete Event Feature

dashboard/src/apiEvents.ts

@@ -14,3 +14,12 @@ export async function fetchEvents(groupId: string) {
   if (!res.ok || data.error) throw new Error(data.error || 'Fehler beim Laden der Termine');
   return data;
 }
+
+export async function deleteEvent(eventId: string) {
+  const res = await fetch(`/api/events/${encodeURIComponent(eventId)}`, {
+    method: 'DELETE',
+  });
+  const data = await res.json();
+  if (!res.ok || data.error) throw new Error(data.error || 'Fehler beim Löschen des Termins');
+  return data;
+}

dashboard/src/appointments.tsx

@@ -12,10 +12,11 @@ import {
 } from '@syncfusion/ej2-react-schedule';
 import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
 import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
-import type { EventRenderedArgs } from '@syncfusion/ej2-react-schedule';
+import type { EventRenderedArgs, ActionEventArgs } from '@syncfusion/ej2-react-schedule';
 import { fetchEvents } from './apiEvents';
 import { fetchGroups } from './apiGroups';
 import { getGroupColor } from './groupColors';
+import { deleteEvent } from './apiEvents';
 
 // Typ für Gruppe ergänzen
 type Group = {
@@ -64,6 +65,24 @@ L10n.load({
       agenda: 'Agenda',
       today: 'Heute',
       noEvents: 'Keine Termine',
+      allDay: 'Ganztägig',
+      start: 'Start',
+      end: 'Ende',
+      event: 'Termin',
+      save: 'Speichern',
+      cancel: 'Abbrechen',
+      delete: 'Löschen',
+      edit: 'Bearbeiten',
+      newEvent: 'Neuer Termin',
+      title: 'Titel',
+      description: 'Beschreibung',
+      location: 'Ort',
+      recurrence: 'Wiederholung',
+      repeat: 'Wiederholen',
+      deleteEvent: 'Termin löschen',
+      deleteContent: 'Möchten Sie diesen Termin wirklich löschen?',
+      moreDetails: 'Mehr Details',
+      addTitle: 'Termintitel',
     },
   },
 });
@@ -135,7 +154,7 @@ const Appointments: React.FC = () => {
         />
       </div>
       <ScheduleComponent
-        key={selectedGroupId} // <- erzwingt komplettes Neurendern bei Gruppenwechsel
+        key={selectedGroupId}
         height="750px"
         locale="de"
         currentView="Week"
@@ -143,7 +162,6 @@ const Appointments: React.FC = () => {
           dataSource: events,
         }}
         eventRendered={(args: EventRenderedArgs) => {
-          // Farbe basierend auf der Gruppe setzen
           if (selectedGroupId && args.data && args.data.Id) {
             const groupColor = getGroupColor(selectedGroupId, groups);
             if (groupColor) {
@@ -151,6 +169,37 @@ const Appointments: React.FC = () => {
             }
           }
         }}
+        actionBegin={async (args: ActionEventArgs) => {
+          if (args.requestType === 'eventRemove') {
+            // args.data ist ein Array von zu löschenden Events
+            const toDelete = Array.isArray(args.data) ? args.data : [args.data];
+            for (const ev of toDelete) {
+              try {
+                await deleteEvent(ev.Id); // Deine API-Funktion
+              } catch (err) {
+                // Optional: Fehlerbehandlung
+                console.error('Fehler beim Löschen:', err);
+              }
+            }
+            // Events nach Löschen neu laden
+            if (selectedGroupId) {
+              fetchEvents(selectedGroupId)
+                .then((data: RawEvent[]) => {
+                  const mapped: Event[] = data.map(e => ({
+                    Id: e.Id,
+                    Subject: e.Subject,
+                    StartTime: new Date(e.StartTime),
+                    EndTime: new Date(e.EndTime),
+                    IsAllDay: e.IsAllDay,
+                  }));
+                  setEvents(mapped);
+                })
+                .catch(console.error);
+            }
+            // Syncfusion soll das Event nicht selbst löschen
+            args.cancel = true;
+          }
+        }}
         firstDayOfWeek={1}
       >
         <ViewsDirective>