Enhance ESLint configuration to include support for .mjs and .cjs file types. Update ignored files patterns to ensure proper linting of project files. Refactor Vue component templates for improved readability and maintainability, including consistent formatting and structure across various components. Update error handling in save functions to prevent silent failures.

components/cms/CmsMannschaften.vue

@@ -2,39 +2,98 @@
   <div>
     <div class="flex justify-between items-center mb-6">
       <div>
-        <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900 mb-2">Mannschaften verwalten</h2>
+        <h2 class="text-2xl sm:text-3xl font-display font-bold text-gray-900 mb-2">
+          Mannschaften verwalten
+        </h2>
         <div class="w-24 h-1 bg-primary-600" />
       </div>
-      <button class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors" @click="openAddModal">
-        <Plus :size="20" class="mr-2" /> Mannschaft hinzufügen
+      <button
+        class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+        @click="openAddModal"
+      >
+        <Plus
+          :size="20"
+          class="mr-2"
+        /> Mannschaft hinzufügen
       </button>
     </div>
 
-    <div v-if="isLoading" class="flex items-center justify-center py-12"><Loader2 :size="40" class="animate-spin text-primary-600" /></div>
+    <div
+      v-if="isLoading"
+      class="flex items-center justify-center py-12"
+    >
+      <Loader2
+        :size="40"
+        class="animate-spin text-primary-600"
+      />
+    </div>
 
-    <div v-else class="bg-white rounded-xl shadow-lg overflow-hidden">
+    <div
+      v-else
+      class="bg-white rounded-xl shadow-lg overflow-hidden"
+    >
       <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mannschaft</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Liga</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Staffelleiter</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mannschaftsführer</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spieler</th>
-              <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Mannschaft
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Liga
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Staffelleiter
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Mannschaftsführer
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Spieler
+              </th>
+              <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Aktionen
+              </th>
             </tr>
           </thead>
           <tbody class="bg-white divide-y divide-gray-200">
-            <tr v-for="(mannschaft, index) in mannschaften" :key="index" class="hover:bg-gray-50">
-              <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ mannschaft.mannschaft }}</td>
-              <td class="px-4 py-3 text-sm text-gray-600">{{ mannschaft.liga }}</td>
-              <td class="px-4 py-3 text-sm text-gray-600">{{ mannschaft.staffelleiter }}</td>
-              <td class="px-4 py-3 text-sm text-gray-600">{{ mannschaft.mannschaftsfuehrer }}</td>
-              <td class="px-4 py-3 text-sm text-gray-600"><div class="max-w-xs truncate">{{ getSpielerListe(mannschaft).join(', ') || '-' }}</div></td>
+            <tr
+              v-for="(mannschaft, index) in mannschaften"
+              :key="index"
+              class="hover:bg-gray-50"
+            >
+              <td class="px-4 py-3 text-sm font-medium text-gray-900">
+                {{ mannschaft.mannschaft }}
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-600">
+                {{ mannschaft.liga }}
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-600">
+                {{ mannschaft.staffelleiter }}
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-600">
+                {{ mannschaft.mannschaftsfuehrer }}
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-600">
+                <div class="max-w-xs truncate">
+                  {{ getSpielerListe(mannschaft).join(', ') || '-' }}
+                </div>
+              </td>
               <td class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium space-x-3">
-                <button class="text-gray-600 hover:text-gray-900" title="Bearbeiten" @click="openEditModal(mannschaft, index)"><Pencil :size="18" /></button>
-                <button class="text-red-600 hover:text-red-900" title="Löschen" @click="confirmDelete(mannschaft, index)"><Trash2 :size="18" /></button>
+                <button
+                  class="text-gray-600 hover:text-gray-900"
+                  title="Bearbeiten"
+                  @click="openEditModal(mannschaft, index)"
+                >
+                  <Pencil :size="18" />
+                </button>
+                <button
+                  class="text-red-600 hover:text-red-900"
+                  title="Löschen"
+                  @click="confirmDelete(mannschaft, index)"
+                >
+                  <Trash2 :size="18" />
+                </button>
               </td>
             </tr>
           </tbody>
@@ -42,86 +101,248 @@
       </div>
     </div>
 
-    <div v-if="!isLoading && mannschaften.length === 0" class="bg-white rounded-xl shadow-lg p-12 text-center">
-      <Users :size="48" class="text-gray-400 mx-auto mb-4" />
-      <h3 class="text-lg font-medium text-gray-900 mb-2">Keine Mannschaften vorhanden</h3>
-      <p class="text-gray-600 mb-6">Fügen Sie die erste Mannschaft hinzu.</p>
-      <button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors" @click="openAddModal">Mannschaft hinzufügen</button>
+    <div
+      v-if="!isLoading && mannschaften.length === 0"
+      class="bg-white rounded-xl shadow-lg p-12 text-center"
+    >
+      <Users
+        :size="48"
+        class="text-gray-400 mx-auto mb-4"
+      />
+      <h3 class="text-lg font-medium text-gray-900 mb-2">
+        Keine Mannschaften vorhanden
+      </h3>
+      <p class="text-gray-600 mb-6">
+        Fügen Sie die erste Mannschaft hinzu.
+      </p>
+      <button
+        class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+        @click="openAddModal"
+      >
+        Mannschaft hinzufügen
+      </button>
     </div>
 
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" @click.self="closeModal">
+    <div
+      v-if="showModal"
+      class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+      @click.self="closeModal"
+    >
       <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
         <div class="p-6 border-b border-gray-200">
-          <h2 class="text-2xl font-display font-bold text-gray-900">{{ isEditing ? 'Mannschaft bearbeiten' : 'Neue Mannschaft' }}</h2>
+          <h2 class="text-2xl font-display font-bold text-gray-900">
+            {{ isEditing ? 'Mannschaft bearbeiten' : 'Neue Mannschaft' }}
+          </h2>
         </div>
-        <form class="p-6 space-y-4" @submit.prevent="saveMannschaft">
+        <form
+          class="p-6 space-y-4"
+          @submit.prevent="saveMannschaft"
+        >
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Mannschaft *</label>
-            <input v-model="formData.mannschaft" type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+            <input
+              v-model="formData.mannschaft"
+              type="text"
+              required
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Liga *</label>
-            <input v-model="formData.liga" type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+            <input
+              v-model="formData.liga"
+              type="text"
+              required
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
           </div>
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">Staffelleiter</label>
-              <input v-model="formData.staffelleiter" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+              <input
+                v-model="formData.staffelleiter"
+                type="text"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
             </div>
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label>
-              <input v-model="formData.telefon" type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+              <input
+                v-model="formData.telefon"
+                type="tel"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
             </div>
           </div>
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">Heimspieltag</label>
-              <input v-model="formData.heimspieltag" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+              <input
+                v-model="formData.heimspieltag"
+                type="text"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
             </div>
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">Spielsystem</label>
-              <input v-model="formData.spielsystem" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+              <input
+                v-model="formData.spielsystem"
+                type="text"
+                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                :disabled="isSaving"
+              >
             </div>
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Mannschaftsführer</label>
-            <input v-model="formData.mannschaftsfuehrer" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" :disabled="isSaving">
+            <input
+              v-model="formData.mannschaftsfuehrer"
+              type="text"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              :disabled="isSaving"
+            >
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Spieler</label>
             <div class="space-y-2">
-              <div v-if="formData.spielerListe.length === 0" class="text-sm text-gray-500">Noch keine Spieler eingetragen.</div>
-              <div v-for="(spieler, index) in formData.spielerListe" :key="spieler.id" class="px-3 py-2 border border-gray-200 rounded-lg bg-white">
+              <div
+                v-if="formData.spielerListe.length === 0"
+                class="text-sm text-gray-500"
+              >
+                Noch keine Spieler eingetragen.
+              </div>
+              <div
+                v-for="(spieler, index) in formData.spielerListe"
+                :key="spieler.id"
+                class="px-3 py-2 border border-gray-200 rounded-lg bg-white"
+              >
                 <div class="flex flex-col lg:flex-row lg:items-center gap-2">
-                  <input v-model="spieler.name" type="text" class="flex-1 min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Spielername" :disabled="isSaving">
+                  <input
+                    v-model="spieler.name"
+                    type="text"
+                    class="flex-1 min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    placeholder="Spielername"
+                    :disabled="isSaving"
+                  >
                   <div class="flex items-center gap-1">
-                    <button type="button" class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" title="Nach oben" :disabled="isSaving || index === 0" @click="moveSpielerUp(index)"><ChevronUp :size="18" /></button>
-                    <button type="button" class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" title="Nach unten" :disabled="isSaving || index === formData.spielerListe.length - 1" @click="moveSpielerDown(index)"><ChevronDown :size="18" /></button>
-                    <button type="button" class="p-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed" title="Spieler entfernen" :disabled="isSaving" @click="removeSpieler(spieler.id)"><Trash2 :size="18" /></button>
+                    <button
+                      type="button"
+                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Nach oben"
+                      :disabled="isSaving || index === 0"
+                      @click="moveSpielerUp(index)"
+                    >
+                      <ChevronUp :size="18" />
+                    </button>
+                    <button
+                      type="button"
+                      class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Nach unten"
+                      :disabled="isSaving || index === formData.spielerListe.length - 1"
+                      @click="moveSpielerDown(index)"
+                    >
+                      <ChevronDown :size="18" />
+                    </button>
+                    <button
+                      type="button"
+                      class="p-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      title="Spieler entfernen"
+                      :disabled="isSaving"
+                      @click="removeSpieler(spieler.id)"
+                    >
+                      <Trash2 :size="18" />
+                    </button>
                   </div>
                   <div class="flex items-center gap-2">
-                    <select v-model="moveTargetBySpielerId[spieler.id]" class="min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed" :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1" title="Mannschaft auswählen">
-                      <option v-for="t in mannschaftenSelectOptions" :key="t" :value="t">{{ t }}</option>
+                    <select
+                      v-model="moveTargetBySpielerId[spieler.id]"
+                      class="min-w-[14rem] px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                      :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1"
+                      title="Mannschaft auswählen"
+                    >
+                      <option
+                        v-for="t in mannschaftenSelectOptions"
+                        :key="t"
+                        :value="t"
+                      >
+                        {{ t }}
+                      </option>
                     </select>
-                    <button type="button" class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1 || !canMoveSpieler(spieler.id)" title="In ausgewählte Mannschaft verschieben" @click="moveSpielerToMannschaft(spieler.id)"><ArrowRight :size="18" /></button>
+                    <button
+                      type="button"
+                      class="inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                      :disabled="isSaving || !isEditing || mannschaftenSelectOptions.length <= 1 || !canMoveSpieler(spieler.id)"
+                      title="In ausgewählte Mannschaft verschieben"
+                      @click="moveSpielerToMannschaft(spieler.id)"
+                    >
+                      <ArrowRight :size="18" />
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
             <div class="mt-3 flex items-center justify-between">
-              <button type="button" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-colors" :disabled="isSaving" @click="addSpieler()"><Plus :size="18" class="mr-2" /> Spieler hinzufügen</button>
-              <p class="text-xs text-gray-500">Reihenfolge per ↑/↓ ändern.</p>
+              <button
+                type="button"
+                class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-colors"
+                :disabled="isSaving"
+                @click="addSpieler()"
+              >
+                <Plus
+                  :size="18"
+                  class="mr-2"
+                /> Spieler hinzufügen
+              </button>
+              <p class="text-xs text-gray-500">
+                Reihenfolge per ↑/↓ ändern.
+              </p>
             </div>
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Weitere Informationen (Link)</label>
-            <input v-model="formData.weitere_informationen_link" type="url" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="https://..." :disabled="isSaving">
+            <input
+              v-model="formData.weitere_informationen_link"
+              type="url"
+              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              placeholder="https://..."
+              :disabled="isSaving"
+            >
+          </div>
+          <div
+            v-if="errorMessage"
+            class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"
+          >
+            <AlertCircle
+              :size="20"
+              class="mr-2"
+            /> {{ errorMessage }}
           </div>
-          <div v-if="errorMessage" class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm"><AlertCircle :size="20" class="mr-2" /> {{ errorMessage }}</div>
           <div class="flex justify-end space-x-4 pt-4">
-            <button type="button" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors" :disabled="isSaving" @click="closeModal">Abbrechen</button>
-            <button type="submit" class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center" :disabled="isSaving"><Loader2 v-if="isSaving" :size="20" class="animate-spin mr-2" /><span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span></button>
+            <button
+              type="button"
+              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              :disabled="isSaving"
+              @click="closeModal"
+            >
+              Abbrechen
+            </button>
+            <button
+              type="submit"
+              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
+              :disabled="isSaving"
+            >
+              <Loader2
+                v-if="isSaving"
+                :size="20"
+                class="animate-spin mr-2"
+              /><span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
+            </button>
           </div>
         </form>
       </div>