scrum-poker-internal/resources/js/pages/rooms/Create.vue

<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { store } from '@/routes/room';

type Deck = {
    id: number;
    name: string;
    cards: Array<{
        key: string;
        label: string;
    }>;
};

const props = defineProps<{
    decks: Deck[];
    defaultPlayerName: string | null;
}>();

const form = useForm({
    title: '',
    player_name: props.defaultPlayerName ?? '',
    deck_id: props.decks[0]?.id ?? null,
});

function submit(): void {
    form.submit(store());
}
</script>

<template>
    <Head title="Raum erstellen" />
    <main class="mx-auto max-w-lg p-6">
        <h1 class="mb-6 text-2xl font-bold">Scrum Poker Raum erstellen</h1>
        <form class="space-y-5" @submit.prevent="submit">
            <div>
                <label for="player_name" class="mb-1 block font-medium">
                    Dein Name
                </label>

                <input
                    id="player_name"
                    v-model="form.player_name"
                    type="text"
                    maxlength="50"
                    required
                    class="w-full rounded border p-2"
                    placeholder="Eric"
                />

                <p
                    v-if="form.errors.player_name"
                    class="mt-1 text-sm text-red-600"
                >
                    {{ form.errors.player_name }}
                </p>
            </div>

            <div>
                <label for="title" class="mb-1 block font-medium">
                    Raumtitle
                </label>

                <input
                    id="title"
                    v-model="form.title"
                    type="text"
                    maxlength="100"
                    class="w-full rounded border p-2"
                    placeholder="Sprint Planning"
                />

                <p v-if="form.errors.title" class="mt-1 text-sm text-red-600">
                    {{ form.errors.title }}
                </p>
            </div>

            <div>
                <label for="deck_id" class="mb-1 block font-medium">
                    Kartendeck
                </label>

                <select
                    id="deck_id"
                    v-model.number="form.deck_id"
                    required
                    class="w-full rounded border p-2"
                >
                    <option
                        v-for="deck in decks"
                        :key="deck.id"
                        :value="deck.id"
                    >
                        {{ deck.name }}
                    </option>
                </select>

                <p v-if="form.errors.deck_id" class="mt-1 text-sm text-red-600">
                    {{ form.errors.deck_id }}
                </p>
            </div>

            <div v-if="form.deck_id" class="rounded border p-3">
                <p class="mb-2 text-sm font-medium">Karten:</p>

                <div class="flex flex-wrap gap-2">
                    <template v-for="deck in decks" :key="deck.id">
                        <span
                            v-for="card in deck.id === form.deck_id
                                ? deck.cards
                                : []"
                            :key="card.key"
                            class="rounded border px-3 py-1"
                        >
                            {{ card.label }}
                        </span>
                    </template>
                </div>
            </div>

            <button
                type="submit"
                :disabled="form.processing || decks.length === 0"
                class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
            >
                {{ form.processing ? 'Raum wird erstellt' : 'Raum erstellen' }}
            </button>
        </form>

        <p v-if="decks.length === 0" class="mt-4 text-red-600">
            Es wurden noch keine Kartendecks angelegt.
        </p>
    </main>
</template>