CSCEXAM-000 Lazy load rest of the student components

Co-authored-by: Matti Lupari <[email protected]>
CSCfi · Feb 6, 2024 · b7c67b2 · b7c67b2
1 parent ede0d89
commit b7c67b2
Show file tree

Hide file tree

Showing 25 changed files with 1,437 additions and 2,136 deletions.
diff --git a/ui/src/app/app.routing.ts → ui/src/app/app.routes.ts b/ui/src/app/app.routing.ts → ui/src/app/app.routes.ts
@@ -1,39 +1,20 @@
-/*
- * Copyright (c) 2017 Exam Consortium
- *
- * Licensed under the EUPL, Version 1.1 or - as soon they will be approved by the European Commission - subsequent
- * versions of the EUPL (the "Licence");
- * You may not use this work except in compliance with the Licence.
- * You may obtain a copy of the Licence at:
- *
- * https://joinup.ec.europa.eu/software/page/eupl/licence-eupl
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed
- * on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the Licence for the specific language governing permissions and limitations under the Licence.
- */
 import { inject } from '@angular/core';
 import { Route } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { map, Observable } from 'rxjs';
 import { AppComponent } from './app.component';
-import { CalendarComponent } from './calendar/calendar.component';
-import { StudentDashboardComponent } from './dashboard/student/student-dashboard.component';
-import { ExamEnrolmentsComponent } from './enrolment/exams/exam-enrolments.component';
-import { CollaborativeParticipationsComponent } from './enrolment/finished/collaborative-exam-participations.component';
-import { ExamParticipationsComponent } from './enrolment/finished/exam-participations.component';
-import { CollaborativeExamSearchComponent } from './enrolment/search/collaborative-exam-search.component';
-import { ExamSearchComponent } from './enrolment/search/exam-search.component';
-import { WaitingRoomComponent } from './enrolment/waiting-room/waiting-room.component';
-import { WrongLocationComponent } from './enrolment/wrong-location/wrong-location.component';
-import { ExaminationComponent } from './examination/examination.component';
-import { ExaminationLogoutComponent } from './examination/logout/examination-logout.component';
 import { LogoutComponent } from './session/logout/logout.component';
 
 const buildTitle = (key: string, extraPart = ''): Observable<string> => {
     const tx = inject(TranslateService);
     const extra = extraPart ? ` ${extraPart}` : '';
-    return tx.get(key).pipe(map(() => `${tx.instant(key)}${extra} - EXAM`));
+    return tx.get(key).pipe(
+        map(
+            () =>
+                `${tx.instant(key)}${extra}
+     - EXAM`,
+        ),
+    );
 };
 
 export const APP_ROUTES: Route[] = [
@@ -45,7 +26,8 @@ export const APP_ROUTES: Route[] = [
     },
     {
         path: 'dashboard',
-        component: StudentDashboardComponent,
+        loadComponent: () =>
+            import('./dashboard/student/student-dashboard.component').then((mod) => mod.StudentDashboardComponent),
         title: () => buildTitle('i18n_enrolments_title'),
     },
     {
@@ -54,71 +36,84 @@ export const APP_ROUTES: Route[] = [
     },
     {
         path: 'exam/:hash',
-        component: ExaminationComponent,
         data: {
             isPreview: false,
         },
         title: () => buildTitle('i18n_examination_title'),
+        loadComponent: () => import('./examination/examination.component').then((mod) => mod.ExaminationComponent),
     },
     {
         path: 'waitingroom/:id/:hash',
-        component: WaitingRoomComponent,
+        loadComponent: () =>
+            import('./enrolment/waiting-room/waiting-room.component').then((mod) => mod.WaitingRoomComponent),
         title: () => buildTitle('i18n_waiting_room_title'),
     },
     {
         path: 'waitingroom',
-        component: WaitingRoomComponent,
+        loadComponent: () =>
+            import('./enrolment/waiting-room/waiting-room.component').then((mod) => mod.WaitingRoomComponent),
         title: () => buildTitle('i18n_waiting_room_title'),
     },
     {
         path: 'wrongroom/:eid/:mid',
-        component: WrongLocationComponent,
+        loadComponent: () =>
+            import('./enrolment/wrong-location/wrong-location.component').then((mod) => mod.WrongLocationComponent),
         data: {
             cause: 'room',
         },
         title: () => buildTitle('i18n_wrong_room_title'),
     },
     {
         path: 'wrongmachine/:eid/:mid',
-        component: WrongLocationComponent,
+        loadComponent: () =>
+            import('./enrolment/wrong-location/wrong-location.component').then((mod) => mod.WrongLocationComponent),
         data: {
             cause: 'machine',
         },
         title: () => buildTitle('i18n_wrong_machine_title'),
     },
     {
         path: 'exams',
-        component: ExamSearchComponent,
+        loadComponent: () => import('./enrolment/search/exam-search.component').then((mod) => mod.ExamSearchComponent),
         title: () => buildTitle('i18n_exams_title'),
     },
     {
         path: 'exams/collaborative',
-        component: CollaborativeExamSearchComponent,
+        loadComponent: () =>
+            import('./enrolment/search/collaborative-exam-search.component').then(
+                (mod) => mod.CollaborativeExamSearchComponent,
+            ),
         title: () => buildTitle('i18n_collaborative_exams_title'),
     },
     {
         path: 'participations',
-        component: ExamParticipationsComponent,
+        loadComponent: () =>
+            import('./enrolment/finished/exam-participations.component').then((mod) => mod.ExamParticipationsComponent),
         title: () => buildTitle('i18n_participations_title'),
     },
     {
         path: 'participations/collaborative',
-        component: CollaborativeParticipationsComponent,
+        loadComponent: () =>
+            import('./enrolment/finished/collaborative-exam-participations.component').then(
+                (mod) => mod.CollaborativeParticipationsComponent,
+            ),
         title: () => buildTitle('i18n_collaborative_participations_title'),
     },
     {
         path: 'examination/logout',
-        component: ExaminationLogoutComponent,
+        loadComponent: () =>
+            import('./examination/logout/examination-logout.component').then((mod) => mod.ExaminationLogoutComponent),
         title: () => buildTitle('i18n_examination_logout_title'),
     },
     {
         path: 'enrolments/:id',
-        component: ExamEnrolmentsComponent,
+        loadComponent: () =>
+            import('./enrolment/exams/exam-enrolments.component').then((mod) => mod.ExamEnrolmentsComponent),
         title: (route) => buildTitle('i18n_enrolment_title', `#${route.params.id}`),
     },
     {
         path: 'calendar/:id',
-        component: CalendarComponent,
+        loadComponent: () => import('./calendar/calendar.component').then((mod) => mod.CalendarComponent),
         data: {
             isExternal: false,
             isCollaborative: false,
@@ -127,22 +122,21 @@ export const APP_ROUTES: Route[] = [
     },
     {
         path: 'calendar/:id/external',
-        component: CalendarComponent,
-        data: { isExternal: true },
+        loadComponent: () => import('./calendar/calendar.component').then((mod) => mod.CalendarComponent),
+        data: {
+            isExternal: true,
+        },
         title: (route) => buildTitle('i18n_external_reservation_title', `#${route.params.id}`),
     },
     {
         path: 'calendar/:id/collaborative',
-        component: CalendarComponent,
-        data: { isExternal: false, isCollaborative: true },
+        loadComponent: () => import('./calendar/calendar.component').then((mod) => mod.CalendarComponent),
+        data: {
+            isExternal: false,
+            isCollaborative: true,
+        },
         title: (route) => buildTitle('i18n_collaborative_reservation_title', `#${route.params.id}`),
     },
-    /*
-     { // this does not work apparently because admin code uses some of calendar dependencies
--        path: 'calendar',
--        loadChildren: () => import('./calendar/calendar.module').then((mod) => mod.CalendarModule),
--    },
-    */
     {
         path: 'staff',
         loadChildren: () => import('./dashboard/staff/staff.routes').then((mod) => mod.STAFF_ROUTES),

diff --git a/ui/src/app/calendar/booking-calendar.component.ts b/ui/src/app/calendar/booking-calendar.component.ts
@@ -44,7 +44,7 @@ import { CalendarService } from './calendar.service';
     template: `
         @if (visible) {
             <div>
-                <div class="row mart20 marb10" id="calendarBlock">
+                <div class="row mt-2 mb-2" id="calendarBlock">
                     @if (visible) {
                         <div class="col-md-12">
                             <full-calendar #fc [options]="calendarOptions()"></full-calendar>

diff --git a/ui/src/app/calendar/calendar.component.html b/ui/src/app/calendar/calendar.component.html
@@ -1,5 +1,5 @@
 <div id="dashboard">
-    <div class="col-md-12 mt-2">
+    <div class="col-12 mt-2">
         <div class="student-details-title-wrap">
             <xm-history-back xmAutoFocus></xm-history-back>
             <h1 class="student-exam-details-title">{{ 'i18n_calendar' | translate }}</h1>
@@ -16,7 +16,7 @@ <h1 class="student-exam-details-title">{{ 'i18n_calendar' | translate }}</h1>
     }
     <!-- Phase 2: Optional exam section selection (optional) -->
     @if (examInfo && hasOptionalSections()) {
-        <div class="mart10">
+        <div class="mt-3">
             <xm-calendar-optional-sections
                 [examInfo]="examInfo"
                 (selected)="onSectionSelection($event)"
@@ -25,7 +25,7 @@ <h1 class="student-exam-details-title">{{ 'i18n_calendar' | translate }}</h1>
     }
     <!-- Phase 3: Organisation picker -->
     @if (isInteroperable && isExternal) {
-        <div class="mart10">
+        <div class="mt-3">
             <xm-calendar-organisation-picker
                 [sequenceNumber]="getSequenceNumber('organization')"
                 [disabled]="!sectionSelectionOk()"
@@ -35,7 +35,7 @@ <h1 class="student-exam-details-title">{{ 'i18n_calendar' | translate }}</h1>
         </div>
     }
     <!-- Phase 4: Room picker -->
-    <div class="mart10">
+    <div class="mt-3">
         <xm-calendar-slot-picker
             [sequenceNumber]="getSequenceNumber('room')"
             [isInteroperable]="isInteroperable"
@@ -53,12 +53,12 @@ <h1 class="student-exam-details-title">{{ 'i18n_calendar' | translate }}</h1>
 
     <!-- Reservation confirmation -->
 
-    <div class="row mart10 marb20">
-        <div class="col-md-8 col-12 pad0">
+    <div class="row mt-3 mb-4">
+        <div class="col-md-8 col-12 p-0">
             <div class="row student-enrolment-wrapper details-view" [ngClass]="reservation ? '' : 'notactive'">
                 <div class="col-md-12">
                     <div class="row">
-                        <span class="col-md-12 marb10">
+                        <span class="col-md-12 mb-3">
                             <h2 class="calendar-phase-title">
                                 {{ getSequenceNumber('confirmation') }}. {{ 'i18n_calendar_phase_3' | translate }}
                             </h2>
@@ -133,8 +133,8 @@ <h2 class="calendar-phase-title">
                 </div>
             </div>
         </div>
-        <div class="col-md-4 col-12 pad0 mar-">
-            <div class="row mart20 marb10 marr10 marl10 align-items-center">
+        <div class="col-md-4 col-12 p-0">
+            <div class="row m-2 align-items-center">
                 <div class="col-md-12">
                     <button
                         [disabled]="!reservation || confirming"
@@ -146,7 +146,7 @@ <h2 class="calendar-phase-title">
                     </button>
                 </div>
             </div>
-            <div class="row mart20 marb10 marr10 marl10 align-items-center">
+            <div class="row m-2 align-items-center">
                 <div class="col-md-12">
                     <button
                         class="btn btn-lg btn-outline-secondary float-end"

diff --git a/ui/src/app/calendar/helpers/exam-info.component.ts b/ui/src/app/calendar/helpers/exam-info.component.ts
@@ -30,7 +30,7 @@ import type { ExamInfo } from '../calendar.service';
                         </div>
                     </div>
                 </div>
-                <div class="row mart10">
+                <div class="row mt-2">
                     <div class="col-md-12">
                         <div class="row">
                             <div class="col-6 col-sm-6 col-md-4 col-lg-4">{{ 'i18n_course_name' | translate }}:</div>
@@ -61,15 +61,15 @@ import type { ExamInfo } from '../calendar.service';
                         </div>
                     </div>
                 </div>
-                <div class="row mart10">
+                <div class="row mt-2">
                     <div class="col-md-12">
                         <span class="student-exam-row-infolink" [hidden]="examInfo.executionType?.type === 'MATURITY'">
                             {{ 'i18n_calendar_instructions' | translate }}:
                             <span [xmMathJax]="examInfo.enrollInstruction"></span>
                         </span>
                     </div>
                 </div>
-                <div class="row mart10">
+                <div class="row mt-2">
                     <div class="col-md-12">
                         @if (showReservationWindowDescription()) {
                             <span class="infolink" role="note">

diff --git a/ui/src/app/calendar/helpers/organisation-picker.component.ts b/ui/src/app/calendar/helpers/organisation-picker.component.ts
@@ -8,10 +8,7 @@ import { CalendarService } from '../calendar.service';
 @Component({
     selector: 'xm-calendar-organisation-picker',
     template: `
-        <div
-            class="row student-enrolment-wrapper details-view row"
-            [ngClass]="selectedOrganisation() ? '' : 'notactive'"
-        >
+        <div class="row student-enrolment-wrapper details-view" [ngClass]="selectedOrganisation() ? '' : 'notactive'">
             <div class="col-md-12">
                 <div class="row">
                     <span class="col-md-11 col-9">
@@ -29,7 +26,7 @@ import { CalendarService } from '../calendar.service';
                 </div>
                 <div class="row">
                     <div class="col-md-12">
-                        <div class="row mart10">
+                        <div class="row mt-2">
                             <div class="col student-exam-row-title">
                                 <span ngbDropdown>
                                     <button

diff --git a/ui/src/app/calendar/helpers/slot-picker.component.html b/ui/src/app/calendar/helpers/slot-picker.component.html
@@ -14,7 +14,7 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
         </div>
         <div class="row mt-2 mb-2">
             <!-- todo: make this a component -->
-            <div class="col-md-12 mart10 marb20" [hidden]="isExternal">
+            <div class="col-md-12 mt-2 mb-2" [hidden]="isExternal">
                 <div class="row">
                     <span class="col-md-12">
                         @if (!disabled) {
@@ -49,7 +49,7 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
                             <div class="row">
                                 <div class="col-md-12 calendar-accs-checkboxes">
                                     @for (accessibility of accessibilities(); track accessibility.id) {
-                                        <span class="marr10 accs-list">
+                                        <span class="me-2 accs-list">
                                             <label for="{{ accessibility.name }}">
                                                 <input
                                                     id="{{ accessibility.name }}"
@@ -69,7 +69,7 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
             </div>
         </div>
         <div class="row ms-1 mt-3">
-            <div class="dropdown col" ngbDropdown>
+            <div class="col" ngbDropdown>
                 <button
                     ngbDropdownToggle
                     class="btn btn-outline-dark"
@@ -100,7 +100,7 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
             </div>
         </div>
         @if (selectedRoom) {
-            <div class="row mart10">
+            <div class="row mt-2">
                 <div class="col-md-12">
                     <xm-calendar-selected-room
                         [room]="selectedRoom"
@@ -111,7 +111,7 @@ <h2 class="calendar-phase-title">{{ sequenceNumber }}. {{ 'i18n_calendar_phase_2
             </div>
         }
         @if (selectedRoom) {
-            <div class="row mart10">
+            <div class="row mt-2">
                 <div class="col-md-12">
                     <xm-booking-calendar
                         (eventSelected)="eventSelected($event)"