Seite umbauen mit Komponenten und admin-auth

src/routes/admin/anmeldungen/+page.svelte

@@ -1,7 +1,13 @@
+<!-- src/routes/admin/anmeldungen/+page.svelte -->
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import AnmeldungenTable from '$lib/components/AnmeldungenTable.svelte';
+  import DienststellenDialog from '$lib/components/DienststellenDialog.svelte';
+  import AdminHeader from '$lib/components/AdminHeader.svelte';
+  
   interface Anmeldung {
-	  pdfs: any;
+    pdfs: { pfad: string }[];
     anrede: string;
     vorname: string;
     nachname: string;
@@ -17,34 +23,58 @@
   }
 
   let anmeldungen: Anmeldung[] = [];
-  let auswahlDialogOffen = false;
-  let auswahlAnmeldungId: number | null = null;
-  let ausgewaehlteDienststelleId: number | null = null;
-  let aktuelleWuensche: { id: number, name: string }[] = [];
+  let isLoading = true;
+  let error = '';
+  
+  // Dialog state
+  let showDialog = false;
+  let selectedAnmeldungId: number | null = null;
+  let selectedDienststelleId: number | null = null;
+  let availableWishes: { id: number, name: string }[] = [];
 
-  function oeffneAuswahl(id: number) {
-    const anmeldung = anmeldungen.find(a => a.id === id);
+  async function loadAnmeldungen() {
+    try {
+      isLoading = true;
+      error = '';
+      
+      const res = await fetch('/api/admin/anmeldungen');
+      
+      if (!res.ok) {
+        throw new Error(`Fehler beim Laden: ${res.status}`);
+      }
+      
+      anmeldungen = await res.json();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Unbekannter Fehler';
+      console.error('Fehler beim Laden der Anmeldungen:', err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  function handleAccept(event: CustomEvent<{id: number}>) {
+    const anmeldung = anmeldungen.find(a => a.id === event.detail.id);
     if (!anmeldung) return;
 
-    aktuelleWuensche = [
+    availableWishes = [
       anmeldung.wunsch1 && { id: anmeldung.wunsch1.id, name: `1. Wunsch: ${anmeldung.wunsch1.name}` },
       anmeldung.wunsch2 && { id: anmeldung.wunsch2.id, name: `2. Wunsch: ${anmeldung.wunsch2.name}` },
       anmeldung.wunsch3 && { id: anmeldung.wunsch3.id, name: `3. Wunsch: ${anmeldung.wunsch3.name}` }
     ].filter(Boolean) as { id: number, name: string }[];
 
-    ausgewaehlteDienststelleId = aktuelleWuensche[0]?.id ?? null;
-    auswahlAnmeldungId = id;
-    auswahlDialogOffen = true;
-  }  
-  
-  async function bestaetigeAnnahme() {
-    if (!auswahlAnmeldungId || !ausgewaehlteDienststelleId) return;
+    selectedDienststelleId = availableWishes[0]?.id ?? null;
+    selectedAnmeldungId = event.detail.id;
+    showDialog = true;
+  }
+
+  async function handleConfirmAccept(event: CustomEvent<{dienststelleId: number}>) {
+    if (!selectedAnmeldungId) return;
 
     try {
-      const res = await fetch(`/api/admin/anmeldungen?id=${auswahlAnmeldungId}`, {
+      const res = await fetch(`/api/admin/anmeldungen?id=${selectedAnmeldungId}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ dienststelleId: ausgewaehlteDienststelleId })
+        body: JSON.stringify({ dienststelleId: event.detail.dienststelleId })
       });
 
       if (!res.ok) {
@@ -52,154 +82,121 @@
         throw new Error(`Fehler beim Annehmen (${res.status}): ${errorText}`);
       }
 
-      auswahlDialogOffen = false;
-      auswahlAnmeldungId = null;
-      await ladeAnmeldungen();
-    } catch (error) {
-      console.error(error);
-      alert('Fehler beim Annehmen der Anmeldung.\n' + (error as Error).message);
+      showDialog = false;
+      selectedAnmeldungId = null;
+      await loadAnmeldungen();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Fehler beim Annehmen';
+      console.error(err);
     }
   }
 
-  async function ladeAnmeldungen() {
-    const res = await fetch('/api/admin/anmeldungen');
-    anmeldungen = await res.json();
+  async function handleReject(event: CustomEvent<{id: number}>) {
+    if (!confirm('Diese Anmeldung wirklich ablehnen?')) return;
+    
+    try {
+      const res = await fetch(`/api/admin/anmeldungen?id=${event.detail.id}`, { 
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'reject' })
+      });
+      
+      if (!res.ok) {
+        throw new Error(`Fehler beim Ablehnen: ${res.status}`);
+      }
+      
+      await loadAnmeldungen();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Fehler beim Ablehnen';
+      console.error(err);
+    }
   }
 
-  async function loeschen(id: number) {
+  async function handleDelete(event: CustomEvent<{id: number}>) {
     if (!confirm('Diese Anmeldung wirklich löschen?')) return;
+    
     try {
-      const res = await fetch(`/api/admin/anmeldungen?id=${id}`, { method: 'DELETE' });
+      const res = await fetch(`/api/admin/anmeldungen?id=${event.detail.id}`, { 
+        method: 'DELETE' 
+      });
+      
       if (!res.ok) {
-        const errorText = await res.text();
-        throw new Error(`Fehler beim Löschen (${res.status}): ${errorText}`);
+        throw new Error(`Fehler beim Löschen: ${res.status}`);
       }
-      await ladeAnmeldungen();
-    } catch (error) {
-      console.error(error);
-      alert('Fehler beim Löschen der Anmeldung.\n' + (error as Error).message);
+      
+      await loadAnmeldungen();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Fehler beim Löschen';
+      console.error(err);
     }
   }
 
-  async function annehmen(id: number) {
-    if (!confirm('Diese Anmeldung wirklich annehmen?')) return;
-    try {
-      const res = await fetch(`/api/admin/anmeldungen?id=${id}`, { method: 'POST' });
-      if (!res.ok) {
-        const errorText = await res.text();
-        throw new Error(`Fehler beim Annehmen (${res.status}): ${errorText}`);
-      }
-      await ladeAnmeldungen();
-    } catch (error) {
-      console.error(error);
-      alert('Fehler beim Annehmen der Anmeldung.\n' + (error as Error).message);
-    }
+  function closeDialog() {
+    showDialog = false;
+    selectedAnmeldungId = null;
   }
 
-  async function ablehnen(id: number) {
-    if (!confirm('Diese Anmeldung wirklich annehmen?')) return;
-    try {
-      const res = await fetch(`/api/admin/anmeldungen?id=${id}`, { method: 'POST' });
-      if (!res.ok) {
-        const errorText = await res.text();
-        throw new Error(`Fehler beim Annehmen (${res.status}): ${errorText}`);
-      }
-      await ladeAnmeldungen();
-    } catch (error) {
-      console.error(error);
-      alert('Fehler beim Annehmen der Anmeldung.\n' + (error as Error).message);
-    }
-  }
+  onMount(loadAnmeldungen);
+</script>
 
-  onMount(ladeAnmeldungen);
-</script> 
+<svelte:head>
+  <title>Anmeldungen verwalten - Admin</title>
+</svelte:head>
 
-<div class="p-6 max-w-8xl mx-auto">
-    <h1 class="text-2xl font-bold mb-4 text-center">Alle Anmeldungen</h1>
-    <table class="w-full border text-sm">
-      <thead>
-        <tr class="bg-gray-200">
-          <th class="p-2 text-left">Name</th>
-          <th class="p-2 text-left">E-Mail</th>
-          <th class="p-2 text-left">Wunsch Dienststelle</th>
-          <th class="p-2 text-left">Note Deutsch</th>
-          <th class="p-2 text-left">Note Mathe</th>
-          <th class="p-2 text-left">Sozialverhalten</th>
-          <th class="p-2 text-left">Datum</th>
-          <th class="p-2 text-left">Dateien</th>
-          <th class="p-2 text-left">Aktionen</th>
-        </tr>
-      </thead>
-      <tbody>
-        {#each anmeldungen as a}
-          <tr class="border-t">
-            <td class="p-2">{a.anrede} {a.vorname} {a.nachname}</td>
-            <td class="p-2">{a.email}</td>
-            <td class="p-2">
-              1: {a.wunsch1?.name}<br><br>
-              2: {a.wunsch2?.name}<br><br>
-              3: {a.wunsch3?.name}
-            </td>
-            <td class="p-2">{a.noteDeutsch || '—'}</td>
-            <td class="p-2">{a.noteMathe || '—'}</td>
-            <td class="p-2">{a.sozialverhalten || '—'}</td>
-            <td class="p-2">{new Date(a.timestamp).toLocaleDateString()}</td>
-            <td class="p-2">
-              {#each a.pdfs as pdf}
-              <li>
-                <a href={pdf.pfad} target="_blank" class="text-blue-600 hover:underline">
-                  PDF ansehen
-                </a>
-              </li>
-              {/each}
-              </td>
-              <td class="p-2 text-right">
-                <button
-                  class="text-green-600 hover:underline"
-                  on:click={() => oeffneAuswahl(a.id)}>
-                  Annehmen
-                </button><br><br>
-                <button
-                  class="text-blue-600 hover:underline"
-                  on:click={() => ablehnen(a.id)}>
-                  Ablehnen
-                </button><br><br>
-                <button                
-                  class="text-red-600 hover:underline"
-                  on:click={() => loeschen(a.id)}>
-                  Löschen
-                </button>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
+<div class="min-h-screen bg-gray-50">
+  <AdminHeader 
+    title="Anmeldungen verwalten" 
+    showBackButton={true}
+  />
 
-      <button
-          on:click={async () => {
-          await fetch('/api/admin/logout', { method: 'POST' });
-          location.reload();
-          }}
-          class="bg-red-600  text-white px-4 py-3 rounded text-center hover:bg-red-700">
-            Logout
-      </button>
+  <main class="max-w-7xl mx-auto px-4 py-6">
+    {#if error}
+      <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">Fehler</h3>
+            <p class="mt-1 text-sm text-red-700">{error}</p>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    {#if isLoading}
+      <div class="flex justify-center items-center h-64">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+        <span class="ml-3 text-gray-600">Lade Anmeldungen...</span>
+      </div>
+    {:else if anmeldungen.length === 0}
+      <div class="text-center py-12">
+        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+        <h3 class="mt-2 text-sm font-medium text-gray-900">Keine Anmeldungen</h3>
+        <p class="mt-1 text-sm text-gray-500">Es sind noch keine Praktikumsanmeldungen eingegangen.</p>
+      </div>
+    {:else}
+      <div class="bg-white shadow-sm rounded-lg overflow-hidden">
+        <AnmeldungenTable 
+          {anmeldungen}
+          on:accept={handleAccept}
+          on:reject={handleReject}
+          on:delete={handleDelete}
+        />
+      </div>
+    {/if}
+  </main>
 </div>
 
-{#if auswahlDialogOffen}
-  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white p-6 rounded shadow max-w-sm w-full space-y-4">
-      <h2 class="text-lg font-bold">Dienststelle auswählen</h2>
-
-      <select bind:value={ausgewaehlteDienststelleId} class="w-full border p-2 rounded">
-        {#each aktuelleWuensche as w}
-          <option value={w.id}>{w.name}</option>
-        {/each}
-      </select>
-
-      <div class="flex justify-end gap-2">
-        <button on:click={() => auswahlDialogOffen = false} class="px-4 py-2 bg-gray-200 rounded">Abbrechen</button>
-        <button on:click={bestaetigeAnnahme} class="px-4 py-2 bg-green-600 text-white rounded">Zuweisen</button>
-      </div>
-    </div>
-  </div>
+{#if showDialog}
+  <DienststellenDialog
+    wishes={availableWishes}
+    selectedId={selectedDienststelleId}
+    on:confirm={handleConfirmAccept}
+    on:cancel={closeDialog}
+  />
 {/if}