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

<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from '@lucide/vue';

import InputError from '@/components/InputError.vue';
import { Checkbox } from '@/components/ui/checkbox';
import { dashboard } from '@/routes';
import { update as updateSettings } from '@/routes/room/settings';
import type { RoomSettingsPageProps } from '@/types/room';

const props = defineProps<RoomSettingsPageProps>();
const form = useForm({
    allow_participants_to_manage_rounds:
        props.room.allow_participants_to_manage_rounds,
    is_persistent: props.room.is_persistent,
});

function submit(): void {
    form.patch(updateSettings(props.room.id).url, {
        preserveScroll: true,
    });
}
</script>

<template>
    <Head title="Raumeinstellungen" />

    <main
        class="flex min-h-[calc(100svh-4rem)] justify-center bg-slate-900 p-4 text-slate-100 sm:p-8"
    >
        <section class="flex w-full max-w-2xl flex-col gap-6">
            <Link
                :href="dashboard()"
                class="inline-flex w-fit items-center gap-2 text-sm text-slate-300 transition hover:text-white"
            >
                <ArrowLeft class="size-4" />
                Zurück zu meinen Räumen
            </Link>

            <div>
                <h1 class="text-2xl font-bold">Raumeinstellungen</h1>
                <p class="mt-1 text-sm text-slate-400">
                    {{ room.title ?? 'Scrum Poker' }} · {{ room.join_code }}
                </p>
            </div>

            <form
                class="flex flex-col gap-6 rounded-xl border border-slate-700 bg-slate-800 p-6"
                @submit.prevent="submit"
            >
                <label class="flex cursor-pointer items-center gap-4">
                    <Checkbox
                        :model-value="form.allow_participants_to_manage_rounds"
                        class="border-white"
                        @update:model-value="
                            form.allow_participants_to_manage_rounds =
                                $event === true
                        "
                    />
                    <span>
                        <strong class="block"
                            >Alle dürfen den Raum verwalten</strong
                        >
                        <span class="mt-1 block text-sm text-slate-400">
                            Alle aktiven Teilnehmer, auch Gäste, dürfen Runden
                            steuern und andere Teilnehmer aus dem Raum
                            entfernen.
                        </span>
                    </span>
                </label>
                <InputError
                    :message="form.errors.allow_participants_to_manage_rounds"
                />

                <label class="flex cursor-pointer items-center gap-4">
                    <Checkbox
                        :model-value="form.is_persistent"
                        class="border-white"
                        @update:model-value="
                            form.is_persistent = $event === true
                        "
                    />
                    <span>
                        <strong class="block"
                            >Raum dauerhaft offen halten</strong
                        >
                        <span class="mt-1 block text-sm text-slate-400">
                            Der Raum wird auch nach längerer Inaktivität nicht
                            automatisch geschlossen.
                        </span>
                    </span>
                </label>
                <InputError :message="form.errors.is_persistent" />

                <button
                    type="submit"
                    class="inline-flex w-fit rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
                    :disabled="form.processing"
                >
                    {{ form.processing ? 'Wird gespeichert …' : 'Speichern' }}
                </button>
            </form>
        </section>
    </main>
</template>