From 363a6f6b4762055c972f703fc6d675f874c890d4 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 3 Dec 2014 15:08:41 -0800
Subject: [PATCH] [Forms] Add composite control type

Add a type for composite controls, to allow populating
arrays (e.g. preferred size). WTD-593.
---
 platform/features/layout/bundle.json          | 38 +++++++------
 platform/forms/bundle.json                    |  4 ++
 .../res/templates/controls/composite.html     | 13 +++++
 platform/forms/res/templates/form.html        | 53 +++++++------------
 4 files changed, 58 insertions(+), 50 deletions(-)
 create mode 100644 platform/forms/res/templates/controls/composite.html

diff --git a/platform/features/layout/bundle.json b/platform/features/layout/bundle.json
index 7fb9b0f2bf..c29fe94f92 100644
--- a/platform/features/layout/bundle.json
+++ b/platform/features/layout/bundle.json
@@ -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"
diff --git a/platform/forms/bundle.json b/platform/forms/bundle.json
index be979e2f77..2954a8eeea 100644
--- a/platform/forms/bundle.json
+++ b/platform/forms/bundle.json
@@ -29,6 +29,10 @@
             {
                 "key": "textfield",
                 "templateUrl": "templates/controls/textfield.html"
+            },
+            {
+                "key": "composite",
+                "templateUrl": "templates/controls/composite.html"
             }
         ],
         "controllers": [
diff --git a/platform/forms/res/templates/controls/composite.html b/platform/forms/res/templates/controls/composite.html
new file mode 100644
index 0000000000..b9c217654f
--- /dev/null
+++ b/platform/forms/res/templates/controls/composite.html
@@ -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>
\ No newline at end of file
diff --git a/platform/forms/res/templates/form.html b/platform/forms/res/templates/form.html
index 5e5bbaef73..e2d6868263 100644
--- a/platform/forms/res/templates/form.html
+++ b/platform/forms/res/templates/form.html
@@ -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>