From 11913d72aa3a1e0fe3d9e6f10c019a6c3ab40c19 Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Mon, 26 May 2025 13:40:14 +0200
Subject: [PATCH] add history list (#94)

closes #68

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/94
---
 .../src/app/models/history.ts                 |  4 +++
 .../src/app/pages/history/history.module.ts   |  8 ++++-
 .../src/app/pages/history/history.page.html   | 11 ++++++-
 .../src/app/pages/history/history.page.scss   | 25 ++++++++++++++++
 .../src/app/pages/history/history.page.ts     | 29 +++++++++++++++++--
 .../src/app/pages/tabs/tabs-routing.module.ts |  2 +-
 .../src/app/pages/tabs/tabs.page.html         |  2 +-
 .../src/app/pages/tabs/tabs.page.ts           | 13 ++++++++-
 .../src/app/services/history.service.ts       | 17 +++++++++++
 9 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 frontend/allowance-planner-v2/src/app/models/history.ts
 create mode 100644 frontend/allowance-planner-v2/src/app/services/history.service.ts

diff --git a/frontend/allowance-planner-v2/src/app/models/history.ts b/frontend/allowance-planner-v2/src/app/models/history.ts
new file mode 100644
index 0000000..51cb06a
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/models/history.ts
@@ -0,0 +1,4 @@
+export interface History {
+    timestamp: string;
+    allowance: number;
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
index cab5991..83e9232 100644
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
@@ -5,6 +5,8 @@ import { FormsModule } from '@angular/forms';
 import { HistoryPage } from './history.page';
 
 import { HistoryPageRoutingModule } from './history-routing.module';
+import { provideHttpClient } from '@angular/common/http';
+import { HistoryService } from 'src/app/services/history.service';
 
 @NgModule({
   imports: [
@@ -13,6 +15,10 @@ import { HistoryPageRoutingModule } from './history-routing.module';
     FormsModule,
     HistoryPageRoutingModule
   ],
-  declarations: [HistoryPage]
+  declarations: [HistoryPage],
+  providers: [
+    provideHttpClient(),
+    HistoryService
+  ]
 })
 export class HistoryPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
index d95fff2..27d6fa5 100644
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
@@ -7,5 +7,14 @@
 </ion-header>
 
 <ion-content>
-
+  <div class="item" *ngFor="let history of history$ | async">
+    <div class="left">
+      <div class="date">{{ history.timestamp | date: 'yyyy-MM-dd' }}</div>
+      <div class="description">Seba made an oopsie</div>
+    </div>
+    <div
+      class="amount"
+      [ngClass]="{ 'negative': history.allowance < 0 }"
+    >{{ history.allowance }}</div>
+  </div>
 </ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
index e69de29..a66a48e 100644
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
@@ -0,0 +1,25 @@
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--line-color);
+    padding: 8px;
+}
+
+.date {
+    color: var(--line-color);
+}
+
+.description {
+    color: var(--font-color);
+}
+
+.amount {
+    margin-left: auto;
+    font-size: 22px;
+    color: var(--positive-amount-color);
+}
+
+.negative {
+    color: var(--negative-amount-color);
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
index b186478..e779e97 100644
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
@@ -1,4 +1,9 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ViewWillEnter } from '@ionic/angular';
+import { BehaviorSubject } from 'rxjs';
+import { History } from 'src/app/models/history';
+import { HistoryService } from 'src/app/services/history.service';
 
 @Component({
   selector: 'app-history',
@@ -6,8 +11,28 @@ import { Component } from '@angular/core';
   styleUrls: ['history.page.scss'],
   standalone: false,
 })
-export class HistoryPage {
+export class HistoryPage implements ViewWillEnter {
+  userId: number;
+  public history$: BehaviorSubject<Array<History>> = new BehaviorSubject<Array<History>>([]);
+  
 
-  constructor() {}
+  constructor(
+    private route: ActivatedRoute,
+    private historyService: HistoryService
+  ) {
+    this.userId = this.route.snapshot.params['id'];
+    this.getHistory();
+  }
 
+  ionViewWillEnter(): void {
+    this.getHistory();
+  }
+
+  getHistory() {
+    setTimeout(() => {
+      this.historyService.getHistoryList(this.userId).subscribe(history => {
+        this.history$.next(history);
+      })
+    }, 20);
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
index 60ba0ae..78202d6 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
@@ -8,7 +8,7 @@ const routes: Routes = [
     component: TabsPage,
     children: [
       {
-        path: 'history',
+        path: 'history/:id',
         loadChildren: () => import('../history/history.module').then(m => m.HistoryPageModule)
       },
       {
diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
index e20054d..cbe91f9 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
@@ -1,6 +1,6 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="history" href="/tabs/history">
+    <ion-tab-button [tab]="historyTab" [href]="historyNav">
       <mat-icon>history</mat-icon>
     </ion-tab-button>
     <ion-tab-button tab="allowance" href="/tabs/allowance">
diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
index 8dc4123..bd77ac3 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-tabs',
@@ -7,6 +8,16 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class TabsPage {
-  constructor() {}
+  historyNav = '';
+  historyTab = '';
+
+  constructor(private storageService: StorageService) {
+    this.storageService.getCurrentUserId().then((userId) => {
+        if (userId !== undefined && userId !== null) {
+          this.historyNav = `/tabs/history/${userId}`;
+          this.historyTab = `history/${userId}`;
+        }
+      });
+  }
 
 }
diff --git a/frontend/allowance-planner-v2/src/app/services/history.service.ts b/frontend/allowance-planner-v2/src/app/services/history.service.ts
new file mode 100644
index 0000000..02a74a9
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/services/history.service.ts
@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { History } from '../models/history';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HistoryService {
+    private url = 'http://localhost:8080/api';
+
+    constructor(private http: HttpClient) {}
+
+    getHistoryList(userId: number): Observable<Array<History>> {
+        return this.http.get<History[]>(`${this.url}/user/${userId}/history`);
+    }
+}
\ No newline at end of file