import {Component, Input, OnInit, Host} from '@angular/core';
-import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
+import {EgGridService, EgGridColumn,
+ EgGridRowSelector, EgGridColumnSet} from './grid.service';
import {EgGridDataSource} from './grid-data-source';
import {EgGridComponent} from './grid.component';
+import {Pager} from '@eg/share/util/pager';
@Component({
selector: 'eg-grid-header',
export class EgGridHeaderComponent implements OnInit {
@Input() columnSet: EgGridColumnSet;
- @Input() selected: {[idx:number] : boolean};
+ @Input() rowSelector: EgGridRowSelector;
@Input() dataSource: EgGridDataSource;
+ @Input() pager: Pager;
dragColumn: EgGridColumn;
constructor(
let sort = this.dataSource.sort.filter(c => c.name == col.name)[0];
return sort && sort.dir == dir;
}
+
+ handleBatchSelect($event) {
+ if ($event.target.checked) {
+ if (this.rowSelector.isEmpty() || !this.allRowsAreSelected()) {
+ // clear selections from other pages to avoid confusion.
+ this.rowSelector.clear();
+ this.selectAll();
+ }
+ } else {
+ this.rowSelector.clear();
+ }
+ }
+
+ selectAll() {
+ let rows = this.dataSource.getPageOfRows(this.pager);
+ let indexes = rows.map(r => this.grid.getRowIndex(r));
+ this.rowSelector.select(indexes);
+ }
+
+ allRowsAreSelected(): boolean {
+ let rows = this.dataSource.getPageOfRows(this.pager);
+ let indexes = rows.map(r => this.grid.getRowIndex(r));
+ return this.rowSelector.contains(indexes);
+ }
}
-import {Component, Input, OnInit, AfterViewInit, EventEmitter,
+import {Component, Input, OnInit, AfterViewInit, EventEmitter, OnDestroy
HostListener, ViewEncapsulation} from '@angular/core';
+import {Subscription} from "rxjs/Subscription";
import {EgGridDataSource} from './grid-data-source';
import {EgIdlService} from '@eg/core/idl.service';
import {EgOrgService} from '@eg/core/org.service';
import {Pager} from '@eg/share/util/pager';
import {EgGridService, EgGridColumn, EgGridColumnSet, EgGridToolbarButton,
- EgGridToolbarAction} from '@eg/share/grid/grid.service';
+ EgGridRowSelector, EgGridToolbarAction} from '@eg/share/grid/grid.service';
@Component({
selector: 'eg-grid',
encapsulation: ViewEncapsulation.None
})
-export class EgGridComponent implements OnInit, AfterViewInit {
+export class EgGridComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() dataSource: EgGridDataSource;
@Input() idlClass: string;
pager: Pager;
columnSet: EgGridColumnSet;
- selector: {[idx:number] : boolean};
+ rowSelector: EgGridRowSelector;
onRowDblClick$: EventEmitter<any>;
onRowClick$: EventEmitter<any>;
toolbarButtons: EgGridToolbarButton[];
toolbarActions: EgGridToolbarAction[];
lastSelectedIndex: any;
+ pageChanges: Subscription;
constructor(private gridSvc: EgGridService) {
this.pager = new Pager();
- this.selector = {};
+ this.rowSelector = new EgGridRowSelector();
this.pager.limit = 10; // TODO config
this.onRowDblClick$ = new EventEmitter<any>();
this.onRowClick$ = new EventEmitter<any>();
this.gridSvc.getColumnsConfig(this.persistKey)
.then(conf => this.columnSet.applyColumnSettings(conf))
.then(ok => this.dataSource.requestPage(this.pager))
+ .then(ok => this.listenToPager())
+ }
+
+ ngOnDestroy() {
+ this.dontListenToPager();
+ }
+
+ // Subscribe or unsubscribe to page-change events from the pager.
+ listenToPager() {
+ if (this.pageChanges) return;
+ this.pageChanges = this.pager.onChange$.subscribe(
+ val => this.dataSource.requestPage(this.pager));
+ }
+
+ dontListenToPager() {
+ if (!this.pageChanges) return;
+ this.pageChanges.unsubscribe();
+ this.pageChanges = null
}
// 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 == 'ArrowLeft') {
+ this.toPrevPage().then(ok => this.selectFirstRow(), err => {});
+
} else if (evt.key == 'ArrowRight') {
+ this.toNextPage().then(ok => this.selectFirstRow(), err => {});
+
+ } else if (evt.key == 'Enter') {
if (this.lastSelectedIndex)
this.onRowDblClick(this.getRowByIndex(this.lastSelectedIndex));
}
// currently visible in the grid display.
getSelectedRows(): any[] {
let selected = [];
- Object.keys(this.selector).forEach(index => {
- let row = this.dataSource.data.filter(
- r => this.getRowIndex(r) == index)[0];
+ this.rowSelector.selected().forEach(index => {
+ let row = this.getRowByIndex(index);
if (row) selected.push(row);
});
return selected;
}
selectOneRow(index: any) {
- this.selector = {};
- this.selector[index] = true;
+ this.rowSelector.clear();
+ this.rowSelector.select(index);
this.lastSelectedIndex = index;
}
// selects or deselects an item, without affecting the others.
// returns true if the item is selected; false if de-selected.
toggleSelectOneRow(index: any) {
- if (this.selector[index]) {
- delete this.selector[index];
+ if (this.rowSelector.contains(index)) {
+ this.rowSelector.deselect(index);
return false;
}
- this.selector[index] = true;
+ this.rowSelector.select(index);
return true;
}
-
+ selectRowByPos(pos: number) {
+ let row = this.dataSource.data[pos];
+ if (row) this.selectOneRow(this.getRowIndex(row));
+ }
selectPreviousRow() {
if (!this.lastSelectedIndex) return;
let pos = this.getRowPosition(this.lastSelectedIndex);
- if (pos == 0) return;
if (pos == this.pager.offset) {
- // Request the previous page of data
- this.pager.decrement();
- this.dataSource.requestPage(this.pager)
- .then(ok => {
- let row = this.dataSource.data[pos - 1];
- if (row) this.selectOneRow(this.getRowIndex(row));
- });
+ this.toPrevPage().then(ok => this.selectLastRow(), err => {});
} else {
- let row = this.dataSource.data[pos - 1];
- this.selectOneRow(this.getRowIndex(row));
+ this.selectRowByPos(pos - 1);
}
}
selectNextRow() {
if (!this.lastSelectedIndex) return;
let pos = this.getRowPosition(this.lastSelectedIndex);
-
if (pos == (this.pager.offset + this.pager.limit - 1)) {
- // Request the next page of data
- this.pager.increment();
- this.dataSource.requestPage(this.pager)
- .then(ok => {
- let row = this.dataSource.data[pos + 1];
- if (row) this.selectOneRow(this.getRowIndex(row));
- });
+ this.toNextPage().then(ok => this.selectFirstRow(), err => {});
} else {
- let row = this.dataSource.data[pos + 1];
- if (row) this.selectOneRow(this.getRowIndex(row));
+ this.selectRowByPos(pos + 1);
}
}
+ selectFirstRow() {
+ this.selectRowByPos(this.pager.offset);
+ }
+
+ selectLastRow() {
+ this.selectRowByPos(this.pager.offset + this.pager.limit - 1);
+ }
+
+ toPrevPage(): Promise<any> {
+ if (this.pager.isFirstPage()) return Promise.reject('on first');
+ // temp ignore pager events since we're calling requestPage manually.
+ this.dontListenToPager();
+ this.pager.decrement();
+ this.listenToPager();
+ return this.dataSource.requestPage(this.pager);
+ }
+
+ toNextPage(): Promise<any> {
+ if (this.pager.isLastPage()) return Promise.reject('on last');
+ // temp ignore pager events since we're calling requestPage manually.
+ this.dontListenToPager();
+ this.pager.increment();
+ this.listenToPager();
+ return this.dataSource.requestPage(this.pager);
+ }
}
+
@ViewChild('successString') successString: EgStringComponent;
@ViewChild('createString') createString: EgStringComponent;
contextOrg: EgIdlObject;
+ createBillingType: () => void;
+ deleteSelected: (rows: any) => void;
constructor(
private org: EgOrgService,
this.dataSource = new EgGridDataSource();
}
-
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) {
- console.log('deleting...');
- console.log(billingTypes);
- }
-
ngOnInit() {
this.contextOrg = this.org.get(this.auth.user().ws_ou());
);
}
);
+
+ this.createBillingType = () => {
+ this.btEditDialog.mode = 'create';
+ this.btEditDialog.open().then(
+ ok => {
+ this.createString.current()
+ .then(str => this.toast.success(str));
+ this.btGrid.reload();
+ },
+ err => { }
+ );
+ }
+
+ this.deleteSelected = (billingTypes) => {
+ billingTypes.forEach(bt => bt.isdeleted(true));
+ this.pcrud.autoApply(billingTypes).subscribe(
+ val => console.debug('deleted: ' + val),
+ err => {},
+ () => this.btGrid.reload()
+ );
+ }
}
}
projects / working / Evergreen.git / commitdiff