Move Table with confirm

bookie/src/app/sales/tables-dialog/tables-dialog.component.css

@@ -0,0 +1,27 @@
+.running {
+  background-color: green;
+}
+
+.printed {
+  background-color: firebrick;
+}
+
+.square-button {
+  min-width: 150px;
+  max-width: 150px;
+  min-height: 150px;
+  max-height: 150px;
+  cursor: pointer;
+  margin: 20px;
+}
+.item-name {
+  text-align: center;
+  padding: 0.5rem;
+}
+
+.center {
+  text-align: center;
+}
+.selected {
+  background-color: #dddddd;
+}

bookie/src/app/sales/tables-dialog/tables-dialog.component.html

@@ -0,0 +1,16 @@
+<h2 mat-dialog-title>Tables</h2>
+<mat-dialog-content fxLayout="row wrap" fxLayoutGap="grid 20px">
+  <mat-card fxLayout="column" class="square-button" matRipple *ngFor="let table of list" (click)="select(table)"
+            [class.running]="table.status === 'running'" [class.printed]="table.status === 'printed'"
+            [class.selected]="table === selected">
+  <h3 class="item-name">{{table.name}}</h3>
+    <mat-card-subtitle class="center">{{table.guest}}</mat-card-subtitle>
+    <span class="center">{{table.pax || 0}} / {{table.seats}} Seats</span>
+    <span class="center" *ngIf="table.date">{{table.date}}</span>
+    <span class="center" *ngIf="table.amount">{{table.amount | currency:'INR'}}</span>
+  </mat-card>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button (click)="accept()" color="primary">Ok</button>
+</mat-dialog-actions>

bookie/src/app/sales/tables-dialog/tables-dialog.component.spec.ts

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

bookie/src/app/sales/tables-dialog/tables-dialog.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Observable } from 'rxjs';
+import { Table } from "../../core/table";
+
+@Component({
+  selector: 'app-tables-dialog',
+  templateUrl: './tables-dialog.component.html',
+  styleUrls: ['./tables-dialog.component.css']
+})
+export class TablesDialogComponent {
+  list: Table[];
+  canChooseRunning: boolean;
+  selected: Table;
+  constructor(
+    public dialogRef: MatDialogRef<TablesDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { list: Observable<Table[]>, canChooseRunning: boolean }) {
+    this.data.list.subscribe((list: Table[]) => {
+      this.list = list;
+    });
+    this.canChooseRunning = data.canChooseRunning;
+    this.selected = null;
+  }
+
+  select(t: Table) {
+    if (!this.canChooseRunning && t.status) {
+      return;
+    }
+    if (this.selected === t) {
+      this.selected = null;
+    } else {
+      this.selected = t;
+    }
+  }
+
+  accept(): void {
+    if (this.selected !== null) {
+      this.dialogRef.close(this.selected);
+    }
+  }
+}