From: Bill Erickson Date: Thu, 3 May 2018 19:41:25 +0000 (-0400) Subject: LP#1626157 grid columns config X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=51cfcb725d06a17e331b826b2ba209137355610c;p=working%2FEvergreen.git LP#1626157 grid columns config Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/src/eg2/src/app/core/auth.service.ts b/Open-ILS/src/eg2/src/app/core/auth.service.ts index 84de51a8e6..958e176e0c 100644 --- a/Open-ILS/src/eg2/src/app/core/auth.service.ts +++ b/Open-ILS/src/eg2/src/app/core/auth.service.ts @@ -214,6 +214,8 @@ export class EgAuthService { // to expire on the server. let pollTime = this.authtime() * 1000 + 5000; + console.debug('polling with timeout ' + pollTime); + this.pollTimeout = setTimeout(() => { this.net.request( 'open-ils.auth', @@ -224,7 +226,10 @@ export class EgAuthService { // EgNetService intercepts NO_SESSION events. // If the promise resolves, the session is valid. - ).toPromise().then(user => this.sessionPoll()) + ).subscribe( + user => this.sessionPoll(), + err => console.warn('auth poll error: ' + err) + ); }, pollTime); } 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 new file mode 100644 index 0000000000..358946151f --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.html @@ -0,0 +1,72 @@ + + + + + diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts new file mode 100644 index 0000000000..80795b1b06 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-config.component.ts @@ -0,0 +1,17 @@ +import {Component, Input, ViewChild, TemplateRef} from '@angular/core'; +import {EgDialogComponent} from '@eg/share/dialog/dialog.component'; +import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; + +@Component({ + selector: 'eg-grid-column-config', + templateUrl: './grid-column-config.component.html' +}) + +/** + */ +export class EgGridColumnConfigComponent extends EgDialogComponent { + @Input() columnSet: EgGridColumnSet; + +} + + 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 dc4176be6a..d2e419a18b 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 @@ -6,9 +6,15 @@
#
-
- {{col.label}} -
+
+ {{col.label}} +
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 254c53851d..aaadba3e8e 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 @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnInit, HostListener} from '@angular/core'; import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service'; @Component({ @@ -10,10 +10,27 @@ export class EgGridHeaderComponent implements OnInit { @Input() columnSet: EgGridColumnSet; @Input() selected: {[idx:number] : boolean}; + dragColumn: EgGridColumn; constructor(private gridSvc: EgGridService) { } ngOnInit() { } + + onColumnDragEnter($event: any, col: any) { + if (this.dragColumn && this.dragColumn.name != col.name) + col.isDragTarget = true; + $event.preventDefault(); + } + + onColumnDragLeave($event: any, col: any) { + col.isDragTarget = false; + $event.preventDefault(); + } + + onColumnDrop(col: EgGridColumn) { + this.columnSet.insertBefore(this.dragColumn, col); + this.columnSet.columns.forEach(c => c.isDragTarget = false); + } } 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 new file mode 100644 index 0000000000..c353fc9154 --- /dev/null +++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-button.component.ts @@ -0,0 +1,36 @@ +import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core'; +import {EgGridService, EgGridToolbarButton} from './grid.service'; +import {EgGridComponent} from './grid.component'; + +@Component({ + selector: 'eg-grid-toolbar-button', + template: '' +}) + +export class EgGridToolbarButtonComponent implements OnInit { + + // Note most input fields should match class fields for EgGridColumn + @Input() label: string; + @Input() action: () => any; + + // get a reference to our container grid. + constructor( + private gridSvc: EgGridService, + @Host() private grid: EgGridComponent) { + } + + ngOnInit() { + + if (!this.grid) { + console.warn('EgGridToolbarButtonComponent needs a [grid]'); + return; + } + + let btn = new EgGridToolbarButton(); + btn.label = this.label; + btn.action = this.action; + + this.grid.toolbarButtons.push(btn); + } +} + 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 77f38c29f9..a73f0b9996 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 @@ -29,5 +29,21 @@ + + +
+ + +
+
+ + 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 5920d978e9..5f1f82850f 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 @@ -3,6 +3,7 @@ import {EgGridDataSource} from './grid-data-source'; 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'; @Component({ selector: 'eg-grid-toolbar', @@ -14,6 +15,7 @@ export class EgGridToolbarComponent implements OnInit { @Input() dataSource: EgGridDataSource; @Input() pager: Pager; @Input() toolbarButtons: EgGridToolbarButton[]; + @Input() columnSet: EgGridColumnSet; 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 8969cb1c33..8e41b2bb0b 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 @@ -21,6 +21,11 @@ font-weight: bold; } +.eg-grid-header-cell.dragover { + background-color: #cce5ff; + border-color: #b8daff; +} + .eg-grid-cell { flex: 1; /* applied per column */ padding: 6px; @@ -39,4 +44,10 @@ flex: none; } +.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.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html index 60a48fc807..ad655cbd74 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,7 +1,7 @@
+ [toolbarButtons]="toolbarButtons" [columnSet]="columnSet">
; isPkey: boolean; + isDragTarget: boolean; } @@ -103,6 +104,22 @@ export class EgGridColumnSet { displayColumns(): EgGridColumn[] { return this.columns.filter(c => !c.hidden); } + + insertBefore(source: EgGridColumn, target: EgGridColumn) { + let targetIdx = 0; + let sourceIdx = 0; + 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) + this.columns.splice(sourceIdx, 1); + + this.columns.splice(targetIdx, 0, source); + } + } export class EgGridToolbarButton { diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css index 9db4fe8d72..fef77477a3 100644 --- a/Open-ILS/src/eg2/src/styles.css +++ b/Open-ILS/src/eg2/src/styles.css @@ -61,6 +61,11 @@ h5 {font-size: .95rem} align-items: center; } +/* dropdown menu link/button with no downward carrot icon */ +.no-dropdown-caret::after { + display: none; +} + /* Default .card padding is extreme */ .tight-card .card-body, .tight-card .list-group-item {