refactor(hunt): Style hunt admin
This commit is contained in:
@@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
import { fullDate } from '~~/server/utils/date';
|
||||
|
||||
const { loggedIn } = useUserSession();
|
||||
const { data, pending, refresh } = await useFetch('/api/home');
|
||||
const { t, d } = useI18n();
|
||||
const localePath = useLocalePath();
|
||||
const { tKey, tSluggy } = useI18nKey();
|
||||
watch(loggedIn, () => refresh());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto max-w-6xl">
|
||||
<VaButton
|
||||
icon="refresh"
|
||||
:disabled="pending"
|
||||
class="mb-6"
|
||||
@click="refresh"
|
||||
>{{ t('layouts.refresh') }}</VaButton
|
||||
>
|
||||
|
||||
<div v-if="data">
|
||||
<div v-if="data.own !== null">
|
||||
<h2 class="mb-6 text-2xl font-bold">
|
||||
{{ t('page.home.joined_hunts') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.own"
|
||||
:key="hunt.id"
|
||||
stripe
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||
</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.own.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||
<VaCardContent>{{
|
||||
t('page.home.click_hunt_below_to_join')
|
||||
}}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center">
|
||||
<p class="text-secondary mb-4">
|
||||
{{ t('page.landing.login_to_see_hunts') }}
|
||||
</p>
|
||||
<VaButton color="info" icon="login" :to="localePath(`/login`)">{{
|
||||
t('page.home.login_first')
|
||||
}}</VaButton>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<VaDivider />
|
||||
<h2 class="mb-6 mt-8 text-2xl font-bold">
|
||||
{{ t('page.home.open_to_join') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<VaCard
|
||||
v-for="hunt in data.others"
|
||||
:key="hunt.id"
|
||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||
>
|
||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||
<ClickableImage
|
||||
v-if="hunt.picture"
|
||||
:src="hunt.picture?.url"
|
||||
:title="tKey(hunt, 'name').value"
|
||||
/>
|
||||
<VaCardContent>
|
||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||
<VaDivider />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||
<p v-if="hunt.start">
|
||||
{{
|
||||
t('page.home.start', {
|
||||
start: d(hunt.start, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p v-if="hunt.end">
|
||||
{{
|
||||
t('page.home.end', {
|
||||
start: d(hunt.end, fullDate)
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||
</p>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
<VaCard v-if="data.others.length <= 0">
|
||||
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||
<VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+112
-104
@@ -96,113 +96,121 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
|
||||
<VaButton
|
||||
icon="add"
|
||||
color="success"
|
||||
:disabled="questLoading"
|
||||
@click="openCreateQuest"
|
||||
>{{ t('page.quest_admin.add_quest') }}</VaButton
|
||||
>
|
||||
</div>
|
||||
<VaCollapse
|
||||
class="mt-2"
|
||||
color="primary"
|
||||
header="Quest list"
|
||||
@update:model-value="(isOpen: boolean) => isOpen && execute()"
|
||||
>
|
||||
<p v-if="pending">pending...</p>
|
||||
<div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
|
||||
<VaCard
|
||||
v-for="(quest, index) in quests"
|
||||
:key="quest.id"
|
||||
class="flex items-center"
|
||||
<VaCard stripe stripe-color="info" class="">
|
||||
<VaCardContent>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
|
||||
<VaButton
|
||||
icon="add"
|
||||
color="success"
|
||||
:disabled="questLoading"
|
||||
@click="openCreateQuest"
|
||||
>{{ t('page.quest_admin.add_quest') }}</VaButton
|
||||
>
|
||||
</div>
|
||||
<VaCollapse
|
||||
class="mt-2"
|
||||
color="primary"
|
||||
header="Quest list"
|
||||
@update:model-value="(isOpen: boolean) => isOpen && execute()"
|
||||
>
|
||||
<VaCardContent class="flex w-full items-center gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<VaButton
|
||||
icon="arrow_upward"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="index === 0 || questLoading"
|
||||
:title="t('page.quest_admin.move_up')"
|
||||
@click="reorderQuest(quest, 'up')"
|
||||
/>
|
||||
<VaButton
|
||||
icon="arrow_downward"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="index === quests.length - 1 || questLoading"
|
||||
:title="t('page.quest_admin.move_down')"
|
||||
@click="reorderQuest(quest, 'down')"
|
||||
/>
|
||||
</div>
|
||||
<VaButton
|
||||
icon="edit"
|
||||
preset="plain"
|
||||
:disabled="questLoading"
|
||||
@click="openEditQuest(quest.id)"
|
||||
/>
|
||||
<VaImage
|
||||
v-if="quest.picture"
|
||||
:src="quest.picture.url"
|
||||
lazy
|
||||
alt="Quest picture"
|
||||
class="h-16 w-24 rounded object-cover"
|
||||
><template #loader><VaProgressCircle indeterminate /></template
|
||||
></VaImage>
|
||||
<div class="flex-1">
|
||||
<p>
|
||||
<span class="font-bold">{{ quest.title_de }}</span
|
||||
><span class="text-secondary font-light"> | </span
|
||||
><span class="font-bold">{{ quest.title_en }}</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ quest.points }} {{ t('page.quest_admin.points') }} ·
|
||||
{{ t('page.quest_admin.answers', quest._count.answers) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<VaChip v-if="quest.optional" size="small" color="secondary"
|
||||
>Opt</VaChip
|
||||
<p v-if="pending">pending...</p>
|
||||
<div v-if="quests.length > 0" class="mt-4 flex flex-col gap-2">
|
||||
<VaCard
|
||||
v-for="(quest, index) in quests"
|
||||
:key="quest.id"
|
||||
class="flex items-center"
|
||||
>
|
||||
<VaCardContent
|
||||
class="flex w-full flex-col items-center gap-2 sm:flex-row"
|
||||
>
|
||||
<VaChip v-if="quest.pictureRequired" size="small" color="info"
|
||||
>Pic!</VaChip
|
||||
>
|
||||
<VaChip v-if="quest.textRequired" size="small" color="warning"
|
||||
>Txt!</VaChip
|
||||
>
|
||||
</div>
|
||||
<VaButton
|
||||
icon="edit"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="questLoading"
|
||||
@click="openEditQuest(quest.id)"
|
||||
/>
|
||||
<VaButton
|
||||
icon="delete"
|
||||
size="small"
|
||||
preset="plain"
|
||||
color="danger"
|
||||
:disabled="questLoading"
|
||||
@click="deleteQuest(quest)"
|
||||
/>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
<p v-else class="mt-4 text-gray-500">
|
||||
{{ t('page.quest_admin.no_quests') }}
|
||||
</p>
|
||||
</VaCollapse>
|
||||
<div class="flex flex-row gap-1 sm:flex-col">
|
||||
<VaButton
|
||||
icon="arrow_upward"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="index === 0 || questLoading"
|
||||
:title="t('page.quest_admin.move_up')"
|
||||
@click="reorderQuest(quest, 'up')"
|
||||
/>
|
||||
<VaButton
|
||||
icon="arrow_downward"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="index === quests.length - 1 || questLoading"
|
||||
:title="t('page.quest_admin.move_down')"
|
||||
@click="reorderQuest(quest, 'down')"
|
||||
/>
|
||||
</div>
|
||||
<VaButton
|
||||
icon="edit"
|
||||
preset="plain"
|
||||
:disabled="questLoading"
|
||||
@click="openEditQuest(quest.id)"
|
||||
/>
|
||||
<VaImage
|
||||
v-if="quest.picture"
|
||||
:src="quest.picture.url"
|
||||
lazy
|
||||
alt="Quest picture"
|
||||
class="h-16 w-24 rounded object-cover"
|
||||
><template #loader><VaProgressCircle indeterminate /></template
|
||||
></VaImage>
|
||||
<div class="flex-1">
|
||||
<p>
|
||||
<span class="font-bold">{{ quest.title_de }}</span
|
||||
><span class="text-secondary font-light"> | </span
|
||||
><span class="font-bold">{{ quest.title_en }}</span>
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ quest.points }} {{ t('page.quest_admin.points') }} ·
|
||||
{{ t('page.quest_admin.answers', quest._count.answers) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<VaChip v-if="quest.optional" size="small" color="secondary"
|
||||
>Opt</VaChip
|
||||
>
|
||||
<VaChip v-if="quest.pictureRequired" size="small" color="info"
|
||||
>Pic!</VaChip
|
||||
>
|
||||
<VaChip v-if="quest.textRequired" size="small" color="warning"
|
||||
>Txt!</VaChip
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1 sm:flex-col">
|
||||
<VaButton
|
||||
icon="edit"
|
||||
size="small"
|
||||
preset="plain"
|
||||
:disabled="questLoading"
|
||||
@click="openEditQuest(quest.id)"
|
||||
/>
|
||||
<VaButton
|
||||
icon="delete"
|
||||
size="small"
|
||||
preset="plain"
|
||||
color="danger"
|
||||
:disabled="questLoading"
|
||||
@click="deleteQuest(quest)"
|
||||
/>
|
||||
</div>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
</div>
|
||||
<p v-else class="mt-4 text-gray-500">
|
||||
{{ t('page.quest_admin.no_quests') }}
|
||||
</p>
|
||||
</VaCollapse>
|
||||
|
||||
<AdminQuestModal
|
||||
v-model="questModalOpen"
|
||||
:hunt-id="Number(props.huntId)"
|
||||
:quest-id="editingQuestId"
|
||||
@saved="refreshQuests"
|
||||
/>
|
||||
<AdminQuestModal
|
||||
v-model="questModalOpen"
|
||||
:hunt-id="Number(props.huntId)"
|
||||
:quest-id="editingQuestId"
|
||||
@saved="refreshQuests"
|
||||
/>
|
||||
</VaCardContent>
|
||||
</VaCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -150,6 +150,7 @@ async function deleteTeam() {
|
||||
<template>
|
||||
<VaCollapse
|
||||
:key="team.id"
|
||||
color="info"
|
||||
:header="`${team.name} — ${team.members.length} members — ${team._count.answers} answers — ${team.score} points`"
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
Reference in New Issue
Block a user