Support for "actions" button group

Which can only hold buttons, no fields. Buttons still has not way to
actually call an action though...

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/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

@@ -16,6 +16,9 @@ function($parse,  $compile,  $http,  $templateCache){
       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';
       }

test/schema-form-test.js

@@ -537,10 +537,47 @@ describe('Schema form',function(){
 
         tmpl.children().length.should.be.equal(1);
         tmpl.children().eq(0).is('div').should.be.true;
+        tmpl.children().eq(0).hasClass('btn-group').should.be.false;
         tmpl.children().eq(0).children().length.should.be.eq(2);
       });
     });
 
+    it('should handle "action" groups, same as "section" but with a bootstrap class "btn-group"',function(){
+
+      inject(function($compile,$rootScope){
+        var scope = $rootScope.$new();
+        scope.person = {};
+
+        scope.schema = exampleSchema;
+
+        scope.form = [{
+          type: "actions",
+          items: [
+            {
+              type: 'submit',
+              title: 'yes'
+            },
+            {
+              type: 'button',
+              title: 'no'
+            }
+          ]
+        }];
+
+        var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+        $compile(tmpl)(scope);
+        $rootScope.$apply();
+
+        tmpl.children().length.should.be.equal(1);
+        tmpl.children().eq(0).is('div').should.be.true;
+        tmpl.children().eq(0).hasClass('btn-group').should.be.true;
+        tmpl.children().eq(0).children().length.should.be.eq(2);
+        tmpl.children().eq(0).children().eq(0).is('input').should.be.true;
+        tmpl.children().eq(0).children().eq(1).is('button').should.be.true;
+      });
+    });
+
 
   });