From f47cd2a8e7876124fe4231f808af63a8c8d6ecb8 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Fri, 27 Jan 2023 12:43:15 +0100
Subject: [PATCH] contexts

---
 .../src/app/app-routing.module.ts             |  4 +-
 .../dnet-is-application/src/app/app.module.ts |  6 +--
 .../src/app/contexts/context-dialog.html      | 35 -------------
 .../src/app/contexts/context-params.html      | 16 ++++++
 ...ent.html => context-viewer.component.html} |  0
 .../src/app/contexts/contexts.component.html  | 10 ++--
 .../src/app/contexts/contexts.component.ts    | 51 ++++---------------
 .../main-menu-panels.component.css            |  1 -
 8 files changed, 33 insertions(+), 90 deletions(-)
 delete mode 100644 frontends/dnet-is-application/src/app/contexts/context-dialog.html
 create mode 100644 frontends/dnet-is-application/src/app/contexts/context-params.html
 rename frontends/dnet-is-application/src/app/contexts/{context-editor.component.html => context-viewer.component.html} (100%)

diff --git a/frontends/dnet-is-application/src/app/app-routing.module.ts b/frontends/dnet-is-application/src/app/app-routing.module.ts
index 75f1944d..6cb55229 100644
--- a/frontends/dnet-is-application/src/app/app-routing.module.ts
+++ b/frontends/dnet-is-application/src/app/app-routing.module.ts
@@ -5,7 +5,7 @@ import { ProtocolsComponent } from './protocols/protocols.component';
 import { WfHistoryComponent } from './wf-history/wf-history.component';
 import { ResourcesComponent } from './resources/resources.component';
 import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
-import { ContextEditorComponent, ContextsComponent } from './contexts/contexts.component';
+import { ContextViewerComponent, ContextsComponent } from './contexts/contexts.component';
 
 const routes: Routes = [
   { path:"info"                    , component:InfoComponent },
@@ -14,7 +14,7 @@ const routes: Routes = [
   { path:"adv_resources/vocabulary", component:VocabulariesComponent },
   { path:"adv_resources/protocol"  , component:ProtocolsComponent },
   { path:"wf_history"              , component:WfHistoryComponent },
-  { path:"ctx_editor"              , component:ContextEditorComponent },
+  { path:"ctx_viewer"              , component:ContextViewerComponent },
   { path:"voc_editor"              , component:VocabularyEditorComponent },
 ];
 
diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index d5d1ec44..346e42a6 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -28,7 +28,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSortModule } from '@angular/material/sort';
 import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDialog } from './resources/resources.component'
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { ContextsComponent, ContextEditorComponent, ContextDialog } from './contexts/contexts.component';
+import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
 import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
 
 @NgModule({
@@ -46,8 +46,8 @@ import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies
     ResCreateNewDialog,
     ResMetadataDialog,
     ContextsComponent,
-    ContextEditorComponent,
-    ContextDialog,
+    ContextViewerComponent,
+    ContextParamsDialog,
     VocabulariesComponent,
     VocabulariesComponent
   ],
diff --git a/frontends/dnet-is-application/src/app/contexts/context-dialog.html b/frontends/dnet-is-application/src/app/contexts/context-dialog.html
deleted file mode 100644
index 6a4d7ca0..00000000
--- a/frontends/dnet-is-application/src/app/contexts/context-dialog.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<form [formGroup]="contextForm" (ngSubmit)="onSubmit()">
-
-    <h1 mat-dialog-title *ngIf="mode == 'new'">New context</h1>
-    <h1 mat-dialog-title *ngIf="mode != 'new'">Edit context</h1>
-
-    <div mat-dialog-content>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>ID</mat-label>
-            <input matInput formControlName="id" required [readonly]="mode != 'new'" />
-            <mat-error *ngIf="contextForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Label</mat-label>
-            <input matInput formControlName="label" required />
-            <mat-error *ngIf="contextForm.get('label')?.invalid">This field is <strong>required</strong></mat-error>
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Type</mat-label>
-            <input matInput formControlName="type" required />
-            <mat-error *ngIf="contextForm.get('type')?.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]="!contextForm.valid">Submit</button>
-        <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
-        <mat-error *ngIf="contextForm.errors?.['serverError']">
-            {{ contextForm.errors?.['serverError'] }}
-        </mat-error>
-    </div>
-
-</form>
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/contexts/context-params.html b/frontends/dnet-is-application/src/app/contexts/context-params.html
new file mode 100644
index 00000000..505a7e96
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/contexts/context-params.html
@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Parameters</h1>
+
+<div mat-dialog-content>
+    <p *ngIf="!data || data.length == 0">No parameters</p>
+            
+    <div *ngFor="let p of data">
+        <mat-form-field appearance="fill" style="width: 100%; font-size: 0.8em;">
+            <mat-label>{{p.name}}</mat-label>
+            <input matInput required readonly value="{{p.value}}" />
+        </mat-form-field>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+    <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+</div>
diff --git a/frontends/dnet-is-application/src/app/contexts/context-editor.component.html b/frontends/dnet-is-application/src/app/contexts/context-viewer.component.html
similarity index 100%
rename from frontends/dnet-is-application/src/app/contexts/context-editor.component.html
rename to frontends/dnet-is-application/src/app/contexts/context-viewer.component.html
diff --git a/frontends/dnet-is-application/src/app/contexts/contexts.component.html b/frontends/dnet-is-application/src/app/contexts/contexts.component.html
index b91008d6..fa986db5 100644
--- a/frontends/dnet-is-application/src/app/contexts/contexts.component.html
+++ b/frontends/dnet-is-application/src/app/contexts/contexts.component.html
@@ -1,19 +1,16 @@
 <h2>Contexts</h2>
 
-<button mat-stroked-button color="primary" (click)="openNewDialog()">create a new context</button>
-
 <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]="contextsDatasource" matSort class="mat-elevation-z8">
 
   <ng-container matColumnDef="id">
     <th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Context ID"> Id </th>
     <td mat-cell *matCellDef="let element">
-      <a [routerLink]="['/ctx_editor']" [queryParams]="{id: element.id}">{{element.id}}</a>
+      <a [routerLink]="['/ctx_viewer']" [queryParams]="{id: element.id}">{{element.id}}</a>
     </td>
   </ng-container>
 
@@ -28,10 +25,9 @@
   </ng-container>
 
   <ng-container matColumnDef="buttons">
-    <th mat-header-cell *matHeaderCellDef style="width: 30%;"></th>
+    <th mat-header-cell *matHeaderCellDef style="text-align: right;">Parameters</th>
     <td mat-cell *matCellDef="let element" class="table-buttons">
-        <button mat-stroked-button color="primary" (click)="openEditDialog(element)">edit</button>
-        <button mat-stroked-button color="warn" (click)="deleteContext(element)">delete</button>
+        <button mat-stroked-button color="primary" (click)="openEditDialog(element)">show</button>
     </td>
   </ng-container>
 
diff --git a/frontends/dnet-is-application/src/app/contexts/contexts.component.ts b/frontends/dnet-is-application/src/app/contexts/contexts.component.ts
index 4bef39a6..31ff650a 100644
--- a/frontends/dnet-is-application/src/app/contexts/contexts.component.ts
+++ b/frontends/dnet-is-application/src/app/contexts/contexts.component.ts
@@ -41,27 +41,13 @@ export class ContextsComponent implements AfterViewInit ,OnInit {
     const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
     this.contextsDatasource.filter = filterValue;
   }
-
-  openNewDialog(): void {
-    const dialogRef = this.contextDialog.open(ContextDialog, {
-      data: {},
-      width: '80%'
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) this.reload();
-    });
-  }
+  
 
   openEditDialog(context: Context): void {
-    const dialogRef = this.contextDialog.open(ContextDialog, {
-      data: context,
+    const dialogRef = this.contextDialog.open(ContextParamsDialog, {
+      data: context.parameters,
       width: '80%'
     });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) this.reload();
-    });
   }
 
   deleteContext(ctx:Context) {
@@ -74,31 +60,12 @@ export class ContextsComponent implements AfterViewInit ,OnInit {
 
 @Component({
   selector: 'context-dialog',
-  templateUrl: 'context-dialog.html',
+  templateUrl: 'context-params.html',
   styleUrls: ['./contexts.component.css']
 })
-export class ContextDialog {
- 
-  mode:string = 'new';
-
-  contextForm = new FormGroup({
-    id: new FormControl(''),
-    label: new FormControl(''),
-    type: new FormControl(''),
-  });
-
-  constructor(public dialogRef: MatDialogRef<ContextDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
-    if (data && data.id) {
-      this.mode = 'update';
-      this.contextForm.get('id')?.setValue(data.id);
-      this.contextForm.get('label')?.setValue(data.label);
-      this.contextForm.get('type')?.setValue(data.type);
-    }
-  }
-
-  onSubmit():void {
-    const res = Object.assign({}, this.data, this.contextForm.value);
-    this.service.addContext(res, (data: void) => this.dialogRef.close(1), this.contextForm);
+export class ContextParamsDialog {
+   
+  constructor(public dialogRef: MatDialogRef<ContextParamsDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
   }
   
   onNoClick(): void {
@@ -108,9 +75,9 @@ export class ContextDialog {
 
 @Component({
   selector: 'app-context-editor',
-  templateUrl: './context-editor.component.html',
+  templateUrl: './context-viewer.component.html',
   styleUrls: ['./contexts.component.css']
 })
-export class ContextEditorComponent {
+export class ContextViewerComponent {
 
 }
diff --git a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
index c6d4c582..b0c933e2 100644
--- a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
+++ b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
@@ -7,7 +7,6 @@
     color: #fff;
     background-color:cornflowerblue;
     text-align: center;
-
 }
 
 .collapse-buttons { text-align: right; }