mirror of
https://github.com/octoleo/syncthing.git
synced 2024-09-19 21:29:01 +00:00
start of list filtering
This commit is contained in:
parent
dae1f990a5
commit
42fa03aa4a
@ -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,
|
||||
|
@ -1,22 +1,20 @@
|
||||
<div class="{{elevation}}">
|
||||
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
||||
<!-- Id Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.deviceID}}</td>
|
||||
</ng-container>
|
||||
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
||||
<!-- Id Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.deviceID}}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.name}}</td>
|
||||
</ng-container>
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]">
|
||||
</mat-paginator>
|
@ -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<Device>;
|
||||
dataSource: DeviceListDataSource;
|
||||
elevation: string = dataTableElevation;
|
||||
dataSource: MatTableDataSource<Device>;
|
||||
|
||||
/** 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<Device[]>()
|
||||
this.dataSource = new MatTableDataSource();
|
||||
this.dataSource.data = [];
|
||||
|
||||
this.systemConfigService.getDevices().subscribe(
|
||||
data => {
|
||||
this.dataSource.data = data;
|
||||
this.dataSource.dataSubject.next(data);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -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<Folder> {
|
||||
data: Folder[];
|
||||
dataSubject: Subject<Folder[]>;
|
||||
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<Folder[]> {
|
||||
// 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);
|
||||
}
|
@ -1,22 +1,24 @@
|
||||
<div class="{{elevation}}">
|
||||
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
||||
<mat-form-field>
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
|
||||
</mat-form-field>
|
||||
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
||||
<!-- Id Column -->
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.id}}</td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.id}}</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Label Column -->
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="label">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Label</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.label}}</td>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
|
||||
<td mat-cell *matCellDef="let row">{{row.label}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
|
||||
<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</mat-paginator>
|
@ -1,3 +1,3 @@
|
||||
.full-width-table {
|
||||
width: 100%;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
@ -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<Folder>;
|
||||
dataSource: FolderListDataSource;
|
||||
elevation: string = dataTableElevation;
|
||||
dataSource: MatTableDataSource<Folder>;
|
||||
|
||||
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<Folder[]>();
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user