Database column filters

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 {}

src/app/components/editor/database/database.component.html

@@ -25,6 +25,7 @@
       (cellValueChanged)="onCellValueChanged()"
       (gridReady)="onGridReady($event)"
       (columnResized)="onColumnResize($event)"
+      [frameworkComponents]="frameworkComponents"
       #agGridElement
     ></ag-grid-angular>
   </div>

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;

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: `
+        <ion-datetime
+            [displayFormat]="displayFormat"
+            class="ag-custom-component-popup"
+            [(ngModel)]="stringValue"
+            (ionChange)="onDateChanged()"
+        ></ion-datetime>
+    `,
+    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 = '';
+        }
+    }
+}

src/app/components/wysiwyg/wysiwyg.component.html

@@ -71,7 +71,7 @@
             contenteditable
             appDomChange
             *ngIf="isFocused"
-            [innerHTML]="initialValue"
+            [innerHTML]="contents"
             #editable
             (domChange)="onContentsChanged($event)"
     ></div>

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<string> = new EventEmitter<string>();
 
+    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() {
+    ngOnInit() { }
-        this.initialValue = this.contents;
-    }
 
     onFocusIn(event: MouseEvent) {
         console.log('on focus in', event);