84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { parseError } from '#shared/utils/error';
|
|
|
|
const { t } = useI18n();
|
|
const emits = defineEmits<{
|
|
update: [];
|
|
}>();
|
|
|
|
const props = defineProps<{
|
|
huntId: number;
|
|
}>();
|
|
|
|
const isOpen = ref(false);
|
|
|
|
const data = reactive({
|
|
name: '',
|
|
description: ''
|
|
});
|
|
|
|
const pending = ref(false);
|
|
|
|
const error = ref<string>();
|
|
|
|
async function submit() {
|
|
if (data.name.length < 3 || pending.value) {
|
|
return;
|
|
}
|
|
pending.value = true;
|
|
|
|
try {
|
|
const result = await $fetch(`/api/hunt/${props.huntId}/team`, {
|
|
body: JSON.stringify(data),
|
|
method: 'POST'
|
|
});
|
|
|
|
data.name = '';
|
|
data.description = '';
|
|
emits('update');
|
|
isOpen.value = false;
|
|
error.value = undefined;
|
|
} catch (e) {
|
|
console.error(e);
|
|
|
|
error.value = parseError(e);
|
|
}
|
|
pending.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VaButton color="success" icon="group_add" @click="isOpen = true"
|
|
>Create a new team</VaButton
|
|
>
|
|
<VaModal v-model="isOpen" close-button hide-default-actions>
|
|
<h3 class="text-3xl">Create a new team</h3>
|
|
<div class="mt-4 flex flex-col gap-4">
|
|
<VaInput v-model="data.name" label="Name" placeholder="My cool team" />
|
|
<VaTextarea
|
|
max-rows="4"
|
|
min-rows="2"
|
|
v-model="data.description"
|
|
label="Description"
|
|
placeholder="The best team!"
|
|
/>
|
|
<p>An invite code will be generated automatically.</p>
|
|
<VaAlert color="danger" v-if="error">{{ t(error) }}</VaAlert>
|
|
</div>
|
|
<template #footer>
|
|
<VaButtonGroup :loading="pending" :disabled="pending">
|
|
<VaButton color="secondary" @click="isOpen = false">Cancel</VaButton>
|
|
<VaButton
|
|
color="success"
|
|
:disabled="data.name.length < 3 || pending"
|
|
@click="submit"
|
|
:loading="pending"
|
|
>Create</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</template>
|
|
</VaModal>
|
|
</template>
|
|
|
|
<style scoped></style>
|