From f776c2ca68102834dec5298602411192bc58a138 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Thu, 2 Feb 2023 12:32:55 +0100
Subject: [PATCH] dynamic form

---
 .../src/app/dsm/dsm-add-api.dialog.html       | 11 ++---
 .../src/app/dsm/dsm.component.ts              | 43 +++++++++++--------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git 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
index 400efd87..38ea91ec 100644
--- 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
@@ -10,7 +10,7 @@
             <mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
+        <mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
             <mat-card-header>
               <mat-card-title>API Description</mat-card-title>
             </mat-card-header>
@@ -27,7 +27,7 @@
         
                 <mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
                     <mat-label>Api ID (suffix)</mat-label>
-                    <input matInput formControlName="apiId" required placeholder="example: {{addApiForm.get('protocol')?.value}}_01" />
+                    <input matInput formControlName="apiId" required placeholder="example: {{selectedProtocol}}_01" />
                     <mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error>
                 </mat-form-field>
 
@@ -49,7 +49,7 @@
             </mat-card-content>
         </mat-card>
 
-        <mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
+        <mat-card style="margin-top: 10px;" *ngIf="selectedProtocol">
             <mat-card-header>
               <mat-card-title>Configuration Parameters</mat-card-title>
             </mat-card-header>
@@ -61,8 +61,9 @@
                 </mat-form-field>
         
                 <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngFor="let p of selProtParams">
-                    <mat-label>Protocol: {{addApiForm.get('protocol')?.value}} - Parameter: {{p.name}}</mat-label>
-                    <input matInput required  />
+                    <mat-label>Protocol: {{selectedProtocol}} - Parameter: {{p.label}}</mat-label>
+                    <input matInput [formControlName]="paramPrefix + p.name" required  />
+                    <mat-error *ngIf="addApiForm.get(paramPrefix + p.name)?.invalid">Invalid value</mat-error>
                 </mat-form-field>
 
                 <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
diff --git a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
index a1e75b22..eb25cb23 100644
--- a/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
+++ b/frontends/dnet-is-application/src/app/dsm/dsm.component.ts
@@ -8,7 +8,7 @@ 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 { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSelectChange } from '@angular/material/select';
 
 @Component({
@@ -162,27 +162,27 @@ export class DsmBrowseDialog implements OnInit {
   styleUrls: ['./dsm.component.css']
 })
 export class DsmAddApiDialog {
+  selectedProtocol:string = '';
+
   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[] = [];
+  paramPrefix:string = '__PARAM_';
 
+  apiIdControl = new FormControl('', [Validators.required]);
+  addApiForm:FormGroup = new FormGroup({
+    apiId: this.apiIdControl,
+    compatibility : new FormControl(''),
+    contentdescription : new FormControl(''),
+    protocol : new FormControl(''),
+    baseurl : new FormControl(''),
+    metadataIdentifierPath : new FormControl('')
+  });
 
   constructor(public dialogRef: MatDialogRef<DsmAddApiDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
     this.apiPrefix = 'api_________::' + data.dsId + '::';
@@ -197,20 +197,27 @@ export class DsmAddApiDialog {
   }
 
   onChangeProtocol(e:MatSelectChange):void {
-    
+    this.selectedProtocol = e.value;
+
+    Object.keys(this.addApiForm.controls).forEach(k => {
+      if (k.startsWith(this.paramPrefix)) {
+        this.addApiForm.removeControl(k);
+      }
+    });
+  
     if (this.protocolsMap[e.value]) {
       this.selProtParams = this.protocolsMap[e.value];
+      this.selProtParams.forEach(p => this.addApiForm.addControl(this.paramPrefix + p.name, new FormControl('')));
     } else {
-      this.selProtParams = this.protocolsMap[e.value];
+      this.selProtParams = [];
     }
   }
 
   onSubmit():void {
-    //const api = DsmAddApiDialog.value;
+    //const api = this.addApiForm.value;
     //api.apiId = this.apiPrefix + api.apiId; IMPORTANT
     //this.service.dsmAddApi(api, (data: void) => this.dialogRef.close(1), this.metadataForm);
-    
-
+    console.log(this.addApiForm.value);
   }
   
   onNoClick(): void {