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;
+}