Section

bookie/src/app/tables/table-detail/table-detail.component.html

@@ -23,8 +23,12 @@
              fxLayoutGap.lt-md="0px">
           <mat-form-field fxFlex>
             <mat-label>Section</mat-label>
-            <input matInput placeholder="Section" formControlName="section">
-          </mat-form-field>
+            <mat-select placeholder="Section" formControlName="section">
+              <mat-option *ngFor="let s of sections" [value]="s.id">
+                {{ s.name }}
+               </mat-option>
+             </mat-select>
+           </mat-form-field>
         </div>
         <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
              fxLayoutGap.lt-md="0px">

bookie/src/app/tables/table-detail/table-detail.component.ts

@@ -7,6 +7,7 @@ import {ToasterService} from '../../core/toaster.service';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import {ConfirmDialogComponent} from "../../shared/confirm-dialog/confirm-dialog.component";
 import {MatDialog} from "@angular/material";
+import {Section} from "../../core/section";
 
 @Component({
   selector: 'app-table-detail',
@@ -16,6 +17,7 @@ import {MatDialog} from "@angular/material";
 export class TableDetailComponent implements OnInit, AfterViewInit {
   @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
   form: FormGroup;
+  sections: Section[];
   item: Table;
 
   constructor(
@@ -40,8 +42,9 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {
     this.route.data
-      .subscribe((data: { item: Table }) => {
+      .subscribe((data: { item: Table, sections: Section[] }) => {
         this.showItem(data.item);
+        this.sections = data.sections;
       });
   }
 
@@ -50,7 +53,7 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
     this.form.setValue({
       name: this.item.name,
       seats: this.item.seats,
-      section: this.item.section,
+      section: this.item.section.id ? this.item.section.id : '',
       isActive: this.item.isActive
     });
   }
@@ -104,7 +107,7 @@ export class TableDetailComponent implements OnInit, AfterViewInit {
     const formModel = this.form.value;
     this.item.name = formModel.name;
     this.item.seats = +formModel.seats;
-    this.item.section = formModel.section;
+    this.item.section.id = formModel.section;
     this.item.isActive = formModel.isActive;
     return this.item;
   }

bookie/src/app/tables/table-list/table-list.component.html

@@ -27,7 +27,7 @@
       <!-- Section Column -->
       <ng-container matColumnDef="section">
         <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{row.section}}</mat-cell>
+        <mat-cell *matCellDef="let row">{{row.section.name}}</mat-cell>
       </ng-container>
 
       <!-- Is Active Column -->

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

@@ -1,11 +1,12 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {RouterModule, Routes} from '@angular/router';
-import {TableListResolver} from './table-list-resolver.service';
-import {TableResolver} from './table-resolver.service';
-import {TableListComponent} from './table-list/table-list.component';
-import {TableDetailComponent} from './table-detail/table-detail.component';
-import {AuthGuard} from '../auth/auth-guard.service';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { TableListResolver } from './table-list-resolver.service';
+import { TableResolver } from './table-resolver.service';
+import { TableListComponent } from './table-list/table-list.component';
+import { TableDetailComponent } from './table-detail/table-detail.component';
+import { AuthGuard } from '../auth/auth-guard.service';
+import { SectionListResolver } from "../sections/section-list-resolver.service";
 
 const tablesRoutes: Routes = [
   {
@@ -27,7 +28,8 @@ const tablesRoutes: Routes = [
       permission: 'Tables'
     },
     resolve: {
-      item: TableResolver
+      item: TableResolver,
+      sections: SectionListResolver
     }
   },
   {
@@ -38,7 +40,8 @@ const tablesRoutes: Routes = [
       permission: 'Tables'
     },
     resolve: {
-      item: TableResolver
+      item: TableResolver,
+      sections: SectionListResolver
     }
   }
 ];

bookie/src/app/tables/tables.module.ts

@@ -6,7 +6,9 @@ import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatOptionModule } from '@angular/material/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { DragDropModule } from "@angular/cdk/drag-drop";
@@ -26,7 +28,9 @@ import { TableRoutingModule } from './tables-routing.module';
     MatCheckboxModule,
     MatIconModule,
     MatInputModule,
+    MatOptionModule,
     MatProgressSpinnerModule,
+    MatSelectModule,
     MatTableModule,
     ReactiveFormsModule,
     TableRoutingModule