From bf4dca3aaceb41ac0ccd0c536d8a28d620a2395b Mon Sep 17 00:00:00 2001 From: Daniel Idem Date: Tue, 13 Aug 2024 06:18:58 +0100 Subject: [PATCH] Feature/update confirmation dialog --- .../admin-market-data.service.ts | 85 ++++++++++-------- .../admin-overview.component.ts | 90 ++++++++++--------- .../admin-platform.component.ts | 19 ++-- .../admin-tag/admin-tag.component.ts | 19 ++-- .../admin-users/admin-users.component.ts | 33 +++---- .../user-account-settings.component.ts | 75 +++++++++------- .../account-balances.component.ts | 21 +++-- .../activities-table.component.ts | 35 ++++---- 8 files changed, 209 insertions(+), 168 deletions(-) diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.service.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.service.ts index 799606293..4d882826c 100644 --- a/apps/client/src/app/components/admin-market-data/admin-market-data.service.ts +++ b/apps/client/src/app/components/admin-market-data/admin-market-data.service.ts @@ -1,3 +1,5 @@ +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { ghostfolioScraperApiSymbolPrefix } from '@ghostfolio/common/config'; import { getCurrencyFromSymbol, isCurrency } from '@ghostfolio/common/helper'; @@ -7,57 +9,64 @@ import { } from '@ghostfolio/common/interfaces'; import { Injectable } from '@angular/core'; +import { title } from 'process'; import { EMPTY, catchError, finalize, forkJoin, takeUntil } from 'rxjs'; @Injectable() export class AdminMarketDataService { - public constructor(private adminService: AdminService) {} + public constructor( + private adminService: AdminService, + private notificationService: NotificationService + ) {} public deleteAssetProfile({ dataSource, symbol }: AssetProfileIdentifier) { - const confirmation = confirm( - $localize`Do you really want to delete this asset profile?` - ); - - if (confirmation) { - this.adminService - .deleteProfileData({ dataSource, symbol }) - .subscribe(() => { - setTimeout(() => { - window.location.reload(); - }, 300); - }); - } + this.notificationService.confirm({ + confirmFn: () => { + this.adminService + .deleteProfileData({ dataSource, symbol }) + .subscribe(() => { + setTimeout(() => { + window.location.reload(); + }, 300); + }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this asset profile?` + }); } public deleteAssetProfiles( aAssetProfileIdentifiers: AssetProfileIdentifier[] ) { - const confirmation = confirm( - $localize`Do you really want to delete these profiles?` - ); - - if (confirmation) { - const deleteRequests = aAssetProfileIdentifiers.map( - ({ dataSource, symbol }) => { - return this.adminService.deleteProfileData({ dataSource, symbol }); - } - ); + this.notificationService.confirm({ + confirmFn: () => { + const deleteRequests = aAssetProfileIdentifiers.map( + ({ dataSource, symbol }) => { + return this.adminService.deleteProfileData({ dataSource, symbol }); + } + ); - forkJoin(deleteRequests) - .pipe( - catchError(() => { - alert($localize`Oops! Could not delete profiles.`); + forkJoin(deleteRequests) + .pipe( + catchError(() => { + this.notificationService.alert({ + title: '', + message: $localize`Oops! Could not delete profiles.` + }); - return EMPTY; - }), - finalize(() => { - setTimeout(() => { - window.location.reload(); - }, 300); - }) - ) - .subscribe(() => {}); - } + return EMPTY; + }), + finalize(() => { + setTimeout(() => { + window.location.reload(); + }, 300); + }) + ) + .subscribe(() => {}); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete these profiles?` + }); } public hasPermissionToDeleteAssetProfile({ diff --git a/apps/client/src/app/components/admin-overview/admin-overview.component.ts b/apps/client/src/app/components/admin-overview/admin-overview.component.ts index b9c1f3a5f..d64c02dfc 100644 --- a/apps/client/src/app/components/admin-overview/admin-overview.component.ts +++ b/apps/client/src/app/components/admin-overview/admin-overview.component.ts @@ -1,3 +1,5 @@ +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { CacheService } from '@ghostfolio/client/services/cache.service'; import { DataService } from '@ghostfolio/client/services/data.service'; @@ -60,7 +62,8 @@ export class AdminOverviewComponent implements OnDestroy, OnInit { private cacheService: CacheService, private changeDetectorRef: ChangeDetectorRef, private dataService: DataService, - private userService: UserService + private userService: UserService, + private notificationService: NotificationService ) { this.info = this.dataService.fetchInfo(); @@ -136,39 +139,42 @@ export class AdminOverviewComponent implements OnDestroy, OnInit { } public onDeleteCoupon(aCouponCode: string) { - const confirmation = confirm( - $localize`Do you really want to delete this coupon?` - ); - - if (confirmation === true) { - const coupons = this.coupons.filter((coupon) => { - return coupon.code !== aCouponCode; - }); - this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons }); - } + this.notificationService.confirm({ + confirmFn: () => { + const coupons = this.coupons.filter((coupon) => { + return coupon.code !== aCouponCode; + }); + this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this coupon?` + }); } public onDeleteCurrency(aCurrency: string) { - const confirmation = confirm( - $localize`Do you really want to delete this currency?` - ); - - if (confirmation === true) { - const currencies = this.customCurrencies.filter((currency) => { - return currency !== aCurrency; - }); - this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies }); - } + this.notificationService.confirm({ + confirmFn: () => { + const currencies = this.customCurrencies.filter((currency) => { + return currency !== aCurrency; + }); + this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this currency?` + }); } public onDeleteSystemMessage() { - const confirmation = confirm( - $localize`Do you really want to delete this system message?` - ); - - if (confirmation === true) { - this.putAdminSetting({ key: PROPERTY_SYSTEM_MESSAGE, value: undefined }); - } + this.notificationService.confirm({ + confirmFn: () => { + this.putAdminSetting({ + key: PROPERTY_SYSTEM_MESSAGE, + value: undefined + }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this system message?` + }); } public onEnableDataGatheringChange(aEvent: MatSlideToggleChange) { @@ -179,20 +185,20 @@ export class AdminOverviewComponent implements OnDestroy, OnInit { } public onFlushCache() { - const confirmation = confirm( - $localize`Do you really want to flush the cache?` - ); - - if (confirmation === true) { - this.cacheService - .flush() - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe(() => { - setTimeout(() => { - window.location.reload(); - }, 300); - }); - } + this.notificationService.confirm({ + confirmFn: () => { + this.cacheService + .flush() + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe(() => { + setTimeout(() => { + window.location.reload(); + }, 300); + }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to flush the cache?` + }); } public onEnableUserSignupModeChange(aEvent: MatSlideToggleChange) { diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.ts b/apps/client/src/app/components/admin-platform/admin-platform.component.ts index 8a2004f8d..177c08e7e 100644 --- a/apps/client/src/app/components/admin-platform/admin-platform.component.ts +++ b/apps/client/src/app/components/admin-platform/admin-platform.component.ts @@ -1,5 +1,7 @@ import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto'; import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto'; +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -47,7 +49,8 @@ export class AdminPlatformComponent implements OnInit, OnDestroy { private dialog: MatDialog, private route: ActivatedRoute, private router: Router, - private userService: UserService + private userService: UserService, + private notificationService: NotificationService ) { this.route.queryParams .pipe(takeUntil(this.unsubscribeSubject)) @@ -75,13 +78,13 @@ export class AdminPlatformComponent implements OnInit, OnDestroy { } public onDeletePlatform(aId: string) { - const confirmation = confirm( - $localize`Do you really want to delete this platform?` - ); - - if (confirmation) { - this.deletePlatform(aId); - } + this.notificationService.confirm({ + confirmFn: () => { + this.deletePlatform(aId); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this platform?` + }); } public onUpdatePlatform({ id }: Platform) { diff --git a/apps/client/src/app/components/admin-tag/admin-tag.component.ts b/apps/client/src/app/components/admin-tag/admin-tag.component.ts index 5b5d5aa84..d53c74b5e 100644 --- a/apps/client/src/app/components/admin-tag/admin-tag.component.ts +++ b/apps/client/src/app/components/admin-tag/admin-tag.component.ts @@ -1,5 +1,7 @@ import { CreateTagDto } from '@ghostfolio/api/app/tag/create-tag.dto'; import { UpdateTagDto } from '@ghostfolio/api/app/tag/update-tag.dto'; +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -47,7 +49,8 @@ export class AdminTagComponent implements OnInit, OnDestroy { private dialog: MatDialog, private route: ActivatedRoute, private router: Router, - private userService: UserService + private userService: UserService, + private notificationService: NotificationService ) { this.route.queryParams .pipe(takeUntil(this.unsubscribeSubject)) @@ -75,13 +78,13 @@ export class AdminTagComponent implements OnInit, OnDestroy { } public onDeleteTag(aId: string) { - const confirmation = confirm( - $localize`Do you really want to delete this tag?` - ); - - if (confirmation) { - this.deleteTag(aId); - } + this.notificationService.confirm({ + confirmFn: () => { + this.deleteTag(aId); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this tag?` + }); } public onUpdateTag({ id }: Tag) { diff --git a/apps/client/src/app/components/admin-users/admin-users.component.ts b/apps/client/src/app/components/admin-users/admin-users.component.ts index 9d38ad541..dd74565a3 100644 --- a/apps/client/src/app/components/admin-users/admin-users.component.ts +++ b/apps/client/src/app/components/admin-users/admin-users.component.ts @@ -1,3 +1,5 @@ +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { AdminService } from '@ghostfolio/client/services/admin.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; @@ -39,7 +41,8 @@ export class AdminUsersComponent implements OnDestroy, OnInit { private changeDetectorRef: ChangeDetectorRef, private dataService: DataService, private impersonationStorageService: ImpersonationStorageService, - private userService: UserService + private userService: UserService, + private notificationService: NotificationService ) { this.info = this.dataService.fetchInfo(); @@ -109,20 +112,20 @@ export class AdminUsersComponent implements OnDestroy, OnInit { } public onDeleteUser(aId: string) { - const confirmation = confirm( - $localize`Do you really want to delete this user?` - ); - - if (confirmation) { - this.dataService - .deleteUser(aId) - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe({ - next: () => { - this.fetchAdminData(); - } - }); - } + this.notificationService.confirm({ + confirmFn: () => { + this.dataService + .deleteUser(aId) + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe({ + next: () => { + this.fetchAdminData(); + } + }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this user?` + }); } public onImpersonateUser(aId: string) { diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts b/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts index d4476776c..1d8c17d6d 100644 --- a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts +++ b/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts @@ -1,3 +1,5 @@ +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { KEY_STAY_SIGNED_IN, @@ -73,7 +75,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit { private snackBar: MatSnackBar, private tokenStorageService: TokenStorageService, private userService: UserService, - public webAuthnService: WebAuthnService + public webAuthnService: WebAuthnService, + private notificationService: NotificationService ) { const { baseCurrency, currencies } = this.dataService.fetchInfo(); @@ -144,30 +147,33 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit { } public onCloseAccount() { - const confirmation = confirm( - $localize`Do you really want to close your Ghostfolio account?` - ); - - if (confirmation) { - this.dataService - .deleteOwnUser({ - accessToken: this.deleteOwnUserForm.get('accessToken').value - }) - .pipe( - catchError(() => { - alert($localize`Oops! Incorrect Security Token.`); - - return EMPTY; - }), - takeUntil(this.unsubscribeSubject) - ) - .subscribe(() => { - this.tokenStorageService.signOut(); - this.userService.remove(); - - document.location.href = `/${document.documentElement.lang}`; - }); - } + this.notificationService.confirm({ + confirmFn: () => { + this.dataService + .deleteOwnUser({ + accessToken: this.deleteOwnUserForm.get('accessToken').value + }) + .pipe( + catchError(() => { + this.notificationService.alert({ + title: '', + message: $localize`Oops! Incorrect Security Token.` + }); + + return EMPTY; + }), + takeUntil(this.unsubscribeSubject) + ) + .subscribe(() => { + this.tokenStorageService.signOut(); + this.userService.remove(); + + document.location.href = `/${document.documentElement.lang}`; + }); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to close your Ghostfolio account?` + }); } public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) { @@ -236,15 +242,16 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit { this.changeDetectorRef.markForCheck(); } } else { - const confirmation = confirm( - $localize`Do you really want to remove this sign in method?` - ); - - if (confirmation) { - this.deregisterDevice(); - } else { - this.update(); - } + this.notificationService.confirm({ + confirmFn: () => { + this.deregisterDevice(); + }, + discardFn: () => { + this.update(); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to remove this sign in method?` + }); } } diff --git a/libs/ui/src/lib/account-balances/account-balances.component.ts b/libs/ui/src/lib/account-balances/account-balances.component.ts index f96fbd2e2..cdacabf07 100644 --- a/libs/ui/src/lib/account-balances/account-balances.component.ts +++ b/libs/ui/src/lib/account-balances/account-balances.component.ts @@ -1,4 +1,6 @@ import { CreateAccountBalanceDto } from '@ghostfolio/api/app/account-balance/create-account-balance.dto'; +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { validateObjectForForm } from '@ghostfolio/client/util/form.util'; import { getLocale } from '@ghostfolio/common/helper'; import { AccountBalancesResponse } from '@ghostfolio/common/interfaces'; @@ -81,7 +83,10 @@ export class GfAccountBalancesComponent private unsubscribeSubject = new Subject(); - public constructor(private dateAdapter: DateAdapter) {} + public constructor( + private dateAdapter: DateAdapter, + private notificationService: NotificationService + ) {} public ngOnInit() { this.dateAdapter.setLocale(this.locale); @@ -97,13 +102,13 @@ export class GfAccountBalancesComponent } public onDeleteAccountBalance(aId: string) { - const confirmation = confirm( - $localize`Do you really want to delete this account balance?` - ); - - if (confirmation) { - this.accountBalanceDeleted.emit(aId); - } + this.notificationService.confirm({ + confirmFn: () => { + this.accountBalanceDeleted.emit(aId); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this account balance?` + }); } public async onSubmitAccountBalance() { diff --git a/libs/ui/src/lib/activities-table/activities-table.component.ts b/libs/ui/src/lib/activities-table/activities-table.component.ts index a3caf5e1d..78ea2eb24 100644 --- a/libs/ui/src/lib/activities-table/activities-table.component.ts +++ b/libs/ui/src/lib/activities-table/activities-table.component.ts @@ -1,5 +1,7 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface'; import { GfAssetProfileIconComponent } from '@ghostfolio/client/components/asset-profile-icon/asset-profile-icon.component'; +import { ConfirmationDialogType } from '@ghostfolio/client/core/notification/confirmation-dialog/confirmation-dialog.type'; +import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config'; import { getDateFormatString, getLocale } from '@ghostfolio/common/helper'; @@ -120,7 +122,10 @@ export class GfActivitiesTableComponent private unsubscribeSubject = new Subject(); - public constructor(private router: Router) {} + public constructor( + private router: Router, + private notificationService: NotificationService + ) {} public ngOnInit() { if (this.showCheckbox) { @@ -212,23 +217,23 @@ export class GfActivitiesTableComponent } public onDeleteActivities() { - const confirmation = confirm( - $localize`Do you really want to delete these activities?` - ); - - if (confirmation) { - this.activitiesDeleted.emit(); - } + this.notificationService.confirm({ + confirmFn: () => { + this.activitiesDeleted.emit(); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete these activities?` + }); } public onDeleteActivity(aId: string) { - const confirmation = confirm( - $localize`Do you really want to delete this activity?` - ); - - if (confirmation) { - this.activityDeleted.emit(aId); - } + this.notificationService.confirm({ + confirmFn: () => { + this.activityDeleted.emit(aId); + }, + confirmType: ConfirmationDialogType.Warn, + title: $localize`Do you really want to delete this activity?` + }); } public onExport() {