From f2d5c224eebcc9b8ee214ee09991d11fdc5f29c4 Mon Sep 17 00:00:00 2001
From: Caio Luppi <caioluppi@windhund.io>
Date: Mon, 5 Aug 2019 10:21:45 -0700
Subject: [PATCH] Adding filter and supporting up/down arrows

---
 src/components/selectorModal.component.pug | 13 ++++++---
 src/components/selectorModal.component.ts  | 31 +++++++++++++++++++++-
 src/index.ts                               |  2 ++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/selectorModal.component.pug b/src/components/selectorModal.component.pug
index 1cb4de6..8829f76 100644
--- a/src/components/selectorModal.component.pug
+++ b/src/components/selectorModal.component.pug
@@ -1,8 +1,15 @@
 .modal-body
+    .input-group.mb-4
+        .input-group-prepend
+            .input-group-text
+                i.fas.fa-fw.fa-search
+        input.form-control(type='search', placeholder='Search', [(ngModel)]='shellFilter', (ngModelChange)='onSearch()')
+
     .list-group
         a.list-group-item.list-group-item-action(
-            *ngFor='let item of items; let i = index', 
-            (click)='modalInstance.close(item)'
-        ) 
+            *ngFor='let item of filteredItems; let i = index',
+            (click)='modalInstance.close(item)',
+            [class.active]='selectedOption == i'
+        )
             strong.mr-2(*ngIf='i < 10') {{i}}
             span {{item.name}}
diff --git a/src/components/selectorModal.component.ts b/src/components/selectorModal.component.ts
index 90e044f..d6329cc 100644
--- a/src/components/selectorModal.component.ts
+++ b/src/components/selectorModal.component.ts
@@ -12,15 +12,44 @@ export interface Item {
 })
 export class SelectorModalComponent {
     @Input() items: Item[]
+    shellFilter = '';
+    filteredItems: Item[]
+    selectedOption = 0
 
     constructor (
         public modalInstance: NgbActiveModal,
     ) { }
 
+    ngOnInit() {
+        this.filteredItems = this.items
+    }
+
+    onSearch() {
+        this.filteredItems = Object.assign([], this.items).filter(
+            item => item.name.toLowerCase().indexOf(this.shellFilter.toLowerCase()) > -1
+        )
+        this.selectedOption = 0
+    }
+
     @HostListener(`document:keyup`, ['$event']) onKey ($event: KeyboardEvent) {
         if ($event.key >= '0' && $event.key <= '9') {
             let index = $event.key.charCodeAt(0) - '0'.charCodeAt(0)
-            this.modalInstance.close(this.items[index])
+            if (index < this.filteredItems.length) {
+                this.modalInstance.close(this.filteredItems[index])
+            }
+        } else if ($event.key == 'Enter') {
+            if (this.selectedOption < this.filteredItems.length) {
+                this.modalInstance.close(this.filteredItems[this.selectedOption])
+            }
+        }
+        else if ($event.key == 'ArrowDown' ) {
+            if (this.selectedOption < this.filteredItems.length - 1) {
+                this.selectedOption++
+            }
+        } else if ($event.key == 'ArrowUp') {
+            if (this.selectedOption > 0) {
+                this.selectedOption--
+            }
         }
     }
 
diff --git a/src/index.ts b/src/index.ts
index 6dddd5b..eaa55e3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,11 +6,13 @@ import { ButtonProvider } from './buttonProvider'
 import { SelectorModalComponent } from './components/selectorModal.component'
 import { ShellSelectorConfigProvider } from './config'
 import { ShellSelectorHotkeyProvider } from './hotkeys'
+import { FormsModule } from '@angular/forms'
 
 @NgModule({
     imports: [
         NgbModule,
         CommonModule,
+        FormsModule
     ],
     providers: [
         { provide: ToolbarButtonProvider, useClass: ButtonProvider, multi: true },