dsm results pagination

frontends/dnet-is-application/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
 import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
 import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent, DsmBrowseDialog } from './dsm/dsm.component';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @NgModule({
   declarations: [
@@ -79,7 +80,8 @@ import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComp
     MatDialogModule,
     MatSortModule,
     ReactiveFormsModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatPaginatorModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html

@@ -11,7 +11,7 @@
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef style="width: 70%;" mat-sort-header sortActionDescription="Sort by Term">Name</th>
           <td mat-cell *matCellDef="let element">
-            <a [routerLink]="['/dsm/results/0/10']" [queryParams]="{field: data.field, value: element.term}" mat-dialog-close>{{element.name}}</a>
+            <a [routerLink]="['/dsm/results/0/50']" [queryParams]="{field: data.field, value: element.term}" mat-dialog-close>{{element.name}}</a>
           </td>
         </ng-container>
       

frontends/dnet-is-application/src/app/dsm/dsm-results.component.html

@@ -1 +1,15 @@
-<p>dsm search</p>
+<h2>Datasource Manager: Results</h2>
+
+<mat-paginator (page)="changePage($event)"
+    [pageIndex]="currPage"
+    [pageSize]="pageSize"
+    [length]="nResults"
+    [pageSize]="pageSize"
+    [pageSizeOptions]="[10, 25, 50, 100]"
+    aria-label="Select page">
+</mat-paginator>
+
+<div *ngFor="let ds of results">
+    {{ds.name}}
+
+</div>

frontends/dnet-is-application/src/app/dsm/dsm-search.component.html

@@ -15,3 +15,4 @@
         </li>
     </ul>
 </div>
+

frontends/dnet-is-application/src/app/dsm/dsm.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
-import { BrowseTerm, KeyValue } from '../model/controller.model';
+import { BrowseTerm, Datasource, KeyValue } from '../model/controller.model';
 import { ISService } from '../is.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -8,10 +8,11 @@ import { MatSort, Sort } from '@angular/material/sort';
 import { Vocabulary, VocabularyTermSynonym } from '../model/controller.model';
 import { Observable, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { VocabularyTerm } from '../model/controller.model';
+import { Page } from '../model/controller.model';
 import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { EmitterVisitorContext } from '@angular/compiler';
 import { Router } from '@angular/router';
+import { PageEvent } from '@angular/material/paginator';
 
 
 @Component({
@@ -31,7 +32,7 @@ export class DsmSearchComponent implements OnInit {
   }
 
   search() {
-    this.router.navigate(['/dsm/results/0/100'], {
+    this.router.navigate(['/dsm/results/0/50'], {
       queryParams: { value: this.searchText }
     });
   }
@@ -50,7 +51,56 @@ export class DsmSearchComponent implements OnInit {
   templateUrl: './dsm-results.component.html',
   styleUrls: ['./dsm.component.css']
 })
-export class DsmResultsComponent {
+export class DsmResultsComponent implements OnInit {
+  results:Datasource[] = [];
+  nResults:number = 0;
+  currPage:number = 0;
+  nPages:number = 0;
+  pageSize:number = 0;
+  field?:string;
+  value:string = '';
+  
+  constructor(public service: ISService, public route: ActivatedRoute, public router: Router, public dialog: MatDialog) {
+  }
+
+  ngOnInit(): void {
+    combineLatest([ this.route.params, this.route.queryParams ],
+      (params: Params, queryParams: Params) => ({ params, queryParams })
+    ).subscribe((res: { params: Params; queryParams: Params }) => {
+      const { params, queryParams} = res;
+      this.currPage = parseInt(params['page']);
+      this.pageSize = parseInt(params['size']);
+      this.field = queryParams['field'];
+      this.value = queryParams['value'];
+  
+      if (this.field) {
+        this.service.dsmSearchByField(this.field, this.value, this.currPage, this.pageSize, (page:Page<Datasource>) => {
+          this.results = page.content;
+          this.nResults = page.totalElements;
+          this.nPages = page.totalPages;
+        });
+      } else {
+        this.service.dsmSearch(this.value, this.currPage, this.pageSize, (page:Page<Datasource>) => {
+          this.results = page.content;
+          this.nResults = page.totalElements;
+          this.nPages = page.totalPages;
+        });
+      }
+    });  
+  }
+
+  changePage(event: PageEvent) {
+    console.log(event.pageIndex);
+    
+    let path = '/dsm/results/' + event.pageIndex + '/' + event.pageSize;
+    let qp = this.field ?  
+      { field: this.field, value: this.value } : 
+      { value: this.value };
+    
+    this.router.navigate([path], {
+      queryParams: qp
+    });
+  }
 }
 
 @Component({

frontends/dnet-is-application/src/app/is.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm } from './model/controller.model';
+import { Page, ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm, Datasource } from './model/controller.model';
 import { Observable, Observer } from 'rxjs';
 import { FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -200,6 +200,20 @@ export class ISService {
     });
   }
 
+  dsmSearchByField(field:string, value:string, page:number, pageSize:number, onSuccess: Function) {
+    this.client.get<Page<Datasource>>('./ajax/dsm/searchByField/' + encodeURIComponent(field) + '/' + page + '/' + pageSize + '?value=' + encodeURIComponent(value)).subscribe({
+      next: data => onSuccess(data),
+      error: error => this.showError(error)
+    });
+  }
+
+  dsmSearch(value:string, page:number, pageSize:number, onSuccess: Function) {
+    this.client.get<Page<Datasource>>('./ajax/dsm/search/' + page + '/' + pageSize + '?value=' + encodeURIComponent(value)).subscribe({
+      next: data => onSuccess(data),
+      error: error => this.showError(error)
+    });
+  }
+
   private showError(error: any, form?: FormGroup) {
     const msg = this.errorMessage(error);
     if (form) {

frontends/dnet-is-application/src/app/model/controller.model.ts

@@ -102,3 +102,47 @@ export interface VocabularyTerm {
     encoding: string,
     synonyms: VocabularyTermSynonym[]
 }
+
+export interface Api {
+    id: string,
+    protocol: string,
+    compliance: string,
+    active: boolean,
+    aggrDate: string,
+    aggrTotal: number
+}
+
+export interface Organization {
+    name:string,
+    country:string
+}
+
+
+export interface Datasource {
+    id: string,
+    name: string,
+    otherName?: string,
+    nsprefix: string,
+    websiteUrl?: string,
+    type: string,
+    consenttermsofuse?: boolean,
+    fulltextdownload?: boolean,
+    collectedFrom: string,
+    organizations: Organization[],
+    apis: Api[]
+}
+
+export interface Page<T> {
+    content: T[],
+    last: boolean,
+    first: boolean,
+    totalPages: number,
+    totalElements: number,
+    numberOfElements: number,
+    size: number,
+    number: number,
+    empty:boolean,
+    pageable?:any,
+    sort?:any
+}
+