AzuTear
256 lines
12 KiB
Vue
256 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { computed, reactive, ref, watch } from 'vue'
|
|
import { CheckCircle2, Search, Sparkles, Trash2 } 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 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)
|
|
const reviewFilter = ref('')
|
|
const selectedNominationId = ref<number | null>(null)
|
|
const filteredNominations = computed(() => {
|
|
const query = reviewFilter.value.trim().toLowerCase()
|
|
if (!query) return seasonDetail.value.pendingNominations
|
|
return seasonDetail.value.pendingNominations.filter((nomination) =>
|
|
[nomination.categoryName, nomination.candidateText, nomination.submittedByTwitchId]
|
|
.join(' ')
|
|
.toLowerCase()
|
|
.includes(query),
|
|
)
|
|
})
|
|
const selectedNomination = computed(() =>
|
|
filteredNominations.value.find((nomination) => nomination.id === selectedNominationId.value) ?? filteredNominations.value[0] ?? null,
|
|
)
|
|
const reviewStats = computed(() => [
|
|
{ label: 'Offen', value: seasonDetail.value.pendingNominations.length },
|
|
{ label: 'Sichtbar', value: filteredNominations.value.length },
|
|
{ label: 'Kategorien', value: new Set(seasonDetail.value.pendingNominations.map((nomination) => nomination.categoryName)).size },
|
|
])
|
|
|
|
watch(
|
|
seasonDetail,
|
|
(detail) => {
|
|
for (const nomination of detail.pendingNominations) {
|
|
reviewForms[nomination.id] = {
|
|
displayName: nomination.candidateText,
|
|
channelSlug: '',
|
|
platform: 'Twitch',
|
|
}
|
|
}
|
|
|
|
if (!detail.pendingNominations.some((nomination) => nomination.id === selectedNominationId.value)) {
|
|
selectedNominationId.value = detail.pendingNominations[0]?.id ?? null
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
watch(
|
|
filteredNominations,
|
|
(nominations) => {
|
|
if (!nominations.some((nomination) => nomination.id === selectedNominationId.value)) {
|
|
selectedNominationId.value = nominations[0]?.id ?? null
|
|
}
|
|
},
|
|
{ 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-Liste 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">
|
|
<AdminPageHeader
|
|
eyebrow="Reviews"
|
|
title="Freitext-Nominierungen sichten"
|
|
description="Alle uneindeutigen oder noch nicht gemappten Nominierungen laufen hier zusammen. Suche nach User, Kategorie oder Kandidat und entscheide dann direkt im Kontext."
|
|
:icon="Sparkles"
|
|
/>
|
|
|
|
<AdminSeasonToolbar />
|
|
|
|
<Card class="overflow-hidden">
|
|
<div class="border-b border-violet-100 bg-white/75 p-6">
|
|
<div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
|
|
<h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Offene Nominierungen</h2>
|
|
<p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
|
|
Kompakte Liste fuer viele Freitext-Faelle. Waehle links einen Fall aus und entscheide rechts, ob daraus ein Kandidat wird.
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-3 xl:min-w-[360px]">
|
|
<div v-for="stat in reviewStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
|
|
<p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
|
|
<strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
|
|
<label class="relative block">
|
|
<Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
|
|
<input
|
|
v-model="reviewFilter"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white/90 pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Nach Kategorie, Kandidat oder Nutzer suchen"
|
|
/>
|
|
</label>
|
|
<div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
|
|
{{ filteredNominations.length }} / {{ seasonDetail.pendingNominations.length }} sichtbar
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4 p-6">
|
|
<p v-if="adminMessage" class="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="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>
|
|
|
|
<div class="grid gap-5 xl:grid-cols-[minmax(320px,0.85fr)_minmax(0,1.15fr)]">
|
|
<div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
|
|
<button
|
|
v-for="nomination in filteredNominations"
|
|
:key="nomination.id"
|
|
type="button"
|
|
class="w-full rounded-2xl border p-3 text-left transition"
|
|
:class="selectedNomination?.id === nomination.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
|
|
@click="selectedNominationId = nomination.id"
|
|
>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
|
|
{{ nomination.categoryName }}
|
|
</span>
|
|
<span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
|
|
ID {{ nomination.id }}
|
|
</span>
|
|
</div>
|
|
<h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText }}</h3>
|
|
<p class="mt-1 truncate text-sm text-slate-500">
|
|
{{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
|
|
Keine offenen Review-Faelle im aktuell gewaehlten Award-Jahr.
|
|
</p>
|
|
<p v-else-if="filteredNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
|
|
Keine Review-Faelle passen zum aktuellen Filter.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="selectedNomination" class="rounded-[26px] border border-violet-100 bg-white/90 p-5 shadow-[0_14px_36px_rgba(168,145,214,0.08)]">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">{{ selectedNomination.categoryName }}</p>
|
|
<h3 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ selectedNomination.candidateText }}</h3>
|
|
<p class="mt-2 text-sm text-slate-500">
|
|
Eingereicht von {{ selectedNomination.submittedByTwitchId }} · {{ new Date(selectedNomination.createdAt).toLocaleString('de-DE') }}
|
|
</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-violet-800">
|
|
ID {{ selectedNomination.id }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 rounded-2xl border border-violet-100 bg-violet-50/50 p-4">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Als Kandidat uebernehmen</p>
|
|
<div class="mt-4 grid gap-4 md:grid-cols-3">
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
|
|
<input
|
|
v-model="reviewForms[selectedNomination.id].displayName"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Anzeigename"
|
|
/>
|
|
</label>
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
|
|
<input
|
|
v-model="reviewForms[selectedNomination.id].channelSlug"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="@channel"
|
|
/>
|
|
</label>
|
|
<label class="space-y-2">
|
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
|
|
<input
|
|
v-model="reviewForms[selectedNomination.id].platform"
|
|
type="text"
|
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
|
placeholder="Twitch"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap justify-end gap-3">
|
|
<Button :disabled="reviewSaving === selectedNomination.id" variant="secondary" @click="rejectNomination(selectedNomination.id)">
|
|
<Trash2 class="mr-2 h-4 w-4" />
|
|
{{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Verwerfen' }}
|
|
</Button>
|
|
<Button :disabled="reviewSaving === selectedNomination.id" @click="approveNomination(selectedNomination.id)">
|
|
<CheckCircle2 class="mr-2 h-4 w-4" />
|
|
{{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</template>
|