[#12329] Refactoring of sortable tables - Instructor courses page

src/web/app/pages-instructor/instructor-courses-page/cell-with-actions/cell-with-actions.component.html

@@ -0,0 +1,47 @@
+<a id="btn-enroll" class="btn btn-light btn-sm custom-button-active" *ngIf="course.canModifyStudent"
+ngbTooltip="Enroll student into the course" tmRouterLink="/web/instructor/courses/enroll"
+[queryParams]="{courseid: course.course.courseId}">
+Enroll
+</a>
+<button id="btn-enroll-disabled" class="btn btn-light btn-sm disabled"
+*ngIf="!course.canModifyStudent">
+Enroll
+</button>
+<div ngbDropdown class="d-inline-block">
+  <button id="btn-other-actions" class="btn btn-light btn-sm custom-button-active" ngbDropdownToggle>Other
+  Actions</button>
+  <div ngbDropdownMenu>
+    <a class="btn btn-primary btn-sm dropdown-item clickable"
+    tmRouterLink="/web/instructor/courses/details" [queryParams]="{courseid: course.course.courseId}">
+    View
+    </a>
+    <a class="btn btn-primary btn-sm dropdown-item clickable"
+    tmRouterLink="/web/instructor/courses/edit" [queryParams]="{courseid: course.course.courseId}">
+    Edit
+    </a>
+    <button id="btn-copy" class="btn btn-primary btn-sm dropdown-item clickable"
+    *ngIf="course.canModifyCourse"
+    (click)="onCopy(course.course.courseId, course.course.courseName, course.course.timeZone)"
+    ngbTooltip="Copy the course and its corresponding sessions" placement="left" container="body"
+    [disabled]="isCopyingCourse">
+    Copy
+    </button>
+  <button id="btn-archive" class="btn btn-primary btn-sm dropdown-item clickable"
+    (click)="changeArchiveStatus(course.course.courseId, true)"
+    ngbTooltip="Archive the course so that it will not be shown in the home page any more (you can still access it from the 'Courses' tab)"
+    placement="left" container="body">
+    Archive
+  </button>
+
+  <button id="btn-soft-delete" class="btn btn-primary btn-sm dropdown-item clickable"
+    *ngIf="course.canModifyCourse" (click)="onDelete(course.course.courseId)"
+    ngbTooltip="Delete the course and its corresponding students and sessions" placement="left"
+    container="body">
+    Delete
+  </button>
+  <button id="btn-soft-delete-disabled" class="btn btn-primary btn-sm dropdown-item disabled"
+    *ngIf="!course.canModifyCourse">
+    Delete
+  </button>
+</div>
+</div>

src/web/app/pages-instructor/instructor-courses-page/cell-with-actions/cell-with-actions.component.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { Course } from '../../../../types/api-output';
+import { TeammatesRouterModule } from '../../../components/teammates-router/teammates-router.module';
+
+interface CourseModel {
+    course: Course;
+    canModifyCourse: boolean;
+    canModifyStudent: boolean;
+    isLoadingCourseStats: boolean;
+}
+@Component({
+    selector: 'tm-actions',
+    templateUrl: './cell-with-actions.component.html',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TeammatesRouterModule,
+        NgbDropdownModule,
+        NgbTooltipModule,
+    ],
+})
+export class ActionsComponent {
+    @Input() course!: CourseModel;
+    @Input() isCopyingCourse!: boolean;
+    @Input() onCopy: (courseId: string, courseName: string, timeZone: string) => void = () => {};
+    @Input() changeArchiveStatus: (courseId: string, toArchive: boolean) => void = () => {};
+    @Input() onDelete!: (courseId: string) => Promise<void>;
+}

src/web/app/pages-instructor/instructor-courses-page/cell-with-archived-actions/cell-with-archived-actions.component.html

@@ -0,0 +1,13 @@
+<button id="btn-unarchive" class="btn btn-light btn-sm custom-button-archived"
+(click)="changeArchiveStatus(course.course.courseId, false)">
+Unarchive
+</button>
+<button id="btn-soft-delete-archived" class="btn btn-light btn-sm custom-button-archived" *ngIf="course.canModifyCourse"
+(click)="onDelete(course.course.courseId)"
+ngbTooltip="Delete the course and its corresponding students and sessions">
+Delete
+</button>
+<button id="btn-soft-delete-archived-disabled" class="btn btn-light btn-sm disabled"
+*ngIf="!course.canModifyCourse">
+Delete
+</button>

src/web/app/pages-instructor/instructor-courses-page/cell-with-archived-actions/cell-with-archived-actions.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { Course } from '../../../../types/api-output';
+import { TeammatesRouterModule } from '../../../components/teammates-router/teammates-router.module';
+
+interface CourseModel {
+    course: Course;
+    canModifyCourse: boolean;
+    canModifyStudent: boolean;
+    isLoadingCourseStats: boolean;
+}
+@Component({
+    selector: 'tm-archived-actions',
+    templateUrl: './cell-with-archived-actions.component.html',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TeammatesRouterModule,
+        NgbTooltipModule,
+    ],
+})
+export class ArchivedActionsComponent {
+    @Input() course!: CourseModel;
+    @Input() changeArchiveStatus: (courseId: string, toArchive: boolean) => void = () => {};
+    @Input() onDelete!: (courseId: string) => Promise<void>;
+}

src/web/app/pages-instructor/instructor-courses-page/cell-with-course-stats/cell-with-course-stats.component.html

@@ -0,0 +1,9 @@
+<div><span *ngIf="!courseStats[courseId]">
+  <a *ngIf="!isLoadingCourseStats" id="show-statistics"
+    (click)="getCourseStats()">
+    Show
+</a>
+</span>
+<span *ngIf="courseStats[courseId]">
+  {{ courseStats[courseId][column] }}
+</span></div>

src/web/app/pages-instructor/instructor-courses-page/cell-with-course-stats/cell-with-course-stats.component.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'tm-course-stats',
+    templateUrl: './cell-with-course-stats.component.html',
+    standalone: true,
+    imports: [
+      CommonModule,
+    ],
+})
+export class CourseStatsComponent {
+    @Input() courseId: string = '';
+    @Input() column: string = '';
+    @Input() courseStats: Record<string, Record<string, number>> = {};
+    @Input() isLoadingCourseStats: boolean = false;
+    @Input() getCourseStats: () => void = () => {};
+}

src/web/app/pages-instructor/instructor-courses-page/cell-with-deleted-actions/cell-with-deleted-actions.component.html

@@ -0,0 +1,18 @@
+<button id="btn-restore" class="btn btn-light btn-sm" *ngIf="course.canModifyCourse"
+(click)="onRestore(course.course.courseId)"
+ngbTooltip="Restore the deleted course and its corresponding students and sessions">
+Restore
+</button>
+<button id="btn-restore-disabled" class="btn btn-light btn-sm disabled"
+*ngIf="!course.canModifyCourse">
+Restore
+</button>
+<button id="btn-delete" class="btn btn-light btn-sm text-danger" *ngIf="course.canModifyCourse"
+(click)="onDeletePermanently(course.course.courseId)"
+ngbTooltip="Permanently delete the course and its corresponding students and sessions">
+Delete Permanently
+</button>
+<button id="btn-delete-disabled" class="btn btn-light btn-sm disabled text-danger"
+*ngIf="!course.canModifyCourse">
+Delete Permanently
+</button>

src/web/app/pages-instructor/instructor-courses-page/cell-with-deleted-actions/cell-with-deleted-actions.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { Course } from '../../../../types/api-output';
+import { TeammatesRouterModule } from '../../../components/teammates-router/teammates-router.module';
+
+interface CourseModel {
+    course: Course;
+    canModifyCourse: boolean;
+    canModifyStudent: boolean;
+    isLoadingCourseStats: boolean;
+}
+@Component({
+    selector: 'tm-deleted-actions',
+    templateUrl: './cell-with-deleted-actions.component.html',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TeammatesRouterModule,
+        NgbTooltipModule,
+    ],
+})
+export class DeletedActionsComponent {
+    @Input() course!: CourseModel;
+    @Input() onRestore: (courseId: string) => void = () => {};
+    @Input() onDeletePermanently!: (courseId: string) => Promise<void>;
+}