@pega/angular-sdk-overrides 0.24.9 → 0.25.2

package/lib/template/data-reference/search-form/search-form.component.ts

@@ -0,0 +1,167 @@
+import { Component, forwardRef, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { getFirstVisibleTabId, getActiveTabId, searchtabsClick } from '@pega/angular-sdk-components';
+import { MatRadioModule } from '@angular/material/radio';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule, MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getTabCountSources, getData } from './tabsData';
+import { getFieldMeta } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-search-form',
+  templateUrl: './search-form.component.html',
+  styleUrls: ['./search-form.component.scss'],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatDialogModule,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogTitle,
+    MatButtonModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class SearchFormComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchSelectCacheKey;
+
+  configProps$: any;
+  isInitialized = false;
+
+  currentTabId: string;
+  nextTabId: string;
+  openDialog = false;
+  tabItems: any[] = [];
+  searchCategoriesComp: any;
+  propsToUse: any;
+  tabData: any = [];
+  tabCountSources: any;
+  deferLoadedTabs: any;
+  @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
+  dialogRef: any;
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.isInitialized = true;
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { ...this.pConn$.getInheritedProps() };
+    this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    const cache: any = PCore.getNavigationUtils().getComponentCache(this.searchSelectCacheKey) ?? {};
+    const { selectedCategory } = cache;
+    const firstTabId = getFirstVisibleTabId(this.deferLoadedTabs, selectedCategory);
+    this.currentTabId = getActiveTabId(this.deferLoadedTabs.getPConnect().getChildren(), firstTabId);
+    this.updateSelf();
+  }
+
+  ngOnChanges() {
+    if (this.isInitialized) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.tabCountSources = getTabCountSources(this.deferLoadedTabs);
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    this.initializeSearchCategories();
+  }
+
+  initializeSearchCategories(): void {
+    if (this.tabItems.length >= 3) {
+      this.searchCategoriesComp = 'dropdown';
+    } else if (this.tabItems.length > 1) {
+      this.searchCategoriesComp = 'radio';
+    }
+  }
+
+  handleTabClick(event) {
+    const tabId = event.target.value;
+    const viewName = this.tabData
+      .find((tab: any) => tab.id === this.currentTabId)
+      ?.getPConnect()
+      .getConfigProps().name;
+
+    if (this.checkIfSelectionsExist(this.pConn$)) {
+      event.preventDefault();
+      this.nextTabId = tabId;
+      this.dialogRef = this.dialog.open(this.dialogTemplate, {
+        width: '400px'
+      });
+    } else {
+      // @ts-ignore
+      this.publishEvent({ viewName, tabId });
+      this.currentTabId = tabId;
+      this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+      this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    }
+  }
+
+  clearSelectionAndSwitchTab(): void {
+    const viewName = this.tabItems
+      .find((tab: any) => tab.id === this.currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+
+    this.publishEvent({ clearSelections: true, viewName });
+    searchtabsClick(this.nextTabId, this.tabData, this.currentTabId);
+    this.onDialogClose();
+    this.currentTabId = this.nextTabId;
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+  }
+
+  onDialogClose(): void {
+    this.dialogRef.close();
+  }
+
+  publishEvent({ clearSelections, viewName }) {
+    const payload: any = {};
+
+    if (clearSelections) {
+      payload.clearSelections = clearSelections;
+    }
+
+    if (viewName) {
+      payload.viewName = viewName;
+    }
+
+    PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+  }
+
+  get activeTabPConnect() {
+    const tabData = this.tabItems.find(tab => tab.id === this.currentTabId);
+    return tabData.content?.getPConnect();
+  }
+
+  checkIfSelectionsExist(getPConnect) {
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect.getConfigProps();
+    const isMultiSelectMode = selectionMode === MULTI;
+
+    const dataRelationshipContext = contextClass && name ? name : null;
+
+    const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+
+    let selectionsExist = false;
+    if (isMultiSelectMode) {
+      selectionsExist = readonlyContextList?.length > 0;
+    } else if (contextPage) {
+      selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;
+    }
+    return selectionsExist;
+  }
+}

package/lib/template/data-reference/search-form/tabsData.ts

@@ -0,0 +1,160 @@
+import { getTabLabel } from '@pega/angular-sdk-components';
+
+export function getTabCountSources(deferLoadedTabs) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.reduce(
+    (prev, tab, index) => {
+      const config = tab.getPConnect().getConfigProps();
+      const { value: showTabCount } = config.inheritedProps?.find(item => item.prop === 'showTabCount') || {};
+      const { value } = config.inheritedProps?.find(item => item.prop === 'count') || {};
+      const tabCountSource = config.inheritedProps?.find(item => item.prop === 'tabCount');
+      const name = getTabLabel(tab.getPConnect());
+      const tabId = `${viewName}-${config.name || name}-${index}`;
+      if (showTabCount) {
+        if (tabCountSource?.value?.fields?.count) {
+          const isPrefixedByDot = tabCountSource.value.fields.count.substring(0, 1) === '.';
+          return {
+            ...prev,
+            dataPageSources: [
+              ...prev.dataPageSources,
+              {
+                dataPageName: tabCountSource.value.source,
+                tabId,
+                tabCountProp: isPrefixedByDot ? tabCountSource.value.fields.count.substring(1) : tabCountSource.value.fields.count,
+                dataViewParameters: tabCountSource.value?.parameters || {}
+              }
+            ]
+          };
+        }
+        if (Number.isInteger(value) && value % 1 === 0) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                count: value,
+                context: tab.getPConnect().getContextName(),
+                tabId
+              }
+            ]
+          };
+        }
+        if (value?.isDeferred) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                propertyName: value.propertyName,
+                context: 'content',
+                tabId
+              }
+            ]
+          };
+        }
+      }
+      return prev;
+    },
+    {
+      dataPageSources: [],
+      calculatedFields: []
+    }
+  );
+}
+
+function tabContent(id, index, overideTabContent, tab, data, currentTabId, template) {
+  if (id === currentTabId || template === 'HierarchicalForm') {
+    if (overideTabContent) {
+      return tab.getPConnect().getComponent();
+    }
+    if (data[index]?.content) {
+      return data[index]?.content;
+    }
+    return tab.getPConnect().getComponent();
+  }
+  if (template !== 'HierarchicalForm') {
+    return overideTabContent ? null : data[index]?.content;
+  }
+}
+
+function getTabsData(deferLoadedTabs, countMetadata, currentTabId, data) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.map((tab, index) => {
+    const config = tab.getPConnect().getConfigProps();
+    const name = getTabLabel(tab.getPConnect());
+    const tabId = `${viewName}-${config.name || name}-${index}`;
+    const count = countMetadata.find(item => item.tabId === tabId)?.count;
+
+    return {
+      name,
+      id: tabId,
+      getPConnect: tab.getPConnect,
+      content: tabContent(tabId, index, '', tab, data, currentTabId, ''),
+      loaded: tabId === currentTabId || Boolean(data[index]?.content),
+      visibility: () => {
+        const tabConfig = tab.getPConnect().getConfigProps();
+        const isVisible = !('visibility' in tabConfig) || tabConfig.visibility === true;
+        if (!isVisible) {
+          tab.getPConnect().removeNode();
+        }
+        return isVisible;
+      },
+      count
+    };
+  });
+}
+
+export function getData(deferLoadedTabs, tabCountSources, currentTabId, data) {
+  let countMetadata;
+  let tabData;
+  const pConn = deferLoadedTabs.getPConnect();
+  const { dataPageSources, calculatedFields } = tabCountSources;
+  const calculatedFieldsWithoutValue = calculatedFields.filter(item => item.propertyName);
+  if (dataPageSources.length) {
+    Promise.all(dataPageSources.map(item => PCore.getDataPageUtils().getPageDataAsync(item.dataPageName, '', item.dataViewParameters)))
+      .then(res => {
+        const temp = res.map((r, index) => ({
+          ...dataPageSources[index],
+          count: r[dataPageSources[index].tabCountProp]
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else if (calculatedFieldsWithoutValue.length) {
+    PCore.getViewRuleApi()
+      // @ts-ignore
+      .getCalculatedFields(
+        pConn.getCaseInfo().getKey(),
+        pConn.getCurrentView(),
+        calculatedFieldsWithoutValue.map(({ propertyName, context }) => ({
+          name: propertyName,
+          context
+        }))
+      )
+      .then(res => {
+        const values = (res?.data as any)?.caseInfo?.content || {};
+        const temp = calculatedFields.map(field => ({
+          ...field,
+          count: values[field.propertyName?.substring(1)] || field.count
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else {
+    countMetadata = calculatedFields.map(field => ({
+      ...field,
+      count: field.count
+    }));
+    tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+  }
+
+  return tabData;
+}

package/lib/template/data-reference/utils.ts

@@ -0,0 +1,92 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect;
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect, dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect.getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

package/lib/template/default-form/default-form.component.html

@@ -1,7 +1,3 @@
-<!-- When adding a component here, add the same component in 'region' template as well -->
-<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
-  <div class="template-title-container">{{ label }}</div>
-</div>
 <div *ngIf="instructions" class="psdk-default-form-instruction-text">
   <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>

package/lib/template/default-form/default-form.component.ts

@@ -1,14 +1,26 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
+
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews?.length !== newViews?.length) {
+    return true;
+  }
+
+  return !oldViews?.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
 
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  template: string;
   instructions: string;
 }
 
@@ -16,40 +28,48 @@ interface DefaultFormProps {
   selector: 'app-default-form',
   templateUrl: './default-form.component.html',
   styleUrls: ['./default-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
-  @Input() pConn$: typeof PConnect;
+export class DefaultFormComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
+  // Used with AngularPConnect
+  override angularPConnectData: AngularPConnectData = {};
+
   arChildren$: any[];
   divClass$: string;
-  template: any;
-  showLabel: any;
-  label: any;
   instructions: string;
 
-  NO_HEADER_TEMPLATES = [
-    'SubTabs',
-    'SimpleTable',
-    'Details',
-    'DetailsTwoColumn',
-    'DetailsThreeColumn',
-    'NarrowWideDetails',
-    'WideNarrowDetails',
-    'Confirmation'
-  ];
-
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {
+    super();
+  }
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes) {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && !PCore.isDeepEqual(pConn$.previousValue.getConfigProps(), pConn$.currentValue.getConfigProps())) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
-    this.template = configProps?.template;
-    const propToUse: any = { ...this.pConn$.getInheritedProps() };
-    this.showLabel = propToUse?.showLabel;
-    this.label = propToUse?.label;
-    const kids = this.pConn$.getChildren() as any[];
+    const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
@@ -71,6 +91,10 @@ export class DefaultFormComponent implements OnInit {
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    if (areViewsChanged(this.arChildren$, children)) {
+      this.arChildren$ = children;
+    }
   }
 }

package/lib/template/default-page/default-page.component.html

@@ -0,0 +1,34 @@
+<div *ngIf="enableBanner$; else nonBannerMode">
+  <component-mapper
+    name="Banner"
+    [props]="{
+      configProps$,
+      arChildren$,
+      title: heading,
+      message,
+      backgroundImage,
+      layout$
+    }"
+  ></component-mapper>
+</div>
+
+<ng-template #nonBannerMode>
+  <div>
+    <h1 *ngIf="title">{{ title }}</h1>
+    <p *ngIf="heading">{{ heading }}</p>
+    <div
+      [ngClass]="{
+        'psdk-grid-filter-1': this.layout$ === 'one-column',
+        'psdk-grid-filter-2': this.layout$ === 'two-column',
+        'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
+        'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
+      }"
+    >
+      <component-mapper
+        *ngFor="let child of arChildren$"
+        [name]="child.getPConnect().getComponentName()"
+        [props]="{ pConn$: child.getPConnect() }"
+      ></component-mapper>
+    </div>
+  </div>
+</ng-template>

package/lib/template/default-page/default-page.component.scss

@@ -0,0 +1,31 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-wide-narrow {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-narrow-wide {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/lib/template/default-page/default-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DefaultPageComponent } from './default-page.component';
+
+describe('DefaultPageComponent', () => {
+  let component: DefaultPageComponent;
+  let fixture: ComponentFixture<DefaultPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DefaultPageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DefaultPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});