#EX-294: Navigate with filters on clicking summary-container

backend/exence/src/main/java/com/exence/finance/modules/category/entity/Category.java

@@ -38,11 +38,11 @@
 @NoArgsConstructor
 @AllArgsConstructor
 @EqualsAndHashCode(
-    callSuper = false,
-    exclude = {"user", "transactions"})
+        callSuper = false,
+        exclude = {"user", "transactions"})
 @ToString(
-    callSuper = true,
-    exclude = {"user", "transactions"})
+        callSuper = true,
+        exclude = {"user", "transactions"})
 @Table(name = "category")
 @Filter(name = "userFilter", condition = "user_id = :userId")
 public class Category extends BaseAuditableEntity {

frontend/Exence/src/app/private/dashboard/dashboard.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, inject, OnInit } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { TransactionType } from '../../data-model/modules/transaction/TransactionType';
 import { CategoriesComponent, DateInterval } from '../../private/dashboard/categories/categories.component';
 import { SummaryContainerComponent } from '../../private/dashboard/summary-container/summary-container.component';
@@ -24,7 +23,6 @@ import { TransactionStore } from '../transactions-and-categories/transaction.sto
 	styleUrl: './dashboard.component.scss',
 	imports: [
 		CommonModule,
-		RouterModule,
 		CardSliderDirective,
 		SummaryContainerComponent,
 		DataTableComponent,

frontend/Exence/src/app/private/dashboard/summary-container/summary-container.component.html

@@ -1,5 +1,4 @@
-<!-- TODO navigate with filter on click -->
-<mat-card class="flex-row flex-nowrap align-items-center">
+<mat-card class="flex-row flex-nowrap align-items-center" (click)="navigate()">
 	<mat-card-header class="p-0">
 		<div ex-card-icon>
 			@if (svgIcon()) {

frontend/Exence/src/app/private/dashboard/summary-container/summary-container.component.scss

@@ -13,9 +13,11 @@ mat-card.mat-mdc-card {
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 	transition: background 0.3s ease-in-out;
 
-	// &:hover {
-	// 	background-color: lighten(var(--mat-card-elevated-container-color), 5%);
-	// }
+	cursor: pointer;
+
+	&:hover {
+		background-color: lighten(var(--mat-card-elevated-container-color), 5%);
+	}
 }
 
 .icon-container {

frontend/Exence/src/app/private/dashboard/summary-container/summary-container.component.ts

@@ -16,7 +16,7 @@ import { SvgIcons } from '../../../shared/svg-icons/svg-icons';
 	imports: [MatCardModule, MatIconModule, CurrencyPipe, MatButtonModule, RouterModule, AbsoluteValuePipe],
 })
 export class SummaryContainerComponent {
-	private readonly navigation = inject(NavigationService);
+	private readonly navigationService = inject(NavigationService);
 	private readonly router = inject(Router);
 
 	svgIcon = input<SvgIcons>();
@@ -27,27 +27,12 @@ export class SummaryContainerComponent {
 
 	transactionTypes = TransactionType;
 
-	// TODO navigate with filter on click
 	navigate(): void {
 		const queryParams: Record<string, string> = {};
-		// switch (this.data().type) {
-		// 	case SummaryType.INCOME:
-		// 		queryParams['amountFilter'] = 'gt';
-		// 		queryParams['amountValue'] = '0';
-		// 		break;
-		// 	case SummaryType.EXPENSE:
-		// 		queryParams['amountFilter'] = 'lt';
-		// 		queryParams['amountValue'] = '0';
-		// 		break;
-		// 	case SummaryType.OTHER:
-		// 		if (this.filterCondition()) {
-		// 			Object.entries(this.filterCondition()!).forEach(([key, value]) => {
-		// 				queryParams[key] = value;
-		// 			});
-		// 		}
-		// 		break;
-		// }
-		this.router.navigate([this.navigation.private().transactions()], {
+		if (this.type()) {
+			queryParams['type'] = this.type()!;
+		}
+		this.router.navigate([this.navigationService.private().transactions()], {
 			queryParams,
 		});
 	}

frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts

@@ -25,6 +25,8 @@ import { CategoryStore } from './category.store';
 import { CreateCategoryDialogComponent } from './create-category-dialog/create-category-dialog.component';
 import { CreateTransactionDialogComponent } from './create-transaction-dialog/create-transaction-dialog.component';
 import { TransactionStore } from './transaction.store';
+import { ActivatedRoute } from '@angular/router';
+import { mapToTransactionFilter } from '../../shared/util/utils';
 
 @Component({
 	selector: 'ex-transactions-and-categories',
@@ -55,6 +57,7 @@ export class TransactionsAndCategoriesComponent extends BaseComponent implements
 	private readonly dialog = inject(DialogService);
 	private readonly categoryStore = inject(CategoryStore);
 	private readonly fb = inject(NonNullableFormBuilder);
+	private readonly route = inject(ActivatedRoute);
 	readonly display = inject(DisplaySizeService);
 	readonly transactionStore = inject(TransactionStore);
 
@@ -107,6 +110,8 @@ export class TransactionsAndCategoriesComponent extends BaseComponent implements
 				this.transactionStore.updateFilters(newFilters as TransactionFilter);
 			}),
 		);
+
+		this.applyQueryParamsToFilters();
 	}
 
 	async openCreateTransactionDialog(): Promise<void> {
@@ -120,4 +125,10 @@ export class TransactionsAndCategoriesComponent extends BaseComponent implements
 	onScroll(type?: TransactionType, recurring?: boolean): void {
 		this.transactionStore.loadNextPage(type, recurring);
 	}
+
+	private applyQueryParamsToFilters(): void {
+		const queryParams = this.route.snapshot.queryParamMap;
+		const filters = mapToTransactionFilter(queryParams);
+		this.transactionFilterForm.patchValue(filters);
+	}
 }

frontend/Exence/src/app/shared/util/utils.ts

@@ -1,10 +1,26 @@
 import { Signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { AbstractControl } from '@angular/forms';
+import { ParamMap } from '@angular/router';
 import { map } from 'rxjs';
+import { TransactionFilter } from '../../data-model/modules/transaction/TransactionFilter';
+import { TransactionType } from '../../data-model/modules/transaction/TransactionType';
 
 export function toRawValueSignal<T>(control: AbstractControl<unknown, T>): Signal<T> {
 	return toSignal(control.valueChanges.pipe(map(() => control.getRawValue() as T)), {
 		initialValue: control.getRawValue() as T,
 	});
 }
+
+export function mapToTransactionFilter(queryParam: ParamMap): TransactionFilter {
+	const filter: TransactionFilter = {} as TransactionFilter;
+	if (queryParam.get('keyword')) filter.keyword = queryParam.get('keyword')!;
+	if (queryParam.get('dateFrom')) filter.dateFrom = queryParam.get('dateFrom')!;
+	if (queryParam.get('dateTo')) filter.dateTo = queryParam.get('dateTo')!;
+	if (queryParam.get('categoryId')) filter.categoryId = +queryParam.get('categoryId')!;
+	if (queryParam.get('type')) filter.type = queryParam.get('type')! as TransactionType;
+	if (queryParam.get('amountFrom')) filter.amountFrom = parseFloat(queryParam.get('amountFrom')!);
+	if (queryParam.get('amountTo')) filter.amountTo = parseFloat(queryParam.get('amountTo')!);
+	if (queryParam.get('recurring')) filter.recurring = queryParam.get('recurring') === 'true';
+	return filter;
+}