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

add multiselect editor, datetime editor, currency/datetime/boolean renderers, column reordering

Browse Source
This commit is contained in:
garrettmills
2020-02-19 01:12:59 -06:00
parent 1edd696bdb
commit 42f24914d5
15 changed files with 300 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@
<ion-input type="text" required [(ngModel)]="columnSets[i].headerName"></ion-input>
</ion-item>
</ion-col>
<ion-col size="5">
<ion-col size="4">
<ion-item>
<ion-label position="floating">Data Type</ion-label>
<ion-select interface="popover" [(ngModel)]="columnSets[i].Type">
@@ -30,19 +30,30 @@
<ion-select-option value="paragraph">Paragraph</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="multiselect">Multi-Select</ion-select-option>-->
<ion-select-option value="multiselect">Multi-Select</ion-select-option>
<ion-select-option value="datetime">Date-Time</ion-select-option>
<ion-select-option value="currency">Currency</ion-select-option>
<ion-select-option value="index">Incrementing Index</ion-select-option>
<!-- <ion-select-option value="person">Person</ion-select-option>-->
<!-- <ion-select-option value="url">URL</ion-select-option>-->
<!-- <ion-select-option value="email">E-Mail</ion-select-option>-->
</ion-select>
</ion-item>
</ion-col>
<ion-col size="2" align-items-center>
<ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
<ion-col size="3" align-items-center>
<ion-row>
<ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-row>
<ion-row>
<ion-button fill="outline" color="light" size="small" (click)="onUpArrow(i)">
<ion-icon color="dark" name="arrow-up"></ion-icon>
</ion-button>
<ion-button fill="outline" color="light" size="small" (click)="onDownArrow(i)">
<ion-icon color="dark" name="arrow-down"></ion-icon>
</ion-button>
</ion-row>
</ion-col>
<ion-col size="5" *ngIf="columnSets[i].Type === 'boolean'">
<ion-item>
@@ -54,7 +65,7 @@
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" *ngIf="columnSets[i].Type === 'select'">
<ion-col size="12" *ngIf="columnSets[i].Type === 'select' || columnSets[i].Type === 'multiselect'">
<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">
@@ -65,13 +76,45 @@
</ion-item>
</ion-col>
<ion-col size="2">
<ion-button fill="outline" color="light" (click)="onDeleteOptionClick(i, n)">
<ion-button fill="outline" color="light" size="small" (click)="onDeleteOptionClick(i, n)">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ng-container>
</ion-col>
<ion-col size="12" *ngIf="columnSets[i].Type === 'datetime'">
<ion-list>
<ion-radio-group value="YYYY-MM-DD h:mm a" [(ngModel)]="columnSets[i].additionalData.format">
<ion-list-header>Format</ion-list-header>
<ion-item>
<ion-label>Date Only</ion-label>
<ion-radio slot="start" value="YYYY-MM-DD"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Time Only</ion-label>
<ion-radio slot="start" value="h:mm a"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Both</ion-label>
<ion-radio slot="start" value="YYYY-MM-DD h:mm a"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-col>
<ion-col size="12" *ngIf="columnSets[i].Type === 'currency'">
<ion-item>
<ion-label position="floating">Currency</ion-label>
<ion-select [(ngModel)]="columnSets[i].additionalData.currency">
<ion-select-option value="USD">US Dollar</ion-select-option>
<ion-select-option value="EUR">Euro</ion-select-option>
<ion-select-option value="MXN">Mexican Peso</ion-select-option>
<ion-select-option value="CNY">Chinese Yuan</ion-select-option>
<ion-select-option value="XAG">Silver</ion-select-option>
<ion-select-option value="XAU">Gold</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>