start of toggle to switch between devices and folders data table
This commit is contained in:
parent
1d249a877e
commit
031fd72dfd
|
@ -8,11 +8,15 @@ import { StatusListComponent } from './status-list/status-list.component';
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||||
import { MatSortModule } from '@angular/material/sort';
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||||
|
import { StatusToggleComponent } from './status-toggle/status-toggle.component';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
StatusListComponent,
|
StatusListComponent,
|
||||||
|
StatusToggleComponent,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -21,6 +25,7 @@ import { MatSortModule } from '@angular/material/sort';
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatPaginatorModule,
|
MatPaginatorModule,
|
||||||
MatSortModule,
|
MatSortModule,
|
||||||
|
MatButtonToggleModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
export interface Device {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
|
||||||
|
// TODO add additional properties
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import { Folder } from './folder';
|
import { Folder } from './folder';
|
||||||
|
import { Device } from './device';
|
||||||
|
|
||||||
export const FOLDERS: Folder[] = [
|
export const FOLDERS: Folder[] = [
|
||||||
{ id: 'GXWxf-3zgnU', label: 'Downloads' },
|
{ id: 'GXWxf-3zgnU', label: 'Downloads' },
|
||||||
|
@ -6,4 +7,11 @@ export const FOLDERS: Folder[] = [
|
||||||
{ id: 'QXWxf-3zgnU', label: 'Photos' },
|
{ id: 'QXWxf-3zgnU', label: 'Photos' },
|
||||||
{ id: 'RXWxf-3zgnU', label: 'Movies' },
|
{ id: 'RXWxf-3zgnU', label: 'Movies' },
|
||||||
{ id: 'SXWxf-3zgnU', label: 'Folder 5' },
|
{ id: 'SXWxf-3zgnU', label: 'Folder 5' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const DEVICES: Device[] = [
|
||||||
|
{ id: '001', name: 'macbook' },
|
||||||
|
{ id: '002', name: 'bedroom computer' },
|
||||||
|
{ id: '003', name: 'server in closet' },
|
||||||
|
{ id: '004', name: 'random' },
|
||||||
];
|
];
|
|
@ -1,23 +1,22 @@
|
||||||
import { DataSource } from '@angular/cdk/collections';
|
import { DataSource } from '@angular/cdk/collections';
|
||||||
import { MatPaginator } from '@angular/material/paginator';
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
import { MatSort } from '@angular/material/sort';
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
import { Observable, of as observableOf, merge } from 'rxjs';
|
import { Observable, of as observableOf, merge } from 'rxjs';
|
||||||
import { Folder } from '../folder';
|
import { Folder } from '../folder';
|
||||||
import { SystemConfigService } from '../system-config.service';
|
|
||||||
import { FOLDERS } from '../mock-folders';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Data source for the StatusList view. This class should
|
* Data source for the StatusList view. This class should
|
||||||
* encapsulate all logic for fetching and manipulating the displayed data
|
* encapsulate all logic for fetching and manipulating the displayed data
|
||||||
* (including sorting, pagination, and filtering).
|
* (including sorting, pagination, and filtering).
|
||||||
*/
|
*/
|
||||||
export class StatusListFolderDataSource extends DataSource<Folder> {
|
export class StatusListFolderDataSource extends DataSource<any> {
|
||||||
data: Folder[] = FOLDERS;
|
data: any[];
|
||||||
paginator: MatPaginator;
|
paginator: MatPaginator;
|
||||||
sort: MatSort;
|
sort: MatSort;
|
||||||
|
|
||||||
constructor(private systemConfigService: SystemConfigService) {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
<app-status-toggle></app-status-toggle>
|
||||||
<div class="mat-elevation-z8">
|
<div class="mat-elevation-z8">
|
||||||
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
<table mat-table class="full-width-table" matSort aria-label="Elements">
|
||||||
<!-- Id Column -->
|
<!-- Id Column -->
|
||||||
|
|
|
@ -2,10 +2,12 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { MatPaginator } from '@angular/material/paginator';
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
import { MatSort } from '@angular/material/sort';
|
import { MatSort } from '@angular/material/sort';
|
||||||
import { MatTable } from '@angular/material/table';
|
import { MatTable } from '@angular/material/table';
|
||||||
|
|
||||||
import { StatusListFolderDataSource } from './status-list-folder-datasource';
|
import { StatusListFolderDataSource } from './status-list-folder-datasource';
|
||||||
import { Folder } from '../folder';
|
import { Folder } from '../folder';
|
||||||
import { SystemConfigService } from '../system-config.service';
|
import { SystemConfigService } from '../system-config.service';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-status-list',
|
selector: 'app-status-list',
|
||||||
templateUrl: './status-list.component.html',
|
templateUrl: './status-list.component.html',
|
||||||
|
@ -23,7 +25,12 @@ export class StatusListComponent implements AfterViewInit, OnInit {
|
||||||
constructor(private systemConfigService: SystemConfigService) { };
|
constructor(private systemConfigService: SystemConfigService) { };
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.dataSource = new StatusListFolderDataSource(this.systemConfigService);
|
this.dataSource = new StatusListFolderDataSource();
|
||||||
|
this.systemConfigService.getDevices().subscribe(
|
||||||
|
data => {
|
||||||
|
this.dataSource.data = data;
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
|
||||||
|
<mat-button-toggle value="folders">Folders</mat-button-toggle>
|
||||||
|
<mat-button-toggle value="devices">Devices</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { StatusToggleComponent } from './status-toggle.component';
|
||||||
|
|
||||||
|
describe('StatusToggleComponent', () => {
|
||||||
|
let component: StatusToggleComponent;
|
||||||
|
let fixture: ComponentFixture<StatusToggleComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StatusToggleComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StatusToggleComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-status-toggle',
|
||||||
|
templateUrl: './status-toggle.component.html',
|
||||||
|
styleUrls: ['./status-toggle.component.scss']
|
||||||
|
})
|
||||||
|
export class StatusToggleComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -3,7 +3,8 @@ import { Injectable } from '@angular/core';
|
||||||
import { Observable, of } from 'rxjs';
|
import { Observable, of } from 'rxjs';
|
||||||
|
|
||||||
import { Folder } from './folder';
|
import { Folder } from './folder';
|
||||||
import { FOLDERS } from './mock-folders';
|
import { Device } from './device';
|
||||||
|
import { FOLDERS, DEVICES } from './mock-config-data';
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
|
@ -15,4 +16,9 @@ export class SystemConfigService {
|
||||||
getFolders(): Observable<Folder[]> {
|
getFolders(): Observable<Folder[]> {
|
||||||
return of(FOLDERS);
|
return of(FOLDERS);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getDevices(): Observable<Device[]> {
|
||||||
|
return of(DEVICES);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue