From 2a9c13e59a784633abc3a786b26df374b695a5ce Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Tue, 18 Jun 2019 09:44:48 -0500
Subject: [PATCH] ROENROLL-1620 scroll to bottom after adding new academic year
---
.../degree-planner-view.component.html | 1 +
.../degree-planner-view.component.ts | 38 +++++++++++++++++--
2 files changed, 35 insertions(+), 4 deletions(-)
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
index 71e0ee8..d85498f 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
@@ -3,6 +3,7 @@
<mat-progress-bar id="loading-plan-progress" mode="indeterminate" *ngIf="(isLoadingPlan$ | async)"></mat-progress-bar>
<mat-sidenav-container id="plans-container" ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar">
<mat-sidenav-content
+ #degreePlanWrapper
id="degree-plan-wrapper"
role="region"
cdkFocusRegionStart
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
index 11f25f7..958c07e 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
@@ -3,12 +3,18 @@ import {
map,
withLatestFrom,
distinctUntilChanged,
+ tap,
+ delay,
} from 'rxjs/operators';
-import { OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { OnInit, ViewChild, OnDestroy } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
import { select } from '@ngrx/store';
import { Component } from '@angular/core';
-import { MatSelectChange, MatSlideToggleChange } from '@angular/material';
+import {
+ MatSelectChange,
+ MatSlideToggleChange,
+ MatSidenavContent,
+} from '@angular/material';
import { MatDialog } from '@angular/material';
import { Store } from '@ngrx/store';
import { MediaMatcher } from '@angular/cdk/layout';
@@ -36,6 +42,7 @@ import {
ExpandAcademicYear,
CollapseAcademicYear,
AddAcademicYear,
+ UIActionTypes,
} from '../store/actions/ui.actions';
import { YearCode } from '@app/degree-planner/shared/term-codes/yearcode';
import { ConstantsService } from '../services/constants.service';
@@ -44,6 +51,7 @@ import { IE11WarningDialogComponent } from '../dialogs/ie11-warning-dialog/ie11-
import { getUserPreference } from '@app/core/selectors';
import { UpdateUserPreferences, DismissAlert } from '@app/core/actions';
import { Alert } from '@app/core/models/alert';
+import { Actions, ofType } from '@ngrx/effects';
// From: https://stackoverflow.com/a/21825207
const isIE11 =
@@ -54,7 +62,10 @@ const isIE11 =
templateUrl: './degree-planner-view.component.html',
styleUrls: ['./degree-planner-view.component.scss'],
})
-export class DegreePlannerViewComponent implements OnInit {
+export class DegreePlannerViewComponent implements OnInit, OnDestroy {
+ @ViewChild('degreePlanWrapper')
+ public degreePlanWrapper: MatSidenavContent | null;
+
public termsByAcademicYear: Object;
public mobileView: MediaQueryList;
public coursesData$: any;
@@ -70,7 +81,10 @@ export class DegreePlannerViewComponent implements OnInit {
public version: string;
public alerts$: Observable<Alert[]>;
+ private addAcademicYearSubscription: Subscription;
+
constructor(
+ private actions$: Actions,
private store: Store<GlobalState>,
private constants: ConstantsService,
private termCodeFactory: TermCodeFactory,
@@ -144,6 +158,22 @@ export class DegreePlannerViewComponent implements OnInit {
});
this.alerts$ = this.store.select(selectors.alerts);
+
+ this.addAcademicYearSubscription = this.actions$
+ .pipe(
+ ofType(UIActionTypes.AddAcademicYear),
+ delay(20), // The delay makes sure the scrolling takes place *after* the academic year has been rendered
+ tap(() => {
+ if (this.degreePlanWrapper) {
+ this.degreePlanWrapper.scrollTo({ bottom: 0 });
+ }
+ }),
+ )
+ .subscribe();
+ }
+
+ public ngOnDestroy() {
+ this.addAcademicYearSubscription.unsubscribe();
}
public onDismissAlert(key: string) {
--
GitLab