Implement member management enhancements; add bulk import functionality and duplicate checking based on geburtsdatum. Update API to support new fields and improve error handling for member data submissions. Refactor member-related components for better user experience and data validation.

pages/mitgliederbereich/mitglieder.vue

@@ -16,6 +16,16 @@
             <component :is="viewMode === 'cards' ? Table2 : Grid3x3" :size="20" class="mr-2" />
             {{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
           </button>
+          <button
+            v-if="canEdit"
+            @click="showBulkImportModal = true"
+            class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors"
+          >
+            <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"></path>
+            </svg>
+            Bulk-Import
+          </button>
           <button
             v-if="canEdit"
             @click="openAddModal"
@@ -234,6 +244,18 @@
               </div>
             </div>
 
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2">Geburtsdatum *</label>
+              <input
+                v-model="formData.geburtsdatum"
+                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"
+              />
+              <p class="text-xs text-gray-500 mt-1">Wird zur eindeutigen Identifizierung benötigt</p>
+            </div>
+
             <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
               <input
@@ -300,6 +322,144 @@
           </form>
         </div>
       </div>
+
+      <!-- Bulk Import Modal -->
+      <div
+        v-if="showBulkImportModal"
+        class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
+        @click.self="closeBulkImportModal"
+      >
+        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-8">
+          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
+            Bulk-Import von Mitgliedern
+          </h2>
+
+          <!-- CSV Upload Section -->
+          <div class="mb-6">
+            <label class="block text-sm font-medium text-gray-700 mb-2">CSV-Datei hochladen</label>
+            <div 
+              @click="triggerBulkFileInput"
+              @dragover.prevent
+              @dragenter.prevent="isDragOver = true"
+              @dragleave.prevent="isDragOver = false"
+              @drop.prevent="handleBulkFileDrop"
+              class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-400 hover:bg-primary-50 transition-colors cursor-pointer"
+              :class="{ 'border-primary-400 bg-primary-50': isDragOver }"
+            >
+              <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" 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"></path>
+              </svg>
+              <p class="text-lg font-medium text-gray-900 mb-2">CSV-Datei hochladen</p>
+              <p class="text-sm text-gray-600 mb-4">Klicken Sie hier oder ziehen Sie eine CSV-Datei hierher</p>
+              <p v-if="bulkSelectedFile" class="text-sm text-primary-600 font-medium">{{ bulkSelectedFile.name }}</p>
+            </div>
+            <input 
+              ref="bulkFileInput"
+              type="file" 
+              accept=".csv"
+              @change="handleBulkFileSelect"
+              class="hidden"
+            />
+          </div>
+
+          <!-- CSV Format Info -->
+          <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-6">
+            <h4 class="text-sm font-medium text-blue-800 mb-2">Erwartetes CSV-Format:</h4>
+            <div class="text-xs text-blue-700 space-y-1">
+              <p>• Erste Zeile: Spaltenüberschriften (firstName, lastName, geburtsdatum, email, phone, address, notes)</p>
+              <p>• <strong>Pflichtfelder:</strong> firstName, lastName, geburtsdatum</p>
+              <p>• <strong>Geburtsdatum:</strong> Format YYYY-MM-DD (z.B. 1990-01-15)</p>
+              <p>• Trennzeichen: Komma (,) oder Semikolon (;)</p>
+            </div>
+          </div>
+
+          <!-- Preview Section -->
+          <div v-if="bulkPreviewData.length > 0" class="mb-6">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Vorschau ({{ bulkPreviewData.length }} Einträge)</h3>
+            <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
+              <table class="min-w-full divide-y divide-gray-200 text-sm">
+                <thead class="bg-gray-50 sticky top-0">
+                  <tr>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Vorname</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Nachname</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">Geburtsdatum</th>
+                    <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">E-Mail</th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                  <tr v-for="(row, index) in bulkPreviewData.slice(0, 10)" :key="index" class="hover:bg-gray-50">
+                    <td class="px-3 py-2">{{ row.firstName || '-' }}</td>
+                    <td class="px-3 py-2">{{ row.lastName || '-' }}</td>
+                    <td class="px-3 py-2">{{ row.geburtsdatum || '-' }}</td>
+                    <td class="px-3 py-2">{{ row.email || '-' }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div v-if="bulkPreviewData.length > 10" class="px-3 py-2 text-xs text-gray-500 bg-gray-50 text-center">
+                ... und {{ bulkPreviewData.length - 10 }} weitere
+              </div>
+            </div>
+          </div>
+
+          <!-- Import Results -->
+          <div v-if="bulkImportResults" class="mb-6">
+            <div class="bg-gray-50 rounded-lg p-4">
+              <h3 class="text-lg font-semibold text-gray-900 mb-3">Import-Ergebnisse</h3>
+              <div class="grid grid-cols-3 gap-4 mb-4">
+                <div class="text-center">
+                  <div class="text-2xl font-bold text-green-600">{{ bulkImportResults.summary.imported }}</div>
+                  <div class="text-sm text-gray-600">Importiert</div>
+                </div>
+                <div class="text-center">
+                  <div class="text-2xl font-bold text-yellow-600">{{ bulkImportResults.summary.duplicates }}</div>
+                  <div class="text-sm text-gray-600">Duplikate</div>
+                </div>
+                <div class="text-center">
+                  <div class="text-2xl font-bold text-red-600">{{ bulkImportResults.summary.errors }}</div>
+                  <div class="text-sm text-gray-600">Fehler</div>
+                </div>
+              </div>
+              
+              <div v-if="bulkImportResults.results.duplicates.length > 0" class="mt-4">
+                <h4 class="text-sm font-medium text-gray-700 mb-2">Duplikate:</h4>
+                <div class="text-xs text-gray-600 space-y-1 max-h-32 overflow-y-auto">
+                  <div v-for="dup in bulkImportResults.results.duplicates" :key="dup.index">
+                    Zeile {{ dup.index }}: {{ dup.member.firstName }} {{ dup.member.lastName }} - {{ dup.reason }}
+                  </div>
+                </div>
+              </div>
+              
+              <div v-if="bulkImportResults.results.errors.length > 0" class="mt-4">
+                <h4 class="text-sm font-medium text-gray-700 mb-2">Fehler:</h4>
+                <div class="text-xs text-red-600 space-y-1 max-h-32 overflow-y-auto">
+                  <div v-for="err in bulkImportResults.results.errors" :key="err.index">
+                    Zeile {{ err.index }}: {{ err.error }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end space-x-4 pt-4">
+            <button
+              type="button"
+              @click="closeBulkImportModal"
+              class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+              :disabled="isBulkImporting"
+            >
+              Schließen
+            </button>
+            <button
+              @click="processBulkImport"
+              :disabled="!bulkPreviewData.length || isBulkImporting"
+              class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center disabled:bg-gray-400"
+            >
+              <Loader2 v-if="isBulkImporting" :size="20" class="animate-spin mr-2" />
+              <span>{{ isBulkImporting ? 'Importiert...' : 'Importieren' }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -318,9 +478,19 @@ const editingMember = ref(null)
 const errorMessage = ref('')
 const viewMode = ref('cards') // 'table' or 'cards'
 
+// Bulk import state
+const showBulkImportModal = ref(false)
+const bulkFileInput = ref(null)
+const bulkSelectedFile = ref(null)
+const bulkPreviewData = ref([])
+const isBulkImporting = ref(false)
+const bulkImportResults = ref(null)
+const isDragOver = ref(false)
+
 const formData = ref({
   firstName: '',
   lastName: '',
+  geburtsdatum: '',
   email: '',
   phone: '',
   address: '',
@@ -355,6 +525,7 @@ const openAddModal = () => {
   formData.value = {
     firstName: '',
     lastName: '',
+    geburtsdatum: '',
     email: '',
     phone: '',
     address: '',
@@ -369,6 +540,7 @@ const openEditModal = (member) => {
   formData.value = {
     firstName: member.firstName || '',
     lastName: member.lastName || '',
+    geburtsdatum: member.geburtsdatum || '',
     email: member.email || '',
     phone: member.phone || '',
     address: member.address || '',
@@ -399,8 +571,18 @@ const saveMember = async () => {
 
     closeModal()
     await loadMembers()
+    if (window.showSuccessModal) {
+      window.showSuccessModal('Erfolg', 'Mitglied erfolgreich gespeichert.')
+    }
   } catch (error) {
-    errorMessage.value = error.data?.message || 'Fehler beim Speichern des Mitglieds.'
+    console.error('Fehler beim Speichern:', error)
+    const errorMsg = error.data?.message || error.message || 'Fehler beim Speichern des Mitglieds.'
+    errorMessage.value = errorMsg
+    
+    // If it's a duplicate error (409), show it prominently
+    if ((error.statusCode === 409 || error.status === 409) && window.showErrorModal) {
+      window.showErrorModal('Duplikat gefunden', errorMsg)
+    }
   } finally {
     isSaving.value = false
   }
@@ -435,6 +617,131 @@ const formatDate = (dateString) => {
   })
 }
 
+// Bulk import functions
+const triggerBulkFileInput = () => {
+  bulkFileInput.value?.click()
+}
+
+const handleBulkFileSelect = (event) => {
+  const file = event.target.files?.[0]
+  if (file) {
+    processBulkCSV(file)
+  }
+}
+
+const handleBulkFileDrop = (event) => {
+  isDragOver.value = false
+  const file = event.dataTransfer?.files?.[0]
+  if (file && file.type === 'text/csv') {
+    processBulkCSV(file)
+  }
+}
+
+const processBulkCSV = async (file) => {
+  bulkSelectedFile.value = file
+  bulkImportResults.value = null
+  
+  try {
+    const text = await file.text()
+    const lines = text.split('\n').filter(line => line.trim() !== '')
+    
+    if (lines.length < 2) {
+      window.showErrorModal('Fehler', 'CSV-Datei muss mindestens eine Kopfzeile und eine Datenzeile enthalten')
+      return
+    }
+    
+    // Detect delimiter
+    const parseCSVLine = (line) => {
+      const tabCount = (line.match(/\t/g) || []).length
+      const semicolonCount = (line.match(/;/g) || []).length
+      const delimiter = tabCount > semicolonCount ? '\t' : (semicolonCount > 0 ? ';' : ',')
+      return line.split(delimiter).map(value => value.trim().replace(/^"|"$/g, ''))
+    }
+    
+    // Parse header
+    const headers = parseCSVLine(lines[0]).map(h => h.toLowerCase())
+    
+    // Find column indices
+    const firstNameIdx = headers.findIndex(h => h.includes('firstname') || h.includes('vorname'))
+    const lastNameIdx = headers.findIndex(h => h.includes('lastname') || h.includes('nachname'))
+    const geburtsdatumIdx = headers.findIndex(h => h.includes('geburtsdatum') || h.includes('birthdate') || h.includes('geburt'))
+    const emailIdx = headers.findIndex(h => h.includes('email') || h.includes('e-mail'))
+    const phoneIdx = headers.findIndex(h => h.includes('phone') || h.includes('telefon') || h.includes('tel'))
+    const addressIdx = headers.findIndex(h => h.includes('address') || h.includes('adresse'))
+    const notesIdx = headers.findIndex(h => h.includes('note') || h.includes('notiz') || h.includes('bemerkung'))
+    
+    if (firstNameIdx === -1 || lastNameIdx === -1 || geburtsdatumIdx === -1) {
+      window.showErrorModal('Fehler', 'CSV muss Spalten für firstName, lastName und geburtsdatum enthalten')
+      return
+    }
+    
+    // Parse data rows
+    bulkPreviewData.value = lines.slice(1).map((line, index) => {
+      const values = parseCSVLine(line)
+      return {
+        firstName: values[firstNameIdx] || '',
+        lastName: values[lastNameIdx] || '',
+        geburtsdatum: values[geburtsdatumIdx] || '',
+        email: emailIdx !== -1 ? (values[emailIdx] || '') : '',
+        phone: phoneIdx !== -1 ? (values[phoneIdx] || '') : '',
+        address: addressIdx !== -1 ? (values[addressIdx] || '') : '',
+        notes: notesIdx !== -1 ? (values[notesIdx] || '') : ''
+      }
+    }).filter(row => row.firstName && row.lastName && row.geburtsdatum)
+    
+  } catch (error) {
+    console.error('Fehler beim Parsen der CSV:', error)
+    window.showErrorModal('Fehler', 'Fehler beim Lesen der CSV-Datei: ' + error.message)
+  }
+}
+
+const processBulkImport = async () => {
+  if (!bulkPreviewData.value.length) return
+  
+  isBulkImporting.value = true
+  bulkImportResults.value = null
+  
+  try {
+    const response = await $fetch('/api/members/bulk', {
+      method: 'POST',
+      body: {
+        members: bulkPreviewData.value
+      }
+    })
+    
+    bulkImportResults.value = response
+    
+    if (response.summary.imported > 0) {
+      await loadMembers()
+      window.showSuccessModal(
+        'Import erfolgreich', 
+        `${response.summary.imported} Mitglieder wurden erfolgreich importiert.`
+      )
+    }
+    
+    if (response.summary.duplicates > 0 || response.summary.errors > 0) {
+      // Results are already displayed in the modal
+    }
+  } catch (error) {
+    console.error('Fehler beim Bulk-Import:', error)
+    const errorMsg = error.data?.message || error.message || 'Fehler beim Import'
+    window.showErrorModal('Import-Fehler', errorMsg)
+  } finally {
+    isBulkImporting.value = false
+  }
+}
+
+const closeBulkImportModal = () => {
+  showBulkImportModal.value = false
+  bulkSelectedFile.value = null
+  bulkPreviewData.value = []
+  bulkImportResults.value = null
+  isDragOver.value = false
+  if (bulkFileInput.value) {
+    bulkFileInput.value.value = ''
+  }
+}
+
 onMounted(() => {
   loadMembers()
 })