From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 10 May 2018 16:29:47 +0000 (-0400)
Subject: LP#1626157 Grid column header sort icons
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=31b3f7a7850ff0e7d6e15fee81f9dada71a4b252;p=working%2FEvergreen.git

LP#1626157 Grid column header sort icons

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

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 14aeec66f5..b992adc78b 100644
--- 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
@@ -14,8 +14,13 @@
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
     class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
-    <a class="sortable" *ngIf="col.isSortable" (click)="sortOneColumn(col)">
-      {{col.label}}
+    <a class="sortable label-with-material-icon" *ngIf="col.isSortable" 
+      (click)="sortOneColumn(col)">
+      <span class="eg-grid-header-cell-sort-label">{{col.label}}</span>
+      <span class="material-icons eg-grid-header-cell-sort-arrow"
+        *ngIf="isColumnSorting(col, 'ASC')">arrow_downwards</span>
+      <span class="material-icons eg-grid-header-cell-sort-arrow"
+        *ngIf="isColumnSorting(col, 'DESC')">arrow_upwards</span>
     </a>
     <span *ngIf="!col.isSortable">{{col.label}}</span>
   </div>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
index 4234d46b31..2b9f00daa1 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
@@ -50,5 +50,12 @@ export class EgGridHeaderComponent implements OnInit {
         this.dataSource.sort = [{name: col.name, dir: dir}];
         this.grid.reload();
     }
+
+    // Returns true if the provided column is sorting in the 
+    // specified direction.
+    isColumnSorting(col: EgGridColumn, dir: string): boolean {
+        let sort = this.dataSource.sort.filter(c => c.name == col.name)[0];
+        return sort && sort.dir == dir;
+    }
 }
 
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 a6f6bd86a0..57bb252a6a 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
@@ -26,12 +26,19 @@
     border-color: #b8daff;
 }
 
-.eg-grid-header-cell a.sortable {
+/*
+.eg-grid-header-cell a.sortable span {
+*/
+.eg-grid-header-cell-sort-label {
   cursor: pointer;
   color: #007bff;
   text-decoration:underline;
 }
 
+.eg-grid-header-cell-sort-arrow {
+  font-size: 14px;
+}
+
 .eg-grid-cell {
     flex: 1; /* applied per column */
     padding: 6px;