From 77c01b80bd9cec81a024389eb49a3522fd68d5a1 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Mon, 26 Aug 2019 12:42:27 -0500
Subject: [PATCH] Use LiveAnnouncer for audit actions
---
src/app/dars/audit/audit.component.ts | 20 +++++++++++--------
.../metadata-table.component.html | 3 +--
.../metadata-table.component.scss | 2 ++
.../metadata-table.component.ts | 8 ++++++++
.../new-degree-audit-dialog.component.ts | 3 +++
.../new-what-if-audit-dialog.component.ts | 3 +++
6 files changed, 29 insertions(+), 10 deletions(-)
diff --git a/src/app/dars/audit/audit.component.ts b/src/app/dars/audit/audit.component.ts
index a0760e4..1c4cc48 100644
--- a/src/app/dars/audit/audit.component.ts
+++ b/src/app/dars/audit/audit.component.ts
@@ -45,17 +45,20 @@ export class DarsAuditComponent implements OnInit {
'degreeCreditsValue',
'courseCreditsValue',
];
- constructor(private announcer: LiveAnnouncer, public symbol: AuditSymbolsService) { }
+ constructor(
+ private announcer: LiveAnnouncer,
+ public symbol: AuditSymbolsService,
+ ) {}
public announce(btn) {
btn === 'expand'
? this.announcer.announce(
- 'Expanded All Requirements Sections',
- 'assertive',
- )
+ 'Expanded All Requirements Sections',
+ 'assertive',
+ )
: this.announcer.announce(
- 'Collapsed All Requirements Sections',
- 'assertive',
- );
+ 'Collapsed All Requirements Sections',
+ 'assertive',
+ );
}
// Checking for window scroll events
@@ -68,7 +71,7 @@ export class DarsAuditComponent implements OnInit {
public ngOnInit() {
// Filter out LEGEND from audit data
- this.audit.requirements = this.audit.requirements.filter(function (
+ this.audit.requirements = this.audit.requirements.filter(function(
requirement,
) {
return requirement.requirementName !== 'LEGEND';
@@ -81,6 +84,7 @@ export class DarsAuditComponent implements OnInit {
top: 0,
behavior: 'smooth',
});
+ this.announcer.announce('Scrolling window to the top', 'assertive');
}
public openAllRequirements() {
diff --git a/src/app/dars/metadata-table/metadata-table.component.html b/src/app/dars/metadata-table/metadata-table.component.html
index 5e9201d..69eb5cf 100644
--- a/src/app/dars/metadata-table/metadata-table.component.html
+++ b/src/app/dars/metadata-table/metadata-table.component.html
@@ -86,6 +86,5 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
-
- <mat-paginator (page)="pageEvent = $event" [pageSize]='5' aria-live="polite" attr.aria-label="{{ pageEvent ? 'Switched to page ' + pageEvent.pageIndex + ' of ' + title + ' table.' : '' }}"></mat-paginator>
+ <mat-paginator (page)="onPaginationChange($event)" hidePageSize="true" [pageSize]='5'></mat-paginator>
</div>
diff --git a/src/app/dars/metadata-table/metadata-table.component.scss b/src/app/dars/metadata-table/metadata-table.component.scss
index 66dadd6..bfd6c67 100644
--- a/src/app/dars/metadata-table/metadata-table.component.scss
+++ b/src/app/dars/metadata-table/metadata-table.component.scss
@@ -53,6 +53,8 @@ $black: #000000;
.mat-paginator {
font-size: 14px;
background-color: #f5f5f5;
+ border-right: solid 1px #e3e3e3;
+ border-left: solid 1px #e3e3e3;
border-bottom: solid 1px #e3e3e3;
border-top-width: 0;
border-radius: 0 0 5px 5px;
diff --git a/src/app/dars/metadata-table/metadata-table.component.ts b/src/app/dars/metadata-table/metadata-table.component.ts
index 7b1fb28..72dcba9 100644
--- a/src/app/dars/metadata-table/metadata-table.component.ts
+++ b/src/app/dars/metadata-table/metadata-table.component.ts
@@ -11,6 +11,7 @@ import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Observable, combineLatest } from 'rxjs';
import { PageEvent } from '@angular/material/paginator';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
interface MinimumAuditMetadata {
darsAuditRunDate: AuditMetadata['darsAuditRunDate'];
@@ -48,6 +49,13 @@ export class DarsMetadataTableComponent implements OnInit {
'status',
'actions',
];
+ constructor(private announcer: LiveAnnouncer) {}
+ onPaginationChange(event) {
+ this.announcer.announce(
+ `Switched page of the ${this.title} table`,
+ 'assertive',
+ );
+ }
public static sortMetadata(metadata: MinimumAuditMetadata[]) {
return metadata.sort((a, b) => {
diff --git a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.ts b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.ts
index 1a744e3..b596f86 100644
--- a/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.ts
+++ b/src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.ts
@@ -27,6 +27,7 @@ import { DegreePlan } from '@app/core/models/degree-plan';
import { MatDialogRef } from '@angular/material';
import { RawTermCode } from '@app/degree-planner/shared/term-codes/without-era';
import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
+import { MatSnackBar } from '@angular/material';
const inclusiveRange = (from: number, to: number) => {
const range: number[] = [];
@@ -112,6 +113,7 @@ export class NewDegreeAuditDialogComponent implements OnInit {
private degreePlannerApi: DegreePlannerApiService,
private store: Store<GlobalState>,
private dialogRef: MatDialogRef<NewDegreeAuditDialogComponent>,
+ private snackBar: MatSnackBar,
) {
this.chosenProgram = fb.control('', Validators.required);
@@ -334,5 +336,6 @@ export class NewDegreeAuditDialogComponent implements OnInit {
whichEnrolledCoursesIncluded: this.includeCoursesFrom(''),
fixedCredits: this.fixedCredits(),
});
+ this.snackBar.open('New Degree Audit has been requested');
}
}
diff --git a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts
index 2a301a8..549d66f 100644
--- a/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts
+++ b/src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts
@@ -25,6 +25,7 @@ import { DegreePlan } from '@app/core/models/degree-plan';
import { MatDialogRef } from '@angular/material';
import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
import { RawTermCode } from '@app/degree-planner/shared/term-codes/without-era';
+import { MatSnackBar } from '@angular/material';
const inclusiveRange = (from: number, to: number) => {
const range: number[] = [];
@@ -113,6 +114,7 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
NewWhatIfAuditDialogComponent,
NewWhatIfAuditFields
>,
+ private snackBar: MatSnackBar,
) {
this.chosenProgram = fb.group({
institution: fb.control('', Validators.required),
@@ -310,5 +312,6 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
whichEnrolledCoursesIncluded: this.includeCoursesFrom(''),
fixedCredits: this.fixedCredits(),
});
+ this.snackBar.open("New 'what-if' Audit has been requested");
}
}
--
GitLab