Merge branch 'feature/lotsofstuff' into development

Author: davidlgj

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

@@ -56,6 +56,7 @@ <h3>Model</h3>
         "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",

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

@@ -13,12 +13,21 @@ function($parse,  $compile,  $http,  $templateCache){
       if (form.type  === 'fieldset') {
         return 'directives/decorators/bootstrap/fieldset.html';
       }
+      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 (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,15 +55,29 @@ 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);
           });
         });
         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,5 +1,5 @@
 <div class="checkbox" ng-class="{'has-error': hasError()}">
-  <label ng-show="form.title">
+  <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/directives/decorators/bootstrap/default.html

@@ -1,7 +1,12 @@
 <div class="form-group" ng-class="{'has-error': hasError()}">
-  <label ng-show="form.title">{{form.title}}</label>
+  <label ng-show="showTitle()">{{form.title}}</label>
 
-  <input type="{{form.type}}" class="form-control" ng-required="form.required" ng-model="$$value$$" schema-validate="form.schema">
+  <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}} {{ngModel.$error}}</span>

src/directives/decorators/bootstrap/readonly.html

@@ -1,5 +1,5 @@
 <div class="form-group">
-  <label ng-show="form.title">{{form.title}}</label>
+  <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>

src/directives/decorators/bootstrap/section.html

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

src/directives/decorators/bootstrap/select.html

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