Merge pull request #1113 from geli-lms/bugfix/#1082-bug-notification

Notifications: Scroll fix
geli-lms · Mar 25, 2019 · 7eef0df · 7eef0df
2 parents fdf52bc + ee86334
commit 7eef0df
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Close `UnitController` vulnerabilities. [#1190](https://github.com/geli-lms/geli/issues/1190)
 - Close `WhitelistController` vulnerabilities. [#1192](https://github.com/geli-lms/geli/issues/1192)
 
+### Fixed
+- Notification scroll bug. [#1082](https://github.com/geli-lms/geli/issues/1082)
+
 ## [[0.8.4](https://github.com/geli-lms/geli/releases/tag/v0.8.4)] - 2018-12-20 - WS 18/19 ❄️-Release
 ### Added
 - Export PDF with styled free text units. [#997](https://github.com/geli-lms/geli/issues/997) [#1047](https://github.com/geli-lms/geli/pull/1047)

diff --git a/app/webFrontend/src/app/course/course-detail/course-detail.component.ts b/app/webFrontend/src/app/course/course-detail/course-detail.component.ts
@@ -14,7 +14,6 @@ import {TranslateService} from '@ngx-translate/core';
 import {ICourseView} from '../../../../../../shared/models/ICourseView';
 
 
-
 @Component({
   selector: 'app-course-detail',
   templateUrl: './course-detail.component.html',
@@ -36,11 +35,12 @@ export class CourseDetailComponent implements OnInit, OnDestroy {
               private userDataService: UserDataService,
               private dialogService: DialogService,
               private dataSharingService: DataSharingService,
-              private translate: TranslateService) {}
+              private translate: TranslateService) {
+  }
 
   ngOnInit() {
     const data: any = this.route.snapshot.data;
-    this.course = <ICourseView> data.course;
+    this.course = <ICourseView>data.course;
     this.id = this.course._id;
     LastVisitedCourseContainerUpdater.addCourseToLastVisitedCourses(this.id, this.userService, this.userDataService);
     this.titleService.setTitleCut(['Course: ', this.course.name]);

diff --git a/app/webFrontend/src/app/unit/unit.component.html b/app/webFrontend/src/app/unit/unit.component.html
@@ -1,4 +1,4 @@
-<div *ngFor="let unit of units">
+<div #units *ngFor="let unit of units">
   <mat-card class="unit-card">
     <button mat-icon-button *ngIf="unit.visible === false" disabled>
       <mat-icon color="warn">visibility_off</mat-icon>
@@ -16,7 +16,7 @@
       {{unit.description}}
     </mat-card-subtitle>
 
-    <div id={{unit._id}}></div>
+    <div  id={{unit._id}}></div>
     <mat-card-content [ngSwitch]="unit.__t">
       <app-video-unit *ngSwitchCase="'video'" [videoUnit]="unit"></app-video-unit>
       <app-file-unit *ngSwitchCase="'file'" [fileUnit]="unit"></app-file-unit>

diff --git a/app/webFrontend/src/app/unit/unit.component.ts b/app/webFrontend/src/app/unit/unit.component.ts
@@ -1,8 +1,16 @@
-import {Component, OnInit, Input, AfterViewInit} from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  AfterViewInit,
+  ViewChildren,
+  QueryList,
+  ElementRef
+} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {IUnit} from '../../../../../shared/models/units/IUnit';
 import * as moment from 'moment';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {IUser} from '../../../../../shared/models/IUser';
 import {MessageService} from '../shared/services/message.service';
 import {ICourse} from '../../../../../shared/models/ICourse';
@@ -17,7 +25,9 @@ export class UnitComponent implements OnInit, AfterViewInit {
   @Input() units: IUnit[];
   unitId: string;
   users: IUser[] = [];
-  chatMessageCount: {[unitId: string]: number} = {};
+  chatMessageCount: { [unitId: string]: number } = {};
+  @ViewChildren('units') unitElements: QueryList<ElementRef>;
+
 
   private getFormattedDeadline(deadline: string) {
     moment.locale(this.translate.currentLang);
@@ -39,19 +49,39 @@ export class UnitComponent implements OnInit, AfterViewInit {
     this.route.params.subscribe(params => {
       this.unitId = decodeURIComponent(params['unit']);
     });
+
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.scrollToUnit(this.unitId);
+      }
+    });
+
     Promise.all(this.units.map(async (unit) => {
       const res = await this.msgService.getMessageCount({room: unit.chatRoom});
       this.chatMessageCount[unit._id] = res.count;
     }));
   }
 
   ngAfterViewInit(): void {
-    try {
-      const element = document.getElementById(this.unitId);
-      if (element) {
-        element.scrollIntoView({behavior: 'smooth'});
-      }
-    } catch (err) {}
+    this.scrollToUnit(this.unitId);
+  }
+
+
+  scrollToUnit(unitId: string): void {
+    // find id
+    const index = this.units.findIndex(e => e._id === unitId);
+
+    if (index < 0) {
+      return;
+    }
+
+    const element = this.unitElements.toArray()[index];
+
+    if (element) {
+      setTimeout(() => {
+        element.nativeElement.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
+      }, 100);
+    }
   }
 
 }