#EX-378: Add balance column and table headers to category-list

frontend/Exence/src/app/data-model/modules/category/CategoryGet.ts

@@ -8,4 +8,5 @@ export interface CategoryGet {
 	color: string;
 	type: CategoryType;
 	note?: string;
+	balance: number;
 }

frontend/Exence/src/app/private/session/sessions-list/sessions-list.component.html

@@ -6,9 +6,8 @@ <h3 class="m-0 text-start fs-2 w-75">{{ 'sessionList.thisSession' | translate }}
 			<mat-icon class="flex-shrink-0" size="lg">desktop_windows</mat-icon>
 			<div class="flex-shink-1">
 				<div class="name text-truncate">
-					Windows 11 - YourPC
-					<!-- {{ currSession?.operatingSystem }} -
-					{{ currSession?.deviceName }} -->
+					{{ currSession?.operatingSystem }} -
+					{{ currSession?.deviceName }}
 				</div>
 				<div>
 					{{ 'sessionList.lastUsed' | translate }}
@@ -64,46 +63,6 @@ <h3 class="m-0 text-start fs-2 mt-5">{{ 'sessionList.otherSessions' | translate
 				</ex-button>
 			</div>
 		}
-
-		<mat-divider />
-		<h3 class="m-0 text-start fs-2 mt-5">{{ 'sessionList.otherSessions' | translate }}</h3>
-		<li class="d-flex flex-row flex-nowrap align-items-center justify-content-start gap-4 ms-2 my-4">
-			<mat-icon class="flex-shrink-0" size="lg">desktop_windows</mat-icon>
-			<div class="flex-shink-1">
-				<div class="name text-truncate">Arch Linux - LaptopARCH</div>
-				<div>
-					{{ 'sessionList.lastUsed' | translate }}
-					<span class="emphasis">3 days ago</span>
-				</div>
-			</div>
-			<ex-button iconButton color="error" matIcon="delete" class="flex-shrink-0" />
-		</li>
-		<mat-divider />
-		<li class="d-flex flex-row flex-nowrap align-items-center justify-content-start gap-4 ms-2 my-4">
-			<mat-icon class="flex-shrink-0" size="lg">desktop_windows</mat-icon>
-			<div class="flex-shink-1">
-				<div class="name text-truncate">IOS iPhone - Tamás iPhone-ja</div>
-				<div>
-					{{ 'sessionList.lastUsed' | translate }}
-					<span class="emphasis">1 month ago</span>
-				</div>
-			</div>
-			<ex-button iconButton color="error" matIcon="delete" class="flex-shrink-0" />
-		</li>
-		<mat-divider />
-		<div class="d-flex">
-			<ex-button
-				outlined
-				color="primary"
-				matIcon="delete"
-				collapsedStyle="filled"
-				collapseUnder="sm"
-				class="mt-2 delete-all"
-				(click)="deleteAllSessions()"
-			>
-				{{ 'sessionList.deleteAll' | translate }}
-			</ex-button>
-		</div>
 	</ul>
 </div>
 

frontend/Exence/src/app/private/transactions-and-categories/category-list/category-list.component.html

@@ -1,5 +1,5 @@
 <ex-data-table
-	[columns]="columns"
+	[columns]="columns()"
 	[actions]="actions"
 	[data]="data()"
 	[isLoading]="isLoading()"
@@ -9,7 +9,7 @@
 	inlineActions
 	(addClicked)="openCreate()"
 >
-	<ng-template exCell="name" let-row>
+	<ng-template exCell="title" let-row>
 		<div class="text-truncate ps-3 w-100 text-start">{{ row.name }}</div>
 	</ng-template>
 
@@ -22,4 +22,14 @@
 	<ng-template exCell="type" let-row>
 		{{ codeForCategoryType(row.type) | translate }}
 	</ng-template>
+
+	<ng-template exCell="amount" let-row>
+		<span
+			class="fw-semibold"
+			[class.income]="amountClass(row) === 'income'"
+			[class.expense]="amountClass(row) === 'expense'"
+		>
+			{{ row.balance | currency }}
+		</span>
+	</ng-template>
 </ex-data-table>

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

@@ -1,4 +1,5 @@
 import { Component, computed, inject, input } from '@angular/core';
+import { TranslocoService } from '@jsverse/transloco';
 import { CategoryGet } from '../../../data-model/modules/category/CategoryGet';
 import { CategoryCreate } from '../../../data-model/modules/category/CategoryCreate';
 import { CategoryType } from '../../../data-model/modules/category/CategoryType';
@@ -9,28 +10,31 @@ import { DialogService } from '../../../shared/dialog/dialog.service';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '../../../shared/pipes/translate.pipe';
 import { TranslationCode } from '../../../shared/i18n/translation-types';
+import { CurrencyPipe } from '../../../shared/pipes/currency.pipe';
 import { CreateCategoryDialogComponent } from '../create-category-dialog/create-category-dialog.component';
 import { PagedResponse } from '../../../data-model/modules/common/PagedResponse';
 
 @Component({
 	selector: 'ex-category-list',
 	templateUrl: './category-list.component.html',
 	styleUrl: './category-list.component.scss',
-	imports: [DataTableComponent, ExCellDirective, MatIconModule, TranslatePipe],
+	imports: [DataTableComponent, ExCellDirective, MatIconModule, TranslatePipe, CurrencyPipe],
 })
 export class CategoryListComponent {
 	private readonly categoryStore = inject(CategoryStore);
 	private readonly dialog = inject(DialogService);
+	private readonly translocoService = inject(TranslocoService);
 
 	title = input<string>('');
 	matIcon = input<string>();
 
-	columns: ColumnDef[] = [
-		{ key: 'name', header: '', width: '40%' },
-		{ key: 'icon', header: '', width: '60px' },
-		{ key: 'type', header: '', width: '100px' },
+	columns = computed<ColumnDef[]>(() => [
+		{ key: 'title', header: this.translocoService.translate('dataTable.title'), width: '40%' },
+		{ key: 'icon', header: this.translocoService.translate('dataTable.icon'), width: '60px' },
+		{ key: 'type', header: this.translocoService.translate('dataTable.type'), width: '100px' },
+		{ key: 'amount', header: this.translocoService.translate('literals.balance'), width: '120px' },
 		{ key: 'actions', header: '', width: '48px' },
-	];
+	]);
 
 	actions: TableAction<CategoryGet>[] = [
 		{
@@ -62,6 +66,12 @@ export class CategoryListComponent {
 		return `categoryType.${type}`;
 	}
 
+	amountClass(row: CategoryGet): 'income' | 'expense' | null {
+		if (row.type === CategoryType.INCOME) return 'income';
+		if (row.type === CategoryType.EXPENSE) return 'expense';
+		return row.balance > 0 ? 'income' : row.balance < 0 ? 'expense' : null;
+	}
+
 	async openCreate(): Promise<void> {
 		const result = await this.dialog.openNonModal(CreateCategoryDialogComponent, undefined);
 		if (!result) return;

frontend/Exence/src/integration/chart-widget/data/chart-widget.data.ts

@@ -1,6 +1,7 @@
 import { ChartWidget } from '../../../app/data-model/modules/statistics/ChartWidget';
 import { Timeframe } from '../../../app/data-model/modules/statistics/Timeframe';
 import { WidgetType } from '../../../app/data-model/modules/statistics/widget-config.model';
+import { SeriesPayload } from '../../../app/data-model/modules/statistics/WidgetDataPayload';
 
 export const MOCK_BAR_WIDGET: ChartWidget = {
 	id: 1,
@@ -46,4 +47,4 @@ export const MOCK_HEATMAP_WIDGET: ChartWidget = {
 	rows: 2,
 };
 
-export const MOCK_PAYLOAD = { series: [] } as unknown;
+export const MOCK_PAYLOAD: SeriesPayload = { series: [] };

frontend/Exence/src/integration/create-transaction-dialog/data/create-transaction-dialog.data.ts

@@ -3,7 +3,21 @@ import { MaterialIcon } from '../../../app/data-model/modules/category/MaterialI
 import { CategoryType } from '../../../app/data-model/modules/category/CategoryType';
 
 export const MOCK_CATEGORIES: CategoryGet[] = [
-	{ id: 1, name: 'Groceries', type: CategoryType.EXPENSE, icon: MaterialIcon.LOCAL_GROCERY_STORE, color: '#ff0000' },
-	{ id: 2, name: 'Salary', type: CategoryType.INCOME, icon: MaterialIcon.WORK, color: '#00ff00' },
-	{ id: 3, name: 'Shared', type: CategoryType.MIXED, icon: MaterialIcon.ACCOUNT_BALANCE, color: '#0000ff' },
+	{
+		id: 1,
+		name: 'Groceries',
+		type: CategoryType.EXPENSE,
+		icon: MaterialIcon.LOCAL_GROCERY_STORE,
+		color: '#ff0000',
+		balance: -150,
+	},
+	{ id: 2, name: 'Salary', type: CategoryType.INCOME, icon: MaterialIcon.WORK, color: '#00ff00', balance: 3000 },
+	{
+		id: 3,
+		name: 'Shared',
+		type: CategoryType.MIXED,
+		icon: MaterialIcon.ACCOUNT_BALANCE,
+		color: '#0000ff',
+		balance: 0,
+	},
 ];

frontend/Exence/src/unit/stores/tests/category.store.spec.ts

@@ -18,6 +18,7 @@ const mockCategory: CategoryGet = {
 	icon: MaterialIcon.SHOPPING_CART,
 	color: '#FF5733',
 	type: CategoryType.EXPENSE,
+	balance: -200,
 };
 
 const mockTopCategories: Record<CategoryType, CategorySummaryResponse[]> = {
@@ -106,6 +107,26 @@ describe('CategoryStore', () => {
 		});
 	});
 
+	// categoryResource
+	describe('categoryResource', () => {
+		async function waitForResource(): Promise<void> {
+			await new Promise(resolve => setTimeout(resolve, 0));
+			TestBed.flushEffects();
+		}
+
+		it('loads categories including balance from the service', async () => {
+			store.categoryResource.reload();
+			await waitForResource();
+			expect(store.categoryResource.value()).toEqual([mockCategory]);
+		});
+
+		it('exposes the balance on each loaded category', async () => {
+			store.categoryResource.reload();
+			await waitForResource();
+			expect(store.categoryResource.value()?.[0].balance).toBe(-200);
+		});
+	});
+
 	// deleteCategory
 	describe('deleteCategory', () => {
 		it('calls categoryService.delete with the category id', async () => {