show slug in form

resources/js/components/TeamSlug.vue

@@ -0,0 +1,53 @@
+<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>
+