Fix team authorization, invite revocation, and slug handling

resources/js/components/TeamSlug.vue

@@ -1,53 +1,70 @@
 <script lang="ts" setup>
-import teamRoutes from '@/routes/teams';
+import { useHttp } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import InputError from '@/components/InputError.vue';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { nameToSlug } from '@/routes/teams';
+import type {
+  TeamSlugProps,
+  TeamSlugRequest,
+  TeamSlugResponse,
+} from '@/types/team';
 
-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,
+const props = defineProps<TeamSlugProps>();
+const slug = defineModel<string>('slug', { required: true });
+const slugTaken = defineModel<boolean>('slugTaken', { required: true });
+const previewError = ref('');
+const http = useHttp<TeamSlugRequest, TeamSlugResponse>({
+  name: '',
+  ignored_slug: null,
 });
 
-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')
-)
+watch(
+  () => props.name,
+  (name, _previous, onCleanup) => {
+    let active = true;
+    slugTaken.value = false;
+    previewError.value = '';
 
+    const timer = setTimeout(async () => {
+      if (!name.trim()) {
+        slug.value = '';
+        return;
+      }
+
+      http.name = name;
+      http.ignored_slug = props.ignoredSlug ?? null;
+
+      try {
+        const response = await http.submit(nameToSlug());
+        if (active) {
+          slug.value = response.slug;
+          slugTaken.value = response.taken;
+          previewError.value = response.taken
+            ? 'Der Slug ist bereits vergeben.'
+            : '';
+        }
+      } catch {
+        if (active) {
+          previewError.value = 'Die Slug-Vorschau konnte nicht geladen werden.';
+        }
+      }
+    }, 250);
+
+    onCleanup(() => {
+      active = false;
+      clearTimeout(timer);
+      http.cancel();
+    });
+  },
+);
 </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"/>
+    <Input id="slug" :model-value="slug" disabled name="slug" />
+    <InputError :message="error || previewError" />
   </div>
 </template>
-