From f0cd09b85755dda9ce52f0b3a7406c591dd50f2b Mon Sep 17 00:00:00 2001 From: tamibalogh Date: Mon, 29 Dec 2025 23:55:54 +0100 Subject: [PATCH 1/2] #EX-193: Change categories summary component button logic --- .../categories/categories.component.html | 79 ++++++++++++------- .../categories/categories.component.ts | 31 +++++++- .../dashboard/dashboard.component.html | 4 +- 3 files changed, 81 insertions(+), 33 deletions(-) diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html index f4320f9..0f68a91 100644 --- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html +++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html @@ -1,35 +1,54 @@ - @if (categories() && categories().length) { - - -

Top categories

- - - - -
- @for (category of categories(); track category.id) { -
-
-
- {{ category.emoji }} - {{ category.name }} -
+ @if (hasCategories()) { + @if (hasTransactions()) { + + +

Top categories

+ + + + +
+ @for (category of categorySummaries(); track category.id) { +
+
+
+ {{ category.emoji }} + {{ category.name }} +
-
{{ calcPercentage(category.totalAmount) }}%
+
{{ calcPercentage(category.totalAmount) }}%
+
+
- -
- } -
- + } +
+ + } @else { + +
+

Add transactions to discover your spending patterns!

+
+ + + Create transaction + + } } @else {
@@ -44,7 +63,7 @@

Add categories to discover your spending patter collapseUnder="md" filled (click)="openCreateCategoryDialog()" - >CreateCreate category } diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts index de6b1dd..be324ac 100644 --- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts +++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts @@ -1,4 +1,4 @@ -import { Component, inject, input } from '@angular/core'; +import { Component, inject, input, output } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; import { MatDialog } from '@angular/material/dialog'; import { MatProgressBarModule } from '@angular/material/progress-bar'; @@ -9,6 +9,8 @@ import { ButtonComponent } from '../../../shared/button/button.component'; import { DisplaySizeService } from '../../../shared/display-size.service'; import { SnackbarService } from '../../../shared/snackbar/snackbar.service'; import { CreateCategoryDialogComponent } from '../../transactions-and-categories/create-category-dialog/create-category-dialog.component'; +import { CreateTransactionDialogComponent, CreateTransactionDialogData } from '../../transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component'; +import { Transaction } from 'src/app/data-model/modules/transaction/Transaction'; // TODO move to interval filter component when created export enum DateInterval { @@ -34,7 +36,10 @@ export class CategoriesComponent extends BaseComponent { private readonly dialog = inject(MatDialog); totalExpense = input.required(); - categories = input.required(); + categorySummaries = input.required(); + categories = input.required(); + + dataChangedEvent = output(); openCreateCategoryDialog(): void { this.dialog.open( @@ -42,11 +47,33 @@ export class CategoriesComponent extends BaseComponent { ).afterClosed().subscribe((newCategory) => { if (newCategory) { this.snackbarService.showSuccess(`Category '${newCategory.emoji}' created successfully!`); + this.dataChangedEvent.emit(); } }); } + public openCreateTransactionDialog(): void { + this.dialog.open( + CreateTransactionDialogComponent, undefined + ).afterClosed().subscribe( + async (newTransaction?: Transaction) => { + if (newTransaction) { + this.snackbarService.showSuccess(`Transaction '${newTransaction.title.slice(0, 10)}${newTransaction.title.length > 10 ? '...' : ''}' created successfully!`); + this.dataChangedEvent.emit(); + } + } + ); + } + calcPercentage(amount: number): number { return Math.floor((amount / this.totalExpense()) * 100); } + + hasCategories(): boolean { + return this.categories().length > 0; + } + + hasTransactions(): boolean { + return this.categorySummaries().length > 0; + } } diff --git a/frontend/Exence/src/app/private/dashboard/dashboard.component.html b/frontend/Exence/src/app/private/dashboard/dashboard.component.html index 1768232..5f1c88a 100644 --- a/frontend/Exence/src/app/private/dashboard/dashboard.component.html +++ b/frontend/Exence/src/app/private/dashboard/dashboard.component.html @@ -38,7 +38,9 @@

From 303a1a6600075d688b0a2ea3fe26629998397620 Mon Sep 17 00:00:00 2001 From: tamibalogh Date: Mon, 12 Jan 2026 18:31:36 +0100 Subject: [PATCH 2/2] Fix unneeded async, add get, change checking logic --- .../categories/categories.component.html | 120 ++++++++++-------- .../categories/categories.component.ts | 10 +- 2 files changed, 70 insertions(+), 60 deletions(-) diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html index 0f68a91..fbf62c9 100644 --- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.html +++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.html @@ -1,70 +1,80 @@ - @if (hasCategories()) { - @if (hasTransactions()) { - - -

Top categories

- - - - -
- @for (category of categorySummaries(); track category.id) { -
-
-
- {{ category.emoji }} - {{ category.name }} -
+ @if (hasTransactions) { + + +

Top categories

+ + + + +
+ @for (category of categorySummaries(); track category.id) { +
+
+
+ {{ category.emoji }} + {{ category.name }} +
-
{{ calcPercentage(category.totalAmount) }}%
+
+ {{ calcPercentage(category.totalAmount) }}%
-
- } + +
+ } +
+ + } @else { + @if (hasCategories) { + +
+

+ Add transactions to discover your spending patterns! +

+ + Create transaction + } @else {
-

Add transactions to discover your spending patterns!

+

+ Add categories to discover your spending patterns! +

- Create transaction - + Create category + } - } @else { - -
-

Add categories to discover your spending patterns!

-
- - - Create category - } diff --git a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts index be324ac..e426af0 100644 --- a/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts +++ b/frontend/Exence/src/app/private/dashboard/categories/categories.component.ts @@ -41,10 +41,10 @@ export class CategoriesComponent extends BaseComponent { dataChangedEvent = output(); - openCreateCategoryDialog(): void { + public openCreateCategoryDialog(): void { this.dialog.open( CreateCategoryDialogComponent, undefined - ).afterClosed().subscribe((newCategory) => { + ).afterClosed().subscribe((newCategory?: Category) => { if (newCategory) { this.snackbarService.showSuccess(`Category '${newCategory.emoji}' created successfully!`); this.dataChangedEvent.emit(); @@ -56,7 +56,7 @@ export class CategoriesComponent extends BaseComponent { this.dialog.open( CreateTransactionDialogComponent, undefined ).afterClosed().subscribe( - async (newTransaction?: Transaction) => { + (newTransaction?: Transaction) => { if (newTransaction) { this.snackbarService.showSuccess(`Transaction '${newTransaction.title.slice(0, 10)}${newTransaction.title.length > 10 ? '...' : ''}' created successfully!`); this.dataChangedEvent.emit(); @@ -69,11 +69,11 @@ export class CategoriesComponent extends BaseComponent { return Math.floor((amount / this.totalExpense()) * 100); } - hasCategories(): boolean { + get hasCategories(): boolean { return this.categories().length > 0; } - hasTransactions(): boolean { + get hasTransactions(): boolean { return this.categorySummaries().length > 0; } }