BC-8581 - Add Menu Actions for Room Permissions

src/components/icons/material/index.ts

@@ -88,6 +88,7 @@ import {
 	mdiKeyboardReturn,
 	mdiLightbulbOnOutline,
 	mdiLink,
+	mdiLocationExit,
 	mdiLock,
 	mdiLockOutline,
 	mdiLogin,
@@ -233,6 +234,7 @@ export {
 	mdiImport,
 	mdiInformation,
 	mdiKeyboardReturn,
+	mdiLocationExit,
 	mdiLightbulbOnOutline,
 	mdiLink,
 	mdiLock,

src/locales/de.ts

@@ -16,6 +16,7 @@ export default {
 	"common.actions.logout": "Abmelden",
 	"common.actions.ok": "OK",
 	"common.actions.pickColor": "Hintergrundfarbe auswählen",
+	"common.actions.leave": "Verlassen",
 	"common.actions.remove": "Entfernen",
 	"common.actions.rename": "Umbenennen",
 	"common.actions.save": "Speichern",
@@ -1800,6 +1801,8 @@ export default {
 		"Räume sind vorerst nur für Lehrkräfte sichtbar und werden weiter ausgebaut. Weitere Information gibt es auf unserer {helpLink}. Wir freuen uns über {feedbackLink} zum aktuellen Stand.",
 	"pages.rooms.infoAlert.welcome.visibility.help": "Hilfeseite",
 	"pages.rooms.infoAlert.welcome.visibility.feedback": "Rückmeldungen",
+	"pages.rooms.leaveRoom.confirmation": 'Raum	"{roomName}" wirklich verlassen?',
+	"pages.rooms.leaveRoom.menu": "Raum verlassen",
 	"pages.rooms.members.error.load":
 		"Die Teilnehmenden-Liste konnte nicht geladen werden.",
 	"pages.rooms.members.error.add":
@@ -1811,6 +1814,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "weitere Informationen",
 	"pages.rooms.members.label": "Teilnehmende",
 	"pages.rooms.members.add": "Mitglieder hinzufügen",
+	"pages.rooms.members.changePermission": "Raumberechtigungen ändern",
 	"pages.rooms.members.manage": "Raum-Mitglieder",
 	"pages.rooms.members.remove.ariaLabel": "{memberName} aus Raum entfernen",
 	"pages.rooms.members.resetSelection.ariaLabel":
@@ -1827,6 +1831,7 @@ export default {
 	"pages.rooms.members.roomPermissions.viewer": "Lesen",
 	"pages.rooms.members.tableHeader.roomRole": "Raumberechtigungen",
 	"pages.rooms.members.tableHeader.schoolRole": "Schulrolle",
+	"pages.rooms.members.tableHeader.actions": "Aktionen",
 	"pages.rooms.title": "Räume",
 	"pages.taskCard.addElement": "Element hinzufügen",
 	"pages.taskCard.deleteElement.text":

src/locales/en.ts

@@ -17,6 +17,7 @@ export default {
 	"common.actions.logout": "Logout",
 	"common.actions.ok": "OK",
 	"common.actions.pickColor": "Select background colour",
+	"common.actions.leave": "Leave",
 	"common.actions.remove": "Remove",
 	"common.actions.rename": "Rename",
 	"common.actions.save": "Save",
@@ -1771,6 +1772,8 @@ export default {
 		"Rooms are currently only visible to teachers and will be further developed. Further information can be found on our {helpLink}. We look forward to receiving {feedbackLink} on the current status.",
 	"pages.rooms.infoAlert.welcome.visibility.help": "help page",
 	"pages.rooms.infoAlert.welcome.visibility.feedback": "feedback",
+	"pages.rooms.leaveRoom.confirmation": 'Leave room "{roomName}"?',
+	"pages.rooms.leaveRoom.menu": "Leave room",
 	"pages.rooms.members.error.load": "The participant list could not be loaded.",
 	"pages.rooms.members.error.add": "Adding participants failed.",
 	"pages.rooms.members.error.remove": "Deleting participants failed.",
@@ -1779,6 +1782,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "more information",
 	"pages.rooms.members.label": "Participants",
 	"pages.rooms.members.add": "Add members",
+	"pages.rooms.members.changePermission": "Change permissions",
 	"pages.rooms.members.manage": "Room members",
 	"pages.rooms.members.remove.ariaLabel": "Remove {memberName} from the room",
 	"pages.rooms.members.resetSelection.ariaLabel":
@@ -1795,6 +1799,7 @@ export default {
 	"pages.rooms.members.roomPermissions.viewer": "Read",
 	"pages.rooms.members.tableHeader.roomRole": "Room Permissions",
 	"pages.rooms.members.tableHeader.schoolRole": "School Role",
+	"pages.rooms.members.tableHeader.actions": "Actions",
 	"pages.rooms.title": "Rooms",
 	"pages.taskCard.addElement": "Add element",
 	"pages.taskCard.deleteElement.text":

src/locales/es.ts

@@ -17,6 +17,7 @@ export default {
 	"common.actions.logout": "Desconectar",
 	"common.actions.ok": "Aceptar",
 	"common.actions.pickColor": "Seleccione el color de fondo",
+	"common.actions.leave": "Dejar",
 	"common.actions.remove": "Eliminar",
 	"common.actions.rename": "Renombrar",
 	"common.actions.save": "Guardar",
@@ -1820,6 +1821,8 @@ export default {
 		"Las salas son actualmente visibles solo para los profesores y se seguirán desarrollando. Puede encontrar más información en nuestro {helpLink}. Agradecemos sus {feedbackLink} sobre el estado actual.",
 	"pages.rooms.infoAlert.welcome.visibility.help": "página de ayuda",
 	"pages.rooms.infoAlert.welcome.visibility.feedback": "comentarios",
+	"pages.rooms.leaveRoom.confirmation": 'Dejar la sala "{roomName}"?',
+	"pages.rooms.leaveRoom.menu": "Salir de la sala",
 	"pages.rooms.members.error.load":
 		"No se pudo cargar la lista de participantes.",
 	"pages.rooms.members.error.add": "Error al agregar participantes.",
@@ -1829,6 +1832,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "más información",
 	"pages.rooms.members.label": "Participantes",
 	"pages.rooms.members.add": "Añadir miembros",
+	"pages.rooms.members.changePermission": "Cambiar permisos",
 	"pages.rooms.members.manage": "Miembros de la sala",
 	"pages.rooms.members.remove.ariaLabel": "Eliminar {memberName} de la sala",
 	"pages.rooms.members.resetSelection.ariaLabel":
@@ -1847,6 +1851,7 @@ export default {
 	"pages.rooms.members.roomPermissions.viewer": "Leer",
 	"pages.rooms.members.tableHeader.roomRole": "Permisos de la sala",
 	"pages.rooms.members.tableHeader.schoolRole": "Rol en la escuela",
+	"pages.rooms.members.tableHeader.actions": "Acciones",
 	"pages.rooms.title": "Salas",
 	"pages.taskCard.addElement": "Añadir artículo",
 	"pages.taskCard.deleteElement.text":

src/locales/uk.ts

@@ -17,6 +17,7 @@ export default {
 	"common.actions.logout": "Вийти з аккаунта",
 	"common.actions.ok": "ОК",
 	"common.actions.pickColor": "Вибрати колір тла",
+	"common.actions.leave": "Залиште",
 	"common.actions.remove": "Вилучити",
 	"common.actions.rename": "перейменувати",
 	"common.actions.save": "Зберегти",
@@ -1800,6 +1801,8 @@ export default {
 		"Кімнати наразі видимі лише для вчителів і будуть далі розвиватися. Додаткову інформацію можна знайти на нашій {helpLink}. Ми будемо вдячні за ваші {feedbackLink} щодо поточного стану.",
 	"pages.rooms.infoAlert.welcome.visibility.help": "Сторінка допомоги",
 	"pages.rooms.infoAlert.welcome.visibility.feedback": "відгуки",
+	"pages.rooms.leaveRoom.confirmation": 'Дійсно залишити місце "{roomName}"?',
+	"pages.rooms.leaveRoom.menu": "Залиште кімнату",
 	"pages.rooms.members.error.load": "Не вдалося завантажити список учасників.",
 	"pages.rooms.members.error.add": "Не вдалося додати учасників.",
 	"pages.rooms.members.error.remove": "Не вдалося видалити учасників.",
@@ -1808,6 +1811,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "більше інформації",
 	"pages.rooms.members.label": "Учасники",
 	"pages.rooms.members.add": "Додайте члени",
+	"pages.rooms.members.changePermission": "Змінити дозволи",
 	"pages.rooms.members.manage": "Учасник кімнати",
 	"pages.rooms.members.remove.ariaLabel": "Видалити {memberName} з кімнати",
 	"pages.rooms.members.resetSelection.ariaLabel":
@@ -1824,6 +1828,7 @@ export default {
 	"pages.rooms.members.roomPermissions.viewer": "Читати",
 	"pages.rooms.members.tableHeader.roomRole": "Дозволи кімнати",
 	"pages.rooms.members.tableHeader.schoolRole": "Роль у школі",
+	"pages.rooms.members.tableHeader.actions": "Дії",
 	"pages.rooms.title": "Кімнати",
 	"pages.taskCard.addElement": "Додати елемент",
 	"pages.taskCard.deleteElement.text":

src/modules/data/room/Rooms.state.ts

@@ -36,6 +36,19 @@ export const useRoomsState = () => {
 		}
 	};
 
+	const leaveRoom = async (roomId: string, userId: string) => {
+		isLoading.value = true;
+		try {
+			await roomApi.roomControllerRemoveMembers(roomId, { userIds: [userId] });
+		} catch (error) {
+			const responseError = mapAxiosErrorToResponseError(error);
+
+			throw createApplicationError(responseError.code);
+		} finally {
+			isLoading.value = false;
+		}
+	};
+
 	const isEmpty = computed(() => {
 		return rooms.value.length === 0;
 	});
@@ -46,5 +59,6 @@ export const useRoomsState = () => {
 		isEmpty,
 		fetchRooms,
 		deleteRoom,
+		leaveRoom,
 	};
 };

src/modules/data/room/Rooms.state.unit.ts

@@ -113,6 +113,34 @@ describe("useRoomsState", () => {
 		});
 	});
 
+	describe("leaveRoom", () => {
+		it("should call leaveRoom api", async () => {
+			const { leaveRoom, isLoading } = useRoomsState();
+			const roomId = "room-id";
+			const userId = "user-id";
+
+			await leaveRoom(roomId, userId);
+			expect(roomApiMock.roomControllerRemoveMembers).toHaveBeenCalledWith(
+				roomId,
+				{ userIds: [userId] }
+			);
+			expect(isLoading.value).toBe(false);
+		});
+
+		it("should throw an error when leaving room fails", async () => {
+			const { leaveRoom, isLoading } = useRoomsState();
+			const roomId = "room-id";
+			const userId = "user-id";
+
+			roomApiMock.roomControllerRemoveMembers.mockRejectedValue({
+				code: 404,
+			});
+
+			await expect(leaveRoom(roomId, userId)).rejects.toThrow();
+			expect(isLoading.value).toBe(false);
+		});
+	});
+
 	describe("isEmpty", () => {
 		it("should return true when there are no rooms", () => {
 			const { isEmpty, rooms } = useRoomsState();

src/modules/data/room/index.ts

@@ -7,4 +7,5 @@ export { useRoomCreateState } from "./RoomCreate.state";
 export { useRoomEditState } from "./RoomEdit.state";
 
 export { useRoomMembers } from "./roomMembers/roomMembers.composable";
+export { useRoomMemberVisibilityOptions } from "./roomMembers/membersVisibleOptions.composable";
 export type { RoomMember } from "./roomMembers/types";

src/modules/data/room/roomMembers/membersVisibleOptions.composable.ts

@@ -0,0 +1,96 @@
+import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
+import { ComputedRef } from "vue";
+import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
+
+type VisibilityOptions = {
+	isSelectionColumnVisible: boolean;
+	isActionColumnVisible: boolean;
+	isAddMemberButtonVisible: boolean;
+	isActionInRowVisible: boolean;
+	isChangeRoleButtonVisible: boolean;
+	isLeaveRoomButtonVisible: boolean;
+};
+
+type RoomRoles =
+	| RoleName.Roomowner
+	| RoleName.Roomadmin
+	| RoleName.Roomeditor
+	| RoleName.Roomviewer;
+
+const defaultOptions: VisibilityOptions = {
+	isSelectionColumnVisible: false,
+	isActionColumnVisible: false,
+	isAddMemberButtonVisible: false,
+	isActionInRowVisible: false,
+	isChangeRoleButtonVisible: false,
+	isLeaveRoomButtonVisible: true,
+};
+
+const roleConfigMap: Record<RoomRoles, VisibilityOptions> = {
+	[RoleName.Roomowner]: {
+		isSelectionColumnVisible: true,
+		isActionColumnVisible: true,
+		isActionInRowVisible: false,
+		isAddMemberButtonVisible: true,
+		isChangeRoleButtonVisible: true,
+		isLeaveRoomButtonVisible: false,
+	},
+	[RoleName.Roomadmin]: {
+		isSelectionColumnVisible: true,
+		isActionColumnVisible: true,
+		isAddMemberButtonVisible: true,
+		isActionInRowVisible: true,
+		isChangeRoleButtonVisible: true,
+		isLeaveRoomButtonVisible: true,
+	},
+	[RoleName.Roomeditor]: defaultOptions,
+	[RoleName.Roomviewer]: defaultOptions,
+};
+
+export const useRoomMemberVisibilityOptions = (
+	currentUser: ComputedRef<RoomMemberResponse>
+) => {
+	const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+	const { FEATURE_ROOMS_CHANGE_PERMISSIONS_ENABLED } = envConfigModule.getEnv;
+
+	const isSelectionColumnVisible = () => {
+		return roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
+			?.isSelectionColumnVisible;
+	};
+
+	const isActionColumnVisible = () => {
+		return roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
+			?.isActionColumnVisible;
+	};
+
+	const isAddMemberButtonVisible = () => {
+		return roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
+			?.isAddMemberButtonVisible;
+	};
+
+	const isActionInRowVisible = (user: RoomMemberResponse) => {
+		if (user.roomRoleName === RoleName.Roomowner) return false;
+		return user.userId !== currentUser?.value.userId;
+	};
+
+	const isChangeRoleButtonVisible = () => {
+		return (
+			roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
+				?.isChangeRoleButtonVisible && FEATURE_ROOMS_CHANGE_PERMISSIONS_ENABLED
+		);
+	};
+
+	const isLeaveRoomButtonVisible = () => {
+		return roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
+			?.isLeaveRoomButtonVisible;
+	};
+
+	return {
+		isSelectionColumnVisible,
+		isActionColumnVisible,
+		isAddMemberButtonVisible,
+		isActionInRowVisible,
+		isChangeRoleButtonVisible,
+		isLeaveRoomButtonVisible,
+	};
+};