</div>
<div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
*ngFor="let col of columnSet.displayColumns()">
- {{col.displayValue(row)}}
+ {{getDisplayValue(row, col)}}
</div>
<div>
import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
-import {EgGridColumn, EgGridColumnSet} from './grid-column';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
import {EgGridDataSource} from './grid-data-source';
import {Pager} from '@eg/share/util/pager';
@Input() columnSet: EgGridColumnSet;
@Input() selector: {[idx:number] : boolean};
+ constructor(private gridSvc: EgGridService) { }
+
ngOnInit() {
// fetch the first page of data
this.dataSource.requestPage(this.pager);
}
+
+ getDisplayValue(row: any, col: EgGridColumn): string {
+ return this.gridSvc.getRowColumnValue(row, col);
+ }
+
}
import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
import {EgGridComponent} from './grid.component';
-import {EgGridColumn} from './grid-column';
@Component({
selector: 'eg-grid-column',
@Input() cellTemplate: TemplateRef<any>;
// get a reference to our container grid.
- constructor(@Host() private grid: EgGridComponent) {}
+ constructor(
+ private gridSvc: EgGridService,
+ @Host() private grid: EgGridComponent) {}
ngOnInit() {
+++ /dev/null
-import {TemplateRef} from '@angular/core';
-import {EgIdlService} from '@eg/core/idl.service';
-
-export class EgGridColumn {
- name: string;
- path: string;
- label: string;
- flex: number;
- hidden: boolean;
- cellTemplate: TemplateRef<any>;
-
- displayValue(row: any): string {
- // filters
- // cell templates, etc.
-
- if (row[this.name] === undefined || row[this.name] === null)
- return '';
-
- if (typeof row[this.name] == 'function') {
- let val = row[this.name]();
- if (val === undefined || val === null) return '';
- return val+'';
- }
-
- return row[this.name]+'';
- }
-}
-
-export class EgGridColumnSet {
-
- columns: EgGridColumn[];
-
- constructor() {
- this.columns = [];
- }
-
- add(col: EgGridColumn) {
- this.columns.push(col);
- }
-
- displayColumns(): EgGridColumn[] {
- return this.columns.filter(c => !c.hidden);
- }
-}
-
-export class EgGridIdlColumnSet extends EgGridColumnSet {
- idl: EgIdlService;
- idlClass: string;
-
- constructor(idl: EgIdlService, idlClass: string) {
- super();
- this.idl = idl;
- this.idlClass = idlClass;
- this.generateColumns();
- }
-
- generateColumns() {
- this.idl.classes[this.idlClass].fields.forEach(field => {
- if (field.virtual) return;
- let col = new EgGridColumn();
- col.name = field.name;
- col.label = field.label || field.name;
- this.add(col);
- });
- }
-}
-
-
#
</div>
-
<div *ngFor="let col of columnSet.displayColumns()"
class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
{{col.label}}
import {Component, Input, OnInit} from '@angular/core';
-import {EgGridColumn, EgGridColumnSet} from './grid-column';
+import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
@Component({
selector: 'eg-grid-header',
@Input() columnSet: EgGridColumnSet;
@Input() selected: {[idx:number] : boolean};
- constructor() {}
+ constructor(private gridSvc: EgGridService) { }
ngOnInit() {
}
--- /dev/null
+
+<div class="eg-grid-toolbar">
+
+ <!-- push everything else to the right -->
+ <div class="flex-1"></div>
+
+ <div class="btn-toolbar">
+ <div class="btn-grp">
+ <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.toFirst()">
+ <span title="First Page" i18n-title class="material-icons">first_page</span>
+ </button>
+ <button [disabled]="pager.isFirstPage()" type="button" class="btn btn-light" (click)="pager.decrement()">
+ <span title="Previous Page" i18n-title class="material-icons">keyboard_arrow_left</span>
+ </button>
+ <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.increment()">
+ <span title="Next Page" i18n-title class="material-icons">keyboard_arrow_right</span>
+ </button>
+ <button [disabled]="pager.isLastPage()" type="button" class="btn btn-light" (click)="pager.toLast()">
+ <span title="First Page" i18n-title class="material-icons">last_page</span>
+ </button>
+ </div>
+ </div>
+
+<div>
+
--- /dev/null
+import {Component, Input, OnInit} from '@angular/core';
+import {EgGridDataSource} from './grid-data-source';
+import {Pager} from '@eg/share/util/pager';
+
+@Component({
+ selector: 'eg-grid-toolbar',
+ templateUrl: 'grid-toolbar.component.html'
+})
+
+export class EgGridToolbarComponent implements OnInit {
+
+ @Input() dataSource: EgGridDataSource;
+ @Input() pager: Pager;
+
+ ngOnInit() {
+
+ // listen for pagination changes
+ this.pager.onChange$.subscribe(
+ val => this.dataSource.requestPage(this.pager));
+ }
+}
+
+
import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {EgGridDataSource} from './grid-data-source';
-import {EgGridColumn, EgGridColumnSet, EgGridIdlColumnSet} from './grid-column';
import {EgIdlService} from '@eg/core/idl.service';
+import {EgOrgService} from '@eg/core/org.service';
import {Pager} from '@eg/share/util/pager';
+import {EgGridService, EgGridColumnSet} from '@eg/share/grid/grid.service';
@Component({
selector: 'eg-grid',
columnSet: EgGridColumnSet;
selector: {[idx:number] : boolean};
- constructor(private idl: EgIdlService) {
+ constructor(private gridSvc: EgGridService) {
this.pager = new Pager();
this.pager.limit = 10; // TODO
this.selector = {};
}
ngOnInit() {
- if (this.idlClass) {
- this.columnSet = new EgGridIdlColumnSet(this.idl, this.idlClass);
- } else {
- this.columnSet = new EgGridColumnSet();
- }
+ this.columnSet = this.gridSvc.initializeColumnSet(this.idlClass);
}
-
}
+
import {EgGridHeaderComponent} from './grid-header.component';
import {EgGridBodyComponent} from './grid-body.component';
import {EgGridToolbarComponent} from './grid-toolbar.component';
+import {EgGridService} from './grid.service';
@NgModule({
declarations: [
EgGridColumnComponent,
],
providers: [
+ EgGridService
]
})
--- /dev/null
+import {Injectable, TemplateRef} from '@angular/core';
+import {EgIdlService, EgIdlObject} from '@eg/core/idl.service';
+import {EgOrgService} from '@eg/core/org.service';
+import {EgPcrudService} from '@eg/core/pcrud.service';
+
+
+@Injectable()
+export class EgGridService {
+
+ constructor(
+ private idl: EgIdlService,
+ private org: EgOrgService,
+ private pcrud: EgPcrudService
+ ) {
+ }
+
+ getRowColumnValue(row: any, col: EgGridColumn): string {
+ if (row[col.name] === undefined || row[col.name] === null)
+ return '';
+
+ if (col.idlFieldDef)
+ return this.getRowColumnIdlValue(row, col);
+
+ if (typeof row[col.name] == 'function') {
+ let val = row[col.name]();
+ if (val === undefined || val === null) return '';
+ return val+'';
+ }
+
+ return row[col.name]+'';
+ }
+
+ getRowColumnIdlValue(row: any, col: EgGridColumn): string {
+ let val = row[col.name]();
+ if (val === undefined || val === null) return '';
+ return val+'';
+ }
+
+ initializeColumnSet(idlClass?: string): EgGridColumnSet {
+ let columnSet = new EgGridColumnSet();
+
+ // generate columns for all non-virtual fields on the IDL class
+ if (idlClass) {
+ this.idl.classes[idlClass].fields.forEach(field => {
+ if (field.virtual) return;
+ let col = new EgGridColumn();
+ col.name = field.name;
+ col.label = field.label || field.name;
+ col.idlFieldDef = field;
+ columnSet.add(col);
+ });
+ }
+
+ return columnSet;
+ }
+}
+
+
+export class EgGridColumn {
+ name: string;
+ path: string;
+ label: string;
+ flex: number;
+ hidden: boolean;
+ idlClass: string;
+ idlFieldDef: any;
+ cellTemplate: TemplateRef<any>;
+}
+
+
+export class EgGridColumnSet {
+ columns: EgGridColumn[];
+
+ constructor() {
+ this.columns = [];
+ }
+
+ add(col: EgGridColumn) {
+ // avoid dupes
+ if (this.columns.filter(c => c.name == col.name).length) return;
+
+ this.columns.push(col);
+ }
+
+ displayColumns(): EgGridColumn[] {
+ return this.columns.filter(c => !c.hidden);
+ }
+}
+
+
+
projects / working / Evergreen.git / commitdiff