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/customers/customer-detail/customer-detail.component.css

@@ -1,23 +0,0 @@
-.example-card {
-  max-width: 400px;
-}
-/*.discounts > div:nth-child(even) .mat-form-field {*/
-/*  margin-left: 8px;*/
-/*}*/
-
-/*.discounts > div:nth-child(odd) .mat-form-field {*/
-/*  margin-right: 8px;*/
-/*}*/
-
-.discounts > div:nth-child(3n + 1) .mat-form-field {
-  margin-right: 4px;
-}
-
-.discounts > div:nth-child(3n + 2) .mat-form-field {
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-.discounts > div:nth-child(3n) .mat-form-field {
-  margin-left: 4px;
-}

bookie/src/app/customers/customer-detail/customer-detail.component.html

@@ -1,78 +1,51 @@
-<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
-  <mat-card fxFlex>
-    <mat-card-title-group>
-      <mat-card-title>Customer</mat-card-title>
-    </mat-card-title-group>
-    <mat-card-content>
-      <form [formGroup]="form" fxLayout="column">
+<mat-card class="lg:max-w-[50%]">
+  <mat-card-header>
+    <mat-card-title>Customer</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-form-field class="flex-auto">
+          <mat-label>Phone</mat-label>
+          <input matInput formControlName="phone" />
+        </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>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
+      </div>
+      <mat-divider></mat-divider>
+      <div
+        formArrayName="discounts"
+        class="flex flex-row flex-wrap justify-around content-start items-start discounts gap-x-5"
+      >
         <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
+          *ngFor="let r of item.discounts; index as i"
+          [formGroupName]="i"
+          class="flex flex-row justify-around content-start items-start basis-[calc((100%_/_3)_-_(20px_*_2_/_3))]"
         >
-          <mat-form-field fxFlex>
-            <mat-label>Name</mat-label>
-            <input matInput #nameElement placeholder="Name" formControlName="name" />
+          <mat-form-field class="flex-auto">
+            <mat-label>Discount on {{ r.name }}</mat-label>
+            <input matInput formControlName="discount" />
+            <span matSuffix>%</span>
           </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 placeholder="Phone" formControlName="phone" />
-          </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>
-        <div
-          fxLayout="row"
-          fxLayoutAlign="space-around start"
-          fxLayout.lt-md="column"
-          fxLayoutGap="20px"
-          fxLayoutGap.lt-md="0px"
-        >
-          <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
-        </div>
-        <p></p>
-        <div formArrayName="discounts" fxLayout="row wrap" class="discounts">
-          <div
-            *ngFor="let r of item.discounts; index as i"
-            [formGroupName]="i"
-            fxLayoutAlign="space-around start"
-            fxLayout.lt-md="column"
-            fxLayoutGap="20px"
-            fxLayoutGap.lt-md="0px"
-            fxFlex="33%"
-          >
-            <mat-form-field fxFlex>
-              <mat-label>Discount on {{ r.name }}</mat-label>
-              <input matInput placeholder="Discount" formControlName="discount" />
-              <span matSuffix>%</span>
-            </mat-form-field>
-          </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/customers/customer-discounts.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -6,9 +6,6 @@ import { catchError } from 'rxjs/operators';
 import { ErrorLoggerService } from '../core/error-logger.service';
 import { DiscountItem } from '../sales/discount/discount-item';
 
-const httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-};
 const url = '/api/customer-discounts';
 const serviceName = 'CustomerService';
 

bookie/src/app/customers/customer-list/customer-list.component.html

@@ -1,11 +1,13 @@
 <mat-card>
-  <mat-card-title-group>
-    <mat-card-title>Customers</mat-card-title>
-    <a mat-button [routerLink]="['/customers', 'new']">
-      <mat-icon>add_box</mat-icon>
-      Add
-    </a>
-  </mat-card-title-group>
+  <mat-card-header>
+    <mat-card-title-group>
+      <mat-card-title>Customers</mat-card-title>
+      <a mat-button [routerLink]="['/customers', '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 -->
@@ -40,7 +42,7 @@
         <mat-cell *matCellDef="let row">
           <ul>
             <li *ngFor="let discount of row.discounts">
-              {{ discount.name }} - {{ discount.discount | percent: '1.2-2' }}
+              {{ discount.name }} - {{ discount.discount | percent : '1.2-2' }}
             </li>
           </ul>
         </mat-cell>

bookie/src/app/customers/customer-routing.module.ts

@@ -5,8 +5,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '../auth/auth-guard.service';
 
 import { CustomerDetailComponent } from './customer-detail/customer-detail.component';
-import { CustomerListResolver } from './customer-list-resolver.service';
 import { CustomerListComponent } from './customer-list/customer-list.component';
+import { CustomerListResolver } from './customer-list-resolver.service';
 import { CustomerResolver } from './customer-resolver.service';
 
 const customersRoutes: Routes = [

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