SEBSP-118 fix loading issue with new data table server

client/src/components/views/StartPage.vue

@@ -1,7 +1,6 @@
 <template>
     <v-row>
         <v-col>
-
             <v-data-table
                 item-value="item.name"
                 class="rounded-lg elevation-4"

client/src/components/views/search/SearchSessionTable.vue

@@ -1,14 +1,9 @@
 <template>
-        <!--  -->
-        <!-- :items-per-page="tableUtils.calcDefaultItemsPerPage(sessions?.content)"  -->
-        <!--  -->
-
     <v-data-table-server
         show-expand
         item-value="sessionUUID" 
         class="elevation-1"
         @update:options="loadItems"
-        :sort-by="[{key: 'startTime', order: 'desc'}]"
         :loading="isLoading"
         loading-text="Loading... Please wait"
         :items="sessions?.content"
@@ -105,6 +100,8 @@
 
 
     //table
+    const isOnLoad = ref<boolean>(true);
+    const defaultSort: {key: string, order: string}[] = [{key: 'startTime', order: 'desc'}];
     const sessionTableHeadersRef = ref<any[]>();
     const sessionTableHeaders = ref([
         {title: "Start-Time", key: "startTime", width: "10%"},
@@ -113,28 +110,33 @@
         {title: "Group Name", key: "groupName", width: "20%"},
         {title: "Exam Name", key: "exam.name", width: "20%"},
         {title: "Slides", key: "nrOfScreenshots"},
-        {title: "Video", key: "proctoringViewLink"},
+        {title: "Video", key: "proctoringViewLink", sortable: false}
     ]);                 
 
     async function loadItems(serverTablePaging: ServerTablePaging){
-        console.log("--------start-------")
         isLoading.value = true;
+        //current solution to default sort the table
+        //sort-by in data-table-server tag breaks the sorting as the headers are in a seperate component
+        if(isOnLoad.value){
+            serverTablePaging.sortBy = defaultSort;
+        }
+
         let searchParameters: OptionalParSearchSessions = searchViewService.prepareSessionSearchParameters(props.day, props.searchParameters, serverTablePaging);
 
         console.log(searchParameters)
 
         const sessionSearchResponse: SearchSessions | null = await searchViewService.searchSessions(searchParameters);
         if(sessionSearchResponse == null){
-
             isLoading.value = false;
             return;
         }
 
         sessions.value = sessionSearchResponse;
         totalItems.value = sessionSearchResponse.numberOfPages * sessionSearchResponse.pageSize
 
+        isOnLoad.value = false;
         isLoading.value = false;
-        console.log("--------end-------")
+        console.log("--------end-------");
     }
 
 

client/src/services/api-services/apiService.ts

@@ -16,51 +16,33 @@ export function createApi(){
 }
 
 export function createApiInterceptor(){
-    const ignoredUrls: string[] = getIgnoredUrls();
-
     const authStore = useAuthStore();
     const loadingStore = useLoadingStore();
 
     let loadingTimeout: NodeJS.Timeout | null = null;
     let loadingEndTimeout: NodeJS.Timeout | null = null;
 
     api.interceptors.request.use(async (config) => {
-        //additional skip when url is used multiple times in differnet locations such as /group
-        if(!loadingStore.skipLoading && !loadingStore.isSessionsSearch){
-            loadingTimeout = setTimeout(() => {
-                loadingStore.isLoading = true;
-            }, 500);
-
-            loadingEndTimeout = setTimeout(() => {
-                resetLoadingState();
-            }, 10000);
-        }
+        const isIgnoredUrl: boolean = isUrlIgnorable(config.url);
 
-        if(loadingStore.isSessionsSearch){
-            loadingEndTimeout = setTimeout(() => {
-                loadingStore.isLoading = false;
-                loadingStore.isTimeout = true;
-                loadingStore.isSessionsSearch = false;
-            }, 15000);
-        }
-
-        const isIgnoredUrl: boolean = ignoredUrls.some(url => config.url?.includes(url));
-        if(isIgnoredUrl){
-            if (loadingTimeout) clearTimeout(loadingTimeout); 
+        if(loadingStore.skipLoading || isIgnoredUrl){
             return config;
         }
 
+        loadingTimeout = setTimeout(() => {
+            loadingStore.isLoading = true;
+        }, 500);
+
+        loadingEndTimeout = setTimeout(() => {
+            resetLoadingState();
+        }, 20000);
+
         return config;
     });
 
 
     api.interceptors.response.use(async response => {
-        if(loadingStore.isSessionsSearch){
-            if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
-        }else{
-            resetLoadingState();
-        }
-
+        resetLoadingState();
         return response;
 
     }, async error => {
@@ -93,10 +75,6 @@ export function createApiInterceptor(){
 
 
     function resetLoadingState(){
-        if(loadingStore.isSessionsSearch){
-            return;
-        }
-
         if (loadingTimeout) clearTimeout(loadingTimeout); 
         if (loadingEndTimeout) clearTimeout(loadingEndTimeout); 
 
@@ -131,6 +109,21 @@ function getIgnoredUrls(): string[]{
         "/screenshot-data/", 
         "/screenshot-timestamps/", 
         "/search/timeline", 
+        "/search/sessions",
         "/useraccount/me"
     ];
+}
+
+function isUrlIgnorable(url: string | undefined): boolean{
+    if(url == null){
+        return false;
+    } 
+
+    const ignoredUrls: string[] = getIgnoredUrls();
+
+    if(url == "/search/sessions/day"){
+        return false;
+    }
+
+    return ignoredUrls.some(urlFromList => url.includes(urlFromList))
 }

client/src/store/app.ts

@@ -74,10 +74,9 @@ export const useGalleryStore = defineStore("gallery", () => {
 export const useLoadingStore = defineStore("loading", () => {
   const skipLoading = ref<boolean>(false);
   const isLoading = ref<boolean>(false);
-  const isSessionsSearch = ref<boolean>(false);
   const isTimeout = ref<boolean>(false);
 
-  return {skipLoading, isLoading, isSessionsSearch, isTimeout};
+  return {skipLoading, isLoading, isTimeout};
 });
 //-------------------------------------------------//
 

client/src/utils/table/CustomTableHeader.vue

@@ -1,9 +1,10 @@
 <template>
     <tr>
         <template v-for="(column, index) in props.columns">
-            
+
             <th :aria-label="getHeaderDescription(column, isSorted)"> 
                 <span 
+                    v-if="column.sortable"
                     ref="headerRefs"
                     tabindex="0" 
                     class="mr-2 cursor-pointer font-weight-bold" 
@@ -12,6 +13,10 @@
                     @click="() => props.toggleSort(column)">
                     {{ column.title }}
                 </span>
+                <span 
+                    v-else>
+                    {{ column.title }}
+                </span>
 
                 <template v-if="props.isSorted(column)">
                     <v-icon :icon="props.getSortIcon(column)"></v-icon>

client/src/utils/table/tableUtils.ts

@@ -30,38 +30,36 @@ export function calcItemsPerPage(itemList: any): { value: number, title: string
 
     let maxLength: number = 0;
     if(typeof itemList == "number"){
-        // console.log("it got here items per page")
         maxLength = itemList;
     }else{
         maxLength = itemList.length;
     }
 
     if (maxLength < 5) {
         return [
-            { value: maxLength, title: 'All' }
+            { value: maxLength, title: maxLength.toString() }
         ];
     }
 
     if (maxLength < 10) {
         return [
             { value: 5, title: '5' },
-            { value: maxLength, title: 'All' }
+            { value: maxLength, title: maxLength.toString() }
         ];
     }
 
     if (maxLength < 15) {
         return [
             { value: 5, title: '5' },
             { value: 10, title: '10' },
-            { value: maxLength, title: 'All' }
+            { value: maxLength, title: maxLength.toString() }
         ];
     }
 
     return [
         { value: 5, title: '5' },
         { value: 10, title: '10' },
         { value: 15, title: '15' },
-        // { value: maxLength, title: 'All' }
     ];
 }