Browse Source

Database column filters

master
Garrett Mills 3 months ago
parent
commit
3b14c2dc1c
Signed by: garrettmills GPG Key ID: D2BF5FBA8298F246
6 changed files with 121 additions and 6 deletions
  1. +4
    -0
      src/app/components/components.module.ts
  2. +1
    -0
      src/app/components/editor/database/database.component.html
  3. +45
    -0
      src/app/components/editor/database/database.component.ts
  4. +57
    -0
      src/app/components/editor/database/filters/date-time.filter.ts
  5. +1
    -1
      src/app/components/wysiwyg/wysiwyg.component.html
  6. +13
    -5
      src/app/components/wysiwyg/wysiwyg.component.ts

+ 4
- 0
src/app/components/components.module.ts View File

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

+ 1
- 0
src/app/components/editor/database/database.component.html View File

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


+ 45
- 0
src/app/components/editor/database/database.component.ts View File

@ -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;


+ 57
- 0
src/app/components/editor/database/filters/date-time.filter.ts View File

@ -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 = '';
}
}
}

+ 1
- 1
src/app/components/wysiwyg/wysiwyg.component.html View File

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


+ 13
- 5
src/app/components/wysiwyg/wysiwyg.component.ts View File

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


Loading…
Cancel
Save