304 lines
9.1 KiB
Vue
304 lines
9.1 KiB
Vue
<script setup lang="ts">
|
|
import ClickableImage from '~/components/ClickableImage.vue';
|
|
import { useI18nKey } from '~/composables/useI18nKey';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
definePageMeta({
|
|
middleware: ['auth']
|
|
});
|
|
|
|
const app = useNuxtApp();
|
|
|
|
const { user } = useUserSession();
|
|
const { huntSlug, questSlug } = app.$slugData;
|
|
|
|
const { t, d, locale } = useI18n();
|
|
const { tKey, hasKey, tSluggy } = useI18nKey();
|
|
|
|
const titleStore = useTitleStore();
|
|
|
|
const { data, pending, refresh, error } = await useFetch(
|
|
`/api/quest/${questSlug?.id}`
|
|
);
|
|
|
|
titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title:
|
|
[
|
|
hasKey(data.value, 'title')
|
|
? tKey(data.value, 'title').value
|
|
: questSlug?.name,
|
|
hasKey(data.value?.hunt, 'name')
|
|
? tKey(data.value?.hunt, 'name').value
|
|
: huntSlug?.name
|
|
]
|
|
.filter((s) => s && s?.length > 0)
|
|
.join(' | ') || t('layouts.default_tile')
|
|
})
|
|
});
|
|
|
|
const answer = ref(data.value?.answer?.text);
|
|
const final = ref(data.value?.answer?.final || false);
|
|
|
|
const textType = {
|
|
TEXT: 'text',
|
|
NUMBER: 'number',
|
|
INTEGER: 'number',
|
|
WORD: 'text'
|
|
};
|
|
|
|
const newImage = ref<File>();
|
|
|
|
const uploading = ref(false);
|
|
const submitError = ref('');
|
|
async function submit() {
|
|
uploading.value = true;
|
|
submitError.value = '';
|
|
|
|
const body = new FormData();
|
|
body.set('lang', locale.value);
|
|
|
|
if (data.value?.answer?.updatedAt) {
|
|
body.set('updatedAt', data.value?.answer?.updatedAt);
|
|
}
|
|
if (answer.value) {
|
|
body.set('answer', answer.value);
|
|
}
|
|
if (final.value) {
|
|
body.set('final', 'true');
|
|
}
|
|
if (newImage.value) {
|
|
body.set('image', newImage.value);
|
|
}
|
|
|
|
try {
|
|
await $fetch(`/api/quest/${questSlug?.id}/submit`, {
|
|
method: 'POST',
|
|
body
|
|
});
|
|
|
|
await refresh();
|
|
answer.value = data.value?.answer?.text;
|
|
newImage.value = undefined;
|
|
} catch (e) {
|
|
if (e instanceof Error && 'statusCode' in e && e.statusCode === 418) {
|
|
submitError.value = t('page.quest.already_finalized');
|
|
await refresh();
|
|
} else if (
|
|
e instanceof Error &&
|
|
'statusCode' in e &&
|
|
e.statusCode === 409
|
|
) {
|
|
submitError.value = t('page.quest.conflict');
|
|
} else {
|
|
submitError.value = parseError(e);
|
|
}
|
|
}
|
|
|
|
uploading.value = false;
|
|
}
|
|
|
|
const createImageURL = (file: File) => URL.createObjectURL(file);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VaButtonGroup>
|
|
<VaButton
|
|
icon="arrow_back"
|
|
:to="
|
|
$localePath(
|
|
`/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
|
|
)
|
|
"
|
|
>{{ t('page.common.back_to_hunt') }}</VaButton
|
|
>
|
|
<VaButton
|
|
icon="refresh"
|
|
:loading="pending"
|
|
color="success"
|
|
@click="
|
|
submitError = '';
|
|
refresh();
|
|
"
|
|
>{{ t('layouts.refresh') }}</VaButton
|
|
>
|
|
<VaButton
|
|
v-if="user && user.role === 'ADMIN'"
|
|
color="danger"
|
|
:to="
|
|
$localePath(
|
|
`/hunt/${data?.hunt ? tSluggy(data.hunt).value : sluggy(huntSlug!)}/${data ? tSluggy(data).value : sluggy(questSlug!)}}/admin`
|
|
)
|
|
"
|
|
>{{ t('page.common.admin') }}</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?.review?.score && data.answer?.review?.score > 0
|
|
? 'success'
|
|
: 'primary'
|
|
"
|
|
>
|
|
<VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
|
|
<ClickableImage
|
|
v-if="data?.picture"
|
|
:src="data?.picture?.url"
|
|
:title="(data ? tKey(data, 'title').value : questSlug?.name) || ''"
|
|
/>
|
|
<VaCardContent>
|
|
<div class="flex flex-col gap-4">
|
|
<p class="text-lg">{{ tKey(data, 'description') }}</p>
|
|
<p v-if="hasKey(data, 'question')" class="text-xl font-bold">
|
|
{{ data.textRequired ? '❓' : '❔' }}:
|
|
{{ tKey(data, 'question') }}
|
|
</p>
|
|
<p v-if="hasKey(data, 'question')">
|
|
🖋: {{ t(`enums.text_type.${data.textType}`) }}
|
|
</p>
|
|
<p v-if="hasKey(data, 'extraText')">
|
|
<span class="uppercase">{{
|
|
t('page.quest.extra_points')
|
|
}}</span>
|
|
{{ tKey(data, 'extraText') }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard v-if="data.answer?.review" color="info">
|
|
<VaCardTitle>{{ t('page.quest.review') }}</VaCardTitle>
|
|
<VaCardContent>
|
|
<p v-if="data.answer.review?.score" class="mb-2">
|
|
{{ t('page.quest.score') }}
|
|
<VaChip color="success">{{ data.answer.review.score }}</VaChip>
|
|
<span v-if="data.answer.review.reviewer" class="text-sm">
|
|
{{
|
|
t('page.quest.reviewed_by', {
|
|
name: data.answer.review.reviewer.name,
|
|
date: d(data.answer.review.updatedAt, fullDate)
|
|
})
|
|
}}</span
|
|
>
|
|
</p>
|
|
<div
|
|
v-if="data.answer.review.review"
|
|
class="flex max-h-[60dvh] flex-col gap-2 overflow-y-auto pr-4"
|
|
>
|
|
<p
|
|
v-for="(line, i) in data.answer.review.review.split('\n')"
|
|
:key="i"
|
|
class="italic"
|
|
>
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard
|
|
v-if="user && user.role !== 'ADMIN'"
|
|
stripe
|
|
:stripe-color="data.answer?.final ? 'success' : 'primary'"
|
|
>
|
|
<VaCardTitle>{{ t('page.quest.submission') }}</VaCardTitle>
|
|
<VaCardContent>
|
|
<div class="flex flex-col gap-4">
|
|
<VaInput
|
|
v-if="hasKey(data, 'question')"
|
|
v-model="answer"
|
|
:label="tKey(data, 'question').value"
|
|
:disabled="uploading || data.answer?.final"
|
|
:placeholder="t('page.quest.your_answer')"
|
|
:required-mark="data.textRequired"
|
|
: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 ? t('page.quest.required_answer') : ''
|
|
]"
|
|
>
|
|
<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 || data.answer?.final"
|
|
type="single"
|
|
file-types="jpg,png,jpeg"
|
|
/>
|
|
<p v-if="data.answer?.updatedAt">
|
|
{{
|
|
t('page.quest.last_update', {
|
|
date: d(data.answer.updatedAt, fullDate),
|
|
name: data.answer.member.name
|
|
})
|
|
}}
|
|
</p>
|
|
<VaCheckbox
|
|
v-model="final"
|
|
:disabled="data.answer?.final"
|
|
:label="t('page.quest.finalize')"
|
|
:messages="t('page.quest.already_finalized')"
|
|
/>
|
|
|
|
<VaAlert
|
|
v-if="submitError.length > 0"
|
|
color="danger"
|
|
class="w-full text-center"
|
|
>{{ t(submitError) }}</VaAlert
|
|
>
|
|
<VaButton
|
|
v-if="!data.answer?.final"
|
|
:disabled="
|
|
!(
|
|
newImage ||
|
|
data.answer?.text !== answer ||
|
|
data.answer?.final !== final
|
|
)
|
|
"
|
|
:loading="uploading"
|
|
@click="submit"
|
|
>{{ t('page.common.update_btn') }}</VaButton
|
|
>
|
|
<p v-else class="font-bold">
|
|
{{ t('page.quest.already_submitted') }}
|
|
</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
</div>
|
|
<div v-if="error" class="mt-8 text-3xl">
|
|
{{ t(parseError(error)) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|