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/menu-category/menu-categories-routing.module.ts

@@ -5,8 +5,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '../auth/auth-guard.service';
 
 import { MenuCategoryDetailComponent } from './menu-category-detail/menu-category-detail.component';
-import { MenuCategoryListResolver } from './menu-category-list-resolver.service';
 import { MenuCategoryListComponent } from './menu-category-list/menu-category-list.component';
+import { MenuCategoryListResolver } from './menu-category-list-resolver.service';
 import { MenuCategoryResolver } from './menu-category-resolver.service';
 
 const menuCategoriesRoutes: Routes = [

bookie/src/app/menu-category/menu-categories.module.ts

@@ -2,7 +2,6 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 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';
@@ -21,7 +20,6 @@ import { MenuCategoryListComponent } from './menu-category-list/menu-category-li
     CommonModule,
     CdkTableModule,
     DragDropModule,
-    FlexLayoutModule,
     MatTableModule,
     MatCardModule,
     MatCheckboxModule,

bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.css

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

bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html

@@ -1,46 +1,38 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Menu Category</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" />
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-        </div>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button [disabled]="item.isFixture" color="primary" (click)="save()">
-        Save
-      </button>
-      <button
-        mat-raised-button
-        [disabled]="item.isFixture"
-        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>Menu Category</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>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button
+      mat-raised-button
+      [disabled]="item.isFixture"
+      color="primary"
+      class="mr-5"
+      (click)="save()"
+    >
+      Save
+    </button>
+    <button
+      mat-raised-button
+      [disabled]="item.isFixture"
+      color="warn"
+      (click)="confirmDelete()"
+      *ngIf="!!item.id"
+    >
+      Delete
+    </button>
+  </mat-card-actions>
+</mat-card>

bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html

@@ -1,12 +1,14 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Menu Categories</mat-card-title>
-    <button mat-button (click)="updateSortOrder()">Update Order</button>
-    <a mat-button [routerLink]="['/menu-categories', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Menu Categories</mat-card-title>
+      <button mat-button (click)="updateSortOrder()">Update Order</button>
+      <a mat-button [routerLink]="['/menu-categories', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
     <mat-table
       #table

bookie/src/app/menu-category/menu-category.service.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
-import { BeerSaleReport } from '../beer-sale-report/beer-sale-report';
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { MenuCategory } from '../core/menu-category';
 
@@ -30,7 +29,7 @@ export class MenuCategoryService {
 
   list(shouldHaveActiveProducts: boolean | undefined): Observable<MenuCategory[]> {
     const options = { params: new HttpParams() };
-    if (!!shouldHaveActiveProducts) {
+    if (shouldHaveActiveProducts) {
       options.params = options.params.set('p', 'true');
     }
     return this.http