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/temporal-product/temporal-product-detail/temporal-product-detail.component.html

@@ -1,123 +1,85 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Product</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>Product Id</mat-label>
-            <input matInput placeholder="Product Id" formControlName="id" />
-          </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="75">
-            <mat-label>Name</mat-label>
-            <input matInput #name placeholder="Name" formControlName="name" />
-          </mat-form-field>
-          <mat-form-field fxFlex="25">
-            <mat-label>Units</mat-label>
-            <input matInput placeholder="Units" formControlName="units" />
-          </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>Price</mat-label>
-            <input matInput type="number" placeholder="Price" formControlName="price" />
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>Quantity</mat-label>
-            <input matInput type="number" placeholder="Quantity" formControlName="quantity" />
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
-          <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-form-field fxFlex>
-            <mat-label>Menu Category</mat-label>
-            <mat-select placeholder="Menu Category" formControlName="menuCategory">
-              <mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field fxFlex>
-            <mat-label>Sale Category</mat-label>
-            <mat-select placeholder="Sale Category" formControlName="saleCategory">
-              <mat-option *ngFor="let sc of saleCategories" [value]="sc.id">
-                {{ sc.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
-        </div>
-        <div
-          fxLayout="row"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-          fxLayoutAlign="space-around start"
-        >
-          <mat-form-field fxFlex="50">
-            <input
-              matInput
-              [matDatepicker]="validFrom"
-              placeholder="Valid From"
-              formControlName="validFrom"
-              autocomplete="off"
-            />
-            <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
-            <mat-datepicker #validFrom></mat-datepicker>
-          </mat-form-field>
-          <mat-form-field fxFlex="50">
-            <input
-              matInput
-              [matDatepicker]="validTill"
-              placeholder="Valid Till"
-              formControlName="validTill"
-              autocomplete="off"
-            />
-            <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
-            <mat-datepicker #validTill></mat-datepicker>
-          </mat-form-field>
-        </div>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="update()">Update</button>
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+<mat-card class="flex-auto lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Product</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>Product ID</mat-label>
+          <input matInput formControlName="id" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto basis-3/4 mr-5">
+          <mat-label>Name</mat-label>
+          <input matInput #name formControlName="name" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto basis-1/4">
+          <mat-label>Units</mat-label>
+          <input matInput formControlName="units" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Price</mat-label>
+          <input matInput type="number" formControlName="price" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto">
+          <mat-label>Quantity</mat-label>
+          <input matInput type="number" formControlName="quantity" />
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
+        <mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Menu Category</mat-label>
+          <mat-select formControlName="menuCategory">
+            <mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
+              {{ mc.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex-auto">
+          <mat-label>Sale Category</mat-label>
+          <mat-select formControlName="saleCategory">
+            <mat-option *ngFor="let sc of saleCategories" [value]="sc.id">
+              {{ sc.name }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto basis-1/2 mr-5">
+          <mat-label>Valid From</mat-label>
+          <input
+            matInput
+            [matDatepicker]="validFrom"
+            formControlName="validFrom"
+            autocomplete="off"
+          />
+          <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
+          <mat-datepicker #validFrom></mat-datepicker>
+        </mat-form-field>
+        <mat-form-field class="flex-auto basis-1/2">
+          <mat-label>Valid Till</mat-label>
+          <input
+            matInput
+            [matDatepicker]="validTill"
+            formControlName="validTill"
+            autocomplete="off"
+          />
+          <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
+          <mat-datepicker #validTill></mat-datepicker>
+        </mat-form-field>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button color="primary" class="mr-5" (click)="update()">Update</button>
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  </mat-card-actions>
+</mat-card>

bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html

@@ -1,45 +1,26 @@
 <mat-card>
-  <mat-card-title-group>
+  <mat-card-header>
     <mat-card-title>Temporal Products</mat-card-title>
-  </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="40">
-          <input
-            type="text"
-            matInput
-            placeholder="Filter"
-            formControlName="filter"
-            autocomplete="off"
-          />
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
+        <mat-form-field class="flex-auto basis-2/5 mr-5">
+          <mat-label>Filter</mat-label>
+          <input type="text" matInput formControlName="filter" autocomplete="off" />
         </mat-form-field>
-        <mat-form-field fxFlex="30">
+        <mat-form-field class="flex-auto basis-3/10 mr-5">
           <mat-label>Menu Category</mat-label>
-          <mat-select
-            placeholder="Menu Category"
-            formControlName="menuCategory"
-            (selectionChange)="filterMcOn($event.value)"
-          >
+          <mat-select formControlName="menuCategory" (selectionChange)="filterMcOn($event.value)">
             <mat-option>-- All Products --</mat-option>
             <mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
               {{ mc.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field fxFlex="30">
+        <mat-form-field class="flex-auto basis-3/10">
           <mat-label>Sale Category</mat-label>
-          <mat-select
-            placeholder="Sale Category"
-            formControlName="saleCategory"
-            (selectionChange)="filterScOn($event.value)"
-          >
+          <mat-select formControlName="saleCategory" (selectionChange)="filterScOn($event.value)">
             <mat-option>-- All Products --</mat-option>
             <mat-option *ngFor="let mc of saleCategories" [value]="mc.id">
               {{ mc.name }}
@@ -69,7 +50,7 @@
       <!-- Price Column -->
       <ng-container matColumnDef="price">
         <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
-        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.price | currency : 'INR' }}</mat-cell>
       </ng-container>
 
       <!-- Menu Category Column -->
@@ -113,7 +94,7 @@
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
         <mat-cell *matCellDef="let row" class="right">{{
-          row.quantity | number: '1.2-2'
+          row.quantity | number : '1.2-2'
         }}</mat-cell>
       </ng-container>
 

bookie/src/app/temporal-product/temporal-product.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';

bookie/src/app/temporal-product/temporal-products-routing.module.ts

@@ -7,8 +7,8 @@ import { MenuCategoryListResolver } from '../menu-category/menu-category-list-re
 import { SaleCategoryListResolver } from '../sale-category/sale-category-list-resolver.service';
 
 import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
-import { TemporalProductListResolverService } from './temporal-product-list-resolver.service';
 import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
+import { TemporalProductListResolverService } from './temporal-product-list-resolver.service';
 import { TemporalProductResolverService } from './temporal-product-resolver.service';
 
 const temporalProductsRoutes: Routes = [

bookie/src/app/temporal-product/temporal-products.module.ts

@@ -1,17 +1,10 @@
 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 { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
@@ -19,6 +12,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 
 import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
 import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
@@ -39,7 +33,6 @@ export const MY_FORMATS = {
 @NgModule({
   imports: [
     CommonModule,
-    FlexLayoutModule,
     MatTableModule,
     MatCardModule,
     MatProgressSpinnerModule,