Moved all the schemas into their own logical files.

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

@@ -67,7 +67,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
       isPurchased: this.item.isPurchased,
       isSold: this.item.isSold,
       isActive: this.item.isActive,
-      productGroup: this.item.productGroup.id ? this.item.productGroup.id : '',
+      productGroup: this.item.productGroup ? this.item.productGroup.id : '',
     });
   }
 
@@ -126,6 +126,9 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
     this.item.isPurchased = formModel.isPurchased;
     this.item.isSold = formModel.isSold;
     this.item.isActive = formModel.isActive;
+    if (this.item.productGroup === undefined) {
+      this.item.productGroup = new ProductGroup();
+    }
     this.item.productGroup.id = formModel.productGroup;
     return this.item;
   }

overlord/src/app/product/product-list/product-list-datasource.ts

@@ -6,6 +6,7 @@ import { merge, Observable, of as observableOf } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { Product } from '../../core/product';
+import { ProductGroup } from '../../core/product-group';
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
 function compare(a: string | number, b: string | number, isAsc: boolean) {
@@ -82,7 +83,11 @@ export class ProductListDataSource extends DataSource<Product> {
         case 'name':
           return compare(a.name, b.name, isAsc);
         case 'productGroup':
-          return compare(a.productGroup.name, b.productGroup.name, isAsc);
+          return compare(
+            (a.productGroup as ProductGroup).name,
+            (b.productGroup as ProductGroup).name,
+            isAsc,
+          );
         default:
           return 0;
       }

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

@@ -46,7 +46,7 @@
       <!-- Cost Price Column -->
       <ng-container matColumnDef="costPrice">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.costPrice | currency: 'INR' }}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.price | currency: 'INR' }}</mat-cell>
       </ng-container>
 
       <!-- Yield Column -->
@@ -58,7 +58,7 @@
       <!-- Product Group Column -->
       <ng-container matColumnDef="productGroup">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Product Group</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.productGroup }}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.productGroup?.name }}</mat-cell>
       </ng-container>
 
       <!-- Info Column -->