LP#1626157 Grid / billing types continued
authorBill Erickson <berickxx@gmail.com>
Fri, 11 May 2018 16:36:31 +0000 (12:36 -0400)
committerBill Erickson <berickxx@gmail.com>
Fri, 11 May 2018 16:36:31 +0000 (12:36 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
Open-ILS/src/eg2/src/app/share/grid/grid.component.css
Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html
Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.ts
Open-ILS/src/eg2/src/styles.css

index e950e25..9924e09 100644 (file)
@@ -3,7 +3,7 @@
 
   <div class="btn-toolbar" *ngIf="toolbarButtons.length">
     <div class="btn-grp">
-      <button *ngFor="let btn of toolbarButtons" class="btn btn-light" (click)="btn.action()">
+      <button *ngFor="let btn of toolbarButtons" class="btn btn-outline-dark" (click)="btn.action()">
         {{btn.label}}
       </button>
     </div>
@@ -14,9 +14,9 @@
 
   <div ngbDropdown class="ml-1" placement="bottom-right">
     <button ngbDropdownToggle [disabled]="!toolbarActions.length"
-        class="btn btn-light no-dropdown-caret">
-      <span title="Actions For Selected Rows" 
-        i18n-title class="material-icons">playlist_add_check</span>
+        class="btn btn-outline-dark no-dropdown-caret">
+      <span title="Actions For Selected Rows" i18n-title 
+        class="material-icons mat-icon-in-button">playlist_add_check</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
       <a class="dropdown-item" (click)="performAction(action)"
 
   <div class="btn-toolbar ml-1">
     <div class="btn-grp">
-      <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.toFirst()">
-        <span title="First Page" i18n-title class="material-icons">first_page</span>
+      <button [disabled]="pager.isFirstPage()" type="button" 
+        class="btn btn-outline-dark" (click)="pager.toFirst()">
+        <span title="First Page" i18n-title 
+            class="material-icons mat-icon-in-button">first_page</span>
       </button>
-      <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.decrement()">
-        <span title="Previous Page" i18n-title class="material-icons">keyboard_arrow_left</span>
+      <button [disabled]="pager.isFirstPage()" type="button" 
+        class="btn btn-outline-dark" (click)="pager.decrement()">
+        <span title="Previous Page" i18n-title 
+            class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
       </button>
-      <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.increment()">
-        <span title="Next Page" i18n-title class="material-icons">keyboard_arrow_right</span>
+      <button [disabled]="pager.isLastPage()" type="button" 
+        class="btn btn-outline-dark" (click)="pager.increment()">
+        <span title="Next Page" i18n-title 
+            class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
       </button>
-      <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.toLast()">
-        <span title="First Page" i18n-title class="material-icons">last_page</span>
+      <button [disabled]="!pager.resultCount || pager.isLastPage()" 
+        type="button" class="btn btn-outline-dark" (click)="pager.toLast()">
+        <span title="First Page" i18n-title 
+            class="material-icons mat-icon-in-button">last_page</span>
       </button>
     </div>
   </div>
@@ -46,8 +54,8 @@
   <eg-grid-column-config #columnConfDialog [columnSet]="columnSet">
   </eg-grid-column-config>
   <div ngbDropdown class="ml-1" placement="bottom-right">
-    <button ngbDropdownToggle class="btn btn-light no-dropdown-caret">
-      <span title="Show Grid Options" i18n-title class="material-icons">settings</span>
+    <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>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
       <a class="dropdown-item label-with-material-icon" 
index fa12b50..81fb257 100644 (file)
@@ -18,9 +18,9 @@
 }
 
 .eg-grid-body-row.selected {
-  color: #000;
-  background-color: rgb(201, 221, 225);
-  border-bottom: 1px solid #888;
+  color: #004085;
+  background-color: #cce5ff;
+  border-color: #b8daff;
 }
 
 .eg-grid-header-cell {
index ec38ecf..2ca4b43 100644 (file)
@@ -58,11 +58,15 @@ export class EgGridComponent implements OnInit, AfterViewInit {
         .then(ok => this.dataSource.requestPage(this.pager))
     }
 
+    // Grid keyboard navigation handlers.
     @HostListener('window:keydown', ['$event']) onKeyDown(evt: KeyboardEvent) {
         if (evt.key == 'ArrowUp') {
             this.selectPreviousRow();
         } else if (evt.key == 'ArrowDown') {
             this.selectNextRow();
+        } else if (evt.key == 'ArrowRight') {
+            if (this.lastSelectedIndex)
+                this.onRowDblClick(this.getRowByIndex(this.lastSelectedIndex));
         }
     }
 
@@ -91,6 +95,13 @@ export class EgGridComponent implements OnInit, AfterViewInit {
         }
     }
 
+    getRowByIndex(index: any): any {
+        for (let idx = 0; idx < this.dataSource.data.length; idx++) { 
+            if (index == this.getRowIndex(this.dataSource.data[idx]))
+                return this.dataSource.data[idx];
+        }
+    }
+
     // Returns all selected rows, regardless of whether they are 
     // currently visible in the grid display.
     getSelectedRows(): any[] {
index 2a50066..d102c31 100644 (file)
@@ -1,6 +1,21 @@
 <eg-staff-banner bannerText="Billing Type Configuration" i18n-bannerText>
 </eg-staff-banner>
 
+<div class="row">
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <span class="input-group-text" i18n>Owning Library</span>
+    </div>
+    <eg-org-select 
+      [initialOrg]="contextOrg"
+      (onChange)="orgOnChange($event)">
+    </eg-org-select>
+  </div>
+</div>
+
+<hr/>
+
+
 <eg-grid #btGrid idlClass="cbt" [dataSource]="dataSource" 
     [isSortable]="true" persistKey="admin.server.config.billing_type">
   <eg-grid-toolbar-button label="New Billing Type" i18n-label [action]="createBillingType">
index 6f61aff..91d37a5 100644 (file)
@@ -1,9 +1,12 @@
 import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {EgIdlObject} from '@eg/core/idl.service';
 import {EgGridDataSource} from '@eg/share/grid/grid-data-source';
 import {EgGridComponent} from '@eg/share/grid/grid.component';
 import {EgToastService} from '@eg/share/toast/toast.service';
 import {Pager} from '@eg/share/util/pager';
 import {EgPcrudService} from '@eg/core/pcrud.service';
+import {EgOrgService} from '@eg/core/org.service';
+import {EgAuthService} from '@eg/core/auth.service';
 import {FmRecordEditorComponent} from '@eg/share/fm-editor/fm-editor.component';
 import {EgStringComponent} from '@eg/share/string/string.component';
 
@@ -18,26 +21,34 @@ export class BillingTypeComponent implements OnInit {
     @ViewChild('btEditDialog') btEditDialog: FmRecordEditorComponent;
     @ViewChild('successString') successString: EgStringComponent;
     @ViewChild('createString') createString: EgStringComponent;
-    createBillingType: () => any;
-    //deleteSelectedBillingTypes: (bts: any[]) => any;
+    contextOrg: EgIdlObject;
 
     constructor(
+        private org: EgOrgService,
+        private auth: EgAuthService,
         private pcrud: EgPcrudService,
         private toast: EgToastService
     ) {
         this.dataSource = new EgGridDataSource();
+    }
 
-        this.createBillingType = () => {
-            this.btEditDialog.mode = 'create';
-            this.btEditDialog.open().then(
-                ok => {
-                    this.createString.current()
-                        .then(str => this.toast.success(str));
-                    this.btGrid.reload();
-                },
-                err => { }
-            );
-        }
+
+    orgOnChange(org: EgIdlObject) {
+        console.log('orgOnChange called ' + org.id());
+        this.contextOrg = org;
+        this.btGrid.reload();
+    }
+
+    createBillingType() {
+        this.btEditDialog.mode = 'create';
+        this.btEditDialog.open().then(
+            ok => {
+                this.createString.current()
+                    .then(str => this.toast.success(str));
+                this.btGrid.reload();
+            },
+            err => { }
+        );
     }
 
     deleteSelected(billingTypes) {
@@ -46,13 +57,16 @@ export class BillingTypeComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.contextOrg = this.org.get(this.auth.user().ws_ou());
 
         this.dataSource.getRows = (pager: Pager, sort: any[]) => {
+            let searchOrgs = this.org.fullPath(this.contextOrg, true);
+
             let orderBy = {};
             if (sort.length) 
                 orderBy = {cbt: sort[0].name + ' ' + sort[0].dir};
 
-            return this.pcrud.retrieveAll('cbt', {
+            return this.pcrud.search('cbt', {owner : searchOrgs}, {
                 offset: pager.offset, 
                 limit: pager.limit,
                 order_by: orderBy
index fef7747..cc1ee6f 100644 (file)
@@ -6,7 +6,7 @@
 
 
 /** BS default fonts are huge */
-body, .form-control, .btn {
+body, .form-control, .btn, .input-group-text {
   /* This more or less matches the font size of the angularjs client.
    * The default BS4 font of 1rem is comically large. 
    */
@@ -49,6 +49,10 @@ h5 {font-size: .95rem}
   padding-right: .25rem; /* default .5rem */
 }
 
+.mat-icon-in-button {
+    line-height: inherit;
+}
+
 .material-icons {
   /** default is 24px which is pretty chunky */
   font-size: 22px;