feat(quest): add full CRUD and image handling for hunt quests

2026-07-31 01:03:54 +02:00
parent 77becc453e
commit 24632742ef
15 changed files with 1228 additions and 7 deletions
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { parseError } from '#shared/utils/error';
+
+const props = defineProps<{
+  huntId: number;
+}>();
+const { t } = useI18n();
+
+const { confirm } = useModal();
+const { init } = useToast();
+
+const {
+  data: quests,
+  refresh: refreshQuests,
+  pending,
+  execute
+} = await useFetch(`/api/admin/hunt/${props.huntId}/quest`, {
+  lazy: true,
+  immediate: false,
+  default: () => [] as never[]
+});
+
+type QuestListItem = {
+  id: number;
+  title_de: string;
+  title_en: string;
+  order: number;
+  points: number;
+  optional: boolean;
+  pictureRequired: boolean;
+  textRequired: boolean;
+  _count: { answers: number };
+};
+
+const questModalOpen = ref(false);
+const editingQuestId = ref<number | null>(null);
+const questLoading = ref(false);
+
+function openCreateQuest() {
+  editingQuestId.value = null;
+  questModalOpen.value = true;
+}
+
+function openEditQuest(questId: number) {
+  editingQuestId.value = questId;
+  questModalOpen.value = true;
+}
+
+async function deleteQuest(quest: QuestListItem) {
+  const ok = await confirm({
+    title: t('page.quest_admin.delete_title'),
+    message: t('page.quest_admin.delete_confirm'),
+    okText: t('auth.accept')
+  });
+
+  if (!ok) {
+    return;
+  }
+
+  questLoading.value = true;
+  try {
+    await $fetch(`/api/admin/hunt/${props.huntId}/quest/${quest.id}`, {
+      method: 'DELETE'
+    });
+    init({ message: 'Quest deleted!', color: 'success' });
+    await refreshQuests();
+  } catch (e) {
+    init({
+      title: 'Error',
+      color: 'danger',
+      // @ts-expect-error weird error stuff
+      message: e?.message || e?.statusMessage || t(parseError(e))
+    });
+  }
+  questLoading.value = false;
+}
+
+async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
+  questLoading.value = true;
+  try {
+    await $fetch(`/api/admin/hunt/${props.huntId}/quest/${quest.id}/reorder`, {
+      method: 'PATCH',
+      body: { direction }
+    });
+    await refreshQuests();
+  } catch (e) {
+    init({
+      title: 'Error',
+      color: 'danger',
+      // @ts-expect-error weird error stuff
+      message: e?.message || e?.statusMessage || t(parseError(e))
+    });
+  }
+  questLoading.value = false;
+}
+</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"
+      >
+        <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
+            >
+            <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>
+
+  <AdminQuestModal
+    v-model="questModalOpen"
+    :hunt-id="Number(props.huntId)"
+    :quest-id="editingQuestId"
+    @saved="refreshQuests"
+  />
+</template>
+
+<style scoped></style>