479 lines
14 KiB
Vue
479 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { parseError, sluggy } from '#imports';
|
|
import { createImageURL } from '#shared/utils/image';
|
|
import superjson, { type SuperJSONResult } from 'superjson';
|
|
import { useI18nKey } from '~/composables/useI18nKey';
|
|
import { useHuntStore } from '~/stores/hunt';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
definePageMeta({
|
|
middleware: ['auth']
|
|
});
|
|
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
const validation = useValidation();
|
|
const localePath = useLocalePath();
|
|
const { t, d } = useI18n();
|
|
const { tKey, hasKey } = useI18nKey();
|
|
const router = useRouter();
|
|
|
|
const { confirm } = useModal();
|
|
const { init } = useToast();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
const titleStore = useTitleStore();
|
|
const huntStore = useHuntStore();
|
|
|
|
const { data, pending, refresh, error } = await useFetch(
|
|
`/api/admin/hunt/${id}`,
|
|
{
|
|
transform: (value) => {
|
|
return superjson.deserialize(
|
|
value as unknown as SuperJSONResult
|
|
) as unknown as typeof value;
|
|
}
|
|
}
|
|
);
|
|
|
|
huntStore.setMembership(id, !error.value);
|
|
|
|
const formData = useCloned(data, {
|
|
clone: (source) => superjson.deserialize(superjson.serialize(source))
|
|
});
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
|
|
})
|
|
});
|
|
|
|
watch(loggedIn, (isLoggedIn) => {
|
|
if (!isLoggedIn) {
|
|
router.push(localePath('/login'));
|
|
}
|
|
});
|
|
|
|
titleStore.title = data.value ? tKey(data.value, 'name').value : undefined;
|
|
|
|
const loading = ref(false);
|
|
|
|
const search = ref('');
|
|
const safeSearch = ref('');
|
|
const newUser = ref<User>();
|
|
watchDebounced(
|
|
search,
|
|
(newSearch) => {
|
|
if (newSearch) {
|
|
safeSearch.value = newSearch;
|
|
}
|
|
},
|
|
{ debounce: 500, maxWait: 1000 }
|
|
);
|
|
|
|
type User = {
|
|
id: number;
|
|
name: string;
|
|
email: string;
|
|
};
|
|
const { data: users, pending: searchPending } = await useFetch(
|
|
() => `/api/admin/hunt/${id}/teamless?email=${safeSearch.value}`,
|
|
{
|
|
immediate: false,
|
|
lazy: true,
|
|
default: () => [] as User[]
|
|
}
|
|
);
|
|
|
|
async function submit() {
|
|
await $fetch(`/api/admin/hunt/${data.value?.id || id}`, {
|
|
method: 'POST',
|
|
body: formData.cloned.value
|
|
});
|
|
await refresh();
|
|
formData.sync();
|
|
}
|
|
|
|
async function kick(member: {
|
|
member: { id: number; name: string; email: string };
|
|
}) {
|
|
const ok = await confirm({
|
|
title: 'Are you sure?',
|
|
message: `Are you sure you want to kick ${member.member.name} (${member.member.email}) from this hunt?`,
|
|
okText: 'Yes'
|
|
});
|
|
|
|
if (!ok) {
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
|
|
try {
|
|
const { success } = await $fetch(`/api/admin/hunt/${id}/member`, {
|
|
method: 'DELETE',
|
|
body: { userId: member.member.id }
|
|
});
|
|
init({
|
|
message: success ? 'Successfully kicked member!' : 'Error while kicking',
|
|
color: success ? 'success' : 'danger'
|
|
});
|
|
} catch (e) {
|
|
init({
|
|
title: 'Error while kicking',
|
|
color: 'danger',
|
|
// @ts-expect-error weird error stuff
|
|
message: e?.message || e?.statusMessage || t(parseError(e))
|
|
});
|
|
}
|
|
|
|
await refresh();
|
|
loading.value = false;
|
|
}
|
|
|
|
async function addUser() {
|
|
if (!newUser.value) {
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
|
|
try {
|
|
const { success } = await $fetch(`/api/admin/hunt/${id}/member`, {
|
|
method: 'POST',
|
|
body: { userId: newUser.value.id }
|
|
});
|
|
init({
|
|
message: success
|
|
? 'Successfully added admin user!'
|
|
: 'Error while adding',
|
|
color: success ? 'success' : 'danger'
|
|
});
|
|
} catch (e) {
|
|
init({
|
|
title: 'Error while adding',
|
|
color: 'danger',
|
|
// @ts-expect-error weird error stuff
|
|
message: e?.message || e?.statusMessage || t(parseError(e))
|
|
});
|
|
}
|
|
|
|
await refresh();
|
|
newUser.value = undefined;
|
|
loading.value = false;
|
|
}
|
|
|
|
const newImage = ref<File>();
|
|
const uploading = ref(false);
|
|
const imageError = ref('');
|
|
|
|
async function updateImage() {
|
|
if (!newImage.value) {
|
|
return;
|
|
}
|
|
uploading.value = true;
|
|
imageError.value = '';
|
|
|
|
const body = new FormData();
|
|
body.set('image', newImage.value);
|
|
|
|
try {
|
|
await $fetch(`/api/admin/hunt/${id}/image`, {
|
|
method: 'POST',
|
|
body
|
|
});
|
|
|
|
await refresh();
|
|
newImage.value = undefined;
|
|
} catch (e) {
|
|
imageError.value = parseError(e);
|
|
}
|
|
uploading.value = false;
|
|
}
|
|
|
|
async function deleteImage() {
|
|
uploading.value = true;
|
|
imageError.value = '';
|
|
|
|
try {
|
|
await $fetch(`/api/admin/hunt/${id}/image`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
await refresh();
|
|
newImage.value = undefined;
|
|
} catch (e) {
|
|
imageError.value = parseError(e);
|
|
}
|
|
|
|
uploading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="error">
|
|
<VaAlert color="danger" class="my-4">
|
|
{{ t(parseError(error)) }}
|
|
</VaAlert>
|
|
<VaButton
|
|
icon="arrow_back"
|
|
:to="localePath(`/hunt/${sluggy(app.$slugData.huntSlug!)}`)"
|
|
>{{ t('page.common.back_to_hunt') }}</VaButton
|
|
>
|
|
</div>
|
|
<div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<VaCard stripe stripe-color="success">
|
|
<VaCardTitle>Edit this Hunt</VaCardTitle>
|
|
<VaCardContent>
|
|
<VaForm
|
|
v-if="formData.cloned.value && data"
|
|
class="flex flex-col gap-4"
|
|
>
|
|
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
|
|
<h3 class="hidden text-center md:block">
|
|
{{ t('page.create_hunt.de') }}
|
|
</h3>
|
|
<h3 class="hidden text-center md:block">
|
|
{{ t('page.create_hunt.en') }}
|
|
</h3>
|
|
<VaInput
|
|
v-model="formData.cloned.value.name_de"
|
|
:label="t('page.create_hunt.name_de')"
|
|
:rules="[
|
|
validation.required(t('page.create_hunt.name_de')),
|
|
validation.max(t('page.create_hunt.name_de'), 256)
|
|
]"
|
|
counter
|
|
max-length="256"
|
|
clearable
|
|
:clear-value="data.name_de"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaInput
|
|
v-model="formData.cloned.value.name_en"
|
|
:label="t('page.create_hunt.name_en')"
|
|
:rules="[
|
|
validation.required(t('page.create_hunt.name_en')),
|
|
validation.max(t('page.create_hunt.name_en'), 256)
|
|
]"
|
|
counter
|
|
max-length="256"
|
|
clearable
|
|
:clear-value="data.name_en"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaTextarea
|
|
v-model="formData.cloned.value.description_de"
|
|
:label="t('page.create_hunt.description_de')"
|
|
max-length="1000"
|
|
counter
|
|
clearable
|
|
:clear-value="data.description_de"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaTextarea
|
|
v-model="formData.cloned.value.description_en"
|
|
:label="t('page.create_hunt.description_en')"
|
|
max-length="1000"
|
|
counter
|
|
clearable
|
|
:clear-value="data.description_en"
|
|
clearable-icon="replay"
|
|
/>
|
|
</div>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.virtual"
|
|
:label="t('page.create_hunt.virtual')"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.public"
|
|
:label="t('page.create_hunt.public')"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.allowJoin"
|
|
:label="t('page.create_hunt.allow_join')"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.revealQuests"
|
|
:label="t('page.create_hunt.reveal_quests')"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.revealAnswers"
|
|
:label="t('page.create_hunt.reveal_answers')"
|
|
/>
|
|
<div class="date-holder">
|
|
<VaCheckbox
|
|
:label="t('page.create_hunt.has_start')"
|
|
:model-value="!!formData.cloned.value.start"
|
|
@update:model-value="
|
|
(newVal: boolean) =>
|
|
(formData.cloned.value!.start = newVal ? new Date() : null)
|
|
"
|
|
/>
|
|
<VaDateInput
|
|
v-if="formData.cloned.value.start"
|
|
v-model="formData.cloned.value.start"
|
|
:label="t('page.create_hunt.start')"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.start"
|
|
v-model="formData.cloned.value.start"
|
|
:label="t('page.create_hunt.start')"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<div class="date-holder">
|
|
<VaCheckbox
|
|
:label="t('page.create_hunt.has_end')"
|
|
:model-value="!!formData.cloned.value.end"
|
|
@update:model-value="
|
|
(newVal: boolean) =>
|
|
(formData.cloned.value!.end = newVal ? new Date() : null)
|
|
"
|
|
/>
|
|
<VaDateInput
|
|
v-if="formData.cloned.value.end"
|
|
v-model="formData.cloned.value.end"
|
|
:label="t('page.create_hunt.end')"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.end"
|
|
v-model="formData.cloned.value.end"
|
|
:label="t('page.create_hunt.end')"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<VaDivider />
|
|
<p>
|
|
Last update:
|
|
{{ d(data.updatedAt, fullDate) }}
|
|
</p>
|
|
<VaButtonGroup :loading="pending" :disabled="pending">
|
|
<VaButton
|
|
icon="replay"
|
|
:disabled="!formData.isModified.value"
|
|
@click.prevent="formData.sync()"
|
|
>Reset all values</VaButton
|
|
>
|
|
<VaButton
|
|
:disabled="formData.isModified.value"
|
|
@click.prevent="refresh()"
|
|
>Refresh</VaButton
|
|
>
|
|
<VaButton
|
|
:disabled="!formData.isModified.value"
|
|
@click.prevent="submit"
|
|
>Save</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</VaForm>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard stripe stripe-color="success">
|
|
<VaCardContent>
|
|
<h2 class="text-2xl">Image</h2>
|
|
<div>
|
|
<VaImage
|
|
v-if="newImage"
|
|
:src="createImageURL(newImage)"
|
|
class="max-h-60 w-full"
|
|
fit="contain"
|
|
lazy
|
|
/>
|
|
<VaImage
|
|
v-else-if="data?.picture"
|
|
:src="data?.picture?.url"
|
|
class="max-h-60 w-full"
|
|
fit="contain"
|
|
lazy
|
|
>
|
|
<template #loader> <VaProgressCircle indeterminate /> </template
|
|
></VaImage>
|
|
<VaFileUpload
|
|
v-model="newImage"
|
|
:disabled="uploading || pending"
|
|
type="single"
|
|
file-types="jpg,png,jpeg"
|
|
/>
|
|
<VaAlert
|
|
v-if="imageError.length > 0"
|
|
color="danger"
|
|
class="w-full text-center"
|
|
>{{ t(imageError) }}</VaAlert
|
|
>
|
|
<VaButtonGroup :disabled="uploading || pending">
|
|
<VaButton
|
|
color="success"
|
|
:disabled="!newImage"
|
|
@click="updateImage"
|
|
>
|
|
Upload new image
|
|
</VaButton>
|
|
<VaButton
|
|
color="danger"
|
|
icon="delete"
|
|
:disabled="!data?.picture"
|
|
@click="deleteImage"
|
|
>Delete image</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</div>
|
|
<VaDivider />
|
|
<h2 class="text-2xl">Hunt admin members:</h2>
|
|
<div
|
|
v-if="data"
|
|
class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
<VaButton
|
|
v-for="member in data.members"
|
|
:key="member.member.id"
|
|
color="danger"
|
|
:disabled="loading"
|
|
:loading="loading"
|
|
@click="kick(member)"
|
|
>Kick {{ member.member.name }} ({{
|
|
member.member.email
|
|
}})</VaButton
|
|
>
|
|
<VaChip v-if="data.members.length <= 0">No members yet</VaChip>
|
|
</div>
|
|
<div v-if="data" class="mt-8 flex flex-col gap-2 md:flex-row">
|
|
<VaSelect
|
|
v-model="newUser"
|
|
v-model:search="search"
|
|
label="New Admin Member"
|
|
placeholder="Start typing their email..."
|
|
autocomplete
|
|
highlight-matched-text
|
|
:options="users"
|
|
:loading="searchPending"
|
|
track-by="id"
|
|
text-by="email"
|
|
/><VaButton
|
|
icon="add"
|
|
color="danger"
|
|
:disabled="!newUser || loading"
|
|
:loading="loading"
|
|
@click="addUser"
|
|
>Add admin</VaButton
|
|
>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
|
|
<AdminQuestList :hunt-id="id" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.date-holder {
|
|
@apply flex flex-col gap-2 sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center;
|
|
}
|
|
</style>
|