Refactor admin panel into categorized navigation

2026-06-17 12:37:17 +02:00
parent 92dd6f7432
commit 953257bcef
11 changed files with 901 additions and 660 deletions
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from '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 reviewSaving = ref<number | null>(null)
+const adminMessage = ref('')
+const adminError = ref('')
+
+const reviewForms = reactive<Record<number, {
+  displayName: string
+  channelSlug: string
+  platform: string
+}>>({})
+
+const seasonDetail = computed(() => store.adminSeasonDetail)
+const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
+
+watch(
+  seasonDetail,
+  (detail) => {
+    for (const nomination of detail.pendingNominations) {
+      reviewForms[nomination.id] = {
+        displayName: nomination.candidateText,
+        channelSlug: '',
+        platform: 'Twitch',
+      }
+    }
+  },
+  { immediate: true },
+)
+
+async function approveNomination(nominationId: number) {
+  if (!selectedSeasonId.value) return
+
+  reviewSaving.value = nominationId
+  adminMessage.value = ''
+  adminError.value = ''
+
+  try {
+    await store.approveAdminNomination(nominationId, selectedSeasonId.value, reviewForms[nominationId])
+    adminMessage.value = 'Nominierung wurde in die Kandidatenliste uebernommen.'
+  } catch (error) {
+    adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht uebernommen werden.'
+  } finally {
+    reviewSaving.value = null
+  }
+}
+
+async function rejectNomination(nominationId: number) {
+  if (!selectedSeasonId.value) return
+
+  reviewSaving.value = nominationId
+  adminMessage.value = ''
+  adminError.value = ''
+
+  try {
+    await store.rejectAdminNomination(nominationId, selectedSeasonId.value)
+    adminMessage.value = 'Nominierung wurde aus der Review Queue entfernt.'
+  } catch (error) {
+    adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht verworfen werden.'
+  } finally {
+    reviewSaving.value = null
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <AdminSeasonToolbar />
+
+    <Card class="p-7">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Review Queue</h2>
+          <p class="mt-2 text-sm text-slate-500">Freitext-Nominierungen und Alias-Faelle, die das Team direkt in Kandidaten ueberfuehren oder verwerfen kann.</p>
+        </div>
+        <span class="text-sm uppercase tracking-[0.2em] text-slate-500">
+          {{ seasonDetail.pendingNominations.length }} offen
+        </span>
+      </div>
+
+      <p v-if="adminMessage" class="mt-6 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-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
+        {{ adminError }}
+      </p>
+
+      <div class="mt-6 space-y-4">
+        <div
+          v-for="nomination in seasonDetail.pendingNominations"
+          :key="nomination.id"
+          class="rounded-[26px] border border-violet-100 bg-white/90 p-5"
+        >
+          <div class="flex flex-wrap items-start justify-between gap-4">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">{{ nomination.categoryName }}</p>
+              <h3 class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ nomination.candidateText }}</h3>
+              <p class="mt-2 text-sm text-slate-500">
+                Von {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
+              </p>
+            </div>
+            <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
+              ID {{ nomination.id }}
+            </div>
+          </div>
+
+          <div class="mt-5 grid gap-4 md:grid-cols-3">
+            <input
+              v-model="reviewForms[nomination.id].displayName"
+              type="text"
+              class="rounded-2xl border border-violet-200 px-4 py-3"
+              placeholder="Display Name"
+            />
+            <input
+              v-model="reviewForms[nomination.id].channelSlug"
+              type="text"
+              class="rounded-2xl border border-violet-200 px-4 py-3"
+              placeholder="@channel"
+            />
+            <input
+              v-model="reviewForms[nomination.id].platform"
+              type="text"
+              class="rounded-2xl border border-violet-200 px-4 py-3"
+              placeholder="Platform"
+            />
+          </div>
+
+          <div class="mt-4 flex flex-wrap justify-end gap-3">
+            <Button :disabled="reviewSaving === nomination.id" variant="secondary" @click="rejectNomination(nomination.id)">
+              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
+            </Button>
+            <Button :disabled="reviewSaving === nomination.id" @click="approveNomination(nomination.id)">
+              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
+            </Button>
+          </div>
+        </div>
+
+        <p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
+          Keine offenen Review-Faelle in der aktuell gewaehlten Season.
+        </p>
+      </div>
+    </Card>
+  </div>
+</template>