fix: visibility issues in Default form template

Author: tumms2021389

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

@@ -33,22 +33,18 @@ export class ReferenceComponent {
   static createFullReferencedViewFromRef(inPConn: any) {
     // BAIL and ERROR if inPConn is NOT a reference!
     if (inPConn.getComponentName() !== 'reference') {
-      // debugger;
-
       console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
     }
 
-    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
-
-    const referenceConfig = { ...inPConn.getComponentConfig() } || {};
+    const referenceConfig = { ...inPConn.getComponentConfig() };
 
     // Since SDK-A implements Reference as static methods and we don't rely on
     //  the Reference component's handling of the visibility prop, we leave it in
     //  (and also leaving the others in for now) so the referenced View can act on
     //  the visibility prop. (The following 3 lines were carried over from React SDK)
     delete referenceConfig?.name;
-    // delete referenceConfig?.type;
-    // delete referenceConfig?.visibility;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
 
     const viewMetadata = inPConn.getReferencedView();
 
@@ -68,21 +64,24 @@ export class ReferenceComponent {
       }
     };
 
+    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+    const { visibility = true, context, readOnly = false, displayMode = '' } = theResolvedConfigProps;
+
     if (ReferenceComponent.bLogging) {
-      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+      console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
     }
 
     const viewComponent = inPConn.createComponent(viewObject, null, null, {
-      pageReference: theResolvedConfigProps.context
+      pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
     // updating the referencedComponent should trigger a render
     const newCompPConnect = viewComponent.getPConnect();
 
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
-      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+      readOnly,
+      displayMode
     });
 
     if (ReferenceComponent.bLogging) {
@@ -93,7 +92,11 @@ export class ReferenceComponent {
       );
     }
 
-    return newCompPConnect;
+    if (visibility !== false) {
+      return newCompPConnect;
+    }
+
+    return null;
   }
 
   // STATIC method that other components can call to normalize
@@ -130,7 +133,7 @@ export class ReferenceComponent {
         // debugger;
         let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
         // now return its PConnect
-        theRefViewPConn = theRefViewPConn.getComponent();
+        theRefViewPConn = theRefViewPConn?.getComponent();
 
         // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
         // console.log(`theFullReference: ${theFullReference}`);

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

@@ -1,10 +1,16 @@
 import { Directive, OnDestroy } from '@angular/core';
+import { AngularPConnectData } from '../../../_bridge/angular-pconnect';
 
 @Directive()
 export class FormTemplateBase implements OnDestroy {
   pConn$: any;
+  angularPConnectData: AngularPConnectData;
 
   ngOnDestroy(): void {
     PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+
+    if (this.angularPConnectData?.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
   }
 }

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

@@ -1,11 +1,23 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { TemplateUtils } from '../../../_helpers/template-utils';
 import { FormTemplateBase } from '../base/form-template-base';
 
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews?.length !== newViews?.length) {
+    return true;
+  }
+
+  return !oldViews?.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
+
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
@@ -23,15 +35,32 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
+  // Used with AngularPConnect
+  override angularPConnectData: AngularPConnectData = {};
+
   arChildren$: any[];
   divClass$: string;
   instructions: string;
 
-  constructor(private templateUtils: TemplateUtils) {
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {
     super();
   }
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
@@ -55,6 +84,12 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit {
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    const visibleChildren = children.filter(child => child !== undefined);
+
+    if (areViewsChanged(this.arChildren$, visibleChildren)) {
+      this.arChildren$ = visibleChildren;
+    }
   }
 }

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

@@ -117,7 +117,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
     this.referenceList = this.configProps$.referenceList;
-    if (this.prevRefLength != this.referenceList.length) {
+    if (this.prevRefLength != this.referenceList?.length) {
       // eslint-disable-next-line sonarjs/no-collapsible-if
       if (!this.readonlyMode) {
         if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {

packages/angular-sdk-components/src/lib/_components/template/simple-table-manual/simple-table-manual.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';