From 7f6b8145d7435c8a08a4abe5f8fa74720d443696 Mon Sep 17 00:00:00 2001
From: Prakhar Sharma <87238338+Prakhar29Sharma@users.noreply.github.com>
Date: Wed, 2 Oct 2024 16:57:55 +0530
Subject: [PATCH] Feature/set up output for click in holdings table component
 (#3851)

* Set up @Output for click in holdings table component
---
 .../home-holdings/home-holdings.component.ts       |  2 +-
 .../components/home-holdings/home-holdings.html    |  3 ++-
 .../lib/holdings-table/holdings-table.component.ts | 14 +++++++-------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/app/components/home-holdings/home-holdings.component.ts b/apps/client/src/app/components/home-holdings/home-holdings.component.ts
index 4f7de03b5..c76638d33 100644
--- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts
+++ b/apps/client/src/app/components/home-holdings/home-holdings.component.ts
@@ -111,7 +111,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     this.initialize();
   }
 
-  public onSymbolClicked({ dataSource, symbol }: AssetProfileIdentifier) {
+  public onHoldingClicked({ dataSource, symbol }: AssetProfileIdentifier) {
     if (dataSource && symbol) {
       this.router.navigate([], {
         queryParams: { dataSource, symbol, holdingDetailDialog: true }
diff --git a/apps/client/src/app/components/home-holdings/home-holdings.html b/apps/client/src/app/components/home-holdings/home-holdings.html
index bd9e57bb2..01afe31a2 100644
--- a/apps/client/src/app/components/home-holdings/home-holdings.html
+++ b/apps/client/src/app/components/home-holdings/home-holdings.html
@@ -40,7 +40,7 @@
           cursor="pointer"
           [dateRange]="user?.settings?.dateRange"
           [holdings]="holdings"
-          (treemapChartClicked)="onSymbolClicked($event)"
+          (treemapChartClicked)="onHoldingClicked($event)"
         />
       }
       <div [ngClass]="{ 'd-none': viewModeFormControl.value !== 'TABLE' }">
@@ -50,6 +50,7 @@
           [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
           [holdings]="holdings"
           [locale]="user?.settings?.locale"
+          (holdingClicked)="onHoldingClicked($event)"
         />
         @if (hasPermissionToCreateOrder && holdings?.length > 0) {
           <div class="text-center">
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
index 39a9baf5c..53e17e5b7 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
@@ -14,10 +14,12 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
+  Output,
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -25,7 +27,6 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { Router, RouterModule } from '@angular/router';
 import { AssetSubClass } from '@prisma/client';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, Subscription } from 'rxjs';
@@ -44,8 +45,7 @@ import { Subject, Subscription } from 'rxjs';
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
-    NgxSkeletonLoaderModule,
-    RouterModule
+    NgxSkeletonLoaderModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-holdings-table',
@@ -63,6 +63,8 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() locale = getLocale();
   @Input() pageSize = Number.MAX_SAFE_INTEGER;
 
+  @Output() holdingClicked = new EventEmitter<AssetProfileIdentifier>();
+
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
@@ -75,7 +77,7 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private router: Router) {}
+  public constructor() {}
 
   public ngOnInit() {}
 
@@ -107,9 +109,7 @@ export class GfHoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
 
   public onOpenHoldingDialog({ dataSource, symbol }: AssetProfileIdentifier) {
     if (this.hasPermissionToOpenDetails) {
-      this.router.navigate([], {
-        queryParams: { dataSource, symbol, holdingDetailDialog: true }
-      });
+      this.holdingClicked.emit({ dataSource, symbol });
     }
   }