Guest book now shows table status and link to open table

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.css

@@ -1,3 +1,15 @@
 .full-width-table {
   width: 100%;
 }
+
+.running {
+  /* Red 900 */
+  background-color: #b71c1c;
+  color: #ffffff;
+}
+
+.printed {
+  /* Green 900 */
+  background-color: #1b5e20;
+  color: #ffffff;
+}

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.html

@@ -33,7 +33,7 @@
       <!-- SNo Column -->
       <ng-container matColumnDef="sno">
         <mat-header-cell *matHeaderCellDef>S. No</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.serial }}</mat-cell>
+        <mat-cell *matCellDef="let row">{{ row.serial }} {{ row.status }}</mat-cell>
       </ng-container>
 
       <!-- Name Column -->
@@ -64,9 +64,24 @@
       <ng-container matColumnDef="action">
         <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
         <mat-cell *matCellDef="let row" class="center">
-          <button mat-icon-button [routerLink]="['/sales']" [queryParams]="{ guest: row.id }">
+          <button
+            mat-raised-button
+            color="primary"
+            [routerLink]="['/sales']"
+            [queryParams]="{ guest: row.id }"
+            *ngIf="!row.tableId"
+          >
             Seat
           </button>
+          <button
+            mat-raised-button
+            color="primary"
+            [routerLink]="['/sales', 'bill']"
+            [queryParams]="{ table: row.tableId, voucher: row.voucherId }"
+            *ngIf="row.tableId"
+          >
+            {{ row.tableName }}
+          </button>
           <button mat-icon-button [routerLink]="['/guest-book/', row.id]">
             <mat-icon>edit</mat-icon>
           </button>
@@ -77,7 +92,11 @@
       </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      <mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [class.running]="row.status === 'running'"
+        [class.printed]="row.status === 'printed'"
+      ></mat-row>
     </mat-table>
   </mat-card-content>
 </mat-card>

bookie/src/app/guest-book/guest-book.ts

@@ -6,6 +6,10 @@ export class GuestBook {
   pax: number;
   address: string;
   date: string;
+  status?: string;
+  tableId?: string;
+  voucherId?: string;
+  tableName?: string;
 
   public constructor(init?: Partial<GuestBook>) {
     Object.assign(this, init);