show slug in form

app/Http/Controllers/TeamController.php

@@ -8,8 +8,10 @@ use App\Http\Requests\UpdateTeamRequest;
 use App\Http\Resources\TeamResource;
 use App\Models\Team;
 use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
+use Str;
 
 class TeamController extends Controller
 {
@@ -20,11 +22,10 @@ class TeamController extends Controller
     {
         return Inertia::render('team/Index', [
             'teams' => TeamResource::collection(Team::visibleTo(auth()->user())->get())->resolve($request),
-            'canCreateTeam' => auth()->user()->can('create', Team::class),
         ]);
     }
 
-    public function show(Request$request, Team $team)
+    public function show(Request $request, Team $team)
     {
         return Inertia::render('team/Show', [
             'team' => TeamResource::make($team)->resolve($request),
@@ -48,10 +49,12 @@ class TeamController extends Controller
                 );
             });
             Inertia::flash('success', 'Team successfully created.');
+
             return to_route('teams.index');
         } catch (\Exception $exception) {
             Inertia::flash('error', 'Team could not be created.');
             DB::rollBack();
+
             return back();
         }
     }
@@ -64,9 +67,11 @@ class TeamController extends Controller
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Team $team)
+    public function edit(Request $request, Team $team)
     {
-        //
+        return Inertia::render('team/Edit', [
+            'team' => TeamResource::make($team)->resolve($request),
+        ]);
     }
 
     /**
@@ -74,7 +79,19 @@ class TeamController extends Controller
      */
     public function update(UpdateTeamRequest $request, Team $team)
     {
-        //
+        $validated = $request->validated();
+
+        try {
+            DB::transaction(function () use ($validated, $team) {
+                $team->update($validated);
+            });
+            Inertia::flash('success', 'Team successfully updated.');
+
+        } catch (\Exception $exception) {
+            Inertia::flash('error', 'Team could not be updated.');
+            DB::rollBack();
+        }
+        return to_route('teams.show', $team);
     }
 
     /**
@@ -84,4 +101,22 @@ class TeamController extends Controller
     {
         //
     }
+
+    public function nameToSlug(Request $request)
+    {
+        $validated = $request->validate([
+            'name' => 'required|string|max:255',
+            'ignored_slug' => 'nullable|string|max:255',
+        ]);
+
+        $name = Arr::get($validated, 'name');
+        $slug = Str::slug($name);
+        $ignoredSlug = Arr::get($validated, 'ignored_slug');
+
+        return response()->json([
+            'name' => $name,
+            'slug' => $slug,
+            'taken' => $slug !== $ignoredSlug && Team::whereSlug($slug)->exists(),
+        ]);
+    }
 }

app/Http/Requests/StoreTeamRequest.php

@@ -22,13 +22,6 @@ class StoreTeamRequest extends FormRequest
         ];
     }
 
-    protected function prepareForValidation(): void
-    {
-        $this->merge([
-            'slug' => Str::slug($this->name),
-        ]);
-    }
-
     public function messages(): array
     {
         return [
@@ -38,4 +31,11 @@ class StoreTeamRequest extends FormRequest
             'slug.unique' => 'The name has already been taken.',
         ];
     }
+
+    protected function prepareForValidation(): void
+    {
+        $this->merge([
+            'slug' => Str::slug($this->name),
+        ]);
+    }
 }

app/Http/Requests/UpdateTeamRequest.php

@@ -17,11 +17,21 @@ class UpdateTeamRequest extends FormRequest
     {
         return [
             'name' => ['nullable', 'string', 'max:255'],
-            'slug' => ['nullable', 'required_if:name', 'string', 'max:255', 'unique:teams,slug,'.$this->route('team')->id],
+            'slug' => ['nullable', 'required_with:name', 'string', 'max:255', 'unique:teams,slug,'.$this->route('team')->id],
             'require_2fa' => ['required', 'boolean'],
         ];
     }
 
+    public function messages(): array
+    {
+        return [
+            'slug.string' => '',
+            'slug.required' => '',
+            'slug.max' => '',
+            'slug.unique' => 'The name has already been taken.',
+        ];
+    }
+
     protected function prepareForValidation(): void
     {
         $this->merge([

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 {Save} from '@lucide/vue';
-import { Head, useForm } from '@inertiajs/vue3';
+import {Head, useForm} from '@inertiajs/vue3';
-import { Button } from '@/components/ui/button';
+import {Button} from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import {Input} from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+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 {Save} from '@lucide/vue';
-import { Head, useForm } from '@inertiajs/vue3';
+import {Head, setLayoutProps, useForm} from '@inertiajs/vue3';
-import { Button } from '@/components/ui/button';
+import {Button} from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import {Input} from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+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 { Team } from '@/types/models';
+import {Team} from '@/types/models';
+import {ref, watch} from "vue";
+import TeamSlug from "@/components/TeamSlug.vue";
 
 const props = defineProps<{
   team: Team;
 }>();
 
-defineOptions({
+setLayoutProps({
-  layout: {
+  breadcrumbs: [
-    breadcrumbs: [
+    {
-      {
+      title: 'Teams',
-        title: 'Teams',
+      href: teamRoutes.index(),
-        href: teamRoutes.index(),
+    },
-      },
+    {
-      {
+      title: props.team.name,
-        title: props.team.name,
+      href: teamRoutes.create(),
-        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" />
+          <Input id="name" v-model="form.name" name="name"/>
-          <InputError :message="form.errors.name" />
+          <InputError :message="form.errors.name"/>
-          <InputError :message="(form.errors as any).slug" />
         </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">
+        <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
-          <component :is="Save" />
+          <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

routes/web.php

@@ -10,11 +10,12 @@ Route::middleware(['auth'])->group(function () {
 
     Route::controller(TeamController::class)->prefix('teams')->name('teams.')->group(function () {
         Route::get('/', 'index')->name('index');
-        Route::middleware('verified')->get('/create', 'create')->name('create');
+        Route::get('/create', 'create')->name('create');
-        Route::middleware('verified')->post('/', 'store')->name('store');
+        Route::post('/', 'store')->name('store');
         Route::get('/{team:slug}', 'show')->name('show');
         Route::get('/edit/{team:slug}', 'edit')->name('edit');
-        Route::patch('/{team:slug}', 'patch')->name('patch');
+        Route::patch('/{team:slug}', 'update')->name('update');
+        Route::post('/name-to-slug', 'nameToSlug')->name('nameToSlug');
     });
 
 });