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')
},