moving data binding to parent views

src/main/webapp/app/ctx-tree/ctx-tree.component.ts

@@ -14,11 +14,8 @@ export class CtxTreeComponent implements OnInit {
   nestedTreeControl = new NestedTreeControl<IContextNode>(node => node.children);
   nestedDataSource = new MatTreeNestedDataSource<IContextNode>();
   @Output() treeNode = new EventEmitter<IContextNode>(); //emitting event to parent
-  showTable: boolean;
 
-  constructor(private myService: MockCtxloaderService) {
-    this.showTable = false;
-  }
+  constructor(private myService: MockCtxloaderService) {}
 
   hasNestedChild(_: number, node: IContextNode): boolean {
     if (node.children == null) {
@@ -33,8 +30,4 @@ export class CtxTreeComponent implements OnInit {
       this.nestedDataSource.data = res;
     });
   }
-
-  /*loadTable(chosenContext: IContextNode): void {
-    this.treeNode.emit(chosenContext);
-  }*/
 }

src/main/webapp/app/dyn-tabs/dyn-tabs.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="hn-table-title">Hosting Nodes</h2>
+  <h2 id="hn-table-title">Hosting Nodes for {{ myCtx.name }}</h2>
   <ul class="nav nav-tabs">
     <li [ngClass]="{ 'nav-link': true, active: tab.active }" *ngFor="let tab of tabs" (click)="selectTab(tab)">
       <a routerLink="/dyn-tabs" class="nav-link">{{ tab.tabTitle }}</a>

src/main/webapp/app/dyn-tabs/dyn-tabs.component.ts

@@ -5,38 +5,52 @@ import {
   QueryList,
   AfterContentInit,
   ViewChild,
-  ViewContainerRef,
   ComponentFactoryResolver,
-  ComponentRef,
-  ComponentFactory,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+  Input,
 } from '@angular/core';
 
 import { DynTabsDirective } from 'app/dyn-tabs.directive';
 import { DynTabComponent } from 'app/dyn-tab/dyn-tab.component';
 import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
 import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+import { IContextNode } from 'app/services/i-context-node';
+import { SharedModule } from 'app/shared/shared.module';
 
 @Component({
   standalone: true,
-  imports: [DynTabsDirective, CommonModule],
+  imports: [DynTabsDirective, CommonModule, SharedModule],
   selector: 'jhi-dyn-tabs',
   templateUrl: './dyn-tabs.component.html',
   styleUrls: ['./dyn-tabs.component.scss'],
   providers: [MockCtxloaderService, ResourcesLoaderService],
 })
-export class DynTabsComponent implements AfterContentInit {
+export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
   //inizializzazioni
   dynamicTabs: DynTabComponent[] = [];
+  @Input() myCtx: IContextNode; //fetching event from parent
 
   @ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
-  //@ViewChild(DynTabsDirective, {read: ViewContainerRef}) tabscontainer:ViewContainerRef;
   @ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
 
-  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
+  nestedContexts: IContextNode[] | any;
+
+  constructor(private _componentFactoryResolver: ComponentFactoryResolver, private myContextService: MockCtxloaderService) {
+    this.myCtx = {} as IContextNode;
     this.tabs = {} as QueryList<DynTabComponent>;
     this.tabscontainer = {} as DynTabsDirective;
   }
 
+  ngOnInit(): void {
+    this.myContextService.getData().subscribe(res => {
+      this.nestedContexts = res;
+      //inizializzo il contesto alla radice
+      this.myCtx = this.nestedContexts[0];
+    });
+  }
+
   ngAfterContentInit(): void {
     // get all active tabs
     const activeTabs = this.tabs.filter(tab => tab.active);
@@ -47,7 +61,20 @@ export class DynTabsComponent implements AfterContentInit {
     }
   }
 
-  //OPEN TAB
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const propName in changes) {
+      if (propName === 'myCtx') {
+        const param = changes[propName];
+        this.myCtx = <IContextNode>param.currentValue;
+        //controllo che l'oggetto non sia vuoto
+        if (Object.keys(this.myCtx).length !== 0) {
+          // eslint-disable-next-line no-console
+          console.log('------CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
+        }
+      }
+    }
+  }
+
   openTab(title: string, template: any, data: any, isCloseable = false): void {
     // get a component factory for our TabComponent
     const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DynTabComponent);

src/main/webapp/app/services/i-hostinngnode.ts

@@ -1,5 +1,6 @@
 export interface IHostingnode {
   name: string;
+  id: string;
   status: string;
   lastmod: string;
   memavailable: string;

src/main/webapp/app/tab-items/list-screen.component.html

@@ -2,6 +2,7 @@
   <thead>
     <tr>
       <th>Name</th>
+      <th>Id</th>
       <th>Status</th>
       <th>Last Modified</th>
       <th>Available Memory</th>
@@ -11,6 +12,7 @@
   <tbody>
     <tr *ngFor="let data of dataSource">
       <td>{{ data.name }}</td>
+      <td>{{ data.id }}</td>
       <td>{{ data.status }}</td>
       <td>{{ data.lastmod }}</td>
       <td>{{ data.memavailable }}</td>

src/main/webapp/app/tab-items/list-screen.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { IContextNode } from 'app/services/i-context-node';
 import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
 import { IHostingnode } from 'app/services/i-hostinngnode';
@@ -13,25 +13,39 @@ import { SharedModule } from 'app/shared/shared.module';
   styleUrls: ['./list-screen.component.scss'],
   providers: [MockCtxloaderService, ResourcesLoaderService],
 })
-export class ListScreenComponent implements OnChanges {
+export class ListScreenComponent implements OnChanges, OnInit {
   dataSource: IHostingnode[];
-  //fetchedRawData?: string;
   tableDetail: IHostingnode;
+  //nestedContexts: IContextNode[]|any;
 
   @Input() myCtx: IContextNode; //fetching event from parent
   @Output() jsonEmitter = new EventEmitter<IHostingnode>();
 
-  constructor(private myServiceTable: ResourcesLoaderService) {
+  constructor(private myServiceTable: ResourcesLoaderService, private myContextService: MockCtxloaderService) {
     this.myCtx = {} as IContextNode;
     this.tableDetail = {} as IHostingnode;
     this.dataSource = [];
-    //this.currentCtxId = "";
   }
 
   openJsonViewer(node: IHostingnode): void {
     this.jsonEmitter.emit(node);
   }
 
+  ngOnInit(): void {
+    //TODO: qui prende il contesto-radice
+    /*
+	  this.myContextService.getData().subscribe(res => {
+      		this.nestedContexts = res;
+      		//inizializzo il contesto alla radice
+      		this.myCtx = this.nestedContexts[0];
+      		
+    	});
+    	*/
+    this.myServiceTable.getHostingNodes().subscribe(res => {
+      this.dataSource = res;
+    });
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName in changes) {
       if (propName === 'myCtx') {
@@ -40,7 +54,7 @@ export class ListScreenComponent implements OnChanges {
         //controllo che l'oggetto non sia vuoto
         if (Object.keys(this.myCtx).length !== 0) {
           // eslint-disable-next-line no-console
-          //console.log('+++++++CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
+          console.log('+++++++CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
           //mt qui va passato il parametro myCtx.id al rest
           this.myServiceTable.getHostingNodes().subscribe(res => {
             this.dataSource = res;

src/main/webapp/app/tabbed-page/tabbed-page.component.html

@@ -4,9 +4,9 @@
   </div>
   <div class="col-md-9">
     <div class="row">
-      <jhi-dyn-tabs>
+      <jhi-dyn-tabs [myCtx]="currentNodeCtx">
         <jhi-dyn-tab [tabTitle]="'Lista'">
-          <jhi-list-screen [myCtx]="currentNodeCtx" (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
+          <jhi-list-screen (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
         </jhi-dyn-tab>
       </jhi-dyn-tabs>
     </div>

src/main/webapp/app/tabbed-page/tabbed-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, Input, OnInit } from '@angular/core';
 import { SharedModule } from 'app/shared/shared.module';
 import { CtxTreeModule } from 'app/ctx-tree/ctx-tree.module';
 import { IContextNode } from 'app/services/i-context-node';
@@ -7,6 +7,7 @@ import { ListScreenComponent } from 'app/tab-items/list-screen.component';
 import { RawjsonViewComponent } from 'app/tab-items/rawjson-view.component';
 import { IHostingnode } from 'app/services/i-hostinngnode';
 import { DynTabsComponent } from 'app/dyn-tabs/dyn-tabs.component';
+import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
 
 @Component({
   standalone: true,
@@ -14,24 +15,33 @@ import { DynTabsComponent } from 'app/dyn-tabs/dyn-tabs.component';
   selector: 'jhi-tabbed-page',
   templateUrl: './tabbed-page.component.html',
   styleUrls: ['./tabbed-page.component.scss'],
+  providers: [MockCtxloaderService],
 })
 export class TabbedPageComponent {
   currentNodeCtx: IContextNode;
+  rootNodeCtx: IContextNode;
   chosenItem: IHostingnode;
 
   //attenzione a usare la conversione giusta per il nome del file del template (rawjson-view.component)
   @ViewChild('rawjsonView') rawjsonTemplate: any;
   @ViewChild(DynTabsComponent) dynTabsComponent: any;
+  @Input() myCtx: IContextNode | any; //fetching event from parent
 
   constructor() {
     this.currentNodeCtx = {} as IContextNode;
+    this.rootNodeCtx = {} as IContextNode;
     this.chosenItem = {} as IHostingnode;
+    this.myCtx = {} as IContextNode;
   }
 
   loadTreeNode(node: IContextNode): void {
     this.currentNodeCtx = node;
   }
 
+  loadTreeRoot(root: IContextNode): void {
+    this.rootNodeCtx = root;
+  }
+
   onViewRawJson(item: IHostingnode): void {
     this.chosenItem = item;
     this.dynTabsComponent.openTab(`${this.chosenItem.name}`, this.rawjsonTemplate, this.chosenItem, true);