From 78bbc4285f13ab415b5399c89ff93f4bf003d5c0 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Fri, 25 May 2018 14:59:12 -0400
Subject: [PATCH] LP#1626157 Grid row count selector

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/app/share/grid/grid-toolbar.component.html | 63 +++++++++++++---------
 .../src/eg2/src/app/share/grid/grid.component.css  | 11 ++++
 Open-ILS/src/eg2/src/app/share/util/pager.ts       |  7 +++
 3 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
index 2bd0e3f1c3..8627ff6ad7 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -13,7 +13,7 @@
   <!-- push everything else to the right -->
   <div class="flex-1"></div>
 
-  <div ngbDropdown class="ml-1" placement="bottom-right">
+  <div ngbDropdown class="mr-1" placement="bottom-right">
     <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
         class="btn btn-outline-dark no-dropdown-caret">
       <span title="Actions For Selected Rows" i18n-title 
@@ -27,36 +27,49 @@
     </div>
   </div>
 
-  <div class="btn-toolbar ml-1">
-    <div class="btn-grp">
-      <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
-        class="btn btn-outline-dark" (click)="gridContext.pager.toFirst()">
-        <span title="First Page" i18n-title 
-            class="material-icons mat-icon-in-button">first_page</span>
-      </button>
-      <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
-        class="btn btn-outline-dark" (click)="gridContext.pager.decrement()">
-        <span title="Previous Page" i18n-title 
-            class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
-      </button>
-      <button [disabled]="gridContext.pager.isLastPage()" type="button" 
-        class="btn btn-outline-dark" (click)="gridContext.pager.increment()">
-        <span title="Next Page" i18n-title 
-            class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
-      </button>
-      <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()" 
-        type="button" class="btn btn-outline-dark" (click)="gridContext.pager.toLast()">
-        <span title="First Page" i18n-title 
-            class="material-icons mat-icon-in-button">last_page</span>
-      </button>
+  <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
+    class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
+    <span title="First Page" i18n-title 
+        class="material-icons mat-icon-in-button">first_page</span>
+  </button>
+  <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
+    class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
+    <span title="Previous Page" i18n-title 
+        class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
+  </button>
+  <button [disabled]="gridContext.pager.isLastPage()" type="button" 
+    class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
+    <span title="Next Page" i18n-title 
+        class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
+  </button>
+
+  <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()" 
+    type="button" class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toLast()">
+    <span title="First Page" i18n-title 
+        class="material-icons mat-icon-in-button">last_page</span>
+  </button>
+
+  <div ngbDropdown class="mr-1" placement="bottom-right">
+    <button ngbDropdownToggle class="btn btn-outline-dark text-button">
+      <span title="Select Row Count" i18n-title i18n>
+        Rows {{gridContext.pager.limit}}
+      </span>
+    </button>
+    <div class="dropdown-menu" ngbDropdownMenu>
+      <a class="dropdown-item" 
+        *ngFor="let count of [5, 10, 25, 50, 100]"
+        (click)="gridContext.pager.setLimit(count)">
+        <span class="ml-2">{{count}}</span>
+      </a>
     </div>
   </div>
 
   <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
   </eg-grid-column-config>
-  <div ngbDropdown class="ml-1" placement="bottom-right">
+  <div ngbDropdown placement="bottom-right">
     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
-      <span title="Show Grid Options" i18n-title class="material-icons mat-icon-in-button">settings</span>
+      <span title="Show Grid Options" i18n-title 
+        class="material-icons mat-icon-in-button">settings</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
       <a class="dropdown-item label-with-material-icon" 
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 5bb1c9eed3..01d1253014 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -58,6 +58,17 @@
   display: flex;
 }
 
+.eg-grid-toolbar .material-icons {
+  font-size: 20px;
+}
+
+/* Kind of hacky -- only way to get a toolbar button with no 
+ * mat icon to line up horizontally with mat icon buttons */
+.eg-grid-toolbar .text-button {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+
 .eg-grid-cell-skinny {
   width: 2.2em;
   text-align: center;
diff --git a/Open-ILS/src/eg2/src/app/share/util/pager.ts b/Open-ILS/src/eg2/src/app/share/util/pager.ts
index 7d524b72c9..b352fdb030 100644
--- a/Open-ILS/src/eg2/src/app/share/util/pager.ts
+++ b/Open-ILS/src/eg2/src/app/share/util/pager.ts
@@ -19,6 +19,13 @@ export class Pager {
         this.offset = 0;
     }
 
+    setLimit(l: number) {
+        if (l !== this.limit) {
+            this.limit = l;
+            this.setPage(1);
+        }
+    }
+
     isFirstPage(): boolean {
         return this.offset === 0;
     }
-- 
2.11.0