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:
2026-07-30 22:33:47 +02:00
parent cfda014760
commit 370ba3406f
7 changed files with 351 additions and 261 deletions
+32 -13
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { parseError, sluggy } from '#imports';
import Team from '~/components/admin/Team.vue';
import { useHuntStore } from '~/stores/hunt';
import { useTitleStore } from '~/stores/title';
definePageMeta({
middleware: ['admin']
middleware: ['auth']
});
const app = useNuxtApp();
@@ -15,8 +17,11 @@ const router = useRouter();
const { name, id } = app.$slugData.huntSlug!;
const titleStore = useTitleStore();
const huntStore = useHuntStore();
const { data, refresh } = await useFetch(`/api/admin/hunt/${id}/teams`);
const { data, refresh, error } = await useFetch(`/api/admin/hunt/${id}/teams`);
huntStore.setMembership(id, !error.value);
useHead({
title: t('layouts.title', {
@@ -38,17 +43,31 @@ export type Team = Data['teams'][number];
<template>
<div>
<h1>teams</h1>
<VaButton color="success" icon="replay" @click="refresh">Refresh</VaButton>
<VaAccordion v-if="data" stateful>
<Team
v-for="team in data.teams"
:key="team.id"
:team="team"
:hunt-id="id"
@refresh="refresh"
/>
</VaAccordion>
<div v-if="error">
<VaAlert color="danger" class="my-4">
{{ t(parseError(error)) }}
</VaAlert>
<VaButton
icon="arrow_back"
:to="localePath(`/hunt/${sluggy(app.$slugData.huntSlug!)}`)"
>{{ t('page.common.back_to_hunt') }}</VaButton
>
</div>
<template v-else>
<h1>teams</h1>
<VaButton color="success" icon="replay" @click="refresh"
>Refresh</VaButton
>
<VaAccordion v-if="data" stateful>
<Team
v-for="team in data.teams"
:key="team.id"
:team="team"
:hunt-id="id"
@refresh="refresh"
/>
</VaAccordion>
</template>
</div>
</template>