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

Refactor 'vereinsmeisterschaften.vue' to improve data handling by replacing loop variables with entry objects for better clarity; update event handlers to use entry properties for year and category management, ensuring consistent data access throughout the component.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-11-05 11:07:15 +01:00
parent 83bf2b9e39
commit d6d9a31669
1 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/cms/vereinsmeisterschaften.vue
View File

@@ -53,21 +53,21 @@
<!-- Ergebnisse -->
<div v-if="filteredResults.length > 0" class="space-y-8">
<div
v-for="(jahrData, jahr) in sortedGroupedResults"
:key="jahr"
v-for="entry in sortedGroupedResults"
:key="entry.jahr"
class="bg-white rounded-xl shadow-lg p-6"
>
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-display font-bold text-gray-900">{{ jahr }}</h2>
<h2 class="text-2xl font-display font-bold text-gray-900">{{ entry.jahr }}</h2>
<div class="flex space-x-2">
<button
@click="addResultForYear(jahr)"
@click="addResultForYear(entry.jahr)"
class="px-3 py-1 text-sm bg-green-100 hover:bg-green-200 text-green-700 rounded-lg transition-colors"
>
Ergebnis hinzufügen
</button>
<button
@click="deleteYear(jahr)"
@click="deleteYear(entry.jahr)"
class="px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors"
>
Jahr löschen
@@ -76,11 +76,11 @@
</div>
<!-- Besondere Bemerkungen -->
<div v-if="jahrData.bemerkungen" class="mb-6 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-r-lg">
<div v-if="entry.data.bemerkungen" class="mb-6 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-r-lg">
<div class="flex items-center justify-between">
<p class="text-gray-700 font-medium">{{ jahrData.bemerkungen }}</p>
<p class="text-gray-700 font-medium">{{ entry.data.bemerkungen }}</p>
<button
@click="editBemerkung(jahr)"
@click="editBemerkung(entry.jahr)"
class="px-2 py-1 text-xs bg-yellow-100 hover:bg-yellow-200 text-yellow-700 rounded transition-colors"
>
Bearbeiten
@@ -89,9 +89,9 @@
</div>
<!-- Kategorien -->
<div v-if="Object.keys(jahrData.kategorien).length > 0" class="space-y-6">
<div v-if="Object.keys(entry.data.kategorien).length > 0" class="space-y-6">
<div
v-for="(kategorieResults, kategorie) in jahrData.kategorien"
v-for="(kategorieResults, kategorie) in entry.data.kategorien"
:key="kategorie"
class="border border-gray-200 rounded-lg p-4"
>
@@ -99,13 +99,13 @@
<h3 class="text-lg font-semibold text-gray-900">{{ kategorie }}</h3>
<div class="flex space-x-2">
<button
@click="addResultForKategorie(jahr, kategorie)"
@click="addResultForKategorie(entry.jahr, kategorie)"
class="px-2 py-1 text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 rounded transition-colors"
>
Ergebnis hinzufügen
</button>
<button
@click="deleteKategorie(jahr, kategorie)"
@click="deleteKategorie(entry.jahr, kategorie)"
class="px-2 py-1 text-xs bg-red-100 hover:bg-red-200 text-red-700 rounded transition-colors"
>
Kategorie löschen
@@ -130,13 +130,13 @@
</div>
<div class="flex space-x-2">
<button
@click="editResult(result, jahr, kategorie, index)"
@click="editResult(result, entry.jahr, kategorie, index)"
class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded transition-colors"
>
Bearbeiten
</button>
<button
@click="deleteResult(jahr, kategorie, index)"
@click="deleteResult(entry.jahr, kategorie, index)"
class="px-2 py-1 text-xs bg-red-100 hover:bg-red-200 text-red-700 rounded transition-colors"
>
Löschen
@@ -421,14 +421,10 @@ const groupedResults = computed(() => {
})
const sortedGroupedResults = computed(() => {
const sorted = {}
const jahre = Object.keys(groupedResults.value).sort((a, b) => b - a) // Neueste zuerst
jahre.forEach(jahr => {
sorted[jahr] = groupedResults.value[jahr]
})
return sorted
// Als Array zurückgeben, um die Sortierung zu garantieren
return Object.keys(groupedResults.value)
.sort((a, b) => b - a) // Neueste zuerst
.map(jahr => ({ jahr, data: groupedResults.value[jahr] }))
})
const addNewResult = () => {