Skip to content

Commit 7bb2763

Browse files
tumms2021389tumms2021389
committed
fix: Details template fields are not getting re-rendering on save for later
1 parent fd126d5 commit 7bb2763

File tree

18 files changed

+122
-295
lines changed

18 files changed

+122
-295
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
"@angular/platform-browser-dynamic": "^18.2.12",
6969
"@angular/router": "^18.2.12",
7070
"@danielmoncada/angular-datetime-picker": "^18.1.0",
71-
"@pega/auth": "~0.2.19",
71+
"@pega/auth": "~0.2.21",
7272
"@tinymce/tinymce-angular": "^8.0.1",
7373
"core-js": "^3.39.0",
7474
"dayjs": "^1.11.13",

‎packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
2+
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
3+
4+
@Directive()
5+
export class DetailsTemplateBase implements OnInit, OnDestroy {
6+
@Input() pConn$: typeof PConnect;
7+
8+
// For interaction with AngularPConnect
9+
protected angularPConnectData: AngularPConnectData = {};
10+
protected angularPConnect;
11+
12+
childrenMetadataOld;
13+
14+
constructor(injector: Injector) {
15+
this.angularPConnect = injector.get(AngularPConnectService);
16+
}
17+
18+
ngOnInit(): void {
19+
// First thing in initialization is registering and subscribing to the AngularPConnect service
20+
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
21+
22+
this.checkAndUpdate();
23+
}
24+
25+
ngOnDestroy() {
26+
if (this.angularPConnectData.unsubscribeFn) {
27+
this.angularPConnectData.unsubscribeFn();
28+
}
29+
}
30+
31+
onStateChange() {
32+
this.checkAndUpdate();
33+
}
34+
35+
checkAndUpdate() {
36+
// Should always check the bridge to see if the component should update itself (re-render)
37+
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
38+
39+
// Only call updateSelf when the component should update
40+
if (bUpdateSelf || this.hasRawMetadataChanged()) {
41+
this.updateSelf();
42+
}
43+
}
44+
45+
// this method will get overriden by the child component
46+
updateSelf() {}
47+
48+
hasRawMetadataChanged(): boolean {
49+
const newChildrenMetadata = this.fetchChildrenMetadata();
50+
51+
if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) {
52+
this.childrenMetadataOld = newChildrenMetadata;
53+
return true;
54+
}
55+
56+
return false;
57+
}
58+
59+
fetchChildrenMetadata() {
60+
const children = this.pConn$.getChildren() || [];
61+
62+
return children.map(child => {
63+
const pConnect = child.getPConnect();
64+
return pConnect.resolveConfigProps(pConnect.getRawMetadata());
65+
});
66+
}
67+
}

packages/angular-sdk-components/src/lib/_components/template/form-template-base/form-template-base.component.ts renamed to packages/angular-sdk-components/src/lib/_components/template/base/form-template-base.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Directive, OnDestroy } from '@angular/core';
22

33
@Directive()
4-
export class FormTemplateBaseComponent implements OnDestroy {
4+
export class FormTemplateBase implements OnDestroy {
55
pConn$: any;
66

77
ngOnDestroy(): void {

‎packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormGroup } from '@angular/forms';
44
import { ReferenceComponent } from '../../infra/reference/reference.component';
55
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
66
import { TemplateUtils } from '../../../_helpers/template-utils';
7-
import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
7+
import { FormTemplateBase } from '../base/form-template-base';
88

99
interface DefaultFormProps {
1010
// If any, enter additional props that only exist on this component
@@ -19,7 +19,7 @@ interface DefaultFormProps {
1919
standalone: true,
2020
imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
2121
})
22-
export class DefaultFormComponent extends FormTemplateBaseComponent implements OnInit {
22+
export class DefaultFormComponent extends FormTemplateBase implements OnInit {
2323
@Input() override pConn$: typeof PConnect;
2424
@Input() formGroup$: FormGroup;
2525

‎packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts‎

Lines changed: 5 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
2-
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
1+
import { Component, forwardRef } from '@angular/core';
32
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
3+
import { DetailsTemplateBase } from '../base/details-template-base';
44

55
@Component({
66
selector: 'app-details-narrow-wide',
@@ -9,48 +9,15 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
99
standalone: true,
1010
imports: [forwardRef(() => ComponentMapperComponent)]
1111
})
12-
export class DetailsNarrowWideComponent implements OnInit, OnDestroy {
13-
constructor(private angularPConnect: AngularPConnectService) {}
14-
15-
@Input() pConn$: typeof PConnect;
12+
export class DetailsNarrowWideComponent extends DetailsTemplateBase {
13+
override pConn$: typeof PConnect;
1614

1715
arFields$: any[] = [];
1816
arFields2$: any[] = [];
1917
highlightedDataArr: any[] = [];
2018
showHighlightedData: boolean;
21-
// Used with AngularPConnect
22-
angularPConnectData: AngularPConnectData = {};
23-
24-
ngOnInit(): void {
25-
// First thing in initialization is registering and subscribing to the AngularPConnect service
26-
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
27-
28-
// this.updateSelf();
29-
this.checkAndUpdate();
30-
}
31-
32-
ngOnDestroy() {
33-
if (this.angularPConnectData.unsubscribeFn) {
34-
this.angularPConnectData.unsubscribeFn();
35-
}
36-
}
37-
38-
onStateChange() {
39-
this.checkAndUpdate();
40-
}
41-
42-
checkAndUpdate() {
43-
// Should always check the bridge to see if the component should
44-
// update itself (re-render)
45-
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
46-
47-
// ONLY call updateSelf when the component should update
48-
if (bUpdateSelf) {
49-
this.updateSelf();
50-
}
51-
}
5219

53-
updateSelf() {
20+
override updateSelf() {
5421
const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
5522
this.showHighlightedData = rawMetaData?.showHighlightedData;
5623

‎packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts‎

Lines changed: 5 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
2-
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
3-
import { FormGroup } from '@angular/forms';
1+
import { Component, forwardRef } from '@angular/core';
42
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
3+
import { DetailsTemplateBase } from '../base/details-template-base';
54

65
@Component({
76
selector: 'app-details-one-column',
@@ -10,49 +9,15 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
109
standalone: true,
1110
imports: [forwardRef(() => ComponentMapperComponent)]
1211
})
13-
export class DetailsOneColumnComponent implements OnInit, OnDestroy {
14-
constructor(private angularPConnect: AngularPConnectService) {}
12+
export class DetailsOneColumnComponent extends DetailsTemplateBase {
13+
override pConn$: typeof PConnect;
1514

16-
@Input() pConn$: typeof PConnect;
17-
@Input() formGroup$: FormGroup;
1815
showHighlightedData: boolean;
1916
highlightedDataArr: any;
2017

2118
arFields$: any[] = [];
2219

23-
// Used with AngularPConnect
24-
angularPConnectData: AngularPConnectData = {};
25-
26-
ngOnInit(): void {
27-
// First thing in initialization is registering and subscribing to the AngularPConnect service
28-
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
29-
30-
// this.updateSelf();
31-
this.checkAndUpdate();
32-
}
33-
34-
ngOnDestroy() {
35-
if (this.angularPConnectData.unsubscribeFn) {
36-
this.angularPConnectData.unsubscribeFn();
37-
}
38-
}
39-
40-
onStateChange() {
41-
this.checkAndUpdate();
42-
}
43-
44-
checkAndUpdate() {
45-
// Should always check the bridge to see if the component should
46-
// update itself (re-render)
47-
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
48-
49-
// ONLY call updateSelf when the component should update
50-
if (bUpdateSelf) {
51-
this.updateSelf();
52-
}
53-
}
54-
55-
updateSelf() {
20+
override updateSelf() {
5621
const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
5722
this.showHighlightedData = rawMetaData?.showHighlightedData;
5823

‎packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
*ngIf="tab.content?.getPConnect()"
66
[name]="tab.content?.getPConnect().getComponentName()"
77
[props]="{
8-
pConn$: tab.content?.getPConnect(),
9-
formGroup$: formGroup$
8+
pConn$: tab.content?.getPConnect()
109
}"
1110
errorMsg="Details Sub tabs wants component not yet available: {{ tab.content?.getPConnect().getComponentName() }}"
1211
></component-mapper>

‎packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
1+
import { Component, forwardRef } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { FormGroup } from '@angular/forms';
43
import { MatTabsModule } from '@angular/material/tabs';
5-
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
64
import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tab-utils';
75
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
6+
import { DetailsTemplateBase } from '../base/details-template-base';
87

98
@Component({
109
selector: 'app-details-sub-tabs',
@@ -13,45 +12,14 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
1312
standalone: true,
1413
imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
1514
})
16-
export class DetailsSubTabsComponent implements OnInit, OnDestroy {
17-
@Input() pConn$: typeof PConnect;
18-
@Input() formGroup$: FormGroup;
15+
export class DetailsSubTabsComponent extends DetailsTemplateBase {
16+
override pConn$: typeof PConnect;
1917

20-
angularPConnectData: AngularPConnectData = {};
2118
currentTabId = '0';
2219
tabItems: any[];
2320
availableTabs: any[];
2421

25-
constructor(private angularPConnect: AngularPConnectService) {}
26-
27-
ngOnInit(): void {
28-
// First thing in initialization is registering and subscribing to the AngularPConnect service
29-
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
30-
this.checkAndUpdate();
31-
}
32-
33-
ngOnDestroy() {
34-
if (this.angularPConnectData.unsubscribeFn) {
35-
this.angularPConnectData.unsubscribeFn();
36-
}
37-
}
38-
39-
onStateChange() {
40-
this.checkAndUpdate();
41-
}
42-
43-
checkAndUpdate() {
44-
// Should always check the bridge to see if the component should
45-
// update itself (re-render)
46-
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
47-
48-
// ONLY call updateSelf when the component should update
49-
if (bUpdateSelf) {
50-
this.updateSelf();
51-
}
52-
}
53-
54-
updateSelf() {
22+
override updateSelf() {
5523
const children = this.pConn$?.getChildren();
5624
const deferLoadedTabs = children[0];
5725
this.availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');

‎packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
2-
import { FormGroup } from '@angular/forms';
3-
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
1+
import { Component, forwardRef } from '@angular/core';
42
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
3+
import { DetailsTemplateBase } from '../base/details-template-base';
54

65
@Component({
76
selector: 'app-details-three-column',
@@ -10,11 +9,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
109
standalone: true,
1110
imports: [forwardRef(() => ComponentMapperComponent)]
1211
})
13-
export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
14-
constructor(private angularPConnect: AngularPConnectService) {}
15-
16-
@Input() pConn$: typeof PConnect;
17-
@Input() formGroup$: FormGroup;
12+
export class DetailsThreeColumnComponent extends DetailsTemplateBase {
13+
override pConn$: typeof PConnect;
1814

1915
showHighlightedData: boolean;
2016
highlightedDataArr: any;
@@ -25,39 +21,7 @@ export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
2521

2622
propsToUse: any = {};
2723

28-
// Used with AngularPConnect
29-
angularPConnectData: AngularPConnectData = {};
30-
31-
ngOnInit(): void {
32-
// First thing in initialization is registering and subscribing to the AngularPConnect service
33-
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
34-
35-
// this.updateSelf();
36-
this.checkAndUpdate();
37-
}
38-
39-
ngOnDestroy() {
40-
if (this.angularPConnectData.unsubscribeFn) {
41-
this.angularPConnectData.unsubscribeFn();
42-
}
43-
}
44-
45-
onStateChange() {
46-
this.checkAndUpdate();
47-
}
48-
49-
checkAndUpdate() {
50-
// Should always check the bridge to see if the component should
51-
// update itself (re-render)
52-
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
53-
54-
// ONLY call updateSelf when the component should update
55-
if (bUpdateSelf) {
56-
this.updateSelf();
57-
}
58-
}
59-
60-
updateSelf() {
24+
override updateSelf() {
6125
const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
6226
this.showHighlightedData = rawMetaData?.showHighlightedData;
6327

0 commit comments

Comments
 (0)