diff --git a/src/app/app.module.ts b/src/app/app.module.ts index addad321b..9d17cc917 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,6 +5,7 @@ import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'; import { MatTableModule } from '@angular/material/table'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSortModule } from '@angular/material/sort'; +import { MatInputModule } from '@angular/material/input'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatCardModule } from '@angular/material/card'; import { FlexLayoutModule } from '@angular/flex-layout'; @@ -15,7 +16,6 @@ import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { StatusListComponent } from './lists/status-list/status-list.component'; -import { FolderListComponent } from './lists/folder-list/folder-list.component'; import { DeviceListComponent } from './lists/device-list/device-list.component'; import { DonutChartComponent } from './charts/donut-chart/donut-chart.component'; import { DashboardComponent } from './dashboard/dashboard.component'; @@ -28,23 +28,25 @@ import { deviceID } from './api-utils'; import { environment } from '../environments/environment'; import { ChartItemComponent } from './charts/chart-item/chart-item.component'; import { ChartComponent } from './charts/chart/chart.component'; +import { FolderListComponent } from './lists/folder-list/folder-list.component'; @NgModule({ declarations: [ AppComponent, StatusListComponent, - FolderListComponent, DeviceListComponent, ListToggleComponent, DashboardComponent, DonutChartComponent, ChartComponent, ChartItemComponent, + FolderListComponent, ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, + MatInputModule, MatTableModule, MatPaginatorModule, MatSortModule, diff --git a/src/app/lists/device-list/device-list.component.html b/src/app/lists/device-list/device-list.component.html index 86d7bcfef..7500bd3c4 100644 --- a/src/app/lists/device-list/device-list.component.html +++ b/src/app/lists/device-list/device-list.component.html @@ -1,22 +1,20 @@ -
- - - - - - +
Id{{row.deviceID}}
+ + + + + - - - - - + + + + + - - -
Id{{row.deviceID}}Name{{row.name}}Name{{row.name}}
+ + + - - -
\ No newline at end of file + + \ No newline at end of file diff --git a/src/app/lists/device-list/device-list.component.ts b/src/app/lists/device-list/device-list.component.ts index 2a3599684..f29dc59d5 100644 --- a/src/app/lists/device-list/device-list.component.ts +++ b/src/app/lists/device-list/device-list.component.ts @@ -1,13 +1,10 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { MatTable } from '@angular/material/table'; +import { MatTable, MatTableDataSource } from '@angular/material/table'; -import { DeviceListDataSource } from './device-list-datasource'; import Device from '../../device'; import { SystemConfigService } from '../../services/system-config.service'; -import { dataTableElevation } from '../../style'; -import { Subject } from 'rxjs'; @Component({ selector: 'app-device-list', @@ -18,8 +15,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatTable) table: MatTable; - dataSource: DeviceListDataSource; - elevation: string = dataTableElevation; + dataSource: MatTableDataSource; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['id', 'name']; @@ -27,14 +23,12 @@ export class DeviceListComponent implements AfterViewInit, OnInit { constructor(private systemConfigService: SystemConfigService) { }; ngOnInit() { - this.dataSource = new DeviceListDataSource(this.systemConfigService); - this.dataSource.dataSubject = new Subject() + this.dataSource = new MatTableDataSource(); this.dataSource.data = []; this.systemConfigService.getDevices().subscribe( data => { this.dataSource.data = data; - this.dataSource.dataSubject.next(data); } ); } diff --git a/src/app/lists/folder-list/folder-list-datasource.ts b/src/app/lists/folder-list/folder-list-datasource.ts deleted file mode 100644 index e107b629f..000000000 --- a/src/app/lists/folder-list/folder-list-datasource.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { DataSource } from '@angular/cdk/collections'; -import { MatPaginator } from '@angular/material/paginator'; -import { MatSort } from '@angular/material/sort'; - -import { map } from 'rxjs/operators'; -import { Observable, of as observableOf, merge, Subject } from 'rxjs'; -import Folder from '../../folder'; -import { SystemConfigService } from '../../services/system-config.service'; - -/** - * Data source for the FolderList view. This class should - * encapsulate all logic for fetching and manipulating the displayed data - * (including sorting, pagination, and filtering). - */ -export class FolderListDataSource extends DataSource { - data: Folder[]; - dataSubject: Subject; - paginator: MatPaginator; - sort: MatSort; - - constructor(private systemConfigService: SystemConfigService) { - super(); - } - - /** - * Connect this data source to the table. The table will only update when - * the returned stream emits new items. - * @returns A stream of the items to be rendered. - */ - connect(): Observable { - // Combine everything that affects the rendered data into one update - // st - const dataMutations = [ - this.dataSubject, - observableOf(this.data), - this.paginator.page, - this.sort.sortChange - ]; - - return merge(...dataMutations).pipe(map(() => { - return this.getPagedData(this.getSortedData([...this.data])); - })); - } - - /** - * Called when the table is being destroyed. Use this function, to clean up - * any open connections or free any held resources that were set up during connect. - */ - disconnect() { } - - /** - * Paginate the data (client-side). If you're using server-side pagination, - * this would be replaced by requesting the appropriate data from the server. - */ - private getPagedData(data: Folder[]) { - const startIndex = this.paginator.pageIndex * this.paginator.pageSize; - return data.splice(startIndex, this.paginator.pageSize); - } - - /** - * Sort the data (client-side). If you're using server-side sorting, - * this would be replaced by requesting the appropriate data from the server. - */ - private getSortedData(data: Folder[]) { - if (!this.sort.active || this.sort.direction === '') { - return data; - } - - return data.sort((a, b) => { - const isAsc = this.sort.direction === 'asc'; - switch (this.sort.active) { - case 'label': return compare(a.label, b.label, isAsc); - case 'id': return compare(+a.id, +b.id, isAsc); - default: return 0; - } - }); - } -} - -function compare(a: string | number, b: string | number, isAsc: boolean) { - return (a < b ? -1 : 1) * (isAsc ? 1 : -1); -} diff --git a/src/app/lists/folder-list/folder-list.component.html b/src/app/lists/folder-list/folder-list.component.html index 90f3840a3..d4bee42e4 100644 --- a/src/app/lists/folder-list/folder-list.component.html +++ b/src/app/lists/folder-list/folder-list.component.html @@ -1,22 +1,24 @@ -
- + + Filter + + +
- - + + - + - - + + -
Id{{row.id}}Id{{row.id}} Label{{row.label}}Name{{row.label}}
+ - - -
\ No newline at end of file + \ No newline at end of file diff --git a/src/app/lists/folder-list/folder-list.component.scss b/src/app/lists/folder-list/folder-list.component.scss index 5050fb6e0..fe285c560 100644 --- a/src/app/lists/folder-list/folder-list.component.scss +++ b/src/app/lists/folder-list/folder-list.component.scss @@ -1,3 +1,3 @@ .full-width-table { - width: 100%; -} + width: 100%; +} \ No newline at end of file diff --git a/src/app/lists/folder-list/folder-list.component.spec.ts b/src/app/lists/folder-list/folder-list.component.spec.ts index af35e6f7e..225398c99 100644 --- a/src/app/lists/folder-list/folder-list.component.spec.ts +++ b/src/app/lists/folder-list/folder-list.component.spec.ts @@ -1,8 +1,4 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { MatPaginatorModule } from '@angular/material/paginator'; -import { MatSortModule } from '@angular/material/sort'; -import { MatTableModule } from '@angular/material/table'; import { FolderListComponent } from './folder-list.component'; @@ -12,14 +8,9 @@ describe('FolderListComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [FolderListComponent], - imports: [ - NoopAnimationsModule, - MatPaginatorModule, - MatSortModule, - MatTableModule, - ] - }).compileComponents(); + declarations: [ FolderListComponent ] + }) + .compileComponents(); })); beforeEach(() => { @@ -28,7 +19,7 @@ describe('FolderListComponent', () => { fixture.detectChanges(); }); - it('should compile', () => { + it('should create', () => { expect(component).toBeTruthy(); }); }); diff --git a/src/app/lists/folder-list/folder-list.component.ts b/src/app/lists/folder-list/folder-list.component.ts index f9eddd7ec..cae3ba900 100644 --- a/src/app/lists/folder-list/folder-list.component.ts +++ b/src/app/lists/folder-list/folder-list.component.ts @@ -1,13 +1,10 @@ -import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; -import { MatTable } from '@angular/material/table'; +import { MatTable, MatTableDataSource } from '@angular/material/table'; -import { FolderListDataSource } from './folder-list-datasource'; import Folder from '../../folder'; import { SystemConfigService } from '../../services/system-config.service'; -import { dataTableElevation } from '../../style'; -import { Subject } from 'rxjs'; @Component({ selector: 'app-folder-list', @@ -18,8 +15,12 @@ export class FolderListComponent implements AfterViewInit, OnInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatTable) table: MatTable; - dataSource: FolderListDataSource; - elevation: string = dataTableElevation; + dataSource: MatTableDataSource; + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + } /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['id', 'label']; @@ -27,14 +28,12 @@ export class FolderListComponent implements AfterViewInit, OnInit { constructor(private systemConfigService: SystemConfigService) { }; ngOnInit() { - this.dataSource = new FolderListDataSource(this.systemConfigService); - this.dataSource.dataSubject = new Subject(); + this.dataSource = new MatTableDataSource(); this.dataSource.data = []; this.systemConfigService.getFolders().subscribe( data => { this.dataSource.data = data; - this.dataSource.dataSubject.next(data); } ); } @@ -44,4 +43,4 @@ export class FolderListComponent implements AfterViewInit, OnInit { this.dataSource.paginator = this.paginator; this.table.dataSource = this.dataSource; } -} +} \ No newline at end of file