Spring/spring-flo
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Properties dialog components polish and styling

Browse Source
This commit is contained in:
BoykoAlex
2017-08-30 14:52:48 -04:00
parent 4ddc1275c0
commit 8b32463336
6 changed files with 115 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/demo/app/app.component.css
View File

@@ -189,3 +189,24 @@ textarea:input:focus {
.dnd-target-feedback .connection {
animation: flash-stroke-width 2s linear infinite;
}
.properties-group-container .property-row {
display: block;
}
.df-property-row {
width: 100%;
display:inline-table;
}
.df-property-label-cell {
width: 50%;
}
.df-property-container {
width: 100%
}
.df-property-control {
width: 100%;
}

37
src/demo/app/editor.ts
View File

@@ -59,7 +59,7 @@ export class Editor implements Flo.Editor {
// }, Flo.PropertiesForm.InputType.TEXT));
// bsModalRef.content.addControlModels(models);
// });
bsModalRef.content.propertiesGroupModel = new Properties.PropertiesGroupModel(cell);
bsModalRef.content.propertiesGroupModel = new SamplePropertiesGroupModel(cell);
}
validatePort(context : Flo.EditorContext, view : dia.ElementView, magnet : SVGElement) {
@@ -553,3 +553,38 @@ export class Editor implements Flo.Editor {
}
}
class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel {
protected createControlModel(property : Properties.Property) : Properties.ControlModel<any> {
let inputType = Properties.InputType.TEXT;
switch (property.metadata.type) {
case 'number':
inputType = Properties.InputType.NUMBER;
break;
case 'url':
inputType = Properties.InputType.URL;
break;
case 'password':
inputType = Properties.InputType.PASSWORD;
break;
case 'boolean':
inputType = Properties.InputType.CHECKBOX;
break;
case 'number':
inputType = Properties.InputType.EMAIL;
break;
case 'enum':
if (Array.isArray(property.metadata.options)) {
return new Properties.SelectControlModel(property, Properties.InputType.SELECT, (<Array<string>> property.metadata.options).map(o => {
return {
name: o,
value: o === property.defaultValue ? undefined : o
}
}));
}
default:
break;
}
return new Properties.GenericControlModel(property, inputType);
}
}

11
src/demo/app/metamodel.ts
View File

@@ -5,12 +5,17 @@ import { convertTextToGraph } from './text-to-graph';
const metamodelData: Array<RawMetadata> = [{
name: 'http', group: 'source', description: 'Receive HTTP input',
properties: [
{id: 'port', name: 'port', defaultValue: '80', description: 'Port on which to listen'}
{id: 'port', name: 'port', defaultValue: '80', description: 'Port on which to listen', type: 'number'}
],
}, {
name: 'rabbit', group: 'source', description: 'Receives messages from RabbitMQ',
properties: [
{id: 'queue', name: 'queue', description: 'the queue(s) from which messages will be received'}
{id: 'queue', name: 'queue', description: 'the queue(s) from which messages will be received'},
{id: 'time-unit', name: 'time-unit', description: 'Time unit for heart beat messages', type: 'enum', options: ['HOURS', 'MINUTES', 'SECONDS', 'MILIOSECONDS'], defaultValue: 'SECONDS'},
{id: 'heart-beat', name: 'heart-beat', description: 'Heart beat on/off', type: 'boolean', defaultValue: false},
{id: 'interval', name: 'interval', description: 'Time period being consecutive heart beat messages', type: 'number', defaultValue: 20},
{id: 'url', name: 'url', description: 'Service URL', type: 'url'},
{id: 'password', name: 'password', description: 'Password to login to service', type: 'password'}
],
}, {
name: 'filewatch', group: 'source', description: 'Produce messages from the content of files created in a directory',
@@ -67,7 +72,7 @@ const metamodelData: Array<RawMetadata> = [{
name: 'ftp', group: 'sink', description: 'Send messages over FTP',
properties: [
{id: 'host', name: 'host', description: 'the host name for the FTP server'},
{id: 'port', name: 'port', description: 'The port for the FTP server'},
{id: 'port', name: 'port', description: 'The port for the FTP server', type: 'number'},
{id: 'remoteDir', name: 'remoteDir', description: 'The remote directory on the server'},
],
}];

47
src/lib/src/properties/df.property.component.html
View File

@@ -1,21 +1,42 @@
<div [formGroup]="form">
<tr [formGroup]="form" class="df-property-row">
<label [attr.for]="model.id" class="df-form-label">{{model.name}}</label>
<td class="df-property-label-cell">
<label [attr.for]="model.id" class="df-form-label">{{model.name}}</label>
</td>
<div [ngSwitch]="model.type" class="df-property-container">
<td class="df-property-control-cell">
<div [ngSwitch]="model.type" class="df-property-container">
<label *ngSwitchCase="types.CHECKBOX" class="df-property-checkbox">
<input type="checkbox" [id]="model.id" [(ngModel)]="model.value" [formControlName]="model.id">
{{model.value ? 'True' : 'False' }}
</label>
<label *ngSwitchCase="types.CHECKBOX" class="df-property-control">
<input type="checkbox" [id]="model.id" [(ngModel)]="model.value" [formControlName]="model.id">
{{model.value ? 'True' : 'False' }}
</label>
<input *ngSwitchDefault class="df-property-text" type="text" [id]="model.id" [formControlName]="model.id" [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
<input *ngSwitchCase="types.NUMBER" class="df-property-control" type="number" [id]="model.id"
[formControlName]="model.id" [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
</div>
<input *ngSwitchCase="types.PASSWORD" class="df-property-control" type="password" [id]="model.id"
[formControlName]="model.id" [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" *ngIf="!control.valid"></span>
<p class="help-block">{{model.description}}</p>
<p *ngFor="let e of errorData" class="validation-error-block">{{e.message}}</p>
<input *ngSwitchCase="types.EMAIL" class="df-property-control" type="password" [id]="model.id"
[formControlName]="model.id" [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
</div>
<input *ngSwitchCase="types.URL" class="df-property-control" type="url" [id]="model.id"
[formControlName]="model.id" [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
<select *ngSwitchCase="types.SELECT" class="df-property-control" [id]="model.id"
[formControlName]="model.id" [(ngModel)]="model.value">
<option *ngFor="let o of model.options" [ngValue]="o.value">{{o.name}}</option>
</select>
<input *ngSwitchDefault class="df-property-control" type="text" [id]="model.id" [formControlName]="model.id"
[placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
</div>
<span class="glyphicon glyphicon-warning-sign form-control-feedback" *ngIf="!control.valid"></span>
<p class="help-block">{{model.description}}</p>
<p *ngFor="let e of errorData" class="validation-error-block">{{e.message}}</p>
</td>
</tr>

4
src/lib/src/properties/properties.group.component.html
View File

@@ -1,5 +1,3 @@
<div *ngIf="propertiesGroupModel && !propertiesGroupModel.isLoading" class="properties-group-container" [formGroup]="form">
<div *ngFor="let model of propertiesGroupModel.getControlsModels()" class="form-row">
<df-property [model]="model" [form]="form"></df-property>
</div>
<df-property *ngFor="let model of propertiesGroupModel.getControlsModels()" [model]="model" [form]="form" class="property-row"></df-property>
</div>

16
src/lib/src/shared/flo.properties.ts
View File

@@ -10,6 +10,7 @@ export namespace Properties {
NUMBER,
SELECT,
CHECKBOX,
PASSWORD,
EMAIL,
URL,
CODE
@@ -22,6 +23,12 @@ export namespace Properties {
description? : string;
defaultValue? : any;
value? : any;
readonly metadata : Flo.PropertyMetadata;
}
export interface SelectOption {
name: string;
value: any;
}
export interface ErrorData {
@@ -86,6 +93,12 @@ export namespace Properties {
}
export class SelectControlModel extends GenericControlModel<any> {
constructor(_property : Property, type : InputType, public options : Array<SelectOption>) {
super(_property, type);
}
}
export class PropertiesGroupModel {
protected cell : dia.Cell;
@@ -133,7 +146,8 @@ export namespace Properties {
defaultValue: metadata.defaultValue,
attr: `props/${metadata.name}`,
value: this.cell.attr(`props/${metadata.name}`),
description: metadata.description
description: metadata.description,
metadata: metadata
}
}