Files
pichunt/app/pages/hunt/[huntSlug]/[questSlug]/admin.vue
T
2025-10-06 12:36:11 +02:00

90 lines
2.5 KiB
Vue

<script setup lang="ts">
import { useI18nKey } from '~/composables/useI18nKey';
import { useTitleStore } from '~/stores/title';
definePageMeta({
middleware: ['admin'],
keepalive: false
});
const app = useNuxtApp();
const { loggedIn } = useUserSession();
const localePath = useLocalePath();
const { t } = useI18n();
const { tKey, hasKey, tSluggy } = useI18nKey();
const router = useRouter();
const { huntSlug } = app.$slugData;
const { name, id } = app.$slugData.questSlug!;
const titleStore = useTitleStore();
const { data, refresh } = await useFetch(`/api/admin/quest/${id}`);
useHead({
title: t('layouts.title', {
title: hasKey(data.value, 'title') ? tKey(data.value!, 'title').value : name
})
});
watch(loggedIn, (isLoggedIn) => {
if (!isLoggedIn) {
router.push(localePath('/login'));
}
});
titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
</script>
<template>
<div>
<h1 class="my-4 text-3xl">Admin{{ data?.title_de }}</h1>
<VaButtonGroup>
<VaButton
icon="arrow_back"
:to="
$localePath(
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
)
"
>{{ t('page.common.back_to_hunt') }}</VaButton
>
<VaButton icon="replay" color="success" @click="refresh"
>Refresh</VaButton
>
</VaButtonGroup>
<div v-if="data" class="my-2 flex flex-col gap-2 p-4">
<p>{{ tKey(data, 'description') }}</p>
<p v-if="hasKey(data, 'question')">{{ tKey(data, 'question') }}</p>
</div>
<div class="mb-4 grid grid-cols-2 gap-2 p-2 md:flex md:flex-row">
<VaChip outline>In progress</VaChip>
<VaChip color="primary">Reviewable</VaChip>
<VaChip color="danger">Review missing</VaChip>
<VaChip color="success">Reviewed</VaChip>
</div>
<div v-if="data">
<p class="text-xl">{{ data.points }} Points</p>
<p v-if="data.extraPoints" class="text-xl">
{{ data.extraPoints }} Extra points
</p>
<p v-if="hasKey(data, 'extraText')">
Extra: {{ tKey(data, 'extraText') }}
</p>
</div>
<div v-if="data && data.answers.length > 0">
<VaAccordion multiple stateful>
<AdminAnswer
v-for="answer in data.answers"
:key="answer.id"
:answer="answer"
:quest="data"
@update="refresh"
/>
</VaAccordion>
</div>
<p v-else class="mt-4 text-lg">No answers yet</p>
</div>
</template>
<style scoped></style>