Suspectus/gandalf-reborn
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Refactor tab group component to improve content rendering and layout

Browse Source
This commit is contained in:
Christian Werner 2025-11-09 23:24:10 +01:00
parent 4901455c55
commit 44b4e3e05d
4 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/angular/frontend/src/app/components/list/list.component.ts
View File

@ -1,5 +1,4 @@
import {Component, input, TemplateRef} from '@angular/core'; import {Component, input, TemplateRef} from '@angular/core';
import {PanelComponent} from '../panel/panel.component';
import {NgTemplateOutlet} from '@angular/common'; import {NgTemplateOutlet} from '@angular/common';
export interface Identifiable { export interface Identifiable {
@ -9,7 +8,6 @@ export interface Identifiable {
@Component({ @Component({
selector: 'app-list', selector: 'app-list',
imports: [ imports: [
PanelComponent,
NgTemplateOutlet NgTemplateOutlet
], ],
templateUrl: './list.component.html', templateUrl: './list.component.html',

4
src/angular/frontend/src/app/components/tab-group/tab-group.component.html
View File

@ -9,6 +9,4 @@
</button> </button>
} }
</div> </div>
<div class="tab-content"> <div #tabContent class="tab-content"></div>
<ng-content></ng-content>
</div>

3
src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
View File

@ -2,6 +2,9 @@
.tab-content { .tab-content {
margin-top: 1rem; margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
} }
.tabs { .tabs {

28
src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
View File

@ -1,13 +1,4 @@
import { import {AfterViewInit, Component, ContentChildren, ElementRef, EmbeddedViewRef, input, model, OnInit, output, QueryList, ViewChild, ViewContainerRef} from '@angular/core';
AfterViewInit,
Component,
ContentChildren,
input,
model,
OnInit, output,
QueryList,
ViewContainerRef
} from '@angular/core';
import {NgClass} from '@angular/common'; import {NgClass} from '@angular/common';
import {ActiveTabDirective} from './active-tab.directive'; import {ActiveTabDirective} from './active-tab.directive';
import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop'; import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
@ -31,8 +22,10 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
public tabs = input.required<TabGroup[]>(); public tabs = input.required<TabGroup[]>();
public activeTabId = model<string | null>(); public activeTabId = model<string | null>();
public tabChanged = output<TabGroup>(); public tabChanged = output<TabGroup>();
private activeView?: EmbeddedViewRef<any>;
@ContentChildren(ActiveTabDirective) tabTemplates!: QueryList<ActiveTabDirective>; @ContentChildren(ActiveTabDirective) tabTemplates!: QueryList<ActiveTabDirective>;
@ViewChild('tabContent', { static: false }) tabContentElementRef?: ElementRef;
constructor(private vcr: ViewContainerRef) { constructor(private vcr: ViewContainerRef) {
@ -71,13 +64,20 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
if (!this.tabTemplates) return; if (!this.tabTemplates) return;
this.vcr.clear();
const tab = this.tabTemplates.find(t => t.tabId() === this.activeTabId()); const tab = this.tabTemplates.find(t => t.tabId() === this.activeTabId());
if (tab) { if (tab && this.tabContentElementRef) {
if (this.activeView) {
this.activeView.destroy();
this.tabContentElementRef.nativeElement.innerHTML = '';
}
const tabOption = this.tabs().find(x => x.id == id); const tabOption = this.tabs().find(x => x.id == id);
this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption}); this.activeView = this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption});
this.activeView.rootNodes.forEach(x => {
this.tabContentElementRef!.nativeElement.appendChild(x)
});
} }
} }
} }