Füge Funktionalität zum Fokussieren des ersten Eingabefelds im Event-Formular hinzu und implementiere das Scrollen zum Formular bei der Erstellung und Bearbeitung von Veranstaltungen.

This commit is contained in:
Torsten Schulz (local)
2025-10-07 16:06:17 +02:00
parent cff48550ae
commit 7e6128dec4
2 changed files with 24 additions and 0 deletions

View File

@@ -312,6 +312,15 @@ export default {
this.assignedImage = null;
this.imageFilename = '';
},
focusFirstField() {
// Fokussiert das erste Eingabefeld (Name)
this.$nextTick(() => {
const nameInput = document.getElementById('name');
if (nameInput) {
nameInput.focus();
}
});
}
}
};
</script>

View File

@@ -3,6 +3,7 @@
<h2>Veranstaltungen</h2>
<button @click="createEvent">Neue Veranstaltung</button>
<EventForm v-if="showForm"
ref="eventForm"
:event="selectedEvent"
:institutions="institutions"
:eventPlaces="eventPlaces"
@@ -84,10 +85,24 @@ export default {
createEvent() {
this.selectedEvent = {};
this.showForm = true;
this.scrollToFormAndFocus();
},
editEvent(event) {
this.selectedEvent = { ...event };
this.showForm = true;
this.scrollToFormAndFocus();
},
scrollToFormAndFocus() {
// Wartet auf das Rendern des Formulars und scrollt dann nach oben
this.$nextTick(() => {
// Nach oben scrollen
window.scrollTo({ top: 0, behavior: 'smooth' });
// Das erste Feld fokussieren
if (this.$refs.eventForm) {
this.$refs.eventForm.focusFirstField();
}
});
},
async deleteEvent(id) {
try {