dsm search page

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

@@ -29,7 +29,7 @@ import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDi
 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 } from './dsm/dsm.component';
+import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent, DsmBrowseDialog } from './dsm/dsm.component';
 
 @NgModule({
   declarations: [
@@ -54,7 +54,8 @@ import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComp
     DsmSearchComponent, 
     DsmResultsComponent, 
     DsmApiComponent, 
-    DsmAddApiComponent
+    DsmAddApiComponent,
+    DsmBrowseDialog
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,36 @@
+<h1 mat-dialog-title>{{data.label}}</h1>
+
+<div mat-dialog-content>
+    <mat-form-field style="width: 100%; margin-top: 10px;">
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
+      </mat-form-field>
+      
+      <table mat-table [dataSource]="datasource" matSort class="mat-elevation-z8">
+      
+        <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>
+          </td>
+        </ng-container>
+      
+        <ng-container matColumnDef="total">
+          <th mat-header-cell *matHeaderCellDef style="width: 30%;" mat-sort-header sortActionDescription="Sort by Total"> # datasources </th>
+          <td mat-cell *matCellDef="let element"> {{element.total}} </td>
+        </ng-container>
+      
+        <tr mat-header-row *matHeaderRowDef="colums"></tr>
+        <tr mat-row *matRowDef="let row; columns: colums;"></tr>
+      
+        <!-- Row shown when there is no matching data. -->
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell" colspan="2" style="padding: 0 16px;">No data matching the filter "{{input.value}}"</td>
+        </tr>
+      </table>
+      
+</div>
+
+<div mat-dialog-actions>
+    <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+</div>

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

@@ -1 +1,17 @@
-<p>dsm search</p>
+<h2>Datasource Manager: Search</h2>
+
+<form (ngSubmit)="search()">
+    <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-label>Search...</mat-label>
+        <input matInput [(ngModel)]="searchText" name="searchText" autofocus />
+    </mat-form-field>
+</form>
+
+<div>
+    <h4>Or browse using:</h4>
+    <ul>
+        <li *ngFor="let f of browsableFields">
+            <a (click)="browseField(f.k, f.v)">{{f.v}}</a>
+        </li>
+    </ul>
+</div>

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

@@ -1,11 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, Inject, AfterViewInit, OnInit, ViewChild } from '@angular/core';
+import { BrowseTerm, 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';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
+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 { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { EmitterVisitorContext } from '@angular/compiler';
+import { Router } from '@angular/router';
+
 
 @Component({
   selector: 'app-dsm-search',
   templateUrl: './dsm-search.component.html',
   styleUrls: ['./dsm.component.css']
 })
-export class DsmSearchComponent {
+export class DsmSearchComponent implements OnInit {
+  searchText:string = '';
+  browsableFields:KeyValue[] = [];
+
+  constructor(public service: ISService, public route: ActivatedRoute, public router: Router, public dialog: MatDialog) {
+  }
+
+  ngOnInit() {
+    this.service.dsmBrowsableFields((data: KeyValue[]) => this.browsableFields = data);
+  }
+
+  search() {
+    this.router.navigate(['/dsm/results/0/100'], {
+      queryParams: { value: this.searchText }
+    });
+  }
+
+  browseField(field:string, label:string) {
+      const dialogRef = this.dialog.open(DsmBrowseDialog, {
+        data: { field: field, label: label },
+        width: '80%'
+      });
+  }
 
 }
 
@@ -15,7 +51,6 @@ export class DsmSearchComponent {
   styleUrls: ['./dsm.component.css']
 })
 export class DsmResultsComponent {
-
 }
 
 @Component({
@@ -35,3 +70,39 @@ export class DsmApiComponent {
 export class DsmAddApiComponent {
 
 }
+
+
+
+
+@Component({
+  selector: 'dsm-browse-dialog',
+  templateUrl: 'dsm-browse-dialog.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmBrowseDialog implements OnInit{
+
+  datasource: MatTableDataSource<BrowseTerm> = new MatTableDataSource<BrowseTerm>([]);
+  colums: string[] = ['name', 'total'];
+ 
+  @ViewChild(MatSort) sort: MatSort | undefined
+
+  constructor(public dialogRef: MatDialogRef<DsmBrowseDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
+  } 
+
+  ngOnInit(): void {
+    this.service.dsmBrowse(this.data.field, (res:BrowseTerm[]) => this.datasource.data = res);
+  }
+
+  ngAfterViewInit() {
+    if (this.sort) this.datasource.sort = this.sort;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
+    this.datasource.filter = filterValue;
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

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 } from './model/controller.model';
+import { ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm } from './model/controller.model';
 import { Observable, Observer } from 'rxjs';
 import { FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -186,6 +186,20 @@ export class ISService {
     });
   }
 
+  dsmBrowsableFields(onSuccess: Function) {
+    this.client.get<KeyValue[]>('./ajax/dsm/browsableFields').subscribe({
+      next: data => onSuccess(data),
+      error: error => this.showError(error)
+    });
+  }
+
+  dsmBrowse(field:string, onSuccess: Function) {
+    this.client.get<BrowseTerm[]>('./ajax/dsm/browse/' + encodeURIComponent(field)).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

@@ -11,6 +11,13 @@ export interface KeyValue {
     v: string;
 }
 
+
+export interface BrowseTerm {
+    term: string,
+    name: string,
+    total: number
+}
+
 export interface Module {
     group: string;
     name: string;

frontends/dnet-is-application/src/styles.css

@@ -30,11 +30,15 @@ a, a:not([href]) {
     -webkit-user-select: none; 
     -moz-user-select: none; 
     user-select: none;
-    text-decoration: underline;
+    text-decoration: none;
     text-underline-offset: 3px;
     color: #336699;
 }
 
+a:hover, a:not([href]):hover {
+    text-decoration: underline;
+}
+
 table {
     table-layout: fixed !important;
 }