@pega/dx-component-builder-sdk 25.1.11 → 25.1.13

package/tests/assets/sdk-a/components/create/override-sdk/template/search-form/search-form.component.html

@@ -0,0 +1,39 @@
+<div class="search-form" style="display: flex; flex-direction: column">
+  <h5>{{ propsToUse.label }}</h5>
+  <div *ngIf="searchCategoriesComp === 'dropdown'">
+    <mat-form-field class="psdk-full-width">
+      <mat-select [value]="currentTabId" (selectionChange)="handleTabClick($event.value)">
+        <mat-option *ngFor="let tab of tabItems" [value]="tab.id">{{ tab.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div *ngIf="searchCategoriesComp === 'radio'">
+    <mat-radio-group [value]="currentTabId">
+      <mat-radio-button *ngFor="let tab of tabItems" [value]="tab.id" (click)="handleTabClick($event)">{{ tab.name }}</mat-radio-button>
+    </mat-radio-group>
+  </div>
+
+  <!-- Tab Content -->
+  <div>
+    <div *ngFor="let tab of tabItems; let index = index">
+      <div *ngIf="tab.id === currentTabId" class="psdk-sub-tabs">
+        <component-mapper
+          *ngIf="tab.content?.getPConnect() as tabPConn"
+          [name]="tabPConn.getComponentName()"
+          [props]="{ pConn$: tabPConn, formGroup$ }"
+        ></component-mapper>
+      </div>
+    </div>
+  </div>
+  <!-- Dialog -->
+  <ng-template #dialogTemplate>
+    <h2 mat-dialog-title>Discard selections?</h2>
+    <mat-dialog-content>
+      <p>When changing search categories, any previous selections will be lost.</p>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-stroked-button type="button" (click)="onDialogClose()">Go back</button>
+      <button mat-raised-button color="primary" (click)="clearSelectionAndSwitchTab()">Discard</button>
+    </mat-dialog-actions>
+  </ng-template>
+</div>

package/tests/assets/sdk-a/components/create/override-sdk/template/search-form/search-form.component.scss

@@ -0,0 +1,11 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+::ng-deep {
+  mat-tab-group {
+    .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list {
+      display: none;
+    }
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/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/tests/assets/sdk-a/components/create/override-sdk/template/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/tests/assets/sdk-a/components/create/override-sdk/template/search-group/persist-utils.ts

@@ -0,0 +1,56 @@
+const SKIP_CACHE_KEY = '';
+
+export function getMappedKey(key) {
+  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+  if (!mappedKey) {
+    return key;
+  }
+  return mappedKey;
+}
+
+const getComponentStateKey = (getPConnect, propertyName: string) => {
+  const pConnect = getPConnect;
+  const caseID = `.${getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect.getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+export const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};

package/tests/assets/sdk-a/components/create/override-sdk/template/search-groups/search-groups.component.html

@@ -0,0 +1,32 @@
+<div class="search-groups-container" fxLayout="column" fxLayoutGap="16px">
+  <!-- Dropdown if multiple groups -->
+  <div *ngIf="groups && groups.length > 1">
+    <mat-form-field appearance="fill" style="width: 100%">
+      <mat-label>Search By</mat-label>
+      <mat-select [value]="activeGroupId" (selectionChange)="onActiveGroupChange($event.value)">
+        <mat-option *ngFor="let group of groups" [value]="group.config.id">
+          {{ group.config.label }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <!-- Search Fields Form -->
+  <div *ngIf="transientItemID">
+    <component-mapper
+      [name]="searchFieldsC11nEnv()?.getPConnect().getComponentName()"
+      [props]="{ pConn$: searchFieldsC11nEnv()?.getPConnect(), formGroup$ }"
+      errorMsg="View Missing (displayAll): {{ searchFieldsC11nEnv()?.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+
+  <!-- Action Buttons -->
+  <div style="display: flex; gap: 8px; margin-bottom: 10px">
+    <button mat-stroked-button type="button" (click)="resetFilterData()">
+      {{ localizedVal('Reset', 'SimpleTable') }}
+    </button>
+    <button mat-raised-button color="primary" type="button" (click)="getFilterData()">
+      {{ localizedVal('Search', 'SimpleTable') }}
+    </button>
+  </div>
+</div>