Feature/reuse notification service for confirm dialogs (#3671)

* Reuse notification service for confirm dialogs

apps/client/src/app/components/access-table/access-table.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 { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 
@@ -29,7 +31,7 @@ export class AccessTableComponent implements OnChanges, OnInit {
   public defaultLanguageCode = DEFAULT_LANGUAGE_CODE;
   public displayedColumns = [];
 
-  public constructor() {}
+  public constructor(private notificationService: NotificationService) {}
 
   public ngOnInit() {}
 
@@ -46,12 +48,12 @@ export class AccessTableComponent implements OnChanges, OnInit {
   }
 
   public onDeleteAccess(aId: string) {
-    const confirmation = confirm(
-      $localize`Do you really want to revoke this granted access?`
-    );
-
-    if (confirmation) {
-      this.accessDeleted.emit(aId);
-    }
+    this.notificationService.confirm({
+      confirmFn: () => {
+        this.accessDeleted.emit(aId);
+      },
+      confirmType: ConfirmationDialogType.Warn,
+      title: $localize`Do you really want to revoke this granted access?`
+    });
   }
 }

apps/client/src/app/components/admin-market-data/admin-market-data.service.ts

@@ -1,3 +1,4 @@
+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';
@@ -18,52 +19,51 @@ export class AdminMarketDataService {
   ) {}
 
   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(() => {
-            this.notificationService.alert({
-              title: $localize`Oops! Could not delete profiles.`
-            });
+        forkJoin(deleteRequests)
+          .pipe(
+            catchError(() => {
+              this.notificationService.alert({
+                title: $localize`Oops! Could not delete profiles.`
+              });
 
-            return EMPTY;
-          }),
-          finalize(() => {
-            setTimeout(() => {
+              return EMPTY;
+            }),
+            finalize(() => {
               window.location.reload();
-            }, 300);
-          })
-        )
-        .subscribe(() => {});
-    }
+              setTimeout(() => {}, 300);
+            })
+          )
+          .subscribe(() => {});
+      },
+      confirmType: ConfirmationDialogType.Warn,
+      title: $localize`Do you really want to delete these profiles?`
+    });
   }
 
   public hasPermissionToDeleteAssetProfile({

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -1,3 +1,4 @@
+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';
@@ -140,39 +141,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) {
@@ -183,20 +187,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) {

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';
@@ -45,6 +47,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
+    private notificationService: NotificationService,
     private route: ActivatedRoute,
     private router: Router,
     private userService: UserService
@@ -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) {

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';
@@ -45,6 +47,7 @@ export class AdminTagComponent implements OnInit, OnDestroy {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
+    private notificationService: NotificationService,
     private route: ActivatedRoute,
     private router: Router,
     private userService: UserService
@@ -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) {

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,6 +41,7 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private impersonationStorageService: ImpersonationStorageService,
+    private notificationService: NotificationService,
     private userService: UserService
   ) {
     this.info = this.dataService.fetchInfo();
@@ -109,20 +112,18 @@ 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.notificationService.confirm({
+      confirmFn: () => {
+        this.dataService
+          .deleteUser(aId)
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe(() => {
             this.fetchAdminData();
-          }
-        });
-    }
+          });
+      },
+      confirmType: ConfirmationDialogType.Warn,
+      title: $localize`Do you really want to delete this user?`
+    });
   }
 
   public onImpersonateUser(aId: string) {

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -1,3 +1,4 @@
+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 {
@@ -146,32 +147,32 @@ 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(() => {
-            this.notificationService.alert({
-              title: $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: $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) {
@@ -240,15 +241,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?`
+      });
     }
   }
 

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<void>();
 
-  public constructor(private dateAdapter: DateAdapter<any>) {}
+  public constructor(
+    private dateAdapter: DateAdapter<any>,
+    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() {

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -1,5 +1,6 @@
 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';
@@ -216,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() {