From bf03101ce66d2dfe7525c25b823d76572b59efa3 Mon Sep 17 00:00:00 2001
From: Christian Werner <cwer542@gmail.com>
Date: Thu, 30 Oct 2025 13:03:43 +0100
Subject: [PATCH] set tab in query params

---
 .../tab-group/tab-group.component.ts          |  7 ++++--
 .../tenant-detail.component.html              |  2 +-
 .../tenant-detail/tenant-detail.component.ts  | 23 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
index 5806133..050456b 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
@@ -4,7 +4,7 @@ import {
   ContentChildren,
   input,
   model,
-  OnInit,
+  OnInit, output,
   QueryList,
   ViewContainerRef
 } from '@angular/core';
@@ -30,6 +30,7 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
 
   public tabs = input.required<TabGroup[]>();
   public activeTabId = model<string | null>();
+  public tabChanged = output<TabGroup>();
 
   @ContentChildren(ActiveTabDirective) tabTemplates!: QueryList<ActiveTabDirective>;
 
@@ -38,8 +39,10 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
     toObservable(this.activeTabId)
       .pipe(takeUntilDestroyed())
       .subscribe(id => {
-        if (id)
+        if (id) {
           this.renderTab(id);
+          this.tabChanged.emit(this.tabs().find(x => x.id === id)!);
+        }
       })
   }
 
diff --git a/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.html b/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.html
index 2ddfa71..641a1f2 100644
--- a/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.html
+++ b/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.html
@@ -1,4 +1,4 @@
-<app-tab-group [tabs]="tabs">
+<app-tab-group [tabs]="tabs" (tabChanged)="tabChanged($event)" [activeTabId]="activeTabId()">
 
   <ng-template tabId="subjects" let-tab>
     {{tab.name}} - content
diff --git a/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.ts b/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.ts
index 905f256..53b4aa2 100644
--- a/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.ts
+++ b/src/angular/frontend/src/app/components/tenant/tenant-detail/tenant-detail.component.ts
@@ -1,6 +1,7 @@
-import {Component} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {TabGroup, TabGroupComponent} from '../../tab-group/tab-group.component';
 import {ActiveTabDirective} from '../../tab-group/active-tab.directive';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-tenant-detail',
@@ -36,4 +37,24 @@ export class TenantDetailComponent {
     } satisfies TabGroup
   ]
 
+  protected activeTabId = signal<string | null>(null)
+
+  private route = inject(ActivatedRoute);
+  private router = inject(Router)
+
+  constructor() {
+    const tabId = this.route.snapshot.queryParamMap.get('tab');
+    this.activeTabId.set(tabId)
+  }
+
+  async tabChanged(tab: TabGroup) {
+    await this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {
+        tab: tab.id
+      },
+      queryParamsHandling: 'merge',
+      skipLocationChange: false,
+    });
+  }
 }