save and restore scroll position of song list

src/app/app.component.html

@@ -1,5 +1,7 @@
 <app-navigation></app-navigation>
-<perfect-scrollbar [perfectScrollbar] class="scroll" style="max-height: calc(100vh); width: 100%; overflow: hidden;">
+<perfect-scrollbar #scrollbar (psScrollY)="onScoll($event)" [perfectScrollbar]
+                   class="scroll" style="max-height: calc(100vh); width: 100%; overflow: hidden;"
+>
   <div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
     <router-outlet #o="outlet"></router-outlet>
   </div>

src/app/app.component.ts

@@ -1,5 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {fader} from './animations';
+import {ScrollService} from './services/scroll.service';
+import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar';
 
 @Component({
   selector: 'app-root',
@@ -9,9 +11,24 @@ import {fader} from './animations';
 })
 export class AppComponent implements OnInit {
   public static hideLoader = () => document.querySelector('#load-bg').classList.add('hidden');
+  @ViewChild('scrollbar', {static: false}) scrollbar: PerfectScrollbarComponent;
+
+  constructor(private scrollService: ScrollService) {
+    scrollService.restoreScrollPosition$.subscribe(pos => {
+      if (this.scrollbar && pos) {
+        //this.scrollbar.scrollTo(pos, 0);
+        this.scrollbar.directiveRef.scrollTo(0, pos, 300)
+        // debugger;
+      }
+    })
+  }
 
   public ngOnInit(): void {
     setTimeout(() => AppComponent.hideLoader(), 800);
 
   }
+
+  onScoll($event: { srcElement: { scrollTop: number } }) {
+    this.scrollService.saveScrollPosition($event.srcElement.scrollTop);
+  }
 }

src/app/modules/songs/song-list/song-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../services/song';
 import {debounceTime, map} from 'rxjs/operators';
@@ -7,6 +7,7 @@ import {fade} from '../../../animations';
 import {ActivatedRoute} from '@angular/router';
 import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
+import {ScrollService} from '../../../services/scroll.service';
 
 @Component({
   selector: 'app-songs',
@@ -14,12 +15,15 @@ import {FilterValues} from './filter/filter-values';
   styleUrls: ['./song-list.component.less'],
   animations: [fade]
 })
-export class SongListComponent implements OnInit {
+export class SongListComponent implements OnInit, OnDestroy {
 
   public songs$: Observable<Song[]>;
   public anyFilterActive = false;
 
-  constructor(private songService: SongService, private activatedRoute: ActivatedRoute) {
+  constructor(
+    private songService: SongService,
+    private activatedRoute: ActivatedRoute,
+    private scrollService: ScrollService) {
   }
 
   ngOnInit() {
@@ -41,6 +45,11 @@ export class SongListComponent implements OnInit {
       })
     );
 
+    setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100);
+  }
+
+  public ngOnDestroy(): void {
+    this.scrollService.storeScrollPositionFor('songlist');
   }
 
   private filter(song: Song, filter: FilterValues): boolean {

src/app/modules/songs/song/song.component.html

@@ -39,9 +39,11 @@
     </app-button-row>
 
   </app-card>
-  <app-card *ngIf="(files$|async).length>0" heading="Anhänge">
+  <ng-template *ngIf="(files$|async) as files">
+    <app-card *ngIf="files.length>0" heading="Anhänge">
       <p *ngFor="let file of (files$|async)">
         <app-file [file]="file"></app-file>
       </p>
     </app-card>
+  </ng-template>
 </div>

src/app/services/scroll.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ScrollService} from './scroll.service';
+
+describe('ScrollService', () => {
+  let service: ScrollService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ScrollService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/scroll.service.ts

@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScrollService {
+  private scrollPosition: number;
+  private scrollSlots = {};
+  private _restoreScrollPosition$ = new BehaviorSubject<number>(0);
+  public restoreScrollPosition$ = this._restoreScrollPosition$.asObservable();
+
+  public saveScrollPosition(pos: number) {
+    this.scrollPosition = pos;
+  }
+
+  public storeScrollPositionFor(slot: string) {
+    this.scrollSlots[slot] = this.scrollPosition;
+  }
+
+  public restoreScrollPositionFor(slot: string) {
+    const pos = this.scrollSlots[slot];
+    this._restoreScrollPosition$.next(pos);
+  }
+}