Saison-Auswahl hinzugefügt

pages/mannschaften/index.vue

@@ -6,8 +6,27 @@
       </h1>
       <div class="w-24 h-1 bg-primary-600 mb-8" />
       
-      <p class="text-xl text-gray-600 mb-12">
-        Unsere aktiven Mannschaften in der Saison {{ selectedSeasonLabel }}
+      <p class="text-xl text-gray-600 mb-12 flex flex-wrap items-center gap-2">
+        <span>Unsere aktiven Mannschaften in der Saison</span>
+        <label
+          for="season-select"
+          class="sr-only"
+        >
+          Saison auswählen
+        </label>
+        <select
+          id="season-select"
+          v-model="selectedSeason"
+          class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white text-base"
+        >
+          <option
+            v-for="season in seasons"
+            :key="season"
+            :value="season"
+          >
+            {{ formatSeasonLabel(season) }}
+          </option>
+        </select>
       </p>
 
       <MannschaftenUebersicht :season="selectedSeason" />
@@ -37,6 +56,7 @@ import { computed } from 'vue'
 import MannschaftenUebersicht from '~/components/MannschaftenUebersicht.vue'
 
 const route = useRoute()
+const router = useRouter()
 
 const getCurrentSeasonSlug = () => {
   const now = new Date()
@@ -46,18 +66,37 @@ const getCurrentSeasonSlug = () => {
   return `${String(startYear).slice(-2)}--${String(endYear).slice(-2)}`
 }
 
-const selectedSeason = computed(() => {
-  const value = String(route.query.season || '').trim()
-  return /^\d{2}--\d{2}$/.test(value) ? value : getCurrentSeasonSlug()
+const currentSeason = getCurrentSeasonSlug()
+const { data: seasonsResult } = await useFetch('/api/mannschaften/seasons')
+
+const seasons = computed(() => {
+  const availableSeasons = Array.isArray(seasonsResult.value?.seasons)
+    ? seasonsResult.value.seasons
+    : []
+
+  return [...new Set([currentSeason, ...availableSeasons])]
+    .filter(season => /^\d{2}--\d{2}$/.test(season))
+    .sort()
+    .reverse()
 })
 
-const selectedSeasonLabel = computed(() => {
-  const match = String(selectedSeason.value || '').match(/^(\d{2})--(\d{2})$/)
-  return match ? `20${match[1]}/${match[2]}` : selectedSeason.value
+const selectedSeason = computed({
+  get() {
+    const value = String(route.query.season || '').trim()
+    return seasons.value.includes(value) ? value : currentSeason
+  },
+  set(value) {
+    const season = seasons.value.includes(value) ? value : currentSeason
+    router.replace({ query: { ...route.query, season } })
+  }
 })
 
+const formatSeasonLabel = (season) => {
+  const match = String(season || '').match(/^(\d{2})--(\d{2})$/)
+  return match ? `20${match[1]}/${match[2]}` : season
+}
+
 useHead({
   title: 'Mannschaften - Harheimer TC',
 })
 </script>
-