BC-8548 - Implementing Dialog for Changing the User Roles in a Room (#…

…3528)

BC-8548 - implement a dialog for changing role in room

src/components/icons/material/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable schulcloud/material-icon-imports */
 import {
 	mdiAccountBoxOutline,
+	mdiAccountEditOutline,
 	mdiAccountCircleOutline,
 	mdiAccountGroupOutline,
 	mdiAccountOffOutline,
@@ -149,6 +150,7 @@ import {
 
 export {
 	mdiAccountBoxOutline,
+	mdiAccountEditOutline,
 	mdiAccountCircleOutline,
 	mdiAccountGroupOutline,
 	mdiAccountOffOutline,

src/locales/de.ts

@@ -1811,6 +1811,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.actionMenu.ariaLabel": "Aktionsmenü für {memberName}",
 	"pages.rooms.members.changePermission": "Raumberechtigungen ändern",
 	"pages.rooms.members.changePermission.ariaLabel":
 		"Berechtigung für {memberName} ändern",
@@ -1831,6 +1832,16 @@ export default {
 	"pages.rooms.members.tableHeader.roomRole": "Raumberechtigungen",
 	"pages.rooms.members.tableHeader.schoolRole": "Schulrolle",
 	"pages.rooms.members.tableHeader.actions": "Aktionen",
+	"pages.rooms.members.roleChange.subTitle":
+		"{memberName} erhält die folgenden Berechtigungen im Raum „{roomName}”:",
+	"pages.rooms.members.roleChange.multipleUser.subTitle":
+		"Die ausgewählten Mitglieder erhalten die folgenden Berechtigungen im Raum „{roomName}”:",
+	"pages.rooms.members.roleChange.Roomviewer.subText":
+		"Auf die Bereiche im Raum zugreifen und Inhalte ansehen",
+	"pages.rooms.members.roleChange.Roomeditor.subText":
+		"Inhalte erstellen und bearbeiten",
+	"pages.rooms.members.roleChange.Roomadmin.subText":
+		"Gleiche Berechtigungen wie „Bearbeiten”, zusätzlich andere Mitglieder hinzufügen, entfernen, deren Raumberechtigungen ändern sowie Raum bearbeiten",
 	"pages.rooms.title": "Räume",
 	"pages.taskCard.addElement": "Element hinzufügen",
 	"pages.taskCard.deleteElement.text":

src/locales/en.ts

@@ -1779,6 +1779,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "more information",
 	"pages.rooms.members.label": "Participants",
 	"pages.rooms.members.add": "Add members",
+	"pages.rooms.members.actionMenu.ariaLabel": "Action menu for {memberName}",
 	"pages.rooms.members.changePermission": "Change permissions",
 	"pages.rooms.members.changePermission.ariaLabel":
 		"Change permissions for {memberName}",
@@ -1799,6 +1800,16 @@ export default {
 	"pages.rooms.members.tableHeader.roomRole": "Room Permissions",
 	"pages.rooms.members.tableHeader.schoolRole": "School Role",
 	"pages.rooms.members.tableHeader.actions": "Actions",
+	"pages.rooms.members.roleChange.subTitle":
+		"{memberName} receives the following permissions in the room “{roomName}”:",
+	"pages.rooms.members.roleChange.multipleUser.subTitle":
+		"The selected members will receive the following room permissions in “{roomName}”:",
+	"pages.rooms.members.roleChange.Roomviewer.subText":
+		"Access the areas in the room and view content",
+	"pages.rooms.members.roleChange.Roomeditor.subText":
+		"Create and edit content",
+	"pages.rooms.members.roleChange.Roomadmin.subText":
+		'Same permissions as "Edit", plus add and remove other members, change their room permissions and edit the room',
 	"pages.rooms.title": "Rooms",
 	"pages.taskCard.addElement": "Add element",
 	"pages.taskCard.deleteElement.text":

src/locales/es.ts

@@ -1828,6 +1828,8 @@ 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.actionMenu.ariaLabel":
+		"Menú de acciones para {memberName}",
 	"pages.rooms.members.changePermission": "Cambiar permisos",
 	"pages.rooms.members.changePermission.ariaLabel":
 		"Cambiar el permiso para {memberName}",
@@ -1850,6 +1852,16 @@ export default {
 	"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.members.roleChange.subTitle":
+		"{memberName} recibe los siguientes permisos de sala en “{roomName}”:",
+	"pages.rooms.members.roleChange.multipleUser.subTitle":
+		"Los miembros seleccionados recibirán los siguientes permisos de sala en “{roomName}”:",
+	"pages.rooms.members.roleChange.Roomviewer.subText":
+		"Accede a las áreas de la sala y visualiza el contenido",
+	"pages.rooms.members.roleChange.Roomeditor.subText":
+		"Crear y editar contenido",
+	"pages.rooms.members.roleChange.Roomadmin.subText":
+		'Los mismos permisos que "Editar", además de agregar y eliminar otros miembros, cambiar sus permisos de sala y editar la sala',
 	"pages.rooms.title": "Salas",
 	"pages.taskCard.addElement": "Añadir artículo",
 	"pages.taskCard.deleteElement.text":

src/locales/uk.ts

@@ -1808,6 +1808,7 @@ export default {
 	"pages.rooms.members.infoText.moreInformation": "більше інформації",
 	"pages.rooms.members.label": "Учасники",
 	"pages.rooms.members.add": "Додайте члени",
+	"pages.rooms.members.actionMenu.ariaLabel": "Меню дій для {memberName}",
 	"pages.rooms.members.changePermission": "Змінити дозволи",
 	"pages.rooms.members.changePermission.ariaLabel":
 		"Змінити дозвіл для {memberName}",
@@ -1828,6 +1829,16 @@ export default {
 	"pages.rooms.members.tableHeader.roomRole": "Дозволи кімнати",
 	"pages.rooms.members.tableHeader.schoolRole": "Роль у школі",
 	"pages.rooms.members.tableHeader.actions": "Дії",
+	"pages.rooms.members.roleChange.subTitle":
+		"{memberName} надаються наступні повноваження в приміщенні “{roomName}”:",
+	"pages.rooms.members.roleChange.multipleUser.subTitle":
+		"Вибрані учасники отримають такі дозволи на кімнату в “{roomName}”:",
+	"pages.rooms.members.roleChange.Roomviewer.subText":
+		"Доступ до зон кімнати та перегляд вмісту",
+	"pages.rooms.members.roleChange.Roomeditor.subText":
+		"Створюйте та редагуйте контент",
+	"pages.rooms.members.roleChange.Roomadmin.subText":
+		"Такі самі дозволи, як і «Редагувати», а також додавати та видаляти інших учасників, змінювати їхні дозволи для кімнати та редагувати кімнату",
 	"pages.rooms.title": "Кімнати",
 	"pages.taskCard.addElement": "Додати елемент",
 	"pages.taskCard.deleteElement.text":

src/modules/data/room/roomMembers/memberVisibilityConfig.ts

@@ -0,0 +1,50 @@
+import { RoleName } from "@/serverApi/v3";
+
+type VisibilityOptions = {
+	isVisibleSelectionColumn: boolean;
+	isVisibleActionColumn: boolean;
+	isVisibleAddMemberButton: boolean;
+	isVisibleActionInRow: boolean;
+	isVisibleChangeRoleButton: boolean;
+	isVisibleLeaveRoomButton: boolean;
+	isVisiblePageInfoText: boolean;
+};
+
+export type RoomRoles =
+	| RoleName.Roomowner
+	| RoleName.Roomadmin
+	| RoleName.Roomeditor
+	| RoleName.Roomviewer;
+
+const defaultOptions: VisibilityOptions = {
+	isVisibleSelectionColumn: false,
+	isVisibleActionColumn: false,
+	isVisibleAddMemberButton: false,
+	isVisibleActionInRow: false,
+	isVisibleChangeRoleButton: false,
+	isVisibleLeaveRoomButton: true,
+	isVisiblePageInfoText: false,
+};
+
+export const roleConfigMap: Record<RoomRoles, VisibilityOptions> = {
+	[RoleName.Roomowner]: {
+		isVisibleSelectionColumn: true,
+		isVisibleActionColumn: true,
+		isVisibleActionInRow: false,
+		isVisibleAddMemberButton: true,
+		isVisibleChangeRoleButton: true,
+		isVisibleLeaveRoomButton: false,
+		isVisiblePageInfoText: true,
+	},
+	[RoleName.Roomadmin]: {
+		isVisibleSelectionColumn: true,
+		isVisibleActionColumn: true,
+		isVisibleAddMemberButton: true,
+		isVisibleActionInRow: true,
+		isVisibleChangeRoleButton: true,
+		isVisibleLeaveRoomButton: true,
+		isVisiblePageInfoText: true,
+	},
+	[RoleName.Roomeditor]: defaultOptions,
+	[RoleName.Roomviewer]: defaultOptions,
+};

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

@@ -1,57 +1,26 @@
 import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import { computed, ComputedRef } from "vue";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
+import { RoomRoles, roleConfigMap } from "./memberVisibilityConfig";
+import { RoomMember } from "./types";
 
-type VisibilityOptions = {
-	isVisibleSelectionColumn: boolean;
-	isVisibleActionColumn: boolean;
-	isVisibleAddMemberButton: boolean;
-	isVisibleActionInRow: boolean;
-	isVisibleChangeRoleButton: boolean;
-	isVisibleLeaveRoomButton: boolean;
-};
-
-type RoomRoles =
-	| RoleName.Roomowner
-	| RoleName.Roomadmin
-	| RoleName.Roomeditor
-	| RoleName.Roomviewer;
-
-const defaultOptions: VisibilityOptions = {
-	isVisibleSelectionColumn: false,
-	isVisibleActionColumn: false,
-	isVisibleAddMemberButton: false,
-	isVisibleActionInRow: false,
-	isVisibleChangeRoleButton: false,
-	isVisibleLeaveRoomButton: true,
-};
-
-export const roleConfigMap: Record<RoomRoles, VisibilityOptions> = {
-	[RoleName.Roomowner]: {
-		isVisibleSelectionColumn: true,
-		isVisibleActionColumn: true,
-		isVisibleActionInRow: false,
-		isVisibleAddMemberButton: true,
-		isVisibleChangeRoleButton: true,
-		isVisibleLeaveRoomButton: false,
-	},
-	[RoleName.Roomadmin]: {
-		isVisibleSelectionColumn: true,
-		isVisibleActionColumn: true,
-		isVisibleAddMemberButton: true,
-		isVisibleActionInRow: true,
-		isVisibleChangeRoleButton: true,
-		isVisibleLeaveRoomButton: true,
-	},
-	[RoleName.Roomeditor]: defaultOptions,
-	[RoleName.Roomviewer]: defaultOptions,
+type VisibilityOptionReturnType = {
+	isVisibleSelectionColumn: ComputedRef<boolean>;
+	isVisibleActionColumn: ComputedRef<boolean>;
+	isVisibleAddMemberButton: ComputedRef<boolean>;
+	isVisibleChangeRoleButton: ComputedRef<boolean>;
+	isVisibleLeaveRoomButton: ComputedRef<boolean>;
+	isVisiblePageInfoText: ComputedRef<boolean>;
+	isVisibleActionInRow: (user: RoomMemberResponse) => boolean;
+	isVisibleRemoveMemberButton: (user: RoomMemberResponse) => boolean;
 };
 
 export const useRoomMemberVisibilityOptions = (
-	currentUser: ComputedRef<RoomMemberResponse>
-) => {
+	currentUser: ComputedRef<RoomMember>
+): VisibilityOptionReturnType => {
 	const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 	const { FEATURE_ROOMS_CHANGE_PERMISSIONS_ENABLED } = envConfigModule.getEnv;
+
 	const visibilityOptions = computed(
 		() => roleConfigMap[currentUser?.value?.roomRoleName as RoomRoles]
 	);
@@ -79,6 +48,10 @@ export const useRoomMemberVisibilityOptions = (
 		return visibilityOptions.value?.isVisibleLeaveRoomButton;
 	});
 
+	const isVisiblePageInfoText = computed(() => {
+		return visibilityOptions.value?.isVisiblePageInfoText;
+	});
+
 	const isVisibleActionInRow = (user: RoomMemberResponse) => {
 		if (user.roomRoleName === RoleName.Roomowner) return false;
 		return user.userId !== currentUser?.value.userId;
@@ -94,6 +67,7 @@ export const useRoomMemberVisibilityOptions = (
 		isVisibleAddMemberButton,
 		isVisibleChangeRoleButton,
 		isVisibleLeaveRoomButton,
+		isVisiblePageInfoText,
 		isVisibleActionInRow,
 		isVisibleRemoveMemberButton,
 	};