Removed IsModifierCompulsory from MenuCategory as it is now not needed and minimum in ModifierCategory set to non-zero to achieve the same.

Fix: DiscountLimit was not scaled to 100 in MenuCategory detail. So it is now chaled in the json and scaled back in the frontend for the list as that was not supposed to be scaled.
Feature: Modifier is now done
Fix: In product save, it was checking menu_category second time again instead of sale_category

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

@@ -13,6 +13,10 @@ const routes: Routes = [
     path: 'guest-book',
     loadChildren: () => import('./guest-book/guest-book.module').then(mod => mod.GuestBookModule)
   },
+  {
+    path: 'modifiers',
+    loadChildren: () => import('./modifiers/modifiers.module').then(mod => mod.ModifiersModule)
+  },
   {
     path: 'modifier-categories',
     loadChildren: () => import('./modifier-categories/modifier-categories.module').then(mod => mod.ModifierCategoriesModule)

bookie/src/app/core/menu-category.ts

@@ -4,7 +4,6 @@ export class MenuCategory {
   id: string;
   name: string;
   discountLimit: number;
-  isModifierCompulsory: boolean;
   isActive: boolean;
   isFixture: boolean;
   sortOrder: number;

bookie/src/app/core/modifier-category.ts

@@ -1,4 +1,4 @@
-import {MenuCategory} from "../core/menu-category";
+import {MenuCategory} from "./menu-category";
 
 export class ModifierCategory {
   id: string;

bookie/src/app/core/modifier.ts

@@ -0,0 +1,9 @@
+import {ModifierCategory} from "./modifier-category";
+
+export class Modifier {
+  id: string;
+  name: string;
+  showInBill: boolean;
+  price: number;
+  modifierCategory: ModifierCategory;
+}

bookie/src/app/home/home.component.html

@@ -22,6 +22,9 @@
 <a mat-raised-button  routerLink="/modifier-categories">
   Modifier Categories
 </a>
+<a mat-raised-button  routerLink="/modifiers">
+  Modifiers
+</a>
 <a mat-raised-button  routerLink="/taxes">
   Taxes
 </a>

bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.html

@@ -22,7 +22,6 @@
         </div>
         <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
              fxLayoutGap.lt-md="0px">
-          <mat-checkbox formControlName="isModifierCompulsory">Is Modifier Compulsory?</mat-checkbox>
           <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
         </div>
       </form>

bookie/src/app/menu-category/menu-category-detail/menu-category-detail.component.ts

@@ -33,7 +33,6 @@ export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
     this.form = this.fb.group({
       name: '',
       discountLimit: '',
-      isModifierCompulsory: '',
       isActive: ''
     });
   }
@@ -50,7 +49,6 @@ export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
     this.form.setValue({
       name: this.item.name,
       discountLimit: this.item.discountLimit,
-      isModifierCompulsory: this.item.isModifierCompulsory,
       isActive: this.item.isActive
     });
   }
@@ -104,7 +102,6 @@ export class MenuCategoryDetailComponent implements OnInit, AfterViewInit {
     const formModel = this.form.value;
     this.item.name = formModel.name;
     this.item.discountLimit = +formModel.discountLimit;
-    this.item.isModifierCompulsory = formModel.isModifierCompulsory;
     this.item.isActive = formModel.isActive;
     return this.item;
   }

bookie/src/app/menu-category/menu-category-list/menu-category-list.component.html

@@ -24,12 +24,6 @@
         <mat-cell *matCellDef="let row">{{row.discountLimit | percent:'1.2-2'}}</mat-cell>
       </ng-container>
 
-      <!-- Is Modifier Compulsory Column -->
-      <ng-container matColumnDef="isModifierCompulsory">
-        <mat-header-cell *matHeaderCellDef>Modifier Compulsory?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.isModifierCompulsory}}</mat-cell>
-      </ng-container>
-
       <!-- Is Active Column -->
       <ng-container matColumnDef="isActive">
         <mat-header-cell *matHeaderCellDef>Active?</mat-header-cell>

bookie/src/app/menu-category/menu-category-list/menu-category-list.component.ts

@@ -19,7 +19,7 @@ export class MenuCategoryListComponent implements OnInit {
   list: MenuCategory[];
   data: BehaviorSubject<MenuCategory[]>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'discountLimit', 'isModifierCompulsory', 'isActive', 'isFixture'];
+  displayedColumns = ['name', 'discountLimit', 'isActive', 'isFixture'];
 
   constructor(
     private route: ActivatedRoute,
@@ -36,6 +36,7 @@ export class MenuCategoryListComponent implements OnInit {
   ngOnInit() {
     this.route.data
       .subscribe((data: { list: MenuCategory[] }) => {
+        data.list.forEach(x=> x.discountLimit = x.discountLimit / 100);
         this.data.next(data.list);
       });
     this.dataSource = new MenuCategoryListDatasource(this.data);

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ModifierCategoryService} from '../modifier-category.service';
-import {ModifierCategory} from '../modifier-category';
+import {ModifierCategory} from '../../core/modifier-category';
 import {ToasterService} from '../../core/toaster.service';
 import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
 import {MatDialog} from '@angular/material/dialog';

bookie/src/app/modifier-categories/modifier-category-list-resolver.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
-import {ModifierCategory} from './modifier-category';
+import {ModifierCategory} from '../core/modifier-category';
 import {Observable} from 'rxjs/internal/Observable';
 import {ModifierCategoryService} from './modifier-category.service';
 

bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list-datasource.ts

@@ -1,6 +1,6 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable, of as observableOf } from 'rxjs';
-import { ModifierCategory } from '../modifier-category';
+import { ModifierCategory } from '../../core/modifier-category';
 
 export class ModifierCategoryListDatasource extends DataSource<ModifierCategory> {
 

bookie/src/app/modifier-categories/modifier-category-list/modifier-category-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ModifierCategoryListDatasource } from './modifier-category-list-datasource';
-import { ModifierCategory } from '../modifier-category';
+import { ModifierCategory } from '../../core/modifier-category';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({

bookie/src/app/modifier-categories/modifier-category-resolver.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
-import {ModifierCategory} from './modifier-category';
+import {ModifierCategory} from '../core/modifier-category';
 import {Observable} from 'rxjs/internal/Observable';
 import {ModifierCategoryService} from './modifier-category.service';
 

bookie/src/app/modifier-categories/modifier-category.service.ts

@@ -3,7 +3,7 @@ import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {ErrorLoggerService} from '../core/error-logger.service';
 import {catchError} from 'rxjs/operators';
 import {Observable} from 'rxjs/internal/Observable';
-import {ModifierCategory} from './modifier-category';
+import {ModifierCategory} from '../core/modifier-category';
 
 const httpOptions = {
   headers: new HttpHeaders({'Content-Type': 'application/json'})

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

@@ -0,0 +1,44 @@
+<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
+  <mat-card fxFlex>
+    <mat-card-title-group>
+      <mat-card-title>Modifier</mat-card-title>
+    </mat-card-title-group>
+    <mat-card-content>
+      <form [formGroup]="form" fxLayout="column">
+        <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+             fxLayoutGap.lt-md="0px">
+          <mat-form-field fxFlex>
+            <mat-label>Name</mat-label>
+            <input matInput #name placeholder="Name" formControlName="name">
+          </mat-form-field>
+        </div>
+        <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+             fxLayoutGap.lt-md="0px">
+          <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
+        </div>
+        <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+             fxLayoutGap.lt-md="0px">
+          <mat-form-field fxFlex>
+            <mat-label>Price</mat-label>
+            <input matInput type="number" placeholder="Price" formControlName="price">
+          </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>Category</mat-label>
+            <mat-select placeholder="Category" formControlName="modifierCategory">
+              <mat-option *ngFor="let mc of modifierCategories" [value]="mc.id">
+                {{ mc.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </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()" *ngIf="!!item.id">Delete</button>
+    </mat-card-actions>
+  </mat-card>
+</div>

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

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ModifierDetailComponent} from './modifier-detail.component';
+
+describe('ModifierDetailComponent', () => {
+  let component: ModifierDetailComponent;
+  let fixture: ComponentFixture<ModifierDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ModifierDetailComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModifierDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,113 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ToasterService } from '../../core/toaster.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ModifierService } from '../modifier.service';
+import { Modifier } from '../../core/modifier';
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ModifierCategory } from "../../core/modifier-category";
+
+@Component({
+  selector: 'app-modifier-detail',
+  templateUrl: './modifier-detail.component.html',
+  styleUrls: ['./modifier-detail.component.css']
+})
+export class ModifierDetailComponent implements OnInit, AfterViewInit {
+  @ViewChild('name', { static: true }) nameElement: ElementRef;
+  form: FormGroup;
+  modifierCategories: ModifierCategory[];
+  item: Modifier;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private dialog: MatDialog,
+    private fb: FormBuilder,
+    private toaster: ToasterService,
+    private ser: ModifierService
+  ) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      name: '',
+      showInBill: '',
+      price: '',
+      modifierCategory: ''
+    });
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { item: Modifier, modifierCategories: ModifierCategory[] }) => {
+        this.modifierCategories = data.modifierCategories;
+        this.showItem(data.item);
+      });
+  }
+
+  showItem(item: Modifier) {
+    this.item = item;
+    this.form.setValue({
+      name: this.item.name || '',
+      showInBill: this.item.showInBill,
+      price: this.item.price || '',
+      modifierCategory: this.item.modifierCategory.id ? this.item.modifierCategory.id : ''
+    });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.nameElement.nativeElement.focus();
+    }, 0);
+  }
+
+  save() {
+    this.ser.saveOrUpdate(this.getItem())
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+          this.router.navigateByUrl('/modifiers');
+        },
+        (error) => {
+          this.toaster.show('Danger', error.error);
+        }
+      );
+  }
+
+  delete() {
+    this.ser.delete(this.item.id)
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+          this.router.navigateByUrl('/modifiers');
+        },
+        (error) => {
+          this.toaster.show('Danger', error.error);
+        }
+      );
+  }
+
+  confirmDelete(): void {
+    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+      width: '250px',
+      data: {title: 'Delete Modifier?', content: 'Are you sure? This cannot be undone.'}
+    });
+
+    dialogRef.afterClosed().subscribe((result: boolean) => {
+      if (result) {
+        this.delete();
+      }
+    });
+  }
+
+  getItem(): Modifier {
+    const formModel = this.form.value;
+    this.item.name = formModel.name;
+    this.item.showInBill = formModel.showInBill;
+    this.item.price = +formModel.price;
+    this.item.modifierCategory.id = formModel.modifierCategory;
+    return this.item;
+  }
+}

bookie/src/app/modifiers/modifier-list-resolver.service.spec.ts

@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {ModifierListResolver} from './modifier-list-resolver.service';
+
+describe('ModifierListResolver', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ModifierListResolver]
+    });
+  });
+
+  it('should be created', inject([ModifierListResolver], (service: ModifierListResolver) => {
+    expect(service).toBeTruthy();
+  }));
+});

bookie/src/app/modifiers/modifier-list-resolver.service.ts

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
+import {Modifier} from '../core/modifier';
+import {Observable} from 'rxjs/internal/Observable';
+import {ModifierService} from './modifier.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModifierListResolver implements Resolve<Modifier[]> {
+
+  constructor(private ser: ModifierService) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Modifier[]> {
+    return this.ser.list();
+  }
+}

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

@@ -0,0 +1,48 @@
+import { DataSource } from '@angular/cdk/collections';
+import { map, tap } from 'rxjs/operators';
+import { merge, Observable } from 'rxjs';
+import { Modifier } from '../../core/modifier';
+
+
+export class ModifierListDataSource extends DataSource<Modifier> {
+  public data: Modifier[];
+  public viewData: Modifier[];
+  private filterValue: string;
+
+  constructor(private readonly filter: Observable<string>, private readonly dataObs: Observable<Modifier[]>) {
+    super();
+    this.data = [];
+    this.viewData = [];
+    this.filter = filter.pipe(
+      tap(x => this.filterValue = x)
+    );
+    this.dataObs = dataObs.pipe(
+      tap(x => this.data = x)
+    );
+  }
+
+  connect(): Observable<Modifier[]> {
+    const dataMutations = [
+      this.dataObs,
+      this.filter
+    ];
+
+    return merge(...dataMutations).pipe(
+      map((x: any) => {
+        this.viewData = this.getFilteredData([...this.data]);
+        return this.viewData;
+      })
+    );
+  }
+
+  disconnect() {
+  }
+
+  private getFilteredData(data: Modifier[]): Modifier[] {
+    const filter = (this.filterValue === undefined) ? "" : this.filterValue;
+      return data.filter(x => {
+        return x.modifierCategory.id === filter || filter === "";
+        }
+      );
+  }
+}

bookie/src/app/modifiers/modifier-list/modifier-list.component.html

@@ -0,0 +1,64 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Modifiers</mat-card-title>
+    <a mat-button [routerLink]="['/modifiers', 'new']">
+      <mat-icon>add_box</mat-icon>
+      Add
+    </a>
+  </mat-card-title-group>
+  <mat-card-content>
+    <form [formGroup]="form" fxLayout="column">
+        <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+             fxLayoutGap.lt-md="0px">
+          <mat-form-field fxFlex>
+            <mat-label>Modifier Category</mat-label>
+            <mat-select placeholder="Modifier Category" formControlName="modifierCategory" (selectionChange)="filterOn($event)">
+              <mat-option>-- All Categories --</mat-option>
+              <mat-option *ngFor="let mc of modifierCategories" [value]="mc.id">
+                {{ mc.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+    </form>
+    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let row"><a [routerLink]="['/modifiers', row.id]">{{row.name}} ({{row.units}})</a></mat-cell>
+      </ng-container>
+
+      <!-- Show In Bill Column -->
+      <ng-container matColumnDef="showInBill">
+        <mat-header-cell *matHeaderCellDef>Show</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <div layout="row">
+            <div flex>
+              <mat-icon>
+                {{ row.showInBill ? "visibility" : "visibility_off" }}
+              </mat-icon>
+              <b> {{ row.showInBill ? "Show" : "Hide" }}</b>
+            </div>
+          </div>
+        </mat-cell>
+      </ng-container>
+
+      <!-- Price Column -->
+      <ng-container matColumnDef="price">
+        <mat-header-cell *matHeaderCellDef>Price</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.price | currency:'INR'}}</mat-cell>
+      </ng-container>
+
+      <!-- Modifier Category Column -->
+      <ng-container matColumnDef="modifierCategory">
+        <mat-header-cell *matHeaderCellDef>Category</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.modifierCategory.name}}</mat-cell>
+      </ng-container>
+
+
+     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+  </mat-card-content>
+</mat-card>

bookie/src/app/modifiers/modifier-list/modifier-list.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
+
+import {ModifierListComponent} from './modifier-list.component';
+
+describe('ModifierListComponent', () => {
+  let component: ModifierListComponent;
+  let fixture: ComponentFixture<ModifierListComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ModifierListComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ModifierListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ModifierListDataSource } from './modifier-list-datasource';
+import { MatTable } from "@angular/material";
+import { Modifier } from '../../core/modifier';
+import { BehaviorSubject } from "rxjs";
+import {ModifierCategory} from "../../core/modifier-category";
+
+@Component({
+  selector: 'app-modifier-list',
+  templateUrl: './modifier-list.component.html',
+  styleUrls: ['./modifier-list.component.css']
+})
+export class ModifierListComponent implements OnInit {
+  @ViewChild('table', { static: true }) table: MatTable<Modifier>;
+  dataSource: ModifierListDataSource;
+  filter: BehaviorSubject<string>;
+  form: FormGroup;
+  list: Modifier[];
+  data: BehaviorSubject<Modifier[]>;
+  modifierCategories: ModifierCategory[];
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns: string[] = ['name', 'showInBill', 'price', 'modifierCategory'];
+
+  constructor(
+    private route: ActivatedRoute,
+    private fb: FormBuilder,
+    private router: Router
+  ) {
+    this.form = this.fb.group({
+      modifierCategory: ''
+    });
+    this.filter = new BehaviorSubject("");
+    this.data = new BehaviorSubject([]);
+    this.data.subscribe((data: Modifier[]) => {
+      this.list = data;
+    })
+  }
+
+  filterOn(val: any) {
+    this.filter.next(val.value);
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { list: Modifier[], modifierCategories: ModifierCategory[] }) => {
+        this.data.next(data.list);
+        this.modifierCategories = data.modifierCategories;
+      });
+    this.dataSource = new ModifierListDataSource(this.filter, this.data);
+  }
+}

bookie/src/app/modifiers/modifier-resolver.service.spec.ts

@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {ModifierResolver} from './modifier-resolver.service';
+
+describe('ModifierResolver', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ModifierResolver]
+    });
+  });
+
+  it('should be created', inject([ModifierResolver], (service: ModifierResolver) => {
+    expect(service).toBeTruthy();
+  }));
+});

bookie/src/app/modifiers/modifier-resolver.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
+import {ModifierService} from './modifier.service';
+import {Modifier} from '../core/modifier';
+import {Observable} from 'rxjs/internal/Observable';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModifierResolver implements Resolve<Modifier> {
+
+  constructor(private ser: ModifierService, private router: Router) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Modifier> {
+    const id = route.paramMap.get('id');
+    return this.ser.get(id);
+  }
+}

bookie/src/app/modifiers/modifier.service.spec.ts

@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {ModifierService} from './modifier.service';
+
+describe('ModifierService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ModifierService]
+    });
+  });
+
+  it('should be created', inject([ModifierService], (service: ModifierService) => {
+    expect(service).toBeTruthy();
+  }));
+});

bookie/src/app/modifiers/modifier.service.ts

@@ -0,0 +1,88 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { catchError } from 'rxjs/operators';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Modifier } from '../core/modifier';
+import { ErrorLoggerService } from '../core/error-logger.service';
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+};
+
+const url = '/v1/modifiers';
+const serviceName = 'ModifierService';
+
+@Injectable({providedIn: 'root'})
+export class ModifierService {
+
+  constructor(private http: HttpClient, private log: ErrorLoggerService) {
+  }
+
+  get(id: string): Observable<Modifier> {
+    const getUrl: string = (id === null) ? `${url}/new` : `${url}/${id}`;
+    return <Observable<Modifier>>this.http.get<Modifier>(getUrl)
+      .pipe(
+        catchError(this.log.handleError(serviceName, `get id=${id}`))
+      );
+  }
+
+  list(): Observable<Modifier[]> {
+    const options = {params: new HttpParams().set('l', '')};
+    return <Observable<Modifier[]>>this.http.get<Modifier[]>(url, options)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'getList'))
+      );
+  }
+
+  save(modifier: Modifier): Observable<Modifier> {
+    return <Observable<Modifier>>this.http.post<Modifier>(`${url}/new`, modifier, httpOptions)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'save'))
+      );
+  }
+
+  update(modifier: Modifier): Observable<Modifier> {
+    return <Observable<Modifier>>this.http.put<Modifier>(`${url}/${modifier.id}`, modifier, httpOptions)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'update'))
+      );
+  }
+
+  updateSortOrder(list: Modifier[]): Observable<boolean> {
+    return <Observable<boolean>>this.http.post<Modifier[]>(url, list, httpOptions)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'updateSortOrder'))
+      );
+  }
+
+  saveOrUpdate(modifier: Modifier): Observable<Modifier> {
+    if (!modifier.id) {
+      return this.save(modifier);
+    } else {
+      return this.update(modifier);
+    }
+  }
+
+  delete(id: string): Observable<Modifier> {
+    return <Observable<Modifier>>this.http.delete<Modifier>(`${url}/${id}`, httpOptions)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'delete'))
+      );
+  }
+
+  autocomplete(term: string): Observable<Modifier[]> {
+    const options = {params: new HttpParams().set('t', term)};
+    return <Observable<Modifier[]>>this.http.get<Modifier[]>(url, options)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'autocomplete'))
+      );
+  }
+
+  balance(id: string, date: string): Observable<number> {
+    const options = {params: new HttpParams().set('b', 'true').set('d', date)};
+    return <Observable<number>>this.http.get<number>(`${url}/${id}`, options)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'balance'))
+      );
+  }
+}

bookie/src/app/modifiers/modifiers-routing.module.spec.ts

@@ -0,0 +1,13 @@
+import {ModifiersRoutingModule} from './modifiers-routing.module';
+
+describe('ModifiersRoutingModule', () => {
+  let modifiersRoutingModule: ModifiersRoutingModule;
+
+  beforeEach(() => {
+    modifiersRoutingModule = new ModifiersRoutingModule();
+  });
+
+  it('should create an instance', () => {
+    expect(modifiersRoutingModule).toBeTruthy();
+  });
+});

bookie/src/app/modifiers/modifiers-routing.module.ts

@@ -0,0 +1,67 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ModifierListResolver } from './modifier-list-resolver.service';
+import { ModifierResolver } from './modifier-resolver.service';
+import { ModifierDetailComponent } from './modifier-detail/modifier-detail.component';
+import { ModifierListComponent } from './modifier-list/modifier-list.component';
+
+import { AuthGuard } from '../auth/auth-guard.service';
+import { ModifierCategoryListResolver } from "../modifier-categories/modifier-category-list-resolver.service";
+
+const modifierRoutes: Routes = [
+  {
+    path: '',
+    component: ModifierListComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Modifiers'
+    },
+    resolve: {
+      list: ModifierListResolver,
+      modifierCategories: ModifierCategoryListResolver
+    }
+  },
+  {
+    path: 'new',
+    component: ModifierDetailComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Modifiers'
+    },
+    resolve: {
+      item: ModifierResolver,
+      modifierCategories: ModifierCategoryListResolver
+    }
+  },
+  {
+    path: ':id',
+    component: ModifierDetailComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Modifiers'
+    },
+    resolve: {
+      item: ModifierResolver,
+      modifierCategories: ModifierCategoryListResolver
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(modifierRoutes)
+
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    ModifierListResolver,
+    ModifierResolver
+  ]
+})
+export class ModifiersRoutingModule {
+}

bookie/src/app/modifiers/modifiers.module.spec.ts

@@ -0,0 +1,13 @@
+import {ModifiersModule} from './modifiers.module';
+
+describe('ModifiersModule', () => {
+  let modifiersModule: ModifiersModule;
+
+  beforeEach(() => {
+    modifiersModule = new ModifiersModule();
+  });
+
+  it('should create an instance', () => {
+    expect(modifiersModule).toBeTruthy();
+  });
+});

bookie/src/app/modifiers/modifiers.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ModifierListComponent } from './modifier-list/modifier-list.component';
+import { ModifierDetailComponent } from './modifier-detail/modifier-detail.component';
+import { ModifiersRoutingModule } from './modifiers-routing.module';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatOptionModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatTableModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    ReactiveFormsModule,
+    ModifiersRoutingModule
+  ],
+  declarations: [
+    ModifierListComponent,
+    ModifierDetailComponent
+  ]
+})
+export class ModifiersModule {
+}