scrum-poker-internal/resources/js/components/rooms/RoomModeratorControls.vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Eye, RotateCcw, Trash2 } from '@lucide/vue';

import { nextRound, reset as resetRound, reveal } from '@/routes/room';
import type { RoomModeratorControlsProps } from '@/types/room';

const props = defineProps<RoomModeratorControlsProps>();

const revealForm = useForm<{ room?: string }>({});
const nextRoundForm = useForm<{ room?: string }>({});
const resetForm = useForm<{ room?: string }>({});

function revealCards(): void {
    revealForm.submit(reveal(props.roomId), {
        preserveScroll: true,
    });
}

function startNextRound(): void {
    nextRoundForm.submit(nextRound(props.roomId), {
        preserveScroll: true,
    });
}

function resetVotes(): void {
    resetForm.submit(resetRound(props.roomId), {
        preserveScroll: true,
    });
}
</script>

<template>
    <div class="reset-controls">
        <button
            type="button"
            class="inline-flex items-center gap-2 rounded-xl border border-slate-600 bg-slate-800 px-4 py-2.5 font-semibold text-slate-200 transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
            :disabled="resetForm.processing || !hasVotes"
            @click="resetVotes"
        >
            <Trash2 class="size-4" />
            Votes zurücksetzen
        </button>
    </div>

    <div class="moderator-controls">
        <p
            v-if="revealForm.errors.room || nextRoundForm.errors.room"
            class="max-w-64 rounded-lg bg-rose-950/90 px-3 py-2 text-right text-sm text-rose-200 shadow-lg"
            role="alert"
        >
            {{ revealForm.errors.room ?? nextRoundForm.errors.room }}
        </p>

        <button
            v-if="!revealed"
            type="button"
            class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
            :disabled="revealForm.processing"
            @click="revealCards"
        >
            <Eye class="size-4" />
            Karten aufdecken
        </button>

        <button
            v-else
            type="button"
            class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
            :disabled="nextRoundForm.processing"
            @click="startNextRound"
        >
            <RotateCcw class="size-4" />
            Nächste Runde
        </button>
    </div>
</template>

<style scoped>
.moderator-controls {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.reset-controls {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 10;
}

@media (max-width: 640px) {
    .moderator-controls {
        right: 1rem;
        bottom: 1rem;
    }

    .reset-controls {
        bottom: 1rem;
        left: 1rem;
    }
}

@media (min-width: 768px) and (max-height: 800px) {
    .moderator-controls,
    .reset-controls {
        bottom: 0.75rem;
    }

    .moderator-controls {
        right: 0.75rem;
    }

    .reset-controls {
        left: 0.75rem;
    }

    button {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}
</style>