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

Refactor EventForm component for improved readability and maintainability

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-08-13 11:03:19 +02:00
parent f78bdf8681
commit 83937c14e2
1 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/EventForm.vue
View File

@@ -21,12 +21,23 @@
<option value="date">Datum</option>
<option value="weekday">Wochentag</option>
<option value="interval">Intervall</option>
<option value="bulk">Bulk-Datum</option>
</select>
</td>
</tr>
<tr v-if="dateMode === 'date' || dateMode === 'interval'">
<td><label for="date">Datum:</label></td>
<td><input type="date" id="date" v-model="eventData.date"></td>
<td>
<input type="date" id="date" v-model="eventData.date">
</td>
</tr>
<tr v-if="dateMode === 'bulk'">
<td><label for="bulkDates">Bulk-Daten:</label></td>
<td>
<textarea id="bulkDates" v-model="bulkDates"
placeholder="Mehrere Daten, z.B. 2025-08-13,2025-08-20 oder je Zeile ein Datum"></textarea>
<div style="font-size: 0.9em; color: #888;">Mehrere Daten mit Komma oder Zeilenumbruch trennen</div>
</td>
</tr>
<tr v-if="dateMode === 'weekday' || dateMode === 'interval'">
<td><label for="dayOfWeek">Wochentag:</label></td>
@@ -84,7 +95,9 @@
</td>
</tr>
<tr>
<td colspan="2"><button type="submit">Speichern</button></td>
<td colspan="2">
<button type="submit">Speichern</button>
</td>
</tr>
</table>
</form>
@@ -147,6 +160,8 @@ export default {
onHomepage: false,
assignedImage: null,
imageFilename: '',
bulkDates: '',
bulkDates: '',
};
},
watch: {
@@ -192,23 +207,35 @@ export default {
formatTime,
async saveEvent() {
try {
const payload = {
const basePayload = {
...this.eventData,
eventTypeId: this.selectedEventType ? this.selectedEventType.id : null,
institution_id: this.selectedInstitution ? this.selectedInstitution.id : null,
event_place_id: this.selectedEventPlace ? this.selectedEventPlace.id : null,
contactPersonIds: this.selectedContactPersons.map(person => person.id)
contactPersonIds: this.selectedContactPersons.map(person => person.id),
dayOfWeek: this.eventData.dayOfWeek ? this.eventData.dayOfWeek.value ?? -1 : -1,
relatedImage: this.assignedImage,
alsoOnHomepage: this.onHomepage ? 1 : 0
};
payload.dayOfWeek = payload.dayOfWeek ? payload.dayOfWeek.value ?? -1 : -1;
payload.relatedImage = this.assignedImage;
payload.alsoOnHomepage = this.onHomepage ? 1 : 0;
let response;
if (this.eventData.id) {
response = await axios.put(`/events/${this.eventData.id}`, payload);
if (this.dateMode === 'bulk' && this.bulkDates) {
// Split by comma or newline, trim, filter valid dates
const dates = this.bulkDates.split(/,|\n/).map(d => d.trim()).filter(d => /^\d{4}-\d{2}-\d{2}$/.test(d));
const results = [];
for (const date of dates) {
const payload = { ...basePayload, date };
const response = await axios.post('/events', payload);
results.push(response.data);
}
this.$emit('saved', results);
} else {
response = await axios.post('/events', payload);
let response;
if (this.eventData.id) {
response = await axios.put(`/events/${this.eventData.id}`, basePayload);
} else {
response = await axios.post('/events', basePayload);
}
this.$emit('saved', response.data);
}
this.$emit('saved', response.data);
} catch (error) {
console.error('Failed to save event:', error);
}
@@ -293,5 +320,4 @@ button {
max-height: 50px;
object-fit: contain;
}
</style>