fix: (Platform) provide programmatic tab selection for Dynamic Page (#…

…4569) * fix: (Platform) provide programmatic tab selection for Dynamic Page * remove unused imports * add usage note in documentation [ci skip] * address review comments
SAP · Feb 4, 2021 · d2d7edd · d2d7edd
1 parent 3fddc26
commit d2d7edd
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 14 deletions.
diff --git a/...p/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.html b/...p/platform/component-docs/platform-dynamic-page/platform-dynamic-page-docs.component.html
@@ -27,7 +27,8 @@
     Tabbed Dynamic Page
 </fd-docs-section-title>
 <description> Specify the <code>[tabLabel]</code> option to internally set up tabbed content for the page. 
-    Use <code>(tabChange)</code> property to do something on tab change.</description>
+    Use <code>(tabChange)</code> property to do something on tab change. 
+    To programmatically switch/set the dynamic page tab, call <code>setSelectedTab(id)</code> on the <code>DynamicPageComponent</code> and pass in the id of the tab to switch/set to.</description>
 <component-example>
     <fdp-platform-dynamic-page-tabbed-example></fdp-platform-dynamic-page-tabbed-example>
 </component-example>

diff --git a/...c-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.html b/...c-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.html
@@ -228,6 +228,13 @@
                     debitis. Similique vel ipsam debitis fuga sequi eveniet perspiciatis?
                     <br />
                     <br />
+                    <button
+                        fd-button
+                        (click)="switchTab('tab_1')"
+                        title="Switch to tab 1"
+                        label="Switch to Tab 1"
+                    ></button>
+                    <br />
                     <br />
                     Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat veniam libero nostrum explicabo
                     sed odit? Recusandae praesentium voluptatum cum omnis, placeat beatae quasi eum odio doloribus

diff --git a/...mic-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.ts b/...mic-page/platform-dynamic-page-examples/platform-dynamic-page-tabbed-example.component.ts
@@ -1,5 +1,9 @@
 import { Component, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
-import { DynamicPageCollapseChangeEvent, DynamicPageTabChangeEvent } from '@fundamental-ngx/platform';
+import {
+    DynamicPageCollapseChangeEvent,
+    DynamicPageComponent,
+    DynamicPageTabChangeEvent
+} from '@fundamental-ngx/platform';
 
 @Component({
     selector: 'fdp-platform-dynamic-page-tabbed-example',
@@ -11,6 +15,9 @@ export class PlatformDynamicPageTabbedExampleComponent {
     @ViewChild('overlay')
     overlay: ElementRef<HTMLElement>;
 
+    @ViewChild(DynamicPageComponent)
+    dynamicPageComponent: DynamicPageComponent;
+
     fullscreen = false;
 
     pageTitle = 'Balenciaga Tripple S Trainers';
@@ -34,4 +41,8 @@ export class PlatformDynamicPageTabbedExampleComponent {
     onTabChanged(event: DynamicPageTabChangeEvent): void {
         console.log('tab changed to ' + event.payload.id);
     }
+
+    switchTab(id: string): void {
+        this.dynamicPageComponent.setSelectedTab(id);
+    }
 }
diff --git a/...rm/src/lib/components/dynamic-page/dynamic-page-content/dynamic-page-content.component.ts b/...rm/src/lib/components/dynamic-page/dynamic-page-content/dynamic-page-content.component.ts
@@ -34,6 +34,12 @@ export class DynamicPageContentComponent implements OnInit {
     @Input()
     tabLabel: string;
 
+    /**
+     * a unique identifier for this content
+     */
+    @Input()
+    id: string;
+
     /**
      * sets background for content to `list`, `transparent`, or `solid` background color.
      * Default is `solid`.

diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.html b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.html
@@ -9,9 +9,9 @@
     </header>
 
     <div class="fd-dynamic-page__tabs--overflow" *ngIf="isTabbed" #contentContainer>
-        <fd-tab-list (selectedTabChange)="_handleTabChange($event)">
+        <fd-tab-list (selectedTabChange)="_handleTabChange($event)" #dynamicPageTabs>
             <ng-container *ngFor="let tab of tabs; let i = index">
-                <fd-tab [title]="tab.tabLabel">
+                <fd-tab [title]="tab.tabLabel" [id]="tab.id">
                     <fdp-dynamic-page-tabbed-content
                         [background]="background"
                         [size]="size"

diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.spec.ts b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.spec.ts
@@ -1,4 +1,3 @@
-import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { Component, ViewChild } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
@@ -63,7 +62,7 @@ describe('DynamicPageComponent default values', () => {
     beforeEach(async(() => {
         const scrollableSpy = jasmine.createSpyObj('DynamicPageService', ['expandHeader', 'collapseHeader']);
         TestBed.configureTestingModule({
-            imports: [CommonModule, PlatformDynamicPageModule, ToolbarModule, ScrollingModule],
+            imports: [CommonModule, PlatformDynamicPageModule, ToolbarModule],
             declarations: [TestComponent],
             providers: [{ provide: DynamicPageService, useValue: scrollableSpy }]
         }).compileComponents();
@@ -192,8 +191,12 @@ describe('DynamicPageComponent default values', () => {
     template: `<fdp-dynamic-page [size]="size" [background]="background">
         <fdp-dynamic-page-title></fdp-dynamic-page-title>
         <fdp-dynamic-page-header></fdp-dynamic-page-header>
-        <fdp-dynamic-page-content [tabLabel]="tabLabel1">DynamicPage Content Tabbed 1 Text</fdp-dynamic-page-content>
-        <fdp-dynamic-page-content [tabLabel]="tabLabel2">DynamicPage Content Tabbed 2 Text</fdp-dynamic-page-content>
+        <fdp-dynamic-page-content id="tab1" [tabLabel]="tabLabel1"
+            >DynamicPage Content Tabbed 1 Text</fdp-dynamic-page-content
+        >
+        <fdp-dynamic-page-content id="tab2" [tabLabel]="tabLabel2"
+            >DynamicPage Content Tabbed 2 Text</fdp-dynamic-page-content
+        >
     </fdp-dynamic-page>`
 })
 class TestTabbedComponent {
@@ -210,7 +213,7 @@ describe('DynamicPageComponent tabbed values', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [CommonModule, PlatformDynamicPageModule, TabsModule, ScrollingModule],
+            imports: [CommonModule, PlatformDynamicPageModule, TabsModule],
             declarations: [TestTabbedComponent],
             providers: [{ provide: DynamicPageService }]
         }).compileComponents();
@@ -238,14 +241,19 @@ describe('DynamicPageComponent tabbed values', () => {
         const tabsContainer = fixture.debugElement.query(By.css('.fd-tabs'));
         expect(tabsContainer.nativeElement.classList.contains(CLASS_NAME.dynamicPageTabsMedium)).toBeTruthy();
     });
+
+    it('should switch tabs', async () => {
+        dynamicPageComponent.setSelectedTab('tab2');
+        fixture.detectChanges();
+        const tab2: HTMLElement = fixture.debugElement.query(By.css('#tab2')).nativeElement;
+        expect(tab2.getAttribute('aria-expanded')).toBe('true');
+    });
 });
 
 @Component({
     template: `<fdp-dynamic-page [size]="size" [background]="background">
         <fdp-dynamic-page-title></fdp-dynamic-page-title>
-        <fdp-dynamic-page-header
-            [collapsible]="false"
-            [pinnable]="false"></fdp-dynamic-page-header>
+        <fdp-dynamic-page-header [collapsible]="false" [pinnable]="false"></fdp-dynamic-page-header>
         <fdp-dynamic-page-content>DynamicPage Content</fdp-dynamic-page-content>
     </fdp-dynamic-page>`
 })
@@ -261,7 +269,7 @@ describe('DynamicPageComponent with collapsible set to false', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [CommonModule, PlatformDynamicPageModule, TabsModule, ScrollingModule],
+            imports: [CommonModule, PlatformDynamicPageModule, TabsModule],
             declarations: [TestNonCollapsibleComponent],
             providers: [{ provide: DynamicPageService }]
         }).compileComponents();
@@ -292,5 +300,4 @@ describe('DynamicPageComponent with collapsible set to false', () => {
             .nativeElement;
         expect(contentEl.getAttribute('aria-hidden')).toBe('false');
     });
-
 });
diff --git a/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.ts b/libs/platform/src/lib/components/dynamic-page/dynamic-page.component.ts
@@ -89,6 +89,9 @@ export class DynamicPageComponent extends BaseComponent implements AfterContentI
     @ViewChildren(DynamicPageTabbedContentComponent)
     tabContents: QueryList<DynamicPageTabbedContentComponent>;
 
+    @ViewChildren(TabPanelComponent)
+    dynamicPageTabs: QueryList<TabPanelComponent>;
+
     /**
      * @hidden
      * reference to header container
@@ -214,6 +217,21 @@ export class DynamicPageComponent extends BaseComponent implements AfterContentI
         }
     }
 
+    /**
+     * marks the dynamic page tab as selected when the id of the tab is passed
+     */
+    setSelectedTab(id: string): void {
+        if (!(id && this.dynamicPageTabs)) {
+            return;
+        }
+
+        this.dynamicPageTabs.forEach((element) => {
+            if (element.id === id) {
+                element.open(true);
+            }
+        });
+    }
+
     /**
      * get reference to this element
      */