From 77fba1b881640056fa428e4dcb7ae5a3642a6fc8 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 10 May 2018 13:31:10 -0400
Subject: [PATCH] LP#1626157 Grid column width config

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/app/share/grid/grid-column.component.ts    |  4 +--
 .../src/app/share/grid/grid-toolbar.component.html |  8 ++++-
 .../src/app/share/grid/grid-toolbar.component.ts   |  2 ++
 .../src/eg2/src/app/share/grid/grid.component.css  | 36 ++++++++++++++++++----
 .../src/eg2/src/app/share/grid/grid.component.html |  8 +++--
 Open-ILS/src/eg2/src/app/share/grid/grid.module.ts |  4 ++-
 .../src/eg2/src/app/share/grid/grid.service.ts     |  2 ++
 7 files changed, 52 insertions(+), 12 deletions(-)

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 631c21e564..913c6def2a 100644
--- 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
@@ -36,8 +36,8 @@ export class EgGridColumnComponent implements OnInit {
         let col = new EgGridColumn();
         col.name = this.name;
         col.path = this.path;
-        col.label = this.label || this.name;
-        col.flex = this.flex || 2;
+        col.label = this.label;
+        col.flex = this.flex;
         col.hidden = this.hidden;
         col.cellTemplate = this.cellTemplate;
         col.isPkey = this.pkey;
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 4c985c20be..6d4f471969 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
@@ -36,10 +36,16 @@
       <span title="Show Grid Options" i18n-title class="material-icons">arrow_drop_down</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <a class="dropdown-item label-with-material-icon" (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  class="ml-2" i18n>Manage Columns</span>
       </a>
+      <a class="dropdown-item label-with-material-icon" 
+        (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
+        <span class="material-icons">compare_arrows</span>
+        <span  class="ml-2" i18n>Manage Column Widths</span>
+      </a>
       <div class="dropdown-divider"></div>
 
       <a class="dropdown-item label-with-material-icon" 
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
index 5f1f82850f..547e0f0b15 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.ts
@@ -4,6 +4,7 @@ import {Pager} from '@eg/share/util/pager';
 import {EgGridService, EgGridColumn, EgGridColumnSet, EgGridToolbarButton} 
   from '@eg/share/grid/grid.service';
 import {EgDialogComponent} from '@eg/share/dialog/dialog.component';
+import {EgGridColumnWidthComponent} from './grid-column-width.component';
 
 @Component({
   selector: 'eg-grid-toolbar',
@@ -16,6 +17,7 @@ export class EgGridToolbarComponent implements OnInit {
     @Input() pager: Pager;
     @Input() toolbarButtons: EgGridToolbarButton[];
     @Input() columnSet: EgGridColumnSet;
+    @Input() colWidthConfig: EgGridColumnWidthComponent;
 
     ngOnInit() {
 
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 57bb252a6a..144a3faf39 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,13 +26,9 @@
     border-color: #b8daff;
 }
 
-/*
-.eg-grid-header-cell a.sortable span {
-*/
 .eg-grid-header-cell-sort-label {
   cursor: pointer;
-  color: #007bff;
-  text-decoration:underline;
+  text-decoration: underline;
 }
 
 .eg-grid-header-cell-sort-arrow {
@@ -40,7 +36,7 @@
 }
 
 .eg-grid-cell {
-    flex: 1; /* applied per column */
+    flex: 2; /* applied per column */
     padding: 6px;
 }
 
@@ -57,6 +53,33 @@
   flex: none;
 }
 
+/* depends on width of .eg-grid-cell-skinny */
+.eg-grid-column-width-header {
+  width: 4.4em;
+  text-align: center;
+  flex: none;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+}
+
+.eg-grid-column-width-config .eg-grid-cell {
+    border-left: 2px dashed grey;
+}
+
+.eg-grid-column-width-icon {
+  cursor: pointer;
+  font-size: 18px;
+  color: #007bff;
+}
+
+.eg-grid-column-config-dialog {
+  height: auto;
+  max-height: 400px;
+  overflow: auto;
+  box-shadow: none;
+}
+
 .eg-grid-column-config-dialog .visible {
   color: #000;
   background-color: rgb(201, 221, 225);
@@ -64,3 +87,4 @@
 }
 
 
+
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
index ac9ed9a917..8a1ad186a7 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -1,8 +1,12 @@
 
 <div class="eg-grid">
-  <eg-grid-toolbar [dataSource]="dataSource" [pager]="pager" 
-    [toolbarButtons]="toolbarButtons" [columnSet]="columnSet"></eg-grid-toolbar>
+  <eg-grid-toolbar 
+    [dataSource]="dataSource" [pager]="pager" 
+    [toolbarButtons]="toolbarButtons" [columnSet]="columnSet"
+    [colWidthConfig]="colWidthConfig">
+  </eg-grid-toolbar>
   <eg-grid-header [columnSet]="columnSet" [dataSource]="dataSource"></eg-grid-header>
+  <eg-grid-column-width #colWidthConfig [columnSet]="columnSet"></eg-grid-column-width>
 
   <div class="eg-grid-row eg-grid-body-row"
     [ngClass]="{'eg-grid-row-selected': selector[idx]}"
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
index bd363277ee..62981aef4b 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
@@ -8,6 +8,7 @@ import {EgGridToolbarComponent} from './grid-toolbar.component';
 import {EgGridService} from './grid.service';
 import {EgGridToolbarButtonComponent} from './grid-toolbar-button.component';
 import {EgGridColumnConfigComponent} from './grid-column-config.component';
+import {EgGridColumnWidthComponent} from './grid-column-width.component';
 
 
 @NgModule({
@@ -18,7 +19,8 @@ import {EgGridColumnConfigComponent} from './grid-column-config.component';
         EgGridHeaderComponent,
         EgGridToolbarComponent,
         EgGridToolbarButtonComponent,
-        EgGridColumnConfigComponent
+        EgGridColumnConfigComponent,
+        EgGridColumnWidthComponent
     ],
     imports: [
         EgCommonModule
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 6891907d4d..20b0b4fb21 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.service.ts
@@ -104,6 +104,8 @@ export class EgGridColumnSet {
         if (this.columns.filter(c => c.name == col.name).length) return;
 
         if (col.isPkey) this.pkeyColumn = col;
+        if (!col.flex) col.flex = 2;
+        if (!col.label) col.label = col.name;
 
         col.visible = !col.hidden;
 
-- 
2.11.0