Add table view and split name into firstName/lastName fields

pages/mitgliederbereich/mitglieder.vue

@@ -8,14 +8,23 @@
           </h1>
           <div class="w-24 h-1 bg-primary-600 mb-4" />
         </div>
-        <button
-          v-if="canEdit"
-          @click="openAddModal"
-          class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
-        >
-          <UserPlus :size="20" class="mr-2" />
-          Mitglied hinzufügen
-        </button>
+        <div class="flex items-center space-x-3">
+          <button
+            @click="viewMode = viewMode === 'cards' ? 'table' : 'cards'"
+            class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors"
+          >
+            <component :is="viewMode === 'cards' ? Table2 : Grid3x3" :size="20" class="mr-2" />
+            {{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
+          </button>
+          <button
+            v-if="canEdit"
+            @click="openAddModal"
+            class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
+          >
+            <UserPlus :size="20" class="mr-2" />
+            Mitglied hinzufügen
+          </button>
+        </div>
       </div>
 
       <!-- Loading State -->
@@ -23,7 +32,83 @@
         <Loader2 :size="40" class="animate-spin text-primary-600" />
       </div>
 
-      <!-- Members List -->
+      <!-- Table View -->
+      <div v-else-if="viewMode === 'table'" 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">Name</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-Mail</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefon</th>
+                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th v-if="canEdit" 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="member in members" :key="member.id" class="hover:bg-gray-50">
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="text-sm font-medium text-gray-900">{{ member.name }}</div>
+                  <div v-if="member.notes" class="text-xs text-gray-500">{{ member.notes }}</div>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <a v-if="member.email" :href="`mailto:${member.email}`" class="text-sm text-primary-600 hover:text-primary-800">
+                    {{ member.email }}
+                  </a>
+                  <span v-else class="text-sm text-gray-400">-</span>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <a v-if="member.phone" :href="`tel:${member.phone}`" class="text-sm text-primary-600 hover:text-primary-800">
+                    {{ member.phone }}
+                  </a>
+                  <span v-else class="text-sm text-gray-400">-</span>
+                </td>
+                <td class="px-4 py-3 whitespace-nowrap">
+                  <div class="flex items-center space-x-2">
+                    <span
+                      v-if="member.hasLogin"
+                      class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"
+                    >
+                      Login
+                    </span>
+                    <span
+                      :class="member.source === 'manual' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'"
+                      class="px-2 py-1 text-xs font-medium rounded-full"
+                    >
+                      {{ member.source === 'manual' ? 'Manuell' : 'System' }}
+                    </span>
+                  </div>
+                </td>
+                <td v-if="canEdit" class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
+                  <div v-if="member.editable" class="flex justify-end space-x-2">
+                    <button
+                      @click="openEditModal(member)"
+                      class="text-blue-600 hover:text-blue-900"
+                      title="Bearbeiten"
+                    >
+                      <Edit :size="18" />
+                    </button>
+                    <button
+                      @click="confirmDelete(member)"
+                      class="text-red-600 hover:text-red-900"
+                      title="Löschen"
+                    >
+                      <Trash2 :size="18" />
+                    </button>
+                  </div>
+                  <span v-else class="text-gray-400 text-xs">Nicht editierbar</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        
+        <div v-if="members.length === 0" class="text-center py-12 text-gray-500">
+          Keine Mitglieder gefunden.
+        </div>
+      </div>
+
+      <!-- Cards View -->
       <div v-else class="space-y-4">
         <div
           v-for="member in members"
@@ -114,15 +199,27 @@
           </h2>
 
           <form @submit.prevent="saveMember" class="space-y-4">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
-              <input
-                v-model="formData.name"
-                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 class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">Vorname *</label>
+                <input
+                  v-model="formData.firstName"
+                  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">Nachname *</label>
+                <input
+                  v-model="formData.lastName"
+                  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>
 
             <div>
@@ -197,7 +294,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { Users, UserPlus, Mail, Phone, MapPin, FileText, Clock, Edit, Trash2, Loader2, AlertCircle } from 'lucide-vue-next'
+import { Users, UserPlus, Mail, Phone, MapPin, FileText, Clock, Edit, Trash2, Loader2, AlertCircle, Table2, Grid3x3 } from 'lucide-vue-next'
 
 const authStore = useAuthStore()
 
@@ -207,9 +304,11 @@ const members = ref([])
 const showModal = ref(false)
 const editingMember = ref(null)
 const errorMessage = ref('')
+const viewMode = ref('table') // 'table' or 'cards'
 
 const formData = ref({
-  name: '',
+  firstName: '',
+  lastName: '',
   email: '',
   phone: '',
   address: '',
@@ -235,7 +334,8 @@ const loadMembers = async () => {
 const openAddModal = () => {
   editingMember.value = null
   formData.value = {
-    name: '',
+    firstName: '',
+    lastName: '',
     email: '',
     phone: '',
     address: '',
@@ -248,7 +348,8 @@ const openAddModal = () => {
 const openEditModal = (member) => {
   editingMember.value = member
   formData.value = {
-    name: member.name,
+    firstName: member.firstName || '',
+    lastName: member.lastName || '',
     email: member.email || '',
     phone: member.phone || '',
     address: member.address || '',