BC-10569 - Add page title to collabora page

src/fileStorageApi/v3/api/file-api.ts

@@ -432,6 +432,44 @@ export const FileApiAxiosParamCreator = function (configuration?: Configuration)
 
 
 
+            setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @summary Get file record meta data by file record id.
+         * @param {string} fileRecordId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getFileRecord: async (fileRecordId: string, options: any = {}): Promise<RequestArgs> => {
+            // verify required parameter 'fileRecordId' is not null or undefined
+            assertParamExists('getFileRecord', 'fileRecordId', fileRecordId)
+            const localVarPath = `/file/{fileRecordId}`
+                .replace(`{${"fileRecordId"}}`, encodeURIComponent(String(fileRecordId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+
             setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
             let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
             localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -907,6 +945,17 @@ export const FileApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.downloadPreview(fileRecordId, fileName, outputFormat, width, forceUpdate, range, ifNoneMatch, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @summary Get file record meta data by file record id.
+         * @param {string} fileRecordId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getFileRecord(fileRecordId: string, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<FileRecordResponse>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getFileRecord(fileRecordId, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @summary Get stats (count and total size) of all files for a parent entityId.
@@ -1109,6 +1158,16 @@ export const FileApiFactory = function (configuration?: Configuration, basePath?
         downloadPreview(fileRecordId: string, fileName: string, outputFormat?: PreviewOutputMimeTypes, width?: PreviewWidth, forceUpdate?: boolean, range?: string, ifNoneMatch?: string, options?: any): AxiosPromise<object> {
             return localVarFp.downloadPreview(fileRecordId, fileName, outputFormat, width, forceUpdate, range, ifNoneMatch, options).then((request) => request(axios, basePath));
         },
+        /**
+         * 
+         * @summary Get file record meta data by file record id.
+         * @param {string} fileRecordId 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getFileRecord(fileRecordId: string, options?: any): AxiosPromise<FileRecordResponse> {
+            return localVarFp.getFileRecord(fileRecordId, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @summary Get stats (count and total size) of all files for a parent entityId.
@@ -1303,6 +1362,16 @@ export interface FileApiInterface {
      */
     downloadPreview(fileRecordId: string, fileName: string, outputFormat?: PreviewOutputMimeTypes, width?: PreviewWidth, forceUpdate?: boolean, range?: string, ifNoneMatch?: string, options?: any): AxiosPromise<object>;
 
+    /**
+     * 
+     * @summary Get file record meta data by file record id.
+     * @param {string} fileRecordId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FileApiInterface
+     */
+    getFileRecord(fileRecordId: string, options?: any): AxiosPromise<FileRecordResponse>;
+
     /**
      * 
      * @summary Get stats (count and total size) of all files for a parent entityId.
@@ -1513,6 +1582,18 @@ export class FileApi extends BaseAPI implements FileApiInterface {
         return FileApiFp(this.configuration).downloadPreview(fileRecordId, fileName, outputFormat, width, forceUpdate, range, ifNoneMatch, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * 
+     * @summary Get file record meta data by file record id.
+     * @param {string} fileRecordId 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FileApi
+     */
+    public getFileRecord(fileRecordId: string, options?: any) {
+        return FileApiFp(this.configuration).getFileRecord(fileRecordId, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @summary Get stats (count and total size) of all files for a parent entityId.

src/modules/data/file/FileRecords.state.ts

@@ -16,6 +16,14 @@ export const useFileRecordsStore = defineStore("fileRecords", {
 			return parentRecords ? Array.from(parentRecords.values()) : [];
 		},
 
+		getFileRecordById(id: string): FileRecord | undefined {
+			for (const parentRecords of this.recordsByParent.values()) {
+				for (const [recordId, record] of parentRecords) {
+					if (recordId === id) return record;
+				}
+			}
+		},
+
 		upsertFileRecords(updatedRecords: FileRecord[]): void {
 			updatedRecords.forEach((updatedRecord) => {
 				const { parentId, id } = updatedRecord;

src/modules/data/file/FileStorageApi.composable.ts

@@ -31,10 +31,21 @@ export const useFileStorageApi = () => {
 	const fileApi: FileApiInterface = FileApiFactory(undefined, "/v3", $axios);
 	const wopiApi: WopiApiInterface = WopiApiFactory(undefined, "/v3", $axios);
 
-	const { getFileRecordsByParentId, upsertFileRecords, deleteFileRecords } = useFileRecordsStore();
+	const { getFileRecordsByParentId, upsertFileRecords, deleteFileRecords, getFileRecordById } = useFileRecordsStore();
 
 	const { getStatisticByParentId, setStatisticForParent } = useParentStatisticsStore();
 
+	const fetchFileById = async (fileRecordId: string): Promise<void> => {
+		try {
+			const response = await fileApi.getFileRecord(fileRecordId);
+
+			upsertFileRecords([response.data]);
+		} catch (error) {
+			showError(error);
+			throw error;
+		}
+	};
+
 	const fetchFiles = async (parentId: string, parentType: FileRecordParent): Promise<void> => {
 		try {
 			const schoolId = useAppStore().school?.id as string;
@@ -173,9 +184,11 @@ export const useFileStorageApi = () => {
 		upload,
 		uploadFromUrl,
 		getFileRecordsByParentId,
+		getFileRecordById,
 		deleteFiles,
 		getStatisticByParentId,
 		tryGetParentStatisticFromApi: fetchFileStatistic,
 		getAuthorizedCollaboraDocumentUrl,
+		fetchFileById,
 	};
 };

src/modules/page/collabora/Collabora.page.vue

@@ -3,7 +3,7 @@
 		ref="iframeRef"
 		allow="clipboard-read *; clipboard-write *"
 		allowfullscreen
-		:src="url"
+		:src="url.toString()"
 		style="width: 100%; height: 100%; position: absolute"
 		:title="$t('pages.collabora.iframeTitle')"
 	/>
@@ -12,20 +12,24 @@
 <script setup lang="ts">
 import { useCollaboraPostMessageApi } from "./CollaboraPostMessageApi.composable";
 import { EditorMode } from "@/types/file/File";
+import { buildPageTitle } from "@/utils/pageTitle";
 import { useAppStoreRefs } from "@data-app";
+import { useBoardApi } from "@data-board";
 import { useFileStorageApi } from "@data-file";
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 
 interface Props {
 	fileRecordId: string;
-	editorMode: EditorMode;
+	editorMode?: EditorMode;
 }
 
 const props = defineProps<Props>();
-const url = ref<string>("");
+const url = ref<URL>(new URL("about:blank"));
 const iframeRef = ref<HTMLIFrameElement>();
-const { getAuthorizedCollaboraDocumentUrl } = useFileStorageApi();
+const { getAuthorizedCollaboraDocumentUrl, fetchFileById, getFileRecordById } = useFileStorageApi();
 const { setupPostMessageAPI } = useCollaboraPostMessageApi();
+const { getElementWithParentHierarchyCall } = useBoardApi();
 
 const { user, locale } = useAppStoreRefs();
 
@@ -41,19 +45,54 @@ const userName = computed(() => {
 });
 
 onMounted(async () => {
+	await setCollaboraUrl();
+
+	if (iframeRef.value) {
+		setupPostMessageAPI(iframeRef.value, url.value.origin);
+	}
+
+	await setPageTitle();
+});
+
+const setCollaboraUrl = async () => {
 	const responseCollaboraUrl = await getAuthorizedCollaboraDocumentUrl(
 		props.fileRecordId,
-		props.editorMode,
+		props.editorMode ?? EditorMode.VIEW,
 		userName.value
 	);
 
 	const collaboraUrl = new URL(responseCollaboraUrl);
 	collaboraUrl.searchParams.set("lang", locale.value);
 
-	url.value = collaboraUrl.toString();
+	url.value = collaboraUrl;
+};
 
-	if (iframeRef.value) {
-		setupPostMessageAPI(iframeRef.value, collaboraUrl.origin);
+const setPageTitle = async () => {
+	await fetchFileById(props.fileRecordId);
+
+	const fileRecord = getFileRecordById(props.fileRecordId);
+	const parentName = await getParentName(fileRecord?.parentId);
+
+	const firstPartOfPageTitle = formatePageTitlePrefix(fileRecord?.name, parentName);
+	const pageTitle = buildPageTitle(firstPartOfPageTitle);
+
+	useTitle(pageTitle);
+};
+
+const formatePageTitlePrefix = (fileName?: string, parentName?: string) => {
+	if (fileName) {
+		return parentName ? `${fileName} - ${parentName}` : fileName;
 	}
-});
+
+	return parentName || "";
+};
+
+const getParentName = async (parentId?: string): Promise<string | undefined> => {
+	if (parentId) {
+		const response = await getElementWithParentHierarchyCall(parentId);
+		const indexOfDirectParent = response.data.parentHierarchy.length - 1;
+
+		return response.data.parentHierarchy[indexOfDirectParent]?.name;
+	}
+};
 </script>