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>
+

resources/js/pages/team/Create.vue

@@ -1,12 +1,14 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import { Save } from '@lucide/vue';
-import { Head, useForm } from '@inertiajs/vue3';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import {Save} from '@lucide/vue';
+import {Head, useForm} from '@inertiajs/vue3';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
 import InputError from '@/components/InputError.vue';
-import { Checkbox } from '@/components/ui/checkbox';
+import {Checkbox} from '@/components/ui/checkbox';
+import {ref, watch} from "vue";
+import TeamSlug from "@/components/TeamSlug.vue";
 
 defineOptions({
   layout: {
@@ -23,6 +25,10 @@ defineOptions({
   },
 });
 
+const slug = ref('');
+const slugTaken = ref(false);
+const slugError = ref<string>('');
+
 const form = useForm({
   name: '',
   require_2fa: false,
@@ -31,6 +37,8 @@ const form = useForm({
 function submit(): void {
   form.submit(teamRoutes.store());
 }
+
+watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
@@ -38,25 +46,25 @@ function submit(): void {
 
   <div class="flex flex-col justify-center p-16">
     <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-      <div class="grid grid-cols-2 gap-5">
+      <div class="grid grid-cols-2 gap-5 items-start">
         <div class="grid items-start gap-3">
           <Label for="name">Name</Label>
-          <Input id="name" name="name" v-model="form.name" />
+          <Input id="name" v-model="form.name" name="name" />
           <InputError :message="form.errors.name" />
-          <InputError :message="(form.errors as any).slug" />
         </div>
+        <TeamSlug :name="form.name" :slug="slug" :slug-error="slugError" :slug-taken="slugTaken" />
         <div class="grid items-start gap-3">
           <Label for="require_2fa">Require 2FA</Label>
           <Checkbox
             id="require_2fa"
-            name="require_2fa"
             v-model="form.require_2fa"
+            name="require_2fa"
           />
           <InputError :message="form.errors.require_2fa" />
         </div>
       </div>
       <div class="flex w-full justify-end">
-        <Button type="submit" class="w-fit" :disabled="form.processing">
+        <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
           <component :is="Save" />
           Erstellen
         </Button>

resources/js/pages/team/Edit.vue

@@ -1,55 +1,61 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import { Save } from '@lucide/vue';
-import { Head, useForm } from '@inertiajs/vue3';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import {Save} from '@lucide/vue';
+import {Head, setLayoutProps, useForm} from '@inertiajs/vue3';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
 import InputError from '@/components/InputError.vue';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Team } from '@/types/models';
+import {Checkbox} from '@/components/ui/checkbox';
+import {Team} from '@/types/models';
+import {ref, watch} from "vue";
+import TeamSlug from "@/components/TeamSlug.vue";
 
 const props = defineProps<{
   team: Team;
 }>();
 
-defineOptions({
-  layout: {
-    breadcrumbs: [
-      {
-        title: 'Teams',
-        href: teamRoutes.index(),
-      },
-      {
-        title: props.team.name,
-        href: teamRoutes.create(),
-      },
-    ],
-  },
+setLayoutProps({
+  breadcrumbs: [
+    {
+      title: 'Teams',
+      href: teamRoutes.index(),
+    },
+    {
+      title: props.team.name,
+      href: teamRoutes.create(),
+    },
+  ],
 });
 
+const slug = ref(props.team.slug);
+const slugTaken = ref(false);
+const slugError = ref<string>('');
+
 const form = useForm({
   name: props.team.name,
   require_2fa: props.team.multi_factor_required,
 });
 
 function submit(): void {
-  form.patch(teamRoutes.patch({ team: props.team.slug }).url);
+  form.patch(teamRoutes.update({team: props.team.slug}).url);
 }
+
+watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
-  <Head title="Teams" />
+  <Head title="Teams"/>
 
   <div class="flex flex-col justify-center p-16">
     <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-      <div class="grid grid-cols-2 gap-5">
+      <div class="grid grid-cols-2 gap-5 items-start">
         <div class="grid items-start gap-3">
           <Label for="name">Name</Label>
-          <Input id="name" v-model="form.name" name="name" />
-          <InputError :message="form.errors.name" />
-          <InputError :message="(form.errors as any).slug" />
+          <Input id="name" v-model="form.name" name="name"/>
+          <InputError :message="form.errors.name"/>
         </div>
+        <TeamSlug :ignored-slug="team.slug" :name="form.name" :slug="slug" :slug-error="slugError" :slug-taken="slugTaken" />
         <div class="grid items-start gap-3">
           <Label for="require_2fa">Require 2FA</Label>
           <Checkbox
@@ -57,12 +63,12 @@ function submit(): void {
             v-model="form.require_2fa"
             name="require_2fa"
           />
-          <InputError :message="form.errors.require_2fa" />
+          <InputError :message="form.errors.require_2fa"/>
         </div>
       </div>
       <div class="flex w-full justify-end">
-        <Button :disabled="form.processing" class="w-fit" type="submit">
-          <component :is="Save" />
+        <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
+          <component :is="Save"/>
           Speichern
         </Button>
       </div>

resources/js/pages/team/Index.vue

@@ -21,7 +21,6 @@ defineOptions({
 
 defineProps<{
   teams: Team[];
-  canCreateTeam: boolean;
 }>();
 
 const user = usePage().props.auth.user;
@@ -37,7 +36,7 @@ const canManageTeam = (team: Team) =>
   <Head title="Teams"/>
 
   <div class="flex flex-col justify-center p-16">
-    <div v-if="canCreateTeam" class="flex w-full justify-end py-4">
+    <div class="flex w-full justify-end py-4">
       <Link :href="teamRoutes.create()">
         <Button>
           <component :is="Plus"/>

resources/js/pages/team/Show.vue

@@ -32,7 +32,7 @@ setLayoutProps({
 
   <div class="flex flex-col justify-center p-16">
     <div v-if="canManageTeam" class="flex w-full justify-end py-4">
-      <Link :href="teamRoutes.create()">
+      <Link :href="teamRoutes.edit({team: team.slug})">
         <Button>
           <component :is="Pencil"/>
           Bearbeiten