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

import { CommonModule } from '@angular/common';
import {
  Component,
  ContentChildren,
  QueryList,
  AfterContentInit,
  ViewChild,
  ComponentFactoryResolver,
  OnInit,
  OnChanges,
  SimpleChanges,
  Input,
  Output,
} 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, SharedModule],
  selector: 'jhi-dyn-tabs',
  templateUrl: './dyn-tabs.component.html',
  styleUrls: ['./dyn-tabs.component.scss'],
  providers: [MockCtxloaderService, ResourcesLoaderService],
})
export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
  //inizializzazioni
  dynamicTabs: DynTabComponent[] = [];
  @Input() myCtx: IContextNode; //fetching event from parent

  @ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
  @ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
  //@Output() contextEmitter = new EventEmitter();

  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];
      //this.contextEmitter.emit(this.myCtx);
    });
  }

  ngAfterContentInit(): void {
    // get all active tabs
    const activeTabs = this.tabs.filter(tab => tab.active);

    // if there is no active tab set, activate the first
    if (activeTabs.length === 0) {
      this.selectTab(this.tabs.first);
    }
  }

  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);
    // fetch the view container reference from our anchor directive
    const viewContainerRef = this.tabscontainer.viewContainer;
    //istanza del component
    const componentRef = viewContainerRef.createComponent(componentFactory);
    // set the according properties on our component instance
    const instance: DynTabComponent = componentRef.instance;
    instance.tabTitle = title;
    instance.template = template;
    instance.dataContext = data;
    instance.isCloseable = isCloseable;
    // remember the dynamic component for rendering the
    // tab navigation headers
    this.dynamicTabs.push(componentRef.instance);
    // set it active
    this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
  }

  //TODO: ATTENZIONE-->nella direttiva Angular JHipster vuole questo sotto
  //selector: '[jhiDynTabs]'

  //SELECT TAB
  selectTab(tab: DynTabComponent): void {
    // deactivate all tabs
    this.tabs.toArray().forEach(tb => (tb.active = false));
    this.dynamicTabs.forEach(tb => (tb.active = false));

    // activate the tab the user has clicked on.
    tab.active = true;
  }

  // CLOSE TAB
  closeTab(tab: DynTabComponent): void {
    for (let i = 0; i < this.dynamicTabs.length; i++) {
      if (this.dynamicTabs[i] === tab) {
        // remove the tab from our array
        this.dynamicTabs.splice(i, 1);

        // destroy our dynamically created component again
        const viewContainerRef = this.tabscontainer.viewContainer;
        viewContainerRef.remove(i);

        // set tab index to 1st one
        this.selectTab(this.tabs.first);
        break;
      }
    }
  }

  //CLOSE ACTIVE TAB
  closeActiveTab(): void {
    const activeTabs = this.dynamicTabs.filter(tab => tab.active);
    if (activeTabs.length > 0) {
      // close the 1st active tab (should only be one at a time)
      this.closeTab(activeTabs[0]);
    }
  }
}