From 1883f3ce777df5aa7010723f53b047d7385348ba Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Thu, 28 Sep 2023 18:04:31 +0200
Subject: [PATCH] added support for JSON view (data fetched via service)

---
 src/main/webapp/app/app.module.ts             |  2 ++
 src/main/webapp/app/i-tabbed-entity.ts        |  2 +-
 .../rawjson-pane/rawjson-pane.component.html  |  4 +++
 .../rawjson-pane/rawjson-pane.component.scss  |  0
 .../rawjson-pane/rawjson-pane.component.ts    | 26 +++++++++++++++++++
 .../app/services/resources-loader.service.ts  | 19 +++++++++-----
 .../table-screen/table-screen.component.html  | 10 +++++--
 .../table-screen/table-screen.component.ts    |  3 ++-
 8 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 src/main/webapp/app/rawjson-pane/rawjson-pane.component.html
 create mode 100644 src/main/webapp/app/rawjson-pane/rawjson-pane.component.scss
 create mode 100644 src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts

diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index 958cca3..3b9419f 100755
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -25,6 +25,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
 import { TableScreenComponent } from './table-screen/table-screen.component';
+import { RawjsonPaneComponent } from './rawjson-pane/rawjson-pane.component';
 @NgModule({
   imports: [
     BrowserModule,
@@ -40,6 +41,7 @@ import { TableScreenComponent } from './table-screen/table-screen.component';
     BrowserAnimationsModule,
     TableScreenComponent,
     TabsModule.forRoot(),
+    RawjsonPaneComponent,
   ],
   providers: [
     Title,
diff --git a/src/main/webapp/app/i-tabbed-entity.ts b/src/main/webapp/app/i-tabbed-entity.ts
index e20a5d2..3313628 100644
--- a/src/main/webapp/app/i-tabbed-entity.ts
+++ b/src/main/webapp/app/i-tabbed-entity.ts
@@ -2,6 +2,6 @@ export interface ITabbedEntity {
   id: string;
   title: string;
   content: string;
-  //prevediamo contenuti di tipo diverso
+  //prevediamo contenuti di tipo diverso (quindi switch al momento della costruzione dei tab)
   type: number;
 }
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html
new file mode 100644
index 0000000..3b97c5c
--- /dev/null
+++ b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html
@@ -0,0 +1,4 @@
+<h2 *ngIf="chosenId" id="detail-title">Raw JSON for UID: {{ chosenId }}</h2>
+<div class="bg-light">
+  <pre>{{ fetchedRawData | json }}</pre>
+</div>
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.scss b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts
new file mode 100644
index 0000000..644a816
--- /dev/null
+++ b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule],
+  selector: 'jhi-rawjson-pane',
+  templateUrl: './rawjson-pane.component.html',
+  styleUrls: ['./rawjson-pane.component.scss'],
+  providers: [ResourcesLoaderService],
+})
+export class RawjsonPaneComponent implements OnInit {
+  @Input() chosenId: string;
+  fetchedRawData: string;
+  constructor(private myService: ResourcesLoaderService) {
+    this.fetchedRawData = '';
+    this.chosenId = '';
+  }
+  ngOnInit(): void {
+    //TODO: passare al servizio qui sotto: chosenItem.id come parametro rest
+    this.myService.getJsonDetail(this.chosenId).subscribe(res => {
+      this.fetchedRawData = res;
+    });
+  }
+}
diff --git a/src/main/webapp/app/services/resources-loader.service.ts b/src/main/webapp/app/services/resources-loader.service.ts
index 981eecf..20aa106 100644
--- a/src/main/webapp/app/services/resources-loader.service.ts
+++ b/src/main/webapp/app/services/resources-loader.service.ts
@@ -19,14 +19,21 @@ export class ResourcesLoaderService {
     //TODO: pipe per gestione errori
     return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
   }
-  //TODO: a regime questo metodo prende un parametro nella get
-  getHostingNodeDetail(): Observable<string> {
-    //TODO: pipe per gestione errori
-    return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
-  }
-  //TODO: a regime questo metodo prende un parametro nella get
+
   getResourcesByContext(): Observable<IResource[]> {
     //TODO: pipe per gestione errori
     return this.http.get<IResource[]>('http://localhost:3002/is/ctxresources');
   }
+
+  //TODO: a regime questo metodo prende un parametro nella get
+  //(e probabilmente anche un tipo per fare uno switch sul tipo di risorsa da prendere)
+  getJsonDetail(uid: string): Observable<string> {
+    //TODO: pipe per gestione errori
+    return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
+  }
+
+  getHostingNodeDetail(): Observable<string> {
+    //TODO: pipe per gestione errori
+    return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
+  }
 }
diff --git a/src/main/webapp/app/table-screen/table-screen.component.html b/src/main/webapp/app/table-screen/table-screen.component.html
index 661e314..f6a4aa6 100644
--- a/src/main/webapp/app/table-screen/table-screen.component.html
+++ b/src/main/webapp/app/table-screen/table-screen.component.html
@@ -58,14 +58,20 @@
   <mat-tab-group [selectedIndex]="selectedIdx">
     <ng-container *ngFor="let tab of tabs; let index = index">
       <mat-tab>
-        <!--stile linguetta tab-->
+        <!--stile linguetta tab begin-->
         <ng-template mat-tab-label>
           <div class="col" style="margin-left: 20px">{{ tab.title }}</div>
           <button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
             <mat-icon>close</mat-icon>
           </button>
         </ng-template>
-        {{ tab.content }}
+        <!--stile linguetta tab close-->
+        <div *ngIf="tab.title !== 'JSON View'; else mainTabMsg">
+          <jhi-rawjson-pane [chosenId]="tab.id"></jhi-rawjson-pane>
+        </div>
+        <ng-template #mainTabMsg>
+          <h2>JSON raw data will show here</h2>
+        </ng-template>
       </mat-tab>
     </ng-container>
   </mat-tab-group>
diff --git a/src/main/webapp/app/table-screen/table-screen.component.ts b/src/main/webapp/app/table-screen/table-screen.component.ts
index 73f88ad..e2adc93 100644
--- a/src/main/webapp/app/table-screen/table-screen.component.ts
+++ b/src/main/webapp/app/table-screen/table-screen.component.ts
@@ -22,6 +22,7 @@ import { IContextNode } from 'app/services/i-context-node';
 import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatTab, MatTabGroup } from '@angular/material/tabs';
 import { ITabbedEntity } from 'app/i-tabbed-entity';
+import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
 
 @Component({
   standalone: true,
@@ -29,7 +30,7 @@ import { ITabbedEntity } from 'app/i-tabbed-entity';
   templateUrl: './table-screen.component.html',
   styleUrls: ['./table-screen.component.scss'],
   providers: [MockCtxloaderService, ResourcesLoaderService],
-  imports: [MatTableModule, MatSortModule, SharedModule, MatPaginatorModule],
+  imports: [MatTableModule, MatSortModule, SharedModule, MatPaginatorModule, RawjsonPaneComponent],
 })
 export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   //TODO: questo a regime mettere sotto CONST