Tables List and Detail working
TODO: Save SortOrder also, Drag and Drop ordering
This commit is contained in:
@ -1,33 +1,31 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-table-list',
|
||||
templateUrl: './table-list.component.html',
|
||||
styleUrls: ['./table-list.component.css']
|
||||
})
|
||||
export class TableListComponent {
|
||||
/** Based on the screen size, switch from standard to one column per row */
|
||||
cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
|
||||
map(({ matches }) => {
|
||||
if (matches) {
|
||||
return [
|
||||
{ title: 'Card 1', cols: 1, rows: 1 },
|
||||
{ title: 'Card 2', cols: 1, rows: 1 },
|
||||
{ title: 'Card 3', cols: 1, rows: 1 },
|
||||
{ title: 'Card 4', cols: 1, rows: 1 }
|
||||
];
|
||||
}
|
||||
export class TableListComponent implements OnInit {
|
||||
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
dataSource: TableListDataSource;
|
||||
list: Table[];
|
||||
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
||||
displayedColumns = ['name', 'isActive'];
|
||||
|
||||
return [
|
||||
{ title: 'Card 1', cols: 2, rows: 1 },
|
||||
{ title: 'Card 2', cols: 1, rows: 1 },
|
||||
{ title: 'Card 3', cols: 1, rows: 2 },
|
||||
{ title: 'Card 4', cols: 1, rows: 1 }
|
||||
];
|
||||
})
|
||||
);
|
||||
constructor(private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
constructor(private breakpointObserver: BreakpointObserver) {}
|
||||
ngOnInit() {
|
||||
this.route.data
|
||||
.subscribe((data: { list: Table[] }) => {
|
||||
this.list = data.list;
|
||||
});
|
||||
this.dataSource = new TableListDataSource(this.paginator, this.sort, this.list);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user