Implement Delete Event Feature
This commit is contained in:
@@ -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');
|
if (!res.ok || data.error) throw new Error(data.error || 'Fehler beim Laden der Termine');
|
||||||
return data;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -12,10 +12,11 @@ import {
|
|||||||
} from '@syncfusion/ej2-react-schedule';
|
} from '@syncfusion/ej2-react-schedule';
|
||||||
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
|
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
|
||||||
import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
|
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 { fetchEvents } from './apiEvents';
|
||||||
import { fetchGroups } from './apiGroups';
|
import { fetchGroups } from './apiGroups';
|
||||||
import { getGroupColor } from './groupColors';
|
import { getGroupColor } from './groupColors';
|
||||||
|
import { deleteEvent } from './apiEvents';
|
||||||
|
|
||||||
// Typ für Gruppe ergänzen
|
// Typ für Gruppe ergänzen
|
||||||
type Group = {
|
type Group = {
|
||||||
@@ -64,6 +65,24 @@ L10n.load({
|
|||||||
agenda: 'Agenda',
|
agenda: 'Agenda',
|
||||||
today: 'Heute',
|
today: 'Heute',
|
||||||
noEvents: 'Keine Termine',
|
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>
|
</div>
|
||||||
<ScheduleComponent
|
<ScheduleComponent
|
||||||
key={selectedGroupId} // <- erzwingt komplettes Neurendern bei Gruppenwechsel
|
key={selectedGroupId}
|
||||||
height="750px"
|
height="750px"
|
||||||
locale="de"
|
locale="de"
|
||||||
currentView="Week"
|
currentView="Week"
|
||||||
@@ -143,7 +162,6 @@ const Appointments: React.FC = () => {
|
|||||||
dataSource: events,
|
dataSource: events,
|
||||||
}}
|
}}
|
||||||
eventRendered={(args: EventRenderedArgs) => {
|
eventRendered={(args: EventRenderedArgs) => {
|
||||||
// Farbe basierend auf der Gruppe setzen
|
|
||||||
if (selectedGroupId && args.data && args.data.Id) {
|
if (selectedGroupId && args.data && args.data.Id) {
|
||||||
const groupColor = getGroupColor(selectedGroupId, groups);
|
const groupColor = getGroupColor(selectedGroupId, groups);
|
||||||
if (groupColor) {
|
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}
|
firstDayOfWeek={1}
|
||||||
>
|
>
|
||||||
<ViewsDirective>
|
<ViewsDirective>
|
||||||
|
|||||||
@@ -34,3 +34,16 @@ def get_events():
|
|||||||
})
|
})
|
||||||
session.close()
|
session.close()
|
||||||
return jsonify(result)
|
return jsonify(result)
|
||||||
|
|
||||||
|
|
||||||
|
@events_bp.route("/<event_id>", methods=["DELETE"])
|
||||||
|
def delete_event(event_id):
|
||||||
|
session = Session()
|
||||||
|
event = session.query(Event).filter_by(id=event_id).first()
|
||||||
|
if not event:
|
||||||
|
session.close()
|
||||||
|
return jsonify({"error": "Termin nicht gefunden"}), 404
|
||||||
|
session.delete(event)
|
||||||
|
session.commit()
|
||||||
|
session.close()
|
||||||
|
return jsonify({"success": True})
|
||||||
|
|||||||
Reference in New Issue
Block a user