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

@@ -1 +1 @@
-<p>dsm search</p>
+<p>dsm add api</p>

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

@@ -1 +1 @@
-<p>dsm search</p>
+<p>dsm api page</p>

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

@@ -6,20 +6,96 @@
     <span *ngIf="!field && !value">Returning all the datasources</span>
 </p>
 
-<mat-paginator (page)="changePage($event)"
+<mat-form-field style="width: 100%; margin-top: 10px;">
-    [pageIndex]="currPage"
+    <mat-label><b>Filter in current page</b> (Total: {{(results | searchFilter: filterText).length}})</mat-label>
-    [pageSize]="pageSize"
+    <input matInput [(ngModel)]="filterText"  placeholder="Filter..."  autofocus />
-    [length]="nResults"
+</mat-form-field>
-    [pageSize]="pageSize"
+
-    [pageSizeOptions]="[10, 25, 50, 100]"
+<mat-paginator (page)="changePage($event)"
-    aria-label="Select page">
+    [pageIndex]="currPage"
-</mat-paginator>
+    [pageSize]="pageSize"
-
+    [length]="nResults"
-
+    [pageSize]="pageSize"
-<div *ngFor="let ds of results">
+    [pageSizeOptions]="[10, 25, 50, 100]"
-    {{ds.name}}
+    aria-label="Select page">
-
+</mat-paginator>
-</div>
+
+<mat-card class="example-card" *ngFor="let r of results | searchFilter: filterText" style="margin-top: 10px;">
+    <mat-card-header>
+      <mat-card-title>{{r.name}}</mat-card-title>
+        <mat-card-subtitle *ngIf="r.otherName && r.name != r.otherName">{{r.otherName}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <table class="dsm-result-table">
+            <tr>
+                <th>Id</th>
+                <td>{{r.id}}</td>
+            </tr>
+            <tr>
+                <th>Type</th>
+                <td>{{r.type}}</td>
+            </tr>
+            <tr>
+                <th>Namespace Prefix</th>
+                <td>{{r.nsprefix}}</td>
+            </tr>
+            <tr>
+                <th>Collected From</th>
+                <td>{{r.collectedFrom}}</td>
+            </tr>
+            <tr *ngIf="r.websiteUrl">
+                <th>URL</th><td><a href="{{r.websiteUrl}}" target="_blank">{{r.websiteUrl}}</a></td>
+            </tr>
+            <tr *ngIf="r.organizations && r.organizations.length > 0">
+                <th>Organization(s)</th>
+                <td>
+                    <span *ngFor="let o of r.organizations">
+                        {{o.name}} 
+                        <img src="assets/images/flags/{{o.country}}.gif" title="{{o.country}}" alt="{{o.country}}"  *ngIf="o.country"/>
+                        <br />
+                    </span>
+                </td>
+            </tr>
+            <tr>
+                <th>APIs</th>
+                <td>
+                        <ng-container *ngFor="let a of r.apis">
+                            <p  *ngIf="a.id" style="border-bottom: 1px solid lightgrey;">
+                                <a [routerLink]="['/dsm/api']" [queryParams]="{id: a.id}" style="margin-right: 0.5em;">{{a.id}}</a>
+                                <span class="badge-label badge-default" title="protocol">{{a.protocol}}</span>
+                                <span class="badge-label badge-info" title="compliance">{{a.compliance}}</span>
+                                <span class="badge-label badge-success" *ngIf="a.active">active</span>
+                                <span class="badge-label badge-failure" *ngIf="!a.active">not active</span>
+                                <span *ngIf="a.aggrDate">
+                                    <br/>
+                                    <b>Last aggregation:</b>
+                                    {{a.aggrDate}}
+                                    <b>(total: {{a.aggrTotal}})</b>
+                                </span>
+                            </p>
+                        </ng-container>
+                        <a mat-raised-button color="primary" [routerLink]="['/dsm/addApi']" [queryParams]="{dsId: r.id, dsName: r.name}">add api</a>
+                    </td>
+            </tr>
+            <tr *ngIf="r.consenttermsofuse">
+                <th>Consent Terms of Use</th>
+                <td>YES</td>
+            </tr>
+            <tr *ngIf="r.fulltextdownload">
+                <th>Fulltext Download</th>
+                <td>YES</td>
+            </tr>
+        </table>
+    </mat-card-content>
+</mat-card>
+
+
+
+
+
+
+
+
 
 <mat-paginator (page)="changePage($event)"
     [pageIndex]="currPage"

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

@@ -0,0 +1,18 @@
+.dsm-result-table {
+    margin-top: 1em;
+    border-collapse: collapse; 
+}
+
+.dsm-result-table tr:not(:last-child) {
+    border-bottom: 1pt solid lightgrey;
+}
+
+.dsm-result-table th, .dsm-result-table td{
+    text-align: left;
+    font-size: 0.9em;
+    vertical-align: top;
+}
+
+.dsm-result-table th {
+    width: 20em;
+}

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

@@ -4,7 +4,7 @@ import { ISService } from '../is.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatSort, Sort } from '@angular/material/sort';
+import { MatSort } from '@angular/material/sort';
 import { combineLatest } from 'rxjs';
 import { Page } from '../is.model';
 import { Router } from '@angular/router';
@@ -48,6 +48,7 @@ export class DsmSearchComponent implements OnInit {
   styleUrls: ['./dsm.component.css']
 })
 export class DsmResultsComponent implements OnInit {
+  filterText:string = '';
   results:Datasource[] = [];
   nResults:number = 0;
   currPage:number = 0;