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/CmsTermine.vue

@@ -11,36 +11,72 @@
         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" />
+        <Plus
+          :size="20"
+          class="mr-2"
+        />
         Termin hinzufügen
       </button>
     </div>
 
     <!-- Loading State -->
-    <div v-if="isLoading" class="flex items-center justify-center py-12">
-      <Loader2 :size="40" class="animate-spin text-primary-600" />
+    <div
+      v-if="isLoading"
+      class="flex items-center justify-center py-12"
+    >
+      <Loader2
+        :size="40"
+        class="animate-spin text-primary-600"
+      />
     </div>
 
     <!-- Termine Table -->
-    <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">Datum</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Uhrzeit</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titel</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beschreibung</th>
-              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</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">
+                Datum
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Uhrzeit
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Titel
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Beschreibung
+              </th>
+              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Kategorie
+              </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="termin in termine" :key="`${termin.datum}-${termin.uhrzeit || ''}-${termin.titel}`" class="hover:bg-gray-50">
-              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ formatDate(termin.datum) }}</td>
-              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">{{ termin.uhrzeit || '-' }}</td>
-              <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ termin.titel }}</td>
-              <td class="px-4 py-3 text-sm text-gray-600">{{ termin.beschreibung || '-' }}</td>
+            <tr
+              v-for="termin in termine"
+              :key="`${termin.datum}-${termin.uhrzeit || ''}-${termin.titel}`"
+              class="hover:bg-gray-50"
+            >
+              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
+                {{ formatDate(termin.datum) }}
+              </td>
+              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
+                {{ termin.uhrzeit || '-' }}
+              </td>
+              <td class="px-4 py-3 text-sm font-medium text-gray-900">
+                {{ termin.titel }}
+              </td>
+              <td class="px-4 py-3 text-sm text-gray-600">
+                {{ termin.beschreibung || '-' }}
+              </td>
               <td class="px-4 py-3 whitespace-nowrap">
                 <span
                   :class="{
@@ -54,56 +90,140 @@
                 >{{ termin.kategorie }}</span>
               </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(termin)"><Pencil :size="18" /></button>
-                <button class="text-red-600 hover:text-red-900" title="Löschen" @click="confirmDelete(termin)"><Trash2 :size="18" /></button>
+                <button
+                  class="text-gray-600 hover:text-gray-900"
+                  title="Bearbeiten"
+                  @click="openEditModal(termin)"
+                >
+                  <Pencil :size="18" />
+                </button>
+                <button
+                  class="text-red-600 hover:text-red-900"
+                  title="Löschen"
+                  @click="confirmDelete(termin)"
+                >
+                  <Trash2 :size="18" />
+                </button>
               </td>
             </tr>
           </tbody>
         </table>
       </div>
-      <div v-if="termine.length === 0" class="text-center py-12 text-gray-500">Keine Termine vorhanden.</div>
+      <div
+        v-if="termine.length === 0"
+        class="text-center py-12 text-gray-500"
+      >
+        Keine Termine vorhanden.
+      </div>
     </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 p-8">
-        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">{{ isEditing ? 'Termin bearbeiten' : 'Termin hinzufügen' }}</h2>
-        <form class="space-y-4" @submit.prevent="saveTermin">
+        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
+          {{ isEditing ? 'Termin bearbeiten' : 'Termin hinzufügen' }}
+        </h2>
+        <form
+          class="space-y-4"
+          @submit.prevent="saveTermin"
+        >
           <div class="grid grid-cols-3 gap-4">
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">Datum *</label>
-              <input v-model="formData.datum" type="date" 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.datum"
+                type="date"
+                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">Uhrzeit</label>
-              <input v-model="formData.uhrzeit" type="time" 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.uhrzeit"
+                type="time"
+                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">Kategorie *</label>
-              <select v-model="formData.kategorie" 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">
-                <option value="Training">Training</option>
-                <option value="Punktspiel">Punktspiel</option>
-                <option value="Turnier">Turnier</option>
-                <option value="Veranstaltung">Veranstaltung</option>
-                <option value="Sonstiges">Sonstiges</option>
+              <select
+                v-model="formData.kategorie"
+                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"
+              >
+                <option value="Training">
+                  Training
+                </option>
+                <option value="Punktspiel">
+                  Punktspiel
+                </option>
+                <option value="Turnier">
+                  Turnier
+                </option>
+                <option value="Veranstaltung">
+                  Veranstaltung
+                </option>
+                <option value="Sonstiges">
+                  Sonstiges
+                </option>
               </select>
             </div>
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 mb-2">Titel *</label>
-            <input v-model="formData.titel" 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.titel"
+              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">Beschreibung</label>
-            <textarea v-model="formData.beschreibung" rows="3" 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" />
+            <textarea
+              v-model="formData.beschreibung"
+              rows="3"
+              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 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
+            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" />
+            <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>