SEBSP-205 application view metadata in url query

Author: Nadim Ritter

client/src/components/views/proctoring/ProctoringApplicationSearchPage.vue

@@ -226,10 +226,12 @@
     //store
     const appBarStore = useAppBarStore();
 
-    //router params
-    const sessionId: string = useRoute().params.sessionId.toString();
-    const metadataApp: string = useRoute().params.metadataApp.toString();
-    const metadataWindow: string = useRoute().params.metadataWindow.toString();
+    //router params & query
+    const route = useRoute();
+    const sessionId: string = route.params.sessionId.toString();
+    const metadataApp = route.query.metadataApp ?? "";
+    const metadataWindow = route.query.metadataWindow ?? "";
+
 
     //fullscreen
     const videoPlayer = ref(null);
@@ -301,8 +303,8 @@
         const timestamps: number[] | null = 
             await applicationsSearchViewService.getTimestampListForApplicationSearch(
                 sessionId,
-                metadataApp,
-                metadataWindow
+                metadataApp.toString(),
+                metadataWindow.toString()
             );
 
         if(timestamps == null){

client/src/router/navigation.ts

@@ -9,4 +9,8 @@ export function navigateTo(navPath: string){
 export function openUrlInNewTab(url: string){
     //@ts-ignore
     window.open("", "_blank").location.href = router.resolve(url).href;
+}
+
+export function openUrlInNewTabApplicationView(url: string){
+    window.open(url, "_blank");
 }

client/src/router/router.ts

@@ -113,7 +113,7 @@ const routes: Array<RouteRecordRaw> = [
         }
       },
       {
-        path: constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/:sessionId/:metadataApp/:metadataWindow",
+        path: constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/:sessionId",
         name: "ProctoringApplicationSearchPage",
         component: ProctoringApplicationSearchPage,
         meta: {

client/src/services/component-services/searchViewService.ts

@@ -1,8 +1,9 @@
 import * as searchService from "@/services/api-services/searchService";
 import * as timeUtils from "@/utils/timeUtils";
 import * as tableUtils from "@/utils/table/tableUtils";
-import {openUrlInNewTab} from "@/router/navigation";
+import {openUrlInNewTab, openUrlInNewTabApplicationView} from "@/router/navigation";
 import * as constants from "@/utils/constants";
+import { useRoute } from "vue-router";
 
 //=============api==============
 export async function searchSessionsDay(optionalParamters?: OptionalParSearchSessions): Promise<string[] | null>{
@@ -73,7 +74,10 @@ export function openProctoringView(sessionId: string, timestamp?: string){
 }
 
 export function openProctoringApplicationSearch(sessionId: string, metadataApp: string, metadataWindow: string){
-    const url: string = constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/" + sessionId + "/" + metadataApp + "/" + metadataWindow;
-    openUrlInNewTab(url);
+    const url: URL = new URL(window.location.origin + constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/" + sessionId);
+    url.searchParams.set("metadataApp", metadataApp);
+    url.searchParams.set("metadataWindow", metadataWindow);
+
+    openUrlInNewTabApplicationView(url.toString());
 }
 //==============================