Merge 949fcd5095 into 753804c011

libs/ui/src/lib/accounts-table/accounts-table.component.html

@@ -1,9 +1,9 @@
-@if (showActions) {
+@if (showActions()) {
   <div class="d-flex justify-content-end">
     <button
       class="align-items-center d-flex"
       mat-stroked-button
-      [disabled]="dataSource?.data.length < 2"
+      [disabled]="dataSource()?.data.length < 2"
       (click)="onTransferBalance()"
     >
       <ion-icon class="mr-2" name="arrow-redo-outline" />
@@ -19,7 +19,7 @@
     matSort
     matSortActive="name"
     matSortDirection="asc"
-    [dataSource]="dataSource"
+    [dataSource]="dataSource()"
   >
     <ng-container matColumnDef="status">
       <th
@@ -336,9 +336,9 @@
       <td *matFooterCellDef class="px-1" mat-footer-cell></td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
     <tr
-      *matRowDef="let row; columns: displayedColumns"
+      *matRowDef="let row; columns: displayedColumns()"
       mat-row
       [ngClass]="{
         'cursor-pointer': hasPermissionToOpenDetails
@@ -346,14 +346,14 @@
       (click)="onOpenAccountDetailDialog(row.id)"
     ></tr>
     <tr
-      *matFooterRowDef="displayedColumns"
+      *matFooterRowDef="displayedColumns()"
       mat-footer-row
-      [ngClass]="{ 'd-none': isLoading || !showFooter }"
+      [ngClass]="{ 'd-none': isLoading() || !showFooter }"
     ></tr>
   </table>
 </div>
 
-@if (isLoading) {
+@if (isLoading()) {
   <ngx-skeleton-loader
     animation="pulse"
     class="px-4 py-3"

libs/ui/src/lib/accounts-table/accounts-table.component.ts

@@ -10,10 +10,12 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnChanges,
   OnDestroy,
   Output,
-  ViewChild
+  computed,
+  inject,
+  input,
+  viewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
@@ -33,7 +35,7 @@ import {
   walletOutline
 } from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -53,20 +55,13 @@ import { Subject, Subscription } from 'rxjs';
   styleUrls: ['./accounts-table.component.scss'],
   templateUrl: './accounts-table.component.html'
 })
-export class GfAccountsTableComponent implements OnChanges, OnDestroy {
+export class GfAccountsTableComponent implements OnDestroy {
-  @Input() accounts: Account[];
   @Input() activitiesCount: number;
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale = getLocale();
-  @Input() showActions: boolean;
-  @Input() showActivitiesCount = true;
-  @Input() showAllocationInPercentage: boolean;
-  @Input() showBalance = true;
   @Input() showFooter = true;
-  @Input() showValue = true;
-  @Input() showValueInBaseCurrency = true;
   @Input() totalBalanceInBaseCurrency: number;
   @Input() totalValueInBaseCurrency: number;
 
@@ -74,71 +69,72 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
   @Output() accountToUpdate = new EventEmitter<Account>();
   @Output() transferBalance = new EventEmitter<void>();
 
-  @ViewChild(MatSort) sort: MatSort;
+  public readonly accounts = input.required<Account[] | undefined>();
-
+  public readonly showActions = input<boolean>();
-  public dataSource = new MatTableDataSource<Account>();
+  public readonly showActivitiesCount = input(true);
-  public displayedColumns = [];
+  public readonly showAllocationInPercentage = input<boolean>();
-  public isLoading = true;
+  public readonly showBalance = input(true);
-  public routeQueryParams: Subscription;
+  public readonly showValue = input(true);
-
+  public readonly showValueInBaseCurrency = input(false);
-  private unsubscribeSubject = new Subject<void>();
+  public readonly sort = viewChild.required(MatSort);
-
+
-  public constructor(
+  protected readonly dataSource = computed(() => {
-    private notificationService: NotificationService,
+    const dataSource = new MatTableDataSource<Account>(this.accounts());
-    private router: Router
+    dataSource.sortingDataAccessor = getLowercase;
-  ) {
+    dataSource.sort = this.sort();
-    addIcons({
+    return dataSource;
-      arrowRedoOutline,
-      createOutline,
-      documentTextOutline,
-      ellipsisHorizontal,
-      eyeOffOutline,
-      trashOutline,
-      walletOutline
   });
-  }
 
-  public ngOnChanges() {
+  protected readonly displayedColumns = computed(() => {
-    this.displayedColumns = ['status', 'account', 'platform'];
+    const columns = ['status', 'account', 'platform'];
 
-    if (this.showActivitiesCount) {
+    if (this.showActivitiesCount()) {
-      this.displayedColumns.push('activitiesCount');
+      columns.push('activitiesCount');
     }
 
-    if (this.showBalance) {
+    if (this.showBalance()) {
-      this.displayedColumns.push('balance');
+      columns.push('balance');
     }
 
-    if (this.showValue) {
+    if (this.showValue()) {
-      this.displayedColumns.push('value');
+      columns.push('value');
     }
 
-    this.displayedColumns.push('currency');
+    columns.push('currency');
 
-    if (this.showValueInBaseCurrency) {
+    if (this.showValueInBaseCurrency()) {
-      this.displayedColumns.push('valueInBaseCurrency');
+      columns.push('valueInBaseCurrency');
     }
 
-    if (this.showAllocationInPercentage) {
+    if (this.showAllocationInPercentage()) {
-      this.displayedColumns.push('allocation');
+      columns.push('allocation');
     }
 
-    this.displayedColumns.push('comment');
+    columns.push('comment');
 
-    if (this.showActions) {
+    if (this.showActions()) {
-      this.displayedColumns.push('actions');
+      columns.push('actions');
     }
 
-    this.isLoading = true;
+    return columns;
+  });
 
-    this.dataSource = new MatTableDataSource(this.accounts);
+  protected readonly isLoading = computed(() => !this.accounts());
-    this.dataSource.sortingDataAccessor = getLowercase;
 
-    this.dataSource.sort = this.sort;
+  private readonly notificationService = inject(NotificationService);
+  private readonly router = inject(Router);
+  private readonly unsubscribeSubject = new Subject<void>();
 
-    if (this.accounts) {
+  public constructor() {
-      this.isLoading = false;
+    addIcons({
-    }
+      arrowRedoOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontal,
+      eyeOffOutline,
+      trashOutline,
+      walletOutline
+    });
   }
 
   public onDeleteAccount(aId: string) {

libs/ui/src/lib/activities-table/activities-table.component.stories.ts

@@ -59,7 +59,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -74,12 +74,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },
@@ -126,7 +126,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -141,12 +141,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },
@@ -193,7 +193,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'LIQUIDITY',
       assetSubClass: 'CRYPTOCURRENCY',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2024-03-12T15:15:21.217Z'),
       currency: 'USD',
@@ -208,12 +208,12 @@ const activities: Activity[] = [
       isin: 'CA4639181029',
       name: 'iShares Bitcoin Trust',
       updatedAt: new Date('2025-09-29T03:14:07.742Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'IBIT',
       symbolMapping: {},
       url: 'https://www.ishares.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 6,
       dateOfFirstActivity: new Date('2024-01-01T08:00:00.000Z')
     },
@@ -280,7 +280,7 @@ const activities: Activity[] = [
       symbol: 'BNDW',
       symbolMapping: {},
       url: 'https://vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 38,
       dateOfFirstActivity: new Date('2022-04-13T20:05:48.742Z')
     },
@@ -327,7 +327,7 @@ const activities: Activity[] = [
     SymbolProfile: {
       assetClass: 'EQUITY',
       assetSubClass: 'ETF',
-      comment: null,
+      comment: undefined,
       countries: [],
       createdAt: new Date('2021-06-06T16:12:20.982Z'),
       currency: 'USD',
@@ -342,12 +342,12 @@ const activities: Activity[] = [
       isin: 'US9220427424',
       name: 'Vanguard Total World Stock Index Fund ETF Shares',
       updatedAt: new Date('2025-10-01T20:09:39.500Z'),
-      scraperConfiguration: null,
+      scraperConfiguration: undefined,
       sectors: [],
       symbol: 'VT',
       symbolMapping: {},
       url: 'https://www.vanguard.com',
-      userId: null,
+      userId: undefined,
       activitiesCount: 267,
       dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z')
     },