BC-9604 - consistent breadcrumbs

src/components/administration/ProvisioningOptionsPage.unit.ts

@@ -93,22 +93,6 @@ describe("ProvisioningOptionsPage", () => {
 		vi.clearAllMocks();
 	});
 
-	describe("breadcrumbs", () => {
-		it("should render static breadcrumbs", () => {
-			const { wrapper } = getWrapper();
-
-			const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
-
-			expect(breadcrumbs[0].text()).toEqual("pages.administration.index.title");
-			expect(breadcrumbs[1].text()).toEqual(
-				"pages.administration.school.index.title"
-			);
-			expect(breadcrumbs[2].text()).toEqual(
-				"components.administration.provisioningOptions.page.title"
-			);
-		});
-	});
-
 	describe("title", () => {
 		it("should render static title", () => {
 			const { wrapper } = getWrapper();

src/components/administration/ProvisioningOptionsPage.vue

@@ -163,7 +163,6 @@
 
 <script setup lang="ts">
 import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import { injectStrict, THEME_KEY } from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
@@ -177,6 +176,7 @@ import { computed, ComputedRef, onMounted, Ref, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { useEnvConfig } from "@data-env";
+import { Breadcrumb } from "../templates/default-wireframe.types";
 
 type Props = {
 	systemId: string;
@@ -207,21 +207,18 @@ const pageTitle = buildPageTitle(
 );
 useTitle(pageTitle);
 
-const schoolSettingsPage: Breadcrumb = {
-	title: t("pages.administration.school.index.title"),
-	to: "/administration/school-settings",
-};
-const breadcrumbs: Breadcrumb[] = [
-	{
-		title: t("pages.administration.index.title"),
-		disabled: true,
-	},
-	schoolSettingsPage,
-	{
-		title: t("components.administration.provisioningOptions.page.title"),
-		disabled: true,
-	},
-];
+const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => {
+	return [
+		{
+			title: t("pages.administration.school.index.title"),
+			to: "/administration/school-settings",
+		},
+		{
+			title: t("components.administration.provisioningOptions.page.title"),
+			disabled: true,
+		},
+	];
+});
 
 const provisioningOptions: ComputedRef<ProvisioningOptions> = computed(
 	() => provisioningOptionsData.value
@@ -305,7 +302,7 @@ const onCancel = async () => {
 
 const redirectToAdminPage = async () => {
 	await router.push({
-		path: schoolSettingsPage.to,
+		path: "/administration/school-settings",
 		query: { openPanels: "authentication" },
 	});
 };

src/modules/data/board/BoardPageInformation.composable.ts

@@ -12,7 +12,7 @@ const useBoardPageInformation = () => {
 	const { getContextInfo } = useBoardApi();
 
 	const boardContext = ref<Awaited<ReturnType<typeof getContextInfo>>>();
-
+	const boardTitle = ref<string>();
 	const roomId = computed(() => boardContext.value?.id);
 	const contextType = computed(() => boardContext.value?.type);
 
@@ -22,14 +22,16 @@ const useBoardPageInformation = () => {
 		const type = unref(boardContext)?.type;
 
 		if (type === BoardContextType.Course) {
-			return buildPageTitle(
-				`${t("pages.room.boardCard.label.courseBoard")}${roomNameForPageTitle}`
-			);
+			const title =
+				boardTitle.value ?? t("pages.room.boardCard.label.courseBoard");
+
+			return buildPageTitle(`${title}${roomNameForPageTitle}`);
 		}
 		if (type === BoardContextType.Room) {
-			return buildPageTitle(
-				`${t("pages.roomDetails.board.defaultName")}${roomNameForPageTitle}`
-			);
+			const title =
+				boardTitle.value ?? t("pages.roomDetails.board.defaultName");
+
+			return buildPageTitle(`${title}${roomNameForPageTitle}`);
 		}
 		return "";
 	});
@@ -55,6 +57,11 @@ const useBoardPageInformation = () => {
 					to: `/rooms/${id}`,
 					disabled: false,
 				},
+				{
+					title:
+						boardTitle.value ?? t("pages.room.boardCard.label.courseBoard"),
+					disabled: true,
+				},
 			];
 		}
 		if (type === BoardContextType.Room) {
@@ -69,17 +76,26 @@ const useBoardPageInformation = () => {
 					to: `/rooms/${id}`,
 					disabled: false,
 				},
+				{
+					title: boardTitle.value ?? t("pages.roomDetails.board.defaultName"),
+					disabled: true,
+				},
 			];
 		}
 		return [];
 	});
 
-	const createPageInformation = async (id: string): Promise<void> => {
+	const createPageInformation = async (
+		id: string,
+		title?: string
+	): Promise<void> => {
 		boardContext.value = await getContextInfo(id);
+		boardTitle.value = title ?? "";
 	};
 
 	const resetPageInformation = (): void => {
 		boardContext.value = undefined;
+		boardTitle.value = "";
 	};
 
 	return {

src/modules/data/board/BoardPageInformation.composable.unit.ts

@@ -73,7 +73,7 @@ describe("BoardPageInformation.composable", () => {
 
 				await createPageInformation(fakeId);
 
-				expect(breadcrumbs.value).toHaveLength(2);
+				expect(breadcrumbs.value).toHaveLength(3);
 			});
 
 			it("should set page title", async () => {
@@ -139,7 +139,7 @@ describe("BoardPageInformation.composable", () => {
 
 				await createPageInformation(fakeId);
 
-				expect(breadcrumbs.value).toHaveLength(2);
+				expect(breadcrumbs.value).toHaveLength(3);
 			});
 
 			it("should set page title", async () => {

src/modules/data/folder/Folder.state.ts

@@ -19,34 +19,12 @@ export const useFolderState = () => {
 	const fileFolderElement = ref<FileFolderElement | undefined>(undefined);
 	const parentNodeInfos = ref<ParentNodeInfo[]>([]);
 
-	const fetchFileFolderElement = async (fileFolderElementId: string) => {
-		try {
-			const reponse =
-				await boardElementApi.elementControllerGetElementWithParentHierarchy(
-					fileFolderElementId
-				);
-
-			fileFolderElement.value = castToFileFolderElement(reponse.data.element);
-			parentNodeInfos.value = reponse.data.parentHierarchy;
-		} catch (error) {
-			throwApplicationError(error);
-		}
-	};
+	const parent = computed(() => {
+		const indexOfDirectParent = parentNodeInfos.value.length - 1;
+		const parent = parentNodeInfos.value[indexOfDirectParent];
 
-	const renameFolder = async (
-		title: string,
-		fileFolderElementId: string
-	): Promise<void> => {
-		try {
-			await boardElementApi.elementControllerUpdateElement(
-				fileFolderElementId,
-				{ data: { content: { title }, type: ContentElementType.FileFolder } }
-			);
-			await fetchFileFolderElement(fileFolderElementId);
-		} catch (error) {
-			throwApplicationError(error);
-		}
-	};
+		return parent;
+	});
 
 	const folderName = computed(() => {
 		const title = fileFolderElement.value?.content.title;
@@ -70,9 +48,40 @@ export const useFolderState = () => {
 			});
 		});
 
+		breadcrumbItems.push({ title: folderName.value, disabled: true });
+
 		return breadcrumbItems;
 	});
 
+	const fetchFileFolderElement = async (fileFolderElementId: string) => {
+		try {
+			const response =
+				await boardElementApi.elementControllerGetElementWithParentHierarchy(
+					fileFolderElementId
+				);
+
+			fileFolderElement.value = castToFileFolderElement(response.data.element);
+			parentNodeInfos.value = response.data.parentHierarchy;
+		} catch (error) {
+			throwApplicationError(error);
+		}
+	};
+
+	const renameFolder = async (
+		title: string,
+		fileFolderElementId: string
+	): Promise<void> => {
+		try {
+			await boardElementApi.elementControllerUpdateElement(
+				fileFolderElementId,
+				{ data: { content: { title }, type: ContentElementType.FileFolder } }
+			);
+			await fetchFileFolderElement(fileFolderElementId);
+		} catch (error) {
+			throwApplicationError(error);
+		}
+	};
+
 	const buildRootBreadCrumbItem = (parentNodeInfos: Ref<ParentNodeInfo[]>) => {
 		if (!parentNodeInfos.value[0]) return;
 
@@ -88,49 +97,42 @@ export const useFolderState = () => {
 		}
 	};
 
-	const parent = computed(() => {
-		const indexOfDirectParent = parentNodeInfos.value.length - 1;
-		const parent = parentNodeInfos.value[indexOfDirectParent];
+	const castToFileFolderElement = (
+		element: AnyContentElement
+	): FileFolderElement => {
+		if (element.type === ContentElementType.FileFolder) {
+			return element as FileFolderElement;
+		} else {
+			throw createApplicationError(404);
+		}
+	};
 
-		return parent;
-	});
+	const throwApplicationError = (error: unknown): never => {
+		const responseError = mapAxiosErrorToResponseError(error);
+
+		throw createApplicationError(responseError.code);
+	};
+
+	const mapNodeTypeToPathType = (nodeType: string): string => {
+		switch (nodeType) {
+			case ParentNodeType.Course:
+				return "courses";
+			case ParentNodeType.Room:
+				return "rooms";
+			case ParentNodeType.Board:
+				return "boards";
+			default:
+				throw new Error(`Unknown node type: ${nodeType}`);
+		}
+	};
 
 	return {
 		breadcrumbs,
 		fileFolderElement,
 		folderName,
-		fetchFileFolderElement,
 		parent,
+		fetchFileFolderElement,
 		mapNodeTypeToPathType,
 		renameFolder,
 	};
 };
-
-const castToFileFolderElement = (
-	element: AnyContentElement
-): FileFolderElement => {
-	if (element.type === ContentElementType.FileFolder) {
-		return element as FileFolderElement;
-	} else {
-		throw createApplicationError(404);
-	}
-};
-
-const throwApplicationError = (error: unknown): never => {
-	const responseError = mapAxiosErrorToResponseError(error);
-
-	throw createApplicationError(responseError.code);
-};
-
-const mapNodeTypeToPathType = (nodeType: string): string => {
-	switch (nodeType) {
-		case ParentNodeType.Course:
-			return "courses";
-		case ParentNodeType.Room:
-			return "rooms";
-		case ParentNodeType.Board:
-			return "boards";
-		default:
-			throw new Error(`Unknown node type: ${nodeType}`);
-	}
-};

src/modules/data/folder/Folder.state.unit.ts

@@ -154,6 +154,10 @@ describe("useFolderState", () => {
 							title: "Column Board",
 							to: "/boards/column-board-id",
 						},
+						{
+							disabled: true,
+							title: "title 3",
+						},
 					]);
 				});
 			});
@@ -183,6 +187,10 @@ describe("useFolderState", () => {
 							title: "Room",
 							to: "/rooms/room-id",
 						},
+						{
+							disabled: true,
+							title: "title 4",
+						},
 					]);
 				});
 			});