Add keyboard shortcuts to list views

- [f] open filter form
- [c] clear filter settings
- [a] add new record

README.md

@@ -9,7 +9,8 @@ The node record stores data on type, technical specifications, serial numbers,
 and simiar identifiers.
 
 The menu-iterm _Nodes_ and the route `/nodes` shows a list of all nodes.
-Use the filter form on top to narrow down the list.
+Use the filter form (open with _Filter nodes_ button or `f`-key) to narrow down the list.
+Use the _Clear filters_ button (`c`-key) to clear the filters.
 Filter options: Label / ID, node type (like _audio_),
 platform (like _Audiomoth_), wether the not is/was ever deployed.
 
@@ -28,7 +29,7 @@ Editing a node record only concerns the information related to the node itself,
 not to its deployment.
 The edit form can be used to delete the node as well.
 
-To add a new node, use the _Add node_ menu item or the `node/add` route.
+To add a new node, use the _Add node_ button (`a`-key) item or the `node/add` route.
 The _magic_ button auto-generates node labels in the correct format.
 
 To deploy a node, click the _deploy node_ button in the left column of the list.
@@ -44,8 +45,12 @@ In that case a tag describing the setup/location briefly would be added to all
 corresponding nodes.
 
 The menu-item _Deployments_ and the route `/deploymnets` shows a list of all deployments.
-Similar to the nodes list, you may use the filter form on top to narrow down
+Similar to the nodes list, you may use the filter form (open with _Filter deployments_ button or `f`-key) to narrow down
 the list of deployments. The fiter options include tags (for finding groups of deployments / nodes), node label / ID, node type and node platform.
+Use the _Clear filters_ button (`c`-key) to clear the filters.
+
+To edit a deployment, click the pencil icon in the left column of the list.
+To add a new deployment, use the _Add deployment_ button (`a`-key) item or the `deployments/add` route.
 
 ![list-deployments](./assets/list-deployments.png)
 _Deployments list view_
@@ -68,8 +73,9 @@ _Environment list view_
 
 The menu-item _Environments_ and the route `/environments` shows a list of all Environment entries.
 The view can be switch to display a map of all records using the _list/map toggle_ on the top right.
-To filter the entries, open the filter view using the _looking-glass button_ on the top right.
-To add a new entry, using the _plus button_ on the top right.
+To filter the entries, open the filter view using the _looking-glass button_ (`f`-key) on the top right.
+Use the _Clear filters_ button (`c`-key) to clear the filters.
+To add a new entry, using the _Add an environment entry_ button (`a`-key) on the top right.
 
 ![map-env](./assets/map-env.png)
 _Environment map view_

src/app/components/deployment-list/deployment-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, HostListener, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
@@ -14,6 +14,7 @@ import { FormGroup } from '@angular/forms';
 import { FilterStoreService } from 'src/app/shared/filter-store.service';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { DeploymentFilterComponent } from './deployment-filter.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-list',
@@ -52,6 +53,7 @@ export class DeploymentListComponent implements AfterViewInit {
     private bottomSheet: MatBottomSheet,
     public dialog: MatDialog,
     private breakpointObserver: BreakpointObserver,
+    private router: Router,
   ) {
     this.dataSource = new DeploymentsDataSource(this.dataService);
     this.filterForm = this.filterStore.deploymentsFilter;
@@ -74,4 +76,27 @@ export class DeploymentListComponent implements AfterViewInit {
     this.bottomSheet.open(DeploymentFilterComponent, { data: { dataSource: this.dataSource }})
   }
 
+  @HostListener('window:keydown.f', ['$event'])
+  filterKey(event: KeyboardEvent) {
+    if (!this.bottomSheet._openedBottomSheetRef) {
+      event.preventDefault();
+      this.filter();
+    }
+  }
+
+  @HostListener('window:keydown.a', ['$event'])
+  addKey(event: KeyboardEvent) {
+    event.preventDefault();
+    this.router.navigate(['/deployments/add']);
+  }
+
+  @HostListener('window:keydown.c', ['$event'])
+  clearKey(event: KeyboardEvent) {
+    // only reset if no form an therefore no input is open
+    if (!this.bottomSheet._openedBottomSheetRef) {
+      event.preventDefault();
+      this.filterForm.reset();
+    }
+  }
+
 }

src/app/components/env-list/env-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, HostListener, TemplateRef, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
@@ -160,4 +160,29 @@ export class EnvListComponent implements AfterViewInit {
     }
   }
 
+  @HostListener('window:keydown.f', ['$event'])
+  filterKey(event: KeyboardEvent) {
+    if (!this.dialog.openDialogs.length) {
+      event.preventDefault();
+      this.filter();
+    }
+  }
+
+  @HostListener('window:keydown.a', ['$event'])
+  addKey(event: KeyboardEvent) {
+    if (!this.dialog.openDialogs.length) {
+      event.preventDefault();
+      this.addEnvironment();
+    }
+  }
+
+  @HostListener('window:keydown.c', ['$event'])
+  clearKey(event: KeyboardEvent) {
+    // only reset if no form an therefore no input is open
+    if (!this.dialog.openDialogs.length) {
+      event.preventDefault();
+      this.filterStore.envFilter.reset();
+    }
+  }
+
 }

src/app/components/node-list/node-list.component.ts

@@ -1,5 +1,5 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, HostListener, OnInit, ViewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
@@ -91,4 +91,27 @@ export class NodeListComponent implements OnInit, AfterViewInit {
     this.bottomSheet.open(NodeFilterComponent, { data: { dataSource: this.dataSource }})
   }
 
+  @HostListener('window:keydown.f', ['$event'])
+  filterKey(event: KeyboardEvent) {
+    if (!this.bottomSheet._openedBottomSheetRef) {
+      event.preventDefault();
+      this.filter();
+    }
+  }
+
+  @HostListener('window:keydown.a', ['$event'])
+  addKey(event: KeyboardEvent) {
+    event.preventDefault();
+    this.router.navigate(['/nodes/add']);
+  }
+
+  @HostListener('window:keydown.c', ['$event'])
+  clearKey(event: KeyboardEvent) {
+    // only reset if no form an therefore no input is open
+    if (!this.bottomSheet._openedBottomSheetRef) {
+      event.preventDefault();
+      this.nodeForm.reset();
+    }
+  }
+
 }