BC-8396 - Adjust BoardTile design

config/webpack/webpack.common.js

@@ -166,6 +166,7 @@ module.exports = {
 			"@ui-kebab-menu": getDir("src/modules/ui/kebab-menu"),
 			"@ui-layout": getDir("src/modules/ui/layout"),
 			"@ui-light-box": getDir("src/modules/ui/light-box"),
+			"@ui-line-clamp": getDir("src/modules/ui/line-clamp"),
 			"@ui-preview-image": getDir("src/modules/ui/preview-image"),
 			"@ui-room-details": getDir("src/modules/ui/room-details"),
 			"@ui-skip-link": getDir("src/modules/ui/skip-link"),

src/modules/data/board/Board.store.ts

@@ -324,7 +324,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 	const deleteBoardSuccess = (payload: DeleteBoardSuccessPayload) => {
 		if (payload.isOwnAction === true) {
 			router.replace({
-				name: "rooms-id",
+				name: "room-details",
 				params: { id: roomId.value },
 			});
 			return;

src/modules/data/board/Board.store.unit.ts

@@ -1196,7 +1196,7 @@ describe("BoardStore", () => {
 				});
 
 				expect(router.replace).toHaveBeenCalledWith({
-					name: "rooms-id",
+					name: "room-details",
 					params: { id: "roomId" },
 				});
 			});

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

@@ -1,5 +1,5 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomCreateParams, RoomItem } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import { RoomCreateParams, RoomItem, RoomColorEnum } from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { ref } from "vue";
 
@@ -9,7 +9,7 @@ export const useRoomCreateState = () => {
 
 	const roomData = ref<RoomCreateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});

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

@@ -6,7 +6,7 @@ import { useApplicationError } from "@/composables/application-error.composable"
 import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import setupStores from "@@/tests/test-utils/setupStores";
 import ApplicationErrorModule from "@/store/application-error";
-import { RoomCreateParams } from "@/types/room/Room";
+import { RoomCreateParams, RoomColorEnum } from "@/types/room/Room";
 import { ref } from "vue";
 import {
 	apiResponseErrorFactory,
@@ -73,7 +73,7 @@ describe("useRoomCreateState", () => {
 	describe("createRoom", () => {
 		const roomData = ref<RoomCreateParams>({
 			name: "Room 1",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 			startDate: undefined,
 			endDate: undefined,
 		});

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

@@ -1,5 +1,9 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomDetails, RoomUpdateParams } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import {
+	RoomDetails,
+	RoomUpdateParams,
+	RoomColorEnum,
+} from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
 import { ref } from "vue";
@@ -19,7 +23,7 @@ export const useRoomEditState = () => {
 
 	const roomData = ref<RoomUpdateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});

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

@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -105,7 +106,7 @@ describe("useRoomEditState", () => {
 			expect(isLoading.value).toBe(true);
 			const params = {
 				name: "room-name",
-				color: serverApi.RoomColor.BlueGrey,
+				color: RoomColorEnum.BlueGrey,
 			};
 
 			await updateRoom("room-id", params);
@@ -123,7 +124,7 @@ describe("useRoomEditState", () => {
 		const { updateRoom, isLoading } = setup();
 		const params = {
 			name: "room-name",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 		};
 		roomApiMock.roomControllerUpdateRoom.mockRejectedValue({ code: 404 });
 

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

@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -125,7 +126,7 @@ describe("useRoomsState", () => {
 				{
 					id: "1",
 					name: "Room 1",
-					color: serverApi.RoomColor.BlueGrey,
+					color: RoomColorEnum.BlueGrey,
 					createdAt: "2024.11.18",
 					updatedAt: "2024.11.18",
 				},

src/modules/feature/board/board/Board.unit.ts

@@ -869,7 +869,7 @@ describe("Board", () => {
 
 							expect(wrapperVM.isBoardVisible).toBe(false);
 							expect(router.replace).toHaveBeenCalledWith({
-								name: "rooms-id",
+								name: "room-details",
 								params: { id: mockRoomId },
 							});
 							expect(

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

@@ -308,7 +308,7 @@ watch(
 		setAlert();
 
 		if (!(isBoardVisible.value || isTeacher)) {
-			router.replace({ name: "rooms-id", params: { id: roomId.value } });
+			router.replace({ name: "room-details", params: { id: roomId.value } });
 			applicationErrorModule.setError(
 				createApplicationError(
 					HttpStatusCode.Forbidden,

src/modules/feature/room/BoardGrid.vue

@@ -4,6 +4,7 @@
 			v-for="(board, index) in boards"
 			:key="board.id"
 			cols="12"
+			sm="6"
 			md="4"
 			xl="3"
 		>

src/modules/feature/room/BoardTile.vue

@@ -1,23 +1,27 @@
 <template>
 	<VCard
-		class="board-tile"
-		:class="{ 'board-is-draft': isDraft }"
-		hover
-		:data-testid="`board-tile-${props.index}`"
+		:class="isDraft ? 'opacity-70' : 'bg-surface-light'"
+		:variant="isDraft ? 'outlined' : 'flat'"
+		draggable="false"
+		:data-testid="`board-tile-${index}`"
 		:to="boardPath"
 	>
 		<VCardSubtitle
-			class="board-tile-subtitle mt-4"
-			:data-testid="`board-tile-subtitle-${props.index}`"
+			class="mt-4 d-flex align-center"
+			:class="{ 'opacity-100': isDraft }"
+			:data-testid="`board-tile-subtitle-${index}`"
 		>
 			<VIcon size="14" class="mr-1" :icon="subtitleIcon" />
 			{{ subtitleText }}
 		</VCardSubtitle>
+
 		<VCardTitle
-			class="board-tile-title text-h6 my-2"
-			:data-testid="`board-tile-title-${props.index}`"
+			class="board-tile-title text-body-1 font-weight-bold my-2"
+			:data-testid="`board-tile-title-${index}`"
 		>
-			{{ board.title }}
+			<LineClamp>
+				{{ board.title }}
+			</LineClamp>
 		</VCardTitle>
 	</VCard>
 </template>
@@ -28,6 +32,7 @@ import { RoomBoardItem } from "@/types/room/Room";
 import { mdiViewAgendaOutline, mdiViewDashboardOutline } from "@icons/material";
 import { computed, PropType, toRef } from "vue";
 import { useI18n } from "vue-i18n";
+import { LineClamp } from "@ui-line-clamp";
 
 const props = defineProps({
 	board: { type: Object as PropType<RoomBoardItem>, required: true },
@@ -69,17 +74,3 @@ const boardPath = computed(() => {
 	return `/boards/${board.value.id}`;
 });
 </script>
-
-<style lang="scss" scoped>
-@import "@/styles/settings.scss";
-
-.board-tile {
-	background-color: map-get($grey, lighten-5);
-	border: 1px solid map-get($grey, lighten-2);
-
-	&.board-is-draft .board-tile-subtitle,
-	&.board-is-draft .board-tile-title {
-		opacity: 0.5;
-	}
-}
-</style>

src/modules/feature/room/RoomColorPicker/RoomColorPicker.unit.ts

@@ -5,7 +5,7 @@ import {
 import { mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomColorPicker from "./RoomColorPicker.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 describe("@feature-room/RoomColorPicker", () => {
 	const setup = (props?: ComponentProps<typeof RoomColorPicker>) => {
@@ -42,7 +42,7 @@ describe("@feature-room/RoomColorPicker", () => {
 
 	describe("when a color is given", () => {
 		it("should render given color as selected", () => {
-			const { wrapper } = setup({ color: RoomColor.Red });
+			const { wrapper } = setup({ color: RoomColorEnum.Red });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"

src/modules/feature/room/RoomColorPicker/RoomColorPicker.vue

@@ -5,7 +5,7 @@
 		role="radiogroup"
 		aria-labelledby="room-color-label"
 	>
-		<template v-for="swatchColor in RoomColor" :key="swatchColor">
+		<template v-for="swatchColor in RoomColorEnum" :key="swatchColor">
 			<RoomColorPickerSwatch
 				:color="swatchColor"
 				:is-selected="isSelected(swatchColor)"
@@ -19,12 +19,12 @@
 import { useVModel } from "@vueuse/core";
 import { PropType } from "vue";
 import RoomColorPickerSwatch from "./RoomColorPickerSwatch.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 const props = defineProps({
 	color: {
-		type: String as PropType<RoomColor>,
-		default: RoomColor.BlueGrey,
+		type: String as PropType<RoomColorEnum>,
+		default: RoomColorEnum.BlueGrey,
 	},
 	label: {
 		type: String,
@@ -36,11 +36,11 @@ const emit = defineEmits(["update:color"]);
 
 const currentColor = useVModel(props, "color", emit);
 
-const isSelected = (color: RoomColor) => {
+const isSelected = (color: RoomColorEnum) => {
 	return color === currentColor.value;
 };
 
-const onUpdateColor = (color: RoomColor) => {
+const onUpdateColor = (color: RoomColorEnum) => {
 	emit("update:color", color);
 };
 </script>

src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.unit.ts

@@ -5,7 +5,7 @@ import {
 import { mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomColorPickerSwatch from "./RoomColorPickerSwatch.vue";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 	const setup = (props?: ComponentProps<typeof RoomColorPickerSwatch>) => {
@@ -37,7 +37,7 @@ describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 
 	describe("when color is set", () => {
 		it("should render with given color", () => {
-			const { wrapper } = setup({ color: RoomColor.Red, isSelected: true });
+			const { wrapper } = setup({ color: RoomColorEnum.Red, isSelected: true });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"
@@ -47,7 +47,7 @@ describe("@feature-room/RoomColorPicker/RoomColorPickerSwatch", () => {
 		});
 
 		it("should render selected icon", () => {
-			const { wrapper } = setup({ color: RoomColor.Red, isSelected: true });
+			const { wrapper } = setup({ color: RoomColorEnum.Red, isSelected: true });
 
 			const selectedColor = wrapper.findComponent(
 				"[data-testid=color-swatch-red]"

src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue

@@ -16,12 +16,12 @@
 import { computed, PropType } from "vue";
 import { mdiCheckCircleOutline } from "@icons/material";
 import { useI18n } from "vue-i18n";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum } from "@/types/room/Room";
 
 const props = defineProps({
 	color: {
-		type: String as PropType<RoomColor>,
-		default: RoomColor.BlueGrey,
+		type: String as PropType<RoomColorEnum>,
+		default: RoomColorEnum.BlueGrey,
 	},
 	isSelected: {
 		type: Boolean,

src/modules/feature/room/RoomForm.unit.ts

@@ -5,19 +5,18 @@ import {
 import { flushPromises, mount } from "@vue/test-utils";
 import { ComponentProps } from "vue-component-type-helpers";
 import RoomForm from "./RoomForm.vue";
-import { RoomCreateParams } from "@/types/room/Room";
-import { RoomColor } from "@/serverApi/v3";
+import { RoomColorEnum, RoomCreateParams } from "@/types/room/Room";
 
 const mockRoom: RoomCreateParams = {
 	name: "A11Y for Beginners",
-	color: RoomColor.Magenta,
+	color: RoomColorEnum.Magenta,
 	startDate: "",
 	endDate: "",
 };
 
 const emptyMockRoom: RoomCreateParams = {
 	name: "",
-	color: RoomColor.Magenta,
+	color: RoomColorEnum.Magenta,
 	startDate: undefined,
 	endDate: undefined,
 };