Merge branch 'release/oncemoreuntothebreach'

Author: davidlgj

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-schema-form",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "authors": [
     "Textalk",
     "David Jensen <david.lgj@gmail.com>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-schema-form",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Create forms from a JSON schema",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

problem.txt

@@ -0,0 +1,54 @@
+
+
+
+Olika vägar frammåt:
+====================
+
+
+
+Problemställningen:
+-------------------
+json-form fixar en hel del validering, dels genom att läggapå attribut som
+min och max på input och dels genom att validera via en schema validtor.
+
+Jag tänkte undvika validatorn och köra "the angular way" genom att ha all validering
+i formuläret via HTML5 valideringar och directives som ng-pattern, ng-maxlength osv
+antagligen ett par egna.
+
+Hittils har algoritmen sett ut såhär:
+#1 schema => defaultForm,
+#2 defaultForm+form => finalForm
+#3 loopa finalForm och skapa html, dvs all info för validering i formuläret.
+
+Kruxet är att formulär definitionen i json form *inte* innehåller tillräckligt med valideringar
+(den innehåller några) utan jag måste lägga till form attribut för dem. (json form tar dem från
+schemat)
+
+tex så om schema innehåller "maxLength" attribut så sätts "maxlength" på input fältet, men om form
+definitionen innehåller "maxLength" (eller "maxlength" för den delen) så händer inget.
+
+I min algoritm ovan där form definitionen måste innehålla all info för generering av html och
+de attribut som styr upp validering så måste jag helt enkelt hitta på eget.
+
+Frågan är hur ska detta egna se ut?
+
+
+#1 Egna form attribut
+När det inte finns ngt form attribut i json forms defintion så skapar jag ett eget, t.ex. så skulle
+maxLength bara kopieras till form objektet.
++ minsta motståndets lag
+- kluddig lösning, motverkar lite att vara json form kompatibel
+- kan allt stödjas?
+
+
+#2 Eget schema directive
+Istället skapa ett eget directive som antingen validerar själv eller lägger till de attribut som
+behövs för att validera. Schemat fås genom require och ng-model värdet pekar ut vart i schemat.
+Kan möjligtvis implementeras med tv4.
++ snygg lösning
+- krångligt directive, måste ta hänsyn till om tex maximum, required osv redan satts via form
+definitionen.
+
+
+
+

src/bootstrap-example.html

@@ -18,8 +18,7 @@ <h1>Schema Form Example</h1>
   <div class="row">
     <div class="col-sm-6">
       <h3>The Generated Form</h3>
-      <form sf-model="person" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
-
+      <form name="ngform" sf-model="person" sf-form="form" sf-schema="schema" sf-decorator="{{decorator}}">
       </form>
     </div>
     <div class="col-sm-6">
@@ -51,11 +50,13 @@ <h3>Model</h3>
 
   $scope.schema =  {
     "type": "object",
+    "required": ['name','shoesize'],
     "properties": {
       "name": {
         "title": "Name",
         "description": "Gimme yea name lad",
         "type": "string",
+        "pattern": "^[^/]*$",
         "minLength": 2
       },
       "favorite": {
@@ -69,7 +70,8 @@ <h3>Model</h3>
       },
       "shoesize": {
         "title": "Shoe size",
-        "type": "number"
+        "default": 42,
+        "type": "number",
       },
       "attributes": {
         "type": "object",
@@ -88,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",
@@ -99,7 +111,13 @@ <h3>Model</h3>
 
   $scope.form = [
     '*',
-    { type: 'submit', title: 'Do It!'}
+    {
+      type: 'actions',
+      items: [
+        { type: 'submit', title: 'Do It!'},
+        { type: 'button', title: 'Noooooooooooo'}
+      ]
+    }
   ];
 
   $scope.decorator = 'bootstrap-decorator';

src/directives/decorators/bootstrap/actions.html

@@ -0,0 +1,8 @@
+<div class="btn-group">
+  <input ng-repeat-start="item in form.items"
+         type="submit"
+         class="btn btn-primary"
+         value="item.title"
+         ng-if="item.type === 'submit'">
+  <button ng-repeat-end class="btn btn-default" ng-if="item.type !== 'submit'">{{item.title}}</button>
+</div>

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

@@ -2,22 +2,39 @@ angular.module('schemaForm').directive('bootstrapDecorator',
        ['$parse','$compile','$http','$templateCache',
 function($parse,  $compile,  $http,  $templateCache){
 
-  var templateUrl = function(type) {
-      if (type  === 'fieldset') {
+  var templateUrl = function(form) {
+      //readonly is a special case
+      if (form.readonly && form.key && form.type !== 'fieldset') {
+        return 'directives/decorators/bootstrap/readonly.html';
+      }
+      if (form.type  === 'textarea') {
+        return 'directives/decorators/bootstrap/textarea.html';
+      }
+      if (form.type  === 'fieldset') {
         return 'directives/decorators/bootstrap/fieldset.html';
       }
-      if (type  === 'select') {
+      if (form.type  === 'section') {
+        return 'directives/decorators/bootstrap/section.html';
+      }
+      if (form.type  === 'actions') {
+        return 'directives/decorators/bootstrap/actions.html';
+      }
+      if (form.type  === 'select') {
         return 'directives/decorators/bootstrap/select.html';
       }
-      if (type  === 'checkbox') {
+      if (form.type  === 'checkbox') {
         return 'directives/decorators/bootstrap/checkbox.html';
       }
-      if (type  === 'number') {
-        return 'directives/decorators/bootstrap/number.html';
+      if (form.type  === 'checkboxes') {
+        return 'directives/decorators/bootstrap/checkboxes.html';
+      }
+      if (form.type  === 'number') {
+        return 'directives/decorators/bootstrap/default.html';
       }
-      if (type  === 'submit') {
+      if (form.type  === 'submit') {
         return 'directives/decorators/bootstrap/submit.html';
       }
+
       return 'directives/decorators/bootstrap/default.html';
   };
 
@@ -28,7 +45,6 @@ function($parse,  $compile,  $http,  $templateCache){
     replace: true,
     transclude: false,
     scope: true,
-
     link: function(scope,element,attrs) {
 
       //rebind our part of the form to the scope.
@@ -38,16 +54,30 @@ function($parse,  $compile,  $http,  $templateCache){
         //ok let's replace that template!
         //We do this manually since we need to bind ng-model properly and also
         //for fieldsets to recurse properly.
-        $http.get(templateUrl(form.type),{ cache: $templateCache }).then(function(res){
-          var template = res.data.replace('$$value$$','model.'+form.key);
+        $http.get(templateUrl(form),{ cache: $templateCache }).then(function(res){
+          var template = res.data.replace(/\$\$value\$\$/g,'model.'+form.key);
           $compile(template)(scope,function(clone){
             element.replaceWith(clone);
           });
         });
         once();
       });
-    }
 
+      //Keep error prone logic from the template
+      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,8 +1,8 @@
-<div class="checkbox">
-  <label ng-show="form.title">
-    <input type="checkbox" ng-model="$$value$$" schema-validate="form.schema">
+<div class="checkbox" ng-class="{'has-error': hasError()}">
+  <label>
+    <input type="checkbox" ng-model="$$value$$" schema-validate="form.schema" ng-required="form.required">
     {{form.title}}
   </label>
 
-  <span class="help-block" ng-show="form.description" >{{form.description}}</span>
+  <span class="help-block" ng-show="form.description">{{form.description}}</span>
 </div>

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/directives/decorators/bootstrap/default.html

@@ -1,6 +1,13 @@
-<div class="form-group" ng-class="{'has-error':ngModel.$invalid}">
-  <label ng-show="form.title">{{form.title}}</label>
-  <input type="text" class="form-control" name="" ng-model="$$value$$" schema-validate="form.schema">
-  <span class="help-block" ng-show="form.description && !ngModel.$invalid">{{form.description}} </span>
-  <span class="help-block" ng-show="ngModel.$invalid">{{schemaError}}</span>
+<div class="form-group" ng-class="{'has-error': hasError()}">
+  <label ng-show="showTitle()">{{form.title}}</label>
+
+  <input type="{{form.type}}"
+         placeholder="{{form.placeholder}}"
+         class="form-control"
+         ng-required="form.required"
+         ng-model="$$value$$"
+         schema-validate="form.schema">
+
+  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}} </span>
+  <span class="help-block" ng-show="hasError()">{{schemaError}}</span>
 </div>

src/directives/decorators/bootstrap/fieldset.html

@@ -1,4 +1,4 @@
-<fieldset>
+<fieldset ng-disabled="form.readonly">
   <legend ng-show="form.title">{{ form.title }}</legend>
   <bootstrap-decorator ng-repeat="item in form.items" form="item"></bootstrap-decorator>
 </fieldset>

src/directives/decorators/bootstrap/number.html

@@ -0,0 +1,6 @@
+<div class="form-group">
+  <label ng-show="showTitle()">{{form.title}}</label>
+  <input ng-if="form.type !== 'textarea'" type="text" disabled class="form-control" value="{{$$value$$}}">
+  <textarea ng-if="form.type === 'textarea'"  disabled class="form-control">{{$$value$$}}</textarea>
+  <span class="help-block" ng-show="form.description">{{form.description}} </span>
+</div>

src/directives/decorators/bootstrap/readonly.html

@@ -0,0 +1,3 @@
+<div>
+  <bootstrap-decorator ng-repeat="item in form.items" form="item"></bootstrap-decorator>
+</div>

src/directives/decorators/bootstrap/section.html

@@ -1,10 +1,13 @@
-<div class="form-group">
-  <label ng-show="form.title">
+<div class="form-group" ng-class="{'has-error': hasError()}">
+  <label ng-show="showTitle()">
     {{form.title}}
   </label>
-  <select ng-model="$$value$$" class="form-control" schema-validate="form.schema">
-    <option ng-repeat="(val,name) in form.titleMap" value="{{val}}">{{name}}</option>
+  <select ng-model="$$value$$"
+          class="form-control"
+          schema-validate="form.schema"
+          ng-required="form.required"
+          ng-options="val as name for (val,name) in form.titleMap">
   </select>
-  <span class="help-block" ng-show="form.description && !ngModel.$invalid">{{form.description}}</span>
-  <span class="help-block" ng-show="ngModel.$invalid">{{schemaError}}</span>
+  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}}</span>
+  <span class="help-block" ng-show="hasError()">{{schemaError}}</span>
 </div>

src/directives/decorators/bootstrap/select.html

@@ -0,0 +1,10 @@
+<div class="form-group" ng-class="{'has-error': hasError()}">
+  <label ng-show="showTitle()">{{form.title}}</label>
+  <textarea class="form-control"
+            ng-required="form.required"
+            ng-model="$$value$$"
+            schema-validate="form.schema"></textarea>
+
+  <span class="help-block" ng-show="form.description && !hasError()">{{form.description}} </span>
+  <span class="help-block" ng-show="hasError()">{{schemaError}} {{ngModel.$error}}</span>
+</div>

src/directives/decorators/bootstrap/textarea.html

@@ -8,6 +8,17 @@ angular.module('schemaForm')
        ['$compile','schemaForm',
 function($compile,  schemaForm){
 
+  //recurse through the entire schema.
+  //FIXME: no support for arrays
+  var traverse = function(schema,fn,path) {
+    path = path || "";
+    fn(schema,path);
+    angular.forEach(schema.properties,function(prop,name){
+      traverse(prop,fn,path===""?name:path+'.'+name);
+    });
+  };
+
+
 
   return {
     scope: {
@@ -18,7 +29,11 @@ function($compile,  schemaForm){
     replace: false,
     restrict: "A",
     transclude: true,
-    link: function(scope,element,attrs,_,transclude) {
+    require: '?form',
+    link: function(scope,element,attrs,formCtrl,transclude) {
+
+      //expose form controller on scope so that we don't force authors to use name on form
+      scope.formCtrl = formCtrl;
 
       //We'd like to handle existing markup,
       //besides using it in our template we also
@@ -41,6 +56,7 @@ function($compile,  schemaForm){
       var lastDigest = {};
 
       scope.$watch(function(){
+
         var schema = scope.schema;
         var form   = scope.initialForm || ['*'];
 
@@ -75,7 +91,18 @@ function($compile,  schemaForm){
           element[0].appendChild(frag);
 
           //compile only children
+
           $compile(element.children())(scope);
+
+
+          //ok, now that that is done let's set any defaults
+          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']});
+            }
+          });
+
         }
       });
     }