refactor status toggle to list toggle

This commit is contained in:
Jesse Lucas 2020-03-19 18:05:04 -04:00
parent 230eb20a34
commit 9207562545
10 changed files with 69 additions and 69 deletions

View File

@ -0,0 +1,4 @@
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" value="folders">
<mat-button-toggle value="folders" (click)="onSelect(listType.Folders)">Folders</mat-button-toggle>
<mat-button-toggle value="devices" (click)="onSelect(listType.Devices)">Devices</mat-button-toggle>
</mat-button-toggle-group>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ListToggleComponent } from './list-toggle.component';
describe('ListToggleComponent', () => {
let component: ListToggleComponent;
let fixture: ComponentFixture<ListToggleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ListToggleComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListToggleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,31 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ListType } from '../list-type';
@Component({
selector: 'app-list-toggle',
templateUrl: './list-toggle.component.html',
styleUrls: ['./list-toggle.component.scss']
})
export class ListToggleComponent implements OnInit {
public listType = ListType;
@Output() listTypeEvent = new EventEmitter<ListType>();
constructor() { }
ngOnInit(): void {
}
onSelect(t: ListType): void {
this.listTypeEvent.emit(t);
switch (t) {
case ListType.Folders:
console.log("folder action");
break;
case ListType.Devices:
console.log("Device action");
break;
}
}
}

View File

@ -1,4 +1,4 @@
export enum Status { export enum ListType {
Folders = 1, Folders = 1,
Devices, Devices,
} }

View File

@ -1,10 +1,10 @@
<mat-card class="{{elevation}}"> <mat-card class="{{elevation}}">
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between start">
<mat-card-title>Status</mat-card-title> <mat-card-title>Status</mat-card-title>
<app-status-toggle (statusEvent)="onToggle($event)"></app-status-toggle> <app-list-toggle (listTypeEvent)="onToggle($event)"></app-list-toggle>
</div> </div>
<mat-card-content> <mat-card-content>
<app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list> <app-folder-list *ngIf="currentListType===listType.Folders"></app-folder-list>
<app-device-list *ngIf="currentStatus===status.Devices"></app-device-list> <app-device-list *ngIf="currentListType===listType.Devices"></app-device-list>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Status } from '../../status'; import { ListType } from '../../list-type';
import { cardElevation } from '../../style'; import { cardElevation } from '../../style';
@ -9,8 +9,8 @@ import { cardElevation } from '../../style';
styleUrls: ['./status-list.component.scss'] styleUrls: ['./status-list.component.scss']
}) })
export class StatusListComponent implements OnInit { export class StatusListComponent implements OnInit {
currentStatus: Status = Status.Folders; currentListType: ListType = ListType.Folders;
status = Status; // used in html listType = ListType; // used in html
elevation: string = cardElevation; elevation: string = cardElevation;
constructor() { } constructor() { }
@ -18,7 +18,7 @@ export class StatusListComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
onToggle(s: Status) { onToggle(t: ListType) {
this.currentStatus = s; this.currentListType = t;
} }
} }

View File

@ -1,4 +0,0 @@
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" value="folders">
<mat-button-toggle value="folders" (click)="onSelect(status.Folders)">Folders</mat-button-toggle>
<mat-button-toggle value="devices" (click)="onSelect(status.Devices)">Devices</mat-button-toggle>
</mat-button-toggle-group>

View File

@ -1,25 +0,0 @@
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

@ -1,31 +0,0 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Status } from '../status';
@Component({
selector: 'app-status-toggle',
templateUrl: './status-toggle.component.html',
styleUrls: ['./status-toggle.component.scss']
})
export class StatusToggleComponent implements OnInit {
public status = Status
@Output() statusEvent = new EventEmitter<Status>();
constructor() { }
ngOnInit(): void {
}
onSelect(s: Status): void {
this.statusEvent.emit(s);
switch (s) {
case Status.Folders:
console.log("folder action");
break;
case Status.Devices:
console.log("Device action");
break;
}
}
}