Add support for type: array

Author: zackbloom

dist/bootstrap-decorator.min.js

@@ -4,6 +4,7 @@ angular.module('schemaForm').config(['schemaFormDecoratorsProvider',function(dec
  decoratorsProvider.createDecorator('bootstrapDecorator',{
  textarea: base+'textarea.html',
  fieldset: base+'fieldset.html',
+ list: base+'list.html',
  tabs: base+'tabs.html',
  section: base+'section.html',
  conditional: base+'section.html',
@@ -54,4 +55,81 @@ angular.module('schemaForm').config(['schemaFormDecoratorsProvider',function(dec
  scope.title = scope.$eval(attrs.title);
  }
  };
+}).directive('sfList',function(){
+ return {
+ templateUrl: 'directives/decorators/bootstrap/list-body.html',
+
+ link: function(scope,element,attrs) {
+ scope.model[scope.form.item.key] = scope.model[scope.form.item.key] || [];
+ scope.value = scope.model[scope.form.item.key];
+ scope.renderedValue = angular.copy(scope.value);
+
+ var storedValue = null;
+ scope.$on('change', function(evt, val){
+ var index = findElement(element[0], val.element[0]);
+
+ if (index == -1){
+ // The add input
+ storedValue = val.value;
+ } else {
+ scope.value[index] = val.value;
+ }
+ });
+
+ scope.$on('remove', function(evt, val){
+ var index = findElement(element[0], val.element[0]);
+
+ scope.value.splice(index, 1);
+ scope.renderedValue.splice(index, 1);
+ val.element[0].parentNode.removeChild(val.element[0]);
+ });
+
+ scope.add = function(){ 
+ scope.renderedValue.push(storedValue);
+ scope.value.push(storedValue);
+ };
+ }
+ }
+}).directive('sfListItem',function(){
+ return {
+ scope: {
+ 'form': '=',
+ 'value': '='
+ },
+
+ templateUrl: 'directives/decorators/bootstrap/list-item.html',
+
+ link: function(scope,element,attrs) {
+ scope.form.item.key = 'value';
+ scope.model = {
+ value: scope.value
+ };
+
+ scope.$watch('model', function(val){
+ scope.$emit('change', {
+ value: val.value,
+ element: element
+ });
+ }, true);
+
+ scope.remove = function() {
+ scope.$emit('remove', {
+ element: element
+ });
+ };
+ }
+ }
 });
+
+function findElement(parentEl, element){
+ var els = parentEl.querySelectorAll('[sf-list-item]');
+ for (var i=0; i < els.length; i++){
+ if (els[i].isEqualNode(element)){
+ if (els[i].tagName === 'DIV'){
+ return -1;
+ } else {
+ return i;
+ }
+ }
+ }
+}

dist/schema-form.min.js

@@ -0,0 +1,6 @@
+<ul>
+ <li ng-repeat="val in renderedValue" sf-list-item value="val" form="form"></li>
+</ul>
+
+<div sf-list-item form="form"></div>
+<a href ng-click="add()">Add</a>

src/directives/decorators/bootstrap/bootstrap-decorator.js

@@ -0,0 +1,4 @@
+<div>
+ <sf-decorator form="form.item"></sf-decorator>
+ <a href ng-click="remove()">Remove</a>
+</div>

src/directives/decorators/bootstrap/list-body.html

@@ -0,0 +1,2 @@
+<h3 ng-show="form.title">{{ form.title }}</h3>
+<div sf-list></div>

src/directives/decorators/bootstrap/list-item.html

@@ -108,7 +108,7 @@ function($compile, schemaForm, schemaFormDecorators){
  traverse(schema,function(prop,path){
  //This is probably not so fast, but a simple solution.
  if (angular.isDefined(prop['default'])) {
- scope.$eval('model.'+path+' = model.'+path+' || defaltValue',{ defaltValue: prop['default']});
+ scope.$eval('model.'+path+' = model.'+path+' || defaultValue',{ defaultValue: prop['default']});
  }
  });
 

src/directives/decorators/bootstrap/list.html

@@ -148,15 +148,37 @@ angular.module('schemaForm').provider('schemaForm',[function(){
 
  };
 
+ var list = function(name,schema,options){
+
+ if (schema.type === "array") {
+ var f = stdFormObj(schema,options);
+ f.type = 'list';
+ f.key = options.path;
+ options.lookup[options.path] = f;
+
+ var required = schema.required && schema.required.indexOf(options.path) !== -1;
+
+ f.item = defaultFormDefinition(options.path,schema.items,{
+ path: options.path,
+ required: required || false,
+ lookup: options.lookup,
+ ignore: options.ignore
+ });
+
+ return f
+ }
+
+ };
+
  //First sorted by schema type then a list.
  //Order has importance. First handler returning an form snippet will be used.
  var defaults = {
  string: [ select, text ],
- object: [ fieldset],
+ object: [ fieldset ],
  number: [ number ],
  integer: [ integer ],
  boolean: [ checkbox ],
- array: [ checkboxes ]
+ array: [ list, checkboxes ]
  };
 
  var postProcessFn = function(form) { return form; };