feat: Add delete functionality for finance records with GraphQL mutation and UI integration

Author: PhantomDave

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

@@ -84,4 +84,21 @@ public async Task<FinanceRecordType> UpdateFinanceRecord(
                     .Build());
         return FinanceRecordType.FromFinanceRecord(updatedRecord);
     }
+
+    [Authorize]
+    public async Task<bool> DeleteFinanceRecord(
+        int id,
+        [Service] FinanceRecordService financeRecordService)
+    {
+        var deletedRecord = await financeRecordService.DeleteFinanceRecordAsync(id);
+        if (!deletedRecord)
+        {
+            throw new GraphQLException(
+            ErrorBuilder.New()
+                .SetMessage("Failed to delete finance record. Please check the provided data.")
+                .SetCode("BAD_USER_INPUT")
+                .Build());
+        }
+        return deletedRecord;
+    }
 }

frontend/schema.graphql

@@ -71,6 +71,7 @@ type FinanceRecordType {
 type Mutation {
   createAccount(email: String!, password: String!): AccountType!
   createFinanceRecord(newRecord: FinanceRecordInput!): FinanceRecordType!
+  deleteFinanceRecord(id: Int!): Boolean!
   login(email: String!, password: String!): AuthPayload!
   loginAccount(email: String!, password: String!): AccountType
   updateFinanceRecord(amount: Decimal, currency: String, date: DateTime, description: String, id: Int!, isRecurring: Boolean, name: String, recurrenceEndDate: DateTime, recurrenceFrequency: RecurrenceFrequency): FinanceRecordType!

frontend/src/app/balance/balance-component/balance-component.html

@@ -1,21 +1,21 @@
 <h1>Your Account Balance</h1>
 <p>
-  Your current balance is: <strong>{{ balance() | currency }}</strong>
+  Your current balance is: <strong>{{ balance() | currency: defaultCurrency }}</strong>
 </p>
 <p>
   Total Recurring Expenses:
-  <strong>{{ totalRecurringExpenses() | currency }}</strong>
+  <strong>{{ totalRecurringExpenses() | currency: defaultCurrency }}</strong>
 </p>
 <p>
   Predicted balance at the end of the month:
-  <strong>{{ endOfMonthPrediction() | currency }}</strong>
+  <strong>{{ endOfMonthPrediction() | currency: defaultCurrency }}</strong>
 </p>
 <p>
   Average daily expense this month:
-  <strong>{{ averageDailyExpense() | currency }}</strong>
+  <strong>{{ averageDailyExpense() | currency: defaultCurrency }}</strong>
 </p>
 <p>
   Average daily income this month:
-  <strong>{{ averageDailyIncome() | currency }}</strong>
+  <strong>{{ averageDailyIncome() | currency: defaultCurrency }}</strong>
 </p>
 <p>Last updated on: {{ lastUpdated() | date: 'short' }}</p>

frontend/src/app/balance/balance-component/balance-component.ts

@@ -14,6 +14,9 @@ export class BalanceComponent implements OnInit {
   private readonly records = signal<readonly FinanceRecord[]>(
     this.financeRecordService.financeRecords(),
   );
+
+  readonly defaultCurrency = 'EUR';
+
   readonly balance = computed(() => {
     const records = this.records();
     const total = records.reduce((sum, record) => sum + record.amount, 0);

frontend/src/app/components/tracking/monthly-recap-component/monthly-recap-component.ts

@@ -81,8 +81,8 @@ class MonthlyRecapComponent implements OnInit {
     });
   }
 
-  onDeleteClicked(record: FinanceRecord) {
-    throw new Error('Method not implemented.');
+  async onDeleteClicked(record: FinanceRecord) {
+    await this.financeRecordService.deleteFinanceRecordAsync(record.id!);
   }
   onEditClicked(record: FinanceRecord) {
     const dialogRef = this.dialog.open(AddEntry, {

frontend/src/app/models/finance-record/finance-record-service.ts

@@ -2,6 +2,7 @@ import { inject, Injectable, Signal, signal } from '@angular/core';
 import { firstValueFrom, tap } from 'rxjs';
 import {
   CreateFinanceRecordGQL,
+  DeleteFinanceRecordGQL,
   GetFinanceRecordsGQL,
   RecurrenceFrequency,
   UpdateFinanceRecordGQL,
@@ -15,6 +16,7 @@ export class FinanceRecordService {
   private readonly createFinanceRecordGQL = inject(CreateFinanceRecordGQL);
   private readonly getFinanceRecordsGQL = inject(GetFinanceRecordsGQL);
   private readonly updateFinanceRecordGQL = inject(UpdateFinanceRecordGQL);
+  private readonly deleteFinanceRecordGQL = inject(DeleteFinanceRecordGQL);
 
   private readonly _selectedFinanceRecord = signal<FinanceRecord | null>(null);
   readonly selectedFinanceRecord: Signal<FinanceRecord | null> =
@@ -137,6 +139,30 @@ export class FinanceRecordService {
     }
   }
 
+  async deleteFinanceRecordAsync(id: number): Promise<void> {
+    this._loading.set(true);
+    this._error.set(null);
+
+    try {
+      const result = await firstValueFrom(
+        this.deleteFinanceRecordGQL.mutate({
+          variables: {
+            id,
+          },
+        }),
+      );
+
+      if (result?.data?.deleteFinanceRecord) {
+        this._selectedFinanceRecord.set(null);
+        this._financeRecords.update((records) => records.filter((record) => record.id !== id));
+      }
+    } catch (_error) {
+      this._error.set('Failed to fetch finance records');
+    } finally {
+      this._loading.set(false);
+    }
+  }
+
   private mapToFinanceRecord(data: {
     id: number;
     name: string;

frontend/src/app/models/finance-record/gql/delete-finance-record.mutation.graphql

@@ -0,0 +1,3 @@
+mutation DeleteFinanceRecord($id: Int!) {
+  deleteFinanceRecord(id: $id)
+}