Merge pull request #1 from cynavi/main

Implement recent activity component and npr currency.

src/app/buxx/data-access/transaction.store.ts

@@ -72,7 +72,8 @@ export class TransactionStore {
         data: {
           transactions,
           count: response.count ?? 0
-        }
+        },
+        loaded: true
       }));
     });
   }

src/app/buxx/feature/buxx.component.html

@@ -1,6 +1,6 @@
 <as-toolbar (newTransactionEmitter)="saveTransaction($event)"></as-toolbar>
 <div class="flex flex-col items-center justify-center">
-	<as-summary [summary]="summaryStore.data()"></as-summary>
+  <as-summary [loaded]="summaryStore.loaded()" [summary]="summaryStore.data()"></as-summary>
 	<div class="items-center justify-center w-3/4">
 		<as-recent-activity [transactions]="recentActivityStore.data()"></as-recent-activity>
 	</div>
@@ -58,30 +58,34 @@
 			<button (click)="applyFilter()" [disabled]="!filterForm.valid" color="accent" mat-button>Apply</button>
 		</mat-expansion-panel>
 
-		@for (transaction of transactions$ | async; track transaction.id) {
-			<mat-expansion-panel class="w-full">
-				<mat-expansion-panel-header>
-					<mat-panel-title>
+		@if (transactionStore.loaded()) {
+			@for (transaction of transactions$ | async; 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 }}
-					</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">
-					<button mat-button color="accent" class="sm:mb-2" (click)="updateTransaction(transaction)">Update</button>
-					<button mat-button color="warn" (click)="deleteTransaction(transaction.id)">Delete</button>
-				</div>
-				<p>{{ transaction.details }}</p>
-			</mat-expansion-panel>
+							{{ transaction.name }}
+						</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">
+						<button mat-button color="accent" class="sm:mb-2" (click)="updateTransaction(transaction)">Update</button>
+						<button mat-button color="warn" (click)="deleteTransaction(transaction.id)">Delete</button>
+					</div>
+					<p>{{ transaction.details }}</p>
+				</mat-expansion-panel>
+			}
+		} @else {
+			<mat-progress-bar mode="indeterminate"></mat-progress-bar>
 		}
 
 		<mat-paginator aria-label="Select page"

src/app/buxx/feature/buxx.component.ts

@@ -48,6 +48,8 @@ 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 { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { MatProgressBar } from '@angular/material/progress-bar';
 import { RecentActivityComponent } from '../ui/recent-activity/recent-activity.component';
 import { RecentActivityStore } from '../data-access/recent-activity.store';
 
@@ -82,6 +84,8 @@ export const filterValidator: ValidatorFn = (control: AbstractControl): Validati
     SummaryComponent,
     PositiveNumberOnlyDirective,
     MaskDateDirective,
+    MatProgressSpinner,
+    MatProgressBar,
     RecentActivityComponent
   ],
   templateUrl: './buxx.component.html',
@@ -96,7 +100,7 @@ export class BuxxComponent implements OnInit, OnDestroy {
   readonly recentActivityStore = inject(RecentActivityStore);
   private readonly fb = inject(FormBuilder);
   private readonly dialog = inject(MatDialog);
-  private readonly transactionStore = inject(TransactionStore);
+  readonly transactionStore = inject(TransactionStore);
   private readonly queryStore = inject(QueryStore);
 
   private dataSource: MatTableDataSource<Transaction> = new MatTableDataSource<Transaction>([]);
@@ -192,6 +196,7 @@ export class BuxxComponent implements OnInit, OnDestroy {
       end = pointer - event.pageSize - 1;
     }
     this.queryStore.query$.next({
+      ...this.queryStore.query(),
       paginate: {
         pointer: event.previousPageIndex! < event.pageIndex
           ? pointer + environment.pageSize

src/app/buxx/ui/summary/summary.component.html

@@ -1,27 +1,49 @@
 <div class="flex flex-row sm:flex-col sm:min-w-11/12">
 	<mat-card class="w-64 h-40 mb-2 mr-2 items-center justify-center sm:min-w-full sm:mr-0">
 		<mat-card-header>
-			<mat-card-title>{{summary().balance | nprCurrency }}</mat-card-title>
+			@if (loaded()) {
+				<mat-card-title>Rs. {{ summary().balance | nprCurrency }}</mat-card-title>
+			} @else {
+				<mat-card-title class="animate-pulse">
+					<div class="h-4 bg-neutral-800 rounded-full w-28"></div>
+				</mat-card-title>
+			}
 			<mat-card-subtitle>
-				<mat-icon class="positive scale-150 mt-2 mr-2">arrow_upward_alt</mat-icon>balance
+				<mat-icon [ngClass]="summary().balance > 0 ? 'positive' : 'negative'" class="scale-150 mt-2 mr-2">wallet
+				</mat-icon>
+				balance
 			</mat-card-subtitle>
 		</mat-card-header>
 	</mat-card>
 
 	<mat-card class="w-64 h-40 mb-2 mr-2 items-center justify-center sm:min-w-full sm:mr-0">
 		<mat-card-header>
-			<mat-card-title>{{summary().income | nprCurrency}}</mat-card-title>
+			@if (loaded()) {
+				<mat-card-title>Rs. {{ summary().income | nprCurrency }}</mat-card-title>
+			} @else {
+				<mat-card-title class="animate-pulse">
+					<div class="h-4 bg-neutral-800 rounded-full w-28"></div>
+				</mat-card-title>
+			}
 			<mat-card-subtitle>
-				<mat-icon class="positive scale-150 mt-2 mr-2">arrow_upward_alt</mat-icon>income
+				<mat-icon class="positive scale-150 mt-2 mr-2">arrow_upward_alt</mat-icon>
+				income
 			</mat-card-subtitle>
 		</mat-card-header>
 	</mat-card>
 
 	<mat-card class="w-64 h-40 mb-2 mr-2 items-center justify-center sm:min-w-full sm:mr-0">
 		<mat-card-header>
-			<mat-card-title>{{summary().expense | nprCurrency}}</mat-card-title>
+			@if (loaded()) {
+				<mat-card-title>Rs. {{ summary().expense | nprCurrency }}</mat-card-title>
+			} @else {
+				<mat-card-title class="animate-pulse">
+					<div class="h-4 bg-neutral-800 rounded-full w-28"></div>
+				</mat-card-title>
+			}
 			<mat-card-subtitle>
-				<mat-icon class="negative scale-150 mt-2 mr-2">arrow_downward_alt</mat-icon>expense
+				<mat-icon class="negative scale-150 mt-2 mr-2">arrow_downward_alt</mat-icon>
+				expense
 			</mat-card-subtitle>
 		</mat-card-header>
 	</mat-card>

src/app/buxx/ui/summary/summary.component.ts

@@ -2,16 +2,18 @@ import { Component, input } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { Summary } from '../../../shared/model/buxx.model';
+import { NgClass } from '@angular/common';
 import { NprCurrencyPipe } from '../../../shared/util/npr-currency.pipe';
 
 @Component({
   selector: 'as-summary',
   standalone: true,
-  imports: [MatCardModule, MatIconModule, NprCurrencyPipe],
+  imports: [MatCardModule, MatIconModule, NgClass, NprCurrencyPipe],
   templateUrl: './summary.component.html',
   styleUrl: './summary.component.scss'
 })
 export class SummaryComponent {
 
   summary = input.required<Summary>();
+  loaded = input.required<boolean>();
 }

src/styles.scss

@@ -35,3 +35,23 @@ mat-accordion, mat-expansion-panel, mat-card, mat-paginator {
 mat-card {
   color: #CED4DA;
 }
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 15px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}