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.assignedImage = null;
this.imageFilename = ''; this.imageFilename = '';
}, },
focusFirstField() {
// Fokussiert das erste Eingabefeld (Name)
this.$nextTick(() => {
const nameInput = document.getElementById('name');
if (nameInput) {
nameInput.focus();
}
});
}
} }
}; };
</script> </script>

View File

@@ -3,6 +3,7 @@
<h2>Veranstaltungen</h2> <h2>Veranstaltungen</h2>
<button @click="createEvent">Neue Veranstaltung</button> <button @click="createEvent">Neue Veranstaltung</button>
<EventForm v-if="showForm" <EventForm v-if="showForm"
ref="eventForm"
:event="selectedEvent" :event="selectedEvent"
:institutions="institutions" :institutions="institutions"
:eventPlaces="eventPlaces" :eventPlaces="eventPlaces"
@@ -84,10 +85,24 @@ export default {
createEvent() { createEvent() {
this.selectedEvent = {}; this.selectedEvent = {};
this.showForm = true; this.showForm = true;
this.scrollToFormAndFocus();
}, },
editEvent(event) { editEvent(event) {
this.selectedEvent = { ...event }; this.selectedEvent = { ...event };
this.showForm = true; 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) { async deleteEvent(id) {
try { try {