torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add calendar feature: Integrate calendarRouter and CalendarEvent model, enhance CalendarView with API interactions for event management, and update localization files for error handling in both English and German. This update improves the calendar functionality and user experience.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-30 14:29:11 +01:00
parent 8355f985cd
commit cff0ce1e1a
10 changed files with 460 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/i18n/locales/de/personal.json
View File

@@ -69,7 +69,9 @@
"descriptionPlaceholder": "Optionale Beschreibung...",
"save": "Speichern",
"cancel": "Abbrechen",
"delete": "Löschen"
"delete": "Löschen",
"saveError": "Fehler beim Speichern des Termins",
"deleteError": "Fehler beim Löschen des Termins"
}
}
}

4
frontend/src/i18n/locales/en/personal.json
View File

@@ -69,7 +69,9 @@
"descriptionPlaceholder": "Optional description...",
"save": "Save",
"cancel": "Cancel",
"delete": "Delete"
"delete": "Delete",
"saveError": "Error saving event",
"deleteError": "Error deleting event"
}
}
}

83
frontend/src/views/personal/CalendarView.vue
View File

@@ -270,14 +270,14 @@
</div>
</div>
<div class="dialog-footer">
<button v-if="editingEvent" @click="deleteEvent" class="btn-delete">
<button v-if="editingEvent" @click="deleteEvent" class="btn-delete" :disabled="saving">
{{ $t('personal.calendar.form.delete') }}
</button>
<div class="spacer"></div>
<button @click="closeEventDialog" class="btn-cancel">
{{ $t('personal.calendar.form.cancel') }}
</button>
<button @click="saveEvent" class="btn-save" :disabled="!eventForm.title">
<button @click="saveEvent" class="btn-save" :disabled="!eventForm.title || saving">
{{ $t('personal.calendar.form.save') }}
</button>
</div>
@@ -287,6 +287,8 @@
</template>
<script>
import apiClient from '@/utils/axios.js';
export default {
name: 'CalendarView',
data() {
@@ -317,7 +319,8 @@ export default {
// Events storage
events: [],
nextEventId: 1,
loading: false,
saving: false,
// Selection
selectedDates: [],
@@ -636,8 +639,10 @@ export default {
this.showEventDialog = false;
this.editingEvent = null;
},
saveEvent() {
if (!this.eventForm.title) return;
async saveEvent() {
if (!this.eventForm.title || this.saving) return;
this.saving = true;
const eventData = {
title: this.eventForm.title,
@@ -650,44 +655,58 @@ export default {
description: this.eventForm.description
};
if (this.editingEvent) {
// Update existing event
const index = this.events.findIndex(e => e.id === this.editingEvent.id);
if (index > -1) {
this.events[index] = { ...eventData, id: this.editingEvent.id };
try {
if (this.editingEvent) {
// Update existing event
const response = await apiClient.put(`/api/calendar/events/${this.editingEvent.id}`, eventData);
const index = this.events.findIndex(e => e.id === this.editingEvent.id);
if (index > -1) {
this.events[index] = response.data;
}
} else {
// Create new event
const response = await apiClient.post('/api/calendar/events', eventData);
this.events.push(response.data);
}
} else {
// Create new event
this.events.push({ ...eventData, id: this.nextEventId++ });
this.closeEventDialog();
} catch (error) {
console.error('Error saving event:', error);
alert(this.$t('personal.calendar.form.saveError') || 'Error saving event');
} finally {
this.saving = false;
}
this.saveEvents();
this.closeEventDialog();
},
deleteEvent() {
if (this.editingEvent) {
async deleteEvent() {
if (!this.editingEvent || this.saving) return;
this.saving = true;
try {
await apiClient.delete(`/api/calendar/events/${this.editingEvent.id}`);
const index = this.events.findIndex(e => e.id === this.editingEvent.id);
if (index > -1) {
this.events.splice(index, 1);
}
this.saveEvents();
this.closeEventDialog();
} catch (error) {
console.error('Error deleting event:', error);
alert(this.$t('personal.calendar.form.deleteError') || 'Error deleting event');
} finally {
this.saving = false;
}
},
// Persistence (localStorage for now, later backend)
saveEvents() {
localStorage.setItem('calendarEvents', JSON.stringify(this.events));
localStorage.setItem('calendarNextId', this.nextEventId.toString());
},
loadEvents() {
const saved = localStorage.getItem('calendarEvents');
if (saved) {
this.events = JSON.parse(saved);
}
const nextId = localStorage.getItem('calendarNextId');
if (nextId) {
this.nextEventId = parseInt(nextId);
// API methods
async loadEvents() {
this.loading = true;
try {
const response = await apiClient.get('/api/calendar/events');
this.events = response.data;
} catch (error) {
console.error('Error loading events:', error);
this.events = [];
} finally {
this.loading = false;
}
}
}