From a7189b5209332f54865d0f8442c06ce1616ea22d Mon Sep 17 00:00:00 2001
From: Abhishek Negi <108608673+Abhinegi2@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:44:28 +0530
Subject: [PATCH] fix(Admin UI): tab name changes are saved again (#2357)

fixes #2347

---------

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>
---
 .../admin-tabs/admin-tabs.component.html      |  4 +-
 .../admin-tabs/admin-tabs.component.spec.ts   | 18 +++++++
 .../admin-tabs/admin-tabs.component.ts        | 47 ++++++++++++++-----
 3 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
index 8917d70ce5..7ed34b99d1 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.html
@@ -17,7 +17,7 @@
           <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
           @if (tabIndex === matTabGroup.selectedIndex) {
             <app-admin-section-header
-              [(title)]="tab['title'] ?? tab['name']"
+              [(title)]="tab[tabTitleProperty]"
               (remove)="
                 tabs.splice(tabIndex, 1);
                 matTabGroup.selectedIndex = tabIndex - 1
@@ -25,7 +25,7 @@
             ></app-admin-section-header>
           } @else {
             <!-- only current tab can be renamed -->
-            {{ tab["title"] ?? tab["name"] }}
+            {{ tab[tabTitleProperty] }}
           }
         </div>
       </div>
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.spec.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.spec.ts
index 7f26fd0a21..44e926327b 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.spec.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { AdminTabsComponent } from "./admin-tabs.component";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import { SimpleChange } from "@angular/core";
 
 describe("AdminTabsComponent", () => {
   let component: AdminTabsComponent<any>;
@@ -38,4 +39,21 @@ describe("AdminTabsComponent", () => {
 
     expect(component.tabs.length).toBe(3);
   });
+
+  it("should detect whether tab title is 'title' or 'name' property", () => {
+    // default
+    testTabTitleDetection([], "title");
+
+    testTabTitleDetection([{ name: "foo" }], "name");
+    testTabTitleDetection([{ title: "bar" }], "title");
+  });
+
+  function testTabTitleDetection(
+    tabs: any[],
+    expectedTabTitleProperty: string,
+  ) {
+    component.tabs = tabs;
+    component.ngOnChanges({ tabs: new SimpleChange(null, null, null) });
+    expect(component.tabTitleProperty).toBe(expectedTabTitleProperty);
+  }
 });
diff --git a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
index 31ca719e33..56e07a5e1a 100644
--- a/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
+++ b/src/app/core/admin/building-blocks/admin-tabs/admin-tabs.component.ts
@@ -2,6 +2,8 @@ import {
   Component,
   ContentChild,
   Input,
+  OnChanges,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
 } from "@angular/core";
@@ -29,15 +31,15 @@ import {
  * Building block for drag&drop form builder to let an admin user manage multiple tabs.
  *
  * Provide a template for the tab content when using this component:
-   <app-admin-tabs
-     [tabs]="myTabsArray"
-     [newTabFactory]="newTabFactory"
-   >
-     <!-- provide the array of tabs to the `appAdminTabTemplate` to infer typing -->
-     <ng-template [appAdminTabTemplate]="myTabsArray" let-item>
-       {{ item.title }} <!-- use the tab entry in your template -->
-     </ng-template>
-   </app-admin-tabs>
+ <app-admin-tabs
+ [tabs]="myTabsArray"
+ [newTabFactory]="newTabFactory"
+ >
+ <!-- provide the array of tabs to the `appAdminTabTemplate` to infer typing -->
+ <ng-template [appAdminTabTemplate]="myTabsArray" let-item>
+ {{ item.title }} <!-- use the tab entry in your template -->
+ </ng-template>
+ </app-admin-tabs>
  */
 @Component({
   selector: "app-admin-tabs",
@@ -60,17 +62,36 @@ import {
   templateUrl: "./admin-tabs.component.html",
   styleUrl: "./admin-tabs.component.scss",
 })
-export class AdminTabsComponent<
-  E extends { title: string } | { name: string },
-> {
+export class AdminTabsComponent<E extends { title: string } | { name: string }>
+  implements OnChanges
+{
   @Input() tabs: E[];
-  @Input() newTabFactory: () => E = () => ({ title: "" }) as E;
+  @Input() newTabFactory: () => E = () =>
+    ({ [this.tabTitleProperty]: "" }) as E;
+
+  tabTitleProperty: "title" | "name" = "title";
 
   @ContentChild(AdminTabTemplateDirective<E>, { read: TemplateRef })
   tabTemplate: TemplateRef<any>;
 
   @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.tabs) {
+      this.detectTabTitleProperty();
+    }
+  }
+
+  private detectTabTitleProperty() {
+    if (!this.tabs || this.tabs.length < 1) {
+      return;
+    }
+
+    this.tabTitleProperty = this.tabs[0].hasOwnProperty("name")
+      ? "name"
+      : "title";
+  }
+
   createTab() {
     const newTab = this.newTabFactory();
     this.tabs.push(newTab);