refactor status toggle to list toggle

src/app/list-toggle/list-toggle.component.html

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

src/app/list-toggle/list-toggle.component.spec.ts

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

src/app/list-toggle/list-toggle.component.ts

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

src/app/list-type.ts

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

src/app/list/status-list/status-list.component.html

@@ -1,10 +1,10 @@
 <mat-card class="{{elevation}}">
     <div fxLayout="row" fxLayoutAlign="space-between start">
         <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>
     <mat-card-content>
-        <app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list>
-        <app-device-list *ngIf="currentStatus===status.Devices"></app-device-list>
+        <app-folder-list *ngIf="currentListType===listType.Folders"></app-folder-list>
+        <app-device-list *ngIf="currentListType===listType.Devices"></app-device-list>
     </mat-card-content>
 </mat-card>

src/app/list/status-list/status-list.component.ts

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

src/app/status-toggle/status-toggle.component.html

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

src/app/status-toggle/status-toggle.component.spec.ts

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

src/app/status-toggle/status-toggle.component.ts

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