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