66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { CdkDragDrop, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatCardModule } from '@angular/material/card';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
|
|
import { Table } from '../../core/table';
|
|
import { ToasterService } from '../../core/toaster.service';
|
|
import { TableService } from '../table.service';
|
|
|
|
import { TableListDataSource } from './table-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-table-list',
|
|
templateUrl: './table-list.component.html',
|
|
styleUrls: ['./table-list.component.css'],
|
|
imports: [DragDropModule, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
|
|
})
|
|
export class TableListComponent implements OnInit {
|
|
// @ViewChild('table', { static: true }) table?: MatTable<Table>;
|
|
data: BehaviorSubject<Table[]> = new BehaviorSubject<Table[]>([]);
|
|
dataSource: TableListDataSource = new TableListDataSource(this.data);
|
|
list: Table[] = [];
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['name', 'seats', 'section', 'isActive'];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
private toaster: ToasterService,
|
|
private ser: TableService,
|
|
) {
|
|
this.data.subscribe((data: Table[]) => {
|
|
this.list = data;
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.route.data.subscribe((value) => {
|
|
const data = value as { list: Table[] };
|
|
this.data.next(data.list);
|
|
});
|
|
this.dataSource = new TableListDataSource(this.data);
|
|
}
|
|
|
|
updateSortOrder() {
|
|
this.ser.updateSortOrder(this.list).subscribe({
|
|
next: () => {
|
|
this.toaster.show('Success', '');
|
|
},
|
|
error: (error) => {
|
|
this.toaster.show('Error', error);
|
|
},
|
|
});
|
|
}
|
|
|
|
dropTable(event: CdkDragDrop<TableListDataSource>) {
|
|
const prevIndex = this.list.indexOf(event.item.data);
|
|
moveItemInArray(this.list, prevIndex, event.currentIndex);
|
|
this.data.next(this.list);
|
|
}
|
|
}
|