add delete team to frontend

resources/js/pages/team/Create.vue

@@ -48,14 +48,14 @@ function submit(): void {
           <div class="grid grid-cols-2 items-start gap-5">
             <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" autofocus name="name" />
               <InputError :message="form.errors.name" />
             </div>
             <TeamSlug
-              :name="form.name"
               v-model:slug="form.slug"
-              :error="form.errors.slug"
               v-model:slug-taken="slugTaken"
+              :error="form.errors.slug"
+              :name="form.name"
             />
             <div class="grid items-start gap-3">
               <Label for="require_2fa">Require 2FA</Label>

resources/js/pages/team/Edit.vue

@@ -51,15 +51,15 @@ function submit(): void {
           <div class="grid grid-cols-2 items-start gap-5">
             <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" autofocus name="name" />
               <InputError :message="form.errors.name" />
             </div>
             <TeamSlug
+              v-model:slug="form.slug"
+              v-model:slug-taken="slugTaken"
+              :error="form.errors.slug"
               :ignored-slug="team.slug"
               :name="form.name"
-              v-model:slug="form.slug"
-              :error="form.errors.slug"
-              v-model:slug-taken="slugTaken"
             />
             <div class="grid items-start gap-3">
               <Label for="require_2fa">Require 2FA</Label>

resources/js/pages/team/Index.vue

@@ -15,6 +15,14 @@ import {
 } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { Eye, Pencil, Plus, Trash } from '@lucide/vue';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { ref } from 'vue';
 
 defineOptions({
   layout: {
@@ -32,6 +40,7 @@ defineProps<{
 }>();
 
 const user = usePage().props.auth.user;
+const deleteTeam = ref<Team | null>(null);
 
 const openTeam = (team: Team) =>
   router.visit(teamRoutes.show({ team: team.slug }).url);
@@ -41,9 +50,43 @@ const canManageTeam = (team: Team) =>
 
 const canDeleteTeam = (team: Team) =>
   team.members.find((member) => member.email === user.email)?.role === 'owner';
+
+const deleteTeamAction = (team: Team) => {
+  router.delete(teamRoutes.destroy({ team: team.slug }).url);
+  deleteTeam.value = null;
+};
 </script>
 
 <template>
+  <Dialog
+    v-if="deleteTeam != null"
+    :open="true"
+    @update:open="deleteTeam = null"
+  >
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader class="flex items-start justify-start">
+        <DialogTitle>{{ deleteTeam.name }} unwiderruflich löschen?</DialogTitle>
+        <DialogDescription>
+          Bist du sicher, dass du das Team, {{ deleteTeam.name }}, mit
+          {{ deleteTeam.members.length }} Mitgliedern, löschen möchtest?
+        </DialogDescription>
+        <div class="flex w-full items-end justify-end gap-4">
+          <Button
+            class="cursor-pointer"
+            variant="outline"
+            @click="deleteTeam = null"
+            >Abbrechen</Button
+          >
+          <Button
+            class="cursor-pointer"
+            variant="destructive"
+            @click="deleteTeamAction(deleteTeam)"
+            >Löschen</Button
+          >
+        </div>
+      </DialogHeader>
+    </DialogContent>
+  </Dialog>
   <div class="flex flex-col justify-center p-16">
     <Head title="Teams" />
     <div class="flex w-full justify-end py-4">
@@ -79,9 +122,9 @@ const canDeleteTeam = (team: Team) =>
               <TableCell>{{ team.name }}</TableCell>
               <TableCell>{{ team.slug }}</TableCell>
               <TableCell>{{ team.members.length }}</TableCell>
-              <TableCell>{{
-                team.multi_factor_required ? 'Ja' : 'Nein'
-              }}</TableCell>
+              <TableCell
+                >{{ team.multi_factor_required ? 'Ja' : 'Nein' }}
+              </TableCell>
               <TableCell class="flex justify-end gap-4">
                 <Link
                   :href="
@@ -97,18 +140,14 @@ const canDeleteTeam = (team: Team) =>
                     size="18"
                   />
                 </Link>
-                <Link
+                <component
+                  :is="Trash"
                   v-if="canDeleteTeam(team)"
-                  :href="
-                    teamRoutes.destroy({
-                      team: team.slug,
-                    })
-                  "
                   class="cursor-pointer text-red-500"
+                  size="18"
+                  @click="deleteTeam = team"
                   @click.stop
-                >
-                  <component :is="Trash" size="18" />
-                </Link>
+                />
               </TableCell>
             </TableRow>
           </TableBody>