mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 14:07:50 +00:00
[Forms] Add composite control type
Add a type for composite controls, to allow populating arrays (e.g. preferred size). WTD-593.
This commit is contained in:
parent
3d95c8b744
commit
363a6f6b47
@ -13,43 +13,47 @@
|
||||
"model": { "composition": [] },
|
||||
"properties": [
|
||||
{
|
||||
"label": "Preferred Size",
|
||||
"control": "_textfields",
|
||||
"values": [
|
||||
"name": "Preferred Size",
|
||||
"control": "composite",
|
||||
"items": [
|
||||
{
|
||||
"label": "Width (px)",
|
||||
"name": "Width (px)",
|
||||
"control": "textfield",
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$"
|
||||
},
|
||||
{
|
||||
"label": "Height (px)",
|
||||
"name": "Height (px)",
|
||||
"control": "textfield",
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$"
|
||||
}
|
||||
],
|
||||
"key": "preferredSize",
|
||||
"property": "preferredSize",
|
||||
"conversion": "number[]"
|
||||
},
|
||||
{
|
||||
"label": "Layout Grid",
|
||||
"control": "_textfields",
|
||||
"values": [
|
||||
"name": "Layout Grid",
|
||||
"control": "composite",
|
||||
"items": [
|
||||
{
|
||||
"label": "Horizontal grid (px)",
|
||||
"name": "Horizontal grid (px)",
|
||||
"control": "textfield",
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$"
|
||||
},
|
||||
{
|
||||
"label": "Vertical grid (px)",
|
||||
"name": "Vertical grid (px)",
|
||||
"control": "textfield",
|
||||
"pattern": "^(\\d*[1-9]\\d*)?$"
|
||||
}
|
||||
],
|
||||
"key": "layoutGrid",
|
||||
"property": "layoutGrid",
|
||||
"conversion": "number[]"
|
||||
},
|
||||
{
|
||||
"label": "Default View",
|
||||
"control": "_select",
|
||||
"values": [
|
||||
"Plot",
|
||||
"Scrolling"
|
||||
"name": "Default View",
|
||||
"control": "select",
|
||||
"options": [
|
||||
{ "name": "Plot", "value": "plot" },
|
||||
{ "name": "Scrolling", "value": "scrolling" }
|
||||
],
|
||||
"comment": "TODO: Infer values from type",
|
||||
"key": "defaultView"
|
||||
|
@ -29,6 +29,10 @@
|
||||
{
|
||||
"key": "textfield",
|
||||
"templateUrl": "templates/controls/textfield.html"
|
||||
},
|
||||
{
|
||||
"key": "composite",
|
||||
"templateUrl": "templates/controls/composite.html"
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
|
13
platform/forms/res/templates/controls/composite.html
Normal file
13
platform/forms/res/templates/controls/composite.html
Normal file
@ -0,0 +1,13 @@
|
||||
<ng-form name="mctFormItem" ng-repeat="item in structure.items">
|
||||
<mct-control key="item.control"
|
||||
ng-model="ngModel[field]"
|
||||
ng-required="item.required"
|
||||
ng-pattern="ngPattern"
|
||||
options="item.options"
|
||||
structure="row"
|
||||
field="$index">
|
||||
</mct-control>
|
||||
<span class="composite-control-label">
|
||||
{{item.name}}
|
||||
</span>
|
||||
</ng-form>
|
@ -7,46 +7,33 @@
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<ng-form name="mctFormInner" ng-repeat="row in section.rows">
|
||||
<div class="form-row validates"
|
||||
ng-class="{
|
||||
req: row.required,
|
||||
valid: mctFormInner.$dirty && mctFormInner.$valid,
|
||||
invalid: mctFormInner.$dirty && !mctFormInner.$valid
|
||||
}">
|
||||
<div class="form-row validates"
|
||||
ng-class="{
|
||||
req: row.required,
|
||||
valid: mctFormInner.$dirty && mctFormInner.$valid,
|
||||
invalid: mctFormInner.$dirty && !mctFormInner.$valid
|
||||
}">
|
||||
|
||||
<div class='label' title="{{row.description}}">
|
||||
{{row.name}}
|
||||
<span ng-if="row.description"
|
||||
class="ui-symbol">
|
||||
i
|
||||
</span>
|
||||
</div>
|
||||
<div class='controls'>
|
||||
<div class="wrapper" ng-if="row.control">
|
||||
<mct-control key="row.control"
|
||||
ng-model="ngModel"
|
||||
ng-required="row.required"
|
||||
ng-pattern="getRegExp(row.pattern)"
|
||||
options="row.options"
|
||||
structure="row"
|
||||
field="row.key">
|
||||
</mct-control>
|
||||
<div class='label' title="{{row.description}}">
|
||||
{{row.name}}
|
||||
<span ng-if="row.description"
|
||||
class="ui-symbol">
|
||||
i
|
||||
</span>
|
||||
</div>
|
||||
<div ng-repeat="item in row.items" class="validates">
|
||||
<ng-form name="mctFormItem">
|
||||
<mct-control key="item.control"
|
||||
<div class='controls'>
|
||||
<div class="wrapper" ng-if="row.control">
|
||||
<mct-control key="row.control"
|
||||
ng-model="ngModel"
|
||||
ng-required="item.required"
|
||||
ng-pattern="getRegExp(item.pattern)"
|
||||
options="item.options"
|
||||
ng-required="row.required"
|
||||
ng-pattern="getRegExp(row.pattern)"
|
||||
options="row.options"
|
||||
structure="row"
|
||||
field="item.key">
|
||||
field="row.key">
|
||||
</mct-control>
|
||||
{{item.name}}
|
||||
</ng-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-form>
|
||||
</div>
|
||||
</span>
|
||||
|
Loading…
Reference in New Issue
Block a user