pull/18/head
parent
1edd696bdb
commit
42f24914d5
@ -0,0 +1,33 @@
|
|||||||
|
import {ICellEditorAngularComp} from 'ag-grid-angular';
|
||||||
|
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
||||||
|
import {ICellEditorParams} from 'ag-grid-community';
|
||||||
|
import {IonDatetime} from '@ionic/angular';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cell-editor-select',
|
||||||
|
template: `<ion-datetime #picker [displayFormat]="format" [(ngModel)]="value" style="padding: 0 0 0 5px;"></ion-datetime>`,
|
||||||
|
})
|
||||||
|
export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||||
|
public params: ICellEditorParams;
|
||||||
|
public value: string;
|
||||||
|
public format = 'YYYY-MM-DD h:mm a';
|
||||||
|
@ViewChild('picker', {static: false}) picker: IonDatetime;
|
||||||
|
|
||||||
|
agInit(params: ICellEditorParams): void {
|
||||||
|
this.params = params;
|
||||||
|
this.value = this.params.value;
|
||||||
|
// @ts-ignore
|
||||||
|
if ( this.params.colDef.additionalData.format ) {
|
||||||
|
// @ts-ignore
|
||||||
|
this.format = this.params.colDef.additionalData.format;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(): any {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.picker.open();
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,36 @@
|
|||||||
|
import {ICellEditorAngularComp} from 'ag-grid-angular';
|
||||||
|
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
|
import {ICellEditorParams} from 'ag-grid-community';
|
||||||
|
import {IonSelect} from '@ionic/angular';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cell-editor-multiselect',
|
||||||
|
template: `
|
||||||
|
<ion-select #select [(ngModel)]="value" style="padding: 0;"
|
||||||
|
[interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}" multiple="true">
|
||||||
|
<ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class MultiSelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||||
|
public params: ICellEditorParams;
|
||||||
|
public value: string;
|
||||||
|
|
||||||
|
public options: Array<{value: string}> = [];
|
||||||
|
@ViewChild('select', {static: false}) select: IonSelect;
|
||||||
|
|
||||||
|
agInit(params: ICellEditorParams): void {
|
||||||
|
this.params = params;
|
||||||
|
this.value = this.params.value;
|
||||||
|
// @ts-ignore
|
||||||
|
this.options = this.params.colDef.additionalData.options;
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(): any {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.select.open();
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,37 @@
|
|||||||
|
import {ICellRendererAngularComp} from 'ag-grid-angular';
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {ICellRendererParams} from 'ag-grid-community';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'editor-boolean-renderer',
|
||||||
|
template: `{{ display }}`,
|
||||||
|
})
|
||||||
|
export class BooleanRendererComponent implements ICellRendererAngularComp {
|
||||||
|
public params: ICellRendererParams;
|
||||||
|
public emptyValue = '';
|
||||||
|
public trueValue = 'True';
|
||||||
|
public falseValue = 'False';
|
||||||
|
|
||||||
|
agInit(params: ICellRendererParams): void {
|
||||||
|
this.params = params;
|
||||||
|
// @ts-ignore
|
||||||
|
const labelType = params.colDef.additionalData.labelType.split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1));
|
||||||
|
this.trueValue = labelType[0];
|
||||||
|
this.falseValue = labelType[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
public get display() {
|
||||||
|
if ( this.params.value === true ) {
|
||||||
|
return this.trueValue;
|
||||||
|
} else if ( this.params.value === false ) {
|
||||||
|
return this.falseValue;
|
||||||
|
} else {
|
||||||
|
return this.emptyValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh(params: any): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,23 @@
|
|||||||
|
import {ICellRendererAngularComp} from 'ag-grid-angular';
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {ICellRendererParams} from 'ag-grid-community';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'editor-currency-renderer',
|
||||||
|
template: `{{ params.value | currency: code }}`,
|
||||||
|
})
|
||||||
|
export class CurrencyRendererComponent implements ICellRendererAngularComp {
|
||||||
|
public params: ICellRendererParams;
|
||||||
|
public code = 'USD';
|
||||||
|
|
||||||
|
agInit(params: ICellRendererParams): void {
|
||||||
|
this.params = params;
|
||||||
|
// @ts-ignore
|
||||||
|
this.code = params.colDef.additionalData.currency;
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh(params: any): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,30 @@
|
|||||||
|
import {ICellRendererAngularComp} from 'ag-grid-angular';
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {ICellRendererParams} from 'ag-grid-community';
|
||||||
|
import * as moment from 'moment';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'editor-datetime-renderer',
|
||||||
|
template: `{{ display }}`,
|
||||||
|
})
|
||||||
|
export class DatetimeRendererComponent implements ICellRendererAngularComp {
|
||||||
|
public params: ICellRendererParams;
|
||||||
|
public format = 'YYYY-MM-DD h:mm a';
|
||||||
|
|
||||||
|
agInit(params: ICellRendererParams): void {
|
||||||
|
this.params = params;
|
||||||
|
// @ts-ignore
|
||||||
|
this.format = params.colDef.additionalData.format;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get display() {
|
||||||
|
if ( !this.params.value ) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return moment(this.params.value).format(this.format);
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh(params: any): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue