Feature: Recording the nutritional and ice cream related values in the database

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

@@ -28,13 +28,74 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
-          <mat-select formControlName="productGroup">
+          <mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
             <mat-option *ngFor="let pg of productGroups" [value]="pg.id">
               {{ pg.name }}
             </mat-option>
           </mat-select>
         </mat-form-field>
       </div>
+      <h2 *ngIf="item.productGroup?.nutritional ?? false">Nutritional Information</h2>
+      <div
+        class="flex flex-row justify-around content-start items-start"
+        *ngIf="item.productGroup?.nutritional ?? false"
+      >
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Protein</mat-label>
+          <input matInput formControlName="protein" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Carbohydrate</mat-label>
+          <input matInput formControlName="carbohydrate" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Total Sugar</mat-label>
+          <input matInput formControlName="totalSugar" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Added Sugar</mat-label>
+          <input matInput formControlName="addedSugar" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Total Fat</mat-label>
+          <input matInput formControlName="totalFat" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Saturated Fat</mat-label>
+          <input matInput formControlName="saturatedFat" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Trans Fat</mat-label>
+          <input matInput formControlName="transFat" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Cholestrol</mat-label>
+          <input matInput formControlName="cholestrol" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Sodium</mat-label>
+          <input matInput formControlName="sodium" />
+        </mat-form-field>
+      </div>
+      <h2 *ngIf="item.productGroup?.iceCream ?? false">Ice Cream Information</h2>
+      <div class="flex flex-row justify-around content-start items-start" *ngIf="item.productGroup?.iceCream ?? false">
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>MSNF</mat-label>
+          <input matInput formControlName="msnf" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Other Solids</mat-label>
+          <input matInput formControlName="otherSolids" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Total Solids</mat-label>
+          <input matInput formControlName="totalSolids" />
+        </mat-form-field>
+        <mat-form-field class="flex-auto mr-5">
+          <mat-label>Water</mat-label>
+          <input matInput formControlName="water" />
+        </mat-form-field>
+      </div>
       <h2>Stock Keeping Units</h2>
       <div
         formGroupName="addRow"

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

@@ -35,6 +35,21 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
     isSold: FormControl<boolean>;
     isActive: FormControl<boolean>;
     productGroup: FormControl<string | null>;
+
+    protein: FormControl<number>;
+    carbohydrate: FormControl<number>;
+    totalSugar: FormControl<number>;
+    addedSugar: FormControl<number>;
+    totalFat: FormControl<number>;
+    saturatedFat: FormControl<number>;
+    transFat: FormControl<number>;
+    cholestrol: FormControl<number>;
+    sodium: FormControl<number>;
+
+    msnf: FormControl<number>;
+    otherSolids: FormControl<number>;
+    totalSolids: FormControl<number>;
+    water: FormControl<number>;
   }>;
 
   productGroups: ProductGroup[] = [];
@@ -66,6 +81,21 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
       isSold: new FormControl<boolean>(true, { nonNullable: true }),
       isActive: new FormControl<boolean>(true, { nonNullable: true }),
       productGroup: new FormControl<string | null>(null),
+
+      protein: new FormControl<number>(0, { nonNullable: true }),
+      carbohydrate: new FormControl<number>(0, { nonNullable: true }),
+      totalSugar: new FormControl<number>(0, { nonNullable: true }),
+      addedSugar: new FormControl<number>(0, { nonNullable: true }),
+      totalFat: new FormControl<number>(0, { nonNullable: true }),
+      saturatedFat: new FormControl<number>(0, { nonNullable: true }),
+      transFat: new FormControl<number>(0, { nonNullable: true }),
+      cholestrol: new FormControl<number>(0, { nonNullable: true }),
+      sodium: new FormControl<number>(0, { nonNullable: true }),
+
+      msnf: new FormControl<number>(0, { nonNullable: true }),
+      otherSolids: new FormControl<number>(0, { nonNullable: true }),
+      totalSolids: new FormControl<number>(0, { nonNullable: true }),
+      water: new FormControl<number>(0, { nonNullable: true }),
     });
   }
 
@@ -81,6 +111,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   }
 
   showItem(item: Product) {
+    item.productGroup = this.productGroups.find((x) => x.id === item.productGroup?.id);
     this.item = item;
     this.form.setValue({
       code: this.item.code || '(Auto)',
@@ -97,6 +128,21 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
       isSold: this.item.isSold,
       isActive: this.item.isActive,
       productGroup: this.item.productGroup ? this.item.productGroup.id ?? '' : '',
+
+      protein: this.item.protein,
+      carbohydrate: this.item.carbohydrate,
+      totalSugar: this.item.totalSugar,
+      addedSugar: this.item.addedSugar,
+      totalFat: this.item.totalFat,
+      saturatedFat: this.item.saturatedFat,
+      transFat: this.item.transFat,
+      cholestrol: this.item.cholestrol,
+      sodium: this.item.sodium,
+
+      msnf: this.item.msnf,
+      otherSolids: this.item.otherSolids,
+      totalSolids: this.item.totalSolids,
+      water: this.item.water,
     });
   }
 
@@ -108,6 +154,10 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
     }, 0);
   }
 
+  updatePG(id: string) {
+    this.item.productGroup = this.productGroups.find((x) => x.id == id);
+  }
+
   addRow() {
     const formValue = this.form.value.addRow;
     if (formValue === undefined) {
@@ -220,10 +270,22 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
     this.item.isPurchased = formModel.isPurchased ?? true;
     this.item.isSold = formModel.isSold ?? false;
     this.item.isActive = formModel.isActive ?? true;
-    if (this.item.productGroup === null || this.item.productGroup === undefined) {
-      this.item.productGroup = new ProductGroup();
-    }
-    this.item.productGroup.id = formModel.productGroup ?? '';
+
+    this.item.protein = formModel.protein ?? 0;
+    this.item.carbohydrate = formModel.carbohydrate ?? 0;
+    this.item.totalSugar = formModel.totalSugar ?? 0;
+    this.item.addedSugar = formModel.addedSugar ?? 0;
+    this.item.totalFat = formModel.totalFat ?? 0;
+    this.item.saturatedFat = formModel.saturatedFat ?? 0;
+    this.item.transFat = formModel.transFat ?? 0;
+    this.item.cholestrol = formModel.cholestrol ?? 0;
+    this.item.sodium = formModel.sodium ?? 0;
+
+    this.item.msnf = formModel.msnf ?? 0;
+    this.item.otherSolids = formModel.otherSolids ?? 0;
+    this.item.totalSolids = formModel.totalSolids ?? 0;
+    this.item.water = formModel.water ?? 0;
+
     return this.item;
   }
 }