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

Optimiere das Worship Management-Formular: Entferne redundante Codeabschnitte, verbessere die Benutzeroberfläche durch Anpassungen der Abstände und Padding-Werte, und vereinheitliche die Struktur der Eingabefelder. Füge eine neue Auswahl für das Jahr hinzu, um die liturgischen Daten zu laden.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-07 17:22:39 +02:00
parent 459dd3168a
commit 5e4471a936
1 changed files with 65 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/content/admin/WorshipManagement.vue
View File

@@ -1,36 +1,29 @@
<template>
<div class="worship-management">
<h2>Gottesdienst Verwaltung</h2>
<div class="liturgical-loader">
<select v-model="selectedYear" class="year-select">
<option v-for="year in availableYears" :key="year" :value="year">{{ year }}</option>
</select>
<button type="button" @click="loadLiturgicalYear" class="load-year-button" :disabled="isLoading">
{{ isLoading ? 'Lade...' : 'Kirchenjahr laden' }}
</button>
</div>
<form @submit.prevent="saveWorship">
<label for="eventPlaceId">Veranstaltungsort:</label>
<multiselect v-model="selectedEventPlace" :options="eventPlaces" label="name" track-by="id"
placeholder="Veranstaltungsort wählen"></multiselect>
<label for="date">Datum:</label>
<input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">
<label for="dayName">Name des Tags:</label>
<div class="liturgical-day-section">
<multiselect
v-model="selectedDayName"
:options="dayNameOptions"
:multiple="false"
:taggable="true"
@tag="addDayNameTag"
placeholder="Tag-Name wählen oder eingeben"
label="name"
track-by="name">
<multiselect v-model="selectedDayName" :options="dayNameOptions" :multiple="false" :taggable="true"
@tag="addDayNameTag" placeholder="Tag-Name wählen oder eingeben" label="name" track-by="name">
</multiselect>
<div class="liturgical-loader">
<select v-model="selectedYear" class="year-select">
<option v-for="year in availableYears" :key="year" :value="year">{{ year }}</option>
</select>
<button type="button" @click="loadLiturgicalYear" class="load-year-button" :disabled="isLoading">
{{ isLoading ? 'Lade...' : 'Kirchenjahr laden' }}
</button>
</div>
</div>
<label for="date">Datum:</label>
<input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">
<label for="time">Uhrzeit:</label>
<input type="time" id="time" v-model="worshipData.time" required>
@@ -38,27 +31,13 @@
<input type="text" id="title" v-model="worshipData.title" required>
<label for="organizer">Gestalter:</label>
<multiselect
v-model="selectedOrganizers"
:options="organizerOptions"
:multiple="true"
:taggable="true"
@tag="addOrganizerTag"
placeholder="Gestalter wählen oder neu eingeben"
label="name"
track-by="name">
<multiselect v-model="selectedOrganizers" :options="organizerOptions" :multiple="true" :taggable="true"
@tag="addOrganizerTag" placeholder="Gestalter wählen oder neu eingeben" label="name" track-by="name">
</multiselect>
<label for="sacristanService">Küsterdienst:</label>
<multiselect
v-model="selectedSacristans"
:options="sacristanOptions"
:multiple="true"
:taggable="true"
@tag="addSacristanTag"
placeholder="Küsterdienst wählen oder neu eingeben"
label="name"
track-by="name">
<multiselect v-model="selectedSacristans" :options="sacristanOptions" :multiple="true" :taggable="true"
@tag="addSacristanTag" placeholder="Küsterdienst wählen oder neu eingeben" label="name" track-by="name">
</multiselect>
<label for="collection">Kollekte:</label>
@@ -84,17 +63,9 @@
</form>
<div class="filter-section">
<input
v-model="searchDate"
type="date"
class="search-input"
placeholder="Nach Datum suchen..."
/>
<input v-model="searchDate" type="date" class="search-input" placeholder="Nach Datum suchen..." />
<label class="checkbox-label">
<input
v-model="showPastWorships"
type="checkbox"
/>
<input v-model="showPastWorships" type="checkbox" />
Vergangene Gottesdienste anzeigen
</label>
<button v-if="searchDate" @click="clearSearch" type="button" class="clear-button">
@@ -103,7 +74,8 @@
</div>
<ul>
<li v-for="worship in filteredWorships" :key="worship.id" :class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
<li v-for="worship in filteredWorships" :key="worship.id"
:class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
<span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
<button @click="editWorship(worship)">Bearbeiten</button>
<button @click="deleteWorship(worship.id)">Löschen</button>
@@ -168,7 +140,7 @@ export default {
if (!this.showPastWorships) {
const today = new Date();
today.setHours(0, 0, 0, 0);
filtered = filtered.filter(worship => {
if (worship.date) {
const worshipDate = new Date(worship.date);
@@ -183,7 +155,7 @@ export default {
if (this.searchDate) {
const searchDateObj = new Date(this.searchDate);
searchDateObj.setHours(0, 0, 0, 0);
filtered = filtered.filter(worship => {
if (worship.date) {
const worshipDate = new Date(worship.date);
@@ -243,20 +215,20 @@ export default {
try {
const response = await axios.get('/liturgical-days');
this.liturgicalDays = response.data;
// Nur zukünftige Tage anzeigen
const today = new Date();
today.setHours(0, 0, 0, 0);
const futureDays = response.data.filter(day => {
const dayDate = new Date(day.date);
dayDate.setHours(0, 0, 0, 0);
return dayDate >= today;
});
// Sortiere nach Datum
futureDays.sort((a, b) => new Date(a.date) - new Date(b.date));
// Erstelle Optionen mit Datum und Name: "30.11.2025 - 1. Advent"
this.dayNameOptions = futureDays.map(day => {
const date = new Date(day.date);
@@ -280,7 +252,7 @@ export default {
alert('Bitte wählen Sie ein Jahr aus');
return;
}
this.isLoading = true;
try {
const response = await axios.post('/liturgical-days/load-year', {
@@ -303,20 +275,20 @@ export default {
if (!this.worshipData.date) {
return;
}
// Setze Flag, um Endlosschleife zu vermeiden
this.isUpdatingFromDate = true;
// Normalisiere das Datum (HTML input gibt YYYY-MM-DD zurück)
const selectedDate = this.worshipData.date;
// Finde liturgischen Tag für das gewählte Datum
const liturgicalDay = this.liturgicalDays.find(day => {
// Vergleiche nur das Datum (ignoriere mögliche Zeitstempel)
const dayDate = typeof day.date === 'string' ? day.date : day.date.split('T')[0];
return dayDate === selectedDate;
});
if (liturgicalDay) {
// Finde die passende Option mit formatiertem Datum
const option = this.dayNameOptions.find(opt => opt.date === selectedDate);
@@ -328,7 +300,7 @@ export default {
} else {
console.log('Kein liturgischer Tag gefunden für:', selectedDate);
}
// Reset Flag nach kurzer Verzögerung
this.$nextTick(() => {
this.isUpdatingFromDate = false;
@@ -338,7 +310,7 @@ export default {
if (!this.selectedDayName || !this.selectedDayName.date) {
return;
}
// Das Datum ist bereits in der Option enthalten
this.worshipData.date = this.selectedDayName.date;
this.worshipData.dayName = this.selectedDayName.dayName;
@@ -373,25 +345,25 @@ export default {
this.worshipData.time = formatTime(worship.time);
console.log(this.worshipData);
this.selectedEventPlace = this.eventPlaces.find(ep => ep.id === worship.eventPlaceId);
// Konvertiere kommaseparierte Strings zu Arrays für Multiselect
this.selectedOrganizers = worship.organizer
this.selectedOrganizers = worship.organizer
? worship.organizer.split(',').map(org => ({ name: org.trim() }))
: [];
this.selectedSacristans = worship.sacristanService
this.selectedSacristans = worship.sacristanService
? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
: [];
// Setze dayName - finde die passende Option
if (worship.dayName) {
const option = this.dayNameOptions.find(opt =>
const option = this.dayNameOptions.find(opt =>
opt.dayName === worship.dayName && opt.date === this.worshipData.date
);
this.selectedDayName = option || null;
} else {
this.selectedDayName = null;
}
this.editMode = true;
this.editId = worship.id;
},
@@ -449,7 +421,7 @@ export default {
},
addDayNameTag(newTag) {
// Wenn manuell ein Tag eingegeben wird, ohne Datum
const tag = {
const tag = {
name: newTag,
dayName: newTag,
date: this.worshipData.date || null
@@ -475,35 +447,41 @@ export default {
form {
display: grid;
grid-template-columns: 180px 1fr;
gap: 15px 20px;
gap: 8px 20px;
align-items: start;
}
form > label {
form>label {
margin: 0;
padding-top: 8px;
padding-top: 6px;
text-align: right;
font-weight: 500;
}
form > input[type="text"],
form > input[type="date"],
form > input[type="time"],
form > .multiselect,
form > .liturgical-day-section {
form>input[type="text"],
form>input[type="date"],
form>input[type="time"] {
width: 100%;
max-width: 500px;
padding: 6px 10px;
font-size: 14px;
}
form>.multiselect,
form>.liturgical-day-section {
width: 100%;
max-width: 500px;
}
form > input[type="checkbox"] {
form>input[type="checkbox"] {
justify-self: start;
margin-top: 8px;
margin-top: 6px;
}
form > button {
form>button {
grid-column: 1 / -1;
justify-self: start;
margin-top: 10px;
margin-top: 8px;
}
.filter-section {
@@ -563,18 +541,18 @@ form > button {
.liturgical-day-section {
display: flex;
flex-direction: column;
gap: 10px;
gap: 6px;
max-width: 500px;
}
.liturgical-loader {
display: flex;
gap: 10px;
gap: 8px;
align-items: center;
}
.year-select {
padding: 8px 12px;
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
@@ -588,7 +566,7 @@ form > button {
}
.load-year-button {
padding: 8px 16px;
padding: 6px 12px;
background-color: #2196F3;
color: white;
border: none;
@@ -596,6 +574,7 @@ form > button {
cursor: pointer;
white-space: nowrap;
margin: 0;
font-size: 14px;
}
.load-year-button:hover:not(:disabled) {
@@ -647,7 +626,7 @@ li:hover .tooltip {
opacity: 1;
}
li > span {
li>span {
flex: 1;
}