Added support for Advance Search feature in DataReference (#326)

* Added Advanced search feature support in DataReference
---------

Co-authored-by: manasa <[email protected]>
Co-authored-by: Siva Rama Krishna <[email protected]>

Author: 3 people

package.json

@@ -75,9 +75,9 @@
     "dayjs": "^1.11.13",
     "downloadjs": "^1.4.7",
     "fast-deep-equal": "^3.1.3",
-    "mat-tel-input": "19.0.5-0",
     "libphonenumber-js": "^1.10.53",
     "lodash.clonedeep": "^4.5.0",
+    "mat-tel-input": "19.0.5-0",
     "ngx-currency": "^19.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.8.1",

packages/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts

@@ -18,7 +18,7 @@ export class ComponentMapperComponent implements OnInit, OnDestroy, OnChanges {
   public componentRef: ComponentRef<any> | undefined;
   public isInitialized = false;
 
-  @Input() name = '';
+  @Input() name?: string = '';
   @Input() props: any;
   @Input() errorMsg = '';
   @Input() outputEvents: any;
@@ -43,7 +43,7 @@ export class ComponentMapperComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   loadComponent() {
-    const component = getComponentFromMap(this.name);
+    const component = getComponentFromMap(this.name || '');
 
     if (this.dynamicComponent) {
       this.dynamicComponent.clear();
@@ -67,7 +67,7 @@ export class ComponentMapperComponent implements OnInit, OnDestroy, OnChanges {
           if (propsValues[i] !== undefined) {
             // We'll set 'displayOnlyFA$' prop only to the components which really need it
             // Eventual plan is to get rid of this particular prop
-            if (propsKeys[i] === 'displayOnlyFA$' && !componentsRequireDisplayOnlyFAProp.includes(this.name)) {
+            if (propsKeys[i] === 'displayOnlyFA$' && !componentsRequireDisplayOnlyFAProp.includes(this.name || '')) {
               // eslint-disable-next-line no-continue
               continue;
             }

packages/angular-sdk-components/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -43,10 +43,12 @@ import { TimeComponent } from '../../_components/field/time/time.component';
 import { UrlComponent } from '../../_components/field/url/url.component';
 import { UserReferenceComponent } from '../../_components/field/user-reference/user-reference.component';
 import { ScalarListComponent } from '../../_components/field/scalar-list/scalar-list.component';
+import { SearchFormComponent } from '../../_components/template/data-reference/search-form/search-form.component';
 import { SelectableCardComponent } from '../../_components/field/selectable-card/selectable-card.component';
 import { RichTextComponent } from '../../_components/field/rich-text/rich-text.component';
 
 // Template components
+import { AdvancedSearchComponent } from '../../_components/template/advanced-search/advanced-search.component';
 import { AppShellComponent } from '../../_components/template/app-shell/app-shell.component';
 import { BannerPageComponent } from '../../_components/template/banner-page/banner-page.component';
 import { CaseSummaryComponent } from '../../_components/template/case-summary/case-summary.component';
@@ -77,6 +79,7 @@ import { OneColumnPageComponent } from '../../_components/template/one-column-pa
 import { OneColumnTabComponent } from '../../_components/template/one-column-tab/one-column-tab.component';
 import { PageComponent } from '../../_components/template/page/page.component';
 import { PromotedFiltersComponent } from '../../_components/template/promoted-filters/promoted-filters.component';
+import { SearchGroupsComponent } from '../../_components/template/advanced-search/search-groups/search-groups.component';
 import { SimpleTableComponent } from '../../_components/template/simple-table/simple-table.component';
 import { SimpleTableManualComponent } from '../../_components/template/simple-table-manual/simple-table-manual.component';
 import { SimpleTableSelectComponent } from '../../_components/template/simple-table-select/simple-table-select.component';
@@ -128,6 +131,7 @@ import { WssQuickCreateComponent } from '../../_components/designSystemExtension
 //  Also, note that "Checkbox" component is named/exported as CheckboxComponent
 
 const pegaSdkComponentMap = {
+  AdvancedSearch: AdvancedSearchComponent,
   ActionButtons: ActionButtonsComponent,
   Alert: AlertComponent,
   AlertBanner: AlertBannerComponent,
@@ -213,6 +217,8 @@ const pegaSdkComponentMap = {
   RichTextEditor: RichTextEditorComponent,
   RootContainer: RootContainerComponent,
   ScalarList: ScalarListComponent,
+  SearchForm: SearchFormComponent,
+  SearchGroups: SearchGroupsComponent,
   SelectableCard: SelectableCardComponent,
   SemanticLink: SemanticLinkComponent,
   SimpleTable: SimpleTableComponent,

packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts

@@ -129,8 +129,10 @@ export class CurrencyComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
-      this.fieldControl.setValue(this.value$);
+    } else {
+      this.value$ = null;
     }
+    this.fieldControl.setValue(this.value$);
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     const currencyISOCode = this.configProps$?.currencyISOCode ?? '';

packages/angular-sdk-components/src/lib/_components/field/text-input/text-input.component.ts

@@ -63,7 +63,6 @@ export class TextInputComponent implements OnInit, OnDestroy {
     // call updateSelf when initializing
     // this.updateSelf();
     this.checkAndUpdate();
-
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
@@ -105,7 +104,6 @@ export class TextInputComponent implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TextInputProps;
-
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }

packages/angular-sdk-components/src/lib/_components/infra/assignment-card/assignment-card.component.html

@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup$" name="flowContainer" class="psdk-flow-container">
-  <div *ngFor="let kid of arChildren$">
+  <div *ngFor="let kid of childrenArray" class="psdk-assignment-card-child">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ formGroup$, pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper

packages/angular-sdk-components/src/lib/_components/infra/assignment-card/assignment-card.component.ts

@@ -1,9 +1,20 @@
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ReferenceComponent } from '../reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 
+function isChildrenUpdated(children) {
+  if (!children || children.firstChange) {
+    return false;
+  }
+  for (let i = 0; i < children.previousValue.length; i++) {
+    if (!PCore.isDeepEqual(children.previousValue[i].getPConnect().getConfigProps(), children.currentValue[i].getPConnect().getConfigProps())) {
+      return true;
+    }
+  }
+  return false;
+}
 @Component({
   selector: 'app-assignment-card',
   templateUrl: './assignment-card.component.html',
@@ -18,18 +29,24 @@ export class AssignmentCardComponent implements OnInit, OnChanges {
   @Input() arChildren$: any[];
   @Input() updateToken$: number;
 
+  childrenArray: any[] = [];
+
   @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
 
   ngOnInit(): void {
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.arChildren$);
+
+    const { arChildren$ } = changes;
+    if (isChildrenUpdated(arChildren$)) {
+      this.childrenArray = ReferenceComponent.normalizePConnArray(this.arChildren$);
+    }
   }
 
   onActionButtonClick(oData: any) {

packages/angular-sdk-components/src/lib/_components/infra/assignment/assignment.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { FormGroup } from '@angular/forms';
@@ -56,6 +56,7 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
   bHasNavigation$ = false;
   bIsVertical$ = false;
+  prevNavigationSteps: any[] = [];
   arCurrentStepIndicies$: number[] = [];
   arNavigationSteps$: any[] = [];
 
@@ -82,7 +83,6 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private ngZone: NgZone,
     private snackBar: MatSnackBar,
     public bannerService: BannerService
   ) {}
@@ -250,17 +250,19 @@ export class AssignmentComponent implements OnInit, OnDestroy, OnChanges {
 
     // iterate through steps to find current one(s)
     // immutable, so we want to change the local copy, so need to make a copy
-    this.ngZone.run(() => {
+
+    if (!PCore.isDeepEqual(this.prevNavigationSteps, oCaseInfo.navigation.steps)) {
       // what comes back now in configObject is the children of the flowContainer
       this.arNavigationSteps$ = JSON.parse(JSON.stringify(oCaseInfo.navigation.steps));
+      this.prevNavigationSteps = JSON.parse(JSON.stringify(oCaseInfo.navigation.steps));
       this.arNavigationSteps$.forEach(step => {
         if (step.name) {
           step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, this.localeReference);
         }
       });
       this.arCurrentStepIndicies$ = [];
       this.arCurrentStepIndicies$ = this.findCurrentIndicies(this.arNavigationSteps$, this.arCurrentStepIndicies$, 0);
-    });
+    }
   }
 
   findCurrentIndicies(arStepperSteps: any[], arIndicies: number[], depth: number): number[] {

packages/angular-sdk-components/src/lib/_components/infra/defer-load/defer-load.component.html

@@ -1,3 +1,7 @@
-<div *ngIf="loadedPConn$">
-  <component-mapper [name]="componentName$" [props]="{ pConn$: loadedPConn$ }" errorMsg="Defer Load Missing: {{ componentName$ }}"></component-mapper>
+<div *ngIf="childComponentPConnect">
+  <component-mapper
+    [name]="childComponentPConnect.getComponentName()"
+    [props]="{ pConn$: childComponentPConnect, formGroup$ }"
+    errorMsg="Defer Load Missing: {{ childComponentPConnect.getComponentName() }}"
+  ></component-mapper>
 </div>

packages/angular-sdk-components/src/lib/_components/infra/defer-load/defer-load.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
@@ -19,11 +19,10 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 })
 export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   @Input() pConn$: typeof PConnect;
-  @Input() loadData$: any;
+  @Input() formGroup$;
   @Input() name;
 
-  componentName$: string;
-  loadedPConn$: any;
+  childComponentPConnect: typeof PConnect;
   bShowDefer$ = false;
 
   angularPConnectData: AngularPConnectData = {};
@@ -45,7 +44,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   ngOnInit(): void {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     // The below call is causing an error while creating/opening a case, hence commenting it out
-    // this.loadActiveTab();
+    this.updateSelf();
   }
 
   ngOnDestroy(): void {
@@ -62,11 +61,17 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     if (theRequestedAssignment !== this.currentLoadedAssignment || (lastUpdateCaseTime && lastUpdateCaseTime !== this.lastUpdateCaseTime)) {
       this.currentLoadedAssignment = theRequestedAssignment;
       this.lastUpdateCaseTime = lastUpdateCaseTime;
-      this.loadActiveTab();
+      this.updateSelf();
     }
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
+    if (!Object.values(changes).every(val => val.firstChange === true)) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
     this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID);
     let containerItemData;
     const targetName = this.pConn$.getTarget();
@@ -119,8 +124,9 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
       };
       const configObject = PCore.createPConnect(config);
       configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-      this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
-      this.componentName$ = this.loadedPConn$.getComponentName();
+
+      this.childComponentPConnect = ReferenceComponent.normalizePConn(configObject.getPConnect());
+
       if (this.deferLoadId) {
         PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
       }