Add WYSIWYG column to database (#30)
parent
c76fc2e82a
commit
138723929e
@ -0,0 +1,61 @@
|
||||
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 {WysiwygModalComponent} from './wysiwyg-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'cell-editor-wysiwyg',
|
||||
template: `<input #input [(ngModel)]="value" readonly>`,
|
||||
styles: [
|
||||
`input {
|
||||
width: 100%;
|
||||
border: 1px solid grey;
|
||||
}`
|
||||
],
|
||||
})
|
||||
export class WysiwygEditorComponent implements ICellEditorAngularComp, AfterViewInit {
|
||||
private params: ICellEditorParams;
|
||||
public value: string;
|
||||
|
||||
@ViewChild('input') 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: WysiwygModalComponent,
|
||||
componentProps: {
|
||||
title: this.params.colDef.headerName,
|
||||
value: this.value,
|
||||
}
|
||||
}).then(modal => {
|
||||
modal.onDidDismiss().then(value => {
|
||||
if ( typeof value.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.value = String(value.data);
|
||||
this.finishEdit();
|
||||
});
|
||||
modal.present();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
finishEdit() {
|
||||
this.params.stopEditing();
|
||||
}
|
||||
}
|
@ -0,0 +1,24 @@
|
||||
<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">
|
||||
<wysiwyg-editor [contents]="value" (contentsChanged)="onContentsChanged($event)" [editonly]="true"></wysiwyg-editor>
|
||||
</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,26 @@
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {ModalController} from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'editor-wysiwyg-modal',
|
||||
templateUrl: './wysiwyg-modal.component.html',
|
||||
styleUrls: ['./wysiwyg-modal.component.scss'],
|
||||
})
|
||||
export class WysiwygModalComponent {
|
||||
@Input() value = '';
|
||||
@Input() title: string;
|
||||
|
||||
constructor(
|
||||
protected modals: ModalController,
|
||||
) {}
|
||||
|
||||
dismissModal() {
|
||||
this.modals.dismiss(this.value);
|
||||
}
|
||||
|
||||
onContentsChanged(contents: string) {
|
||||
if ( this.value !== contents ) {
|
||||
this.value = contents;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in new issue