From 383a24c0a8a953a813d422a74cb29d73b2b32d7d Mon Sep 17 00:00:00 2001
From: Avinay Basnet <basnetavinay@gmail.com>
Date: Wed, 20 Mar 2024 07:32:23 +0545
Subject: [PATCH] Recent activity store.

---
 .../buxx/data-access/recent-activity.store.ts | 16 ++++++
 src/app/buxx/feature/buxx.component.html      |  5 +-
 src/app/buxx/feature/buxx.component.ts        |  4 +-
 .../recent-transaction.component.html         | 46 +++++++++++++++
 .../recent-transaction.component.scss         |  0
 .../recent-transaction.component.spec.ts      | 21 +++++++
 .../recent-transaction.component.ts           | 56 +++++++++++++++++++
 src/app/shared/model/buxx.model.ts            |  4 +-
 8 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 src/app/buxx/data-access/recent-activity.store.ts
 create mode 100644 src/app/buxx/ui/recent-transaction/recent-transaction.component.html
 create mode 100644 src/app/buxx/ui/recent-transaction/recent-transaction.component.scss
 create mode 100644 src/app/buxx/ui/recent-transaction/recent-transaction.component.spec.ts
 create mode 100644 src/app/buxx/ui/recent-transaction/recent-transaction.component.ts

diff --git a/src/app/buxx/data-access/recent-activity.store.ts b/src/app/buxx/data-access/recent-activity.store.ts
new file mode 100644
index 0000000..49cd9b6
--- /dev/null
+++ b/src/app/buxx/data-access/recent-activity.store.ts
@@ -0,0 +1,16 @@
+import { computed, Injectable, Signal, signal, WritableSignal } from '@angular/core';
+import { DeleteTransaction, RecentTransaction, Transaction } from '../../shared/model/buxx.model';
+import { Subject } from 'rxjs';
+
+export type RecentActivityState = {
+  data: RecentTransaction[];
+}
+
+@Injectable()
+export class RecentActivityStore {
+
+  restore$: Subject<Transaction> = new Subject<Transaction>();
+  delete$: Subject<DeleteTransaction> = new Subject<DeleteTransaction>();
+  private state: WritableSignal<RecentActivityState> = signal({data: []});
+  readonly data: Signal<RecentTransaction[]> = computed(() => this.state().data);
+}
\ No newline at end of file
diff --git a/src/app/buxx/feature/buxx.component.html b/src/app/buxx/feature/buxx.component.html
index 97866ee..76439f1 100644
--- a/src/app/buxx/feature/buxx.component.html
+++ b/src/app/buxx/feature/buxx.component.html
@@ -1,8 +1,11 @@
 <as-toolbar (newTransactionEmitter)="saveTransaction($event)"></as-toolbar>
 <div class="flex flex-col items-center justify-center">
 	<as-summary [summary]="summaryStore.data()"></as-summary>
+	<div class="items-center justify-center w-3/4">
+		<as-recent-transaction></as-recent-transaction>
+	</div>
 	<mat-accordion class="flex flex-col w-3/4 sm:min-w-11/12 sm:mx-14">
-		<mat-expansion-panel class="w-full  sm:mx-14" [expanded]="false">
+		<mat-expansion-panel [expanded]="false" class="w-full sm:mx-14">
 			<mat-expansion-panel-header>
 				<mat-panel-title class="text-lg">
 					<mat-icon class="mr-2">tune</mat-icon>
diff --git a/src/app/buxx/feature/buxx.component.ts b/src/app/buxx/feature/buxx.component.ts
index b6471dc..3b5c2a1 100644
--- a/src/app/buxx/feature/buxx.component.ts
+++ b/src/app/buxx/feature/buxx.component.ts
@@ -48,6 +48,7 @@ import { queryInitialState, QueryStore } from '../data-access/query.store';
 import { environment } from '../../../environments/environment';
 import { PositiveNumberOnlyDirective } from '../../shared/util/positive-number.directive';
 import { MaskDateDirective } from '../../shared/util/date-mask.directive';
+import { RecentTransactionComponent } from '../ui/recent-transaction/recent-transaction.component';
 
 export const filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
   const date = control.get('date');
@@ -79,7 +80,8 @@ export const filterValidator: ValidatorFn = (control: AbstractControl): Validati
     MatSelectModule,
     SummaryComponent,
     PositiveNumberOnlyDirective,
-    MaskDateDirective
+    MaskDateDirective,
+    RecentTransactionComponent
   ],
   templateUrl: './buxx.component.html',
   styleUrl: './buxx.component.scss',
diff --git a/src/app/buxx/ui/recent-transaction/recent-transaction.component.html b/src/app/buxx/ui/recent-transaction/recent-transaction.component.html
new file mode 100644
index 0000000..b6f55bb
--- /dev/null
+++ b/src/app/buxx/ui/recent-transaction/recent-transaction.component.html
@@ -0,0 +1,46 @@
+@if (transactions.length) {
+	<mat-accordion class="flex flex-col w-full mb-4 sm:min-w-11/12 sm:mx-14">
+		<mat-expansion-panel [hideToggle]="true">
+			<mat-expansion-panel-header>
+				<mat-panel-title class="text-lg">
+					<mat-icon class="mr-2">layers</mat-icon>
+					Recent Activity
+				</mat-panel-title>
+			</mat-expansion-panel-header>
+		</mat-expansion-panel>
+
+		@for (transaction of transactions; track transaction.id) {
+			<mat-expansion-panel class="w-full">
+				<mat-expansion-panel-header>
+					<mat-panel-title>
+						<span class="mr-4 font-bold">
+							@if (transaction.isExpense) {
+								<mat-icon class="negative">trending_down</mat-icon>
+							} @else {
+								<mat-icon class="positive">trending_up</mat-icon>
+							}
+						</span>
+						{{ transaction.name }}
+						<span class="ml-2">
+						@if (transaction.action === 'DELETED') {
+							<mat-chip style="background: #6f1a07">deleted</mat-chip>
+						} @else if (transaction.action === 'SAVED') {
+							<mat-chip style="background: #607d8b">saved</mat-chip>
+						}
+					</span>
+					</mat-panel-title>
+					<mat-panel-description>Rs. {{ transaction.amount }}</mat-panel-description>
+					<mat-panel-description>{{ transaction.date | date: 'mediumDate' }}</mat-panel-description>
+				</mat-expansion-panel-header>
+				<div class="flex flex-row float-right sm:flex-col sm:float-none">
+					@if (transaction.action === 'DELETED') {
+						<button mat-raised-button color="accent" class="sm:mb-2" (click)="restore(transaction)">Restore</button>
+					} @else if (transaction.action === 'SAVED') {
+						<button mat-raised-button color="warn" class="sm:mb-2" (click)="delete(transaction)">Delete</button>
+					}
+				</div>
+				<p>{{ transaction.details }}</p>
+			</mat-expansion-panel>
+		}
+	</mat-accordion>
+}
diff --git a/src/app/buxx/ui/recent-transaction/recent-transaction.component.scss b/src/app/buxx/ui/recent-transaction/recent-transaction.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/buxx/ui/recent-transaction/recent-transaction.component.spec.ts b/src/app/buxx/ui/recent-transaction/recent-transaction.component.spec.ts
new file mode 100644
index 0000000..cfc95ac
--- /dev/null
+++ b/src/app/buxx/ui/recent-transaction/recent-transaction.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RecentTransactionComponent } from './recent-transaction.component';
+
+describe('RecentTransactionComponent', () => {
+  let component: RecentTransactionComponent;
+  let fixture: ComponentFixture<RecentTransactionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RecentTransactionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RecentTransactionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/buxx/ui/recent-transaction/recent-transaction.component.ts b/src/app/buxx/ui/recent-transaction/recent-transaction.component.ts
new file mode 100644
index 0000000..ddaaa0e
--- /dev/null
+++ b/src/app/buxx/ui/recent-transaction/recent-transaction.component.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { RecentTransaction } from '../../../shared/model/buxx.model';
+import { MatChipsModule } from '@angular/material/chips';
+import { DatePipe } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  selector: 'as-recent-transaction',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatChipsModule,
+    DatePipe,
+    MatCardModule
+  ],
+  templateUrl: './recent-transaction.component.html',
+  styleUrl: './recent-transaction.component.scss',
+})
+export class RecentTransactionComponent {
+
+  transactions: RecentTransaction[] = [
+    {
+      action: 'DELETED',
+      date: (new Date()).toString(),
+      id: 'sds',
+      name: 'Test Name',
+      isExpense: true,
+      details: 'sdfd',
+      amount: 222,
+      userId: 'sdfsdf'
+    },
+    {
+      action: 'SAVED',
+      date: (new Date()).toString(),
+      id: 'sds',
+      name: 'Test Name Again',
+      isExpense: true,
+      details: 'sdfd',
+      amount: 222,
+      userId: 'sdfsdf'
+    }
+  ];
+
+  restore(transaction: RecentTransaction) {
+
+  }
+
+  delete(transaction: RecentTransaction): void {
+
+  }
+}
diff --git a/src/app/shared/model/buxx.model.ts b/src/app/shared/model/buxx.model.ts
index 4c66c79..3b03407 100644
--- a/src/app/shared/model/buxx.model.ts
+++ b/src/app/shared/model/buxx.model.ts
@@ -43,4 +43,6 @@ export type Summary = {
   balance: number,
   income: number,
   expense: number
-};
\ No newline at end of file
+};
+
+export type RecentTransaction = Transaction & { action: 'DELETED' | 'SAVED' };
\ No newline at end of file