Chore: Upgrade to Angular v18

Chore: Upgrade to Python 3.12
Chore: Upgrade to psycopg3

bookie/src/app/header-footer/header-footer-resolver.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { HeaderFooter } from './header-footer';
-import { HeaderFooterService } from './header-footer.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class HeaderFooterResolver {
-  constructor(private ser: HeaderFooterService) {}
-
-  resolve(): Observable<HeaderFooter[]> {
-    return this.ser.list();
-  }
-}

bookie/src/app/header-footer/header-footer-routing.module.spec.ts

@@ -1,13 +0,0 @@
-import { HeaderFooterRoutingModule } from './header-footer-routing.module';
-
-describe('HeaderFooterRoutingModule', () => {
-  let headerFooterRoutingModule: HeaderFooterRoutingModule;
-
-  beforeEach(() => {
-    headerFooterRoutingModule = new HeaderFooterRoutingModule();
-  });
-
-  it('should create an instance', () => {
-    expect(headerFooterRoutingModule).toBeTruthy();
-  });
-});

bookie/src/app/header-footer/header-footer-routing.module.ts

@@ -1,40 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { AuthGuard } from '../auth/auth-guard.service';
-
-import { HeaderFooterResolver } from './header-footer-resolver.service';
-import { HeaderFooterComponent } from './header-footer.component';
-
-const headerRoutes: Routes = [
-  {
-    path: '',
-    component: HeaderFooterComponent,
-    canActivate: [AuthGuard],
-    data: {
-      permission: 'Owner',
-    },
-    resolve: {
-      list: HeaderFooterResolver,
-    },
-  },
-  {
-    path: ':id',
-    component: HeaderFooterComponent,
-    canActivate: [AuthGuard],
-    data: {
-      permission: 'Owner',
-    },
-    resolve: {
-      list: HeaderFooterResolver,
-    },
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(headerRoutes)],
-  exports: [RouterModule],
-  providers: [HeaderFooterResolver],
-})
-export class HeaderFooterRoutingModule {}

bookie/src/app/header-footer/header-footer.component.html

@@ -8,9 +8,11 @@
         <mat-form-field class="flex-auto">
           <mat-label>Header / Footer</mat-label>
           <mat-select formControlName="id" (selectionChange)="show($event)">
-            <mat-option *ngFor="let s of list" [value]="s.id">
-              {{ s.name }}
-            </mat-option>
+            @for (s of list; track s) {
+              <mat-option [value]="s.id">
+                {{ s.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>

bookie/src/app/header-footer/header-footer.component.spec.ts

@@ -8,7 +8,7 @@ describe('HeaderFooterComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [HeaderFooterComponent],
+      imports: [HeaderFooterComponent],
     }).compileComponents();
   }));
 

bookie/src/app/header-footer/header-footer.component.ts

@@ -1,7 +1,13 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
+import { MatOption } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSelectChange } from '@angular/material/select';
+import { MatDivider } from '@angular/material/divider';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelectChange, MatSelect } from '@angular/material/select';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
 
@@ -14,6 +20,22 @@ import { HeaderFooterService } from './header-footer.service';
   selector: 'app-section-printer',
   templateUrl: './header-footer.component.html',
   styleUrls: ['./header-footer.component.css'],
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardHeader,
+    MatCardTitle,
+    MatCardContent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOption,
+    MatInput,
+    MatDivider,
+    MatCardActions,
+    MatButton,
+  ],
 })
 export class HeaderFooterComponent implements OnInit {
   @ViewChild('section', { static: true }) sectionElement?: ElementRef;
@@ -60,15 +82,15 @@ export class HeaderFooterComponent implements OnInit {
   }
 
   save() {
-    this.ser.save(this.getItem()).subscribe(
-      (result: HeaderFooter[]) => {
+    this.ser.save(this.getItem()).subscribe({
+      next: (result: HeaderFooter[]) => {
         this.toaster.show('Success', '');
         this.showItem(result);
       },
-      (error) => {
+      error: (error) => {
         this.toaster.show('Error', error);
       },
-    );
+    });
   }
 
   getItem(): HeaderFooter {

bookie/src/app/header-footer/header-footer.module.spec.ts

@@ -1,13 +0,0 @@
-import { HeaderFooterModule } from './header-footer.module';
-
-describe('HeaderFooterModule', () => {
-  let headerFooterModule: HeaderFooterModule;
-
-  beforeEach(() => {
-    headerFooterModule = new HeaderFooterModule();
-  });
-
-  it('should create an instance', () => {
-    expect(headerFooterModule).toBeTruthy();
-  });
-});

bookie/src/app/header-footer/header-footer.module.ts

@@ -1,39 +0,0 @@
-import { CdkTableModule } from '@angular/cdk/table';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTableModule } from '@angular/material/table';
-
-import { SharedModule } from '../shared/shared.module';
-
-import { HeaderFooterRoutingModule } from './header-footer-routing.module';
-import { HeaderFooterComponent } from './header-footer.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CdkTableModule,
-    MatButtonModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatIconModule,
-    MatInputModule,
-    MatProgressSpinnerModule,
-    MatSelectModule,
-    MatTableModule,
-    ReactiveFormsModule,
-    SharedModule,
-    HeaderFooterRoutingModule,
-  ],
-  declarations: [HeaderFooterComponent],
-})
-export class HeaderFooterModule {}

bookie/src/app/header-footer/header-footer.resolver.ts

@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+import { ResolveFn } from '@angular/router';
+
+import { HeaderFooter } from './header-footer';
+import { HeaderFooterService } from './header-footer.service';
+
+export const headerFooterResolver: ResolveFn<HeaderFooter[]> = () => {
+  return inject(HeaderFooterService).list();
+};

bookie/src/app/header-footer/header-footer.routes.ts

@@ -0,0 +1,31 @@
+import { Routes } from '@angular/router';
+
+import { authGuard } from '../auth/auth-guard.service';
+
+import { HeaderFooterComponent } from './header-footer.component';
+import { headerFooterResolver } from './header-footer.resolver';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: HeaderFooterComponent,
+    canActivate: [authGuard],
+    data: {
+      permission: 'Owner',
+    },
+    resolve: {
+      list: headerFooterResolver,
+    },
+  },
+  {
+    path: ':id',
+    component: HeaderFooterComponent,
+    canActivate: [authGuard],
+    data: {
+      permission: 'Owner',
+    },
+    resolve: {
+      list: headerFooterResolver,
+    },
+  },
+];