mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-16 05:48:50 +00:00
fix: refactored the codebase
This commit is contained in:
@@ -0,0 +1,168 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user