allow anyone controll room option

resources/js/components/rooms/RoomHeader.vue

@@ -1,16 +1,32 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { Link, useHttp } from '@inertiajs/vue3';
 import { Check, Copy } from '@lucide/vue';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 import { Checkbox } from '@/components/ui/checkbox';
 import { favorite } from '@/routes/room';
+import { update as updatePermissions } from '@/routes/room/permissions';
 import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
 const props = defineProps<RoomHeaderProps>();
 const emit = defineEmits<RoomHeaderEmits>();
 
 const copied = ref(false);
+const allowParticipantControls = ref(props.allowParticipantControls);
+const permissionRequest = useHttp(() => updatePermissions(props.id), {
+    allow_participant_controls: props.allowParticipantControls,
+});
+
+watch(
+    () => props.allowParticipantControls,
+    (value) => {
+        allowParticipantControls.value = value;
+
+        if (!permissionRequest.processing) {
+            permissionRequest.allow_participant_controls = value;
+        }
+    },
+);
 
 async function copyInviteLink(): Promise<void> {
     const inviteUrl = new URL('/room/join', window.location.origin);
@@ -22,6 +38,24 @@ async function copyInviteLink(): Promise<void> {
         copied.value = false;
     }, 1_800);
 }
+
+function updateParticipantControls(value: boolean): void {
+    if (permissionRequest.processing) {
+        return;
+    }
+
+    const previousValue = allowParticipantControls.value;
+
+    allowParticipantControls.value = value;
+    permissionRequest.allow_participant_controls = value;
+
+    void permissionRequest.submit({
+        onError: () => {
+            allowParticipantControls.value = previousValue;
+            permissionRequest.allow_participant_controls = previousValue;
+        },
+    });
+}
 </script>
 
 <template>
@@ -67,6 +101,30 @@ async function copyInviteLink(): Promise<void> {
                 <Copy v-else class="size-5 text-slate-300" />
             </button>
 
+            <label
+                v-if="isModerator"
+                for="participant-controls"
+                class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
+            >
+                <Checkbox
+                    id="participant-controls"
+                    :model-value="allowParticipantControls"
+                    :disabled="permissionRequest.processing"
+                    @update:model-value="
+                        updateParticipantControls($event === true)
+                    "
+                />
+                <span>Alle dürfen die Runde steuern</span>
+            </label>
+
+            <p
+                v-if="permissionRequest.errors.allow_participant_controls"
+                class="max-w-xs text-right text-sm text-rose-300"
+                role="alert"
+            >
+                {{ permissionRequest.errors.allow_participant_controls }}
+            </p>
+
             <label
                 for="presenter-mode"
                 class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"

resources/js/components/rooms/RoomTable.vue

@@ -120,7 +120,10 @@ const voteCount = computed(
             />
 
             <RoomModeratorControls
-                v-if="currentPlayer.is_moderator"
+                v-if="
+                    currentPlayer.is_moderator ||
+                    room.allow_participant_controls
+                "
                 :room-id="room.id"
                 :revealed="room.revealed"
                 :has-votes="voteCount > 0"