Made changes to render Todo widget in banner using portalTemplate (#626)

* Made changes to render Todo widget in banner using portalTemplate

---------

Co-authored-by: manasa <[email protected]>
Co-authored-by: Siva Rama Krishna <[email protected]>

Author: 3 people

src/app/_samples/mediaco/components/banner/banner.component.html

@@ -1,8 +1,11 @@
 <div class="background-image-style">
   <div class="background-style content">
-    <div>
+    <div style="justify-content: center; display: inline-grid">
       <h1 class="title" [innerHTML]="title"></h1>
       <p class="message">{{ message }}</p>
+
+      <!-- The portal content will be rendered here -->
+      <ng-container *cdkPortalOutlet="portal$ | async"></ng-container>
     </div>
   </div>
 </div>

src/app/_samples/mediaco/components/banner/banner.component.scss

@@ -34,7 +34,7 @@
 }
 
 .background-image-style {
-  height: calc(18rem);
+  height: calc(20rem);
   position: sticky;
   top: var(--mat-toolbar-standard-height, 64px);
   background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));

src/app/_samples/mediaco/components/banner/banner.component.ts

@@ -1,13 +1,17 @@
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { Component, Input, forwardRef } from '@angular/core';
+import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { Observable } from 'rxjs';
+import { delay } from 'rxjs/operators';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PortalService } from '../../services/portal.service';
 
 @Component({
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, PortalModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class BannerComponent {
   @Input() pConn$: typeof PConnect;
@@ -20,6 +24,14 @@ export class BannerComponent {
   @Input() backgroundImage: string;
   @Input() layout$: string;
 
+  portal$: Observable<TemplatePortal<any> | null>;
+
+  constructor(private portalService: PortalService) {}
+
+  ngOnInit() {
+    this.portal$ = this.portalService.getPortal().pipe(delay(0));
+  }
+
   getUrl() {
     return `url(${this.backgroundImage})`;
   }

src/app/_samples/mediaco/components/list-view/list-view.component.ts

@@ -74,7 +74,6 @@ export class ListViewComponent implements OnInit {
       .getDataAsync(this.referenceDataPage, this.pConn$.getContextName())
       .then(({ data }) => {
         this.modifyListData(data);
-        console.log(data);
       });
   }
 

src/app/_samples/mediaco/components/todo/todo.component.html

@@ -1,19 +1,33 @@
-<div *ngIf="surveyCase">
-  <div class="banner-container">
-    <div class="icon-wrapper">
-      <div class="icon-box">
-        <img class="quick-link-icon" [src]="img" />
+<app-todo
+  *ngIf="!isMyWorklistChecked"
+  [pConn$]="pConn$"
+  [caseInfoID$]="caseInfoID$"
+  [datasource$]="datasource$"
+  [showTodoList$]="showTodoList$"
+  [headerText$]="headerText$"
+  type$="TODO"
+  [context$]="context$"
+  isConfirm="true"
+>
+</app-todo>
+<ng-template #mediacoTodo>
+  <div *ngIf="surveyCase">
+    <div class="banner-container">
+      <div class="icon-wrapper">
+        <div class="icon-box">
+          <img class="quick-link-icon" [src]="img" />
+        </div>
+      </div>
+      <div class="content-text">
+        <h2>Share Your Experience</h2>
+        <p>Take a quick survey about your recent experience with MediaCo.</p>
+      </div>
+      <div class="action-wrapper">
+        <button (click)="clickGo(surveyCase)" class="start-btn">
+          Start
+          <mat-icon>arrow_forward</mat-icon>
+        </button>
       </div>
-    </div>
-    <div class="content-text">
-      <h2>Share Your Experience</h2>
-      <p>Take a quick survey about your recent experience with MediaCo.</p>
-    </div>
-    <div class="action-wrapper">
-      <button (click)="clickGo(surveyCase)" class="start-btn">
-        Start
-        <mat-icon>arrow_forward</mat-icon>
-      </button>
     </div>
   </div>
-</div>
+</ng-template>

src/app/_samples/mediaco/components/todo/todo.component.scss

@@ -4,6 +4,7 @@ $text-white: #ffffff;
 $btn-text-color: #5c4498;
 
 .banner-container {
+  width: 670px;
   font-family: $font-family;
   background: linear-gradient(135deg, rgb(103, 80, 164) 0%, rgb(248, 20, 227) 50%, rgb(0, 201, 255) 100%) 0% 0% / 200% 200%;
 
@@ -20,11 +21,6 @@ $btn-text-color: #5c4498;
     text-align: center;
     padding: 32px 24px;
   }
-
-  position: absolute;
-  z-index: 10;
-  left: 30%;
-  top: 15rem;
 }
 
 .icon-wrapper {
@@ -46,7 +42,7 @@ $btn-text-color: #5c4498;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-items: flex-start;
 
   h2 {
     margin: 0 0 6px 0;

src/app/_samples/mediaco/components/todo/todo.component.ts

@@ -1,11 +1,13 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewContainerRef, ViewChild, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TemplatePortal } from '@angular/cdk/portal';
 import { MatIcon } from '@angular/material/icon';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
-import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService, TodoComponent as OOTBTodoComponent } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { updateWorkList } from '@pega/angular-sdk-components';
+import { PortalService } from '../../services/portal.service';
 
 const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
@@ -57,13 +59,14 @@ interface ToDoProps {
   myWorkList?: any;
   label?: string;
   readOnly?: boolean;
+  isMyWorklistChecked?: boolean;
 }
 
 @Component({
-  selector: 'app-todo',
+  selector: 'app-mediaco-todo',
   templateUrl: './todo.component.html',
   styleUrls: ['./todo.component.scss'],
-  imports: [CommonModule, MatIcon]
+  imports: [CommonModule, MatIcon, OOTBTodoComponent]
 })
 export class TodoComponent implements OnInit, OnDestroy {
   img = this.utils.getImageSrc('message-circle', this.utils.getSDKStaticContentUrl());
@@ -84,7 +87,12 @@ export class TodoComponent implements OnInit, OnDestroy {
   CONSTS: typeof publicConstants;
   bLogging = true;
   surveyCase: any[];
+  isMyWorklistChecked: boolean | undefined;
+  @ViewChild('mediacoTodo', { read: TemplateRef }) private mediacoTodoTemplate: TemplateRef<any>;
+
   constructor(
+    private portalService: PortalService,
+    private viewContainerRef: ViewContainerRef,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
     private utils: Utils
@@ -101,12 +109,22 @@ export class TodoComponent implements OnInit, OnDestroy {
     this.updateToDo();
   }
 
+  ngAfterViewInit() {
+    // Create a TemplatePortal from the template and its view context
+    const portal = new TemplatePortal(this.mediacoTodoTemplate, this.viewContainerRef);
+
+    // Set the portal in the shared service
+    this.portalService.setPortal(portal);
+  }
+
   ngOnDestroy() {
     const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 
     PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'updateToDo');
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_SAVED, CREATE_STAGE_SAVED);
     PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DELETED, CREATE_STAGE_DELETED);
+
+    this.portalService.clearPortal();
   }
 
   updateList() {
@@ -120,7 +138,7 @@ export class TodoComponent implements OnInit, OnDestroy {
 
   updateToDo() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ToDoProps;
-
+    this.isMyWorklistChecked = this.configProps$?.isMyWorklistChecked;
     this.headerText$ = this.headerText$ || this.configProps$.headerText;
     this.datasource$ = this.datasource$ || this.configProps$.datasource;
     this.myWorkList$ = this.myWorkList$ || this.configProps$.myWorkList;

src/app/_samples/mediaco/services/portal.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PortalService {
+  private portal$ = new BehaviorSubject<TemplatePortal<any> | null>(null);
+
+  /**
+   * Sets the portal that should be rendered elsewhere.
+   * @param portal The TemplatePortal to be shared.
+   */
+  setPortal(portal: TemplatePortal<any>) {
+    this.portal$.next(portal);
+  }
+
+  /**
+   * Clears the currently set portal.
+   */
+  clearPortal() {
+    this.portal$.next(null);
+  }
+
+  /**
+   * Returns the current portal as an observable.
+   */
+  getPortal() {
+    return this.portal$.asObservable();
+  }
+}