Merge branch 'array' of https://github.com/EagerIO/angular-schema-form into EagerIO-array

Conflicts:
	dist/bootstrap-decorator.min.js

Author: davidlgj

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,125 @@ 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) {
+      var key = scope.form.items.key;
+      var value = getNested(scope.model, key) || [];
+      setNested(scope.model, key, value);
+
+      scope.value = value;
+      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;
+          setNested(scope.model, key, scope.value);
+        }
+      });
+
+      scope.$on('remove', function(evt, val){
+        var index = findElement(element[0], val.element[0]);
+
+        scope.renderedValue.splice(index, 1);
+
+        scope.value.splice(index, 1);
+        setNested(scope.model, key, scope.value);
+        val.element[0].parentNode.removeChild(val.element[0]);
+      });
+
+      scope.add = function(){ 
+        scope.renderedValue.push(storedValue);
+
+        scope.value.push(storedValue);
+        setNested(scope.model, key, scope.value);
+
+        scope.$broadcast('add');
+      };
+    }
+  }
+}).directive('sfListItem',function(){
+  return {
+    scope: {
+      'form': '=',
+      'value': '=',
+      'newEntry': '@'
+    },
+
+    templateUrl: 'directives/decorators/bootstrap/list-item.html',
+
+    link: function(scope,element,attrs) {
+      var initialValue = angular.copy(scope.value);
+
+      scope.form.items.key = 'value';
+      scope.model = {
+        value: scope.value
+      };
+
+      scope.$watch('model', function(val){
+        scope.$emit('change', {
+          value: val.value,
+          element: element
+        });
+      }, true);
+
+
+      scope.$on('add', function(){
+        if (scope.newEntry){
+          scope.model.value = initialValue;
+        }
+      });
+
+      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;
+      }
+    }
+  }
+}
+
+function setNested(obj, key, value){
+  var bits = key.split('.');
+  for (var i=0; i < bits.length - 1; i++){
+    if (!obj[bits[i]])
+      obj[bits[i]] = {};
+
+    obj = obj[bits[i]];
+  }
+
+  obj[bits[bits.length - 1]] = value;
+}
+
+function getNested(obj, key){
+  var bits = key.split('.');
+  for (var i=0; i < bits.length; i++){
+    obj = obj[bits[i]];
+
+    if (!obj){
+      return undefined;
+    }
+  }
+  return obj;
+}

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" new-entry="true"></div>
+<a href ng-click="add()">Add</a>

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

@@ -0,0 +1,4 @@
+<div>
+  <sf-decorator form="form.items"></sf-decorator>
+  <a href ng-click="remove()" ng-if="!newEntry">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.items = 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:   [ checkboxes, list ]
   };
 
   var postProcessFn = function(form) { return form; };