pichunt/app/pages/hunt/[huntSlug]/[questSlug]/index.vue

<script setup lang="ts">
import ClickableImage from '~/components/ClickableImage.vue';
import { useTitleStore } from '~/stores/title';

definePageMeta({
  middleware: ['auth']
});

const app = useNuxtApp();
const { huntSlug, questSlug } = app.$slugData;

const { t, locale } = useI18n();

const titleStore = useTitleStore();

const { data, pending, refresh, error } = await useFetch(
  `/api/quest/${questSlug?.id}`
);

titleStore.title = data.value?.title;
useHead({
  title: t('layouts.title', {
    title:
      [
        data.value?.title || questSlug?.name,
        data.value?.hunt?.name || huntSlug?.name
      ]
        .filter((s) => s && s?.length > 0)
        .join(' | ') || t('layouts.default_tile')
  })
});

const answer = ref(data.value?.answer?.text);

const textType = {
  TEXT: 'text',
  NUMBER: 'number',
  INTEGER: 'number',
  WORD: 'text'
};

const newImage = ref<File>();

const uploading = ref(false);
async function submit() {
  uploading.value = true;

  const body = new FormData();

  if (data.value?.answer?.updatedAt) {
    body.set('updatedAt', data.value?.answer?.updatedAt);
  }
  if (answer.value) {
    body.set('answer', answer.value);
  }
  if (newImage.value) {
    body.set('image', newImage.value);
  }

  const result = await $fetch(`/api/quest/${questSlug?.id}/submit`, {
    method: 'POST',
    body
  });

  console.log(result);
  await refresh();

  uploading.value = false;
  answer.value = data.value?.answer?.text;
  newImage.value = undefined;
}

const createImageURL = (file: File) => URL.createObjectURL(file);
</script>

<template>
  <VaButtonGroup>
    <VaButton
      icon="arrow_back"
      :to="$localePath(`/hunt/${sluggy(data?.hunt || huntSlug!)}`)"
      >Back to Hunt</VaButton
    >
    <VaButton
      @click="refresh"
      icon="refresh"
      :loading="pending"
      color="success"
      >{{ $t('layouts.refresh') }}</VaButton
    ></VaButtonGroup
  >
  <div v-if="data">
    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <VaCard
        :stripe="data.answer !== null"
        :stripe-color="
          data.answer?.score && data.answer?.score > 0 ? 'success' : 'primary'
        "
      >
        <VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
        <ClickableImage
          v-if="data?.picture"
          :src="data?.picture?.url"
          :title="data?.title || questSlug?.name || ''"
        />
        <VaCardContent>
          <div class="flex flex-col gap-4">
            <p class="text-lg">{{ data.description }}</p>
            <p v-if="data.question" class="text-xl font-bold">
              {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
            </p>
            <p v-if="data.question">
              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
            </p>
            <p v-if="data.extraText">
              <span class="uppercase">Extra points:</span> {{ data.extraText }}
            </p>
          </div>
        </VaCardContent>
      </VaCard>
      <VaCard color="info" v-if="data.answer?.review">
        <VaCardTitle>Review</VaCardTitle>
        <VaCardContent>
          <p v-if="data.answer.score" class="mb-2">
            <VaChip color="success"
              >Answer type: {{ data.answer.score }}</VaChip
            >
            <span v-if="data.answer.reviewer" class="text-sm">
              by {{ data.answer.reviewer.name }}</span
            >
          </p>
          <p>{{ data.answer.review }}</p>
        </VaCardContent>
      </VaCard>
      <VaCard color="primary">
        <VaCardTitle>Submission</VaCardTitle>
        <VaCardContent>
          <div class="flex flex-col gap-4">
            <VaInput
              :label="data.question"
              :disabled="uploading"
              v-if="data.question"
              color="onPrimary"
              placeholder="Your answer"
              :required-mark="data.textRequired"
              v-model="answer"
              :clearable="!!data.answer?.text"
              :clear-value="data.answer?.text || ''"
              clearable-icon="replay"
              :type="textType[data.textType]"
              :messages="[
                $t(`enums.text_type.${data.textType}`),
                data.textRequired ? 'Required Answer' : undefined
              ]"
            >
              <template v-if="data.textUnit" #appendInner>
                <span>{{ data.textUnit }}</span>
              </template>
            </VaInput>

            <VaImage
              v-if="newImage"
              :src="createImageURL(newImage)"
              class="max-h-60 w-full"
              fit="contain"
              lazy
            />
            <VaImage
              v-else-if="data.answer?.picture"
              :src="data.answer?.picture?.url"
              class="max-h-60 w-full"
              fit="contain"
              lazy
            >
              <template #loader> <VaProgressCircle indeterminate /> </template
            ></VaImage>
            <VaFileUpload
              v-model="newImage"
              :disabled="uploading"
              color="onPrimary"
              type="single"
              file-types="jpg,png,jpeg"
            />
            <p v-if="data.answer?.updatedAt">
              Last update:
              {{
                $d(
                  data.answer.updatedAt,
                  {
                    dateStyle: 'medium',
                    timeStyle: 'medium'
                  },
                  locale
                )
              }}
              by {{ data.answer.member.name }}
            </p>
            <VaButton
              :disabled="!(newImage || data.answer?.text !== answer)"
              color="onPrimary"
              :loading="uploading"
              @click="submit"
              >Update</VaButton
            >
          </div>
        </VaCardContent>
      </VaCard>
    </div>
  </div>
  <div v-if="error" class="mt-8 text-3xl">
    {{ $t(parseError(error)) }}
  </div>
</template>

<style scoped></style>