added support for JSON view (data fetched via service)

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,

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;
 }

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>

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;
+    });
+  }
+}

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');
+  }
 }

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>

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