diff --git a/client/src/components/RoomSettingsForm.vue b/client/src/components/RoomSettingsForm.vue
index 1215f992e..21c7fe5f0 100644
--- a/client/src/components/RoomSettingsForm.vue
+++ b/client/src/components/RoomSettingsForm.vue
@@ -4,14 +4,14 @@
@@ -22,7 +22,7 @@
{ title: $t('room-settings.unlisted'), value: Visibility.Unlisted },
]"
v-model="settings.visibility.value"
- :loading="isLoadingRoomSettings"
+ :loading="isLoadingRoomSettings || dirtySettings.includes('visibility')"
:disabled="!granted('configure-room.set-visibility')"
data-cy="select-visibility"
>
@@ -55,7 +55,7 @@
},
]"
v-model="settings.queueMode.value"
- :loading="isLoadingRoomSettings"
+ :loading="isLoadingRoomSettings || dirtySettings.includes('queueMode')"
:disabled="!granted('configure-room.set-queue-mode')"
data-cy="select-queueMode"
>
@@ -68,6 +68,9 @@
@@ -164,6 +167,7 @@ import { ALL_SKIP_CATEGORIES } from "ott-common/constants";
import { useGrants } from "./composables/grants";
import { useRoute } from "vue-router";
import { watch } from "vue";
+import { watchDebounced } from "@vueuse/core";
const store = useStore();
const { t } = useI18n();
@@ -191,6 +195,16 @@ for (const key of Object.keys(inputRoomSettings) as (keyof RoomSettings)[]) {
}
});
}
+watchDebounced(
+ inputRoomSettings,
+ async () => {
+ if (dirtySettings.value.length === 0) {
+ return;
+ }
+ await submitRoomSettings();
+ },
+ { debounce: 1000 }
+);
onMounted(async () => {
await loadRoomSettings();