client: fix PermissionsEditor not propagating changes to parent (#1412)

* client: fix `PermissionsEditor` not propagating changes to parent

* format

Author: dyc3

client/src/components/PermissionsEditor.vue

@@ -31,6 +31,7 @@
 							v-model="item[r - 1]"
 							:disabled="getLowestGranted(item) < r - 1"
 							color="primary"
+							@update:model-value="onCheckboxModified"
 						/>
 						<v-checkbox v-else v-model="item[r - 1]" :disabled="true" />
 					</td>
@@ -41,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, Ref, watch, PropType } from "vue";
+import { defineComponent, ref, Ref, PropType } from "vue";
 import _ from "lodash";
 import { granted } from "@/util/grants";
 import { PERMISSIONS, ROLE_NAMES, Permission, Grants } from "ott-common/permissions";
@@ -62,10 +63,7 @@ export const PermissionsEditor = defineComponent({
 	emits: ["update:modelValue"],
 	setup(props, { emit }) {
 		const permissions: Ref<Permission[]> = ref([]);
-		const dirty = ref(false);
-		const shouldAcceptExternalUpdate = ref(true);
 		const isLoading = ref(false);
-		const updateEpoch = ref(0);
 
 		const rolePerms = {
 			[Role.Moderator]: "configure-room.set-permissions.for-moderator",
@@ -131,47 +129,22 @@ export const PermissionsEditor = defineComponent({
 			return new Grants(grants);
 		}
 
-		watch(props, () => {
-			if (shouldAcceptExternalUpdate.value) {
-				dirty.value = false;
-				updateEpoch.value++;
-				permissions.value = extractFromGrants(props.modelValue);
-			} else {
-				shouldAcceptExternalUpdate.value = true;
-			}
-		});
-
-		watch(
-			permissions,
-			() => {
-				if (!dirty.value) {
-					dirty.value = true;
-					shouldAcceptExternalUpdate.value = false;
-					permissions.value = extractFromGrants(rebuildMasks());
-				}
-			},
-			{ deep: true }
-		);
-
-		watch(dirty, val => {
-			if (val) {
-				emit("update:modelValue", rebuildMasks());
-				dirty.value = false;
-			}
-		});
+		function onCheckboxModified() {
+			const masks = rebuildMasks();
+			permissions.value = extractFromGrants(masks);
+			emit("update:modelValue", masks);
+		}
 
 		return {
 			permissions,
-			dirty,
-			shouldAcceptExternalUpdate,
 			isLoading,
-			updateEpoch,
 			granted,
 			ROLE_NAMES,
 			getLowestGranted,
 			getHighestDenied,
 			rolePerms,
 			Role,
+			onCheckboxModified,
 		};
 	},
 });