partial implementation of add Api Form

2023-02-01 15:45:33 +01:00 · 2023-02-01 15:45:33 +01:00 · 0e3a3f11c6
parent 416312a1e7
commit 0e3a3f11c6
9 changed files with 216 additions and 40 deletions
--- a/frontends/dnet-is-application/src/app/app-routing.module.ts
+++ b/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 }
 ];

--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/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,
--- a/frontends/dnet-is-application/src/app/common/is.model.ts
+++ b/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[]
+}
--- a/frontends/dnet-is-application/src/app/common/is.service.ts
+++ b/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),
--- a/frontends/dnet-is-application/src/app/dsm/dsm-add-api.component.html
+++ b/frontends/dnet-is-application/src/app/dsm/dsm-add-api.component.html
@ -1 +0,0 @@
-<p>dsm add api</p>
--- a/frontends/dnet-is-application/src/app/dsm/dsm-add-api.dialog.html
+++ b/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>
+-->
--- a/frontends/dnet-is-application/src/app/dsm/dsm-results.component.html
+++ b/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">
--- a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
+++ b/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,23 +69,26 @@ export class DsmResultsComponent implements OnInit {
      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;
-        });
-      }
+      this.reload();
    });  
  }

+  reload() {
+    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) {
    let path = '/dsm/results/' + event.pageIndex + '/' + event.pageSize;
    let qp = this.field ?  
@ -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,24 +122,12 @@ 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',
  styleUrls: ['./dsm.component.css']
 })
-export class DsmBrowseDialog implements OnInit{
+export class DsmBrowseDialog implements OnInit {

  datasource: MatTableDataSource<BrowseTerm> = new MatTableDataSource<BrowseTerm>([]);
  colums: string[] = ['name', 'total'];
@ -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();
+  }
+}
--- a/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
+++ b/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({