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