From e1d343fb700d893cd3dc0a3aaf767213a99e713e Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Wed, 11 Feb 2026 02:15:45 +0700 Subject: [PATCH] Task/improve accounts table type safety (#6301) * fix(lib): replace null with undefined in activities table stories * feat(lib): implement inject functions in accounts table * feat(lib): change to input functions * feat(lib): change displayedColumns to a computed field * feat(lib): change accounts to use input function * feat(lib): change isLoading to a computed field * fix(lib): remove unused routeQueryParams variable * feat(lib): change sort to use viewChild function * feat(lib): change dataSource to a computed field * feat(lib): remove ngOnChanges --- .../accounts-table.component.html | 16 +-- .../accounts-table.component.ts | 114 +++++++++--------- .../activities-table.component.stories.ts | 26 ++-- 3 files changed, 76 insertions(+), 80 deletions(-) diff --git a/libs/ui/src/lib/accounts-table/accounts-table.component.html b/libs/ui/src/lib/accounts-table/accounts-table.component.html index 68ae78474..63a7a89b6 100644 --- a/libs/ui/src/lib/accounts-table/accounts-table.component.html +++ b/libs/ui/src/lib/accounts-table/accounts-table.component.html @@ -1,9 +1,9 @@ -@if (showActions) { +@if (showActions()) {
-@if (isLoading) { +@if (isLoading()) { (); @Output() transferBalance = new EventEmitter(); - @ViewChild(MatSort) sort: MatSort; - - public dataSource = new MatTableDataSource(); - public displayedColumns = []; - public isLoading = true; - public routeQueryParams: Subscription; - - private unsubscribeSubject = new Subject(); - - public constructor( - private notificationService: NotificationService, - private router: Router - ) { - addIcons({ - arrowRedoOutline, - createOutline, - documentTextOutline, - ellipsisHorizontal, - eyeOffOutline, - trashOutline, - walletOutline - }); - } - - public ngOnChanges() { - this.displayedColumns = ['status', 'account', 'platform']; - - if (this.showActivitiesCount) { - this.displayedColumns.push('activitiesCount'); + public readonly accounts = input.required(); + public readonly showActions = input(); + public readonly showActivitiesCount = input(true); + public readonly showAllocationInPercentage = input(); + 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(this.accounts()); + dataSource.sortingDataAccessor = getLowercase; + dataSource.sort = this.sort(); + return dataSource; + }); + + protected readonly displayedColumns = computed(() => { + const columns = ['status', 'account', 'platform']; + + 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(); - if (this.accounts) { - this.isLoading = false; - } + public constructor() { + addIcons({ + arrowRedoOutline, + createOutline, + documentTextOutline, + ellipsisHorizontal, + eyeOffOutline, + trashOutline, + walletOutline + }); } public onDeleteAccount(aId: string) { diff --git a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts b/libs/ui/src/lib/activities-table/activities-table.component.stories.ts index e7a2ba819..25463e576 100644 --- a/libs/ui/src/lib/activities-table/activities-table.component.stories.ts +++ b/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') },