Scroll to top, warn when more subsystems exist

src/app/subsystem-list/subsystem-list.component.html

@@ -18,6 +18,11 @@
 <app-search></app-search>
 <br>
 
-<div *ngFor="let subsystem of filteredSubsystems | async">
-  <app-subsystem-item [subsystem]="subsystem"></app-subsystem-item>
-</div>
+<app-subsystem-item *ngFor="let subsystem of filteredSubsystems | async" [subsystem]="subsystem"></app-subsystem-item>
+<br>
+
+<p *ngIf="isPartialList()">{{'subsystemList.moreSubsystems' | translate}}</p>
+
+<p *ngIf="filteredSubsystems.value?.length">
+  <button type="button" [ngClass]="'btn btn-secondary'" (click)="scrollToTop()">{{'scrollToTop' | translate}}</button>
+</p>

src/app/subsystem-list/subsystem-list.component.spec.ts

@@ -124,4 +124,31 @@ describe('SubsystemListComponent', () => {
     subsystemsService.warnings.emit('WARN');
     expect(component.message).toBe('WARN');
   });
+
+  it('scrollToTop should work', () => {
+    fixture = TestBed.createComponent(SubsystemListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    const spy = TestBed.get(ViewportScroller).scrollToPosition;
+    spy.calls.reset();
+    component.scrollToTop();
+    expect(spy).toHaveBeenCalledWith([0, 0]);
+  });
+
+  it('isPartialList should work', () => {
+    fixture = TestBed.createComponent(SubsystemListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    subsystemsService.filteredSubsystemsSubject.next([new Subsystem(), new Subsystem()]);
+
+    const getLimitSpy = spyOn(subsystemsService, 'getLimit').and.returnValue(['all']);
+    expect(component.isPartialList()).toBeFalsy();
+
+    getLimitSpy.and.returnValue(['2']);
+    expect(component.isPartialList()).toBeTruthy();
+
+    getLimitSpy.and.returnValue(['3']);
+    expect(component.isPartialList()).toBeFalsy();
+  });
 });

src/app/subsystem-list/subsystem-list.component.ts

@@ -11,7 +11,6 @@ import { filter } from 'rxjs/operators';
   templateUrl: './subsystem-list.component.html'
 })
 export class SubsystemListComponent implements OnInit, AfterViewInit, OnDestroy {
-  subsystems: Subsystem[];
   message = '';
   scrollSubject: BehaviorSubject<any> = new BehaviorSubject(null);
   routerScrollSubscription: Subscription;
@@ -52,6 +51,23 @@ export class SubsystemListComponent implements OnInit, AfterViewInit, OnDestroy
     return this.subsystemsService.getApiUrl();
   }
 
+  isPartialList(): boolean {
+    const limit = parseInt(this.subsystemsService.getLimit(), 10);
+    if (isNaN(limit)) {
+      // limit is "all" (or some faulty string)
+      return false;
+    } else if (this.filteredSubsystems.value.length < limit) {
+      return false;
+    } else {
+      // If subsystems length == limit then we still asume it is partial
+      return true;
+    }
+  }
+
+  scrollToTop() {
+    this.viewportScroller.scrollToPosition([0, 0]);
+  }
+
   ngOnInit() {
     // Reset message on page load
     this.message = '';

src/app/subsystem/subsystem.component.html

@@ -32,3 +32,8 @@
     </div>
   </div>
 </div>
+<br>
+
+<p *ngIf="subsystemSubject.value?.methods?.length">
+  <button type="button" [ngClass]="'btn btn-secondary'" (click)="scrollToTop()">{{'scrollToTop' | translate}}</button>
+</p>

src/app/subsystem/subsystem.component.spec.ts

@@ -155,4 +155,14 @@ describe('SubsystemComponent', () => {
     subsystemsService.warnings.emit('WARN');
     expect(component.message).toBe('WARN');
   });
+
+  it('scrollToTop should work', () => {
+    fixture = TestBed.createComponent(SubsystemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    const spy = TestBed.get(ViewportScroller).scrollToPosition;
+    spy.calls.reset();
+    component.scrollToTop();
+    expect(spy).toHaveBeenCalledWith([0, 0]);
+  });
 });

src/app/subsystem/subsystem.component.ts

@@ -57,6 +57,10 @@ export class SubsystemComponent implements OnInit, AfterViewInit, OnDestroy {
     this.router.navigateByUrl('/' + this.subsystemsService.getInstance());
   }
 
+  scrollToTop() {
+    this.viewportScroller.scrollToPosition([0, 0]);
+  }
+
   ngOnInit() {
     // Reset message on page load
     this.message = '';

src/assets/i18n/eng.json

@@ -14,6 +14,7 @@
       "p4": "Catalogue in JSON form: <a href=\"{{jsonUrl}}\" target=\"_blank\">JSON</a>",
       "p5": "Support: <a href=\"mailto:help@ria.ee\">help@ria.ee</a>"
     },
+    "moreSubsystems": "To see more subsystems change amount of subsystems to displa or filter by subsystem or service name.",
     "selectInstance": "Select X-tee instance"
   },
   "search": {
@@ -39,5 +40,6 @@
     "moreMethods": "{{count}} more ...",
     "incorrectInstanceWarning": "Incorrect instance!",
     "subsystemNotFoundWarning": "Subsystem \"{{subsystem}}\" cannot be found!"
-  }
+  },
+  "scrollToTop": "Scroll to top"
 }

src/assets/i18n/est.json

@@ -14,6 +14,7 @@
       "p4": "Kataloog JSON kujul: <a href=\"{{jsonUrl}}\" target=\"_blank\">JSON</a>",
       "p5": "Kasutajatugi: <a href=\"mailto:help@ria.ee\">help@ria.ee</a>"
     },
+    "moreSubsystems": "Selleks, et näha rohkem alamsüsteeme, muutke alamsüsteemide näitamise piirangu või otsige alamsüsteemi või teenuse nime järgi.",
     "selectInstance": "Vali X-tee instants"
   },
   "search": {
@@ -39,5 +40,6 @@
     "moreMethods": "veel {{count}} ...",
     "incorrectInstanceWarning": "Vale instants!",
     "subsystemNotFoundWarning": "Alamsüsteem \"{{subsystem}}\" ei ole leitud!"
-  }
+  },
+  "scrollToTop": "Lehe algusesse"
 }
\ No newline at end of file