Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Add new column types and editors

Browse Source
This commit is contained in:
garrettmills 2020-02-18 11:19:05 -06:00
parent 1bd3795a4a
commit 7916c7966f
7 changed files with 123 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/components.module.ts
View File

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

46
src/app/components/editor/database/columns/columns.component.html
View File

@ -11,14 +11,9 @@
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
<ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
</ion-col>
</ion-row>
<ion-row
*ngFor="let colSet of columnSets; let i = index"
class="column-def"
>
<ion-col size="5">
<ion-item>
@ -33,10 +28,10 @@
<ion-select-option value="text">Text</ion-select-option>
<ion-select-option value="number">Number</ion-select-option>
<ion-select-option value="paragraph">Paragraph</ion-select-option>
<ion-select-option value="boolean">True/False</ion-select-option>
<ion-select-option value="boolean">Boolean</ion-select-option>
<ion-select-option value="select">Select</ion-select-option>
<!-- <ion-select-option value="currency">Currency</ion-select-option>-->
<!-- <ion-select-option value="datetime">Date-Time</ion-select-option>-->
<!-- <ion-select-option value="select">Select</ion-select-option>-->
<!-- <ion-select-option value="multiselect">Multi-Select</ion-select-option>-->
<!-- <ion-select-option value="person">Person</ion-select-option>-->
<!-- <ion-select-option value="url">URL</ion-select-option>-->
@ -49,6 +44,41 @@
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="5" *ngIf="columnSets[i].Type === 'boolean'">
<ion-item>
<ion-label position="floating">Label Type</ion-label>
<ion-select interface="popover" [(ngModel)]="columnSets[i].additionalData.labelType">
<ion-select-option value="true_false">True/False</ion-select-option>
<ion-select-option value="yes_no">Yes/No</ion-select-option>
<ion-select-option value="1_0">1/0</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" *ngIf="columnSets[i].Type === 'select'">
<ion-button (click)="onAddOption(i)" fill="outline">Add Option</ion-button>
<ng-container *ngIf="columnSets[i].additionalData.options">
<ion-row *ngFor="let option of columnSets[i].additionalData.options; let n = index">
<ion-col size="10">
<ion-item>
<ion-label position="floating">Value</ion-label>
<ion-input [(ngModel)]="columnSets[i].additionalData.options[n].value"></ion-input>
</ion-item>
</ion-col>
<ion-col size="2">
<ion-button fill="outline" color="light" (click)="onDeleteOptionClick(i, n)">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ng-container>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer>
<ion-buttons>
<ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
<ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
</ion-buttons>
</ion-footer>

6
src/app/components/editor/database/columns/columns.component.scss
View File

@ -0,0 +1,6 @@
.column-def {
border: 2px solid #ccc;
margin: 5px;
padding: 5px;
border-radius: 7px;
}

18
src/app/components/editor/database/columns/columns.component.ts
View File

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

3
src/app/components/editor/database/database.component.ts
View File

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

20
src/app/components/editor/database/editors/boolean/boolean-editor.component.ts
View File

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

41
src/app/components/editor/database/editors/select/select-editor.component.ts Normal file
View File

@ -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: `
<ion-select #select [(ngModel)]="value" style="padding: 0;"
[interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}">
<ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
</ion-select>
`,
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();
}
}