diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
index b9cae63..1beab8b 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
@@ -3,10 +3,13 @@
@include displayMd {
.smaller-row {
flex-basis: 30%;
- height: 30%;
}
.bigger-row {
flex-basis: 70%;
}
+
+ mat-form-field {
+ width: 225px;
+ }
}
\ No newline at end of file
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
index 8b650e5..d0d3dfc 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
@@ -1,18 +1,30 @@
import { CommonModule } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
+import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatError, MatFormFieldModule, MatLabel } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Category } from '../../data-model/modules/category/Category';
import { PagedResponse } from '../../data-model/modules/common/PagedResponse';
import { RecurringTransactionsResponse } from '../../data-model/modules/transaction/RecurringTransactionsResponse';
import { Transaction } from '../../data-model/modules/transaction/Transaction';
+import { TransactionFilter } from '../../data-model/modules/transaction/TransactionFilter';
import { TransactionType } from '../../data-model/modules/transaction/TransactionType';
+import { BaseComponent } from '../../shared/base-component/base.component';
import { ButtonComponent } from '../../shared/button/button.component';
import { DataTableComponent } from '../../shared/data-table/data-table.component';
import { DisplaySizeService } from '../../shared/display-size.service';
+import { FilterMenuComponent } from '../../shared/filter-menu/filter-menu.component';
+import { InputClearButtonComponent } from '../../shared/input-clear-button/input-clear-button.component';
import { SnackbarService } from '../../shared/snackbar/snackbar.service';
+import { ValidatorComponent } from '../../shared/validator/validator.component';
import { CategoryService } from '../category.service';
import { CreateCategoryDialogComponent } from './create-category-dialog/create-category-dialog.component';
import { CreateTransactionDialogComponent, CreateTransactionDialogData } from './create-transaction-dialog/create-transaction-dialog.component';
@@ -24,21 +36,49 @@ import { TransactionService } from './transaction.service';
styleUrl: './transactions-and-categories.component.scss',
imports: [
CommonModule,
+ ReactiveFormsModule,
+ MatFormFieldModule,
MatDialogModule,
MatTabsModule,
MatIconModule,
MatTooltipModule,
+ MatInputModule,
+ MatCheckboxModule,
+ MatSelectModule,
+ MatBadgeModule,
+ MatDatepickerModule,
+ MatLabel,
+ MatError,
DataTableComponent,
ButtonComponent,
+ FilterMenuComponent,
+ ValidatorComponent,
+ InputClearButtonComponent,
],
})
-export class TransactionsAndCategoriesComponent implements OnInit {
+export class TransactionsAndCategoriesComponent extends BaseComponent implements OnInit {
private readonly transactionService = inject(TransactionService);
private readonly categoryService = inject(CategoryService);
private readonly dialog = inject(MatDialog);
private readonly snackbarService = inject(SnackbarService);
+ private readonly fb = inject(NonNullableFormBuilder);
readonly display = inject(DisplaySizeService);
+ transactionFilterForm = this.fb.group({
+ searchText: this.fb.control
('', [Validators.maxLength(100)]),
+ dateRange: this.fb.group({
+ dateFrom: this.fb.control(null),
+ dateTo: this.fb.control(null),
+ }),
+ amountRange: this.fb.group({
+ min: this.fb.control(null),
+ max: this.fb.control(null),
+ }),
+ category: this.fb.control(null),
+ type: this.fb.control(null),
+ recurring: this.fb.control(false),
+ });
+
transactions: PagedResponse = {} as PagedResponse;
recurringTransactions: RecurringTransactionsResponse = {} as RecurringTransactionsResponse;
categories: Category[] = [];
@@ -46,13 +86,29 @@ export class TransactionsAndCategoriesComponent implements OnInit {
selectedIndex = 0;
transactionTypes = TransactionType;
+ transactionTypesArr = Object.values(this.transactionTypes);
+
+ get canCreateTransaction(): boolean { return !!this.categories.length; }
- get canCreateTransaction(): boolean {
- return !!this.categories.length;
+ get appliedFiltersCount(): number {
+ return Object.entries(this.transactionFilterForm.controls).reduce((sum, [key, control]) => {
+ if (key === 'dateRange' || key === 'amountRange') {
+ const groupValue = control.value as Record;
+ const hasValue = Object.values(groupValue).some(v => !!v);
+ return sum + (hasValue ? 1 : 0);
+ }
+ if (control.value) return sum + 1;
+ return sum;
+ }, 0);
}
async ngOnInit(): Promise {
await this.initialize();
+
+ this.addSubscription(this.transactionFilterForm.valueChanges.subscribe(async () => {
+ if (this.transactionFilterForm.invalid) return;
+ this.transactions = await this.getTransactions();
+ }));
}
async initialize(): Promise {
@@ -67,7 +123,7 @@ export class TransactionsAndCategoriesComponent implements OnInit {
});
}
- public openCreateTransactionDialog(): void {
+ openCreateTransactionDialog(): void {
this.dialog.open(
CreateTransactionDialogComponent, undefined
).afterClosed().subscribe(
@@ -80,7 +136,7 @@ export class TransactionsAndCategoriesComponent implements OnInit {
);
}
- public openCreateCategoryDialog(): void {
+ openCreateCategoryDialog(): void {
this.dialog.open(
CreateCategoryDialogComponent, undefined
).afterClosed().subscribe(
@@ -96,4 +152,19 @@ export class TransactionsAndCategoriesComponent implements OnInit {
async onDataChanged(): Promise {
await this.initialize();
}
+
+ getTransactions(): Promise> {
+ const formValue = this.transactionFilterForm.getRawValue();
+ const filters = {
+ keyword: formValue.searchText,
+ dateFrom: formValue.dateRange.dateFrom?.toISOString(),
+ dateTo: formValue.dateRange.dateTo?.toISOString(),
+ categoryId: formValue.category?.id,
+ type: formValue.type,
+ amountFrom: formValue.amountRange.min,
+ amountTo: formValue.amountRange.max,
+ recurring: formValue.recurring,
+ } as TransactionFilter;
+ return this.transactionService.list(filters);
+ }
}
diff --git a/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts b/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
index 67b4d30..2ae794e 100644
--- a/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
+++ b/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
@@ -17,7 +17,6 @@ export const loggedInGuard: CanActivateFn = (
filter(user => user !== null),
take(1),
map((user) => {
- console.log(user)
if (user && currentUserService.isAuthenticated()) {
return true;
} else {
diff --git a/frontend/Exence/src/app/shared/data-table/data-table.component.scss b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
index 8cf83b1..51b3a48 100644
--- a/frontend/Exence/src/app/shared/data-table/data-table.component.scss
+++ b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
@@ -1,7 +1,7 @@
@import '../../../styles/imports.scss';
:host {
- height: 100%;
+ flex-grow: 1;
}
.table-container {
@@ -174,7 +174,6 @@ td.mat-column-actions mat-icon {
background-color: var(--primary-color);
}
-// TODO details
.detail-container {
display: flex;
diff --git a/frontend/Exence/src/app/shared/data-table/data-table.component.ts b/frontend/Exence/src/app/shared/data-table/data-table.component.ts
index 0994676..45ee761 100644
--- a/frontend/Exence/src/app/shared/data-table/data-table.component.ts
+++ b/frontend/Exence/src/app/shared/data-table/data-table.component.ts
@@ -233,7 +233,6 @@ export class DataTableComponent extends BaseComponent {
// }
}
- // TODO refactor
openCreateDialog(): void {
// All transactions
if (!this.type()) {
diff --git a/frontend/Exence/src/app/shared/error.service.ts b/frontend/Exence/src/app/shared/error.service.ts
index 56561e5..e6590f6 100644
--- a/frontend/Exence/src/app/shared/error.service.ts
+++ b/frontend/Exence/src/app/shared/error.service.ts
@@ -1,9 +1,9 @@
-import { inject, Injectable } from "@angular/core";
-import { SnackbarService } from "./snackbar/snackbar.service";
-import { HttpErrorResponse } from "@angular/common/http";
-import { ErrorResponse } from "../data-model/modules/ErrorResponse";
-import { SUPPRESS_ERROR_SNACKBAR } from "./auth/interceptors/refresh-token.interceptor";
-import { HttpSettings } from "./http/http.service";
+import { inject, Injectable } from '@angular/core';
+import { SnackbarService } from './snackbar/snackbar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorResponse } from '../data-model/modules/ErrorResponse';
+import { SUPPRESS_ERROR_SNACKBAR } from './auth/interceptors/refresh-token.interceptor';
+import { HttpSettings } from './http/http.service';
@Injectable({
providedIn: 'root'
@@ -14,6 +14,7 @@ export class ErrorService {
handleError(errorResponse: HttpErrorResponse, settings?: HttpSettings): void {
settings = settings ?? {};
+ // eslint-disable-next-line
const suppressFromInterceptor = (errorResponse as any).context?.get?.(SUPPRESS_ERROR_SNACKBAR) ?? false;
if (!settings.suppressErrorMessage && !suppressFromInterceptor) {
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
new file mode 100644
index 0000000..87141c5
--- /dev/null
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
@@ -0,0 +1,85 @@
+@if (display.isMd()) {
+
+ Add filter
+
+} @else {
+
+}
+
+
+
+
+
+
+
+
+
Filters
+
+
+
+
+
+
+
+ Show ({{ appliedFiltersCount() }})
+
+
+ Clear all
+
+
+