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/roles/role-detail/role-detail.component.css

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

bookie/src/app/roles/role-detail/role-detail.component.html

@@ -1,42 +1,29 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Role</mat-card-title>
-    </mat-card-title-group>
-    <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
+<mat-card class="flex-auto lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Role</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" />
+        </mat-form-field>
+      </div>
+      <mat-divider></mat-divider>
+      <div formArrayName="permissions">
         <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
+          class="flex flex-row justify-around content-start items-start"
+          *ngFor="let p of item.permissions; index as i"
+          [formGroupName]="i"
         >
-          <mat-form-field fxFlex>
-            <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
-          </mat-form-field>
+          <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
         </div>
-        <mat-divider></mat-divider>
-        <div formArrayName="permissions">
-          <div
-            fxLayout="row"
-            *ngFor="let p of item.permissions; index as i"
-            [formGroupName]="i"
-            fxLayout="row"
-            fxLayoutAlign="space-around start"
-            fxLayout.lt-md="column"
-            fxLayoutGap="20px"
-            fxLayoutGap.lt-md="0px"
-          >
-            <mat-checkbox formControlName="permission" fxFlex>{{ p.name }}</mat-checkbox>
-          </div>
-        </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()">Delete</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+      </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()">Delete</button>
+  </mat-card-actions>
+</mat-card>

bookie/src/app/roles/role-detail/role-detail.component.ts

@@ -1,10 +1,5 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -20,21 +15,28 @@ import { RoleService } from '../role.service';
 })
 export class RoleDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string>;
+    permissions: FormArray<
+      FormGroup<{
+        permission: FormControl<boolean>;
+      }>
+    >;
+  }>;
+
   item: Role = new Role();
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private fb: UntypedFormBuilder,
     private toaster: ToasterService,
     private dialog: MatDialog,
     private ser: RoleService,
   ) {
     // Create form
-    this.form = this.fb.group({
-      name: '',
-      permissions: this.fb.array([]),
+    this.form = new FormGroup({
+      name: new FormControl<string>('', { nonNullable: true }),
+      permissions: new FormArray<FormGroup<{ permission: FormControl<boolean> }>>([]),
     });
   }
 
@@ -42,15 +44,14 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
     this.route.data.subscribe((value) => {
       const data = value as { item: Role };
       this.item = data.item;
-      (this.form.get('name') as UntypedFormControl).setValue(this.item.name);
-      this.form.setControl(
-        'permissions',
-        this.fb.array(
-          this.item.permissions.map((x) =>
-            this.fb.group({
-              permission: x.enabled,
-            }),
-          ),
+
+      this.form.controls.name.setValue(this.item.name);
+      this.form.controls.permissions.reset();
+      this.item.permissions.forEach((x) =>
+        this.form.controls.permissions.push(
+          new FormGroup({
+            permission: new FormControl<boolean>(x.enabled, { nonNullable: true }),
+          }),
         ),
       );
     });
@@ -103,10 +104,10 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Role {
     const formModel = this.form.value;
-    this.item.name = formModel.name;
-    const array = this.form.get('permissions') as UntypedFormArray;
+    this.item.name = formModel.name ?? '';
+    const array = this.form.controls.permissions;
     this.item.permissions.forEach((item, index) => {
-      item.enabled = array.controls[index].value.permission;
+      item.enabled = array.controls[index].value.permission ?? false;
     });
     return this.item;
   }

bookie/src/app/roles/role-list/role-list.component.html

@@ -1,11 +1,13 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Roles</mat-card-title>
-    <a mat-button [routerLink]="['/roles', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Roles</mat-card-title>
+      <a mat-button [routerLink]="['/roles', '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/roles/roles-routing.module.ts

@@ -5,8 +5,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '../auth/auth-guard.service';
 
 import { RoleDetailComponent } from './role-detail/role-detail.component';
-import { RoleListResolver } from './role-list-resolver.service';
 import { RoleListComponent } from './role-list/role-list.component';
+import { RoleListResolver } from './role-list-resolver.service';
 import { RoleResolver } from './role-resolver.service';
 
 const rolesRoutes: Routes = [

bookie/src/app/roles/roles.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 { RolesRoutingModule } from './roles-routing.module';
   imports: [
     CommonModule,
     CdkTableModule,
-    FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,