Moved to Angular v20 and Tailwind v4 plus all related dependencies

Renamed Docker directory.

Also serving static files from FastAPI.

overlord/src/app/product/product-detail/product-detail-dialog.component.ts

@@ -1,14 +1,14 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
   MatDialogActions,
   MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
 } from '@angular/material/dialog';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
@@ -19,7 +19,6 @@ import { StockKeepingUnit } from '../../core/product';
   selector: 'app-journal-dialog',
   templateUrl: './product-detail-dialog.component.html',
   styleUrls: ['./product-detail-dialog.component.css'],
-  standalone: true,
   imports: [
     MatDialogTitle,
     CdkScrollable,
@@ -34,6 +33,13 @@ import { StockKeepingUnit } from '../../core/product';
   ],
 })
 export class ProductDetailDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ProductDetailDialogComponent>>(MatDialogRef);
+  data = inject<{
+    item: StockKeepingUnit;
+    isSold: boolean;
+    isPurchased: boolean;
+  }>(MAT_DIALOG_DATA);
+
   form: FormGroup<{
     units: FormControl<string>;
     fraction: FormControl<number>;
@@ -42,11 +48,7 @@ export class ProductDetailDialogComponent implements OnInit {
     salePrice: FormControl<number>;
   }>;
 
-  constructor(
-    public dialogRef: MatDialogRef<ProductDetailDialogComponent>,
-    @Inject(MAT_DIALOG_DATA)
-    public data: { item: StockKeepingUnit; isSold: boolean; isPurchased: boolean },
-  ) {
+  constructor() {
     this.form = new FormGroup({
       units: new FormControl('', { nonNullable: true }),
       fraction: new FormControl(1, { nonNullable: true }),

overlord/src/app/product/product-detail/product-detail.component.ts

@@ -1,8 +1,8 @@
 import { CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
+import { MatCard, MatCardActions, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatOption } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -10,27 +10,26 @@ import { MatFormField, MatLabel } 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 {
-  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 { BehaviorSubject } from 'rxjs';
 
 import { Product, StockKeepingUnit } from '../../core/product';
 import { ProductGroup } from '../../core/product-group';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ProductService } from '../product.service';
-
 import { ProductDetailDatasource } from './product-detail-datasource';
 import { ProductDetailDialogComponent } from './product-detail-dialog.component';
 
@@ -38,7 +37,6 @@ import { ProductDetailDialogComponent } from './product-detail-dialog.component'
   selector: 'app-product-detail',
   templateUrl: './product-detail.component.html',
   styleUrls: ['./product-detail.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -69,6 +67,12 @@ import { ProductDetailDialogComponent } from './product-detail-dialog.component'
   ],
 })
 export class ProductDetailComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
+  private ser = inject(ProductService);
+
   @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
   form: FormGroup<{
     code: FormControl<string | number>;
@@ -111,13 +115,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
 
   displayedColumns = ['units', 'fraction', 'yield', 'costPrice', 'salePrice', 'action'];
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private snackBar: MatSnackBar,
-    private ser: ProductService,
-  ) {
+  constructor() {
     this.form = new FormGroup({
       code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
       name: new FormControl<string | null>(null),

overlord/src/app/product/product-list.resolver.spec.ts

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Product } from '../core/product';
-
 import { productListResolver } from './product-list.resolver';
 
 describe('productListResolver', () => {

overlord/src/app/product/product-list.resolver.ts

@@ -2,7 +2,6 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 
 import { Product } from '../core/product';
-
 import { ProductService } from './product.service';
 
 export const productListResolver: ResolveFn<Product[]> = () => {

overlord/src/app/product/product-list/product-list.component.ts

@@ -1,24 +1,24 @@
-import { PercentPipe, CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { CurrencyPipe, PercentPipe } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatIconButton, MatAnchor } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitleGroup, MatCardTitle, MatCardContent } from '@angular/material/card';
+import { MatAnchor, MatIconButton } from '@angular/material/button';
+import { MatCard, MatCardContent, MatCardHeader, MatCardTitle, MatCardTitleGroup } from '@angular/material/card';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } 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, RouterLink } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -26,14 +26,12 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { Product } from '../../core/product';
 import { ToCsvService } from '../../shared/to-csv.service';
-
 import { ProductListDataSource } from './product-list-datasource';
 
 @Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css'],
-  standalone: true,
   imports: [
     MatCard,
     MatCardHeader,
@@ -66,6 +64,9 @@ import { ProductListDataSource } from './product-list-datasource';
   ],
 })
 export class ProductListComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private toCsv = inject(ToCsvService);
+
   @ViewChild('filterElement', { static: true }) filterElement!: ElementRef<HTMLInputElement>;
   @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort!: MatSort;
@@ -81,10 +82,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
 
   private _showExtended = true;
 
-  constructor(
-    private route: ActivatedRoute,
-    private toCsv: ToCsvService,
-  ) {
+  constructor() {
     this.showExtended = true;
     this.form = new FormGroup({
       filter: new FormControl<string>('', { nonNullable: true }),

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

@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { ResolveFn } from '@angular/router';
 
 import { Product } from '../core/product';
-
 import { productResolver } from './product.resolver';
 
 describe('productResolver', () => {

overlord/src/app/product/product.resolver.ts

@@ -2,7 +2,6 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 
 import { Product } from '../core/product';
-
 import { ProductService } from './product.service';
 
 export const productResolver: ResolveFn<Product> = (route) => {

overlord/src/app/product/product.routes.ts

@@ -2,10 +2,9 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { productGroupListResolver } from '../product-group/product-group-list.resolver';
-
 import { ProductDetailComponent } from './product-detail/product-detail.component';
-import { ProductListComponent } from './product-list/product-list.component';
 import { productListResolver } from './product-list.resolver';
+import { ProductListComponent } from './product-list/product-list.component';
 import { productResolver } from './product.resolver';
 
 export const routes: Routes = [

overlord/src/app/product/product.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
 
@@ -12,10 +12,8 @@ const serviceName = 'ProductService';
 
 @Injectable({ providedIn: 'root' })
 export class ProductService {
-  constructor(
-    private http: HttpClient,
-    private log: ErrorLoggerService,
-  ) {}
+  private http = inject(HttpClient);
+  private log = inject(ErrorLoggerService);
 
   get(id: string | null): Observable<Product> {
     const getUrl: string = id === null ? `${url}` : `${url}/${id}`;