313 lines
7.8 KiB
Vue
313 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import superjson, { type SuperJSONResult } from 'superjson';
|
|
import { useI18nKey } from '~/composables/useI18nKey';
|
|
import { useTitleStore } from '~/stores/title';
|
|
import { fullDate } from '~~/server/utils/date';
|
|
|
|
definePageMeta({
|
|
middleware: ['admin'],
|
|
keepalive: false
|
|
});
|
|
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
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 { data, pending, refresh } = await useFetch(`/api/admin/hunt/${id}`, {
|
|
transform: (value) => {
|
|
return superjson.deserialize(
|
|
value as unknown as SuperJSONResult
|
|
) as unknown as typeof 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;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1>admin</h1>
|
|
<VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
|
|
<VaInput
|
|
v-model="formData.cloned.value.name_de"
|
|
label="Name DE"
|
|
clearable
|
|
:clear-value="data.name_de"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaInput
|
|
v-model="formData.cloned.value.name_en"
|
|
label="Name EN"
|
|
clearable
|
|
:clear-value="data.name_en"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaTextarea
|
|
v-model="formData.cloned.value.description_de"
|
|
label="Description DE"
|
|
clearable
|
|
:clear-value="data.description_de"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaTextarea
|
|
v-model="formData.cloned.value.description_en"
|
|
label="Description EN"
|
|
clearable
|
|
:clear-value="data.description_en"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaCheckbox v-model="formData.cloned.value.virtual" label="Virtual" />
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.allowJoin"
|
|
label="Allow Join"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.revealQuests"
|
|
label="Reveal Quests"
|
|
/>
|
|
<VaCheckbox
|
|
v-model="formData.cloned.value.revealAnswers"
|
|
label="Reveal Answers"
|
|
/>
|
|
<div class="flex flex-row gap-2">
|
|
<VaCheckbox
|
|
label="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="Start"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.start"
|
|
v-model="formData.cloned.value.start"
|
|
label="Start"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<div class="flex flex-row gap-2">
|
|
<VaCheckbox
|
|
label="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="End"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.end"
|
|
v-model="formData.cloned.value.end"
|
|
label="End"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<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>
|
|
|
|
<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-3 lg:grid-cols-5"
|
|
>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|