Task/reuse toggle component on holdings page (#7586)

* Reuse toggle component

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Extended the toggle component to support a disabled state
 - Extended the toggle component to support icons
+- Reused the toggle component on the portfolio holdings page
 
 ## 3.46.0 - 2026-08-09
 

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -27,11 +27,8 @@ import {
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { Router, RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { gridOutline, reorderFourOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -39,14 +36,10 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    FormsModule,
     GfHoldingsTableComponent,
     GfToggleComponent,
     GfTreemapChartComponent,
-    IonIcon,
     MatButtonModule,
-    MatButtonToggleModule,
-    ReactiveFormsModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -62,17 +55,29 @@ export class GfHomeHoldingsComponent implements OnInit {
   protected hasPermissionToAccessHoldingsChart: boolean;
   protected hasPermissionToCreateActivity: boolean;
   protected holdings: PortfolioPosition[] | undefined;
+  protected holdingsViewMode: HoldingsViewMode =
+    GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE;
+  protected readonly holdingsViewModeOptions: ToggleOption[] = [
+    {
+      iconName: 'reorder-four-outline',
+      title: $localize`Table`,
+      value: 'TABLE'
+    },
+    {
+      iconName: 'grid-outline',
+      title: $localize`Chart`,
+      value: 'CHART'
+    }
+  ];
   protected holdingType: HoldingType = 'ACTIVE';
   protected readonly holdingTypeOptions: ToggleOption[] = [
     { label: $localize`Active`, value: 'ACTIVE' },
     { label: $localize`Closed`, value: 'CLOSED' }
   ];
+  protected isHoldingsViewModeToggleDisabled = true;
   protected readonly routerLinkPortfolioActivities =
     internalRoutes.portfolio.subRoutes.activities.routerLink;
   protected user: User;
-  protected readonly viewModeFormControl = new FormControl<HoldingsViewMode>(
-    GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
-  );
 
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly dataService = inject(DataService);
@@ -121,16 +126,13 @@ export class GfHomeHoldingsComponent implements OnInit {
 
         this.changeDetectorRef.markForCheck();
       });
-
-    this.viewModeFormControl.valueChanges
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe((holdingsViewMode) => {
-        if (!holdingsViewMode) {
-          return;
   }
 
+  protected onChangeHoldingsViewMode(aHoldingsViewMode: HoldingsViewMode) {
+    this.holdingsViewMode = aHoldingsViewMode;
+
     this.dataService
-          .putUserSetting({ holdingsViewMode })
+      .putUserSetting({ holdingsViewMode: aHoldingsViewMode })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.userService
@@ -142,7 +144,6 @@ export class GfHomeHoldingsComponent implements OnInit {
             this.changeDetectorRef.markForCheck();
           });
       });
-      });
   }
 
   protected onChangeHoldingType(aHoldingType: HoldingType) {
@@ -173,26 +174,22 @@ export class GfHomeHoldingsComponent implements OnInit {
   }
 
   private initialize() {
-    this.viewModeFormControl.disable({ emitEvent: false });
+    this.isHoldingsViewModeToggleDisabled = true;
 
     if (
       this.hasPermissionToAccessHoldingsChart &&
       this.holdingType === 'ACTIVE'
     ) {
-      this.viewModeFormControl.enable({ emitEvent: false });
+      this.isHoldingsViewModeToggleDisabled = false;
 
-      this.viewModeFormControl.setValue(
+      this.holdingsViewMode =
         this.deviceType === 'mobile'
           ? GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
           : (this.user?.settings?.holdingsViewMode ??
-              GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE),
+            GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE);
-        { emitEvent: false }
+    } else {
-      );
+      this.holdingsViewMode =
-    } else if (this.holdingType === 'CLOSED') {
+        GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE;
-      this.viewModeFormControl.setValue(
-        GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE,
-        { emitEvent: false }
-      );
     }
 
     this.holdings = undefined;

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -7,32 +7,23 @@
   <div class="row">
     <div class="col-lg">
       <div class="d-flex">
-        <div class="d-flex">
+        <gf-toggle
-          <div class="d-none d-lg-block">
+          class="d-none d-lg-block"
-            <mat-button-toggle-group
+          [defaultValue]="holdingsViewMode"
-              [formControl]="viewModeFormControl"
+          [isDisabled]="isHoldingsViewModeToggleDisabled"
-              [hideSingleSelectionIndicator]="true"
+          [options]="holdingsViewModeOptions"
-            >
+          (valueChange)="onChangeHoldingsViewMode($event.value)"
-              <mat-button-toggle i18n-title title="Table" value="TABLE">
+        />
-                <ion-icon name="reorder-four-outline" />
-              </mat-button-toggle>
-              <mat-button-toggle i18n-title title="Chart" value="CHART">
-                <ion-icon name="grid-outline" />
-              </mat-button-toggle>
-            </mat-button-toggle-group>
-          </div>
-        </div>
         <div class="align-items-center d-flex flex-grow-1 justify-content-end">
           <gf-toggle
             class="d-none d-lg-block"
             [defaultValue]="holdingType"
-            [isLoading]="false"
             [options]="holdingTypeOptions"
             (valueChange)="onChangeHoldingType($event.value)"
           />
         </div>
       </div>
-      @if (viewModeFormControl.value === 'CHART') {
+      @if (holdingsViewMode === 'CHART') {
         <gf-treemap-chart
           class="mt-3"
           cursor="pointer"
@@ -44,7 +35,7 @@
           (treemapChartClicked)="onHoldingClicked($event)"
         />
       }
-      <div [class.d-none]="viewModeFormControl.value !== 'TABLE'">
+      <div [class.d-none]="holdingsViewMode !== 'TABLE'">
         <gf-holdings-table
           [holdings]="holdings"
           [locale]="user?.settings?.locale"

apps/client/src/app/components/home-holdings/home-holdings.scss

@@ -1,9 +1,3 @@
 :host {
   display: block;
-
-  .mat-button-toggle-group {
-    .mat-button-toggle-appearance-standard {
-      --mat-button-toggle-height: 1.5rem;
-    }
-  }
 }