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:
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user