Moved to Angular 20

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

bookie/src/app/users/user-detail/user-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 { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -31,6 +31,12 @@ import { UserService } from '../user.service';
   ],
 })
 export class UserDetailComponent implements OnInit, AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private toaster = inject(ToasterService);
+  private dialog = inject(MatDialog);
+  private ser = inject(UserService);
+
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup<{
     name: FormControl<string | null>;
@@ -46,13 +52,7 @@ export class UserDetailComponent implements OnInit, AfterViewInit {
   item: User = new User();
   hide: boolean;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private toaster: ToasterService,
-    private dialog: MatDialog,
-    private ser: UserService,
-  ) {
+  constructor() {
     this.hide = true;
     // Create form
     this.form = new FormGroup({

bookie/src/app/users/user-list.resolver.ts

@@ -2,7 +2,6 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 
 import { User } from '../core/user';
-
 import { UserService } from './user.service';
 
 export const userListResolver: ResolveFn<User[]> = () => {

bookie/src/app/users/user-list/user-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -7,7 +7,6 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 
 import { User } from '../../core/user';
 import { LocalTimePipe } from '../../shared/local-time.pipe';
-
 import { UserListDataSource } from './user-list-datasource';
 
 @Component({
@@ -17,13 +16,13 @@ import { UserListDataSource } from './user-list-datasource';
   imports: [LocalTimePipe, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
 })
 export class UserListComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+
   dataSource: UserListDataSource = new UserListDataSource([]);
   list: User[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'lockedOut', 'roles', 'last'];
 
-  constructor(private route: ActivatedRoute) {}
-
   ngOnInit() {
     this.route.data.subscribe((value) => {
       const data = value as { list: User[] };

bookie/src/app/users/user.resolver.ts

@@ -2,7 +2,6 @@ import { inject } from '@angular/core';
 import { ResolveFn } from '@angular/router';
 
 import { User } from '../core/user';
-
 import { UserService } from './user.service';
 
 export const userResolver: ResolveFn<User> = (route) => {

bookie/src/app/users/user.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';
 
@@ -16,10 +16,8 @@ const serviceName = 'UserService';
   providedIn: 'root',
 })
 export class UserService {
-  constructor(
-    private http: HttpClient,
-    private log: ErrorLoggerService,
-  ) {}
+  private http = inject(HttpClient);
+  private log = inject(ErrorLoggerService);
 
   get(id: string | null): Observable<User> {
     const getUrl: string = id === null ? `${url}` : `${url}/${id}`;

bookie/src/app/users/users.routes.ts

@@ -1,10 +1,9 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
-
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { UserListComponent } from './user-list/user-list.component';
 import { userListResolver } from './user-list.resolver';
+import { UserListComponent } from './user-list/user-list.component';
 import { userResolver } from './user.resolver';
 
 export const routes: Routes = [