sharing context among components
This commit is contained in:
parent
c9cb7a3ee5
commit
a9570f76fc
|
@ -1,6 +1,7 @@
|
||||||
<!-- VEDI QUA: https://angular.io/guide/class-binding -->
|
<!-- VEDI QUA: https://angular.io/guide/class-binding -->
|
||||||
|
|
||||||
<div [hidden]="!active" [ngClass]="{ 'nav-link': true, active: active }">
|
<div [hidden]="!active" [ngClass]="{ 'nav-link': true, active: active }">
|
||||||
|
<p>(siamo in {{ myCtx.name }})</p>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
<ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ IHostingnode: dataContext }"> </ng-container>
|
<ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ IHostingnode: dataContext }"> </ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input, OnInit, Output } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { IContextNode } from 'app/services/i-context-node';
|
||||||
|
import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
|
@ -7,11 +9,28 @@ import { CommonModule } from '@angular/common';
|
||||||
selector: 'jhi-dyn-tab',
|
selector: 'jhi-dyn-tab',
|
||||||
templateUrl: './dyn-tab.component.html',
|
templateUrl: './dyn-tab.component.html',
|
||||||
styleUrls: ['./dyn-tab.component.scss'],
|
styleUrls: ['./dyn-tab.component.scss'],
|
||||||
|
providers: [MockCtxloaderService],
|
||||||
})
|
})
|
||||||
export class DynTabComponent {
|
export class DynTabComponent implements OnInit {
|
||||||
@Input() tabTitle: string | undefined;
|
@Input() tabTitle: string | undefined;
|
||||||
@Input() active = false;
|
@Input() active = false;
|
||||||
@Input() isCloseable = false;
|
@Input() isCloseable = false;
|
||||||
@Input() template: any;
|
@Input() template: any;
|
||||||
@Input() dataContext: any;
|
@Input() dataContext: any;
|
||||||
|
//TODO: IMPORTARE LA RADICE COME UN PARAMETRO INIETTATO DA PARENT
|
||||||
|
@Input() myCtx: IContextNode; //from parent
|
||||||
|
|
||||||
|
nestedContexts: IContextNode[] | any;
|
||||||
|
|
||||||
|
constructor(private myContextService: MockCtxloaderService) {
|
||||||
|
this.myCtx = {} as IContextNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.myContextService.getData().subscribe(res => {
|
||||||
|
this.nestedContexts = res;
|
||||||
|
//inizializzo il contesto alla radice
|
||||||
|
this.myCtx = this.nestedContexts[0];
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
OnChanges,
|
OnChanges,
|
||||||
SimpleChanges,
|
SimpleChanges,
|
||||||
Input,
|
Input,
|
||||||
|
Output,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
|
|
||||||
import { DynTabsDirective } from 'app/dyn-tabs.directive';
|
import { DynTabsDirective } from 'app/dyn-tabs.directive';
|
||||||
|
@ -34,6 +35,7 @@ export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
|
||||||
|
|
||||||
@ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
|
@ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
|
||||||
@ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
|
@ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
|
||||||
|
//@Output() contextEmitter = new EventEmitter();
|
||||||
|
|
||||||
nestedContexts: IContextNode[] | any;
|
nestedContexts: IContextNode[] | any;
|
||||||
|
|
||||||
|
@ -48,6 +50,7 @@ export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
|
||||||
this.nestedContexts = res;
|
this.nestedContexts = res;
|
||||||
//inizializzo il contesto alla radice
|
//inizializzo il contesto alla radice
|
||||||
this.myCtx = this.nestedContexts[0];
|
this.myCtx = this.nestedContexts[0];
|
||||||
|
//this.contextEmitter.emit(this.myCtx);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -41,20 +41,26 @@ export class ListScreenComponent implements OnChanges, OnInit {
|
||||||
|
|
||||||
});
|
});
|
||||||
*/
|
*/
|
||||||
|
//const uid = this.myCtx.id;
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
//console.log('---- UID DA PARENT X REST...' + uid);
|
||||||
|
|
||||||
|
//TODO: qui deve prendere i dati dal rest con l'ID passato dal contesto
|
||||||
|
|
||||||
this.myServiceTable.getHostingNodes().subscribe(res => {
|
this.myServiceTable.getHostingNodes().subscribe(res => {
|
||||||
this.dataSource = res;
|
this.dataSource = res;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnChanges(changes: SimpleChanges): void {
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log('---NELLA ONCHANGES...' + this.myCtx.name);
|
||||||
for (const propName in changes) {
|
for (const propName in changes) {
|
||||||
if (propName === 'myCtx') {
|
if (propName === 'myCtx') {
|
||||||
const param = changes[propName];
|
const param = changes[propName];
|
||||||
this.myCtx = <IContextNode>param.currentValue;
|
this.myCtx = <IContextNode>param.currentValue;
|
||||||
//controllo che l'oggetto non sia vuoto
|
//controllo che l'oggetto non sia vuoto
|
||||||
if (Object.keys(this.myCtx).length !== 0) {
|
if (Object.keys(this.myCtx).length !== 0) {
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.log('+++++++CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
|
|
||||||
//mt qui va passato il parametro myCtx.id al rest
|
//mt qui va passato il parametro myCtx.id al rest
|
||||||
this.myServiceTable.getHostingNodes().subscribe(res => {
|
this.myServiceTable.getHostingNodes().subscribe(res => {
|
||||||
this.dataSource = res;
|
this.dataSource = res;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<jhi-dyn-tabs [myCtx]="currentNodeCtx">
|
<jhi-dyn-tabs [myCtx]="currentNodeCtx">
|
||||||
<jhi-dyn-tab [tabTitle]="'Lista'">
|
<jhi-dyn-tab [tabTitle]="'Lista'" [myCtx]="currentNodeCtx">
|
||||||
<jhi-list-screen (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
|
<jhi-list-screen (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
|
||||||
</jhi-dyn-tab>
|
</jhi-dyn-tab>
|
||||||
</jhi-dyn-tabs>
|
</jhi-dyn-tabs>
|
||||||
|
|
Loading…
Reference in New Issue