#EX-213: Add search option for category select menu

frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html

@@ -50,16 +50,24 @@ <h3 class="fs-1 fw-bold">New transaction</h3>
 		</div>
 
 		<div class="d-flex flex-column flex-md-row gap-3">
-			@let categoryControl = form.controls.category;
+			@let categoryControl = form.controls.category.controls;
 			<mat-form-field>
 				<mat-label>Category</mat-label>
-				<mat-select [formControl]="categoryControl">
-					@for (category of categories; track category.id) {
+				<mat-select [formControl]="categoryControl.category">
+					<mat-form-field subscriptSizing="dynamic" class="search-with-select">
+						<mat-label>Search</mat-label>
+						<input autoTrim matInput [formControl]="categoryControl.searchText" #searchCategoryInput>
+						<ex-input-clear [control]="categoryControl.searchText" />
+						<mat-error>
+							<ex-validator [control]="categoryControl.searchText"/>
+						</mat-error>
+					</mat-form-field>
+					@for (category of filteredCategories(); track category.id) {
 						<mat-option [value]="category">{{ `${category.name} - ${category.emoji}` }}</mat-option>
 					}
 				</mat-select>
 				<mat-error>
-					<ex-validator [control]="categoryControl" />
+					<ex-validator [control]="categoryControl.category" />
 				</mat-error>
 			</mat-form-field>
 

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

@@ -1,22 +1,24 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { startWith } from 'rxjs';
 import { Category } from '../../../data-model/modules/category/Category';
 import { Transaction } from '../../../data-model/modules/transaction/Transaction';
 import { TransactionType } from '../../../data-model/modules/transaction/TransactionType';
+import { AutoTrimDirective } from '../../../shared/auto-trim.directive';
 import { ButtonComponent } from '../../../shared/button/button.component';
 import { DialogWithBaseComponent } from '../../../shared/dialog/dialog.service';
 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 { TransactionService } from '../transaction.service';
-import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 export interface CreateTransactionDialogData {
 	type?: TransactionType;
@@ -28,17 +30,18 @@ export interface CreateTransactionDialogData {
 	templateUrl: './create-transaction-dialog.component.html',
 	styleUrl: './create-transaction-dialog.component.scss',
 	imports: [
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatCardModule,
-    MatSelectModule, MatDatepickerModule,
-    MatCheckboxModule,
-    InputClearButtonComponent,
-    ButtonComponent,
-    ValidatorComponent,
-    AutoTrimDirective
-],
+		ReactiveFormsModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatCardModule,
+		MatSelectModule,
+		MatDatepickerModule,
+		MatCheckboxModule,
+		InputClearButtonComponent,
+		ButtonComponent,
+		ValidatorComponent,
+		AutoTrimDirective,
+	],
 })
 export class CreateTransactionDialogComponent extends DialogWithBaseComponent<CreateTransactionDialogData | undefined, boolean> implements OnInit {
 	private readonly transactionService = inject(TransactionService);
@@ -48,9 +51,7 @@ export class CreateTransactionDialogComponent extends DialogWithBaseComponent<Cr
 
 	data = this.dialogRef.value;
 
-	transactionTypes: TransactionType[] = Object.values(TransactionType);
-
-	categories: Category[] = [];
+	transactionTypes: TransactionType[] = Object.values(TransactionType);	
 
 	form = this.fb.group({
 		title: this.fb.control<string>('', [Validators.required, Validators.maxLength(255)]),
@@ -59,11 +60,26 @@ export class CreateTransactionDialogComponent extends DialogWithBaseComponent<Cr
 		amount: this.fb.control<number | null>(null, [Validators.required, Validators.min(1)]),
 		type: this.fb.control<TransactionType>(TransactionType.EXPENSE, [Validators.required]),
 		recurring: this.fb.control<boolean>(false),
-		category: this.fb.control<Category | null>(null, [Validators.required]),
+		category: this.fb.group({
+			category: this.fb.control<Category | null>(null, [Validators.required]),
+			searchText: this.fb.control<string>('', [Validators.maxLength(25)]),
+		}),
+	});
+
+	private categories = signal<Category[]>([]);
+	private searchText = toSignal(this.form.controls.category.controls.searchText.valueChanges.pipe(startWith('')), { initialValue: '' });
+
+	filteredCategories = computed(() => {
+		const categories = this.categories();
+		const search = this.searchText();
+		if (!search) return categories;
+		return categories.filter(category => 
+			category.name.toLowerCase().includes(search.toLowerCase())
+		);
 	});
 
 	async ngOnInit(): Promise<void> {
-		this.categories = await this.categoryService.list();
+		this.categories.set(await this.categoryService.list());
 		if (this.data?.type) {
 			this.form.controls.type.setValue(this.data.type);
 		}
@@ -90,7 +106,7 @@ export class CreateTransactionDialogComponent extends DialogWithBaseComponent<Cr
 			amount: formValue.amount!,
 			type: formValue.type,
 			recurring: formValue.recurring,
-			categoryId: formValue.category!.id!,
+			categoryId: formValue.category!.category!.id!,
 		} as Transaction;
 		try {
 			const newTransaction = await this.transactionService.create(request);

frontend/Exence/src/styles/styles.scss

@@ -123,3 +123,19 @@ hr {
 mat-card.mat-mdc-card.categories mat-card-header .mat-mdc-card-header-text {
 	width: 100%;	
 }
+
+mat-form-field.mat-mdc-form-field.search-with-select {
+	padding: 0 0.5rem;
+	padding-bottom: 0.5rem;
+
+	.mat-mdc-text-field-wrapper {
+        background-color: transparent;
+    }
+
+	.mat-mdc-form-field-infix {
+		display: flex;
+		align-items: center;
+		padding: 0;
+		padding-top: 5px;
+	}
+}