start of toggle to switch between devices and folders data table

This commit is contained in:
Jesse Lucas 2020-03-11 11:01:11 -04:00
parent 1d249a877e
commit 031fd72dfd
11 changed files with 83 additions and 7 deletions

View File

@ -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]

6
src/app/device.ts Normal file
View File

@ -0,0 +1,6 @@
export interface Device {
id: string;
name: string;
// TODO add additional properties
}

View File

@ -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' },
]; ];

View File

@ -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();
} }

View File

@ -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 -->

View File

@ -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() {

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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 {
}
}

View File

@ -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);
}
} }