Made changes to render Todo widget in banner using portalTemplate

Author: manasa

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

@@ -1,8 +1,9 @@
 <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>
+      <ng-template [cdkPortalOutlet]="templatePortal$ | async"></ng-template>
     </div>
   </div>
 </div>

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

@@ -2,12 +2,14 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { Component, Input, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PortalModule } from '@angular/cdk/portal';
+import { TodoPortalService } from '../../services/todoportal.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 +22,13 @@ export class BannerComponent {
   @Input() backgroundImage: string;
   @Input() layout$: string;
 
+  public templatePortal$: any;
+  constructor(private todoportalService: TodoPortalService) {}
+
+  ngOnInit() {
+    this.templatePortal$ = this.todoportalService.portal$;
+  }
+
   getUrl() {
     return `url(${this.backgroundImage})`;
   }

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

@@ -1,5 +1,5 @@
 <app-todo
-  *ngIf="!isMyWorklistChecked; else mediacoTodo"
+  *ngIf="!isMyWorklistChecked"
   [pConn$]="pConn$"
   [caseInfoID$]="caseInfoID$"
   [datasource$]="datasource$"
@@ -8,15 +8,11 @@
   type$="TODO"
   [context$]="context$"
   isConfirm="true"
-></app-todo>
+>
+</app-todo>
 <ng-template #mediacoTodo>
   <div *ngIf="surveyCase">
-    <div
-      class="banner-container"
-      [ngStyle]="{
-        left: navbar.isCollapsed() ? '32%' : '37%'
-      }"
-    >
+    <div class="banner-container">
       <div class="icon-wrapper">
         <div class="icon-box">
           <img class="quick-link-icon" [src]="img" />

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: fixed;
-  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,12 +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 { MatIcon } from '@angular/material/icon';
 import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
 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 { NavbarService } from '../../services/navbar.service';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { TodoPortalService } from '../../services/todoportal.service';
 
 const fetchMyWorkList = (datapage, fields, numberOfRecords, includeTotalCount, context) => {
   return PCore.getDataPageUtils()
@@ -87,11 +88,14 @@ export class TodoComponent implements OnInit, OnDestroy {
   bLogging = true;
   surveyCase: any[];
   isMyWorklistChecked: boolean | undefined;
+  @ViewChild('mediacoTodo') private mediacoTodoTemplate: TemplateRef<any>;
+
   constructor(
+    private todoportalService: TodoPortalService,
+    private viewContainerRef: ViewContainerRef,
     private psService: ProgressSpinnerService,
     private erService: ErrorMessagesService,
-    private utils: Utils,
-    public navbar: NavbarService
+    private utils: Utils
   ) {}
 
   ngOnInit() {
@@ -105,6 +109,14 @@ 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.todoportalService.setPortal(portal);
+  }
+
   ngOnDestroy() {
     const { CREATE_STAGE_SAVED, CREATE_STAGE_DELETED } = PCore.getEvents().getCaseEvent();
 

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.ts

@@ -11,7 +11,6 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { Utils } from '@pega/angular-sdk-components';
 import { FooterComponent } from 'src/app/_samples/mediaco/components/footer/footer.component';
-import { NavbarService } from '../../services/navbar.service';
 
 // interface WssNavBarProps {
 //   // If any, enter additional props that only exist on this component
@@ -75,8 +74,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
     // private cdRef: ChangeDetectorRef,
     // private psService: ProgressSpinnerService,
     private ngZone: NgZone,
-    private utils: Utils,
-    private navbarService: NavbarService
+    private utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -165,7 +163,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
   toggleMenu() {
     this.collapsed = !this.collapsed;
-    this.navbarService.toggleCollapse();
   }
 
   // navPanelCreateButtonClick() {

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

@@ -0,0 +1,24 @@
+// portal.service.ts
+import { Injectable } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TodoPortalService {
+  private portalSource = new BehaviorSubject<TemplatePortal<any> | null>(null);
+
+  /**
+   * An observable that components can subscribe to, to get the portal.
+   */
+  public portal$: Observable<TemplatePortal<any> | null> = this.portalSource.asObservable();
+
+  /**
+   * Sets the portal that should be rendered elsewhere.
+   * @param portal The TemplatePortal to be shared.
+   */
+  setPortal(portal: TemplatePortal<any>) {
+    this.portalSource.next(portal);
+  }
+}