From e54944f7904842a67a6f3e5b73f3ee0d8283e443 Mon Sep 17 00:00:00 2001
From: Servan42 <charlot.servan@gmail.com>
Date: Fri, 1 Nov 2024 21:08:06 +0100
Subject: [PATCH] feat: added filtered sum on list screen

---
 .../ClientApp/src/app/pipe/number-to-money.pipe.ts         | 2 +-
 .../src/app/transactions/filters/filters.component.html    | 3 ++-
 .../src/app/transactions/filters/filters.component.ts      | 7 +++++--
 .../src/app/transactions/transactions.component.html       | 6 +++++-
 .../src/app/transactions/transactions.component.ts         | 3 +++
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/BankingService.Api/ClientApp/src/app/pipe/number-to-money.pipe.ts b/BankingService.Api/ClientApp/src/app/pipe/number-to-money.pipe.ts
index e076164..e1f66d4 100644
--- a/BankingService.Api/ClientApp/src/app/pipe/number-to-money.pipe.ts
+++ b/BankingService.Api/ClientApp/src/app/pipe/number-to-money.pipe.ts
@@ -8,7 +8,7 @@ export class NumberToMoneyPipe implements PipeTransform {
 
   transform(value: number | undefined): string {
     if (!value || isNaN(value))
-      return 'Invalid input';
+      return '0 €';
 
     const roundedValue = Math.round(value * 100) / 100;
     const roundedString = roundedValue.toFixed(2);
diff --git a/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.html b/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.html
index 849cddd..8e0a2d4 100644
--- a/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.html
+++ b/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.html
@@ -53,7 +53,8 @@
   </div>
 
   <div class="result-counter">
-    {{ resultCount }} results
+    <div>{{ resultCount }} results</div>
+    <div><b>{{ filteredAmount | numberToMoney }}</b></div>
   </div>
 
   <div class="filter-clear">
diff --git a/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.ts b/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.ts
index dae2d25..fe511c5 100644
--- a/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.ts
+++ b/BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.ts
@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TransactionFilters } from '../../model/transaction-filters';
 import { MatIconModule } from '@angular/material/icon';
+import { NumberToMoneyPipe } from "../../pipe/number-to-money.pipe";
 
 @Component({
   selector: 'app-filters',
@@ -27,8 +28,9 @@ import { MatIconModule } from '@angular/material/icon';
     MatFormFieldModule,
     MatDatepickerModule,
     MatMenuModule,
-    MatIconModule
-  ],
+    MatIconModule,
+    NumberToMoneyPipe
+],
 })
 export class FiltersComponent implements OnInit {
   filters: TransactionFilters = {
@@ -41,6 +43,7 @@ export class FiltersComponent implements OnInit {
 
   @Output() filterOutput = new EventEmitter<TransactionFilters>(undefined);
   @Input() resultCount: number = 0;
+  @Input() filteredAmount: number = 0;
 
   NO_FILTER: string = "NO_FILTER";
 
diff --git a/BankingService.Api/ClientApp/src/app/transactions/transactions.component.html b/BankingService.Api/ClientApp/src/app/transactions/transactions.component.html
index e4d6105..52c02cd 100644
--- a/BankingService.Api/ClientApp/src/app/transactions/transactions.component.html
+++ b/BankingService.Api/ClientApp/src/app/transactions/transactions.component.html
@@ -1,6 +1,10 @@
 <div class="card main-card">
   <app-import (uploadComplete)="refreshList()"></app-import>
-  <app-filters (filterOutput)="onFiltersChanged($event)" [resultCount]="(transactions | filterTransactions:filters).length"></app-filters>
+  <app-filters
+    (filterOutput)="onFiltersChanged($event)"
+    [resultCount]="(transactions | filterTransactions:filters).length"
+    [filteredAmount]="sumFlow(transactions | filterTransactions:filters)">
+  </app-filters>
   <!-- <app-transaction-headers></app-transaction-headers> -->
   <div *ngIf="(transactions | filterTransactions:filters).length > 0; else noData">
     <ul>
diff --git a/BankingService.Api/ClientApp/src/app/transactions/transactions.component.ts b/BankingService.Api/ClientApp/src/app/transactions/transactions.component.ts
index a2bc6a6..50b4f8b 100644
--- a/BankingService.Api/ClientApp/src/app/transactions/transactions.component.ts
+++ b/BankingService.Api/ClientApp/src/app/transactions/transactions.component.ts
@@ -43,4 +43,7 @@ export class TransactionsComponent implements OnInit {
     this.filters = filters;
   }
 
+  sumFlow(transactions: Transaction[]): number {
+    return transactions.reduce((acc, item) => acc + item.flow, 0);
+  }
 }