diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index 7beeaaf..f0a5ae4 100644
--- a/src/app/components/components.module.ts
+++ b/src/app/components/components.module.ts
@@ -18,6 +18,7 @@ import {NumericEditorComponent} from './editor/database/editors/numeric/numeric-
import {ParagraphEditorComponent} from './editor/database/editors/paragraph/paragraph-editor.component';
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';
@NgModule({
declarations: [
@@ -35,6 +36,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
ParagraphEditorComponent,
ParagraphModalComponent,
BooleanEditorComponent,
+ SelectEditorComponent,
],
imports: [
CommonModule,
@@ -58,6 +60,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
ParagraphEditorComponent,
ParagraphModalComponent,
BooleanEditorComponent,
+ SelectEditorComponent,
],
exports: [
HostComponent,
@@ -74,6 +77,7 @@ import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-
ParagraphEditorComponent,
ParagraphModalComponent,
BooleanEditorComponent,
+ SelectEditorComponent,
]
})
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 2893015..d3d2735 100644
--- a/src/app/components/editor/database/columns/columns.component.html
+++ b/src/app/components/editor/database/columns/columns.component.html
@@ -11,14 +11,9 @@
-
-
- Add Column
- Save
-
-
@@ -33,10 +28,10 @@
Text
Number
Paragraph
- True/False
+ Boolean
+ Select
-
@@ -49,6 +44,41 @@
+
+
+ Label Type
+
+ True/False
+ Yes/No
+ 1/0
+
+
+
+
+ Add Option
+
+
+
+
+ Value
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add Column
+ Save
+
+
diff --git a/src/app/components/editor/database/columns/columns.component.scss b/src/app/components/editor/database/columns/columns.component.scss
index e69de29..b6fbfdf 100644
--- a/src/app/components/editor/database/columns/columns.component.scss
+++ b/src/app/components/editor/database/columns/columns.component.scss
@@ -0,0 +1,6 @@
+.column-def {
+ border: 2px solid #ccc;
+ margin: 5px;
+ padding: 5px;
+ border-radius: 7px;
+}
diff --git a/src/app/components/editor/database/columns/columns.component.ts b/src/app/components/editor/database/columns/columns.component.ts
index aa4255c..e8be5a9 100644
--- a/src/app/components/editor/database/columns/columns.component.ts
+++ b/src/app/components/editor/database/columns/columns.component.ts
@@ -7,7 +7,7 @@ import {ModalController} from '@ionic/angular';
styleUrls: ['./columns.component.scss'],
})
export class ColumnsComponent implements OnInit {
- @Input() columnSets: Array<{headerName: string, field: string, Type: string}> = [];
+ @Input() columnSets: Array<{headerName: string, field: string, Type: string, additionalData: any}> = [];
constructor(
protected modals: ModalController
@@ -16,7 +16,21 @@ export class ColumnsComponent implements OnInit {
ngOnInit() {}
onAddColumnClick() {
- this.columnSets.push({headerName: '', field: '', Type: ''});
+ this.columnSets.push({headerName: '', field: '', Type: '', additionalData: {}});
+ }
+
+ onAddOption(i) {
+ const set = this.columnSets[i];
+ if ( !Array.isArray(set.additionalData.options) ) {
+ set.additionalData.options = [];
+ }
+
+ set.additionalData.options.push({value: ''});
+ }
+
+ onDeleteOptionClick(i, n) {
+ const set = this.columnSets[i];
+ set.additionalData.options = set.additionalData.options.filter((x, index) => index !== n);
}
dismissModal(doSave = true) {
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index a3f9ed4..dbbb572 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -8,6 +8,7 @@ import {AgGridAngular} from 'ag-grid-angular';
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';
@Component({
selector: 'editor-database',
@@ -208,6 +209,8 @@ export class DatabaseComponent implements OnInit {
x.cellEditorFramework = ParagraphEditorComponent;
} else if ( x.Type === 'boolean' ) {
x.cellEditorFramework = BooleanEditorComponent;
+ } else if ( x.Type === 'select' ) {
+ x.cellEditorFramework = SelectEditorComponent;
}
console.log({x});
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 b633757..eafbb55 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
@@ -16,11 +16,21 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
private params: ICellEditorParams;
public value: string;
+ protected trueValue = 'True';
+ protected falseValue = 'False';
+ protected emptyValue = '';
+
@ViewChild('input', {static: false}) input: ElementRef;
agInit(params: ICellEditorParams): void {
this.params = params;
this.value = this.params.value;
+ console.log('bool params', {params});
+
+ // @ts-ignore
+ const values = params.colDef.additionalData.labelType.split('_');
+ this.trueValue = values[0].charAt(0).toUpperCase() + values[0].slice(1);
+ this.falseValue = values[1].charAt(0).toUpperCase() + values[1].slice(1);
}
getValue(): any {
@@ -32,12 +42,12 @@ export class BooleanEditorComponent implements ICellEditorAngularComp, AfterView
}
onClick() {
- if ( this.value === 'True' ) {
- this.value = 'False';
- } else if ( this.value === 'False' ) {
- this.value = '';
+ if ( this.value === this.trueValue ) {
+ this.value = this.falseValue;
+ } else if ( this.value === this.falseValue ) {
+ this.value = this.emptyValue;
} else {
- this.value = 'True';
+ this.value = this.trueValue;
}
}
}
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
new file mode 100644
index 0000000..169e431
--- /dev/null
+++ b/src/app/components/editor/database/editors/select/select-editor.component.ts
@@ -0,0 +1,41 @@
+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-paragraph',
+ template: `
+
+ {{ option.value }}
+
+ `,
+ styles: [
+ `input {
+ width: 100%;
+ border: 1px solid grey;
+ }`
+ ],
+})
+export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+ private 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();
+ }
+}