formatted, added team index, create, show

resources/js/pages/team/Create.vue

@@ -1,11 +1,66 @@
 <script setup lang="ts">
+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 InputError from '@/components/InputError.vue';
+import { Checkbox } from '@/components/ui/checkbox';
 
+defineOptions({
+  layout: {
+    breadcrumbs: [
+      {
+        title: 'Teams',
+        href: teamRoutes.index(),
+      },
+      {
+        title: 'Erstellen',
+        href: teamRoutes.create(),
+      },
+    ],
+  },
+});
+
+const form = useForm({
+  name: '',
+  require_2fa: false,
+});
+
+function submit(): void {
+  form.submit(teamRoutes.store());
+}
 </script>
 
 <template>
+  <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 items-start gap-3">
+          <Label for="name">Name</Label>
+          <Input id="name" name="name" v-model="form.name" />
+          <InputError :message="form.errors.name" />
+          <InputError :message="(form.errors as any).slug" />
+        </div>
+        <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"
+          />
+          <InputError :message="form.errors.require_2fa" />
+        </div>
+      </div>
+      <div class="flex w-full justify-end">
+        <Button type="submit" class="w-fit" :disabled="form.processing">
+          <component :is="Save" />
+          Erstellen
+        </Button>
+      </div>
+    </form>
+  </div>
 </template>
-
-<style scoped>
-
-</style>

resources/js/pages/team/Edit.vue

@@ -1,11 +1,71 @@
-<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 InputError from '@/components/InputError.vue';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Team } from '@/types/models';
 
+const props = defineProps<{
+  team: Team;
+}>();
+
+defineOptions({
+  layout: {
+    breadcrumbs: [
+      {
+        title: 'Teams',
+        href: teamRoutes.index(),
+      },
+      {
+        title: props.team.name,
+        href: teamRoutes.create(),
+      },
+    ],
+  },
+});
+
+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);
+}
 </script>
 
 <template>
+  <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 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" />
+        </div>
+        <div class="grid items-start gap-3">
+          <Label for="require_2fa">Require 2FA</Label>
+          <Checkbox
+            id="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 :disabled="form.processing" class="w-fit" type="submit">
+          <component :is="Save" />
+          Speichern
+        </Button>
+      </div>
+    </form>
+  </div>
 </template>
-
-<style scoped>
-
-</style>

resources/js/pages/team/Index.vue

@@ -1,25 +1,18 @@
-<script setup lang="ts">
-
-import teamRoutes from "@/routes/teams";
-import {Head} from "@inertiajs/vue3";
-import type {Team} from "@/types/models";
-import TextLink from "@/components/TextLink.vue";
-import {Card, CardContent} from "@/components/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
+<script lang="ts" setup>
+import teamRoutes from '@/routes/teams';
+import {Head, Link, router, usePage} from '@inertiajs/vue3';
+import type {Team} from '@/types/models';
+import TextLink from '@/components/TextLink.vue';
+import {Card, CardContent} from '@/components/ui/card';
+import {Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import {Button} from '@/components/ui/button';
+import {Eye, Pencil, Plus} from '@lucide/vue';
 
 defineOptions({
   layout: {
     breadcrumbs: [
       {
-        title: 'Meine Teams',
+        title: 'Teams',
         href: teamRoutes.index(),
       },
     ],
@@ -27,14 +20,31 @@ defineOptions({
 });
 
 defineProps<{
-  teams: Team[]
-}>()
+  teams: Team[];
+  canCreateTeam: boolean;
+}>();
+
+const user = usePage().props.auth.user;
+
+const openTeam = (team: Team) =>
+  router.visit(teamRoutes.show({team: team.slug}).url);
+
+const canManageTeam = (team: Team) =>
+  team.members.find((member) => member.email === user.email)?.role === 'admin';
 </script>
 
 <template>
   <Head title="Teams"/>
 
-  <div class="flex justify-center p-16">
+  <div class="flex flex-col justify-center p-16">
+    <div v-if="canCreateTeam" class="flex w-full justify-end py-4">
+      <Link :href="teamRoutes.create()">
+        <Button>
+          <component :is="Plus"/>
+          Erstellen
+        </Button>
+      </Link>
+    </div>
 
     <Card class="w-full">
       <CardContent>
@@ -49,19 +59,31 @@ defineProps<{
           </TableHeader>
           <TableBody>
             <TableRow
-              v-if="teams.length > 0"
               v-for="team in teams"
+              v-if="teams.length > 0"
+              :key="team.slug"
+              role="link"
+              tabindex="0"
+              @click="openTeam(team)"
             >
               <TableCell>{{ team.name }}</TableCell>
               <TableCell>{{ team.slug }}</TableCell>
               <TableCell>{{ team.members.length }}</TableCell>
-              <TableCell>{{ team.multi_factor_required }}</TableCell>
+              <TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
+              <Link
+                :href="(canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({ team: team.slug })"
+                class="cursor-pointer"
+                @click.stop
+              >
+                <TableCell>
+                  <component :is="canManageTeam(team) ? Pencil : Eye" size="18"/>
+                </TableCell>
+              </Link>
             </TableRow>
           </TableBody>
           <TableCaption v-if="teams.length <= 0">
-            Du bist noch von keinem Team mitglied.
-            Tritt einem Team bei oder
-            <TextLink href="{{ route('teams.create') }}">erstelle eins.</TextLink>
+            Du bist noch von keinem Team mitglied. Tritt einem Team bei oder
+            <TextLink :href="teamRoutes.create()">erstelle eins.</TextLink>
           </TableCaption>
         </Table>
       </CardContent>

resources/js/pages/team/Show.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import teamRoutes from '@/routes/teams';
+import {Head, Link, setLayoutProps} from '@inertiajs/vue3';
+import type {Team} from '@/types/models';
+import {Card, CardContent} from '@/components/ui/card';
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
+import {Button} from '@/components/ui/button';
+import {Pencil} from '@lucide/vue';
+
+const props = defineProps<{
+  team: Team;
+  canManageTeam: boolean;
+}>();
+
+setLayoutProps({
+  breadcrumbs: [
+    {
+      title: 'Teams',
+      href: teamRoutes.index(),
+    },
+    {
+      title: props.team.name,
+      href: teamRoutes.index(),
+    },
+  ],
+});
+
+</script>
+
+<template>
+  <Head title="Teams"/>
+
+  <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()">
+        <Button>
+          <component :is="Pencil"/>
+          Bearbeiten
+        </Button>
+      </Link>
+    </div>
+
+    <Card class="w-full mb-8">
+      <CardContent class="flex flex-col">
+        <h1 class="font-semibold text-2xl">{{ team.name }}</h1>
+        <Table>
+          <TableBody class="[&_td]:py-0 [&_tr]:border-0 text-gray-500 text-sm">
+            <TableRow>
+              <TableCell class="font-bold ">Slug:</TableCell>
+              <TableCell>{{ team.slug }}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell class="font-bold ">Erfordert 2FA:</TableCell>
+              <TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell class="font-bold ">Erstellt am:</TableCell>
+              <TableCell>{{ team.created_at }}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardContent>
+        <h2 class="font-semibold text-lg">Mitglieder</h2>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>2FA</TableHead>
+              <TableHead>Rolle</TableHead>
+              <TableHead>Beigetreten Am</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="member in team.members">
+              <TableCell>{{ member.name }}</TableCell>
+              <TableCell>{{ member.email }}</TableCell>
+              <TableCell>{{ member.has_multi_factor ? 'Ja' : 'Nein' }}</TableCell>
+              <TableCell>{{ member.role }}</TableCell>
+              <TableCell>{{ member.joined_at }}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  </div>
+</template>