<input *ngIf="field.datatype == 'id' && pkeyIsEditable"
class="form-control"
name="{{field.name}}"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
<input *ngIf="field.datatype == 'text'"
class="form-control"
name="{{field.name}}"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
class="form-control"
type="number"
name="{{field.name}}"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
class="form-control"
type="number" step="0.1"
name="{{field.name}}"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
class="form-control"
type="number" step="0.1"
name="{{field.name}}"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[readonly]="field.readOnly"
[required]="field.isRequired()"
[ngModel]="record[field.name]()"
</span>
<eg-org-select *ngIf="field.datatype == 'org_unit'"
- [placeholder]="field.label"
+ placeholder="{{field.label}}..."
+ i18n-placeholder
[applyDefault]="field.orgDefaultAllowed"
[initialOrgId]="record[field.name]()"
(onChange)="record[field.name]($event)">
export class EgGridDataSource {
data: any[];
+ sort: any[];
pager: Pager;
allRowsRetrieved: boolean;
- getRows: (pager: Pager) => Observable<any>;
+ getRows: (pager: Pager, sort: any[]) => Observable<any>;
constructor() {
+ this.sort = [];
this.reset();
}
if (!this.getRows) return;
let idx = pager.offset;
- this.getRows(pager).subscribe(
+ this.getRows(pager, this.sort).subscribe(
row => this.data[idx++] = row,
err => console.error(`grid getRows() error ${err}`),
() => this.checkAllRetrieved(pager, idx)
(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">{{col.label}}</a>
+ <a class="sortable" *ngIf="col.isSortable" (click)="sortOneColumn(col)">
+ {{col.label}}
+ </a>
<span *ngIf="!col.isSortable">{{col.label}}</span>
</div>
</div>
-import {Component, Input, OnInit, HostListener} from '@angular/core';
+import {Component, Input, OnInit, Host} from '@angular/core';
import {EgGridService, EgGridColumn, EgGridColumnSet} from './grid.service';
+import {EgGridDataSource} from './grid-data-source';
+import {EgGridComponent} from './grid.component';
@Component({
selector: 'eg-grid-header',
@Input() columnSet: EgGridColumnSet;
@Input() selected: {[idx:number] : boolean};
+ @Input() dataSource: EgGridDataSource;
dragColumn: EgGridColumn;
- constructor(private gridSvc: EgGridService) { }
+ constructor(
+ private gridSvc: EgGridService,
+ @Host() private grid: EgGridComponent
+ ) { }
ngOnInit() {
}
this.columnSet.insertBefore(this.dragColumn, col);
this.columnSet.columns.forEach(c => c.isDragTarget = false);
}
+
+ sortOneColumn(col: EgGridColumn) {
+ let dir = 'ASC';
+ let sort = this.dataSource.sort;
+
+ if (sort.length && sort[0].name == col.name && sort[0].dir == 'ASC') {
+ dir = 'DESC';
+ }
+
+ this.dataSource.sort = [{name: col.name, dir: dir}];
+ this.grid.reload();
+ }
}
<div class="eg-grid">
<eg-grid-toolbar [dataSource]="dataSource" [pager]="pager"
[toolbarButtons]="toolbarButtons" [columnSet]="columnSet"></eg-grid-toolbar>
- <eg-grid-header [columnSet]="columnSet"></eg-grid-header>
+ <eg-grid-header [columnSet]="columnSet" [dataSource]="dataSource"></eg-grid-header>
<div class="eg-grid-row eg-grid-body-row"
[ngClass]="{'eg-grid-row-selected': selector[idx]}"
<eg-staff-banner bannerText="Billing Type Configuration" i18n-bannerText>
</eg-staff-banner>
-<eg-grid #btGrid idlClass="cbt" [dataSource]="dataSource" >
+<eg-grid #btGrid idlClass="cbt" [dataSource]="dataSource" [isSortable]="true">
<eg-grid-toolbar-button label="New Billing Type" i18n-label [action]="createBillingType">
</eg-grid-toolbar-button>
</eg-grid>
ngOnInit() {
- this.dataSource.getRows = (pager: Pager) => {
+ this.dataSource.getRows = (pager: Pager, sort: any[]) => {
+ let orderBy = {};
+ if (sort.length)
+ orderBy = {cbt: sort[0].name + ' ' + sort[0].dir};
+
return this.pcrud.retrieveAll('cbt', {
offset: pager.offset,
limit: pager.limit,
- order_by: {cbt: 'name'}
+ order_by: orderBy
});
}