Moved to Angular 20

Moved to Tailwind 4
Moved to Python 3.13
Enabled arm64/v8 Builds

bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -36,6 +36,12 @@ import { TemporalProductService } from '../temporal-product.service';
   ],
 })
 export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private toaster = inject(ToasterService);
+  private ser = inject(TemporalProductService);
+
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
   form: FormGroup<{
     id: FormControl<string>;
@@ -55,13 +61,7 @@ export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
   saleCategories: SaleCategory[] = [];
   item: Product = new Product();
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private toaster: ToasterService,
-    private ser: TemporalProductService,
-  ) {
+  constructor() {
     // Create form
     this.form = new FormGroup({
       id: new FormControl<string>('', { nonNullable: true }),

bookie/src/app/temporal-product/temporal-product-list.resolver.ts

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

bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts

@@ -1,5 +1,5 @@
 import { DecimalPipe, CurrencyPipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatOptionModule } from '@angular/material/core';
@@ -15,7 +15,6 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { MenuCategory } from '../../core/menu-category';
 import { Product } from '../../core/product';
 import { SaleCategory } from '../../core/sale-category';
-
 import { TemporalProductListDatasource } from './temporal-product-list-datasource';
 
 @Component({
@@ -37,6 +36,8 @@ import { TemporalProductListDatasource } from './temporal-product-list-datasourc
   ],
 })
 export class TemporalProductListComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   searchFilter = new Observable<string>();
   menuCategoryFilter = new BehaviorSubject<string>('');
   saleCategoryFilter = new BehaviorSubject<string>('');
@@ -60,7 +61,7 @@ export class TemporalProductListComponent implements OnInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'price', 'menuCategory', 'saleCategory', 'info', 'quantity'];
 
-  constructor(private route: ActivatedRoute) {
+  constructor() {
     this.form = new FormGroup({
       filter: new FormControl<string>('', { nonNullable: true }),
       menuCategory: new FormControl<string | null>(''),

bookie/src/app/temporal-product/temporal-product.resolver.ts

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

bookie/src/app/temporal-product/temporal-product.service.ts

@@ -1,5 +1,5 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -15,10 +15,8 @@ const serviceName = 'ProductService';
 
 @Injectable({ providedIn: 'root' })
 export class TemporalProductService {
-  constructor(
-    private http: HttpClient,
-    private log: ErrorLoggerService,
-  ) {}
+  private http = inject(HttpClient);
+  private log = inject(ErrorLoggerService);
 
   get(id: string): Observable<Product> {
     return this.http

bookie/src/app/temporal-product/temporal-products.routes.ts

@@ -3,10 +3,9 @@ import { Routes } from '@angular/router';
 import { authGuard } from '../auth/auth-guard.service';
 import { menuCategoryListResolver } from '../menu-category/menu-category-list.resolver';
 import { saleCategoryListResolver } from '../sale-category/sale-category-list.resolver';
-
 import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
-import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
 import { temporalProductListResolver } from './temporal-product-list.resolver';
+import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
 import { temporalProductResolver } from './temporal-product.resolver';
 
 export const routes: Routes = [