LP#1775466 more grid

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

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
index 7ce0cf0..3af756c 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html
@@ -10,21 +10,16 @@
   <div class="modal-body eg-grid-column-config-dialog">
 
     <div class="row">
-      <div class="col-lg-1 eg-grid-header-cell">Visible</div>
-      <div class="col-lg-3 eg-grid-header-cell">Column Name</div>
-      <div class="col-lg-1 eg-grid-header-cell">Move Up</div>
-      <div class="col-lg-1 eg-grid-header-cell">Move Down</div>
-      <div class="col-lg-1 eg-grid-header-cell">First Visible</div>
-      <div class="col-lg-1 eg-grid-header-cell">Last Visible</div>
-      <div class="col-lg-1 eg-grid-header-cell" 
-        *ngIf="columnSet.isMultiSortable">Sort Priority</div>
-      <div class="col-lg-3 eg-grid-header-cell">
-        <button class="btn btn-info" (click)="columnSet.moveVisibleToFront()">
-          Visible Columns To Top
-        </button>
-      </div>
+      <div class="col-lg-1 eg-grid-header-cell" i18n>Visible</div>
+      <div class="col-lg-3 eg-grid-header-cell" i18n>Column Name</div>
+      <div class="col-lg-1 eg-grid-header-cell" i18n>Move Up</div>
+      <div class="col-lg-1 eg-grid-header-cell" i18n>Move Down</div>
+      <div class="col-lg-2 eg-grid-header-cell" i18n>First Visible</div>
+      <div class="col-lg-2 eg-grid-header-cell" i18n>Last Visible</div>
+      <div class="col-lg-2 eg-grid-header-cell" 
+        *ngIf="columnSet.isMultiSortable" i18n>Sort Priority</div>
     </div>
-    <div class="row mt-1" *ngFor="let col of columnSet.columns"
+    <div class="row pt-1" *ngFor="let col of columnSet.columns"
       [ngClass]="{visible : col.visible}">
       <div class="col-lg-1" (click)="col.visible=!col.visible">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
@@ -43,29 +38,32 @@
           <span class="material-icons">arrow_downward</span>
         </a>
       </div>
-      <div class="col-lg-1">
+      <div class="col-lg-2">
         <a class="no-href" title="Make first visible" i18n-title
           (click)="columnSet.moveColumn(col, -10000)">
           <span class="material-icons">vertical_align_top</span>
         </a>
       </div>
-      <div class="col-lg-1">
+      <div class="col-lg-2">
         <a class="no-href" title="Make last visible" i18n-title
           (click)="columnSet.moveColumn(col, 10000)">
           <span class="material-icons">vertical_align_bottom</span>
         </a>
       </div>
-      <div class="col-lg-1" *ngIf="columnSet.isMultiSortable">
+      <div class="col-lg-2" *ngIf="columnSet.isMultiSortable">
         <div *ngIf="col.isMultiSortable">
           <input type='number' [(ngModel)]="col.sort"
-            title="Sort Priority / Direction" i18n-title style='width:2.4em'/>
+            title="Sort Priority / Direction" i18n-title style='width:2.8em'/>
         </div>
       </div>
 
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-success" 
+    <button class="btn btn-info" (click)="columnSet.moveVisibleToFront()">
+      Move Visible Columns To Top
+    </button>
+    <button type="button" class="btn btn-success ml-2" 
       (click)="close('confirmed')" i18n>Close</button>
   </div>
 </ng-template>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
index ad9e946..631c21e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
@@ -16,8 +16,10 @@ export class EgGridColumnComponent implements OnInit {
     @Input() flex: number;
     @Input() visible: boolean;
     @Input() hidden: boolean;
-    @Input() cellTemplate: TemplateRef<any>;
     @Input() pkey: boolean;
+    @Input() sortable: boolean;
+    @Input() multiSortable: boolean;
+    @Input() cellTemplate: TemplateRef<any>;
 
     // get a reference to our container grid.
     constructor(
@@ -27,7 +29,7 @@ export class EgGridColumnComponent implements OnInit {
     ngOnInit() {
 
         if (!this.grid) {
-            console.warn('EgGridColumnComponent needs a [grid]');
+            console.warn('EgGridColumnComponent needs an <eg-grid>');
             return;
         }
 
@@ -39,6 +41,8 @@ export class EgGridColumnComponent implements OnInit {
         col.hidden = this.hidden;
         col.cellTemplate = this.cellTemplate;
         col.isPkey = this.pkey;
+        col.isSortable = this.sortable;
+        col.isMultiSortable = this.multiSortable;
         this.grid.columnSet.add(col);
     }
 }

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
index 66da827..af54b26 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-data-source.ts
@@ -10,8 +10,13 @@ export class EgGridDataSource {
     getRows: (pager: Pager) => Observable<any>;
 
     constructor() {
+        this.reset();
+    }
+
+    reset() {
         this.data = [];
         this.allRowsRetrieved = false;
+        if (this.pager) this.pager.resultCount = null;
     }
 
     setAllRetrieved() {
@@ -21,7 +26,7 @@ export class EgGridDataSource {
 
     // called from the template -- no data fetching
     getPageOfRows(pager: Pager): any[] {
-        if (this && this.data) {
+        if (this.data) {
             return this.data.slice(
                 pager.offset, pager.limit + pager.offset);
         }

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index d2e419a..622de57 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -12,9 +12,10 @@
     (drop)="onColumnDrop(col)"
     (dragover)="onColumnDragEnter($event, col)"
     (dragleave)="onColumnDragLeave($event, col)"
-    [ngClass]="{'eg-grid-header-cell dragover' : col.isDragTarget}"
+    [ngClass]="{'dragover' : col.isDragTarget}"
     class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
-    {{col.label}}
+    <a class="sortable" *ngIf="col.isSortable">{{col.label}}</a>
+    <span *ngIf="!col.isSortable">{{col.label}}</span>
   </div>
 </div>
 

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 a73f0b9..4c985c2 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
@@ -36,10 +36,19 @@
       <span title="Show Grid Options" i18n-title class="material-icons">arrow_drop_down</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <a class="dropdown-item" (click)="columnConfDialog.open({size:'lg'})">
+      <a class="dropdown-item label-with-material-icon" (click)="columnConfDialog.open({size:'lg'})">
         <span class="material-icons">build</span>
-        <span i18n>Manage Columns</span>
+        <span  class="ml-2" i18n>Manage Columns</span>
       </a>
+      <div class="dropdown-divider"></div>
+
+      <a class="dropdown-item label-with-material-icon" 
+        (click)="col.visible=!col.visible" *ngFor="let col of columnSet.columns">
+        <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
+        <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
+        <span class="ml-2">{{col.label}}</span>
+      </a>
+
     </div>
   </div>
 

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 8e41b2b..a6f6bd8 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
@@ -26,6 +26,12 @@
     border-color: #b8daff;
 }
 
+.eg-grid-header-cell a.sortable {
+  cursor: pointer;
+  color: #007bff;
+  text-decoration:underline;
+}
+
 .eg-grid-cell {
     flex: 1; /* applied per column */
     padding: 6px;
@@ -44,7 +50,7 @@
   flex: none;
 }
 
-.eg-grid-column-config-dialog.visible {
+.eg-grid-column-config-dialog .visible {
   color: #000;
   background-color: rgb(201, 221, 225);
   border-bottom: 1px solid #888;

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 865ca90..35495d2 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
@@ -18,6 +18,7 @@ export class EgGridComponent implements OnInit {
 
     @Input() dataSource: EgGridDataSource;
     @Input() idlClass: string;
+    @Input() isSortable: boolean;
     @Input() isMultiSortable: boolean;
     @Input() persistKey: string;
 
@@ -37,6 +38,7 @@ export class EgGridComponent implements OnInit {
 
     ngOnInit() {
         this.columnSet = new EgGridColumnSet(this.idlClass);
+        this.columnSet.isSortable = this.isSortable;
         this.columnSet.isMultiSortable = this.isMultiSortable;
         this.gridSvc.generateColumns(this.columnSet);
         this.dataSource.requestPage(this.pager);

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
index 110ed2c..6891907 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
@@ -82,6 +82,7 @@ export class EgGridColumn {
     cellTemplate: TemplateRef<any>;
     isPkey: boolean;
     isDragTarget: boolean;
+    isSortable: boolean;
     isMultiSortable: boolean;
 }
 
@@ -90,6 +91,7 @@ export class EgGridColumnSet {
     columns: EgGridColumn[];
     idlClass: string;
     pkeyColumn: EgGridColumn;
+    isSortable: boolean;
     isMultiSortable: boolean;
 
     constructor(idlClass?: string) {
@@ -105,12 +107,20 @@ export class EgGridColumnSet {
 
         col.visible = !col.hidden;
 
-        // If a column set is multisortable, all columns are multisortable
-        // by default. TODO: add isNotMultiSortable ?
+        this.applyColumnSortability(col);
+
+        this.columns.push(col);
+    }
+
+    applyColumnSortability(col: EgGridColumn) {
+        // column sortability defaults to the sortability of the column set.
+        if (col.isSortable === undefined && this.isSortable)
+            col.isSortable = true;
+
         if (col.isMultiSortable === undefined && this.isMultiSortable)
             col.isMultiSortable = true;
 
-        this.columns.push(col);
+        if (col.isMultiSortable) col.isSortable = true;
     }
 
     displayColumns(): EgGridColumn[] {
@@ -118,15 +128,15 @@ export class EgGridColumnSet {
     }
 
     insertBefore(source: EgGridColumn, target: EgGridColumn) {
-        let targetIdx = 0;
-        let sourceIdx = 0;
+        let targetIdx = -1;
+        let sourceIdx = -1;
         this.columns.forEach((col, idx) => {
             if (col.name == target.name) targetIdx = idx; });
 
         this.columns.forEach((col, idx) => {
             if (col.name == source.name) sourceIdx = idx; });
 
-        if (sourceIdx)
+        if (sourceIdx >= 0)
             this.columns.splice(sourceIdx, 1);
 
         this.columns.splice(targetIdx, 0, source);
@@ -169,7 +179,6 @@ export class EgGridColumnSet {
         this.columns.splice(targetIdx, 0, col);
     }
 
-
 }
 
 export class EgGridToolbarButton {

diff --git a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html
index 538bbc7..94b39f5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/admin/server/config/billing_type.component.html
@@ -1,7 +1,7 @@
 <eg-staff-banner bannerText="Billing Type Configuration" i18n-bannerText>
 </eg-staff-banner>
 
-<eg-grid #btGrid idlClass="cbt" [dataSource]="dataSource" [isMultiSortable]="true">
+<eg-grid #btGrid idlClass="cbt" [dataSource]="dataSource" >
   <eg-grid-toolbar-button label="New Billing Type" i18n-label [action]="createBillingType">
   </eg-grid-toolbar-button>
 </eg-grid>