CSCEXAM-1159 Move Collab search to Regular search as a tab

ui/src/app/app.routes.ts

@@ -81,16 +81,9 @@ export const APP_ROUTES: Route[] = [
     },
     {
         path: 'exams',
-        loadComponent: () => import('./enrolment/search/exam-search.component').then((mod) => mod.ExamSearchComponent),
-        title: () => buildTitle('i18n_exams_title'),
-    },
-    {
-        path: 'exams/collaborative',
         loadComponent: () =>
-            import('./enrolment/search/collaborative-exam-search.component').then(
-                (mod) => mod.CollaborativeExamSearchComponent,
-            ),
-        title: () => buildTitle('i18n_collaborative_exams_title'),
+            import('./enrolment/search/exam-search-tabs.component').then((mod) => mod.ExamSearchTabsComponent),
+        title: () => buildTitle('i18n_exams_title'),
     },
     {
         path: 'participations',

ui/src/app/dashboard/staff/staff.routes.ts

@@ -223,7 +223,7 @@ export const STAFF_ROUTES: Route[] = [
                 title: () => buildTitle('i18n_language_inspection_reports_title'),
             },
             {
-                path: 'adminexams',
+                path: 'admin/exams',
                 component: ExamListingComponent,
                 title: () => buildTitle('i18n_admin_exams_title'),
             },

ui/src/app/enrolment/active/active-enrolment.component.html

@@ -90,31 +90,27 @@ <h2>
             </div>
         </div>
     </div>
-    <div class="row mt-3">
-        <div class="col-6">
-            @if (exam) {
-                <div>{{ 'i18n_course_name' | translate }}:</div>
-            }
-
-            @if (exam && exam.course) {
-                <div>
-                    <span class="exam-code">
-                        <strong><xm-course-code [course]="exam.course"></xm-course-code></strong>
-                    </span>
-                    {{ exam.course.name }}
+    <div class="mt-3">
+        @if (exam) {
+            <div class="row mb-2">
+                <div class="col-md-3">{{ 'i18n_course_name' | translate }}:</div>
+                <div class="col-md-9">
+                    @if (exam.course) {
+                        <span class="exam-code" [attr.aria-label]="'i18n_course_code' | translate">
+                            <strong><xm-course-code [course]="exam.course"></xm-course-code></strong>
+                        </span>
+                        {{ exam.course.name }}
+                    }
                 </div>
-            }
-        </div>
-        <div class="col-6">
-            @if (exam) {
-                <div>{{ 'i18n_teachers' | translate }}:</div>
-            }
-            @if (exam) {
-                <div>
+            </div>
+
+            <div class="row mb-2">
+                <div class="col-md-3">{{ 'i18n_teachers' | translate }}:</div>
+                <div class="col-md-9">
                     <xm-teacher-list [exam]="exam"></xm-teacher-list>
                 </div>
-            }
-        </div>
+            </div>
+        }
     </div>
     @if (exam) {
         <div class="row mt-3">
@@ -127,14 +123,12 @@ <h2>
         </div>
     }
     @if (!reservation) {
-        <div class="row mt-3">
-            <div class="col">
-                <div>{{ 'i18n_exam_validity' | translate }}:</div>
-                <div>
-                    {{ exam?.periodStart || collabExam.periodStart | date: 'dd.MM.yyyy' }}
-                    &ndash;
-                    {{ exam?.periodEnd || collabExam.periodEnd | date: 'dd.MM.yyyy' }}
-                </div>
+        <div class="row mt-3 mb-2">
+            <div class="col-md-3">{{ 'i18n_exam_validity' | translate }}:</div>
+            <div class="col-md-9">
+                {{ exam?.periodStart || collabExam.periodStart | date: 'dd.MM.yyyy' }}
+                &ndash;
+                {{ exam?.periodEnd || collabExam.periodEnd | date: 'dd.MM.yyyy' }}
             </div>
         </div>
         @if (enrolment().reservationCanceled) {
@@ -225,76 +219,66 @@ <h2>
         </div>
     }
     @if (exam && eventConfig && exam.implementation !== 'AQUARIUM') {
-        <div>
-            <div class="row mt-3 justify-content-start">
-                <div>{{ 'i18n_examination_event' | translate }}:</div>
-                <div>
-                    {{ eventConfig?.examinationEvent?.start | date: 'dd.MM.yyyy HH:mm zzzz' }}
-                </div>
+        <div class="row mt-3 mb-2">
+            <div class="col-md-3">{{ 'i18n_examination_event' | translate }}:</div>
+            <div class="col-md-9">
+                {{ eventConfig?.examinationEvent?.start | date: 'dd.MM.yyyy HH:mm zzzz' }}
             </div>
         </div>
     }
 
     @if (exam && eventConfig && exam.implementation !== 'AQUARIUM') {
-        <div class="row mt-3 justify-content-start">
-            <div class="col">
-                <div class="row">
-                    <div>{{ 'i18n_instructions' | translate }}:</div>
-                    <div>
-                        <span class="me-2">
-                            {{ eventConfig.examinationEvent.description }}
-                        </span>
-                    </div>
-                </div>
+        <div class="row mt-3 mb-2">
+            <div class="col-md-3">{{ 'i18n_instructions' | translate }}:</div>
+            <div class="col-md-9">
+                <span class="me-2">
+                    {{ eventConfig.examinationEvent.description }}
+                </span>
             </div>
         </div>
     }
 
     @if (exam && exam.implementation === 'CLIENT_AUTH') {
-        <div class="row mt-3 justify-content-start">
-            <div class="col">
-                <div class="row">
-                    <div>{{ 'i18n_seb_file' | translate }}:</div>
-                    <div>
-                        <span class="me-2">
-                            <button (click)="downloadSebFile()" class="mt-1 btn btn-outline-secondary">
-                                <strong>{{ 'i18n_download' | translate }}</strong>
-                            </button>
-                        </span>
-                    </div>
-                </div>
+        <div class="row mt-3 mb-2">
+            <div class="col-md-3">{{ 'i18n_seb_file' | translate }}:</div>
+            <div class="col-md-9">
+                <span class="me-2">
+                    <button (click)="downloadSebFile()" class="mt-1 btn btn-outline-secondary">
+                        <strong>{{ 'i18n_download' | translate }}</strong>
+                    </button>
+                </span>
             </div>
         </div>
     }
     @if (reservation && enrolment().optionalSections.length > 0) {
         <xm-optional-sections [selectedSections]="enrolment().optionalSections" [allSections]="exam.examSections" />
     }
-    <div class="row mb-3 mt-2">
-        <div class="col">
-            <button
-                class="btn btn-outline-secondary"
-                [attr.aria-expanded]="showInstructions()"
-                [hidden]="!exam?.enrollInstruction && !collabExam?.enrollInstruction"
-                (click)="showInstructions.set(!showInstructions())"
-                [attr.aria-expanded]="showInstructions()"
-            >
-                {{ 'i18n_view_instructions' | translate }}
-                <i [hidden]="showInstructions()" class="bi bi-chevron-right"></i>
-                <i [hidden]="!showInstructions()" class="bi bi-chevron-down"></i>
-            </button>
-        </div>
-
-        <div class="col flex justify-content-end mb-3">
-            <xm-active-enrolment-menu
-                class="col"
-                [enrolment]="enrolment()"
-                (removed)="enrolmentRemoved($event)"
-            ></xm-active-enrolment-menu>
+    @if (exam?.enrollInstruction || collabExam?.enrollInstruction) {
+        <div class="row mb-3 mt-2">
+            <div class="col">
+                <button
+                    class="btn btn-outline-secondary"
+                    [attr.aria-expanded]="showInstructions()"
+                    [hidden]="!exam?.enrollInstruction && !collabExam?.enrollInstruction"
+                    (click)="showInstructions.set(!showInstructions())"
+                    [attr.aria-expanded]="showInstructions()"
+                >
+                    {{ 'i18n_view_instructions' | translate }}
+                    <i [hidden]="showInstructions()" class="bi bi-chevron-right"></i>
+                    <i [hidden]="!showInstructions()" class="bi bi-chevron-down"></i>
+                </button>
+            </div>
+            <div aria-live="polite" class="row mb-3 mt-3">
+                @if (showInstructions()) {
+                    <div [xmMathJax]="exam?.enrollInstruction || collabExam?.enrollInstruction || ''"></div>
+                }
+            </div>
         </div>
-    </div>
-    <div aria-live="polite" class="row mb-3 mt-3">
-        @if (showInstructions()) {
-            <div [xmMathJax]="exam?.enrollInstruction || collabExam?.enrollInstruction || ''"></div>
-        }
+    }
+    <div class="row mb-3">
+        <xm-active-enrolment-menu
+            [enrolment]="enrolment()"
+            (removed)="enrolmentRemoved($event)"
+        ></xm-active-enrolment-menu>
     </div>
 </div>

ui/src/app/enrolment/active/active-enrolment.component.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: EUPL-1.2
  */
 
+@use '../../shared/definitions.scss' as shared;
+
 .active-enrolment-container {
     // todo: use global container?
     border-radius: 4px;
@@ -21,43 +23,13 @@
 .active-enrolment-heading {
     a {
         font-size: 20px;
-        color: #266b99;
+        color: shared.$exam-blue;
         text-decoration: none;
     }
 }
 
 .exam-title-button {
     font-size: 24px;
-    font-weight: 500;
-    color: #266b99;
-    background: transparent;
-    border: none;
-    padding: 0;
-    text-align: left;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    border-radius: 6px;
-    padding: 8px 12px;
-
-    &:hover, &:focus {
-        color: white;
-        background-color: #266b99;
-        text-decoration: none;
-    }
-
-    .arrow_icon {
-        margin-left: 8px;
-        filter: invert(42%) sepia(40%) saturate(459%) hue-rotate(166deg) brightness(89%) contrast(85%);
-        transition: all 0.3s ease;
-    }
-
-    &:hover .arrow_icon, &:focus .arrow_icon {
-        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
-    }
 }
 
 .exam-ready {

ui/src/app/enrolment/active/helpers/active-enrolment-menu.component.html

@@ -9,39 +9,51 @@
 @let collaborativeExam = enrolment().collaborativeExam;
 @let eventConfig = enrolment().examinationEventConfiguration;
 @let exam = enrolment().exam;
-<div class="flex justify-content-end">
+<div class="d-flex justify-content-between">
     <!-- enrolment with reservation, allow changing -->
     @if (reservation && canChangeReservation(reservation)) {
         <!-- collaborative exam taken here -->
         @if (reservation.machine && collaborativeExam) {
-            <a
+            <button
                 class="btn btn-outline-secondary me-2 mb-2"
                 [routerLink]="['/calendar', collaborativeExam.id, 'collaborative']"
-                >{{ 'i18n_student_change_reservation' | translate }}
-            </a>
+            >
+                {{ 'i18n_student_change_reservation' | translate }}
+            </button>
         }
         <!-- regular exam taken here -->
         @if (reservation.machine && !collaborativeExam) {
-            <a class="btn btn-outline-secondary me-2 mb-2" [routerLink]="['/calendar', exam.id]"
-                >{{ 'i18n_student_change_reservation' | translate }}
-            </a>
+            <button class="btn btn-outline-secondary me-2 mb-2" [routerLink]="['/calendar', exam.id]">
+                {{ 'i18n_student_change_reservation' | translate }}
+            </button>
         }
         <!-- regular exam taken elsewhere -->
         @if (reservation.externalReservation && exam) {
-            <a class="btn btn-outline-secondary me-2 mb-2" [routerLink]="['/calendar', exam.id, 'external']"
-                >{{ 'i18n_student_change_reservation' | translate }}
-            </a>
+            <button class="btn btn-outline-secondary me-2 mb-2" [routerLink]="['/calendar', exam.id, 'external']">
+                {{ 'i18n_student_change_reservation' | translate }}
+            </button>
         }
         <!-- collaborative exam taken elsewhere -->
         @if (reservation.externalReservation && collaborativeExam) {
-            <a
+            <button
                 class="btn btn-outline-secondary me-2 mb-2"
                 [routerLink]="['/calendar', collaborativeExam.id, 'external']"
                 [queryParams]="{ isCollaborative: true }"
-                >{{ 'i18n_student_change_reservation' | translate }}
-            </a>
+            >
+                {{ 'i18n_student_change_reservation' | translate }}
+            </button>
         }
     }
+    <!-- enrolment without reservation, allow making reservation -->
+    @if (
+        (!reservation && exam?.implementation === 'AQUARIUM') ||
+        collaborativeExam ||
+        (!eventConfig && exam?.implementation !== 'AQUARIUM' && hasUpcomingAlternativeEvents())
+    ) {
+        <button class="btn btn-success me-2 mb-2" (click)="makeReservation()">
+            {{ 'i18n_student_new_reservation' | translate }}
+        </button>
+    }
     <!-- enrolment with examination event, allow changing -->
     @if (eventConfig && hasUpcomingAlternativeEvents()) {
         <button class="btn btn-outline-secondary me-2 mb-2" (click)="makeReservation()">
@@ -72,16 +84,4 @@
             {{ 'i18n_student_remove_enrolment' | translate }}
         </button>
     }
-    <!-- enrolment without reservation, allow making reservation -->
-    @if (!reservation && (exam?.implementation === 'AQUARIUM' || collaborativeExam)) {
-        <button class="btn btn-success me-2 mb-2" (click)="makeReservation()">
-            {{ 'i18n_student_new_reservation' | translate }}
-        </button>
-    }
-    <!-- enrolment without examination event, allow making reservation -->
-    @if (!eventConfig && exam?.implementation !== 'AQUARIUM' && hasUpcomingAlternativeEvents()) {
-        <button class="btn btn-success me-2 mb-2" (click)="makeReservation()">
-            {{ 'i18n_student_new_reservation' | translate }}
-        </button>
-    }
 </div>

ui/src/app/enrolment/enrolment.shared.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: EUPL-1.2
  */
 
+@use '../shared/definitions.scss' as shared;
+
 .student-enrolment-date-box {
     // waitinroom, active-enrolment
     border: 2px solid #ededed;
@@ -21,3 +23,33 @@
         font-size: 14px;
     }
 }
+
+.exam-title-button {
+    font-size: 16px;
+    font-weight: 500;
+    color: shared.$exam-blue;
+    background: transparent;
+    border: none;
+    padding: 8px 12px;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.3s ease;
+    border-radius: 6px;
+
+    &:hover,
+    &:focus {
+        color: white;
+        background-color: shared.$exam-blue;
+    }
+
+    .arrow_icon {
+        margin-left: 8px;
+        filter: invert(42%) sepia(40%) saturate(459%) hue-rotate(166deg) brightness(89%) contrast(85%);
+        transition: all 0.3s ease;
+    }
+
+    &:hover .arrow_icon,
+    &:focus .arrow_icon {
+        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+    }
+}