partial implementation of add Api Form

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

@@ -6,7 +6,7 @@ import { WfHistoryComponent } from './wf-history/wf-history.component';
 import { ResourcesComponent } from './resources/resources.component';
 import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
 import { ContextViewerComponent, ContextsComponent } from './contexts/contexts.component';
-import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiComponent } from './dsm/dsm.component';
+import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent } from './dsm/dsm.component';
 
 const routes: Routes = [
   { path:"info"                    , component:InfoComponent },
@@ -19,7 +19,6 @@ const routes: Routes = [
   { path:"voc_editor"              , component:VocabularyEditorComponent },
   { path:"dsm/search"              , component:DsmSearchComponent },
   { path:"dsm/results/:page/:size" , component:DsmResultsComponent },
-  { path:"dsm/addApi"              , component:DsmAddApiComponent },
   { path:"dsm/api"                 , component:DsmApiComponent }
 ];
 

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

@@ -18,6 +18,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input'
+import { MatSelectModule } from '@angular/material/select'
 import { MatTableModule } from '@angular/material/table';
 import { ProtocolsComponent } from './protocols/protocols.component';
 import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
@@ -29,7 +30,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, DsmBrowseDialog } from './dsm/dsm.component';
+import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiDialog, DsmBrowseDialog } from './dsm/dsm.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
 
 @NgModule({
@@ -55,7 +56,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
     DsmSearchComponent, 
     DsmResultsComponent, 
     DsmApiComponent, 
-    DsmAddApiComponent,
+    DsmAddApiDialog,
     DsmBrowseDialog
   ],
   imports: [
@@ -75,6 +76,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
     MatCardModule,
     MatFormFieldModule,
     MatInputModule,
+    MatSelectModule,
     MatTableModule,
     MatExpansionModule,
     MatDialogModule,

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

@@ -25,7 +25,7 @@ export interface Module {
     files: string[];
 }
 
-export interface ProtocolParams {
+export interface ProtocolParam {
     name: string
     label: string
     type: string
@@ -35,7 +35,7 @@ export interface ProtocolParams {
 
 export interface Protocol {
     id: string
-    params: ProtocolParams[]
+    params: ProtocolParam[]
 }
 
 export interface WfHistoryEntry {
@@ -140,3 +140,8 @@ export interface Page<T> {
     number: number
 }
 
+export interface DsmConf {
+    compatibilityLevels: string[],
+    contentDescTypes: string[],
+    protocols: Protocol[]
+}

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Page, ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm, Datasource } from './is.model';
+import { Page, DsmConf, ResourceType, Protocol, WfHistoryEntry, SimpleResource, Context, ContextNode, Vocabulary, VocabularyTerm, KeyValue, BrowseTerm, Datasource } from './is.model';
 import { FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
@@ -185,6 +185,13 @@ export class ISService {
     });
   }
 
+  dsmConf(onSuccess: Function) {
+    this.client.get<DsmConf>('./ajax/dsm/conf').subscribe({
+      next: data => onSuccess(data),
+      error: error => this.showError(error)
+    });
+  }
+
   dsmBrowsableFields(onSuccess: Function) {
     this.client.get<KeyValue[]>('./ajax/dsm/browsableFields').subscribe({
       next: data => onSuccess(data),

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

@@ -1 +0,0 @@
-<p>dsm add api</p>

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

@@ -0,0 +1,96 @@
+<form [formGroup]="addApiForm" (ngSubmit)="onSubmit()">
+    <h1 mat-dialog-title>Add a new API</h1>
+
+    <div mat-dialog-content>
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Datasource ID</mat-label>
+            <input matInput readonly value="{{data.dsId}}" />
+        </mat-form-field>
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Datasource Name</mat-label>
+            <input matInput readonly value="{{data.dsName}}" />
+        </mat-form-field>
+
+
+        <mat-form-field appearance="fill" style="width: 30%;">
+            <mat-label>Api ID (prefix)</mat-label>
+            <input matInput readonly value="{{apiPrefix}}" />
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 70%;">
+            <mat-label>Api ID (suffix)</mat-label>
+            <input matInput formControlName="apiId" required />
+            <mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Compatibility level</mat-label>
+            <mat-select matInput formControlName="compatibility" required>
+                <mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option>
+            </mat-select>
+            <mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is <strong>required</strong></mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Content description</mat-label>
+            <mat-select matInput formControlName="contentdescription" required>
+                <mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option>
+            </mat-select>
+            <mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is
+                <strong>required</strong></mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Protocol</mat-label>
+            <mat-select matInput formControlName="protocol" required (selectionChange)="onChangeProtocol($event)">
+                <mat-option *ngFor="let i of protocols" [value]="i">{{i}}</mat-option>
+            </mat-select>
+            <mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>Base URL</mat-label>
+            <input matInput formControlName="baseurl" required  />
+            <mat-error *ngIf="addApiForm.get('baseurl')?.invalid">This field is <strong>required</strong></mat-error>
+        </mat-form-field>
+
+        <ng-container *ngIf="addApiForm.get('protocol')?.value">
+            <mat-form-field appearance="fill" style="width: 100%;" *ngFor="let p of selProtParams">
+                <mat-label>Protocol: {{addApiForm.get('protocol')?.value}} - Parameter: {{p.name}}</mat-label>
+                <input matInput required  />
+            </mat-form-field>
+        </ng-container>
+        
+        <mat-form-field appearance="fill" style="width: 100%;">
+            <mat-label>XPath for Metatadata Identifier</mat-label>
+            <input matInput formControlName="metadataIdentifierPath" required />
+            <mat-error *ngIf="addApiForm.get('metadataIdentifierPath')?.invalid">This field is <strong>required</strong></mat-error>
+        </mat-form-field>
+
+    </div>
+    <div mat-dialog-actions>
+        <button mat-stroked-button color="primary" type="submit" [disabled]="!addApiForm.valid">Submit</button>
+        <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+        <mat-error *ngIf="addApiForm.errors?.['serverError']">
+          {{ addApiForm.errors?.['serverError'] }}
+        </mat-error>
+      </div>
+</form>
+
+<!--
+<form-textfield-static label="Datasource" value="dsName"></form-textfield-static>
+<form-textfield-with-prefix label="API Id" prefix="{{prefix}}" value="api.id"></form-textfield-with-prefix>
+<form-select label="Compatibility level" terms="compatibilityLevels" value="api.compliance"></form-select>                              
+<form-select label="Content description" terms="contentDescTypes" value="api.contentdescription"></form-select>                         
+<form-select label="Protocol" terms="protocols" value="api.protocol"></form-select>                             
+<form-textfield label="BaseURL" value="api.baseUrl" regex="^(http|https|ftp|file|sftp|jar|mongodb):\/\/"></form-textfield>
+
+<div ng-show="api.protocol" ng-repeat="p in selProtParams">
+<form-textfield label="Parameter: {{p.label}}"  value="api.apiParams[p.name]" type="{{p.type}}" optional="{{p.optional}}"></form-textfield>                             
+</div>
+
+{{api}}
+<br />
+                                
+<button type="submit" class="btn btn-sm btn-primary">Add API</button>
+-->

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

@@ -74,7 +74,7 @@
                                 </span>
                             </p>
                         </ng-container>
-                        <button mat-raised-button color="primary" [routerLink]="['/dsm/addApi']" [queryParams]="{dsId: r.id, dsName: r.name}">add api</button>
+                        <button mat-raised-button color="primary" (click)="openAddApiDialog(r.id, r.name)">add api</button>
                     </td>
             </tr>
             <tr *ngIf="r.consenttermsofuse">

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

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { Page, BrowseTerm, Datasource, KeyValue } from '../common/is.model';
+import { Page, BrowseTerm, Datasource, KeyValue, DsmConf, ProtocolParam } from '../common/is.model';
 import { ISService } from '../common/is.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -8,6 +8,8 @@ import { MatSort } from '@angular/material/sort';
 import { combineLatest } from 'rxjs';
 import { Router } from '@angular/router';
 import { PageEvent } from '@angular/material/paginator';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSelectChange } from '@angular/material/select';
 
 @Component({
   selector: 'app-dsm-search',
@@ -67,7 +69,11 @@ export class DsmResultsComponent implements OnInit {
       this.pageSize = parseInt(params['size']);
       this.field = queryParams['field'];
       this.value = queryParams['value'];
+      this.reload();
+    });  
+  }
 
+  reload() {
     if (this.field) {
       this.service.dsmSearchByField(this.field, this.value, this.currPage, this.pageSize, (page:Page<Datasource>) => {
         this.results = page.content;
@@ -81,7 +87,6 @@ export class DsmResultsComponent implements OnInit {
         this.nPages = page.totalPages;
       });
     }
-    });  
   }
 
   changePage(event: PageEvent) {
@@ -94,6 +99,18 @@ export class DsmResultsComponent implements OnInit {
       queryParams: qp
     });
   }
+
+  openAddApiDialog(dsId:string, dsName:string) {
+    const dialogRef = this.dialog.open(DsmAddApiDialog, {
+      data: { dsId: dsId, dsName: dsName },
+      width: '80%'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) this.reload();
+    });
+  }
+
 }
 
 @Component({
@@ -105,18 +122,6 @@ export class DsmApiComponent {
 
 }
 
-@Component({
-  selector: 'app-dsm-add-api',
-  templateUrl: './dsm-add-api.component.html',
-  styleUrls: ['./dsm.component.css']
-})
-export class DsmAddApiComponent {
-
-}
-
-
-
-
 @Component({
   selector: 'dsm-browse-dialog',
   templateUrl: 'dsm-browse-dialog.html',
@@ -149,3 +154,66 @@ export class DsmBrowseDialog implements OnInit{
     this.dialogRef.close();
   }
 }
+
+
+@Component({
+  selector: 'dsm-add-api-dialog',
+  templateUrl: './dsm-add-api.dialog.html',
+  styleUrls: ['./dsm.component.css']
+})
+export class DsmAddApiDialog {
+  apiPrefix:string = '';
+
+
+  apiIdControl = new FormControl('');
+
+  addApiForm = new FormGroup({
+    apiId: this.apiIdControl,
+    compatibility : new FormControl(''),
+    contentdescription : new FormControl(''),
+    protocol : new FormControl(''),
+    baseurl : new FormControl(''),
+    metadataIdentifierPath : new FormControl('')
+  });
+
+  protocols:string[] = [];
+  compatibilityLevels:string[] = [];
+  contentDescTypes:string[] = [];
+
+  protocolsMap:any = {};
+  selProtParams:ProtocolParam[] = [];
+
+
+  constructor(public dialogRef: MatDialogRef<DsmAddApiDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
+    this.apiPrefix = 'api_________::' + data.dsId + '::';
+    this.service.dsmConf((conf:DsmConf) => {
+      this.compatibilityLevels = conf.compatibilityLevels;
+      this.contentDescTypes = conf.contentDescTypes;
+      conf.protocols.forEach((p) => {
+        this.protocols.push(p.id);
+        this.protocolsMap[p.id] = p.params;
+      }); 
+    });
+  }
+
+  onChangeProtocol(e:MatSelectChange):void {
+    
+    if (this.protocolsMap[e.value]) {
+      this.selProtParams = this.protocolsMap[e.value];
+    } else {
+      this.selProtParams = this.protocolsMap[e.value];
+    }
+  }
+
+  onSubmit():void {
+    //const api = DsmAddApiDialog.value;
+    //api.apiId = this.apiPrefix + api.apiId; IMPORTANT
+    //this.service.dsmAddApi(api, (data: void) => this.dialogRef.close(1), this.metadataForm);
+    
+
+  }
+  
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

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

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { ISService } from '../common/is.service';
 import { MatTableDataSource } from '@angular/material/table';
-import { Protocol, ProtocolParams } from '../common/is.model';
+import { Protocol, ProtocolParam } from '../common/is.model';
 
 export interface ProtocolDatasource {
   protocol: string;
-  datasource: MatTableDataSource<ProtocolParams>;
+  datasource: MatTableDataSource<ProtocolParam>;
 }
 
 @Component({