Fix: Modifier Categories was not showing the names of Menu Categories in Modifier Category Detail Component. This was because the Menu Category Link had only the id field.

Took this time to improve the Modifier route.

bookie/src/app/core/modifier.ts

@@ -6,7 +6,7 @@ export class Modifier {
   name: string;
   showInBill: boolean;
   price: number;
-  modifierCategory: ModifierCategory;
+  modifierCategory?: ModifierCategory;
   isActive: boolean;
   billPrice?: number;
 
@@ -15,7 +15,6 @@ export class Modifier {
     this.name = '';
     this.showInBill = true;
     this.price = 0;
-    this.modifierCategory = new ModifierCategory();
     this.isActive = true;
     Object.assign(this, init);
   }

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts

@@ -53,7 +53,7 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
       showInBill: this.item.showInBill,
       price: this.item.price || '',
       isActive: this.item.isActive,
-      modifierCategory: this.item.modifierCategory.id ? this.item.modifierCategory.id : '',
+      modifierCategory: this.item.modifierCategory ? (this.item.modifierCategory.id as string) : '',
     });
   }
 
@@ -108,7 +108,7 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
     this.item.showInBill = formModel.showInBill;
     this.item.price = +formModel.price;
     this.item.isActive = formModel.isActive;
-    this.item.modifierCategory.id = formModel.modifierCategory;
+    this.item.modifierCategory = new ModifierCategory({ id: formModel.modifierCategory });
     return this.item;
   }
 }

bookie/src/app/modifiers/modifier-list/modifier-list-datasource.ts

@@ -3,6 +3,7 @@ import { merge, Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { Modifier } from '../../core/modifier';
+import { ModifierCategory } from '../../core/modifier-category';
 
 export class ModifierListDataSource extends DataSource<Modifier> {
   public data: Modifier[];
@@ -45,7 +46,7 @@ export class ModifierListDataSource extends DataSource<Modifier> {
   private getFilteredData(data: Modifier[]): Modifier[] {
     const filter = this.filterValue === undefined ? '' : this.filterValue;
     return data.filter((x) => {
-      return x.modifierCategory.id === filter || filter === '';
+      return (x.modifierCategory as ModifierCategory).id === filter || filter === '';
     });
   }
 }

bookie/src/polyfills.ts

@@ -57,7 +57,6 @@
  */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */