From 42f24914d536f8b9cca9ee0e8f77da63b737fe77 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Wed, 19 Feb 2020 01:12:59 -0600 Subject: [PATCH] add multiselect editor, datetime editor, currency/datetime/boolean renderers, column reordering --- package-lock.json | 5 ++ package.json | 1 + src/app/components/components.module.ts | 20 ++++++ .../database/columns/columns.component.html | 63 ++++++++++++++++--- .../database/columns/columns.component.ts | 16 +++++ .../editor/database/database.component.ts | 20 +++++- .../boolean/boolean-editor.component.ts | 24 ++++--- .../datetime/datetime-editor.component.ts | 33 ++++++++++ .../paragraph/paragraph-editor.component.ts | 4 ++ .../select/multiselect-editor.component.ts | 36 +++++++++++ .../editors/select/select-editor.component.ts | 8 +-- .../renderers/boolean-renderer.component.ts | 37 +++++++++++ .../renderers/currency-renderer.component.ts | 23 +++++++ .../renderers/datetime-renderer.component.ts | 30 +++++++++ src/global.scss | 5 ++ 15 files changed, 300 insertions(+), 25 deletions(-) create mode 100644 src/app/components/editor/database/editors/datetime/datetime-editor.component.ts create mode 100644 src/app/components/editor/database/editors/select/multiselect-editor.component.ts create mode 100644 src/app/components/editor/database/renderers/boolean-renderer.component.ts create mode 100644 src/app/components/editor/database/renderers/currency-renderer.component.ts create mode 100644 src/app/components/editor/database/renderers/datetime-renderer.component.ts diff --git a/package-lock.json b/package-lock.json index ff39d68..40ef305 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7019,6 +7019,11 @@ "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-3.0.3.tgz", "integrity": "sha512-mZuuose70V+Sd0hMWDElpRe3mA6GhYjSQN3mHzqk2XWXRJ+eWQa/f3Lqhw+Me/Xd2etWsGR1hnRa1BfQ2ZDtpw==" }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index 5fabd49..5361e35 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "ag-grid-community": "^22.1.1", "angular-tree-component": "^8.5.2", "core-js": "^2.5.4", + "moment": "^2.24.0", "ngx-monaco-editor": "^8.1.1", "rxjs": "~6.5.1", "tslib": "^1.9.0", diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index f0a5ae4..951c9bf 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -19,6 +19,11 @@ import {ParagraphEditorComponent} from './editor/database/editors/paragraph/para import {ParagraphModalComponent} from './editor/database/editors/paragraph/paragraph-modal.component'; import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-editor.component'; import {SelectEditorComponent} from './editor/database/editors/select/select-editor.component'; +import {MultiSelectEditorComponent} from './editor/database/editors/select/multiselect-editor.component'; +import {DatetimeEditorComponent} from './editor/database/editors/datetime/datetime-editor.component'; +import {DatetimeRendererComponent} from './editor/database/renderers/datetime-renderer.component'; +import {CurrencyRendererComponent} from './editor/database/renderers/currency-renderer.component'; +import {BooleanRendererComponent} from './editor/database/renderers/boolean-renderer.component'; @NgModule({ declarations: [ @@ -37,6 +42,11 @@ import {SelectEditorComponent} from './editor/database/editors/select/select-edi ParagraphModalComponent, BooleanEditorComponent, SelectEditorComponent, + MultiSelectEditorComponent, + DatetimeEditorComponent, + DatetimeRendererComponent, + CurrencyRendererComponent, + BooleanRendererComponent, ], imports: [ CommonModule, @@ -61,6 +71,11 @@ import {SelectEditorComponent} from './editor/database/editors/select/select-edi ParagraphModalComponent, BooleanEditorComponent, SelectEditorComponent, + MultiSelectEditorComponent, + DatetimeEditorComponent, + DatetimeRendererComponent, + CurrencyRendererComponent, + BooleanRendererComponent, ], exports: [ HostComponent, @@ -78,6 +93,11 @@ import {SelectEditorComponent} from './editor/database/editors/select/select-edi ParagraphModalComponent, BooleanEditorComponent, SelectEditorComponent, + MultiSelectEditorComponent, + DatetimeEditorComponent, + DatetimeRendererComponent, + CurrencyRendererComponent, + BooleanRendererComponent, ] }) export class ComponentsModule {} diff --git a/src/app/components/editor/database/columns/columns.component.html b/src/app/components/editor/database/columns/columns.component.html index d3d2735..cdfb9eb 100644 --- a/src/app/components/editor/database/columns/columns.component.html +++ b/src/app/components/editor/database/columns/columns.component.html @@ -21,7 +21,7 @@ - + Data Type @@ -30,19 +30,30 @@ Paragraph Boolean Select - - - + Multi-Select + Date-Time + Currency + Incrementing Index - - - - + + + + + + + + + + + + + + @@ -54,7 +65,7 @@ - + Add Option @@ -65,13 +76,45 @@ - + + + + + Format + + Date Only + + + + Time Only + + + + Both + + + + + + + + Currency + + US Dollar + Euro + Mexican Peso + Chinese Yuan + Silver + Gold + + + diff --git a/src/app/components/editor/database/columns/columns.component.ts b/src/app/components/editor/database/columns/columns.component.ts index e8be5a9..2ba62a7 100644 --- a/src/app/components/editor/database/columns/columns.component.ts +++ b/src/app/components/editor/database/columns/columns.component.ts @@ -52,4 +52,20 @@ export class ColumnsComponent implements OnInit { this.columnSets = newSets; } + onUpArrow(i) { + if ( this.columnSets[i - 1] ) { + const temp = this.columnSets[i]; + this.columnSets[i] = this.columnSets[i - 1]; + this.columnSets[i - 1] = temp; + } + } + + onDownArrow(i) { + if ( this.columnSets[i + 1] ) { + const temp = this.columnSets[i]; + this.columnSets[i] = this.columnSets[i + 1]; + this.columnSets[i + 1] = temp; + } + } + } diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts index dbbb572..f3c1c4a 100644 --- a/src/app/components/editor/database/database.component.ts +++ b/src/app/components/editor/database/database.component.ts @@ -9,6 +9,11 @@ import {NumericEditorComponent} from './editors/numeric/numeric-editor.component import {ParagraphEditorComponent} from './editors/paragraph/paragraph-editor.component'; import {BooleanEditorComponent} from './editors/boolean/boolean-editor.component'; import {SelectEditorComponent} from './editors/select/select-editor.component'; +import {MultiSelectEditorComponent} from './editors/select/multiselect-editor.component'; +import {DatetimeEditorComponent} from './editors/datetime/datetime-editor.component'; +import {DatetimeRendererComponent} from './renderers/datetime-renderer.component'; +import {CurrencyRendererComponent} from './renderers/currency-renderer.component'; +import {BooleanRendererComponent} from './renderers/boolean-renderer.component'; @Component({ selector: 'editor-database', @@ -74,7 +79,7 @@ export class DatabaseComponent implements OnInit { this.setColumns(result.data).subscribe(() => { const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns` this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => { - // this.columnDefs = res.data; + this.requestParentSave.emit(this); }); }); } @@ -208,15 +213,28 @@ export class DatabaseComponent implements OnInit { } else if ( x.Type === 'paragraph' ) { x.cellEditorFramework = ParagraphEditorComponent; } else if ( x.Type === 'boolean' ) { + x.cellRendererFramework = BooleanRendererComponent; x.cellEditorFramework = BooleanEditorComponent; } else if ( x.Type === 'select' ) { x.cellEditorFramework = SelectEditorComponent; + } else if ( x.Type === 'multiselect' ) { + x.cellEditorFramework = MultiSelectEditorComponent; + } else if ( x.Type === 'datetime' ) { + x.cellEditorFramework = DatetimeEditorComponent; + x.cellRendererFramework = DatetimeRendererComponent; + } else if ( x.Type === 'currency' ) { + x.cellEditorFramework = NumericEditorComponent; + x.cellRendererFramework = CurrencyRendererComponent; + } else if ( x.Type === 'index' ) { + x.editable = false; } console.log({x}); return x; }); + this.agGridElement.api.setColumnDefs(this.columnDefs); + sub.next(); sub.complete(); }); diff --git a/src/app/components/editor/database/editors/boolean/boolean-editor.component.ts b/src/app/components/editor/database/editors/boolean/boolean-editor.component.ts index eafbb55..3d7e2c4 100644 --- a/src/app/components/editor/database/editors/boolean/boolean-editor.component.ts +++ b/src/app/components/editor/database/editors/boolean/boolean-editor.component.ts @@ -4,7 +4,7 @@ import {ICellEditorParams} from 'ag-grid-community'; @Component({ selector: 'cell-editor-paragraph', - template: ``, + template: ``, styles: [ `input { width: 100%; @@ -14,7 +14,17 @@ import {ICellEditorParams} from 'ag-grid-community'; }) export class BooleanEditorComponent implements ICellEditorAngularComp, AfterViewInit { private params: ICellEditorParams; - public value: string; + public value: boolean; + + public get display() { + if ( typeof this.value === 'undefined' ) { + return this.emptyValue; + } else if ( this.value ) { + return this.trueValue; + } else { + return this.falseValue; + } + } protected trueValue = 'True'; protected falseValue = 'False'; @@ -42,12 +52,12 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView } onClick() { - if ( this.value === this.trueValue ) { - this.value = this.falseValue; - } else if ( this.value === this.falseValue ) { - this.value = this.emptyValue; + if ( this.value === true ) { + this.value = false; + } else if ( this.value === false ) { + this.value = undefined; } else { - this.value = this.trueValue; + this.value = true; } } } diff --git a/src/app/components/editor/database/editors/datetime/datetime-editor.component.ts b/src/app/components/editor/database/editors/datetime/datetime-editor.component.ts new file mode 100644 index 0000000..0824034 --- /dev/null +++ b/src/app/components/editor/database/editors/datetime/datetime-editor.component.ts @@ -0,0 +1,33 @@ +import {ICellEditorAngularComp} from 'ag-grid-angular'; +import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {ICellEditorParams} from 'ag-grid-community'; +import {IonDatetime} from '@ionic/angular'; + +@Component({ + selector: 'cell-editor-select', + template: ``, +}) +export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterViewInit { + public params: ICellEditorParams; + public value: string; + public format = 'YYYY-MM-DD h:mm a'; + @ViewChild('picker', {static: false}) picker: IonDatetime; + + agInit(params: ICellEditorParams): void { + this.params = params; + this.value = this.params.value; + // @ts-ignore + if ( this.params.colDef.additionalData.format ) { + // @ts-ignore + this.format = this.params.colDef.additionalData.format; + } + } + + getValue(): any { + return this.value; + } + + ngAfterViewInit(): void { + this.picker.open(); + } +} diff --git a/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts b/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts index 322782a..a2cea05 100644 --- a/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts +++ b/src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts @@ -43,6 +43,10 @@ export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterVi } }).then(modal => { modal.onDidDismiss().then(value => { + if ( typeof value.data === 'undefined' ) { + return; + } + this.value = String(value.data); }); modal.present(); diff --git a/src/app/components/editor/database/editors/select/multiselect-editor.component.ts b/src/app/components/editor/database/editors/select/multiselect-editor.component.ts new file mode 100644 index 0000000..07e4e87 --- /dev/null +++ b/src/app/components/editor/database/editors/select/multiselect-editor.component.ts @@ -0,0 +1,36 @@ +import {ICellEditorAngularComp} from 'ag-grid-angular'; +import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core'; +import {ICellEditorParams} from 'ag-grid-community'; +import {IonSelect} from '@ionic/angular'; + +@Component({ + selector: 'cell-editor-multiselect', + template: ` + + {{ option.value }} + + `, +}) +export class MultiSelectEditorComponent implements ICellEditorAngularComp, AfterViewInit { + public params: ICellEditorParams; + public value: string; + + public options: Array<{value: string}> = []; + @ViewChild('select', {static: false}) select: IonSelect; + + agInit(params: ICellEditorParams): void { + this.params = params; + this.value = this.params.value; + // @ts-ignore + this.options = this.params.colDef.additionalData.options; + } + + getValue(): any { + return this.value; + } + + ngAfterViewInit(): void { + this.select.open(); + } +} diff --git a/src/app/components/editor/database/editors/select/select-editor.component.ts b/src/app/components/editor/database/editors/select/select-editor.component.ts index 670ef2c..6c59ce2 100644 --- a/src/app/components/editor/database/editors/select/select-editor.component.ts +++ b/src/app/components/editor/database/editors/select/select-editor.component.ts @@ -4,19 +4,13 @@ import {ICellEditorParams} from 'ag-grid-community'; import {IonSelect} from '@ionic/angular'; @Component({ - selector: 'cell-editor-paragraph', + selector: 'cell-editor-select', template: ` {{ option.value }} `, - styles: [ - `input { - width: 100%; - border: 1px solid grey; - }` - ], }) export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewInit { public params: ICellEditorParams; diff --git a/src/app/components/editor/database/renderers/boolean-renderer.component.ts b/src/app/components/editor/database/renderers/boolean-renderer.component.ts new file mode 100644 index 0000000..9189fdf --- /dev/null +++ b/src/app/components/editor/database/renderers/boolean-renderer.component.ts @@ -0,0 +1,37 @@ +import {ICellRendererAngularComp} from 'ag-grid-angular'; +import {Component} from '@angular/core'; +import {ICellRendererParams} from 'ag-grid-community'; +import * as moment from 'moment'; + +@Component({ + selector: 'editor-boolean-renderer', + template: `{{ display }}`, +}) +export class BooleanRendererComponent implements ICellRendererAngularComp { + public params: ICellRendererParams; + public emptyValue = ''; + public trueValue = 'True'; + public falseValue = 'False'; + + agInit(params: ICellRendererParams): void { + this.params = params; + // @ts-ignore + const labelType = params.colDef.additionalData.labelType.split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1)); + this.trueValue = labelType[0]; + this.falseValue = labelType[1]; + } + + public get display() { + if ( this.params.value === true ) { + return this.trueValue; + } else if ( this.params.value === false ) { + return this.falseValue; + } else { + return this.emptyValue; + } + } + + refresh(params: any): boolean { + return false; + } +} diff --git a/src/app/components/editor/database/renderers/currency-renderer.component.ts b/src/app/components/editor/database/renderers/currency-renderer.component.ts new file mode 100644 index 0000000..99993a2 --- /dev/null +++ b/src/app/components/editor/database/renderers/currency-renderer.component.ts @@ -0,0 +1,23 @@ +import {ICellRendererAngularComp} from 'ag-grid-angular'; +import {Component} from '@angular/core'; +import {ICellRendererParams} from 'ag-grid-community'; +import * as moment from 'moment'; + +@Component({ + selector: 'editor-currency-renderer', + template: `{{ params.value | currency: code }}`, +}) +export class CurrencyRendererComponent implements ICellRendererAngularComp { + public params: ICellRendererParams; + public code = 'USD'; + + agInit(params: ICellRendererParams): void { + this.params = params; + // @ts-ignore + this.code = params.colDef.additionalData.currency; + } + + refresh(params: any): boolean { + return false; + } +} diff --git a/src/app/components/editor/database/renderers/datetime-renderer.component.ts b/src/app/components/editor/database/renderers/datetime-renderer.component.ts new file mode 100644 index 0000000..539713f --- /dev/null +++ b/src/app/components/editor/database/renderers/datetime-renderer.component.ts @@ -0,0 +1,30 @@ +import {ICellRendererAngularComp} from 'ag-grid-angular'; +import {Component} from '@angular/core'; +import {ICellRendererParams} from 'ag-grid-community'; +import * as moment from 'moment'; + +@Component({ + selector: 'editor-datetime-renderer', + template: `{{ display }}`, +}) +export class DatetimeRendererComponent implements ICellRendererAngularComp { + public params: ICellRendererParams; + public format = 'YYYY-MM-DD h:mm a'; + + agInit(params: ICellRendererParams): void { + this.params = params; + // @ts-ignore + this.format = params.colDef.additionalData.format; + } + + public get display() { + if ( !this.params.value ) { + return ''; + } + return moment(this.params.value).format(this.format); + } + + refresh(params: any): boolean { + return false; + } +} diff --git a/src/global.scss b/src/global.scss index 2b1daa1..1002d62 100644 --- a/src/global.scss +++ b/src/global.scss @@ -28,3 +28,8 @@ @import "~angular-tree-component/dist/angular-tree-component.css"; @import "~ag-grid-community/dist/styles/ag-grid.css"; @import "~ag-grid-community/dist/styles/ag-theme-balham.css"; + +div.picker-wrapper { + border: 2px solid lightgrey !important; + border-radius: 7px !important; +}