adding advanced toggle (starting impl. of #7)

rngShard · Mar 23, 2021 · a4b1f73 · a4b1f73
1 parent d8b4f0b
commit a4b1f73
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { PrevownedComponent } from './boardgame-collection/prevowned/prevowned.c
 import { WishlistComponent } from './wishlist/wishlist.component';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { CollectionComponent } from './boardgame-collection/collection/collection.component';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 
 @NgModule({
@@ -69,7 +70,8 @@ import { CollectionComponent } from './boardgame-collection/collection/collectio
     MatDividerModule,
     MatIconModule,
     MatSidenavModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatSlideToggleModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/boardgame-collection/collection/collection.component.html b/src/app/boardgame-collection/collection/collection.component.html
@@ -5,7 +5,7 @@
   </mat-form-field>
 
   <mat-form-field class="minorFilter">
-    <mat-label>Players</mat-label>
+    <mat-label> Players </mat-label>
     <mat-select matNativeControl formControlName="numPlayers">
       <mat-option value="1"> 1 </mat-option>
       <mat-option value="2"> 2 </mat-option>
@@ -19,7 +19,7 @@
   </mat-form-field>
 
   <mat-form-field class="minorFilter">
-    <mat-label>Time</mat-label>
+    <mat-label> Time </mat-label>
     <mat-select matNativeControl formControlName="time">
       <mat-option value="15"> 15 min </mat-option>
       <mat-option value="30"> 30 min </mat-option>
@@ -31,7 +31,22 @@
     </mat-select>
   </mat-form-field>
 
+  <mat-form-field class="mediumFilter" *ngIf="advancedFiltersToggled">
+    <mat-label> Category </mat-label>
+    <mat-select matNativeControl formControlName="category">
+      <mat-option value="todo"> ... TODO ... </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field class="mediumFilter" *ngIf="advancedFiltersToggled">
+    <mat-label> Mechanic </mat-label>
+    <mat-select matNativeControl formControlName="mechanic">
+      <mat-option value="todo"> ... TODO ... </mat-option>
+    </mat-select>
+  </mat-form-field>
+
   <button mat-raised-button color="warn" (click)="resetForm()"> Clear </button>
+  <mat-slide-toggle (change)="toggleAdvancedFilters()" color="primary"> Advanced </mat-slide-toggle>
 </form>
 
 <div class="mat-elevation-z8">

diff --git a/src/app/boardgame-collection/collection/collection.component.scss b/src/app/boardgame-collection/collection/collection.component.scss
@@ -58,8 +58,11 @@ th.attrs, td.attrs {
     .minorFilter {
         width: 5em;
     }
+    .mediumFilter {
+        width: 7.5em;
+    }
 
-    button {
+    button, mat-slide-toggle {
         margin-left: 1em;
     }
 }

diff --git a/src/app/boardgame-collection/collection/collection.component.ts b/src/app/boardgame-collection/collection/collection.component.ts
@@ -42,6 +42,7 @@ export class CollectionComponent implements OnInit, AfterViewInit, OnChanges {
   columnsToDisplay = ['thumbnail', 'name'];
   expandedRow: BggBoardgameThing | null;
   formControl: AbstractControl;
+  advancedFiltersToggled: boolean;
 
   constructor(
     formBuilder: FormBuilder,
@@ -50,12 +51,14 @@ export class CollectionComponent implements OnInit, AfterViewInit, OnChanges {
   ) {
     this.gameThings = []
     this.dataSource = new MatTableDataSource(this.gameThings);
-
     this.formControl = formBuilder.group({
       name: '',
       numPlayers: '',
-      time: ''
+      time: '',
+      category: '',
+      mechanic: ''
     });
+    this.advancedFiltersToggled = false;
   }
 
   ngOnInit() {
@@ -112,8 +115,14 @@ export class CollectionComponent implements OnInit, AfterViewInit, OnChanges {
     this.formControl.reset({
       name: '',
       numPlayers: '',
-      time: ''
+      time: '',
+      category: '',
+      mechanic: ''
     });
   }
 
+  toggleAdvancedFilters(): void {
+    this.advancedFiltersToggled = !this.advancedFiltersToggled;
+  }
+
 }