courses: smoother progress navigation (fixes #7769) (#7773)

Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.81",
+  "version": "0.15.82",
   "myplanet": {
-    "latest": "v0.21.27",
-    "min": "v0.20.27"
+    "latest": "v0.21.28",
+    "min": "v0.20.28"
   },
   "scripts": {
     "ng": "ng",

src/app/courses/progress-courses/courses-progress-leader.component.html

@@ -1,31 +1,43 @@
 <mat-toolbar>
   <a mat-icon-button (click)="navigateBack()"><mat-icon>arrow_back</mat-icon></a>
+  <span>
+    <ng-container *ngIf="selectedStep === undefined" i18n>Course Progress</ng-container>
+    <ng-container *ngIf="selectedStep !== undefined" i18n>Test Progress</ng-container>
+  </span>
 </mat-toolbar>
 
-<div class="space-container">
-  <mat-toolbar class="primary-color font-size-1 action-buttons">
-    <span>
-      {{headingStart ? headingStart + ' ' : ''}}
-      <ng-container *ngIf="selectedStep === undefined" i18n>Course Progress</ng-container>
-      <ng-container *ngIf="selectedStep !== undefined" i18n>Test Progress</ng-container>
-    </span>
+<mat-toolbar class="primary-color font-size-1">
+  <span><h3 class="margin-lr-3 ellipsis-title">{{ headingStart }}</h3></span>
+  <ng-container *ngIf="deviceType === deviceTypes.DESKTOP">
     <span class="toolbar-fill"></span>
-    <planet-selector *ngIf="planetCodes.length > 1" [planetCodes]="planetCodes" (selectionChange)="planetSelectionChange($event)"></planet-selector>
-    <mat-form-field *ngIf="submittedExamSteps?.length > 1">
-      <mat-select i18n-placeholder placeholder="View Test Progress" [value]="selectedStep" (selectionChange)="onStepChange($event.value)">
-        <mat-option *ngFor="let step of submittedExamSteps" [value]="step" i18n>
-          {{ step.stepTitle || 'Step ' + (step.index + 1) }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-    <button mat-raised-button color="accent" class="margin-lr-3" *ngIf="selectedStep !== undefined" (click)="resetToFullCourse()" i18n>Show full course</button>
-    <button *ngIf="chartData?.length" class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportChartData()">
-      Export
-    </button>
-  </mat-toolbar>
-  <div class="view-container view-full-height">
-    <planet-courses-progress-chart *ngIf="chartData?.length; else noProgress" [label]="chartLabel" [inputs]="chartData" [height]="yAxisLength" [showAvatar]="true" (clickAction)="memberClick($event)" (changeData)="changeData($event)">
-    </planet-courses-progress-chart>
-    <ng-template #noProgress i18n>No Progress record available</ng-template>
-  </div>
+    <ng-container *ngTemplateOutlet="filterSelectors"></ng-container>
+    <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="deviceType !== deviceTypes.DESKTOP">
+    <span class="toolbar-fill"></span>
+    <button class="menu" *ngIf="chartData?.length" mat-icon-button [matMenuTriggerFor]="actionsMenu"><mat-icon>more_vert</mat-icon></button>
+    <mat-menu #actionsMenu="matMenu" class="actions-menu">
+      <ng-container *ngTemplateOutlet="filterSelectors"></ng-container>
+      <ng-container *ngTemplateOutlet="actionButtons"></ng-container>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+<ng-template #filterSelectors>
+  <planet-selector *ngIf="planetCodes.length > 1" [planetCodes]="planetCodes" (selectionChange)="planetSelectionChange($event)"></planet-selector>
+  <mat-form-field *ngIf="submittedExamSteps?.length > 1" class="margin-lr-3">
+    <mat-select i18n-placeholder placeholder="View Test Progress" [value]="selectedStep" (selectionChange)="onStepChange($event.value)">
+      <mat-option *ngFor="let step of submittedExamSteps" [value]="step" i18n>
+        {{ step.stepTitle || 'Step ' + (step.index + 1) }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</ng-template>
+<ng-template #actionButtons>
+  <button mat-raised-button color="accent" *ngIf="selectedStep !== undefined" (click)="resetToFullCourse()" class="margin-lr-3" i18n>Show full course</button>
+  <button mat-raised-button color="accent" *ngIf="chartData?.length" (click)="exportChartData()" class="margin-lr-3" i18n>Export</button>
+</ng-template>
+<div class="view-container view-full-height">
+  <planet-courses-progress-chart *ngIf="chartData?.length; else noProgress" [label]="chartLabel" [inputs]="chartData" [height]="yAxisLength" [showAvatar]="true" (clickAction)="memberClick($event)" (changeData)="changeData($event)">
+  </planet-courses-progress-chart>
+  <ng-template #noProgress i18n>No Progress record available</ng-template>
 </div>

src/app/courses/progress-courses/courses-progress-leader.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
@@ -10,15 +10,14 @@ import { dedupeObjectArray } from '../../shared/utils';
 import { DialogsLoadingService } from '../../shared/dialogs/dialogs-loading.service';
 import { findDocuments } from '../../shared/mangoQueries';
 import { UserProfileDialogComponent } from '../../users/users-profile/users-profile-dialog.component';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
-  templateUrl: 'courses-progress-leader.component.html',
-  styleUrls: [ 'courses-progress.scss' ]
+  templateUrl: 'courses-progress-leader.component.html'
 })
 export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
 
   course: any;
-  // Need to define this variable for template which is shared with CoursesProgressLearner
   headingStart = '';
   chartLabel = $localize`Steps`;
   selectedStep: any;
@@ -32,6 +31,8 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
   submittedExamSteps: any[] = [];
   planetCodes: string[] = [];
   selectedPlanetCode: string;
+  deviceType: DeviceType;
+  deviceTypes = DeviceType;
 
   constructor(
     private router: Router,
@@ -40,9 +41,11 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
     private submissionsService: SubmissionsService,
     private csvService: CsvService,
     private dialogsLoadingService: DialogsLoadingService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private deviceInfoService: DeviceInfoService
   ) {
     this.dialogsLoadingService.start();
+    this.deviceType = this.deviceInfoService.getDeviceType();
   }
 
   ngOnInit() {
@@ -66,6 +69,11 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
+  @HostListener('window:resize')
+  onResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+  }
+
   setProgress(course) {
     this.coursesService.findProgress([ course._id ], { allUsers: true }).subscribe((progress) => {
       this.progress = progress;