add canEditRoomBoard check in components

src/modules/feature/board-external-tool-element/ExternalToolElementAlert.vue

@@ -75,11 +75,13 @@ export default defineComponent({
 		);
 
 		const isToolIncompleteOperational: ComputedRef<boolean> = computed(
-			() => props.toolStatus.isIncompleteOperationalOnScopeContext && isTeacher
+			() =>
+				props.toolStatus.isIncompleteOperationalOnScopeContext &&
+				isTeacher.value
 		);
 
 		const errorMessage: ComputedRef<string> = computed(() =>
-			isTeacher
+			isTeacher.value
 				? "feature-board-external-tool-element.alert.error.teacher"
 				: "feature-board-external-tool-element.alert.error.student"
 		);

src/modules/feature/board-video-conference-element/components/VideoConferenceContentElement.vue

@@ -203,13 +203,13 @@ const hasParticipationPermission = computed(
 
 const canJoin = computed(
 	() =>
-		(isStudent || isTeacher) &&
+		(isStudent.value || isTeacher.value) &&
 		(!authModule.getUserRoles.includes("expert") ||
 			authModule.getUserRoles.length > 1 ||
 			isWaitingRoomActive.value)
 );
 
-const canStart = computed(() => isTeacher);
+const canStart = computed(() => isTeacher.value);
 const isCreating = computed(
 	() => props.isEditMode && !computedElement.value.content.title
 );

src/modules/feature/board/board/Board.vue

@@ -74,7 +74,7 @@
 					</div>
 					<div :class="{ 'mx-auto mt-9 w-100': isListBoard }">
 						<BoardColumnGhost
-							v-if="hasCreateColumnPermission"
+							v-if="hasCreateColumnPermission && canEditRoomBoard"
 							@create:column="onCreateColumn"
 							:isListBoard="isListBoard"
 						/>
@@ -201,31 +201,32 @@ const {
 	hasDeletePermission,
 	hasEditPermission,
 	isTeacher,
+	canEditRoomBoard,
 } = useBoardPermissions();
 
 const isBoardVisible = computed(() => board.value?.isVisible);
 
 const onCreateCard = async (columnId: string) => {
-	if (hasCreateCardPermission) boardStore.createCardRequest({ columnId });
+	if (hasCreateCardPermission.value) boardStore.createCardRequest({ columnId });
 };
 
 const onCreateColumn = async () => {
-	if (hasCreateCardPermission)
+	if (hasCreateCardPermission.value)
 		boardStore.createColumnRequest({ boardId: props.boardId });
 };
 
 const onDeleteCard = async (cardId: string) => {
-	if (hasCreateCardPermission) {
+	if (hasCreateCardPermission.value) {
 		cardStore.deleteCardRequest({ cardId });
 	}
 };
 
 const onDeleteColumn = async (columnId: string) => {
-	if (hasDeletePermission) boardStore.deleteColumnRequest({ columnId });
+	if (hasDeletePermission.value) boardStore.deleteColumnRequest({ columnId });
 };
 
 const onDropColumn = async (columnPayload: SortableEvent) => {
-	if (!hasMovePermission) return;
+	if (!hasMovePermission.value) return;
 
 	const columnId = extractDataAttribute(columnPayload.item, "columnId");
 	if (
@@ -243,7 +244,7 @@ const onDropColumn = async (columnPayload: SortableEvent) => {
 };
 
 const onMoveColumnBackward = async (columnIndex: number, columnId: string) => {
-	if (!hasMovePermission) return;
+	if (!hasMovePermission.value) return;
 	if (columnIndex === 0) return;
 
 	const columnMove: ColumnMove = {
@@ -256,7 +257,7 @@ const onMoveColumnBackward = async (columnIndex: number, columnId: string) => {
 };
 
 const onMoveColumnForward = async (columnIndex: number, columnId: string) => {
-	if (!hasMovePermission) return;
+	if (!hasMovePermission.value) return;
 	if (board.value && columnIndex === board.value.columns.length - 1) return;
 
 	const columnMove: ColumnMove = {
@@ -273,7 +274,7 @@ const onReloadBoard = async () => {
 };
 
 const onUpdateBoardVisibility = async (isVisible: boolean) => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 
 	boardStore.updateBoardVisibilityRequest({
 		boardId: props.boardId,
@@ -282,12 +283,12 @@ const onUpdateBoardVisibility = async (isVisible: boolean) => {
 };
 
 const onUpdateColumnTitle = async (columnId: string, newTitle: string) => {
-	if (hasEditPermission)
+	if (hasEditPermission.value)
 		boardStore.updateColumnTitleRequest({ columnId, newTitle });
 };
 
 const onUpdateBoardTitle = async (newTitle: string) => {
-	if (hasEditPermission)
+	if (hasEditPermission.value)
 		boardStore.updateBoardTitleRequest({ boardId: props.boardId, newTitle });
 };
 
@@ -316,7 +317,7 @@ onMounted(async () => {
 		boardId: props.boardId,
 	});
 
-	if (hasCreateToolPermission) {
+	if (hasCreateToolPermission.value) {
 		cardStore.loadPreferredTools(ToolContextType.BoardElement);
 	}
 
@@ -341,7 +342,7 @@ watch(
 watch(
 	() => isBoardVisible.value,
 	() => {
-		if (!(isBoardVisible.value || isTeacher)) {
+		if (!(isBoardVisible.value || isTeacher.value)) {
 			router.replace({ name: "room-details", params: { id: roomId.value } });
 			applicationErrorModule.setError(
 				createApplicationError(
@@ -437,15 +438,15 @@ const openDeleteBoardDialog = async (id: string) => {
 const isSelectBoardLayoutDialogOpen = ref(false);
 
 const onUpdateBoardLayout = async () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 
 	isSelectBoardLayoutDialogOpen.value = true;
 };
 
 const onSelectBoardLayout = async (layout: BoardLayout) => {
 	isSelectBoardLayoutDialogOpen.value = false;
 
-	if (!hasEditPermission || board.value?.layout === layout) return;
+	if (!hasEditPermission.value || board.value?.layout === layout) return;
 
 	boardStore.updateBoardLayoutRequest({
 		boardId: props.boardId,

src/modules/feature/board/board/BoardColumn.vue

@@ -65,6 +65,7 @@
 				</template>
 			</Sortable>
 			<BoardAddCardButton
+				v-if="hasCreateCardPermission"
 				@add-card="onCreateCard"
 				:data-testid="`column-${index}-add-card-btn`"
 				:style="{ visibility: !showAddButton ? 'hidden' : 'visible' }"
@@ -128,8 +129,12 @@ export default defineComponent({
 		const boardStore = useBoardStore();
 		const reactiveIndex = toRef(props, "index");
 		const colWidth = ref<number>(400);
-		const { hasMovePermission, hasCreateColumnPermission } =
-			useBoardPermissions();
+		const {
+			hasMovePermission,
+			hasCreateColumnPermission,
+			canEditRoomBoard,
+			hasCreateCardPermission,
+		} = useBoardPermissions();
 
 		const columnClasses = computed(() => {
 			const classes = ["column-drag-handle", "bg-white"];
@@ -154,7 +159,7 @@ export default defineComponent({
 
 		const { isDragging, dragStart, dragEnd } = useDragAndDrop();
 		const showAddButton = computed(
-			() => hasCreateColumnPermission && isDragging.value === false
+			() => hasCreateColumnPermission.value && isDragging.value === false
 		);
 
 		const isNotFirstColumn = computed(() => props.index !== 0);
@@ -211,6 +216,7 @@ export default defineComponent({
 			keyString: DragAndDropKey
 		) => {
 			if (cardId === undefined) return;
+			if (!canEditRoomBoard.value) return;
 
 			const fromColumnId = props.column.id;
 			const fromColumnIndex = boardStore.getColumnIndex(fromColumnId);
@@ -309,10 +315,12 @@ export default defineComponent({
 		const renderKey = computed(() => getRenderKey());
 
 		return {
+			canEditRoomBoard,
 			cardDropPlaceholderOptions,
 			columnClasses,
 			columnStyle,
 			colWidth,
+			hasCreateCardPermission,
 			hasCreateColumnPermission,
 			hasMovePermission,
 			isDragging,

src/modules/feature/board/board/BoardColumnHeader.vue

@@ -2,7 +2,7 @@
 	<div class="d-flex flex-wrap mb-4 mt-2" ref="columnHeader">
 		<div class="flex-1-0">
 			<BoardColumnInteractionHandler
-				:isEditMode="isEditMode"
+				:isEditMode="isEditMode && canEditRoomBoard"
 				@start-edit-mode="onStartEditMode"
 				@end-edit-mode="onEndEditMode"
 				@move:column-keyboard="onMoveColumnKeyboard"
@@ -12,7 +12,7 @@
 					:value="title.trim()"
 					:data-testid="`column-title-${index}`"
 					scope="column"
-					:isEditMode="isEditMode"
+					:isEditMode="isEditMode && canEditRoomBoard"
 					:placeholder="titlePlaceholder"
 					class="w-100"
 					:isFocused="isFocusedById"
@@ -23,7 +23,7 @@
 		</div>
 		<div class="mt-2 mr-3">
 			<BoardMenu
-				v-if="hasDeletePermission"
+				v-if="hasDeletePermission && canEditRoomBoard"
 				:scope="BoardMenuScope.COLUMN"
 				:data-testid="`column-menu-btn-${index}`"
 			>
@@ -95,7 +95,8 @@ const emit = defineEmits([
 ]);
 
 const columnId = toRef(props, "columnId");
-const { hasEditPermission, hasDeletePermission } = useBoardPermissions();
+const { hasEditPermission, hasDeletePermission, canEditRoomBoard } =
+	useBoardPermissions();
 const { isEditMode, startEditMode, stopEditMode } = useCourseBoardEditMode(
 	columnId.value
 );
@@ -104,12 +105,12 @@ const columnHeader = ref<HTMLDivElement | null>(null);
 const { isFocusedById } = useBoardFocusHandler(columnId.value, columnHeader);
 
 const onStartEditMode = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	startEditMode();
 };
 
 const onEndEditMode = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	stopEditMode();
 };
 

src/modules/feature/board/board/BoardHeader.vue

@@ -112,32 +112,32 @@ onMounted(() => setTimeout(calculateWidth, 100));
 const boardTitle = ref("");
 
 const onStartEditMode = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	startEditMode();
 };
 
 const onEndEditMode = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	stopEditMode();
 };
 
 const onCopyBoard = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	emit("copy:board");
 };
 
 const onShareBoard = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	emit("share:board");
 };
 
 const onPublishBoard = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	emit("update:visibility", true);
 };
 
 const onUnpublishBoard = () => {
-	if (!hasEditPermission) return;
+	if (!hasEditPermission.value) return;
 	emit("update:visibility", false);
 };
 

src/modules/feature/board/card/CardHost.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<CardHostInteractionHandler
-			:isEditMode="isEditMode"
+			:isEditMode="isEditMode && canEditRoomBoard"
 			@start-edit-mode="onStartEditMode"
 			@end-edit-mode="onEndEditMode"
 			@move:card-keyboard="onMoveCardKeyboard"
@@ -26,7 +26,7 @@
 				</template>
 				<template v-if="card">
 					<CardTitle
-						:isEditMode="isEditMode"
+						:isEditMode="isEditMode && canEditRoomBoard"
 						:value="card.title"
 						scope="card"
 						@update:value="onUpdateCardTitle($event, cardId)"
@@ -37,6 +37,7 @@
 
 					<div class="board-menu" :class="boardMenuClasses">
 						<BoardMenu
+							v-if="canEditRoomBoard"
 							:scope="BoardMenuScope.CARD"
 							has-background
 							:data-testid="boardMenuTestId"
@@ -62,7 +63,7 @@
 					<div :class="{ 'mt-n2': hasCardTitle }">
 						<ContentElementList
 							:elements="card.elements"
-							:isEditMode="isEditMode"
+							:isEditMode="isEditMode && canEditRoomBoard"
 							:isDetailView="isDetailView"
 							:row-index="rowIndex"
 							:column-index="columnIndex"
@@ -71,7 +72,10 @@
 							@move-up:element="onMoveContentElementUp"
 							@move-keyboard:element="onMoveContentElementKeyboard"
 						/>
-						<CardAddElementMenu @add-element="onAddElement" v-if="isEditMode" />
+						<CardAddElementMenu
+							@add-element="onAddElement"
+							v-if="isEditMode && canEditRoomBoard"
+						/>
 					</div>
 				</template>
 			</VCard>
@@ -178,7 +182,7 @@ export default defineComponent({
 		const { isEditMode, startEditMode, stopEditMode } = useCourseBoardEditMode(
 			cardId.value
 		);
-		const { hasDeletePermission } = useBoardPermissions();
+		const { hasDeletePermission, canEditRoomBoard } = useBoardPermissions();
 
 		const { askType } = useAddElementDialog(
 			cardStore.createElementRequest,
@@ -275,6 +279,7 @@ export default defineComponent({
 		return {
 			boardMenuClasses,
 			card,
+			canEditRoomBoard,
 			hasDeletePermission,
 			hasCardTitle,
 			isLoadingCard,