@pega/dx-component-builder-sdk 25.1.12 → 25.1.14

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/template/default-form/default-form.component.ts

@@ -1,4 +1,4 @@
-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';
@@ -28,10 +28,9 @@ 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 extends FormTemplateBase implements OnInit {
+export class DefaultFormComponent extends FormTemplateBase implements OnInit, OnChanges {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -60,6 +59,14 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit {
     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;
     const kids = this.pConn$.getChildren();

package/tests/assets/sdk-a/components/create/override-sdk/template/details/details.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-narrow-wide/details-narrow-wide.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsNarrowWideComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-one-column/details-one-column.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsOneColumnComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-sub-tabs/details-sub-tabs.component.ts

@@ -9,7 +9,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-sub-tabs',
   templateUrl: './details-sub-tabs.component.html',
   styleUrls: ['./details-sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsSubTabsComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-three-column/details-three-column.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsThreeColumnComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-two-column/details-two-column.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsTwoColumnComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -6,7 +6,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class DetailsWideNarrowComponent extends DetailsTemplateBase {

package/tests/assets/sdk-a/components/create/override-sdk/template/dynamic-tabs/dynamic-tabs.component.ts

@@ -17,7 +17,6 @@ interface DynamicTabsProps {
   selector: 'app-dynamic-tabs',
   templateUrl: './dynamic-tabs.component.html',
   styleUrls: ['./dynamic-tabs.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatTabsModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DynamicTabsComponent implements OnInit, OnDestroy {

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-list/field-group-list.component.scss

@@ -1,5 +1,4 @@
 .psdk-details-fields-label {
-  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-list/field-group-list.component.ts

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-field-group-list',
   templateUrl: './field-group-list.component.html',
   styleUrls: ['./field-group-list.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class FieldGroupListComponent {

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.html

@@ -28,6 +28,6 @@
         </div>
       </div>
     </div>
-    <button *ngIf="allowAdd" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">{{ getAddBtnLabel() }}</button>
+    <button *ngIf="allowAdd()" mat-button color="primary" style="font-size: 16px" (click)="addFieldGroupItem()">{{ getAddBtnLabel() }}</button>
   </ng-template>
 </div>

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.scss

@@ -1,5 +1,6 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .header-div {