fix: Details template fields are not getting re-render on save for… (#…

…257) * fix: Details template fields are not getting re-rendering on save for later * removed unnecessary code in case view
pegasystems · Dec 17, 2024 · 77a51a7 · 77a51a7
1 parent fd126d5
commit 77a51a7
Show file tree

Hide file tree

Showing 21 changed files with 135 additions and 320 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "@angular/platform-browser-dynamic": "^18.2.12",
     "@angular/router": "^18.2.12",
     "@danielmoncada/angular-datetime-picker": "^18.1.0",
-    "@pega/auth": "~0.2.19",
+    "@pega/auth": "~0.2.21",
     "@tinymce/tinymce-angular": "^8.0.1",
     "core-js": "^3.39.0",
     "dayjs": "^1.11.13",

diff --git a/...ges/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts b/...ges/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts
@@ -3,21 +3,14 @@ import { CommonModule } from '@angular/common';
 import { getComponentFromMap } from '../helpers/sdk_component_map';
 import { ErrorBoundaryComponent } from '../../_components/infra/error-boundary/error-boundary.component';
 
-const componentsRequireDisplayOnlyFAProp: string[] = [
-  'HybridViewContainer',
-  'ModalViewContainer',
-  'ViewContainer',
-  'RootContainer',
-  'View',
-  'CaseView'
-];
+const componentsRequireDisplayOnlyFAProp: string[] = ['HybridViewContainer', 'ModalViewContainer', 'ViewContainer', 'RootContainer', 'View'];
 
 @Component({
   selector: 'component-mapper',
   templateUrl: './component-mapper.component.html',
   styleUrls: ['./component-mapper.component.scss'],
   standalone: true,
-  imports: [CommonModule, ErrorBoundaryComponent]
+  imports: [CommonModule]
 })
 export class ComponentMapperComponent implements OnInit, OnDestroy, OnChanges {
   @ViewChild('dynamicComponent', { read: ViewContainerRef, static: true })

diff --git a/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts b/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts
@@ -0,0 +1,67 @@
+import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
+
+@Directive()
+export class DetailsTemplateBase implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  // For interaction with AngularPConnect
+  protected angularPConnectData: AngularPConnectData = {};
+  protected angularPConnect;
+
+  childrenMetadataOld;
+
+  constructor(injector: Injector) {
+    this.angularPConnect = injector.get(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.hasRawMetadataChanged()) {
+      this.updateSelf();
+    }
+  }
+
+  // this method will get overriden by the child component
+  updateSelf() {}
+
+  hasRawMetadataChanged(): boolean {
+    const newChildrenMetadata = this.fetchChildrenMetadata();
+
+    if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) {
+      this.childrenMetadataOld = newChildrenMetadata;
+      return true;
+    }
+
+    return false;
+  }
+
+  fetchChildrenMetadata() {
+    const children = this.pConn$.getChildren() || [];
+
+    return children.map(child => {
+      const pConnect = child.getPConnect();
+      return pConnect.resolveConfigProps(pConnect.getRawMetadata());
+    });
+  }
+}
diff --git a/...late-base/form-template-base.component.ts → ...nents/template/base/form-template-base.ts b/...late-base/form-template-base.component.ts → ...nents/template/base/form-template-base.ts
@@ -1,7 +1,7 @@
 import { Directive, OnDestroy } from '@angular/core';
 
 @Directive()
-export class FormTemplateBaseComponent implements OnDestroy {
+export class FormTemplateBase implements OnDestroy {
   pConn$: any;
 
   ngOnDestroy(): void {

diff --git a/...es/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html b/...es/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html
@@ -1,5 +1,5 @@
 <div class="psdk-case-view" id="case-view">
-  <div *ngIf="!displayOnlyFA$" class="psdk-case-view-info">
+  <div class="psdk-case-view-info">
     <mat-toolbar color="primary" class="psdk-case-view-toolbar">
       <mat-toolbar-row style="padding-left: 1rem">
         <div class="psdk-case-icon-div">
@@ -47,7 +47,7 @@ <h1 id="case-name">{{ heading$ }}</h1>
     ></component-mapper>
   </div>
   <div class="psdk-case-view-main">
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <div *ngFor="let kid of arChildren$">
         <div
           *ngIf="
@@ -73,11 +73,11 @@ <h1 id="case-name">{{ heading$ }}</h1>
       </div>
     </div>
 
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
     </div>
   </div>
-  <div *ngIf="!displayOnlyFA$">
+  <div>
     <div *ngIf="arChildren$" class="psdk-case-view-utilities">
       <div *ngFor="let kid of arChildren$">
         <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">

diff --git a/...ages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.ts b/...ages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.ts
@@ -27,7 +27,6 @@ interface CaseViewProps {
 export class CaseViewComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() displayOnlyFA$: boolean;
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -161,19 +160,15 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     this.svgCase$ = this.utils.getImageSrc(this.configProps$.icon, this.utils.getSDKStaticContentUrl());
 
-    // this.utils.consoleKidDump(this.pConn$);
-
-    if (!this.displayOnlyFA$) {
-      for (const kid of this.arChildren$) {
-        const kidPConn = kid.getPConnect();
-        if (kidPConn.getRawMetadata().name == 'Tabs') {
-          this.mainTabs = kid;
-          this.mainTabData = this.mainTabs.getPConnect().getChildren();
-        }
+    for (const kid of this.arChildren$) {
+      const kidPConn = kid.getPConnect();
+      if (kidPConn.getRawMetadata().name == 'Tabs') {
+        this.mainTabs = kid;
+        this.mainTabData = this.mainTabs.getPConnect().getChildren();
       }
-
-      this.generateTabsData();
     }
+
+    this.generateTabsData();
   }
 
   generateTabsData() {

diff --git a/...ngular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts b/...ngular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts
@@ -4,7 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { TemplateUtils } from '../../../_helpers/template-utils';
-import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
+import { FormTemplateBase } from '../base/form-template-base';
 
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
@@ -19,7 +19,7 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent extends FormTemplateBaseComponent implements OnInit {
+export class DefaultFormComponent extends FormTemplateBase implements OnInit {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 

diff --git a/...ponents/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts b/...ponents/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { DetailsTemplateBase } from '../base/details-template-base';
 
 @Component({
   selector: 'app-details-narrow-wide',
@@ -9,48 +9,15 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class DetailsNarrowWideComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   arFields$: any[] = [];
   arFields2$: any[] = [];
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

diff --git a/...omponents/src/lib/_components/template/details-one-column/details-one-column.component.ts b/...omponents/src/lib/_components/template/details-one-column/details-one-column.component.ts
@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
-import { FormGroup } from '@angular/forms';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { DetailsTemplateBase } from '../base/details-template-base';
 
 @Component({
   selector: 'app-details-one-column',
@@ -10,49 +9,15 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
   showHighlightedData: boolean;
   highlightedDataArr: any;
 
   arFields$: any[] = [];
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

diff --git a/...-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html b/...-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html
@@ -5,8 +5,7 @@
         *ngIf="tab.content?.getPConnect()"
         [name]="tab.content?.getPConnect().getComponentName()"
         [props]="{
-          pConn$: tab.content?.getPConnect(),
-          formGroup$: formGroup$
+          pConn$: tab.content?.getPConnect()
         }"
         errorMsg="Details Sub tabs wants component not yet available: {{ tab.content?.getPConnect().getComponentName() }}"
       ></component-mapper>