Add quest page

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

@@ -1,24 +1,186 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { huntSlug, questSlug } = app.$slugData;
-console.log(app.$slugData);
-const { t } = useI18n();
 
+const { t, locale } = useI18n();
+
+const titleStore = useTitleStore();
+
+const { data, pending, refresh } = await useFetch(
+  `/api/quest/${questSlug?.id}`
+);
+
+titleStore.title = data.value?.title;
 useHead({
   title: t('layouts.title', {
     title:
-      [questSlug?.name, huntSlug?.name]
+      [
+        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;
+
+  // TODO: add upload logic
+  await refresh();
+
+  uploading.value = false;
+  answer.value = data.value?.answer?.text;
+  newImage.value = undefined;
+}
+
+const createImageURL = (file: File) => URL.createObjectURL(file);
 </script>
 
 <template>
-  <h1>{{ huntSlug!.name }} - {{ questSlug!.name }}</h1>
-  <VaButton :to="$localePath(`/hunt/${sluggy(huntSlug!)}`)"
-    >Back to Hunt</VaButton
-  >
+  <div v-if="data">
+    <h1>
+      {{ data.hunt.name || huntSlug!.name }} -
+      {{ data.title || questSlug!.name }}
+    </h1>
+    <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
+    >
+    <div class="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>
+        <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"
+              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>
 </template>
 
 <style scoped></style>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { user } = useUserSession();
 const localePath = useLocalePath();
@@ -6,6 +8,8 @@ const { t } = useI18n();
 
 const { name, id } = app.$slugData.huntSlug!;
 
+const titleStore = useTitleStore();
+
 const { data, pending } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
@@ -15,6 +19,8 @@ useHead({
     title: data.value?.name || name
   })
 });
+
+titleStore.title = data.value?.name;
 </script>
 
 <template>