[Forms] Initial minimal functionality

Initial minimal working implementation where a
two-way binding between form and form user is
observable.

Notably, change ng-options to options, since
ng-options is terminal (it breaks mct-control).

WTD-530

platform/forms/bundle.json

@@ -6,6 +6,17 @@
             {
                 "key": "mctForm",
                 "implementation": "MCTForm.js"
+            },
+            {
+                "key": "mctControl",
+                "implementation": "MCTControl.js",
+                "depends": [ "controls[]" ]
+            }
+        ],
+        "controls": [
+            {
+                "key": "checkbox",
+                "templateUrl": "templates/controls/checkbox.html"
             }
         ],
         "templates": [

platform/forms/res/templates/controls/checkbox.html

@@ -0,0 +1,7 @@
+<label class="checkbox custom no-text">
+    <input type="checkbox"
+           name="{{name}}"
+           ng-model="ngModel[name]"
+           ng-disabled="ngDisabled">
+    <em>&nbsp;</em>
+</label>

platform/forms/res/templates/form.html

@@ -1,38 +1,42 @@
-<b>{{structure.name}}</b>
+<form name="{{structure.key}}">
+
 <div class="form">
     <span ng-repeat="section in structure.sections">
-        <div class="section-header">{{section.name}}</div>
+        <div class="section-header" ng-if="section.name">
+            {{section.name}}
+        </div>
         <div class="form-section">
-            <!--<div ng-repeat="row in section.rows" class="form-row validates">-->
-                <!--<div class='label'>{{row.name}}</div>-->
-                <!--<div class='controls {cssclass}'>-->
-                    <!--<div class="wrapper">-->
-                        <!--&lt;!&ndash;{{row.control}} - {{model[row.key]}}&ndash;&gt;-->
-                        <!--<span class="ui-symbol req" ng-show="row.required">*</span>-->
-                        <!--<mct-include key="row.control" ng-model="model[row.key]"></mct-include>-->
-                    <!--</div>-->
-                <!--</div>-->
-            <!--</div>-->
-            <div ng-repeat="row in section.rows" class="form-row validates">
-                <div class='label'>{{row.name}}</div>
-                <div class='controls {cssclass}'>
-                    <div ng-repeat="item in row.items" class="validates">
+            <div ng-repeat="row in section.rows"
+                 class="form-row validates"
+                 ng-class="{ required: row.required }">
 
-                        <div>
-                            {{item.control}} | Item.Key={{item.key}} | model={{model[item.key]}}
-                            <span class="ui-symbol req" ng-show="item.required">*</span>
-                            <mct-include key="item.control" ng-model="model[item.key]" id="item.key"></mct-include>
-                        </div>
+                <div class='label'>{{row.name}}</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="row.pattern"
+                                     options="row.options"
+                                     structure="row"
+                                     name="{{row.key}}">
+                        </mct-control>
+                    </div>
+                    <div ng-repeat="item in row.items" class="validates">
+                        <mct-control key="item.control"
+                                     ng-model="ngModel"
+                                     ng-required="item.required"
+                                     ng-pattern="item.pattern"
+                                     options="item.options"
+                                     structure="item"
+                                     name="{{item.key}}">
+                        </mct-control>
                     </div>
                 </div>
+
             </div>
         </div>
     </span>
-    <div class="form-section">
-        <div class="form-row" ng-if="structure.submit">
-            <a class='btn lg major' href=''>{{structure.submit}}</a>
-        </div>
-    </div>
-<span ng-click="model.foo='Foo'">CLICK!</span>
-<div>Model: {{model | json}}</div>
 </div>
+
+</form>

platform/forms/src/MCTControl.js

@@ -21,7 +21,9 @@ define(
             function controller($scope) {
                 $scope.$watch("key", function (key) {
                     // Pass the template URL to ng-include via scope.
-                    $scope.inclusion = controlMap[$scope.key];
+                    $scope.inclusion = controlMap[key];
+                    console.log(key);
+                    console.log($scope.inclusion);
                 });
             }
 
@@ -36,14 +38,35 @@ define(
                 // template path
                 template: '<ng-include src="inclusion"></ng-include>',
 
+                // ngOptions is terminal, so we need to be higher priority
+                priority: 1000,
+
                 // Pass through Angular's normal input field attributes
                 scope: {
+                    // Used to choose which form control to use
+                    key: "=",
+
+                    // The state of the form value itself
                     ngModel: "=",
-                    ngOptions: "=",
+
+                    // Enabled/disabled state
                     ngDisabled: "=",
-                    ngPattern: "="
+
+                    // Pattern (for input fields)
+                    ngPattern: "=",
+
+                    // Set of choices (if any)
+                    options: "=",
+
+                    // Structure (subtree of Form Structure)
+                    structure: "=",
+
+                    // Name, as in "<input name="...
+                    name: "@"
                 }
             };
         }
+
+        return MCTControl;
     }
 );

platform/forms/src/MCTForm.js

@@ -22,7 +22,7 @@ define(
             return {
                 restrict: "E",
                 templateUrl: templatePath,
-                scope: { structure: "=", model: "=ngModel" }
+                scope: { structure: "=", ngModel: "=ngModel" }
             };
         }