scrum-poker-internal/resources/js/components/MyRooms.vue

<script setup lang="ts">
import { Link, useForm } from '@inertiajs/vue3';
import { DoorOpen, Plus, Trash2 } from '@lucide/vue';
import { ref } from 'vue';

import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { create, destroy, reopen, show } from '@/routes/room';
import type { DashboardRoom, OwnedRoomListProps } from '@/types/dashboard';

defineProps<OwnedRoomListProps>();

const selectedRoom = ref<DashboardRoom | null>(null);
const deleteForm = useForm({});

function setDeleteDialogOpen(open: boolean): void {
    if (!open && !deleteForm.processing) {
        selectedRoom.value = null;
    }
}

function deleteRoom(): void {
    if (selectedRoom.value === null || deleteForm.processing) {
        return;
    }

    deleteForm.delete(destroy(selectedRoom.value.id).url, {
        preserveScroll: true,
        onSuccess: () => {
            selectedRoom.value = null;
        },
    });
}
</script>

<template>
    <section class="flex flex-col gap-6">
        <div
            class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
        >
            <div>
                <h1 class="text-2xl font-bold tracking-tight">Meine Räume</h1>
                <p class="mt-1 text-sm text-muted-foreground">
                    Deine erstellten Scrum-Poker-Räume auf einen Blick.
                </p>
            </div>

            <Link
                :href="create()"
                class="inline-flex w-fit items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
            >
                <Plus class="size-4" />
                Raum erstellen
            </Link>
        </div>

        <div
            v-if="rooms.length > 0"
            class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
        >
            <DashboardRoomCard
                v-for="room in rooms"
                :key="room.id"
                :room="room"
                show-actions
            >
                <template #actions>
                    <Link
                        v-if="!room.closed_at"
                        :href="show(room.id)"
                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-blue-500/80"
                    >
                        <DoorOpen class="size-4" />
                        Raum beitreten
                    </Link>
                    <Link
                        v-else
                        :href="reopen(room.id)"
                        method="post"
                        as="button"
                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
                    >
                        <DoorOpen class="size-4" />
                        Raum öffnen
                    </Link>

                    <button
                        type="button"
                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-rose-300 transition hover:bg-rose-500/80"
                        @click="selectedRoom = room"
                    >
                        <Trash2 class="size-4" />
                        Raum löschen
                    </button>
                </template>
            </DashboardRoomCard>
        </div>

        <div
            v-else
            class="grid min-h-72 place-items-center rounded-md border border-dashed border-sidebar-border p-8 text-center"
        >
            <div>
                <h2 class="text-lg font-semibold">Noch keine eigenen Räume</h2>
                <p class="mt-2 max-w-md text-sm text-muted-foreground">
                    Erstelle deinen ersten Raum. Er wird automatisch in diesem
                    Dashboard gespeichert.
                </p>
                <Link
                    :href="create()"
                    class="mt-5 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground"
                >
                    <Plus class="size-4" />
                    Ersten Raum erstellen
                </Link>
            </div>
        </div>

        <Dialog
            :open="selectedRoom !== null"
            @update:open="setDeleteDialogOpen"
        >
            <DialogContent
                class="border-slate-700 bg-slate-800 text-slate-100 sm:max-w-md"
            >
                <DialogHeader>
                    <DialogTitle>Raum wirklich löschen?</DialogTitle>
                    <DialogDescription class="text-slate-300">
                        „{{ selectedRoom?.title ?? 'Scrum Poker' }}“ wird aus
                        deinem Dashboard entfernt. Alle Spieler, die den Raum
                        gerade geöffnet haben, werden automatisch
                        hinausgeleitet.
                    </DialogDescription>
                </DialogHeader>

                <DialogFooter class="gap-6 space-x-4 sm:gap-0">
                    <button
                        type="button"
                        class="rounded-md border border-slate-600 px-4 py-2 text-sm font-semibold text-slate-200 transition hover:bg-slate-700"
                        :disabled="deleteForm.processing"
                        @click="selectedRoom = null"
                    >
                        Abbrechen
                    </button>
                    <button
                        type="button"
                        class="rounded-md bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-500 disabled:opacity-50"
                        :disabled="deleteForm.processing"
                        @click="deleteRoom"
                    >
                        {{
                            deleteForm.processing
                                ? 'Wird gelöscht …'
                                : 'Raum löschen'
                        }}
                    </button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    </section>
</template>