Expand admin navigation and pages

2026-06-18 00:21:40 +02:00
parent 178f014a4a
commit 0fa763667d
9 changed files with 1097 additions and 35 deletions
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import { CheckCircle2, Database, Settings, ShieldCheck } from '@lucide/vue'
+
+import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
+import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
+import Button from '../../components/ui/Button.vue'
+import Card from '../../components/ui/Card.vue'
+import { useAwardsStore } from '../../stores/awards'
+
+const store = useAwardsStore()
+const saving = ref(false)
+const adminMessage = ref('')
+const adminError = ref('')
+const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
+const seasonDetail = computed(() => store.adminSeasonDetail)
+const form = reactive({
+  currentPhase: '',
+  isCurrent: false,
+})
+
+const checks = computed(() => [
+  {
+    label: 'Backend verbunden',
+    value: store.apiMode === 'api',
+    note: store.apiMode === 'api' ? 'Admin-Daten kommen aus der API.' : 'Fallback-Daten aktiv oder API nicht erreichbar.',
+    icon: Database,
+  },
+  {
+    label: 'Public-Jahr gesetzt',
+    value: seasonDetail.value.isCurrent,
+    note: seasonDetail.value.isCurrent ? 'Dieses Jahr ist oeffentlich markiert.' : 'Dieses Jahr ist aktuell intern.',
+    icon: CheckCircle2,
+  },
+  {
+    label: 'Review-Schutz aktiv',
+    value: store.admin.riskFlags.length >= 0,
+    note: `${store.admin.riskFlags.length} Risikohinweise im Admin-Kontext.`,
+    icon: ShieldCheck,
+  },
+])
+
+watch(
+  seasonDetail,
+  (detail) => {
+    form.currentPhase = detail.currentPhase
+    form.isCurrent = detail.isCurrent
+  },
+  { immediate: true },
+)
+
+async function saveSettings() {
+  if (!selectedSeasonId.value) return
+  saving.value = true
+  adminMessage.value = ''
+  adminError.value = ''
+  try {
+    await store.updateAdminSeason(selectedSeasonId.value, {
+      currentPhase: form.currentPhase,
+      isCurrent: form.isCurrent,
+    })
+    adminMessage.value = 'Einstellungen gespeichert.'
+  } catch (error) {
+    adminError.value = error instanceof Error ? error.message : 'Einstellungen konnten nicht gespeichert werden.'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <AdminPageHeader
+      eyebrow="Einstellungen"
+      title="Public-Status und Systemchecks"
+      description="Hier liegen bewusst nur Einstellungen, die das aktuelle Award-Jahr oder die Admin-Betriebsbereitschaft betreffen. Kategorie-Inhalte bleiben in Kategorien/Jahre."
+      :icon="Settings"
+    />
+
+    <AdminSeasonToolbar />
+
+    <section class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
+      <Card class="p-6">
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Award-Jahr</p>
+        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Sichtbarkeit steuern</h2>
+        <p class="mt-2 text-sm leading-6 text-slate-500">
+          Diese Einstellungen werden gespeichert und beeinflussen, welches Jahr als aktueller Public-Kontext gilt.
+        </p>
+
+        <div class="mt-6 space-y-5">
+          <label class="block space-y-2">
+            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Phase</span>
+            <input v-model="form.currentPhase" class="h-12 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Community Voting" />
+          </label>
+          <label class="flex cursor-pointer gap-4 rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 transition hover:bg-violet-50">
+            <input v-model="form.isCurrent" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" />
+            <span>
+              <span class="block font-semibold text-slate-900">Dieses Award-Jahr oeffentlich markieren</span>
+              <span class="mt-1 block text-sm leading-6 text-slate-500">Aktiviert dieses Jahr als Public-Kontext fuer Community, Voting und spaeter Archiv.</span>
+            </span>
+          </label>
+        </div>
+
+        <p v-if="adminMessage" class="mt-5 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
+        <p v-if="adminError" class="mt-5 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>
+
+        <div class="mt-6 flex justify-end">
+          <Button :disabled="saving || !selectedSeasonId" @click="saveSettings">{{ saving ? 'Speichert ...' : 'Einstellungen speichern' }}</Button>
+        </div>
+      </Card>
+
+      <Card class="p-6">
+        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Checks</p>
+        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Betriebsstatus</h2>
+        <div class="mt-6 space-y-3">
+          <div v-for="check in checks" :key="check.label" class="flex gap-4 rounded-[22px] border border-violet-100 bg-white/90 p-4">
+            <div class="grid h-11 w-11 shrink-0 place-items-center rounded-2xl" :class="check.value ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
+              <component :is="check.icon" class="h-5 w-5" />
+            </div>
+            <div>
+              <p class="font-semibold text-slate-900">{{ check.label }}</p>
+              <p class="mt-1 text-sm leading-6 text-slate-500">{{ check.note }}</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </section>
+  </div>
+</template>