54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import teamRoutes from '@/routes/teams';
|
|
|
|
import InputError from "@/components/InputError.vue";
|
|
import {Label} from "@/components/ui/label";
|
|
import {Input} from "@/components/ui/input";
|
|
import {watch} from "vue";
|
|
|
|
type nameToSlugResponse = {
|
|
name: string;
|
|
slug: string;
|
|
taken: boolean;
|
|
}
|
|
|
|
const props = defineProps<{ name: string, ignoredSlug?: string }>()
|
|
|
|
const slug = defineModel<string>('slug', {
|
|
required: true,
|
|
});
|
|
const slugTaken = defineModel<boolean>('slugTaken', {
|
|
required: true,
|
|
});
|
|
const slugError = defineModel<string>('slugError', {
|
|
required: true,
|
|
});
|
|
|
|
watch(() => props.name, (newName) => fetch(teamRoutes.nameToSlug().url, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({name: newName, ignored_slug: props.ignoredSlug})
|
|
}).then(async (response) => {
|
|
slugError.value = ''
|
|
console.info(response)
|
|
const body = (await response.json()) as unknown as nameToSlugResponse;
|
|
console.info(body)
|
|
slug.value = body.slug;
|
|
slugTaken.value = body.taken;
|
|
if (slugTaken.value) {
|
|
slugError.value = 'Der Slug ist bereits vergeben.'
|
|
}
|
|
}).catch(() => slugError.value = 'Failed to Fetch new slug')
|
|
)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid items-start gap-3">
|
|
<Label for="slug">Slug</Label>
|
|
<Input id="slug" v-model="slug" disabled name="slug"/>
|
|
<InputError :message="slugError"/>
|
|
</div>
|
|
</template>
|
|
|