parent
407d26eb05
commit
1bd3795a4a
@ -0,0 +1,43 @@
|
|||||||
|
import {ICellEditorAngularComp} from 'ag-grid-angular';
|
||||||
|
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
|
import {ICellEditorParams} from 'ag-grid-community';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cell-editor-paragraph',
|
||||||
|
template: `<input #input [(ngModel)]="value" readonly (click)="onClick()">`,
|
||||||
|
styles: [
|
||||||
|
`input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid grey;
|
||||||
|
}`
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class BooleanEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||||
|
private params: ICellEditorParams;
|
||||||
|
public value: string;
|
||||||
|
|
||||||
|
@ViewChild('input', {static: false}) input: ElementRef;
|
||||||
|
|
||||||
|
agInit(params: ICellEditorParams): void {
|
||||||
|
this.params = params;
|
||||||
|
this.value = this.params.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(): any {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.onClick();
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
if ( this.value === 'True' ) {
|
||||||
|
this.value = 'False';
|
||||||
|
} else if ( this.value === 'False' ) {
|
||||||
|
this.value = '';
|
||||||
|
} else {
|
||||||
|
this.value = 'True';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,75 @@
|
|||||||
|
import {ICellEditorAngularComp} from 'ag-grid-angular';
|
||||||
|
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
|
import {ICellEditorParams} from 'ag-grid-community';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cell-editor-numeric',
|
||||||
|
template: `<input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">`,
|
||||||
|
styles: [
|
||||||
|
`input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid grey;
|
||||||
|
}`
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class NumericEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||||
|
private params: ICellEditorParams;
|
||||||
|
public value: number;
|
||||||
|
private cancelBeforeStart = false;
|
||||||
|
|
||||||
|
@ViewChild('input', {static: false}) input: ElementRef;
|
||||||
|
|
||||||
|
agInit(params: ICellEditorParams): void {
|
||||||
|
this.params = params;
|
||||||
|
this.value = this.params.value;
|
||||||
|
|
||||||
|
// Only cancel before start if the pressed key is numeric
|
||||||
|
this.cancelBeforeStart = params.charPress && ('1234567890'.indexOf(params.charPress) < 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(): any {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
isCancelBeforeStart(): boolean {
|
||||||
|
return this.cancelBeforeStart;
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown($event) {
|
||||||
|
if ( !this.isKeyPressedAllowed($event) ) {
|
||||||
|
if ($event.preventDefault) {
|
||||||
|
$event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.input.nativeElement.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private getCharCodeFromEvent(event): any {
|
||||||
|
return (typeof event.which === 'undefined') ? event.keyCode : event.which;
|
||||||
|
}
|
||||||
|
|
||||||
|
private isCharNumeric(charStr): boolean {
|
||||||
|
return !!/\d/.test(charStr);
|
||||||
|
}
|
||||||
|
|
||||||
|
private isKeyPressedAllowed(event): boolean {
|
||||||
|
const charCode = this.getCharCodeFromEvent(event);
|
||||||
|
const charStr = event.key ? event.key : String.fromCharCode(charCode);
|
||||||
|
if (this.isCharNumeric(charStr)) {
|
||||||
|
return true;
|
||||||
|
} else if ( charStr === '.' && this.value % 1 === 0 ) {
|
||||||
|
return true;
|
||||||
|
} else if ( ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(event.code) ) {
|
||||||
|
return true;
|
||||||
|
} else if ( charStr === 'a' && event.ctrlKey ) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,52 @@
|
|||||||
|
import {ICellEditorAngularComp} from 'ag-grid-angular';
|
||||||
|
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
|
import {ICellEditorParams} from 'ag-grid-community';
|
||||||
|
import {ModalController} from '@ionic/angular';
|
||||||
|
import {ParagraphModalComponent} from './paragraph-modal.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cell-editor-paragraph',
|
||||||
|
template: `<input #input [(ngModel)]="value" readonly>`,
|
||||||
|
styles: [
|
||||||
|
`input {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid grey;
|
||||||
|
}`
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||||
|
private params: ICellEditorParams;
|
||||||
|
public value: string;
|
||||||
|
|
||||||
|
@ViewChild('input', {static: false}) input: ElementRef;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
protected modals: ModalController,
|
||||||
|
) { }
|
||||||
|
|
||||||
|
agInit(params: ICellEditorParams): void {
|
||||||
|
this.params = params;
|
||||||
|
this.value = this.params.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue(): any {
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.modals.create({
|
||||||
|
component: ParagraphModalComponent,
|
||||||
|
componentProps: {
|
||||||
|
title: this.params.colDef.headerName,
|
||||||
|
value: this.value,
|
||||||
|
}
|
||||||
|
}).then(modal => {
|
||||||
|
modal.onDidDismiss().then(value => {
|
||||||
|
this.value = String(value.data);
|
||||||
|
});
|
||||||
|
modal.present();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,27 @@
|
|||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>{{ title }}</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button (click)="dismissModal()">
|
||||||
|
<ion-icon name="close"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="ion-padding">
|
||||||
|
<ion-grid>
|
||||||
|
<ion-row>
|
||||||
|
<ion-col size="12">
|
||||||
|
<ion-item>
|
||||||
|
<ion-label position="floating">Content</ion-label>
|
||||||
|
<ion-textarea [(ngModel)]="value" rows="15"></ion-textarea>
|
||||||
|
</ion-item>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
</ion-grid>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer>
|
||||||
|
<ion-button fill="invisible" (click)="dismissModal()"><ion-icon name="save"></ion-icon> Save</ion-button>
|
||||||
|
</ion-footer>
|
@ -0,0 +1,21 @@
|
|||||||
|
import {Component, Input} from '@angular/core';
|
||||||
|
import {ModalController} from '@ionic/angular';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'editor-paragraph-modal',
|
||||||
|
templateUrl: './paragraph-modal.component.html',
|
||||||
|
styleUrls: ['./paragraph-modal.component.scss'],
|
||||||
|
})
|
||||||
|
export class ParagraphModalComponent {
|
||||||
|
@Input() value = '';
|
||||||
|
@Input() title: string;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
protected modals: ModalController,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
dismissModal() {
|
||||||
|
console.log(this.value);
|
||||||
|
this.modals.dismiss(this.value);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue