feat: add functionality to delete all imported finance records with confirmation dialog

Author: PhantomDave

PhantomDave.BankTracking.Api/Services/FinanceRecordService.cs

@@ -356,4 +356,20 @@ public async Task<MonthlyComparisonType> GetMonthlyComparisonAsync(
             LowestSpendingMonth = lowestSpending
         };
     }
+
+    public async Task<int> DeleteAllImportedFinanceRecordForAccountAsync(int accountId)
+    {
+        var records = await _unitOfWork.FinanceRecords.Query()
+            .Where(r => r.AccountId == accountId && r.Imported)
+            .ToListAsync();
+
+        var count = records.Count;
+        if (count == 0)
+        {
+            return 0;
+        }
+
+        await _unitOfWork.FinanceRecords.DeleteRangeAsync(records);
+        return await _unitOfWork.SaveChangesAsync();
+    }
 }

PhantomDave.BankTracking.Api/Types/Mutations/FinanceRecordMutation.cs

@@ -99,4 +99,21 @@ public async Task<bool> DeleteFinanceRecord(
         }
         return deletedRecord;
     }
+
+    [Authorize]
+    public async Task<bool> DeleteImportedFinanceRecord(
+    [Service] FinanceRecordService financeRecordService,
+    [Service] IHttpContextAccessor httpContextAccessor)
+    {
+        var deletedRecord = await financeRecordService.DeleteAllImportedFinanceRecordForAccountAsync(httpContextAccessor.GetAccountIdFromContext());
+        if (deletedRecord == 0)
+        {
+            throw new GraphQLException(
+            ErrorBuilder.New()
+                .SetMessage("Failed to delete finance record. Please check the provided data.")
+                .SetCode("BAD_USER_INPUT")
+                .Build());
+        }
+        return deletedRecord > 0;
+    }
 }

PhantomDave.BankTracking.Data/Repositories/IRepository.cs

@@ -11,6 +11,7 @@ public interface IRepository<T> where T : class
     Task<IEnumerable<T>> AddRangeAsync(IEnumerable<T> entity);
     Task<T> UpdateAsync(T entity);
     Task<bool> DeleteAsync(object id);
+    Task<int> DeleteRangeAsync(IEnumerable<T> entities);
     Task<T?> GetSingleOrDefaultAsync(Expression<Func<T, bool>> predicate);
     Task SaveAsync();
     IQueryable<T> Query();
@@ -70,6 +71,12 @@ public async Task<bool> DeleteAsync(object id)
         return true;
     }
 
+    public async Task<int> DeleteRangeAsync(IEnumerable<T> entities)
+    {
+        _dbSet.RemoveRange(entities);
+        return entities.Count();
+    }
+
     public async Task SaveAsync()
     {
         await _context.SaveChangesAsync();

frontend/src/app/components/settings-component/settings-component.css

@@ -44,3 +44,11 @@
   color: var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6));
   margin: 16px 0 0;
 }
+
+.danger-button {
+  margin-top: 16px;
+}
+
+.danger-button mat-icon {
+  margin-right: 8px;
+}

frontend/src/app/components/settings-component/settings-component.html

@@ -75,6 +75,13 @@
             </button>
           </div>
         </form>
+
+        <mat-divider></mat-divider>
+
+        <button mat-flat-button color="warn" (click)="onDeleteAllImportedData()" class="danger-button">
+          <mat-icon>warning</mat-icon>
+          Delete all imported data
+        </button>
       } @else {
         <p class="empty-state" role="status">We could not load your account information.</p>
       }

frontend/src/app/components/settings-component/settings-component.ts

@@ -2,11 +2,16 @@ import { ChangeDetectionStrategy, Component, effect, inject, OnInit } from '@ang
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { AccountService } from '../../models/account/account-service';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationDialogComponentComponent } from '../ui-library/confirmation-dialog-component/confirmation-dialog-component.component';
+import { FinanceRecordService } from '../../models/finance-record/finance-record-service';
 
 @Component({
   selector: 'app-settings-component',
@@ -17,14 +22,18 @@ import { AccountService } from '../../models/account/account-service';
     MatInputModule,
     MatButtonModule,
     MatProgressSpinnerModule,
+    MatDividerModule,
+    MatIconModule,
   ],
   templateUrl: './settings-component.html',
   styleUrl: './settings-component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SettingsComponent implements OnInit {
   private readonly accountService = inject(AccountService);
+  private readonly financeRecordService = inject(FinanceRecordService);
   private readonly formBuilder = inject(FormBuilder);
+  private readonly dialog = inject(MatDialog);
 
   protected readonly account = this.accountService.selectedAccount;
   protected readonly loading = this.accountService.loading;
@@ -88,4 +97,22 @@ export class SettingsComponent implements OnInit {
 
     await this.accountService.updateAccount(email!, balance ?? 0);
   }
+
+  protected async onDeleteAllImportedData() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponentComponent, {
+      data: {
+        title: 'Delete all imported data',
+        content: 'Are you sure you want to delete all imported data? This action cannot be undone.',
+        action: [
+          {
+            text: 'Delete',
+            action: async () => {
+              await this.financeRecordService.deleteAllImportedData();
+              dialogRef.close();
+            },
+          },
+        ],
+      },
+    });
+  }
 }

frontend/src/app/components/ui-library/confirmation-dialog-component/confirmation-dialog-component.component.css

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>{{ dataModel().title }}</h2>
+<mat-dialog-content>
+  <div [innerHTML]="dataModel().content"></div>
+  @if (dataModel().field) {
+    <div [innerHTML]="dataModel().field"></div>
+  }
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-flat-button color="primary" mat-dialog-close cdkFocusInitial>{{dataModel().defaultButtonText ?? 'Ok'}}</button>
+  @if (dataModel().action) {
+    @for (action of dataModel().action; track $index) {
+      <button mat-flat-button color="primary" (click)="action.action()">{{ action.text }}</button>
+    }
+  }
+</mat-dialog-actions>

frontend/src/app/components/ui-library/confirmation-dialog-component/confirmation-dialog-component.component.html

@@ -0,0 +1,26 @@
+import { Component, inject, model } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+export interface ConfirmationDialogModel {
+  title: string;
+  content: string;
+  field?: string;
+  defaultButtonText?: string;
+  action?: { text: string; action: () => void }[];
+}
+@Component({
+  selector: 'app-confirmation-dialog-component',
+  templateUrl: './confirmation-dialog-component.component.html',
+  styleUrls: ['./confirmation-dialog-component.component.css'],
+  imports: [MatDialogModule, MatButtonModule],
+})
+export class ConfirmationDialogComponentComponent {
+  readonly dialogRef = inject(MatDialogRef<ConfirmationDialogComponentComponent>);
+  readonly data = inject<ConfirmationDialogModel>(MAT_DIALOG_DATA);
+  readonly dataModel = model(this.data);
+
+  closeDialog() {
+    this.dialogRef.close();
+  }
+}

frontend/src/app/components/ui-library/confirmation-dialog-component/confirmation-dialog-component.component.ts

@@ -1,15 +1,16 @@
-import { inject, Injectable, Signal, signal } from '@angular/core';
-import { firstValueFrom, tap } from 'rxjs';
 import {
   CreateFinanceRecordGQL,
   DeleteFinanceRecordGQL,
+  DeleteImportedFinanceRecordGQL,
   GetFinanceRecordsGQL,
   GetMonthlyComparisonGQL,
   GetMonthlyComparisonQuery,
   RecurrenceFrequency,
-  UpdateFinanceRecordGQL,
+  UpdateFinanceRecordGQL
 } from '../../../generated/graphql';
-import { FinanceRecord } from './finance-record';
+import {inject, Injectable, Signal, signal} from '@angular/core';
+import {firstValueFrom, tap} from 'rxjs';
+import {FinanceRecord} from './finance-record';
 
 @Injectable({
   providedIn: 'root',
@@ -20,6 +21,7 @@ export class FinanceRecordService {
   private readonly updateFinanceRecordGQL = inject(UpdateFinanceRecordGQL);
   private readonly deleteFinanceRecordGQL = inject(DeleteFinanceRecordGQL);
   private readonly getMonthlyComparisonGQL = inject(GetMonthlyComparisonGQL);
+  private readonly deleteImportedFinanceRecordGQL = inject(DeleteImportedFinanceRecordGQL);
 
   private readonly _monthlyComparison = signal<
     GetMonthlyComparisonQuery['monthlyComparison'] | null
@@ -220,6 +222,21 @@ export class FinanceRecordService {
     };
   }
 
+  async deleteAllImportedData(): Promise<void> {
+    this._loading.set(true);
+    this._error.set(null);
+
+    try {
+      await firstValueFrom(
+        this.deleteImportedFinanceRecordGQL.mutate({ refetchQueries: ['getFinanceRecords'] }),
+      );
+    } catch (error) {
+      this._error.set(`Failed to delete imported finance records: ${error}`);
+    } finally {
+      this._loading.set(false);
+    }
+  }
+
   async getFinanceRecords(): Promise<void> {
     this._loading.set(true);
     this._error.set(null);