EX-259: Add pill type switcher to Transaction dialog

frontend/Exence/src/app/data-model/modules/transaction/TransactionType.ts

@@ -1,4 +1,4 @@
 export enum TransactionType {
-	INCOME = 'INCOME',
 	EXPENSE = 'EXPENSE',
+	INCOME = 'INCOME',
 }

frontend/Exence/src/app/private/dashboard/categories/categories.component.html

@@ -66,7 +66,7 @@ <h2 class="header-2 text-center">Add categories to discover your spending patter
 	}
 	<mat-card-footer class="p-3">
 		<mat-button-toggle-group
-			class="mt-4"
+			class="mt-4 app-bg-color"
 			[hideSingleSelectionIndicator]="true"
 			(change)="onTypeChanged($event.value)"
 		>

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

@@ -2,6 +2,12 @@
 	<div ex-dialog-card-title>New transaction</div>
 
 	<form ex-dialog-card-content class="d-flex flex-column gap-3 py-2">
+		<mat-button-toggle-group [formControl]="form.controls.type" [hideSingleSelectionIndicator]="true" class="mb-3">
+			@for (type of transactionTypes | enumValue; track type) {
+				<mat-button-toggle [value]="type" class="type-{{ type.toLowerCase() }}">{{ type }}</mat-button-toggle>
+			}
+		</mat-button-toggle-group>
+
 		@let titleControl = form.controls.title;
 		<mat-form-field>
 			<mat-label>Title</mat-label>
@@ -62,19 +68,6 @@
 					<ex-validator [control]="categoryControl.category" />
 				</mat-error>
 			</mat-form-field>
-
-			@let typeControl = form.controls.type;
-			<mat-form-field>
-				<mat-label>Type</mat-label>
-				<mat-select [formControl]="typeControl">
-					@for (type of transactionTypes | enumValue; track type) {
-						<mat-option [value]="type">{{ type }}</mat-option>
-					}
-				</mat-select>
-				<mat-error>
-					<ex-validator [control]="typeControl" />
-				</mat-error>
-			</mat-form-field>
 		</div>
 		@let noteControl = form.controls.note;
 		<mat-form-field>

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

@@ -3,6 +3,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -41,6 +42,7 @@ export interface CreateTransactionDialogData {
 		MatDatepickerModule,
 		MatCheckboxModule,
 		MatIconModule,
+		MatButtonToggleModule,
 		InputClearButtonComponent,
 		ButtonComponent,
 		ValidatorComponent,

frontend/Exence/src/app/shared/data-table/data-table.component.html

@@ -181,17 +181,17 @@ <h3 class="d-flex align-items-center gap-2">
 										>
 											<div class="d-flex flex-column flex-md-row gap-4 p-4 w-100">
 												<div class="d-flex gap-4 w-100">
-													@let noteContol = $any(noteForm.controls)[row.id];
+													@let noteControl = $any(noteForm.controls)[row.id];
 													<mat-form-field>
 														<mat-label>Note</mat-label>
 														<textarea
 															matInput
 															cdkTextareaAutosize
 															cdkAutosizeMinRows="4"
-															[formControl]="noteContol"
+															[formControl]="noteControl"
 														></textarea>
 														<mat-error>
-															<ex-validator [control]="noteContol" />
+															<ex-validator [control]="noteControl" />
 														</mat-error>
 													</mat-form-field>
 

frontend/Exence/src/styles/components/button-toggle-group.scss

@@ -20,9 +20,13 @@ mat-button-toggle-group.mat-button-toggle-group {
 	width: 100%;
 	border: none;
 	border-radius: var(--mat-button-toggle-shape);
-	background-color: var(--secondary-color);
+	background-color: var(--app-card-color);
 	padding: 4px;
 
+	&.app-bg-color {
+		background-color: var(--app-background-color);
+	}
+
 	// Default sliding background for 3 buttons
 	&::before {
 		content: '';
@@ -84,5 +88,6 @@ mat-button-toggle-group.mat-button-toggle-group {
 
 	mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
 		color: var(--app-background-color);
+		--mat-button-toggle-selected-state-background-color: transparent;
 	}
 }