[Forms] Bring in initial work on forms

Bring in previous work on the forms component; this includes
transitioned versions of specific form elements, and the
mct-form direction which generates these. WTD-530
This commit is contained in:
Victor Woeltjen 2014-11-26 08:01:00 -08:00
parent 0bacc03e58
commit 695ca5c0cf
10 changed files with 168 additions and 0 deletions

View File

@ -0,0 +1,42 @@
{
"name": "MCT Forms",
"description": "Form generator; includes directive and some controls.",
"extensions": {
"directives": [
{
"key": "mctForm",
"implementation": "MCTForm.js"
}
],
"templates": [
{
"key": "_checkbox",
"templateUrl": "templates/_checkbox.html"
},
{
"key": "_checkboxes",
"templateUrl": "templates/_checkboxes.html"
},
{
"key": "_datetime",
"templateUrl": "templates/_datetime.html"
},
{
"key": "_select",
"templateUrl": "templates/_select.html"
},
{
"key": "_selects",
"templateUrl": "templates/_selects.html"
},
{
"key": "_textfield",
"templateUrl": "templates/_textfield.html"
},
{
"key": "_textfields",
"templateUrl": "templates/_textfields.html"
}
]
}
}

View File

@ -0,0 +1,6 @@
<div ng-controller="LayoutFormController">
<label class="checkbox custom no-text">
<input type="checkbox" ng-model="data.formValue[id]">
<em>&nbsp;</em>
</label>
</div>

View File

@ -0,0 +1,24 @@
<div ng-controller="LayoutFormController">
<div id='_form_control_datetime' class='form-control complex datetime'>
<div class='field-hints'>
<span class='hint date'>Date</span>
<span class='hint time sm'>Hour</span>
<span class='hint time sm'>Min</span>
<span class='hint time sm'>Sec</span>
<span class='hint timezone'>Timezone</span>
</div>
<div class='fields'>
<span class='field control date'><input type='text' name='date' /></span>
<span class='field control time sm'><input type='text' name='hour' maxlength='2' /></span>
<span class='field control time sm'><input type='text' name='min' maxlength='2' /></span>
<span class='field control time sm'><input type='text' name='sec' maxlength='2' /></span>
<span class='field control timezone'>
<select class='form-control input select' ng-model="data.formValue[id].option" ng-options="o.name for o in data.formValue[id].options">
<option value="">- Select One -</option>
<span class='ui-symbol arw colorKey'>v</span>
</select>
</span>
</div>
</div>
</div>

View File

@ -0,0 +1,7 @@
<div ng-controller="LayoutFormController">
<select class='form-control input select' ng-model="data.formValue[id].option"
ng-options="o.name for o in data.formValue[id].options">
<option value="">- Select One -</option>
<span class='ui-symbol arw colorKey'>v</span>
</select>
</div>

View File

@ -0,0 +1,5 @@
<div>
{#processedValues}
{#view key="_select"/}
{/processedValues}
</div>

View File

@ -0,0 +1,8 @@
<div ng-controller="LayoutFormController">
<span class='form-control shell'>
<span class='field control'>
<input type="text" ng-model="data.formValue[id]">
</span>
</span>
</div>

View File

@ -0,0 +1,38 @@
<b>{{structure.name}}</b>
<div class="form">
<span ng-repeat="section in structure.sections">
<div class="section-header">{{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>
{{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>
</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>

View File

@ -0,0 +1,7 @@
<div ng-controller="LayoutFormController">
<div>
{#processedValues}
{#view key="_textfield"/} {label}
{/processedValues}
</div>
</div>

View File

@ -0,0 +1,31 @@
/*global define,Promise*/
/**
* Module defining MCTForm. Created by vwoeltje on 11/10/14.
*/
define(
[],
function () {
"use strict";
/**
*
* @constructor
*/
function MCTForm() {
var templatePath = [
"platform/forms", //MCTForm.bundle.path,
"res", //MCTForm.bundle.resources,
"templates/form.html"
].join("/");
return {
restrict: "E",
templateUrl: templatePath,
scope: { structure: "=", model: "=ngModel" }
};
}
return MCTForm;
}
);