lp1993824: grids enhancement; add grid button adjacent labels to eg-grid

Signed-off-by: Jason Etheridge <jason@EquinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts
index d5fce51..a00eb7e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts
@@ -12,6 +12,10 @@ export class GridToolbarButtonComponent implements OnInit {
     // Note most input fields should match class fields for GridColumn
     @Input() label: string;
 
+    // These are optional labels that can come before and after the button
+    @Input() adjacentPreceedingLabel: string = '';
+    @Input() adjacentSubsequentLabel: string = '';
+
     // Register to click events
     @Output() onClick: EventEmitter<any>;
 
@@ -46,6 +50,8 @@ export class GridToolbarButtonComponent implements OnInit {
         this.button.onClick = this.onClick;
         this.button.routerLink = this.routerLink;
         this.button.label = this.label;
+        this.button.adjacentPreceedingLabel = this.adjacentPreceedingLabel;
+        this.button.adjacentSubsequentLabel = this.adjacentSubsequentLabel;
         this.button.action = this.action;
         this.grid.context.toolbarButtons.push(this.button);
     }

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 43b9b5c..8e998d1 100644 (file)
--- 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
@@ -16,11 +16,23 @@
         [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
         Remove Filters
       </button>
-      <button *ngFor="let btn of gridContext.toolbarButtons"
-        [disabled]="btn.disabled"
-        class="btn btn-outline-dark me-1" (click)="performButtonAction(btn)">
-        {{btn.label}}
-      </button>
+      <ng-container *ngFor="let btn of gridContext.toolbarButtons">
+        <label
+            *ngIf="btn.adjacentPreceedingLabel"
+            [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
+            {{btn.adjacentPreceedingLabel}}
+        </label>
+        <button
+          [disabled]="btn.disabled"
+          class="btn btn-outline-dark me-1" (click)="performButtonAction(btn)">
+          {{btn.label}}
+        </button>
+        <label
+            *ngIf="btn.adjacentSubsequentLabel"
+            [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
+            {{btn.adjacentSubsequentLabel}}
+        </label>
+      </ng-container>
     </div>
 
     <!-- checkboxes -->

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 0cd8bf3..8b8ed56 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
@@ -95,6 +95,15 @@
   padding-bottom: 11px;
 }
 
+.button-adjacent-label {
+    vertical-align: inherit;
+    cursor: auto;
+}
+
+.button-adjacent-label.disabled {
+    opacity: .65;
+}
+
 .eg-grid-cell-skinny {
   width: 2em;
   text-align: center;

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
index 6aeddab..fa1c28a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -1372,6 +1372,8 @@ export class GridToolbarAction {
 // Buttons are global actions
 export class GridToolbarButton {
     label: string;
+    adjacentPreceedingLabel: string;
+    adjacentSubsequentLabel: string;
     onClick: EventEmitter<any []>;
     action: () => any; // DEPRECATED
     disabled: boolean;