Feature: Adding recipe templates to print recipes.

Feautre: Recipe export to xlsx
Chore: Python 11 style type annotations
Chore: Moved to sqlalchemy 2.0
Chore: Minimum python is 3.11
Fix: Fix nullability of a lot of fields in the database.

overlord/src/app/recipe/recipe-detail/recipe-detail.component.html

@@ -5,12 +5,22 @@
   <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 mr-5">
+          <mat-label>Date</mat-label>
+          <input
+            matInput
+            [matDatepicker]="date"
+            formControlName="date"
+            autocomplete="off"
+            #dateElement
+            (focus)="dateElement.select()"
+          />
+          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+          <mat-datepicker #date></mat-datepicker>
+        </mat-form-field>
         <mat-form-field class="flex-auto">
-          <mat-select formControlName="period">
-            <mat-option *ngFor="let p of periods" [value]="p">
-              {{ p.validFrom }} to {{ p.validTill }}
-            </mat-option>
-          </mat-select>
+          <mat-label>Source</mat-label>
+          <input type="text" matInput formControlName="source" autocomplete="off" />
         </mat-form-field>
       </div>
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -39,27 +49,12 @@
           <mat-label>Yield</mat-label>
           <input type="text" matInput formControlName="recipeYield" autocomplete="off" />
         </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/10 mr-5">
-          <mat-label>Sale Price</mat-label>
-          <input type="text" matInput formControlName="salePrice" autocomplete="off" />
-          <span matTextPrefix>₹&nbsp;</span>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/10 mr-5">
-          <mat-label>Cost Price</mat-label>
-          <input type="text" matInput formControlName="costPrice" autocomplete="off" />
-          <span matTextPrefix>₹&nbsp;</span>
-        </mat-form-field>
-        <mat-form-field class="flex-auto basis-1/10">
-          <mat-label>Cost Percentage</mat-label>
-          <input type="text" matInput formControlName="costPercentage" autocomplete="off" />
-          <span matSuffix>%</span>
-        </mat-form-field>
       </div>
       <div
         formGroupName="addRow"
         class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col"
       >
-        <mat-form-field class="flex-auto basis-1/2 mr-5">
+        <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-label>Ingredient</mat-label>
           <input
             type="text"
@@ -85,6 +80,10 @@
           <input type="text" matInput formControlName="quantity" autocomplete="off" />
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
+          <mat-label>Description</mat-label>
+          <input type="text" matInput formControlName="description" autocomplete="off" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto basis-1/10 mr-5">
           <mat-label>Rate</mat-label>
           <input type="text" matInput formControlName="rate" autocomplete="off" />
           <span matTextPrefix>₹&nbsp;</span>
@@ -98,7 +97,7 @@
         <!-- Ingredient Column -->
         <ng-container matColumnDef="product">
           <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
-          <mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
+          <mat-cell *matCellDef="let row">{{ row.product.name }} {{ row.description }}</mat-cell>
         </ng-container>
 
         <!-- Quantity Column -->
@@ -109,22 +108,6 @@
           >
         </ng-container>
 
-        <!-- Rate Column -->
-        <ng-container matColumnDef="rate">
-          <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{
-            row.price | currency : 'INR'
-          }}</mat-cell>
-        </ng-container>
-
-        <!-- Amount Column -->
-        <ng-container matColumnDef="amount">
-          <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
-          <mat-cell *matCellDef="let row" class="right">{{
-            row.quantity * row.price | currency : 'INR'
-          }}</mat-cell>
-        </ng-container>
-
         <!-- Action Column -->
         <ng-container matColumnDef="action">
           <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
@@ -138,6 +121,18 @@
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
+      <mat-form-field class="flex-auto">
+        <mat-label>Instructions</mat-label>
+        <textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
+      </mat-form-field>
+      <mat-form-field class="flex-auto">
+        <mat-label>Garnishing</mat-label>
+        <textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
+      </mat-form-field>
+      <mat-form-field class="flex-auto">
+        <mat-label>Plating</mat-label>
+        <textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
+      </mat-form-field>
     </form>
   </mat-card-content>
   <mat-card-actions>

overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { round } from 'mathjs';
+import * as moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { Period } from 'src/app/period/period';
@@ -31,17 +31,19 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
   public itemsObservable = new BehaviorSubject<RecipeItem[]>([]);
   dataSource: RecipeDetailDatasource = new RecipeDetailDatasource(this.itemsObservable);
   form: FormGroup<{
-    period: FormControl<Period>;
+    date: FormControl<Date>;
+    source: FormControl<string>;
     recipeYield: FormControl<string | null>;
-    costPrice: FormControl<string | null>;
-    salePrice: FormControl<string | null>;
-    costPercentage: FormControl<number | null>;
     product: FormControl<ProductSku | string | null>;
     addRow: FormGroup<{
       ingredient: FormControl<string | null>;
       quantity: FormControl<string>;
+      description: FormControl<string>;
       rate: FormControl<string>;
     }>;
+    instructions: FormControl<string>;
+    garnishing: FormControl<string>;
+    plating: FormControl<string>;
   }>;
 
   periods: Period[] = [];
@@ -51,7 +53,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
   ingredients: Observable<ProductSku[]>;
   item: Recipe = new Recipe();
 
-  displayedColumns = ['product', 'quantity', 'rate', 'amount', 'action'];
+  displayedColumns = ['product', 'quantity', 'action'];
 
   constructor(
     private route: ActivatedRoute,
@@ -65,17 +67,19 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     this.product = null;
     this.ingredient = null;
     this.form = new FormGroup({
-      period: new FormControl(new Period(), { nonNullable: true }),
+      date: new FormControl(new Date(), { nonNullable: true }),
+      source: new FormControl('', { nonNullable: true }),
       recipeYield: new FormControl<string | null>(null),
-      costPrice: new FormControl<string | null>(null),
-      salePrice: new FormControl<string | null>(null),
-      costPercentage: new FormControl<number | null>(null),
       product: new FormControl<ProductSku | string | null>(new ProductSku()),
       addRow: new FormGroup({
         ingredient: new FormControl(''),
         quantity: new FormControl('', { nonNullable: true }),
+        description: new FormControl('', { nonNullable: true }),
         rate: new FormControl('', { nonNullable: true }),
       }),
+      instructions: new FormControl('', { nonNullable: true }),
+      garnishing: new FormControl('', { nonNullable: true }),
+      plating: new FormControl('', { nonNullable: true }),
     });
     // Setup Product Autocomplete
     this.products = this.form.controls.product.valueChanges.pipe(
@@ -107,19 +111,20 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
 
   showItem(item: Recipe) {
     this.item = item;
-    item.period = this.periods.find((x) => x.id == item.period.id) as Period;
     this.form.setValue({
-      period: item.period,
+      date: moment(item.date, 'DD-MMM-YYYY').toDate(),
+      source: item.source,
       recipeYield: `${item.recipeYield}`,
-      salePrice: `${item.salePrice}`,
-      costPrice: `${item.costPrice}`,
-      costPercentage: null,
       product: item.sku,
       addRow: {
         ingredient: null,
         quantity: '',
+        description: '',
         rate: '',
       },
+      instructions: item.instructions,
+      garnishing: item.garnishing,
+      plating: item.plating,
     });
     this.dataSource = new RecipeDetailDatasource(this.itemsObservable);
   }
@@ -144,16 +149,11 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     const product: ProductSku = event.option.value;
     this.item.sku = product;
     this.form.controls.product.setValue(product);
-    this.form.controls.salePrice.setValue('' + (product.salePrice ?? 0));
   }
 
   ingredientSelected(event: MatAutocompleteSelectedEvent): void {
     const ingredient: ProductSku = event.option.value;
     this.ingredient = ingredient;
-    const item = this.getItem();
-    this.ser
-      .getIngredientDetails(ingredient.id, item.period.validFrom, item.period.validTill)
-      .subscribe((x) => this.form.controls.addRow.controls.rate.setValue('' + x.costPrice));
   }
 
   addRow() {
@@ -177,7 +177,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
       new RecipeItem({
         product: this.ingredient,
         quantity,
-        price: rate,
+        description: formValue.description ?? '',
       }),
     );
     this.resetAddRow();
@@ -196,17 +196,6 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
 
   updateView() {
     this.itemsObservable.next(this.item.items);
-    const costPrice = round(
-      this.item.items.map((x) => x.quantity * x.price).reduce((p, c) => p + c, 0),
-      2,
-    );
-    this.form.controls.costPrice.setValue(`${costPrice}`);
-    const salePrice = this.math.parseAmount(this.form.value.salePrice ?? '0', 2);
-    if (salePrice < 0) {
-      return;
-    }
-    const costPercentage = round((100 * costPrice) / salePrice, 2);
-    this.form.controls.costPercentage.setValue(costPercentage);
   }
 
   deleteRow(row: RecipeItem) {
@@ -253,12 +242,12 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
 
   getItem(): Recipe {
     const formModel = this.form.value;
-    if (formModel.period) {
-      this.item.period = formModel.period;
-    }
+    this.item.date = moment(formModel.date).format('DD-MMM-YYYY');
+    this.item.source = formModel.source ?? '';
     this.item.recipeYield = this.math.parseAmount(formModel.recipeYield ?? '1', 2);
-    this.item.salePrice = this.math.parseAmount(formModel.salePrice ?? '0', 2);
-    this.item.costPrice = this.math.parseAmount(formModel.costPrice ?? '0', 2);
+    this.item.instructions = formModel.instructions ?? '';
+    this.item.garnishing = formModel.garnishing ?? '';
+    this.item.plating = formModel.plating ?? '';
     return this.item;
   }
 }