tabarrays and array fixes

Author: davidlgj

README.md

@@ -3,7 +3,7 @@ Angular Bootstrap Decorator
 
 For https://github.com/Textalk/angular-schema-form
 
-The new Bootstrap Decorator. Work in Progress. Consider it ALPHA quality.
+The new Bootstrap Decorator. Work in Progress. Consider it BETA quality.
 
 * Uses the new builder structure for faster form building.
 * No need for <bootstrap-decorator> tags anymore!

examples/data/array.json

@@ -8,6 +8,7 @@
         "type": "array",
         "maxItems": 4,
         "minItems": 2,
+        "uniqueItems": true,
         "items": {
           "type": "string"
         }

examples/data/tabarray.json

@@ -5,6 +5,7 @@
     "properties": {
       "comments": {
         "type": "array",
+        "minItems": 2,
         "items": {
           "type": "object",
           "properties": {

src/array.html

@@ -3,9 +3,10 @@
       sf-new-array>
   <h3 ng-show="form.title && form.notitle !== true"></h3>
   <ol class="list-group" ui-sortable>
-    <li class="list-group-item {{form.fieldHtmlClass}} schema-form-array-items"
+    <li class="list-group-item {{form.fieldHtmlClass}}"
+        schema-form-array-items
         sf-field-model="ng-repeat"
-        ng-repeat="item in $$value$$ track by $index  ">
+        ng-repeat="item in $$value$$ track by $index">
       <button ng-hide="form.readonly || form.remove === null"
               ng-click="deleteFromArray($index)"
               ng-disabled="form.schema.minItems >= modelArray.length"

src/bootstrap-decorator.js

@@ -1,4 +1,3 @@
-
 angular.module('schemaForm').config(['schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider',
 function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
   var base = 'decorators/bootstrap/';
@@ -9,9 +8,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
   var sfField        = sfBuilderProvider.builders.sfField;
 
   var array = function(args) {
-    console.log('array', args);
-
-    var items = args.fieldFrag.querySelector('li.schema-form-array-items');
+    var items = args.fieldFrag.querySelector('[schema-form-array-items]');
     if (items) {
       state = angular.copy(args.state);
       state.keyRedaction = state.keyRedaction || 0;
@@ -40,7 +37,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
     textarea: {template: base + 'textarea.html', builder: defaults},
     fieldset: {template: base + 'fieldset.html', builder: [sfField, simpleTransclusion]},
     array: {template: base + 'array.html', builder: [sfField, ngModelOptions, ngModel, array]},
-    tabarray: {template: base + 'tabarray.html', replace: false},
+    tabarray: {template: base + 'tabarray.html', builder: [sfField, ngModelOptions, ngModel, array]},
     tabs: {template: base + 'tabs.html', replace: false},
     section: {template: base + 'section.html', builder: [sfField, simpleTransclusion]},
     conditional: {template: base + 'section.html', builder: [sfField, simpleTransclusion]},
@@ -77,10 +74,8 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
       var watchFn =  function() {
         //scope.modelArray = modelArray;
         scope.modelArray = scope.$eval(attrs.sfNewArray);
-        console.warn('array watch!')
         // validateField method is exported by schema-validate
         if (scope.validateField) {
-          console.warn('calling validate field');
           scope.validateField();
         }
       };
@@ -110,7 +105,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
         } else {
           // Otherwise we like to check if the instance of the array has changed, or if something
           // has been added/removed.
-          scope.$watch([attrs.sfNewArray, attrs.sfNewArray + '.length'], function() {
+          scope.$watchGroup([attrs.sfNewArray, attrs.sfNewArray + '.length'], function() {
             watchFn();
             onChangeFn();
           });
@@ -120,6 +115,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
       });
 
       scope.appendToArray = function() {
+
         var empty;
 
         // Same old add empty things to the array hack :(
@@ -139,18 +135,19 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
           var selection = sfPath.parse(attrs.sfNewArray);
           model = [];
           sel(selection, scope, model);
-          if (scope.ngModel) {
-            scope.ngModel.$setViewValue(model);
-          }
+          scope.modelArray = model;
         }
         model.push(empty);
+
+        return model;
       };
 
       scope.deleteFromArray = function(index) {
         var model = scope.modelArray;
         if (model) {
           model.splice(index, 1);
         }
+        return model;
       };
     }
   };

src/tabarray.html

@@ -1,16 +1,22 @@
 
-<div sf-array="form" ng-init="selected = { tab: 0 }"
+<div ng-init="selected = { tab: 0 }"
+     ng-model="modelArray" schema-validate="form"
+     sf-field-model="sf-new-array"
+     sf-new-array
      class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || 'left'}} {{form.htmlClass}}">
   <div ng-if="!form.tabType || form.tabType !== 'right'"
        ng-class="{'col-xs-3': !form.tabType || form.tabType === 'left'}">
     <ul class="nav nav-tabs"
         ng-class="{ 'tabs-left': !form.tabType || form.tabType === 'left'}">
-      <li ng-repeat="item in modelArray track by $index"
+      <li sf-field-model="ng-repeat"
+          ng-repeat="item in $$value$$ track by $index"
           ng-click="$event.preventDefault() || (selected.tab = $index)"
           ng-class="{active: selected.tab === $index}">
           <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
       </li>
-      <li ng-hide="form.readonly" ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
+      <li ng-hide="form.readonly"
+          ng-disabled="form.schema.maxItems <= modelArray.length"
+          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
         <a href="#">
           <i class="glyphicon glyphicon-plus"></i>
           {{ form.add || 'Add'}}
@@ -21,32 +27,41 @@
 
   <div ng-class="{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}">
     <div class="tab-content {{form.fieldHtmlClass}}">
-      <div class="tab-pane clearfix"
-           ng-repeat="item in modelArray track by $index"
+      <div class="tab-pane clearfix tab{{selected.tab}} index{{$index}}"
+           sf-field-model="ng-repeat"
+           ng-repeat="item in $$value$$ track by $index"
            ng-show="selected.tab === $index"
            ng-class="{active: selected.tab === $index}">
-           <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
 
+           <div schema-form-array-items></div>
 
            <button ng-hide="form.readonly"
                    ng-click="selected.tab = deleteFromArray($index).length - 1"
+                   ng-disabled="form.schema.minItems >= modelArray.length"
                    type="button"
                    class="btn {{ form.style.remove || 'btn-default' }} pull-right">
              <i class="glyphicon glyphicon-trash"></i>
              {{ form.remove || 'Remove'}}
            </button>
       </div>
+      <div class="help-block"
+           ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+           ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+      </div>
     </div>
   </div>
 
   <div ng-if="form.tabType === 'right'" class="col-xs-3">
     <ul class="nav nav-tabs tabs-right">
-      <li ng-repeat="item in modelArray track by $index"
+      <li  sf-field-model="ng-repeat"
+          ng-repeat="item in $$value$$ track by $index"
           ng-click="$event.preventDefault() || (selected.tab = $index)"
           ng-class="{active: selected.tab === $index}">
           <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
       </li>
-      <li ng-hide="form.readonly" ng-click="$event.preventDefault() || appendToArray()">
+      <li ng-hide="form.readonly"
+          ng-disabled="form.schema.maxItems <= modelArray.length"
+          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
         <a href="#">
           <i class="glyphicon glyphicon-plus"></i>
           {{ form.add || 'Add'}}