TODO: Refactor the product and productgroup tables as per the comments added.

rename the product group table to either product category or menu category
move the group_type field from productgroup to products and name it sales category eg. Food, beverage, etc. also, set the tax for sales category and not individual product
Added the printers permission to end of permissions and only for owner, set them right

bookie/src/app/printers/printer-list/printer-list-datasource.ts

@@ -0,0 +1,17 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Observable, of as observableOf} from 'rxjs';
+import {Printer} from '../printer';
+
+export class PrinterListDataSource extends DataSource<Printer> {
+
+  constructor(public data: Printer[]) {
+    super();
+  }
+
+  connect(): Observable<Printer[]> {
+    return observableOf(this.data);
+  }
+
+  disconnect() {
+  }
+}

bookie/src/app/printers/printer-list/printer-list.component.html

@@ -0,0 +1,35 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Printers</mat-card-title>
+    <a mat-button [routerLink]="['/printers', 'new']">
+      <mat-icon>add_box</mat-icon>
+      Add
+    </a>
+  </mat-card-title-group>
+  <mat-card-content>
+    <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]="['/printers', row.id]">{{row.name}}</a></mat-cell>
+      </ng-container>
+
+      <!-- Address Column -->
+      <ng-container matColumnDef="address">
+        <mat-header-cell *matHeaderCellDef>Address</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.address}}</mat-cell>
+      </ng-container>
+
+      <!-- Cut Code Column -->
+      <ng-container matColumnDef="cutCode">
+        <mat-header-cell *matHeaderCellDef>Cut Code</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{row.cutCode}}</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/printers/printer-list/printer-list.component.spec.ts

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

bookie/src/app/printers/printer-list/printer-list.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { PrinterListDataSource } from './printer-list-datasource';
+import { Printer } from '../printer';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-printer-list',
+  templateUrl: './printer-list.component.html',
+  styleUrls: ['./printer-list.component.css']
+})
+export class PrinterListComponent implements OnInit {
+  dataSource: PrinterListDataSource;
+  list: Printer[];
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['name', 'address', 'cutCode'];
+
+  constructor(private route: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { list: Printer[] }) => {
+        this.list = data.list;
+      });
+    this.dataSource = new PrinterListDataSource(this.list);
+  }
+}