111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import {
|
|
Component,
|
|
ContentChildren,
|
|
QueryList,
|
|
AfterContentInit,
|
|
ViewChild,
|
|
ViewContainerRef,
|
|
ComponentFactoryResolver,
|
|
ComponentRef,
|
|
ComponentFactory,
|
|
} 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';
|
|
|
|
@Component({
|
|
standalone: true,
|
|
imports: [DynTabsDirective, CommonModule],
|
|
selector: 'jhi-dyn-tabs',
|
|
templateUrl: './dyn-tabs.component.html',
|
|
styleUrls: ['./dyn-tabs.component.scss'],
|
|
providers: [MockCtxloaderService, ResourcesLoaderService],
|
|
})
|
|
export class DynTabsComponent implements AfterContentInit {
|
|
//inizializzazioni
|
|
dynamicTabs: DynTabComponent[] = [];
|
|
|
|
@ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
|
|
//@ViewChild(DynTabsDirective, {read: ViewContainerRef}) tabscontainer:ViewContainerRef;
|
|
@ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
|
|
|
|
constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
|
|
this.tabs = {} as QueryList<DynTabComponent>;
|
|
this.tabscontainer = {} as DynTabsDirective;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
//OPEN TAB
|
|
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]);
|
|
}
|
|
}
|
|
}
|