CSCEXAM-1356 Add shortens to exam list (#1172)

* Add shortens to exam list * Fix typescript boolean error in exam list * Fix button css on teacher dashboard
CSCfi · Oct 25, 2024 · dbb56da · dbb56da
1 parent 9774106
commit dbb56da
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/ui/src/app/dashboard/dashboard.model.ts b/ui/src/app/dashboard/dashboard.model.ts
@@ -37,4 +37,5 @@ export interface ExtraData {
     property: keyof DashboardExam;
     link: string[];
     checkOwnership: boolean;
+    sliced?: boolean;
 }
diff --git a/ui/src/app/dashboard/staff/teacher/categories/exam-list-category.component.html b/ui/src/app/dashboard/staff/teacher/categories/exam-list-category.component.html
@@ -38,6 +38,7 @@
                         <xm-table-sort
                             by="course.code"
                             text="i18n_course_code"
+                            [sliced]="true"
                             [predicate]="sorting.predicate"
                             [reverse]="sorting.reverse"
                             (click)="setPredicate('course.code')"
@@ -67,6 +68,7 @@
                             <xm-table-sort
                                 by="{{ column.property }}"
                                 text="{{ column.text }}"
+                                [sliced]="!!column.sliced"
                                 [predicate]="sorting.predicate"
                                 [reverse]="sorting.reverse"
                                 (click)="setPredicate(column.property)"
@@ -82,8 +84,8 @@
                             (click)="setPredicate('ownerAggregate')"
                         ></xm-table-sort>
                     </th>
-                    <th>&nbsp;</th>
-                    <th>&nbsp;</th>
+                    <th class="with-top">{{ 'i18n_remove' | translate }}</th>
+                    <th class="with-top">{{ 'i18n_copy' | translate }}</th>
                 </tr>
             </thead>
 
@@ -160,25 +162,23 @@
                         </td>
                         <td class="text-center">
                             @if (isOwner(exam)) {
-                                <a (click)="deleteExam(exam)" class="pointer">
-                                    <i
-                                        class="bi-trash text-dark"
-                                        ngbPopover="{{ 'i18n_exam_remove' | translate }}"
-                                        popoverTitle="{{ 'i18n_instructions' | translate }}"
-                                        triggers="mouseenter:mouseleave"
-                                    ></i>
-                                </a>
+                                <button
+                                    (click)="deleteExam(exam)"
+                                    class="pointer btn btn-link"
+                                    [attr.aria-label]="'i18n_exam_remove' | translate"
+                                >
+                                    <i class="bi-trash text-dark" aria-hidden="true"></i>
+                                </button>
                             }
                         </td>
                         <td class="text-center">
-                            <a class="pointer" (click)="copyExam(exam)">
-                                <i
-                                    class="bi-files text-dark"
-                                    ngbPopover="{{ 'i18n_copy' | translate }}"
-                                    popoverTitle="{{ 'i18n_instructions' | translate }}"
-                                    triggers="mouseenter:mouseleave"
-                                ></i>
-                            </a>
+                            <button
+                                class="pointer btn btn-link"
+                                (click)="copyExam(exam)"
+                                [attr.aria-label]="'i18n_copy' | translate"
+                            >
+                                <i class="bi-files text-dark" aria-hidden="true"></i>
+                            </button>
                         </td>
                     </tr>
                 }

diff --git a/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html b/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.html
@@ -8,13 +8,13 @@
 <xm-page-content [content]="content" />
 <ng-template #buttons>
     <div class="float-end pe-3">
-        <button [routerLink]="['/staff/exams']" class="btn btn-success me-3">
+        <button [routerLink]="['/staff/exams']" class="btn btn-success me-3 mb-3">
             {{ 'i18n_toolbar_new_exam' | translate }}
         </button>
         <button
             [routerLink]="['/staff/questions/new']"
             [queryParams]="{ nextState: 'teacher' }"
-            class="btn btn-success"
+            class="btn btn-success align-top"
         >
             {{ 'i18n_toolbar_new_question' | translate }}
         </button>

diff --git a/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.ts b/ui/src/app/dashboard/staff/teacher/teacher-dashboard.component.ts
@@ -68,12 +68,14 @@ export class TeacherDashboardComponent implements OnInit {
                 property: 'unassessedCount',
                 link: ['/staff/exams', '__', '5'],
                 checkOwnership: false,
+                sliced: true,
             },
             {
                 text: 'i18n_participation_unfinished',
                 property: 'unfinishedCount',
                 link: ['/staff/exams', '__', '5'],
                 checkOwnership: false,
+                sliced: true,
             },
             {
                 text: 'i18n_dashboard_title_waiting_reservation',
@@ -88,12 +90,14 @@ export class TeacherDashboardComponent implements OnInit {
                 property: 'unassessedCount',
                 link: ['/staff/exams', '__', '5'],
                 checkOwnership: false,
+                sliced: true,
             },
             {
                 text: 'i18n_participation_unfinished',
                 property: 'unfinishedCount',
                 link: ['/staff/exams', '__', '5'],
                 checkOwnership: false,
+                sliced: true,
             },
         ];
         this.archivedExtraData = [
@@ -102,6 +106,7 @@ export class TeacherDashboardComponent implements OnInit {
                 property: 'assessedCount',
                 link: ['/staff/exams', '__', '5'],
                 checkOwnership: true,
+                sliced: true,
             },
         ];
     }

diff --git a/ui/src/app/shared/sorting/table-sort.component.ts b/ui/src/app/shared/sorting/table-sort.component.ts
@@ -9,8 +9,8 @@ import { TranslateModule } from '@ngx-translate/core';
 @Component({
     selector: 'xm-table-sort',
     template: `
-        <span class="pointer"
-            >{{ text | translate }}&nbsp;
+        <span class="pointer" [attr.arial-label]="text | translate" [title]="text | translate">
+            {{ sliced ? (text | translate).slice(0, 3) + '.' : (text | translate) }}&nbsp;
             <i [ngClass]="getSortClass()"></i>
         </span>
     `,
@@ -22,6 +22,7 @@ export class TableSortComponent {
     @Input() predicate = '';
     @Input() text = '';
     @Input() reverse = false;
+    @Input() sliced = false;
 
     getSortClass = () =>
         this.by === this.predicate ? (this.reverse ? 'bi-sort-alpha-down' : 'bi-sort-alpha-up') : 'bi-arrow-down-up';