From 77a51a7c07d2b3a14500d675c07197c9696ff8d7 Mon Sep 17 00:00:00 2001 From: tumms2021389 <97188066+tumms2021389@users.noreply.github.com> Date: Wed, 18 Dec 2024 01:53:10 +0530 Subject: [PATCH] =?UTF-8?q?fix:=20Details=20template=20fields=20are=20not?= =?UTF-8?q?=20getting=20re-render=20on=20save=20for=E2=80=A6=20(#257)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Details template fields are not getting re-rendering on save for later * removed unnecessary code in case view --- package-lock.json | 8 +-- package.json | 2 +- .../component-mapper.component.ts | 11 +-- .../template/base/details-template-base.ts | 67 +++++++++++++++++++ .../form-template-base.ts} | 2 +- .../case-view/case-view.component.html | 8 +-- .../template/case-view/case-view.component.ts | 19 ++---- .../default-form/default-form.component.ts | 4 +- .../details-narrow-wide.component.ts | 43 ++---------- .../details-one-column.component.ts | 45 ++----------- .../details-sub-tabs.component.html | 3 +- .../details-sub-tabs.component.ts | 42 ++---------- .../details-three-column.component.ts | 46 ++----------- .../details-two-column.component.ts | 46 ++----------- .../details-wide-narrow.component.ts | 45 ++----------- .../template/details/details.component.ts | 44 ++---------- .../one-column/one-column.component.ts | 4 +- .../three-column/three-column.component.ts | 4 +- .../two-column/two-column.component.ts | 4 +- .../wide-narrow-form.component.ts | 4 +- .../angular-sdk-components/src/public-api.ts | 4 +- 21 files changed, 135 insertions(+), 320 deletions(-) create mode 100644 packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts rename packages/angular-sdk-components/src/lib/_components/template/{form-template-base/form-template-base.component.ts => base/form-template-base.ts} (76%) diff --git a/package-lock.json b/package-lock.json index efa47249..a3e93932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,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", @@ -5442,9 +5442,9 @@ } }, "node_modules/@pega/auth": { - "version": "0.2.19", - "resolved": "https://registry.npmjs.org/@pega/auth/-/auth-0.2.19.tgz", - "integrity": "sha512-quHT/uK8TrmHbj6zJNkxC9j6oL4FcEwdtqpBCzn+kshLayLBCk9hEKeNPFKipo0iVx8v5jb1g6ssKYzRTIyDVw==", + "version": "0.2.21", + "resolved": "https://registry.npmjs.org/@pega/auth/-/auth-0.2.21.tgz", + "integrity": "sha512-uglNlPmIw+p1Y+LGrxbEqew50xKmY5WDBLU0j9p5mfeXizC+IfuJZYgB/U6MDg1qvxw+Crpd9tvlwihk6pMxew==", "dependencies": { "node-fetch": "^3.3.2", "open": "^10.1.0" diff --git a/package.json b/package.json index 3de3ef94..a1f4f4e0 100644 --- 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/packages/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts b/packages/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts index 40907c3c..3ba9910b 100644 --- a/packages/angular-sdk-components/src/lib/_bridge/component-mapper/component-mapper.component.ts +++ b/packages/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 new file mode 100644 index 00000000..09fff22c --- /dev/null +++ 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/packages/angular-sdk-components/src/lib/_components/template/form-template-base/form-template-base.component.ts b/packages/angular-sdk-components/src/lib/_components/template/base/form-template-base.ts similarity index 76% rename from packages/angular-sdk-components/src/lib/_components/template/form-template-base/form-template-base.component.ts rename to packages/angular-sdk-components/src/lib/_components/template/base/form-template-base.ts index 356dc3de..d96eb74e 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/form-template-base/form-template-base.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/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/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html b/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html index 07388cec..82f3cfcd 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.html @@ -1,5 +1,5 @@
-
+
@@ -47,7 +47,7 @@

{{ heading$ }}

>
-
+
{{ heading$ }}
-
+
-
+
diff --git a/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.ts b/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.ts index 58f8bc7f..427c7d5d 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/case-view/case-view.component.ts +++ b/packages/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/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts b/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts index a9f26f93..14e4cc4d 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts +++ b/packages/angular-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/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts index a44f32e8..80f36dfe 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-narrow-wide/details-narrow-wide.component.ts +++ b/packages/angular-sdk-components/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/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts index 263dc35c..d418b823 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-one-column/details-one-column.component.ts +++ b/packages/angular-sdk-components/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/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html b/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html index 4d9c1835..76611d28 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.html +++ b/packages/angular-sdk-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() }}" > diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts index 42ad741e..8bca9561 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-sub-tabs/details-sub-tabs.component.ts @@ -1,10 +1,9 @@ -import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core'; +import { Component, forwardRef } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FormGroup } from '@angular/forms'; import { MatTabsModule } from '@angular/material/tabs'; -import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect'; import { getTransientTabs, getVisibleTabs, tabClick } from '../../../_helpers/tab-utils'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; +import { DetailsTemplateBase } from '../base/details-template-base'; @Component({ selector: 'app-details-sub-tabs', @@ -13,45 +12,14 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp standalone: true, imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class DetailsSubTabsComponent implements OnInit, OnDestroy { - @Input() pConn$: typeof PConnect; - @Input() formGroup$: FormGroup; +export class DetailsSubTabsComponent extends DetailsTemplateBase { + override pConn$: typeof PConnect; - angularPConnectData: AngularPConnectData = {}; currentTabId = '0'; tabItems: any[]; availableTabs: any[]; - constructor(private angularPConnect: 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.updateSelf(); - } - } - - updateSelf() { + override updateSelf() { const children = this.pConn$?.getChildren(); const deferLoadedTabs = children[0]; this.availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs'); diff --git a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts index 60e160f0..88e154b8 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-three-column/details-three-column.component.ts @@ -1,7 +1,6 @@ -import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core'; -import { FormGroup } from '@angular/forms'; -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-three-column', @@ -10,11 +9,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp standalone: true, imports: [forwardRef(() => ComponentMapperComponent)] }) -export class DetailsThreeColumnComponent implements OnInit, OnDestroy { - constructor(private angularPConnect: AngularPConnectService) {} - - @Input() pConn$: typeof PConnect; - @Input() formGroup$: FormGroup; +export class DetailsThreeColumnComponent extends DetailsTemplateBase { + override pConn$: typeof PConnect; showHighlightedData: boolean; highlightedDataArr: any; @@ -25,39 +21,7 @@ export class DetailsThreeColumnComponent implements OnInit, OnDestroy { propsToUse: 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/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts index 97e3e4c5..219de1c8 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-two-column/details-two-column.component.ts @@ -1,7 +1,6 @@ -import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core'; -import { FormGroup } from '@angular/forms'; -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-two-column', @@ -10,11 +9,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp standalone: true, imports: [forwardRef(() => ComponentMapperComponent)] }) -export class DetailsTwoColumnComponent implements OnInit, OnDestroy { - constructor(private angularPConnect: AngularPConnectService) {} - - @Input() pConn$: typeof PConnect; - @Input() formGroup$: FormGroup; +export class DetailsTwoColumnComponent extends DetailsTemplateBase { + override pConn$: typeof PConnect; showHighlightedData: boolean; highlightedDataArr: any; @@ -25,39 +21,7 @@ export class DetailsTwoColumnComponent implements OnInit, OnDestroy { propsToUse: 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/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts index 26e5b4d8..18d91414 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details-wide-narrow/details-wide-narrow.component.ts @@ -1,7 +1,6 @@ -import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core'; -import { FormGroup } from '@angular/forms'; -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-wide-narrow', @@ -10,50 +9,16 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp standalone: true, imports: [forwardRef(() => ComponentMapperComponent)] }) -export class DetailsWideNarrowComponent implements OnInit, OnDestroy { - constructor(private angularPConnect: AngularPConnectService) {} - - @Input() pConn$: typeof PConnect; - @Input() formGroup$: FormGroup; +export class DetailsWideNarrowComponent extends DetailsTemplateBase { + override pConn$: typeof PConnect; highlightedDataArr: any[] = []; showHighlightedData: boolean; arFields$: any[] = []; arFields2$: any[] = []; propsToUse: 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/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts b/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts index 9b3a6d15..eaa92239 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/details/details.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/details/details.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', @@ -9,48 +9,14 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp standalone: true, imports: [forwardRef(() => ComponentMapperComponent)] }) -export class DetailsComponent implements OnInit, OnDestroy { - constructor(private angularPConnect: AngularPConnectService) {} - - @Input() pConn$: typeof PConnect; +export class DetailsComponent extends DetailsTemplateBase { + override pConn$: typeof PConnect; highlightedDataArr: any[] = []; showHighlightedData: boolean; 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/packages/angular-sdk-components/src/lib/_components/template/one-column/one-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/one-column/one-column.component.ts index 916b24f0..0951e075 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/one-column/one-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/one-column/one-column.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from ' import { CommonModule } from '@angular/common'; import { FormGroup } from '@angular/forms'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; -import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component'; +import { FormTemplateBase } from '../base/form-template-base'; @Component({ selector: 'app-one-column', @@ -11,7 +11,7 @@ import { FormTemplateBaseComponent } from '../form-template-base/form-template-b standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class OneColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges { +export class OneColumnComponent extends FormTemplateBase implements OnInit, OnChanges { @Input() override pConn$: typeof PConnect; @Input() formGroup$: FormGroup; diff --git a/packages/angular-sdk-components/src/lib/_components/template/three-column/three-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/three-column/three-column.component.ts index eebfccd4..276de00e 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/three-column/three-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/three-column/three-column.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from ' import { CommonModule } from '@angular/common'; import { FormGroup } from '@angular/forms'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; -import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component'; +import { FormTemplateBase } from '../base/form-template-base'; @Component({ selector: 'app-three-column', @@ -11,7 +11,7 @@ import { FormTemplateBaseComponent } from '../form-template-base/form-template-b standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class ThreeColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges { +export class ThreeColumnComponent extends FormTemplateBase implements OnInit, OnChanges { @Input() override pConn$: typeof PConnect; @Input() formGroup$: FormGroup; diff --git a/packages/angular-sdk-components/src/lib/_components/template/two-column/two-column.component.ts b/packages/angular-sdk-components/src/lib/_components/template/two-column/two-column.component.ts index 7b3d8918..27c7a721 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/two-column/two-column.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/two-column/two-column.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from ' import { CommonModule } from '@angular/common'; import { FormGroup } from '@angular/forms'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; -import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component'; +import { FormTemplateBase } from '../base/form-template-base'; @Component({ selector: 'app-two-column', @@ -11,7 +11,7 @@ import { FormTemplateBaseComponent } from '../form-template-base/form-template-b standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class TwoColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges { +export class TwoColumnComponent extends FormTemplateBase implements OnInit, OnChanges { @Input() override pConn$: typeof PConnect; @Input() formGroup$: FormGroup; diff --git a/packages/angular-sdk-components/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts b/packages/angular-sdk-components/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts index e63f4d4c..c6a9b5da 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from ' import { CommonModule } from '@angular/common'; import { FormGroup } from '@angular/forms'; import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component'; -import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component'; +import { FormTemplateBase } from '../base/form-template-base'; @Component({ selector: 'app-wide-narrow-form', @@ -11,7 +11,7 @@ import { FormTemplateBaseComponent } from '../form-template-base/form-template-b standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)] }) -export class WideNarrowFormComponent extends FormTemplateBaseComponent implements OnInit, OnChanges { +export class WideNarrowFormComponent extends FormTemplateBase implements OnInit, OnChanges { @Input() override pConn$: typeof PConnect; @Input() formGroup$: FormGroup; diff --git a/packages/angular-sdk-components/src/public-api.ts b/packages/angular-sdk-components/src/public-api.ts index b49b25c1..99f667b6 100644 --- a/packages/angular-sdk-components/src/public-api.ts +++ b/packages/angular-sdk-components/src/public-api.ts @@ -52,6 +52,9 @@ export * from './lib/_components/infra/stages/stages.component'; export * from './lib/_components/infra/view/view.component'; export * from './lib/_components/infra/Containers/base-components/flow-container-base.component'; +export * from './lib/_components/template/base/form-template-base'; +export * from './lib/_components/template/base/details-template-base'; + export * from './lib/_components/template/app-shell/app-shell.component'; export * from './lib/_components/template/case-summary/case-summary.component'; export * from './lib/_components/template/case-view/case-view.component'; @@ -68,7 +71,6 @@ export * from './lib/_components/template/details-wide-narrow/details-wide-narro export * from './lib/_components/template/field-group-list/field-group-list.component'; export * from './lib/_components/template/field-group-template/field-group-template.component'; export * from './lib/_components/template/field-value-list/field-value-list.component'; -export * from './lib/_components/template/form-template-base/form-template-base.component'; export * from './lib/_components/template/inline-dashboard/inline-dashboard.component'; export * from './lib/_components/template/inline-dashboard-page/inline-dashboard-page.component'; export * from './lib/_components/template/list-page/list-page.component';