Fix confirmation dialog getting activated multiple times when more th…

…an one table on page.

front-end/src/app/app.component.html

@@ -1,4 +1,5 @@
 <div>
   <router-outlet></router-outlet>
+  <p-confirmDialog></p-confirmDialog>
   <app-download-tray></app-download-tray>
 </div>

front-end/src/app/app.module.ts

@@ -56,6 +56,7 @@ import { SharedModule } from './shared/shared.module';
 import { UsersModule } from './users/users.module';
 import { SchedulerAction, asyncScheduler } from 'rxjs';
 import { ReportsModule } from './reports/reports.module';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 
 // Save ngrx store to localStorage dynamically
 function localStorageSyncReducer(reducer: ActionReducer<AppState>): ActionReducer<AppState> {
@@ -127,6 +128,7 @@ const metaReducers: Array<MetaReducer<AppState, Action>> = [localStorageSyncRedu
     OverlayPanelModule,
     SharedModule,
     ReportsModule,
+    ConfirmDialogModule,
   ],
   providers: [
     CookieService,

front-end/src/app/reports/transactions/transaction-list/transaction-list-table-base.component.ts

@@ -256,6 +256,7 @@ export abstract class TransactionListTableBaseComponent extends TableListBaseCom
 
   public forceItemization(transaction: Transaction, itemized: boolean) {
     this.confirmationService.confirm({
+      key: 'transaction-itemization-dialog',
       message:
         'Changing the itemization status of this transaction will affect its associated transactions (such as memos).',
       header: 'Heads up!',

front-end/src/app/reports/transactions/transaction-list/transaction-list.component.html

@@ -37,7 +37,7 @@ <h1 class="gandhi-bold size-36">Transactions in this report</h1>
   ></app-transaction-loans-and-debts>
 </div>
 
-<p-confirmDialog #cd [style]="{ width: '450px' }">
+<p-confirmDialog #cd [style]="{ width: '450px' }" key="transaction-itemization-dialog">
   <ng-template pTemplate="footer">
     <span class="confirm-footer">
       <button type="button" pButton class="p-button-secondary" label="Cancel" (click)="cd.reject()"></button>

front-end/src/app/shared/components/table/table.component.html

@@ -130,4 +130,3 @@ <h1 class="m-0">{{ title }}</h1>
 </div>
 
 <p-toast></p-toast>
-<p-confirmDialog></p-confirmDialog>