refactor(hunt): replace admin middleware with auth and implement membership state
- Change middleware from 'admin' to 'auth' on hunt and quest admin pages - Add global hunt store to track current hunt ID and membership status - Use hunt store membership state to conditionally display admin UI elements - Handle fetch errors gracefully with alerts and back navigation buttons - Update admin UI logic to depend on membership state instead of user role - Add membership state update after API calls in hunt, quest, teams, and admin pages - Refactor UI templates to show error messages when fetch fails - Centralize membership logic for better authorization control in frontend
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { sluggy } from '#imports';
|
||||
import { parseError, sluggy } from '#imports';
|
||||
import { useI18nKey } from '~/composables/useI18nKey';
|
||||
import { useHuntStore } from '~/stores/hunt';
|
||||
import { useTitleStore } from '~/stores/title';
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['admin'],
|
||||
middleware: ['auth'],
|
||||
keepalive: false
|
||||
});
|
||||
|
||||
@@ -18,8 +19,11 @@ const router = useRouter();
|
||||
const { huntSlug } = app.$slugData;
|
||||
const { name, id } = app.$slugData.questSlug!;
|
||||
const titleStore = useTitleStore();
|
||||
const huntStore = useHuntStore();
|
||||
|
||||
const { data, refresh } = await useFetch(`/api/admin/quest/${id}`);
|
||||
const { data, refresh, error } = await useFetch(`/api/admin/quest/${id}`);
|
||||
|
||||
huntStore.setMembership(huntSlug!.id, !error.value);
|
||||
|
||||
useHead({
|
||||
title: t('layouts.title', {
|
||||
@@ -38,52 +42,64 @@ titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="my-4 text-3xl">Admin—{{ data?.title_de }}</h1>
|
||||
<VaButtonGroup>
|
||||
<div v-if="error">
|
||||
<VaAlert color="danger" class="my-4">
|
||||
{{ t(parseError(error)) }}
|
||||
</VaAlert>
|
||||
<VaButton
|
||||
icon="arrow_back"
|
||||
:to="
|
||||
localePath(
|
||||
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
|
||||
)
|
||||
"
|
||||
:to="localePath(`/hunt/${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>
|
||||
<template v-else>
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user