fix: embedded sample scenario is not loading (#239)

* fix: embedded sample scenario is not loading

* fix: multiple pyHome calls happening

Author: tumms2021389

packages/angular-sdk-components/src/lib/_components/infra/Containers/flow-container/flow-container.component.ts

@@ -104,6 +104,8 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     this.initContainer();
 
+    this.checkAndUpdate();
+
     PCore.getPubSubUtils().subscribe(
       PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL,
       () => {
@@ -595,7 +597,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
     });
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   topViewRefresh(): void {
     Object.values(this.formGroup$.controls).forEach(control => {
       control.markAsTouched();

packages/angular-sdk-components/src/lib/_components/infra/Containers/view-container/view-container.component.ts

@@ -99,17 +99,22 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
       dispatchObject: this.dispatchObject,
       visible: !PCore.checkIfSemanticURL()
     };
-    containerMgr.initializeContainers({
-      type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
-    });
 
-    if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
-      /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
-      PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
-    }
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      containerMgr.initializeContainers({
+        type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
+      });
+
+      if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+        /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+        PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
+      }
 
-    if (!PCore.checkIfSemanticURL()) containerMgr.addContainerItem(this.pConn$ as any);
-    if (!this.displayOnlyFA$) configureBrowserBookmark(this.pConn$);
+      if (!PCore.checkIfSemanticURL()) containerMgr.addContainerItem(this.pConn$ as any);
+      if (!this.displayOnlyFA$) configureBrowserBookmark(this.pConn$);
+
+      sessionStorage.setItem('hasViewContainer', 'true');
+    }
 
     // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
     // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly

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

@@ -97,6 +97,9 @@ export class RootContainerComponent implements OnInit, OnDestroy {
       }
     });
 
+    // clear out hasViewContainer
+    sessionStorage.setItem('hasViewContainer', 'false');
+
     this.mConn$ = configObjModal.getPConnect();
 
     // First thing in initialization is registering and subscribing to the AngularPConnect service

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

@@ -14,25 +14,12 @@
   </ng-container>
 
   <ng-template #noTemplate>
-    <div *ngIf="displayOnlyFA$; else displayAll">
-      <div *ngFor="let kid of arChildren$">
-        <div [ngSwitch]="kid.getPConnect().getComponentName()">
-          <component-mapper
-            [name]="kid.getPConnect().getComponentName()"
-            [props]="{ pConn$: kid.getPConnect() }"
-            errorMsg="View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}"
-          ></component-mapper>
-        </div>
-      </div>
+    <div *ngFor="let kid of arChildren$">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{ pConn$: kid.getPConnect() }"
+        errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
     </div>
-    <ng-template #displayAll>
-      <div *ngFor="let kid of arChildren$">
-        <component-mapper
-          [name]="kid.getPConnect().getComponentName()"
-          [props]="{ pConn$: kid.getPConnect() }"
-          errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
-        ></component-mapper>
-      </div>
-    </ng-template>
   </ng-template>
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
@@ -19,7 +19,7 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
+export class DefaultFormComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 

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

@@ -42,6 +42,9 @@ export class PageComponent implements OnInit, OnDestroy {
     if (operator && operator != '') {
       this.title$ += `, ${operator}`;
     }
+
+    // when showing a page, similar to updating root, need to cause viewContainer to call "initContainer"
+    sessionStorage.setItem('hasViewContainer', 'false');
   }
 
   ngOnDestroy(): void {

projects/angular-test-app/src/app/_samples/embedded/main-screen/main-screen.component.scss

@@ -60,7 +60,7 @@
 }
 
 .mc-info-image {
-  width: 700px;
+  width: calc(100% - 40px);
   margin: 20px;
   border-radius: 10px;
 }