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/guest-book/guest-book-detail/guest-book-detail.component.html

@@ -1,83 +1,56 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Guest Details</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-card class="lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Guest Details</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 #name formControlName="name" />
+          <mat-error *ngIf="form.controls['name'].hasError('required')">
+            Name is <strong>required</strong>
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Phone</mat-label>
+          <input
+            matInput
+            #phone
+            type="text"
+            formControlName="phone"
+            [matAutocomplete]="auto"
+            autocomplete="off"
+          />
+        </mat-form-field>
+        <mat-autocomplete
+          #auto="matAutocomplete"
+          autoActiveFirstOption
+          [displayWith]="displayFn"
+          (optionSelected)="selected($event)"
         >
-          <mat-form-field fxFlex>
-            <mat-label>Name</mat-label>
-            <input matInput #name placeholder="Name" formControlName="name" />
-            <mat-error *ngIf="form.controls['name'].hasError('required')">
-              Name is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Phone</mat-label>
-            <input
-              matInput
-              #phone
-              placeholder="Phone"
-              type="text"
-              formControlName="phone"
-              [matAutocomplete]="auto"
-              autocomplete="off"
-            />
-          </mat-form-field>
-          <mat-autocomplete
-            #auto="matAutocomplete"
-            autoActiveFirstOption
-            [displayWith]="displayFn"
-            (optionSelected)="selected($event)"
+          <mat-option *ngFor="let customer of customers | async" [value]="customer"
+            >{{ customer.name }} - {{ customer.phone }}</mat-option
           >
-            <mat-option *ngFor="let customer of customers | async" [value]="customer"
-              >{{ customer.name }} - {{ customer.phone }}</mat-option
-            >
-          </mat-autocomplete>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Pax</mat-label>
-            <input matInput placeholder="Pax" type="number" formControlName="pax" />
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Address</mat-label>
-            <textarea matInput placeholder="Address" formControlName="address"></textarea>
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="save()">Save</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+        </mat-autocomplete>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Pax</mat-label>
+          <input matInput type="number" formControlName="pax" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
+          <mat-label>Address</mat-label>
+          <textarea matInput formControlName="address"></textarea>
+        </mat-form-field>
+      </div>
+    </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/guest-book/guest-book-list/guest-book-list.component.html

@@ -1,26 +1,22 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Guest List</mat-card-title>
-    <a mat-button [routerLink]="['/guest-book', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Guest List</mat-card-title>
+      <a mat-button [routerLink]="['/guest-book', 'new']">
+        <mat-icon>add_box</mat-icon>
+        Add
+      </a>
+    </mat-card-title-group>
+  </mat-card-header>
   <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>
+    <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>Date</mat-label>
           <input
             matInput
             [matDatepicker]="date"
             (focus)="date.open()"
-            placeholder="Date"
             formControlName="date"
             autocomplete="off"
           />
@@ -65,16 +61,15 @@
         <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
         <mat-cell *matCellDef="let row" class="center">
           <button
-            mat-raised-button
-            color="primary"
+            mat-icon-button
             [routerLink]="['/sales']"
             [queryParams]="{ guest: row.id }"
             *ngIf="!row.tableId"
           >
-            Seat
+            <mat-icon>chair</mat-icon>
           </button>
           <button
-            mat-raised-button
+            mat-stroked-button
             color="primary"
             [routerLink]="['/sales', 'bill']"
             [queryParams]="{ table: row.tableId, voucher: row.voucherId }"

bookie/src/app/guest-book/guest-book-routing.module.ts

@@ -3,10 +3,10 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AuthGuard } from '../auth/auth-guard.service';
 
-import { GuestBookDetailResolver } from './guest-book-detail-resolver.service';
 import { GuestBookDetailComponent } from './guest-book-detail/guest-book-detail.component';
-import { GuestBookListResolver } from './guest-book-list-resolver.service';
+import { GuestBookDetailResolver } from './guest-book-detail-resolver.service';
 import { GuestBookListComponent } from './guest-book-list/guest-book-list.component';
+import { GuestBookListResolver } from './guest-book-list-resolver.service';
 
 const routes: Routes = [
   {

bookie/src/app/guest-book/guest-book.module.ts

@@ -1,8 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -18,6 +16,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -51,7 +50,6 @@ export const MY_FORMATS = {
     MatDatepickerModule,
     MatNativeDateModule,
     ReactiveFormsModule,
-    FlexLayoutModule,
     GuestBookRoutingModule,
     SharedModule,
     MatAutocompleteModule,

bookie/src/app/guest-book/guest-book.service.ts

@@ -13,7 +13,6 @@ const httpOptions = {
 };
 
 const url = '/api/guest-book';
-const customerUrl = '/api/customers';
 const serviceName = 'GuestBookService';
 
 @Injectable({ providedIn: 'root' })