Move Table with confirm

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

@@ -18,7 +18,7 @@
   <mat-card fxLayout="column" class="square-button" matRipple (click)="receivePayment()">
     <h3 class="item-name">Receive Payment</h3>
   </mat-card>
-  <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['../../tables']">
+  <mat-card fxLayout="column" class="square-button" matRipple (click)="moveTable()">
     <h3 class="item-name">Move Table</h3>
   </mat-card>
   <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['../../tables']">

bookie/src/app/sales/home/sales-home.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { MatDialog } from "@angular/material";
-import { concatMap, tap } from "rxjs/operators";
+import { concatMap, map, switchMap, tap } from "rxjs/operators";
 import { iif, Observable, of as observableOf, throwError} from "rxjs";
 import { BillService } from '../bill.service';
 import { ToasterService } from "../../core/toaster.service";
@@ -11,6 +11,10 @@ import { BillTypeComponent } from "../bill-type/bill-type.component";
 import { PrintType } from "../bills/bill";
 import { AuthService } from "../../auth/auth.service";
 import { ReceivePaymentComponent } from "../receive-payment/receive-payment.component";
+import { TableService } from "../../tables/table.service";
+import { Table } from "../../core/table";
+import { TablesDialogComponent } from "../tables-dialog/tables-dialog.component";
+import { ConfirmDialogComponent } from "../../shared/confirm-dialog/confirm-dialog.component";
 
 @Component({
   selector: 'app-sales-home',
@@ -26,6 +30,7 @@ export class SalesHomeComponent implements OnInit {
     private auth: AuthService,
     private toaster: ToasterService,
     private mcSer: SaleCategoryService,
+    private tSer: TableService,
     private bs: BillService) {
   }
 
@@ -83,6 +88,15 @@ export class SalesHomeComponent implements OnInit {
     )
   }
 
+  confirmMoveTableDialog(table: Table): Observable<{table: Table, confirmed: boolean}> {
+    return this.dialog.open(ConfirmDialogComponent, {
+      width: '250px',
+      data: {title: 'Move Table?', content: 'Are you sure?'}
+    }).afterClosed().pipe(
+      map ((x: boolean) => ({table: table, confirmed: x}))
+    );
+  }
+
   printBill() {
     const canGiveDiscount = this.auth.hasPermission("Discount");
     let guestBookId = null;
@@ -127,4 +141,41 @@ export class SalesHomeComponent implements OnInit {
       }
     })
   }
+
+  moveTable() {
+    const dialogRef = this.dialog.open(TablesDialogComponent, {
+      // width: '750px',
+      data: {
+        list: this.tSer.running(),
+        canChooseRunning: false
+      }
+    });
+    dialogRef.afterClosed().pipe(
+      switchMap((x: boolean | Table) => {
+        if (!!x) {
+          return this.confirmMoveTableDialog(x as Table)
+        } else {
+          return throwError("Please choose a table")
+        }
+      }),
+      switchMap((value: { table: Table, confirmed: boolean }, index: number) => {
+          if (!!value.confirmed) {
+            return this.bs.moveTable(value.table)
+          } else {
+            return throwError("Please confirm move")
+          }
+        }
+      )
+    ).subscribe((x) => {
+        this.toaster.show('Success', '');
+        this.router.navigate(['/sales']);
+    },
+      x => {
+        this.toaster.show('Error', x)
+      })
+  }
+
+  voidBill() {
+
+  }
 }