diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index ec772a1..24b31dc 100644
--- a/src/app/components/components.module.ts
+++ b/src/app/components/components.module.ts
@@ -37,6 +37,7 @@ import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
import {AngularResizedEventModule} from 'angular-resize-event';
+import {DateTimeFilterComponent} from './editor/database/filters/date-time.filter';
@NgModule({
declarations: [
@@ -68,6 +69,7 @@ import {AngularResizedEventModule} from 'angular-resize-event';
WysiwygComponent,
WysiwygEditorComponent,
WysiwygModalComponent,
+ DateTimeFilterComponent,
],
imports: [
CommonModule,
@@ -111,6 +113,7 @@ import {AngularResizedEventModule} from 'angular-resize-event';
WysiwygComponent,
WysiwygEditorComponent,
WysiwygModalComponent,
+ DateTimeFilterComponent,
],
exports: [
NodePickerComponent,
@@ -141,6 +144,7 @@ import {AngularResizedEventModule} from 'angular-resize-event';
WysiwygComponent,
WysiwygEditorComponent,
WysiwygModalComponent,
+ DateTimeFilterComponent,
]
})
export class ComponentsModule {}
diff --git a/src/app/components/editor/database/database.component.html b/src/app/components/editor/database/database.component.html
index f7b73c3..724533b 100644
--- a/src/app/components/editor/database/database.component.html
+++ b/src/app/components/editor/database/database.component.html
@@ -25,6 +25,7 @@
(cellValueChanged)="onCellValueChanged()"
(gridReady)="onGridReady($event)"
(columnResized)="onColumnResize($event)"
+ [frameworkComponents]="frameworkComponents"
#agGridElement
>
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index ab50e75..0d911e6 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -16,6 +16,7 @@ import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';
import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
import {debounce, debug} from '../../../utility';
+import {DateTimeFilterComponent} from './filters/date-time.filter';
@Component({
selector: 'editor-database',
@@ -27,6 +28,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
@Input() editorUUID?: string;
@ViewChild('agGridElement') agGridElement: AgGridAngular;
+ frameworkComponents = {
+ agDateInput: DateTimeFilterComponent
+ };
+
public dbRecord: any;
public pendingSetup = true;
public dirty = false;
@@ -189,33 +194,73 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
// Set editors and renderers for different types
if ( x.Type === 'text' ) {
x.editor = 'agTextCellEditor';
+ x.filter = 'agTextColumnFilter';
} else if ( x.Type === 'number' ) {
x.cellEditorFramework = NumericEditorComponent;
+ x.filter = 'agNumberColumnFilter';
} else if ( x.Type === 'paragraph' ) {
x.cellEditorFramework = ParagraphEditorComponent;
+ x.filter = 'agTextColumnFilter';
} else if ( x.Type === 'boolean' ) {
x.cellRendererFramework = BooleanRendererComponent;
x.cellEditorFramework = BooleanEditorComponent;
x.suppressSizeToFit = true;
} else if ( x.Type === 'select' ) {
x.cellEditorFramework = SelectEditorComponent;
+ x.filter = 'agTextColumnFilter';
} else if ( x.Type === 'multiselect' ) {
x.cellEditorFramework = MultiSelectEditorComponent;
+ x.filter = 'agTextColumnFilter';
} else if ( x.Type === 'datetime' ) {
x.cellEditorFramework = DatetimeEditorComponent;
x.cellRendererFramework = DatetimeRendererComponent;
+ x.filter = 'agDateColumnFilter';
+ x.filterParams = {
+ buttons: ['apply', 'clear'],
+ displayFormat: x.additionalData.format,
+ comparator: (filterDate: Date, cellValue) => {
+ if ( !cellValue ) {
+ return 0;
+ }
+
+ const cellDate = new Date(cellValue);
+
+ if ( x.additionalData.format === 'YYYY-MM-DD' ) {
+ cellDate.setHours(0);
+ cellDate.setMinutes(0);
+ cellDate.setSeconds(0);
+ cellDate.setMilliseconds(0);
+ } else if ( x.additionalData.format === 'h:mm a' ) {
+ cellDate.setFullYear(filterDate.getFullYear());
+ cellDate.setMonth(filterDate.getMonth());
+ cellDate.setDate(filterDate.getDate());
+ }
+
+ // Now that both parameters are Date objects, we can compare
+ if (cellDate < filterDate) {
+ return -1;
+ } else if (cellDate > filterDate) {
+ return 1;
+ } else {
+ return 0;
+ }
+ },
+ };
} else if ( x.Type === 'currency' ) {
x.cellEditorFramework = NumericEditorComponent;
x.cellRendererFramework = CurrencyRendererComponent;
+ x.filter = 'agNumberColumnFilter';
} else if ( x.Type === 'index' ) {
x.editable = false;
x.suppressSizeToFit = true;
+ x.filter = 'agNumberColumnFilter';
if ( !x.width ) {
x.width = 80;
}
x.minWidth = 80;
} else if ( x.Type === 'wysiwyg' ) {
x.cellEditorFramework = WysiwygEditorComponent;
+ x.filter = 'agTextColumnFilter';
}
return x;
diff --git a/src/app/components/editor/database/filters/date-time.filter.ts b/src/app/components/editor/database/filters/date-time.filter.ts
new file mode 100644
index 0000000..d3404d7
--- /dev/null
+++ b/src/app/components/editor/database/filters/date-time.filter.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'noded-date-time-filter',
+ template: `
+
+ `,
+ styles: [
+ `
+ ion-datetime {
+ border: 2px solid darkgrey;
+ border-radius: 3px;
+ margin: 3px;
+ }
+ `
+ ],
+})
+export class DateTimeFilterComponent {
+ private params: any;
+ public displayFormat = 'YYYY-MM-DD h:mm a';
+
+ public stringValue = '';
+
+ public get dateValue() {
+ return new Date(this.stringValue);
+ }
+
+ public set dateValue(date: Date) {
+ this.stringValue = date.toISOString();
+ }
+
+ agInit(params: any): void {
+ this.params = params;
+ this.displayFormat = params?.filterParams?.displayFormat || 'YYYY-MM-DD h:mm a';
+ }
+
+ onDateChanged() {
+ this.params.onDateChanged();
+ }
+
+ getDate(): Date {
+ return this.dateValue;
+ }
+
+ setDate(date?: Date): void {
+ if ( date ) {
+ this.dateValue = date;
+ } else {
+ this.stringValue = '';
+ }
+ }
+}
diff --git a/src/app/components/wysiwyg/wysiwyg.component.html b/src/app/components/wysiwyg/wysiwyg.component.html
index 9ec7b4f..903c5aa 100644
--- a/src/app/components/wysiwyg/wysiwyg.component.html
+++ b/src/app/components/wysiwyg/wysiwyg.component.html
@@ -71,7 +71,7 @@
contenteditable
appDomChange
*ngIf="isFocused"
- [innerHTML]="initialValue"
+ [innerHTML]="contents"
#editable
(domChange)="onContentsChanged($event)"
>
diff --git a/src/app/components/wysiwyg/wysiwyg.component.ts b/src/app/components/wysiwyg/wysiwyg.component.ts
index d1773ef..2fddde6 100644
--- a/src/app/components/wysiwyg/wysiwyg.component.ts
+++ b/src/app/components/wysiwyg/wysiwyg.component.ts
@@ -8,12 +8,22 @@ import {Component, EventEmitter, HostListener, Input, OnInit, Output, ViewChild}
export class WysiwygComponent implements OnInit {
@ViewChild('editable') editable;
@Input() readonly = false;
- @Input() contents = '';
+ @Input() set contents(val: string) {
+ if ( this.currentContents !== val ) {
+ this.currentContents = val;
+ }
+ }
+
+ get contents(): string {
+ return this.currentContents;
+ }
+
@Output() contentsChanged: EventEmitter = new EventEmitter();
+ public currentContents = '';
+
public isFocused = false;
protected hadOneFocusOut = false;
- public initialValue = '';
protected isEditOnly = false;
public get editonly() {
@@ -37,9 +47,7 @@ export class WysiwygComponent implements OnInit {
return document.body.classList.contains('dark');
}
- ngOnInit() {
- this.initialValue = this.contents;
- }
+ ngOnInit() { }
onFocusIn(event: MouseEvent) {
console.log('on focus in', event);