Checkboxes type

Schema with type "array" and a enum defaults to a list of checkboxes.
Any array can also be overiden in from definition to show a list
of checkboxes.

Author: davidlgj

src/bootstrap-example.html

@@ -90,6 +90,16 @@ <h3>Model</h3>
           }
         }
       },
+      "things": {
+        "type": "array",
+        "title": "I like...",
+        "items": {
+          "type": "string",
+          "enum": [
+            "clowns","compiling","sleeping"
+          ]
+        }
+      },
       "soul": {
         "title": "Terms Of Service",
         "description": "I agree to sell my undying soul",

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

@@ -19,6 +19,9 @@ function($parse,  $compile,  $http,  $templateCache){
       if (form.type  === 'checkbox') {
         return 'directives/decorators/bootstrap/checkbox.html';
       }
+      if (form.type  === 'checkboxes') {
+        return 'directives/decorators/bootstrap/checkboxes.html';
+      }
       if (form.type  === 'number') {
         return 'directives/decorators/bootstrap/default.html';
       }
@@ -46,7 +49,7 @@ function($parse,  $compile,  $http,  $templateCache){
         //We do this manually since we need to bind ng-model properly and also
         //for fieldsets to recurse properly.
         $http.get(templateUrl(form),{ cache: $templateCache }).then(function(res){
-          var template = res.data.replace('$$value$$','model.'+form.key);
+          var template = res.data.replace(/\$\$value\$\$/g,'model.'+form.key);
           $compile(template)(scope,function(clone){
             element.replaceWith(clone);
           });
@@ -58,6 +61,16 @@ function($parse,  $compile,  $http,  $templateCache){
       scope.showTitle = function() {
         return scope.form && scope.form.notitle !== true && scope.form.title;
       };
+
+      scope.checkboxValuesToList = function(values){
+        var lst = [];
+        angular.forEach(values,function(v,k){
+          if (v) {
+            lst.push(k);
+          }
+        });
+        return lst;
+      };
     }
   };
 }]);

src/directives/decorators/bootstrap/checkbox.html

@@ -1,5 +1,5 @@
 <div class="checkbox" ng-class="{'has-error': hasError()}">
-  <label ng-show="showTitle()">
+  <label>
     <input type="checkbox" ng-model="$$value$$" schema-validate="form.schema" ng-required="form.required">
     {{form.title}}
   </label>

src/directives/decorators/bootstrap/checkboxes.html

@@ -0,0 +1,10 @@
+<div class="form-group" ng-class="{'has-error': hasError()}" ng-init="checkboxValues = {}">
+  <label ng-show="showTitle()">{{form.title}}</label>
+  <div class="checkbox" ng-repeat="(value,name) in form.titleMap" >
+    <label>
+      <input type="checkbox" ng-model="checkboxValues[value]" ng-change="$$value$$ = checkboxValuesToList(checkboxValues)" >
+      {{name}}
+    </label>
+  </div>
+  <span class="help-block" ng-show="form.description">{{form.description}}</span>
+</div>

src/services/schema-form.js

@@ -113,6 +113,20 @@ angular.module('schemaForm').factory('schemaForm',[function(){
     }
   };
 
+  var checkboxes = function(name,schema,options) {
+    if (schema.type === 'array' && schema.items && schema.items.enum) {
+      var f = stdFormObj(schema,options);
+      f.key  = options.path;
+      f.type = 'checkboxes';
+      f.titleMap = {};
+      schema.items.enum.forEach(function(name){
+        f.titleMap[name] = name;
+      });
+      options.lookup[options.path] = f;
+      return f;
+    }
+  };
+
   var fieldset = function(name,schema,options){
 
     if (schema.type === "object") {
@@ -152,7 +166,8 @@ angular.module('schemaForm').factory('schemaForm',[function(){
     fieldset,
     number,
     integer,
-    bool
+    bool,
+    checkboxes
   ];
 
 

test/schema-form-test.js

@@ -469,6 +469,44 @@ describe('Schema form',function(){
     });
 
 
+    it('should generate checkboxes for arrays with enums',function(){
+
+      inject(function($compile,$rootScope){
+        var scope = $rootScope.$new();
+        scope.person = {};
+
+        scope.schema = {
+          "type": "object",
+          "properties": {
+            "names": {
+              "type": "array",
+              "items": {
+                "type": "string",
+                "enum": ["foo","bar"]
+              }
+            },
+            "foobars": {
+              "type": "array"
+            }
+          }
+        };
+
+        scope.form = [
+          "names",
+          { key: "foobars", type: "checkboxes", titleMap:{ 'foo':'Foo','bar':'Bar'}}
+        ];
+
+        var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+        $compile(tmpl)(scope);
+        $rootScope.$apply();
+
+        //TODO: more asserts
+        tmpl.children().length.should.be.equal(2);
+        tmpl.children().eq(0).find('input[type=checkbox]').length.should.be.eq(2);
+        tmpl.children().eq(1).find('input[type=checkbox]').length.should.be.eq(2);
+      });
+    });
   });