105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { parseError } from '#shared/utils/error';
|
|
|
|
const { t } = useI18n();
|
|
const validation = useValidation();
|
|
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 {
|
|
// TODO: show toast with invite code
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
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">{{
|
|
t('comp.team_add.create_a_new_team')
|
|
}}</VaButton>
|
|
<VaModal v-model="isOpen" close-button hide-default-actions>
|
|
<h3 class="mt-16 text-3xl">{{ t('comp.team_add.create_a_new_team') }}</h3>
|
|
<div class="mt-4 flex flex-col gap-4">
|
|
<VaInput
|
|
v-model="data.name"
|
|
:label="t('comp.team_add.team_name')"
|
|
placeholder="My cool team"
|
|
min-length="3"
|
|
max-length="256"
|
|
counter
|
|
:rules="[
|
|
validation.required(t('comp.team_add.team_name')),
|
|
validation.max(t('comp.team_add.team_name'), 256),
|
|
validation.min(t('comp.team_add.team_name'), 3)
|
|
]"
|
|
required
|
|
/>
|
|
<VaTextarea
|
|
v-model="data.description"
|
|
max-rows="4"
|
|
min-rows="2"
|
|
:label="t('comp.team_add.description')"
|
|
placeholder="The best team!"
|
|
max-length="256"
|
|
counter
|
|
:rules="[validation.maxOptional(t('comp.team_add.description'), 256)]"
|
|
/>
|
|
<p>{{ t('comp.team_add.invite_code_automatically') }}</p>
|
|
<VaAlert v-if="error" color="danger">{{ t(error) }}</VaAlert>
|
|
</div>
|
|
<template #footer>
|
|
<VaButtonGroup :loading="pending" :disabled="pending">
|
|
<VaButton color="secondary" @click="isOpen = false">{{
|
|
t('page.common.cancel')
|
|
}}</VaButton>
|
|
<VaButton
|
|
color="success"
|
|
:disabled="data.name.length < 3 || pending"
|
|
:loading="pending"
|
|
@click="submit"
|
|
>{{ t('comp.team_add.create') }}</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</template>
|
|
</VaModal>
|
|
</template>
|
|
|
|
<style scoped></style>
|