added support for JSON view (data fetched via service)
This commit is contained in:
parent
c4360a6ddb
commit
1883f3ce77
|
@ -25,6 +25,7 @@ import { MatIconModule } from '@angular/material/icon';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
|
import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
|
||||||
import { TableScreenComponent } from './table-screen/table-screen.component';
|
import { TableScreenComponent } from './table-screen/table-screen.component';
|
||||||
|
import { RawjsonPaneComponent } from './rawjson-pane/rawjson-pane.component';
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -40,6 +41,7 @@ import { TableScreenComponent } from './table-screen/table-screen.component';
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
TableScreenComponent,
|
TableScreenComponent,
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
|
RawjsonPaneComponent,
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
Title,
|
Title,
|
||||||
|
|
|
@ -2,6 +2,6 @@ export interface ITabbedEntity {
|
||||||
id: string;
|
id: string;
|
||||||
title: string;
|
title: string;
|
||||||
content: string;
|
content: string;
|
||||||
//prevediamo contenuti di tipo diverso
|
//prevediamo contenuti di tipo diverso (quindi switch al momento della costruzione dei tab)
|
||||||
type: number;
|
type: number;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -19,14 +19,21 @@ export class ResourcesLoaderService {
|
||||||
//TODO: pipe per gestione errori
|
//TODO: pipe per gestione errori
|
||||||
return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
|
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[]> {
|
getResourcesByContext(): Observable<IResource[]> {
|
||||||
//TODO: pipe per gestione errori
|
//TODO: pipe per gestione errori
|
||||||
return this.http.get<IResource[]>('http://localhost:3002/is/ctxresources');
|
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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,14 +58,20 @@
|
||||||
<mat-tab-group [selectedIndex]="selectedIdx">
|
<mat-tab-group [selectedIndex]="selectedIdx">
|
||||||
<ng-container *ngFor="let tab of tabs; let index = index">
|
<ng-container *ngFor="let tab of tabs; let index = index">
|
||||||
<mat-tab>
|
<mat-tab>
|
||||||
<!--stile linguetta tab-->
|
<!--stile linguetta tab begin-->
|
||||||
<ng-template mat-tab-label>
|
<ng-template mat-tab-label>
|
||||||
<div class="col" style="margin-left: 20px">{{ tab.title }}</div>
|
<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)">
|
<button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
|
||||||
<mat-icon>close</mat-icon>
|
<mat-icon>close</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</ng-template>
|
</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>
|
</mat-tab>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
|
|
|
@ -22,6 +22,7 @@ import { IContextNode } from 'app/services/i-context-node';
|
||||||
import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
||||||
import { MatTab, MatTabGroup } from '@angular/material/tabs';
|
import { MatTab, MatTabGroup } from '@angular/material/tabs';
|
||||||
import { ITabbedEntity } from 'app/i-tabbed-entity';
|
import { ITabbedEntity } from 'app/i-tabbed-entity';
|
||||||
|
import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
|
@ -29,7 +30,7 @@ import { ITabbedEntity } from 'app/i-tabbed-entity';
|
||||||
templateUrl: './table-screen.component.html',
|
templateUrl: './table-screen.component.html',
|
||||||
styleUrls: ['./table-screen.component.scss'],
|
styleUrls: ['./table-screen.component.scss'],
|
||||||
providers: [MockCtxloaderService, ResourcesLoaderService],
|
providers: [MockCtxloaderService, ResourcesLoaderService],
|
||||||
imports: [MatTableModule, MatSortModule, SharedModule, MatPaginatorModule],
|
imports: [MatTableModule, MatSortModule, SharedModule, MatPaginatorModule, RawjsonPaneComponent],
|
||||||
})
|
})
|
||||||
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
|
||||||
//TODO: questo a regime mettere sotto CONST
|
//TODO: questo a regime mettere sotto CONST
|
||||||
|
|
Loading…
Reference in New Issue