Entferne die Sortieroptionen und passe die Mitgliederanzeige an, um die Sortierung direkt aus der Mitgliederliste zu entfernen

pages/mitgliederbereich/mitglieder.vue

@@ -9,38 +9,37 @@
           <div class="w-24 h-1 bg-primary-600 mb-4" />
         </div>
         <div class="flex items-center space-x-3">
-          <!-- ...Buttons ... -->
-        </div>
-      </div>
-      <!-- Sortieroptionen -->
-      <div class="mb-4 flex items-center space-x-2">
-        <label for="sortMode" class="text-sm text-gray-700">Sortieren nach:</label>
-        <select id="sortMode" v-model="sortMode" class="px-2 py-1 border rounded">
-          <option value="name">Name (Vorname Nachname)</option>
-          <option value="lastname">Nachname (Nachname Vorname)</option>
-          <option value="birthday">Geburtstag</option>
-        </select>
-                      </div>
-            <button
-              v-if="canEdit"
-              class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
-              @click="showBulkImportModal = true"
+          <button
+            class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors"
+            @click="viewMode = viewMode === 'cards' ? 'table' : 'cards'"
+          >
+            <component
+              :is="viewMode === 'cards' ? Table2 : Grid3x3"
+              :size="20"
+              class="mr-2"
+            />
+            {{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
+          </button>
+          <button
+            v-if="canEdit"
+            class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
+            @click="showBulkImportModal = true"
+          >
+            <svg
+              class="w-5 h-5 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
             >
-              <svg
-                class="w-5 h-5 mr-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                />
-              </svg>
-              Bulk-Import
-            </button>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+              />
+            </svg>
+            Bulk-Import
+          </button>
           <button
             v-if="canEdit"
             class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
@@ -100,7 +99,7 @@
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
               <tr
-                v-for="member in sortedMembers"
+                v-for="member in members"
                 :key="member.id"
                 class="hover:bg-gray-50"
               >
@@ -108,11 +107,6 @@
                   <div class="text-sm font-medium text-gray-900">
                     {{ member.name }}
                   </div>
-                    <div v-if="member.birthdateVisible && member.geburtsdatum">
-                      <span class="text-xs text-primary-600">
-                        Geburtstag: {{ formatBirthdate(member.geburtsdatum) }}
-                      </span>
-                    </div>
                   <div
                     v-if="member.notes"
                     class="text-xs text-gray-500"
@@ -239,7 +233,7 @@
         class="space-y-4"
       >
         <div
-          v-for="member in sortedMembers"
+          v-for="member in members"
           :key="member.id"
           class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
         >
@@ -741,6 +735,8 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -797,37 +793,6 @@ const loadMembers = async () => {
     isLoading.value = false
   }
 }
-// ...existing code...
-const sortMode = ref('name')
-
-const sortedMembers = computed(() => {
-  if (!members.value) return []
-  // Filtere den Admin-Account heraus
-  const arr = members.value.filter(m => m.email !== 'admin@harheimertc.de')
-  if (sortMode.value === 'name') {
-    return arr.sort((a, b) => {
-      const an = (a.firstName || '') + (a.lastName || '')
-      const bn = (b.firstName || '') + (b.lastName || '')
-      return an.localeCompare(bn, 'de', { sensitivity: 'base' })
-    })
-  } else if (sortMode.value === 'lastname') {
-    return arr.sort((a, b) => {
-      const an = (a.lastName || '') + (a.firstName || '')
-      const bn = (b.lastName || '') + (b.firstName || '')
-      return an.localeCompare(bn, 'de', { sensitivity: 'base' })
-    })
-  } else if (sortMode.value === 'birthday') {
-    return arr.sort((a, b) => {
-      const ad = a.geburtsdatum ? new Date(a.geburtsdatum) : new Date(0)
-      const bd = b.geburtsdatum ? new Date(b.geburtsdatum) : new Date(0)
-      return ad.getMonth() !== bd.getMonth()
-        ? ad.getMonth() - bd.getMonth()
-        : ad.getDate() - bd.getDate()
-    })
-  }
-  return arr
-})
-// ...existing code...
 
 const openAddModal = () => {
   editingMember.value = null
@@ -948,13 +913,6 @@ const formatDate = (dateString) => {
     minute: '2-digit'
   })
 }
-const formatBirthdate = (dateString) => {
-  if (!dateString) return ''
-  const date = new Date(dateString)
-  if (isNaN(date.getTime())) return ''
-  // Zeige nur Tag und Monat
-  return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })
-}
 
 // Bulk import functions
 const triggerBulkFileInput = () => {