From 689981201559be65543c49b163ff7e612a072e30 Mon Sep 17 00:00:00 2001 From: David Requeno Date: Sat, 23 May 2026 17:13:19 -0600 Subject: [PATCH] refactor(ui): extract reusable gf-fab component and simplify FAB usage --- .../admin-market-data.component.ts | 4 ++-- .../admin-market-data/admin-market-data.html | 12 +----------- .../home-watchlist/home-watchlist.component.ts | 4 ++-- .../home-watchlist/home-watchlist.html | 12 +----------- .../user-account-access.component.ts | 4 ++-- .../user-account-access/user-account-access.html | 12 +----------- .../pages/accounts/accounts-page.component.ts | 4 ++-- .../src/app/pages/accounts/accounts-page.html | 12 +----------- .../activities/activities-page.component.ts | 4 ++-- .../portfolio/activities/activities-page.html | 12 +----------- libs/ui/src/lib/fab/fab.component.html | 9 +++++++++ .../fab.component.scss} | 0 libs/ui/src/lib/fab/fab.component.ts | 16 ++++++++++++++++ libs/ui/src/lib/fab/index.ts | 1 + libs/ui/src/lib/page-fab/index.ts | 1 - libs/ui/src/lib/page-fab/page-fab.component.html | 1 - libs/ui/src/lib/page-fab/page-fab.component.ts | 9 --------- 17 files changed, 41 insertions(+), 76 deletions(-) create mode 100644 libs/ui/src/lib/fab/fab.component.html rename libs/ui/src/lib/{page-fab/page-fab.component.scss => fab/fab.component.scss} (100%) create mode 100644 libs/ui/src/lib/fab/fab.component.ts create mode 100644 libs/ui/src/lib/fab/index.ts delete mode 100644 libs/ui/src/lib/page-fab/index.ts delete mode 100644 libs/ui/src/lib/page-fab/page-fab.component.html delete mode 100644 libs/ui/src/lib/page-fab/page-fab.component.ts diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts index 7fca190bc..805adf89d 100644 --- a/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts +++ b/apps/client/src/app/components/admin-market-data/admin-market-data.component.ts @@ -18,8 +18,8 @@ import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market- import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { GfSymbolPipe } from '@ghostfolio/common/pipes'; import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter'; +import { GfFabComponent } from '@ghostfolio/ui/fab'; import { translate } from '@ghostfolio/ui/i18n'; -import { GfPageFabComponent } from '@ghostfolio/ui/page-fab'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; import { AdminService, DataService } from '@ghostfolio/ui/services'; import { GfValueComponent } from '@ghostfolio/ui/value'; @@ -84,7 +84,7 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in imports: [ CommonModule, GfActivitiesFilterComponent, - GfPageFabComponent, + GfFabComponent, GfPremiumIndicatorComponent, GfSymbolPipe, GfValueComponent, diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html index b69ebbda5..63d425513 100644 --- a/apps/client/src/app/components/admin-market-data/admin-market-data.html +++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html @@ -332,15 +332,5 @@ - - - - - + diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts index 2913ce637..7fb951ff5 100644 --- a/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts +++ b/apps/client/src/app/components/home-watchlist/home-watchlist.component.ts @@ -8,7 +8,7 @@ import { } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark'; -import { GfPageFabComponent } from '@ghostfolio/ui/page-fab'; +import { GfFabComponent } from '@ghostfolio/ui/fab'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; import { DataService } from '@ghostfolio/ui/services'; @@ -38,7 +38,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ GfBenchmarkComponent, - GfPageFabComponent, + GfFabComponent, GfPremiumIndicatorComponent, IonIcon, MatButtonModule, diff --git a/apps/client/src/app/components/home-watchlist/home-watchlist.html b/apps/client/src/app/components/home-watchlist/home-watchlist.html index e1242736e..e2865b9cf 100644 --- a/apps/client/src/app/components/home-watchlist/home-watchlist.html +++ b/apps/client/src/app/components/home-watchlist/home-watchlist.html @@ -22,15 +22,5 @@ @if (!hasImpersonationId && hasPermissionToCreateWatchlistItem) { - - - - - + } diff --git a/apps/client/src/app/components/user-account-access/user-account-access.component.ts b/apps/client/src/app/components/user-account-access/user-account-access.component.ts index aebdecc0e..eef50cee3 100644 --- a/apps/client/src/app/components/user-account-access/user-account-access.component.ts +++ b/apps/client/src/app/components/user-account-access/user-account-access.component.ts @@ -4,8 +4,8 @@ import { CreateAccessDto } from '@ghostfolio/common/dtos'; import { ConfirmationDialogType } from '@ghostfolio/common/enums'; import { Access, User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfFabComponent } from '@ghostfolio/ui/fab'; import { NotificationService } from '@ghostfolio/ui/notifications'; -import { GfPageFabComponent } from '@ghostfolio/ui/page-fab'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; import { DataService } from '@ghostfolio/ui/services'; @@ -45,7 +45,7 @@ import { CreateOrUpdateAccessDialogParams } from './create-or-update-access-dial changeDetection: ChangeDetectionStrategy.OnPush, imports: [ GfAccessTableComponent, - GfPageFabComponent, + GfFabComponent, GfPremiumIndicatorComponent, IonIcon, MatButtonModule, diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html index c53807b35..62b1648bb 100644 --- a/apps/client/src/app/components/user-account-access/user-account-access.html +++ b/apps/client/src/app/components/user-account-access/user-account-access.html @@ -69,16 +69,6 @@ (accessToUpdate)="onUpdateAccess($event)" /> @if (hasPermissionToCreateAccess) { - - - - - + } diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts index 59821901a..a02a88592 100644 --- a/apps/client/src/app/pages/accounts/accounts-page.component.ts +++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts @@ -10,8 +10,8 @@ import { import { User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { GfAccountsTableComponent } from '@ghostfolio/ui/accounts-table'; +import { GfFabComponent } from '@ghostfolio/ui/fab'; import { NotificationService } from '@ghostfolio/ui/notifications'; -import { GfPageFabComponent } from '@ghostfolio/ui/page-fab'; import { DataService } from '@ghostfolio/ui/services'; import { @@ -40,7 +40,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba host: { class: 'page' }, imports: [ GfAccountsTableComponent, - GfPageFabComponent, + GfFabComponent, MatButtonModule, RouterModule ], diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html index 65b93fa20..1bdedbbb9 100644 --- a/apps/client/src/app/pages/accounts/accounts-page.html +++ b/apps/client/src/app/pages/accounts/accounts-page.html @@ -26,16 +26,6 @@ hasPermissionToCreateAccount && !user.settings.isRestrictedView ) { - - - - - + } diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts index 7face7763..f2a298500 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts @@ -12,7 +12,7 @@ import { import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { DateRange } from '@ghostfolio/common/types'; import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table'; -import { GfPageFabComponent } from '@ghostfolio/ui/page-fab'; +import { GfFabComponent } from '@ghostfolio/ui/fab'; import { DataService } from '@ghostfolio/ui/services'; import { @@ -44,7 +44,7 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa @Component({ imports: [ GfActivitiesTableComponent, - GfPageFabComponent, + GfFabComponent, IonIcon, MatButtonModule, MatSnackBarModule, diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.html b/apps/client/src/app/pages/portfolio/activities/activities-page.html index 7c499e681..f06947988 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.html +++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html @@ -43,16 +43,6 @@ hasPermissionToCreateActivity && !user.settings.isRestrictedView ) { - - - - - + } diff --git a/libs/ui/src/lib/fab/fab.component.html b/libs/ui/src/lib/fab/fab.component.html new file mode 100644 index 000000000..8fb49de1c --- /dev/null +++ b/libs/ui/src/lib/fab/fab.component.html @@ -0,0 +1,9 @@ + + + diff --git a/libs/ui/src/lib/page-fab/page-fab.component.scss b/libs/ui/src/lib/fab/fab.component.scss similarity index 100% rename from libs/ui/src/lib/page-fab/page-fab.component.scss rename to libs/ui/src/lib/fab/fab.component.scss diff --git a/libs/ui/src/lib/fab/fab.component.ts b/libs/ui/src/lib/fab/fab.component.ts new file mode 100644 index 000000000..7a4a4c169 --- /dev/null +++ b/libs/ui/src/lib/fab/fab.component.ts @@ -0,0 +1,16 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { Params, RouterModule } from '@angular/router'; +import { IonIcon } from '@ionic/angular/standalone'; + +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [IonIcon, MatButtonModule, RouterModule], + selector: 'gf-fab', + styleUrls: ['./fab.component.scss'], + templateUrl: './fab.component.html' +}) +export class GfFabComponent { + public readonly icon = input('add-outline'); + public readonly queryParams = input.required(); +} diff --git a/libs/ui/src/lib/fab/index.ts b/libs/ui/src/lib/fab/index.ts new file mode 100644 index 000000000..d03295245 --- /dev/null +++ b/libs/ui/src/lib/fab/index.ts @@ -0,0 +1 @@ +export * from './fab.component'; diff --git a/libs/ui/src/lib/page-fab/index.ts b/libs/ui/src/lib/page-fab/index.ts deleted file mode 100644 index 0981acbf8..000000000 --- a/libs/ui/src/lib/page-fab/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './page-fab.component'; diff --git a/libs/ui/src/lib/page-fab/page-fab.component.html b/libs/ui/src/lib/page-fab/page-fab.component.html deleted file mode 100644 index 40b372640..000000000 --- a/libs/ui/src/lib/page-fab/page-fab.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/libs/ui/src/lib/page-fab/page-fab.component.ts b/libs/ui/src/lib/page-fab/page-fab.component.ts deleted file mode 100644 index f716388c1..000000000 --- a/libs/ui/src/lib/page-fab/page-fab.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; - -@Component({ - changeDetection: ChangeDetectionStrategy.OnPush, - selector: 'gf-page-fab', - styleUrls: ['./page-fab.component.scss'], - templateUrl: './page-fab.component.html' -}) -export class GfPageFabComponent {}