Release v2.3.0

BankingService.Api/ClientApp/src/app/app.component.css

@@ -41,7 +41,7 @@
   color: lightgray;
   font-family: Ubuntu;
   font-size: large;
-  margin-right: 15px
+  margin-right: 15px;
 }
 
 .header-link-current {
@@ -51,3 +51,8 @@
 .link-active {
   color: red;
 }
+
+.octicon-link {
+  fill: lightgray;
+  margin-left: auto;
+}

BankingService.Api/ClientApp/src/app/app.component.html

@@ -8,6 +8,10 @@
     <a routerLink="/dashboard" routerLinkActive="header-link-current" class="header-link">
       Dashboard
     </a>
+    <a class="octicon-link" href="https://github.com/Servan42/BankingService/issues" target="_blank"><svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true">
+      <path d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.127-1.554-.385-.207-.936-.715-.014-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.448-.275-5.005-1.224-5.005-5.432 0-1.196.426-2.186 1.128-2.956-.111-.275-.496-1.402.11-2.915 0 0 .921-.288 3.024 1.128a10.193 10.193 0 0 1 2.75-.371c.936 0 1.871.123 2.75.371 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.221 2.64.111 2.915.701.77 1.127 1.747 1.127 2.956 0 4.222-2.571 5.157-5.019 5.432.399.344.743 1.004.743 2.035 0 1.471-.014 2.654-.014 3.025 0 .289.206.632.756.522C19.851 20.979 23 16.854 23 12c0-6.077-4.922-11-11-11Z"></path>
+      </svg>
+    </a>
   </div>
   <div class="content">
     <router-outlet/>

BankingService.Api/ClientApp/src/app/dashboard/dashboard.component.html

@@ -3,28 +3,31 @@
     <div class="chart-title"><mat-icon fontIcon="calendar_month" class="icon"/><span>Date Selection</span></div>
     <app-date-selector (reportInput)="loadReport($event)"/>
   </div>
-  <div class="dasboards-container" *ngIf="hasData; else noData">
-    <div class="dashboard-line-container">
-      <div class="card dashboard-card">
-        <div class="chart-title"><mat-icon fontIcon="data_usage" class="icon"/><span>Categories</span></div>
-        <app-pie [inputData]="fullPieData"/>
+  @if (hasData) {
+    <div class="dasboards-container">
+      <div class="dashboard-line-container">
+        <div class="card dashboard-card">
+          <div class="chart-title"><mat-icon fontIcon="data_usage" class="icon"/><span>Categories</span></div>
+          <app-pie [inputData]="fullPieData"/>
+        </div>
+        <div class="card dashboard-card">
+          <div class="chart-title"><mat-icon fontIcon="data_usage" class="icon"/><span>Categories without costs</span></div>
+          <app-pie [inputData]="noCostsPieData"/>
+        </div>
       </div>
-      <div class="card dashboard-card">
-        <div class="chart-title"><mat-icon fontIcon="data_usage" class="icon"/><span>Categories without costs</span></div>
-        <app-pie [inputData]="noCostsPieData"/>
+      <div class="dashboard-line-container">
+        <div class="card dashboard-card">
+          <div class="chart-title"><mat-icon fontIcon="dashboard" class="icon"/><span>Misc Data</span></div>
+          <app-misc-data [report]="report"/>
+        </div>
+        <div class="card dashboard-card">
+          <div class="chart-title"><mat-icon fontIcon="stacked_line_chart" class="icon"/><span>Treasury per date</span></div>
+          <!-- https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart -->
+          <app-my-line-chart [inputData]="lineData"/>
+        </div>
       </div>
     </div>
-    <div class="dashboard-line-container">
-      <div class="card dashboard-card">
-        <div class="chart-title"><mat-icon fontIcon="dashboard" class="icon"/><span>Misc Data</span></div>
-        <app-misc-data [report]="report"/>
-      </div>
-      <div class="card dashboard-card">
-        <div class="chart-title"><mat-icon fontIcon="stacked_line_chart" class="icon"/><span>Treasury per date</span></div>
-        <!-- https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart -->
-        <app-my-line-chart [inputData]="lineData"/>
-      </div>
-    </div>
-  </div>
-  <ng-template #noData><div class="no-data">No data for this period.</div></ng-template>
+  } @else {
+    <div class="no-data">No data for this period.</div>
+  }
 </div>

BankingService.Api/ClientApp/src/app/dashboard/date-selector/date-selector.component.html

@@ -2,7 +2,9 @@
   <div class="month-selection">
     <h3>Quick Select Month</h3>
     <ul>
-      <li *ngFor="let m of months" (click)="onMonthSelected(m)" [id]="m" [ngClass]="{'selected': selectedMonth === m}">{{ m | monthToText }}</li>
+      @for (m of months; track m) {
+        <li (click)="onMonthSelected(m)" [id]="m" [ngClass]="{'selected': selectedMonth === m}">{{ m | monthToText }}</li>
+      }
     </ul>
   </div>
   <div class="custom-selection">

BankingService.Api/ClientApp/src/app/dashboard/misc-data/misc-data.component.html

@@ -1,14 +1,15 @@
 <div class="misc-data-container">
     <div class="misc-data-section">
       <div class="misc-title-container">
-        <h3 class="misc-title" *ngIf="!slideChecked; else withSavingsTitle">Without Savings</h3>
-        <ng-template #withSavingsTitle>
+        @if(!slideChecked) {
+          <h3 class="misc-title">Without Savings</h3>
+        } @else {
           <h3 class="misc-title" >With Savings</h3>
-        </ng-template>
+        }
         <mat-slide-toggle [(ngModel)]="slideChecked"/>
       </div>
 
-      <ng-container *ngIf="!slideChecked; else withSavingsData">
+      @if(!slideChecked) {
         <div class="line-container">
           <div>Positive Sum</div>
           <div>{{ report?.positiveSumWithoutSavings | numberToMoney }}</div>
@@ -21,8 +22,7 @@ <h3 class="misc-title" >With Savings</h3>
           <div>Balance</div>
           <div [ngClass]="{'green': isBalancePositive(false), 'red': !isBalancePositive(false)}">{{ report?.balanceWithoutSavings | numberToMoney }}</div>
         </div>
-      </ng-container>
-      <ng-template #withSavingsData>
+      } @else {
         <div class="line-container">
           <div>Positive Sum</div>
           <div>{{ report?.positiveSum| numberToMoney }}</div>
@@ -35,18 +35,20 @@ <h3 class="misc-title" >With Savings</h3>
           <div>Balance</div>
           <div [ngClass]="{'green': isBalancePositive(true), 'red': !isBalancePositive(true)}">{{ report?.balance | numberToMoney }}</div>
         </div>
-      </ng-template>
+      }
     </div>
     <div class="misc-data-section">
       <h3 class="misc-title">Highest Transactions</h3>
       <table>
         <tbody>
-          <tr *ngFor="let t of report?.highestTransactions">
-            <td>{{ t.date | date:'YYYY-MM-dd' }}</td>
-            <td>{{ t.flow | numberToMoney }}</td>
-            <td>{{ t.type }}<br>{{ t.category }}</td>
-            <td>{{ t.autoComment }}<br>{{ t.comment }}</td>
-          </tr>
+          @for(t of report?.highestTransactions; track t.id) {
+            <tr>
+              <td>{{ t.date | date:'YYYY-MM-dd' }}</td>
+              <td>{{ t.flow | numberToMoney }}</td>
+              <td>{{ t.type }}<br>{{ t.category }}</td>
+              <td>{{ t.autoComment }}<br>{{ t.comment }}</td>
+            </tr>
+          }
         </tbody>
       </table>
     </div>

BankingService.Api/ClientApp/src/app/pipe/filter-transactions.pipe.ts

@@ -17,11 +17,12 @@ export class FilterTransactionsPipe implements PipeTransform {
 
     const search = filters.search;
     if (search !== undefined && search !== '') {
+      const normalizedSearch = this.normalize(search);
       newTransactions = newTransactions.filter(
         (x) =>
-          x.label.toLowerCase().includes(search.toLowerCase()) ||
-          x.comment.toLowerCase().includes(search.toLowerCase()) ||
-          x.autoComment.toLowerCase().includes(search.toLowerCase())
+          this.normalize(x.label).includes(normalizedSearch) ||
+          this.normalize(x.comment).includes(normalizedSearch) ||
+          this.normalize(x.autoComment).includes(normalizedSearch)
       );
     }
 
@@ -43,4 +44,8 @@ export class FilterTransactionsPipe implements PipeTransform {
 
     return newTransactions;
   }
+
+  private normalize (str: string) {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+  }
 }

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);

BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.css

@@ -21,7 +21,7 @@
 
 }
 
-.clear-button {
+.line-end-button {
     font-size: larger;
     font-weight: 450;
     padding: 8px;
@@ -60,6 +60,11 @@
   padding: 1px;
 }
 
+.refresh-icon {
+  cursor: pointer;
+  padding-right: 5px;
+}
+
 ::ng-deep .mat-datepicker-toggle-default-icon {
     color: lightgray !important;
 }

BankingService.Api/ClientApp/src/app/transactions/filters/filters.component.html

@@ -39,30 +39,32 @@
   </div>
 
   <div class="filter-input">
-    <select class="search-text-field" [(ngModel)]="filters.type" (ngModelChange)="onMenuItemClicked()">
+    <select class="search-text-field" [(ngModel)]="filters.type" (ngModelChange)="onEmitFilters()">
       <option [value]="NO_FILTER">Filter type...</option>
-      <option *ngFor="let t of types">{{ t }}</option>
+      @for(t of types; track t) { <option>{{ t }}</option> }
     </select>
   </div>
 
   <div class="filter-input">
-    <select class="search-text-field" [(ngModel)]="filters.category" (ngModelChange)="onMenuItemClicked()">
+    <select class="search-text-field" [(ngModel)]="filters.category" (ngModelChange)="onEmitFilters()">
       <option [value]="NO_FILTER">Filter category...</option>
-      <option *ngFor="let c of categories">{{ c }}</option>
+      @for(c of categories; track c) { <option>{{ c }}</option> }
     </select>
   </div>
 
   <div class="result-counter">
-    {{ resultCount }} results
+    <div>{{ resultCount }} results</div>
+    <div><b>{{ filteredAmount | numberToMoney }}</b></div>
   </div>
 
   <div class="filter-clear">
     <button
-      class="big-button clear-button"
+      class="big-button line-end-button"
       (click)="onClearFilter()"
       [ngClass]="{'no-filter-button': !isAnyFilterSelected()}"
       [disabled]="!isAnyFilterSelected()">
       Clear Filters
     </button>
   </div>
+  <mat-icon fontIcon="refresh" class="refresh-icon" (click)="onEmitFilters()" title="Refresh with filters"/>
 </div>

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";
 
@@ -57,7 +60,7 @@ export class FiltersComponent implements OnInit {
     this.setCurrentMonth(true);
   }
 
-  onMenuItemClicked(): void {
+  onEmitFilters(): void {
     this.emitFilters();
   }
 

BankingService.Api/ClientApp/src/app/transactions/transaction-item/transaction-item.component.html

@@ -6,54 +6,49 @@
   <div class="info-panel">
     <div class="title-line">
       <span class="title">
-        <span *ngIf="areEditableFieldsDisabled; else commentInput">{{ transaction.autoComment }}{{ separator }}{{transaction.comment }}</span>
-        <ng-template #commentInput>
+        @if (areEditableFieldsDisabled) {
+          {{ transaction.autoComment }}{{ separator }}{{transaction.comment }}
+        } @else {
           {{ transaction.autoComment }}{{ separator }}
-          <input
+            <input
             type="text"
             class="editable-text-field"
             [(ngModel)]="transaction.comment"
             [disabled]="areEditableFieldsDisabled"
-          />
-        </ng-template>
+            (keydown.enter)="onSaveTransactionClicked()"
+            />
+        }
       </span>
       <span>
-        <mat-icon fontIcon="edit" class="edit-icon" (click)="onEditTransactionClicked()" *ngIf="areEditableFieldsDisabled; else saveAction"/>
-        <ng-template #saveAction><mat-icon fontIcon="save" class="save-icon" (click)="onSaveTransactionClicked()"/></ng-template>
+        @if(areEditableFieldsDisabled) {
+          <mat-icon fontIcon="edit" class="edit-icon" (click)="onEditTransactionClicked()"/>
+        } @else {
+          <mat-icon fontIcon="save" class="save-icon" (click)="onSaveTransactionClicked()"/>
+        }
       </span>
     </div>
     <div class="date-type-cat-line">
       <span>{{ transaction.date | date:'YYYY-MM-dd' }}</span>
       {{ ' . ' }}
       <span>
-        <span *ngIf="areEditableFieldsDisabled; else categoryInput">
+        @if(areEditableFieldsDisabled) {
           {{ transaction.category }}
-        </span>
-        <ng-template #categoryInput>
+        } @else {
           <select class="editable-text-field" [(ngModel)]="this.transaction.category">
-            <option *ngFor="let c of categories" [value]="c">{{ c }}</option>
+            @for(c of categories; track c) { <option [value]="c">{{ c }}</option> }
           </select>
-          <!-- <button class="dropdown-button" mat-button [matMenuTriggerFor]="menuCategory">{{ transaction.category }}</button>
-          <mat-menu #menuCategory="matMenu">
-            <button *ngFor="let c of categories" mat-menu-item (click)="categoryMenuItemClicked(c)">{{ c }}</button>
-          </mat-menu> -->
-        </ng-template>
+        }
       </span>
       <span>
-        <span *ngIf="!areEditableFieldsDisabled">
+        @if (!areEditableFieldsDisabled) {
           {{ ' . ' }}
           <select class="editable-text-field" [(ngModel)]="this.transaction.type">
-            <option *ngFor="let t of types" [value]="t">{{ t }}</option>
+            @for(t of types; track t) { <option [value]="t">{{ t }}</option> }
           </select>
-          <!-- <button class="dropdown-button" mat-button [matMenuTriggerFor]="menuType">{{ transaction.type }}</button>
-          <mat-menu #menuType="matMenu">
-            <button *ngFor="let t of types" mat-menu-item (click)="typesMenuItemClicked(t)">{{ t }}</button>
-          </mat-menu> -->
-        </span>
+        }
       </span>
     </div>
     <div class="label-line tooltip">
-      <!-- <span class="tooltiptext">{{ transaction.label }}</span> -->
       {{ transaction.label }}
     </div>
   </div>

BankingService.Api/ClientApp/src/app/transactions/transactions.component.html

@@ -1,13 +1,20 @@
 <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">
+  @if ((transactions | filterTransactions:filters).length > 0) {
     <ul>
-      <li *ngFor="let t of transactions | filterTransactions:filters">
-        <app-transaction-item [transaction]="t"></app-transaction-item>
-      </li>
+      @for (t of transactions | filterTransactions:filters; track t.id) {
+        <li>
+          <app-transaction-item [transaction]="t"></app-transaction-item>
+        </li>
+      }
     </ul>
-  </div>
-  <ng-template #noData><div class="no-data">No data to display.</div></ng-template>
+  } @else {
+    <div class="no-data">No data to display.</div>
+  }
 </div>