Table Sort Order Done

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

@@ -1,9 +1,13 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {TableListDataSource} from './table-list-datasource';
-import {Table} from '../../core/table';
-import {ActivatedRoute} from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { TableListDataSource } from './table-list-datasource';
+import { Table } from '../../core/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatTable } from "@angular/material";
+import { ProductGroup } from "../../core/product-group";
+import { BehaviorSubject } from "rxjs";
+import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
+import { ToasterService } from "../../core/toaster.service";
+import { TableService } from "../table.service";
 
 @Component({
   selector: 'app-table-list',
@@ -11,21 +15,48 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./table-list.component.css']
 })
 export class TableListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild('table', { static: true }) table: MatTable<ProductGroup>;
   dataSource: TableListDataSource;
   list: Table[];
+  data: BehaviorSubject<Table[]>;
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'isActive'];
+  displayedColumns = ['name', 'location', 'isActive'];
 
-  constructor(private route: ActivatedRoute) {
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private toaster: ToasterService,
+    private ser: TableService
+  ) {
+    this.data = new BehaviorSubject([]);
+    this.data.subscribe((data: Table[]) => {
+      this.list = data;
+    })
   }
 
   ngOnInit() {
     this.route.data
       .subscribe((data: { list: Table[] }) => {
-        this.list = data.list;
+        this.data.next(data.list);
       });
-    this.dataSource = new TableListDataSource(this.paginator, this.sort, this.list);
+    this.dataSource = new TableListDataSource(this.data);
+  }
+
+  updateSortOrder() {
+    this.ser.updateSortOrder(this.list)
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+        },
+        (error) => {
+          this.toaster.show('Danger', error.error);
+        }
+      );
+  }
+
+  dropTable(event: CdkDragDrop<ProductGroup[]>) {
+    const prevIndex = this.list.indexOf(event.item.data);
+    moveItemInArray(this.list, prevIndex, event.currentIndex);
+    this.data.next(this.list);
   }
 }