Merge remote-tracking branch 'origin/main' into feature/enable-strict-null-checks-in-ui

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 {
-  @Input() accounts: Account[];
+export class GfAccountsTableComponent implements OnDestroy {
   @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 dataSource = new MatTableDataSource<Account>();
-  public displayedColumns: string[] = [];
-  public isLoading = true;
-  public routeQueryParams: Subscription;
-
-  private unsubscribeSubject = new Subject<void>();
-
-  public constructor(
-    private notificationService: NotificationService,
-    private router: Router
-  ) {
-    addIcons({
-      arrowRedoOutline,
-      createOutline,
-      documentTextOutline,
-      ellipsisHorizontal,
-      eyeOffOutline,
-      trashOutline,
-      walletOutline
+  public readonly accounts = input.required<Account[] | undefined>();
+  public readonly showActions = input<boolean>();
+  public readonly showActivitiesCount = input(true);
+  public readonly showAllocationInPercentage = input<boolean>();
+  public readonly showBalance = input(true);
+  public readonly showValue = input(true);
+  public readonly showValueInBaseCurrency = input(false);
+  public readonly sort = viewChild.required(MatSort);
+
+  protected readonly dataSource = computed(() => {
+    const dataSource = new MatTableDataSource<Account>(this.accounts());
+    dataSource.sortingDataAccessor = getLowercase;
+    dataSource.sort = this.sort();
+    return dataSource;
   });
-  }
 
-  public ngOnChanges() {
-    this.displayedColumns = ['status', 'account', 'platform'];
+  protected readonly displayedColumns = computed(() => {
+    const columns = ['status', 'account', 'platform'];
 
-    if (this.showActivitiesCount) {
-      this.displayedColumns.push('activitiesCount');
+    if (this.showActivitiesCount()) {
+      columns.push('activitiesCount');
     }
 
-    if (this.showBalance) {
-      this.displayedColumns.push('balance');
+    if (this.showBalance()) {
+      columns.push('balance');
     }
 
-    if (this.showValue) {
-      this.displayedColumns.push('value');
+    if (this.showValue()) {
+      columns.push('value');
     }
 
-    this.displayedColumns.push('currency');
+    columns.push('currency');
 
-    if (this.showValueInBaseCurrency) {
-      this.displayedColumns.push('valueInBaseCurrency');
+    if (this.showValueInBaseCurrency()) {
+      columns.push('valueInBaseCurrency');
     }
 
-    if (this.showAllocationInPercentage) {
-      this.displayedColumns.push('allocation');
+    if (this.showAllocationInPercentage()) {
+      columns.push('allocation');
     }
 
-    this.displayedColumns.push('comment');
+    columns.push('comment');
 
-    if (this.showActions) {
-      this.displayedColumns.push('actions');
+    if (this.showActions()) {
+      columns.push('actions');
     }
 
-    this.isLoading = true;
+    return columns;
+  });
 
-    this.dataSource = new MatTableDataSource(this.accounts);
-    this.dataSource.sortingDataAccessor = getLowercase;
+  protected readonly isLoading = computed(() => !this.accounts());
 
-    this.dataSource.sort = this.sort;
+  private readonly notificationService = inject(NotificationService);
+  private readonly router = inject(Router);
+  private readonly unsubscribeSubject = new Subject<void>();
 
-    if (this.accounts) {
-      this.isLoading = false;
-    }
+  public constructor() {
+    addIcons({
+      arrowRedoOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontal,
+      eyeOffOutline,
+      trashOutline,
+      walletOutline
+    });
   }
 
   public onDeleteAccount(aId: string) {