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/sections/section-detail/section-detail.component.html

@@ -1,35 +1,21 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Section</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>Name</mat-label>
-            <input
-              matInput
-              #nameElement
-              placeholder="Name"
-              formControlName="name"
-              (keyup.enter)="save()"
-            />
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="save()">Save</button>
-      <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
-        Delete
-      </button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+<mat-card class="flex-auto lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Section</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>Name</mat-label>
+          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+        </mat-form-field>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button color="primary" class="mr-5" (click)="save()">Save</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
+      Delete
+    </button>
+  </mat-card-actions>
+</mat-card>

bookie/src/app/sections/section-list/section-list.component.html

@@ -1,11 +1,13 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Sections</mat-card-title>
-    <a mat-button [routerLink]="['/sections', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Sections</mat-card-title>
+      <a mat-button [routerLink]="['/sections', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <mat-table #table [dataSource]="dataSource" aria-label="Elements">
       <!-- Name Column -->

bookie/src/app/sections/sections-routing.module.ts

@@ -5,8 +5,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '../auth/auth-guard.service';
 
 import { SectionDetailComponent } from './section-detail/section-detail.component';
-import { SectionListResolver } from './section-list-resolver.service';
 import { SectionListComponent } from './section-list/section-list.component';
+import { SectionListResolver } from './section-list-resolver.service';
 import { SectionResolver } from './section-resolver.service';
 
 const sectionsRoutes: Routes = [

bookie/src/app/sections/sections.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';
@@ -18,7 +17,6 @@ import { SectionsRoutingModule } from './sections-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatIconModule,