Moved to Angular v20 and Tailwind v4 plus all related dependencies

Renamed Docker directory.

Also serving static files from FastAPI.

overlord/src/app/payment/payment-accounts.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Account } from '../core/account';
-
 import { paymentAccountsResolver } from './payment-accounts.resolver';
 
 describe('paymentAccountsResolver', () => {

overlord/src/app/payment/payment-dialog.component.ts

@@ -1,19 +1,19 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatButton } from '@angular/material/button';
 import { MatOption } from '@angular/material/core';
 import {
   MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
   MatDialogActions,
   MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
 } from '@angular/material/dialog';
-import { MatFormField, MatLabel, MatHint, MatPrefix } from '@angular/material/form-field';
+import { MatFormField, MatHint, MatLabel, MatPrefix } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
@@ -29,7 +29,6 @@ import { MathService } from '../shared/math.service';
   selector: 'app-payment-dialog',
   templateUrl: './payment-dialog.component.html',
   styleUrls: ['./payment-dialog.component.css'],
-  standalone: true,
   imports: [
     MatDialogTitle,
     CdkScrollable,
@@ -52,6 +51,15 @@ import { MathService } from '../shared/math.service';
   ],
 })
 export class PaymentDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<PaymentDialogComponent>>(MatDialogRef);
+  data = inject<{
+    journal: Journal;
+    date: string;
+  }>(MAT_DIALOG_DATA);
+
+  private math = inject(MathService);
+  private accountSer = inject(AccountService);
+
   accounts: Observable<Account[]>;
   form: FormGroup<{
     account: FormControl<string | null>;
@@ -61,12 +69,7 @@ export class PaymentDialogComponent implements OnInit {
   account: Account = new Account();
   accBal: AccountBalance | null = null;
 
-  constructor(
-    public dialogRef: MatDialogRef<PaymentDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { journal: Journal; date: string },
-    private math: MathService,
-    private accountSer: AccountService,
-  ) {
+  constructor() {
     this.form = new FormGroup({
       account: new FormControl(''),
       amount: new FormControl('', { nonNullable: true }),

overlord/src/app/payment/payment.component.ts

@@ -1,37 +1,38 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, HostListener } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import {
   MatCard,
-  MatCardHeader,
-  MatCardTitleGroup,
-  MatCardTitle,
-  MatCardContent,
   MatCardActions,
+  MatCardContent,
+  MatCardHeader,
+  MatCardTitle,
+  MatCardTitleGroup,
 } from '@angular/material/card';
-import { MatChipInputEvent, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput } from '@angular/material/chips';
+import { MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRemove, MatChipRow } from '@angular/material/chips';
 import { MatOption } from '@angular/material/core';
-import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
+import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSuffix, MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';
+import { MatFormField, MatHint, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
 import { MatSelect } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatSort } from '@angular/material/sort';
 import {
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
   MatCell,
-  MatHeaderRowDef,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
   MatHeaderRow,
-  MatRowDef,
+  MatHeaderRowDef,
   MatRow,
+  MatRowDef,
+  MatTable,
 } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
@@ -45,9 +46,6 @@ import { AccountBalance } from '../core/account-balance';
 import { AccountService } from '../core/account.service';
 import { DbFile } from '../core/db-file';
 import { Journal } from '../core/journal';
-import { Tag } from '../tag/tag';
-import { TagService } from '../tag/tag.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { User } from '../core/user';
 import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
@@ -57,7 +55,8 @@ import { ImageDialogComponent } from '../shared/image-dialog/image-dialog.compon
 import { ImageService } from '../shared/image.service';
 import { LocalTimePipe } from '../shared/local-time.pipe';
 import { MathService } from '../shared/math.service';
-
+import { Tag } from '../tag/tag';
+import { TagService } from '../tag/tag.service';
 import { PaymentDataSource } from './payment-datasource';
 import { PaymentDialogComponent } from './payment-dialog.component';
 
@@ -65,7 +64,6 @@ import { PaymentDialogComponent } from './payment-dialog.component';
   selector: 'app-payment',
   templateUrl: './payment.component.html',
   styleUrls: ['./payment.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -112,6 +110,17 @@ import { PaymentDialogComponent } from './payment-dialog.component';
   ],
 })
 export class PaymentComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
+  auth = inject(AuthService);
+  private math = inject(MathService);
+  image = inject(ImageService);
+  private ser = inject(VoucherService);
+  private accountSer = inject(AccountService);
+  private tagSer = inject(TagService);
+
   @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
   @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
   @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
@@ -165,18 +174,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
   accounts: Observable<Account[]>;
   tags: Observable<Tag[]>;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private snackBar: MatSnackBar,
-    public auth: AuthService,
-    private math: MathService,
-    public image: ImageService,
-    private ser: VoucherService,
-    private accountSer: AccountService,
-    private tagSer: TagService,
-  ) {
+  constructor() {
     this.account = null;
     this.form = new FormGroup({
       date: new FormControl(new Date(), { nonNullable: true }),

overlord/src/app/payment/payment.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Voucher } from '../core/voucher';
-
 import { paymentResolver } from './payment.resolver';
 
 describe('paymentResolver', () => {

overlord/src/app/payment/payment.routes.ts

@@ -1,7 +1,6 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-
 import { paymentAccountsResolver } from './payment-accounts.resolver';
 import { PaymentComponent } from './payment.component';
 import { paymentResolver } from './payment.resolver';