From 229e7798d0023d182bf3daa46c070ef3e3973981 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Thu, 26 Jan 2023 10:55:02 +0100
Subject: [PATCH] form to add a resource

---
 .../dnet-is-application/src/app/is.service.ts | 27 +++++-
 .../src/app/resources/content-dialog.html     | 29 +++++--
 .../src/app/resources/new-dialog.html         | 35 ++++++--
 .../src/app/resources/resources.component.ts  | 83 ++++++++++++++-----
 4 files changed, 140 insertions(+), 34 deletions(-)

diff --git a/frontends/dnet-is-application/src/app/is.service.ts b/frontends/dnet-is-application/src/app/is.service.ts
index 41d2f72d..4921b206 100644
--- a/frontends/dnet-is-application/src/app/is.service.ts
+++ b/frontends/dnet-is-application/src/app/is.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { ResourceType,Protocol,WfHistoryEntry,SimpleResource } from './model/controller.model';
 import { Observable, Observer } from 'rxjs';
 
@@ -31,10 +31,35 @@ export class ISService {
     return this.client.get<SimpleResource[]>("/ajax/resources/" + encodeURIComponent(type));
   }
 
+  loadSimpleResourceContent(id:any):Observable<string> {
+    const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
+    return this.client.get<string>("/ajax/resources/" + encodeURIComponent(id) + '/content', {
+      headers, responseType: 'text' as 'json'
+    });
+  }
+
   saveSimpleResourceMedatata(res:SimpleResource):Observable<void> {
     return this.client.post<void>('/ajax/resources/' + encodeURIComponent(res.id) + '/metadata', res);
   }
 
+  saveSimpleResourceContent(id:string, content:string):Observable<void> {
+    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
+    let body = new HttpParams().set('content', content);
+    return this.client.post<void>('/ajax/resources/' + encodeURIComponent(id) + '/content', body, { headers: headers });
+  }
+
+  addSimpleResource(name:string, type:string, description:string, content:string):Observable<void> {
+    const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
+    let body = new HttpParams()
+      .set('name', name)
+      .set('type', type)
+      .set('description', description)
+      .set('content', content);
+    return this.client.post<void>('/ajax/resources/', body, { headers: headers });
+  }
+
+
+
   deleteSimpleResource(res:SimpleResource):Observable<void> {
     return this.client.delete<void>('/ajax/resources/' + encodeURIComponent(res.id));
   }
diff --git a/frontends/dnet-is-application/src/app/resources/content-dialog.html b/frontends/dnet-is-application/src/app/resources/content-dialog.html
index bfd3c108..80aab07f 100644
--- a/frontends/dnet-is-application/src/app/resources/content-dialog.html
+++ b/frontends/dnet-is-application/src/app/resources/content-dialog.html
@@ -1,9 +1,24 @@
-<h1 mat-dialog-title>Edit content</h1>
+<form [formGroup]="contentForm" (ngSubmit)="onSubmit()">
 
-<div mat-dialog-content>
-    CONTENT FORM HERE
-</div>
+  <h1 mat-dialog-title>Edit content</h1>
 
-<div mat-dialog-actions>
-  <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
-</div>
+  <div mat-dialog-content>
+
+    <mat-form-field appearance="fill" style="width: 100%;">
+      <mat-label>ID</mat-label>
+      <input matInput required readonly value="{{data.id}}"/>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 100%;">
+      <mat-label>Content ({{data.contentType}})</mat-label>
+      <textarea matInput formControlName="content" rows="16" required style="font-size: 0.8em;"></textarea>
+      <mat-error *ngIf="contentForm.get('content')?.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]="!contentForm.valid">Submit</button>
+    <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+  </div>
+
+</form>
diff --git a/frontends/dnet-is-application/src/app/resources/new-dialog.html b/frontends/dnet-is-application/src/app/resources/new-dialog.html
index 9f20b5fd..6a799919 100644
--- a/frontends/dnet-is-application/src/app/resources/new-dialog.html
+++ b/frontends/dnet-is-application/src/app/resources/new-dialog.html
@@ -1,9 +1,30 @@
-<h1 mat-dialog-title>New resource</h1>
+<form [formGroup]="newResourceForm" (ngSubmit)="onSubmit()">
+  <h1 mat-dialog-title>New Resource</h1>
 
-<div mat-dialog-content>
-    NEW RESOURCE FORM HERE
-</div>
+  <div mat-dialog-content>
 
-<div mat-dialog-actions>
-  <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
-</div>
+    <mat-form-field appearance="fill" style="width: 100%;">
+      <mat-label>Name</mat-label>
+      <input matInput formControlName="name" required />
+      <mat-error *ngIf="newResourceForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 100%;">
+      <mat-label>Description</mat-label>
+      <textarea matInput formControlName="description" rows="2"></textarea>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 100%;">
+      <mat-label>Content ({{data.contentType}})</mat-label>
+      <textarea matInput formControlName="content" rows="10" required style="font-size: 0.8em;"></textarea>
+      <mat-error *ngIf="newResourceForm.get('content')?.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]="!newResourceForm.valid">Submit</button>
+    <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
+  </div>
+
+</form>
diff --git a/frontends/dnet-is-application/src/app/resources/resources.component.ts b/frontends/dnet-is-application/src/app/resources/resources.component.ts
index 7d31b96c..9ed5ea6a 100644
--- a/frontends/dnet-is-application/src/app/resources/resources.component.ts
+++ b/frontends/dnet-is-application/src/app/resources/resources.component.ts
@@ -39,7 +39,6 @@ export class ResourcesComponent implements OnInit {
 
   reload() {
     if (this.typeId) {
-      console.log('reload');
       this.service.loadSimpleResources(this.typeId).subscribe({
         next: (data: SimpleResource[]) => this.resources = data,
         error: error => console.log(error),
@@ -50,9 +49,8 @@ export class ResourcesComponent implements OnInit {
 
   openNewDialog(): void {
     const dialogRef = this.newDialog.open(ResCreateNewDialog, {
-      data: {
-
-      }
+      data: this.type,
+      width: '80%'
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -62,7 +60,8 @@ export class ResourcesComponent implements OnInit {
 
   openMetadataDialog(r:SimpleResource): void {
     const dialogRef = this.metadataDialog.open(ResMetadataDialog, {
-      data: r
+      data: r,
+      width: '80%'
     });
 
     dialogRef.afterClosed().subscribe(result => {
@@ -71,12 +70,24 @@ export class ResourcesComponent implements OnInit {
   }
 
   openContentDialog(r:SimpleResource): void {
-    const dialogRef = this.contentDialog.open(ResContentDialog, {
-      data: r
-    });
+    this.service.loadSimpleResourceContent(r.id).subscribe({
+      next: (data: string) => {
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) this.reload();
+        const dialogRef = this.contentDialog.open(ResContentDialog, {
+          data: {
+            id: r.id,
+            contentType: this.type.contentType,
+            content: data
+          },
+          width: '80%'
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          if (result) this.reload();
+        });
+      },
+      error: error => console.log(error),
+      complete: () => console.log("Completed")
     });
   }
 
@@ -97,11 +108,29 @@ export class ResourcesComponent implements OnInit {
   selector: 'res-content-dialog',
   templateUrl: 'content-dialog.html',
   styleUrls: ['resources.component.css']
-
 })
 export class ResContentDialog {
-  constructor(public dialogRef: MatDialogRef<ResContentDialog>,  @Inject(MAT_DIALOG_DATA) public data: SimpleResource, public service: ISService) {
- 
+  contentFormControl = new FormControl('', [Validators.required]);
+  
+  contentForm = new FormGroup({
+    content : this.contentFormControl
+  });
+
+  constructor(public dialogRef: MatDialogRef<ResContentDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
+    this.contentFormControl.setValue(data.content);
+  }
+
+  onSubmit():void {
+    let content = this.contentFormControl.value;
+    if (content) {
+      this.service.saveSimpleResourceContent(this.data.id, content).subscribe({
+        next: (data: void) => {
+          this.dialogRef.close(1)
+        },
+        error: error => console.log(error),
+        complete: () => console.log("Completed")
+      });
+    }
   }
   
   onNoClick(): void {
@@ -113,7 +142,6 @@ export class ResContentDialog {
   selector: 'res-metadata-dialog',
   templateUrl: 'metadata-dialog.html',
   styleUrls: ['resources.component.css']
-
 })
 export class ResMetadataDialog {
   metadataForm = new FormGroup({
@@ -123,7 +151,7 @@ export class ResMetadataDialog {
     description : new FormControl('', [])
   });
 
-  constructor(public dialogRef: MatDialogRef<ResMetadataDialog>,  @Inject(MAT_DIALOG_DATA) public data: SimpleResource, public service: ISService) {
+  constructor(public dialogRef: MatDialogRef<ResMetadataDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
     this.metadataForm.get('id')?.setValue(data.id);
     this.metadataForm.get('type')?.setValue(data.type);
     this.metadataForm.get('name')?.setValue(data.name);
@@ -153,13 +181,30 @@ export class ResMetadataDialog {
   selector: 'res-new-dialog',
   templateUrl: 'new-dialog.html',
   styleUrls: ['resources.component.css']
-
 })
 export class ResCreateNewDialog {
-  constructor(public dialogRef: MatDialogRef<ResCreateNewDialog>,  @Inject(MAT_DIALOG_DATA) public resource: string, public service: ISService) {
- 
-  }
+  newResourceForm = new FormGroup({
+    name:  new FormControl('', [Validators.required]),
+    description : new FormControl('', []),
+    content : new FormControl('', [Validators.required])
+  });
+
+  constructor(public dialogRef: MatDialogRef<ResCreateNewDialog>,  @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {}
   
+  onSubmit():void {
+    let name:string = this.newResourceForm.get('name')?.value!;
+    let type:string = this.data.id!;
+    let description:string = this.newResourceForm.get('description')?.value!;
+    let content:string = this.newResourceForm.get('content')?.value!;
+    
+    this.service.addSimpleResource(name, type, description, content).subscribe({
+      next: (data: void) => {
+        this.dialogRef.close(1)
+      },
+      error: error => console.log(error),
+      complete: () => console.log("Completed")
+    });
+  }
   onNoClick(): void {
     this.dialogRef.close();
   }