Feature/filter by year in transaction table (#97)

* Filter by year

Co-Authored-By: Valentin Zickner <valentin@coderworks.de>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added filtering by year in the transaction filtering component
+
 ### Changed
 
 - Hid unknown exchange in the position overview

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -23,6 +23,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { OrderWithAccount } from '@ghostfolio/api/app/order/interfaces/order-with-account.type';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
+import { format, parse, parseISO } from 'date-fns';
 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -258,7 +259,21 @@ export class TransactionsTableComponent
       .filter((item) => {
         return item !== undefined;
       })
-      .sort();
+      .sort((a, b) => {
+        const aFirstChar = a.charAt(0);
+        const bFirstChar = b.charAt(0);
+        const isANumber = aFirstChar >= '0' && aFirstChar <= '9';
+        const isBNumber = bFirstChar >= '0' && bFirstChar <= '9';
+
+        // Sort priority: text, followed by numbers
+        if (isANumber && !isBNumber) {
+          return 1;
+        } else if (!isANumber && isBNumber) {
+          return -1;
+        } else {
+          return a.toLowerCase() < b.toLowerCase() ? -1 : 1;
+        }
+      });
   }
 
   private getFilterableValues(
@@ -270,6 +285,7 @@ export class TransactionsTableComponent
     fieldValues.add(transaction.type);
     fieldValues.add(transaction.Account?.name);
     fieldValues.add(transaction.Account?.Platform?.name);
+    fieldValues.add(format(transaction.date, 'yyyy'));
 
     return [...fieldValues].filter((item) => {
       return item !== undefined;

apps/client/src/app/services/data.service.ts

@@ -23,6 +23,9 @@ import { User } from '@ghostfolio/api/app/user/interfaces/user.interface';
 import { UpdateUserSettingsDto } from '@ghostfolio/api/app/user/update-user-settings.dto';
 import { Order as OrderModel } from '@prisma/client';
 import { Account as AccountModel } from '@prisma/client';
+import { parseISO } from 'date-fns';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -81,8 +84,16 @@ export class DataService {
     return this.http.get<LookupItem[]>(`/api/symbol/lookup?query=${aQuery}`);
   }
 
-  public fetchOrders() {
+  public fetchOrders(): Observable<OrderModel[]> {
-    return this.http.get<OrderModel[]>('/api/order');
+    return this.http.get<any[]>('/api/order').pipe(
+      map((data) => {
+        for (const item of data) {
+          item.createdAt = parseISO(item.createdAt);
+          item.date = parseISO(item.date);
+        }
+        return data;
+      })
+    );
   }
 
   public fetchPortfolio() {