Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

course progress: responsive toolbar (fixes #7769) #7773

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

course progress: responsive toolbar (fixes #7769) #7773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c4e50d1
mostly working toolbar with filter list
jessewashburn Nov 13, 2024
9b5b5a0
finished filter list formatting
jessewashburn Nov 13, 2024
525e9f5
linting fix
jessewashburn Nov 13, 2024
b7b0c76
linting fix again
jessewashburn Nov 13, 2024
4cf2155
Better secondary toolbar
jessewashburn Nov 13, 2024
b181913
removed unnecessary css
jessewashburn Nov 20, 2024
8c29f37
fixed import
jessewashburn Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 57 additions & 15 deletions src/app/courses/progress-courses/courses-progress-leader.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,73 @@
<mat-toolbar>
<a mat-icon-button (click)="navigateBack()"><mat-icon>arrow_back</mat-icon></a>
</mat-toolbar>

<div class="space-container">
<mat-toolbar class="primary-color font-size-1 action-buttons">
<mat-toolbar-row>
<button mat-icon-button (click)="navigateBack()">
<mat-icon>arrow_back</mat-icon>
</button>
<span>
{{headingStart ? headingStart + ' ' : ''}}
<ng-container *ngIf="selectedStep === undefined" i18n>Course Progress</ng-container>
<ng-container *ngIf="selectedStep !== undefined" i18n>Test Progress</ng-container>
</span>
<span class="toolbar-fill"></span>
</mat-toolbar-row>
</mat-toolbar>

<mat-toolbar class="primary-color font-size-1">
<mat-toolbar-row *ngIf="!isMobile">
<span>
{{ headingStart ? headingStart + ' ' : '' }}
<ng-container *ngIf="selectedStep === undefined" i18n></ng-container>
<ng-container *ngIf="selectedStep !== undefined" i18n></ng-container>
</span>
<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-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>
<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()">
<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>
</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>
</mat-toolbar-row>

<ng-container *ngIf="isMobile">
<mat-toolbar-row>
<span>
{{ headingStart ? headingStart + ' ' : '' }}
<ng-container *ngIf="selectedStep === undefined" i18n></ng-container>
<ng-container *ngIf="selectedStep !== undefined" i18n></ng-container>
</span>
<span class="toolbar-fill"></span>
<button mat-icon-button (click)="showFiltersRow = !showFiltersRow">
<mat-icon>filter_list</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="showFiltersRow">
<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>
<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>
</mat-toolbar-row>
</ng-container>
</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>
27 changes: 22 additions & 5 deletions src/app/courses/progress-courses/courses-progress-leader.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -32,6 +31,10 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
submittedExamSteps: any[] = [];
planetCodes: string[] = [];
selectedPlanetCode: string;
deviceType: DeviceType;
deviceTypes = DeviceType;
isMobile = false;
showFiltersRow = false;

constructor(
private router: Router,
Expand All @@ -40,9 +43,12 @@ 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();
this.isMobile = this.deviceType === DeviceType.MOBILE;
}

ngOnInit() {
Expand All @@ -66,6 +72,17 @@ export class CoursesProgressLeaderComponent implements OnInit, OnDestroy {
this.onDestroy$.complete();
}

@HostListener('window:resize')
onResize() {
this.deviceType = this.deviceInfoService.getDeviceType();
this.isMobile = this.deviceType === DeviceType.MOBILE;
this.showFiltersRow = false;
}

toggleFiltersRow() {
this.showFiltersRow = !this.showFiltersRow;
}

setProgress(course) {
this.coursesService.findProgress([ course._id ], { allUsers: true }).subscribe((progress) => {
this.progress = progress;
Expand Down
Loading