[TEAMMATES#11086] Enrolling students: show a progress indicator when …

…enrolling a large class (TEAMMATES#11600)
kaixin-hc · Mar 31, 2022 · 489106f · 489106f
1 parent 9564596
commit 489106f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 1 deletion.
diff --git a/...ges-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.html b/...ges-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.html
@@ -96,13 +96,15 @@ <h1 id="enroll-header" class="text-break">Enroll Students for {{ courseId }}</h1
               </div>
               <div class="enroll-button-group">
                 <button
+                    [ngClass]="{'w-50': isEnrolling}"
                     type="submit"
                     title="Enroll"
                     id="btn-enroll"
                     name="button-enroll"
                     class="btn btn-success float-right"
                     [disabled]="isEnrolling"
                     (click)="submitEnrollData()">
+                  <tm-progress-bar *ngIf="isEnrolling"></tm-progress-bar>
                   <tm-ajax-loading *ngIf="isEnrolling"></tm-ajax-loading>
                   Enroll students
                 </button>

diff --git a/...ges-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.scss b/...ges-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.scss
@@ -73,6 +73,10 @@
   display: inline-block;
 }
 
+.enroll-button-group * {
+  max-height: inherit;
+}
+
 table {
   table-layout: fixed;
 }

diff --git a/...-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.spec.ts b/...-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.spec.ts
@@ -7,6 +7,7 @@ import { AjaxPreloadModule } from '../../components/ajax-preload/ajax-preload.mo
 import { LoadingRetryModule } from '../../components/loading-retry/loading-retry.module';
 import { LoadingSpinnerModule } from '../../components/loading-spinner/loading-spinner.module';
 import { PanelChevronModule } from '../../components/panel-chevron/panel-chevron.module';
+import { ProgressBarModule } from '../../components/progress-bar/progress-bar.module';
 import { StatusMessageModule } from '../../components/status-message/status-message.module';
 import { InstructorCourseEnrollPageComponent } from './instructor-course-enroll-page.component';
 
@@ -24,6 +25,7 @@ describe('InstructorCourseEnrollPageComponent', () => {
         AjaxPreloadModule,
         AjaxLoadingModule,
         StatusMessageModule,
+        ProgressBarModule,
         LoadingSpinnerModule,
         LoadingRetryModule,
         PanelChevronModule,

diff --git a/...pages-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.ts b/...pages-instructor/instructor-course-enroll-page/instructor-course-enroll-page.component.ts
@@ -1,11 +1,11 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-
 import { HotTableRegisterer } from '@handsontable/angular';
 import Handsontable from 'handsontable';
 import { concat, Observable } from 'rxjs';
 import { finalize } from 'rxjs/operators';
 import { CourseService } from '../../../services/course.service';
+import { ProgressBarService } from '../../../services/progress-bar.service';
 import { SimpleModalService } from '../../../services/simple-modal.service';
 import { StatusMessageService } from '../../../services/status-message.service';
 import { StudentService } from '../../../services/student.service';
@@ -95,6 +95,7 @@ export class InstructorCourseEnrollPageComponent implements OnInit {
               private statusMessageService: StatusMessageService,
               private courseService: CourseService,
               private studentService: StudentService,
+              private progressBarService: ProgressBarService,
               private simpleModalService: SimpleModalService) { }
 
   ngOnInit(): void {
@@ -188,6 +189,7 @@ export class InstructorCourseEnrollPageComponent implements OnInit {
         }),
     );
 
+    this.progressBarService.updateProgress(0);
     enrollRequests.pipe(finalize(() => {
       this.isEnrolling = false;
     })).subscribe({
@@ -206,6 +208,8 @@ export class InstructorCourseEnrollPageComponent implements OnInit {
             }
           }
         }
+        const percentage: number = Math.round(100 * enrolledStudents.length / studentEnrollRequests.size);
+        this.progressBarService.updateProgress(percentage);
       },
       complete: () => {
         this.showEnrollResults = true;

diff --git a/...pp/pages-instructor/instructor-course-enroll-page/instructor-course-enroll-page.module.ts b/...pp/pages-instructor/instructor-course-enroll-page/instructor-course-enroll-page.module.ts
@@ -7,6 +7,7 @@ import { AjaxPreloadModule } from '../../components/ajax-preload/ajax-preload.mo
 import { LoadingRetryModule } from '../../components/loading-retry/loading-retry.module';
 import { LoadingSpinnerModule } from '../../components/loading-spinner/loading-spinner.module';
 import { PanelChevronModule } from '../../components/panel-chevron/panel-chevron.module';
+import { ProgressBarModule } from '../../components/progress-bar/progress-bar.module';
 import { StatusMessageModule } from '../../components/status-message/status-message.module';
 import { InstructorCourseEnrollPageComponent } from './instructor-course-enroll-page.component';
 
@@ -35,6 +36,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     AjaxLoadingModule,
     LoadingRetryModule,
+    ProgressBarModule,
     LoadingSpinnerModule,
     PanelChevronModule,
   ],