AzuTear
89 lines
3.5 KiB
Vue
89 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import Select from 'primevue/select'
|
|
import { CalendarCog, CheckCircle2, Clock3, Sparkles, Tags, Users } from '@lucide/vue'
|
|
|
|
import { useAwardsStore } from '../../stores/awards'
|
|
|
|
const store = useAwardsStore()
|
|
|
|
const seasons = computed(() => store.adminSeasons)
|
|
const selectedSeasonId = computed({
|
|
get: () => store.adminSelectedSeasonId,
|
|
set: async (value) => {
|
|
if (!value) return
|
|
await store.loadAdminSeasonDetail(value)
|
|
},
|
|
})
|
|
|
|
const seasonOptions = computed(() =>
|
|
seasons.value.map((season) => ({
|
|
label: `${season.year} · ${season.name}`,
|
|
value: season.id,
|
|
})),
|
|
)
|
|
|
|
const currentSeason = computed(() => store.adminSeasonDetail)
|
|
const yearStats = computed(() => [
|
|
{ label: 'Kategorien', value: currentSeason.value.categories.length, icon: Tags },
|
|
{ label: 'Kandidaten', value: currentSeason.value.candidates.length, icon: Users },
|
|
{ label: 'Reviews', value: currentSeason.value.pendingNominations.length, icon: Sparkles },
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-[26px] border border-violet-100 bg-white/85 p-4 shadow-[0_18px_46px_rgba(168,145,214,0.09)]">
|
|
<div class="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px] xl:items-center">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
|
|
<CalendarCog class="h-5 w-5" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktuelles Award-Jahr</p>
|
|
<h2 class="truncate text-xl font-semibold text-slate-900">
|
|
{{ currentSeason.year || 'Kein Jahr' }} · {{ currentSeason.name || 'Bitte Jahr auswaehlen' }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2 lg:ml-auto">
|
|
<span class="inline-flex items-center gap-2 rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-700">
|
|
<Clock3 class="h-3.5 w-3.5 text-violet-600" />
|
|
{{ currentSeason.currentPhase || 'Kein Status' }}
|
|
</span>
|
|
<span class="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold" :class="currentSeason.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
|
|
<CheckCircle2 class="h-3.5 w-3.5" />
|
|
{{ currentSeason.isCurrent ? 'Oeffentlich sichtbar' : 'Nicht oeffentlich' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Jahr wechseln</label>
|
|
<Select
|
|
v-model="selectedSeasonId"
|
|
:options="seasonOptions"
|
|
option-label="label"
|
|
option-value="value"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 grid gap-2 sm:grid-cols-3">
|
|
<div
|
|
v-for="item in yearStats"
|
|
:key="item.label"
|
|
class="flex items-center justify-between rounded-2xl border border-violet-50 bg-violet-50/40 px-3 py-2"
|
|
>
|
|
<span class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
|
|
<component :is="item.icon" class="h-3.5 w-3.5 text-violet-500" />
|
|
{{ item.label }}
|
|
</span>
|
|
<strong class="text-violet-800">{{ item.value }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|