Chore:

Moved to sqlalchemy 2.0
Added type checking as much as possible
Updated angular to 15
Moved from Angular flex layout to tailwind css

Started developing on vscode with devcontainers

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

@@ -1,3 +0,0 @@
-.example-card {
-  max-width: 400px;
-}

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

@@ -1,45 +1,28 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Header / Footer</mat-card-title>
-    </mat-card-title-group>
-    <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Header / Footer</mat-label>
-            <mat-select
-              placeholder="Header / Footer"
-              formControlName="id"
-              (selectionChange)="show($event)"
-            >
-              <mat-option *ngFor="let s of list" [value]="s.id">
-                {{ s.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <mat-form-field>
-          <mat-label>Text</mat-label>
-          <textarea
-            matInput
-            matAutosizeMinRows="5"
-            placeholder="Text"
-            formControlName="text"
-          ></textarea>
+<mat-card class="flex-auto lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Header / Footer</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start">
+        <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>
+          </mat-select>
         </mat-form-field>
+      </div>
+      <mat-form-field>
+        <mat-label>Text</mat-label>
+        <textarea matInput matAutosizeMinRows="5" formControlName="text"></textarea>
+      </mat-form-field>
 
-        <mat-divider></mat-divider>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="save()">Save</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+      <mat-divider></mat-divider>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button color="primary" (click)="save()">Save</button>
+  </mat-card-actions>
+</mat-card>

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

@@ -34,7 +34,7 @@ export class HeaderFooterComponent implements OnInit {
       id: '',
       text: '',
     });
-    route.params.pipe(map((p) => p.id)).subscribe((x) => {
+    route.params.pipe(map((p) => p['id'])).subscribe((x) => {
       this.id = x;
     });
   }
@@ -48,6 +48,7 @@ export class HeaderFooterComponent implements OnInit {
 
   showItem(list: HeaderFooter[]) {
     this.list = list;
+    this.id = this.id ?? this.list[0].id;
     const val = this.list.find((v) => v.id === this.id) as HeaderFooter;
     this.form.setValue({
       id: this.id,

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

@@ -1,7 +1,6 @@
 import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -22,7 +21,6 @@ import { HeaderFooterComponent } from './header-footer.component';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,