Dynamic Tabs support added (#101)

* Dynamic tabs support

Author: tumms2021389

angular.json

@@ -131,6 +131,9 @@
           "configurations": {
             "production": {
               "browserTarget": "angular-sdk-components:build:production"
+            },
+            "development": {
+              "browserTarget": "angular-sdk-components:build:development"
             }
           }
         },

…V2/ViewTemplates/InlineDashboard.spec.js …gV2/LandingPages/InlineDashboard.spec.jspackages/angular-sdk-components/tests/e2e/DigV2/ViewTemplates/InlineDashboard.spec.js renamed to packages/angular-sdk-components/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js packages/angular-sdk-components/tests/e2e/DigV2/ViewTemplates/InlineDashboard.spec.js renamed to packages/angular-sdk-components/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js

@@ -0,0 +1,66 @@
+const { test, expect } = require('@playwright/test');
+
+const config = require('../../../config');
+const common = require('../../../common');
+
+test.beforeEach(async ({ page }) => {
+  await page.setViewportSize({ width: 1720, height: 1080 });
+  await page.goto(config.config.baseUrl, { waitUntil: 'networkidle' });
+});
+
+test.describe('E2E test', () => {
+  test('should login, create case and run different test cases for Dynamic Tabs', async ({ page }) => {
+    await common.login(config.config.apps.digv2.user.username, config.config.apps.digv2.user.password, page);
+
+    /** Testing announcement banner presence */
+    const announcementBanner = await page.locator('h2:has-text("Announcements")');
+    await expect(announcementBanner).toBeVisible();
+
+    /** Testing worklist presence */
+    const worklist = page.locator('div[id="worklist"]:has-text("My Worklist")');
+    await expect(worklist).toBeVisible();
+
+    /** Click on the Create Case button */
+    const createCase = page.locator('mat-list-item[id="create-case-button"]');
+    await createCase.click();
+
+    /** Creating a View Templates case-type */
+    const complexFieldsCase = page.locator('mat-list-item[id="case-list-item"] > span:has-text("View Templates")');
+    await complexFieldsCase.click();
+
+    /** Selecting Dynamic Tabs from the Category dropdown */
+    const selectedCategory = page.locator('mat-select[data-test-id="76729937a5eb6b0fd88c42581161facd"]');
+    await selectedCategory.click();
+    await page.locator('mat-option > span:has-text("Dynamic Tabs")').click();
+
+    await page.locator('button:has-text("submit")').click();
+
+    const title = await page.locator('div.template-title-container span:has-text("Dynamic Tabs Template")');
+    await expect(title).toBeVisible();
+
+    const tablist = await page.locator('mat-tab-group[id="dynamic-tabs"] div[role="tablist"]');
+    const tabpanel = await page.locator('mat-tab-group[id="dynamic-tabs"] mat-tab-body[role="tabpanel"]');
+
+    await expect(tabpanel.nth(0).getByText('Make')).toBeVisible();
+    await expect(tabpanel.nth(0).getByText('BMW')).toBeVisible();
+
+    await tablist.locator('div[role="tab"]').nth(1).click();
+    expect(await tabpanel.nth(1).getByText('Make')).toBeVisible();
+    expect(await tabpanel.nth(1).getByText('Audi')).toBeVisible();
+
+    await tablist.locator('div[role="tab"]').nth(2).click();
+    expect(await tabpanel.nth(2).getByText('Make')).toBeVisible();
+    expect(await tabpanel.nth(2).getByText('FIAT')).toBeVisible();
+
+    await tablist.locator('div[role="tab"]').nth(3).click();
+    expect(await tabpanel.nth(3).getByText('Make')).toBeVisible();
+    expect(await tabpanel.nth(3).getByText('Chevrolet')).toBeVisible();
+
+    /** Submitting the case */
+    await page.locator('button:has-text("submit")').click();
+  }, 10000);
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});

packages/angular-sdk-components/tests/e2e/DigV2/ViewTemplates/DynamicTabs.spec.js

@@ -102,6 +102,7 @@ import { MaterialUtilityComponent } from '../../_components/designSystemExtensio
 import { RichTextComponent } from '../../_components/field/rich-text/rich-text.component';
 import { RichTextEditorComponent } from '../../_components/designSystemExtension/rich-text-editor/rich-text-editor.component';
 import { ListViewActionButtonsComponent } from '../../_components/field/list-view-action-buttons/list-view-action-buttons.component';
+import { DynamicTabsComponent } from '../../_components/template/dynamic-tabs/dynamic-tabs.component';
 
 // pegaSdkComponentMap is the JSON object where we'll store the components that are
 // the default implementations provided by the SDK. These will be used if there isn't
@@ -149,6 +150,7 @@ const pegaSdkComponentMap = {
   DetailsThreeColumn: DetailsThreeColumnComponent,
   DetailsTwoColumn: DetailsTwoColumnComponent,
   Dropdown: DropdownComponent,
+  DynamicTabs: DynamicTabsComponent,
   Email: EmailComponent,
   ErrorBoundary: ErrorBoundaryComponent,
   FeedContainer: FeedContainerComponent,

projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

projects/angular-sdk-library/src/lib/_components/template/dynamic-tabs/config-ext.json

@@ -0,0 +1,5 @@
+<mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
+  <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
+    <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>
+  </mat-tab>
+</mat-tab-group>

projects/angular-sdk-library/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.html

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicTabsComponent } from './dynamic-tabs.component';
+
+describe('DynamicTabsComponent', () => {
+  let component: DynamicTabsComponent;
+  let fixture: ComponentFixture<DynamicTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DynamicTabsComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DynamicTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-sdk-library/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.scss

@@ -0,0 +1,78 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatTabsModule } from '@angular/material/tabs';
+import { CommonModule } from '@angular/common';
+import { buildView } from '../../../_helpers/field-group-utils';
+import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+
+interface DynamicTabsProps {
+  referenceList: string;
+  template: string;
+}
+
+@Component({
+  selector: 'app-dynamic-tabs',
+  templateUrl: './dynamic-tabs.component.html',
+  styleUrls: ['./dynamic-tabs.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DynamicTabsComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  tabsItems: Array<any>;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+
+    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
+    const { tablabel } = this.pConn$.getComponentConfig();
+    const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+
+    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('readOnly', true);
+
+    const referenceListData: any = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+
+    this.tabsItems =
+      referenceListData?.map((item, i) => {
+        const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+        return {
+          id: i,
+          name: currentTabLabel,
+          content: buildView(this.pConn$, i, '')
+        };
+      }) || [];
+  }
+}

projects/angular-sdk-library/src/lib/_components/template/dynamic-tabs/dynamic-tabs.component.spec.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
-import { FieldGroupUtils } from '../../../_helpers/field-group-utils';
+import { buildView, getReferenceList } from '../../../_helpers/field-group-utils';
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
@@ -50,8 +50,7 @@ export class FieldGroupTemplateComponent implements OnInit {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils,
-    private fieldGroupUtils: FieldGroupUtils
+    private utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -111,7 +110,7 @@ export class FieldGroupTemplateComponent implements OnInit {
     const lookForChildInConfig = this.configProps$.lookForChildInConfig;
     this.heading = this.configProps$.heading ?? 'Row';
     this.fieldHeader = this.configProps$.fieldHeader;
-    const resolvedList = this.fieldGroupUtils.getReferenceList(this.pConn$);
+    const resolvedList = getReferenceList(this.pConn$);
     this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
     this.pConn$.setReferenceList(resolvedList);
     if (this.readonlyMode) {
@@ -130,7 +129,7 @@ export class FieldGroupTemplateComponent implements OnInit {
         children.push({
           id: index,
           name: this.fieldHeader === 'propertyRef' ? this.getDynamicHeader(item, index) : this.getStaticHeader(this.heading, index),
-          children: this.fieldGroupUtils.buildView(this.pConn$, index, lookForChildInConfig)
+          children: buildView(this.pConn$, index, lookForChildInConfig)
         });
       });
       this.children = children;