LP#1775466 More grid

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index c571b89..5bb1c9e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -14,6 +14,10 @@
 .eg-grid-header-row {
 }
 
+.eg-grid-body {
+    outline: none; /* for keyboard events */
+}
+
 .eg-grid-body-row {
 }
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
index 4b67986..6be7e69 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -1,5 +1,6 @@
 
 <div class="eg-grid">
+
   <eg-grid-toolbar [gridContext]="context" [colWidthConfig]="colWidthConfig">
   </eg-grid-toolbar>
 
@@ -14,22 +15,24 @@
     </div>
   </div>
 
-  <div class="eg-grid-row eg-grid-body-row"
-    [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
-    *ngFor="let row of dataSource.getPageOfRows(context.pager); let idx = index">
+  <div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
+    <div class="eg-grid-row eg-grid-body-row"
+      [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
+      *ngFor="let row of dataSource.getPageOfRows(context.pager); let idx = index">
 
-    <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
-      <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
-    </div>
-    <div class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
-      {{context.pager.rowNumber(idx)}}
+      <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
+        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
+      </div>
+      <div class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
+        {{context.pager.rowNumber(idx)}}
+      </div>
+      <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
+        (dblclick)="onRowDblClick(row)"
+        (click)="onRowClick($event, row, idx)"
+        *ngFor="let col of context.columnSet.displayColumns()">
+        {{context.getRowColumnValue(row, col)}}
+      </div>
     </div>
-    <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
-      (dblclick)="onRowDblClick(row)"
-      (click)="onRowClick($event, row, idx)"
-      *ngFor="let col of context.columnSet.displayColumns()">
-      {{context.getRowColumnValue(row, col)}}
-    </div>
-  <div>
+  </div>
 </div>
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
index 817f044..624b284 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
@@ -58,29 +58,36 @@ export class EgGridComponent implements OnInit, AfterViewInit, OnDestroy {
         this.context.destroy();
     }
 
-    // Grid keyboard navigation handlers.
-    @HostListener('window:keydown', ['$event']) onKeyDown(evt: KeyboardEvent) {
-        if (evt.key == 'ArrowUp') {
-            this.context.selectPreviousRow();
-
-        } else if (evt.key == 'ArrowDown') {
-            this.context.selectNextRow();
-
-        } else if (evt.key == 'ArrowLeft') {
-            this.context.toPrevPage()
+    // Not using @HostListener because it only works globally.  
+    onGridKeyDown(evt: KeyboardEvent) {
+        switch(evt.key) {
+            case 'ArrowUp':
+                this.context.selectPreviousRow();
+                evt.stopPropagation();
+                break;
+            case 'ArrowDown':
+                this.context.selectNextRow();
+                evt.stopPropagation();
+                break;
+            case 'ArrowLeft':
+                this.context.toPrevPage()
                 .then(ok => this.context.selectFirstRow(), err => {});
-
-        } else if (evt.key == 'ArrowRight') {
-            this.context.toNextPage()
+                evt.stopPropagation();
+                break;
+            case 'ArrowRight':
+                this.context.toNextPage()
                 .then(ok => this.context.selectFirstRow(), err => {});
-
-        } else if (evt.key == 'Enter') {
-            if (this.context.lastSelectedIndex) {
-                this.onRowActivate$.emit(
-                    this.context.getRowByIndex(
-                        this.context.lastSelectedIndex)
-                );
-            }
+                evt.stopPropagation();
+                break;
+            case 'Enter':
+                if (this.context.lastSelectedIndex) {
+                    this.onRowActivate$.emit(
+                        this.context.getRowByIndex(
+                            this.context.lastSelectedIndex)
+                    );
+                }
+                evt.stopPropagation();
+                break;
         }
     }
 

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
index 650c785..4d6b4f3 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html
@@ -48,7 +48,7 @@ TODO focus search input
             <input type="text" class="form-control"
               id='first-query-input'
               [(ngModel)]="searchContext.query[idx]"
-              (keyup)="checkEnter($event)"
+              (keyup.enter)="formEnter()"
               placeholder="Query..."/>
           </div>
           <div *ngIf="idx > 0">

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
index cf6d66d..6879a14 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.ts
@@ -81,11 +81,9 @@ export class SearchFormComponent implements OnInit, AfterViewInit {
         this.searchContext.matchOp.splice(index, 1);
     }
 
-    checkEnter($event: any): void {
-        if ($event.keyCode == 13) {
-            this.searchContext.pager.offset = 0;
-            this.searchByForm();
-        }
+    formEnter() {
+        this.searchContext.pager.offset = 0;
+        this.searchByForm();
     }
 
     // https://stackoverflow.com/questions/42322968/angular2-dynamic-input-field-lose-focus-when-input-changes

diff --git a/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.html b/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.html
index 3befa3e..e5a6f49 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.html
@@ -17,7 +17,7 @@
           id="username" 
           name="username"
           required
-          (keyup)="checkEnter($event)"
+          (keyup.enter)="login()"
           autocomplete="username"
           i18n-placeholder
           placeholder="Username..." 
@@ -33,7 +33,7 @@
           id="password" 
           name="password"
           required
-          (keyup)="checkEnter($event)"
+          (keyup.enter)="login()"
           autocomplete="current-password"
           i18n-placeholder
           placeholder="Password..." 

diff --git a/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.ts b/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.ts
index 39444f6..b8832e9 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/op-change/op-change.component.ts
@@ -35,11 +35,6 @@ export class EgOpChangeComponent
         );
     }
 
-    checkEnter($event: any): void {
-        if ($event.keyCode == 13)
-            this.login();
-    }
-
     login(): Promise<any> {
         if (!(this.username && this.password)) 
             return Promise.reject('Missing Params');

diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.html b/Open-ILS/src/eg2/src/app/staff/splash.component.html
index 0018fc3..013eab3 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.html
@@ -62,7 +62,7 @@
                 <input type="text" class="form-control" 
                   [(ngModel)]="catSearchQuery"
                   id='catalog-search-input'
-                  (keyup)="checkEnter($event)"
+                  (keyup.enter)="searchCatalog()"
                   i18n-placeholder placeholder="Search for...">
                 <span class="input-group-btn">
                   <button class="btn btn-outline-secondary" 

diff --git a/Open-ILS/src/eg2/src/app/staff/splash.component.ts b/Open-ILS/src/eg2/src/app/staff/splash.component.ts
index beba23a..dd0d4f2 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/splash.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/splash.component.ts
@@ -20,11 +20,6 @@ export class EgStaffSplashComponent implements OnInit {
         this.renderer.selectRootElement('#catalog-search-input').focus();
     }
 
-    checkEnter($event: any): void {
-        if ($event.keyCode == 13)
-            this.searchCatalog();
-    }
-
     searchCatalog(): void {
         if (!this.catSearchQuery) return;