From 3b14c2dc1c7b828f3da6cc3a0df60240a6329e7a Mon Sep 17 00:00:00 2001 From: garrettmills Date: Thu, 12 Nov 2020 21:16:18 -0600 Subject: [PATCH] Database column filters --- src/app/components/components.module.ts | 4 ++ .../editor/database/database.component.html | 1 + .../editor/database/database.component.ts | 45 +++++++++++++++ .../database/filters/date-time.filter.ts | 57 +++++++++++++++++++ .../components/wysiwyg/wysiwyg.component.html | 2 +- .../components/wysiwyg/wysiwyg.component.ts | 18 ++++-- 6 files changed, 121 insertions(+), 6 deletions(-) create mode 100644 src/app/components/editor/database/filters/date-time.filter.ts 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);