pichunt/app/components/admin/QuestList.vue

<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>
  <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()"
      >
        <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"
            >
              <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.isBingo"
                  size="small"
                  color="danger"
                  title="Bingo"
                  ><VaIcon name="apps"
                /></VaChip>
                <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"
      />
    </VaCardContent>
  </VaCard>
</template>

<style scoped></style>