Minor updates to date + array

Fixes for action buttons
Date picker style
Added initial array list, needs work and styling still

Author: iamanthropic

examples/data/sink.json

@@ -173,15 +173,6 @@
                 {
                   "key": "shoesizeRight"
                 },
-                {
-                  "key": "invitation",
-                  "tinymceOptions": {
-                    "toolbar": [
-                      "undo redo| styleselect | bold italic | link image",
-                      "alignleft aligncenter alignright"
-                    ]
-                  }
-                },
                 "things",
                 "dislike"
               ]
@@ -207,7 +198,7 @@
     },
     {
       "key": "date",
-      "minDate": "2014-06-20"
+      "minDate": "2015-06-20"
     },
     {
       "key": "radio",
@@ -251,12 +242,12 @@
       "items": [
         {
           "type": "submit",
-          "style": "btn-info",
+          "style": "md-primary",
           "title": "Do It!"
         },
         {
           "type": "button",
-          "style": "btn-danger",
+          "style": "md-warn",
           "title": "Noooooooooooo",
           "onClick": "sayNo()"
         }

examples/img/icons/ic_clear_black_18px.svg

@@ -279,8 +279,8 @@ <h3>Schema</h3>
 app.controller('TestCtrl', function($scope, $http, $location, $timeout, $q) {
 
   $scope.tests = [
-    { name: "Material Flex Grid", data: 'data/grid.json' },
     { name: "Autocomplete", data: 'data/autocomplete.json' },
+    { name: "Material Flex Grid", data: 'data/grid.json' },
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
     { name: "TitleMap Examples", data: 'data/titlemaps.json' },

examples/material-example.html

@@ -1,12 +1,12 @@
 angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("decorators/material/actions-trcl.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\" ng-transclude=\"\"></div>");
-$templateCache.put("decorators/material/actions.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\"><input ng-repeat-start=\"item in form.items\" type=\"submit\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" value=\"{{item.title}}\" ng-if=\"item.type === \'submit\'\"> <button ng-repeat-end=\"\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" type=\"button\" ng-disabled=\"form.readonly\" ng-if=\"item.type !== \'submit\'\" ng-click=\"buttonClick($event,item)\">{{item.title}}</button></div>");
-$templateCache.put("decorators/material/array.html","<div sf-array=\"form\" class=\"schema-form-array {{form.htmlClass}}\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\"><h3 ng-show=\"form.title && form.notitle !== true\">{{ form.title }}</h3><ol class=\"list-group\" ng-model=\"modelArray\" ui-sortable=\"\"><li class=\"list-group-item {{form.fieldHtmlClass}}\" ng-repeat=\"item in modelArray track by $index\"><md-button ng-hide=\"form.readonly || form.remove === null\" ng-click=\"deleteFromArray($index)\" style=\"position: relative; z-index: 20;\" type=\"button\" class=\"close pull-right\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></md-button><sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator></li></ol><div class=\"clearfix\" style=\"padding: 15px;\"><md-button ng-hide=\"form.readonly || form.add === null\" ng-click=\"appendToArray()\" type=\"button\" class=\"btn {{ form.style.add || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</md-button></div><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
+$templateCache.put("decorators/material/actions.html","<section layout=\"row\" class=\"btn-group schema-form-actions {{form.htmlClass}}\"></section>");
+$templateCache.put("decorators/material/array.html","<div class=\"schema-form-array {{form.htmlClass}}\" sf-field-model=\"sf-new-array\" sf-new-array=\"\"><label class=\"control-label\" ng-show=\"showTitle()\">{{ form.title }}</label><md-list class=\"list-group\" sf-field-model=\"\" ui-sortable=\"form.sortOptions\"><md-list-item layout=\"row\" class=\"list-group-item\" sf-field-model=\"ng-repeat\" ng-repeat=\"item in $$value$$ track by $index\" schema-form-array-items=\"\"><md-button flex=\"none\" flex-order=\"2\" type=\"button\" ng-hide=\"form.readonly || form.remove === null\" ng-click=\"deleteFromArray($index)\" ng-disabled=\"form.schema.minItems >= modelArray.length\" class=\"md-icon-button\" aria-label=\"More\" style=\"position: relative; z-index: 20;\"><md-icon md-svg-icon=\"img/icons/ic_clear_black_18px.svg\"></md-icon></md-button></md-list-item></md-list><div class=\"clearfix\" style=\"padding: 15px;\" ng-model=\"modelArray\" schema-validate=\"form\"><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div><md-button ng-hide=\"form.readonly || form.add === null\" ng-click=\"appendToArray()\" ng-disabled=\"form.schema.maxItems <= modelArray.length\" type=\"button\" class=\"btn md-raised md-primary {{ form.style.add || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</md-button></div></div>");
 $templateCache.put("decorators/material/autocomplete.html","<div class=\"form-group {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><md-autocomplete flex=\"\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" sf-autocomplete=\"\" sf-field-model=\"replaceAll\" schema-validate=\"form\" md-selected-item=\"$$value$$\" md-search-text=\"searchText\" md-selected-item-change=\"\'todo\';\" md-items=\"item in evalExpr(\'this[\\\'\'+form.optionFilter+\'\\\'](\\\'\'+searchText+\'\\\')\')\" md-item-text=\"item.name\" md-floating-label=\"{{form.title || form.key.slice(-1)[0]}}\" md-menu-class=\"autocomplete-custom-template\"><md-item-template><span md-highlight-text=\"searchText\">{{item.title}}</span></md-item-template><md-not-found>No matches found</md-not-found></md-autocomplete><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/checkbox.html","<div class=\"checkbox schema-form-checkbox {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><md-checkbox sf-field-model=\"\" sf-changed=\"form\" ng-disabled=\"form.readonly\" schema-validate=\"form\" class=\"{{form.fieldHtmlClass}}\" name=\"{{form.key.slice(-1)[0]}}\" aria-label=\"{{form.title || form.key.slice(-1)[0]}}\"><span ng-bind-html=\"form.title\"></span></md-checkbox><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/checkboxes.html","<div sf-array=\"form\" sf-field-model=\"\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess()}\"><label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><md-checkbox ng-model=\"titleMapValues[$index]\" sf-changed=\"form\" ng-disabled=\"form.readonly\" name=\"{{form.key.slice(-1)[0]}}\" ng-true-value=\"true\" ng-false-value=\"false\" aria-label=\"{{form.title || form.key.slice(-1)[0]}}\"><span ng-bind-html=\"form.titleMap[$index].name\"></span></md-checkbox></div><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
 $templateCache.put("decorators/material/chips.html","<div class=\"form-group schema-form-chips {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError(), \'has-success\': hasSuccess(), \'has-feedback\': form.feedback !== false}\"><md-chips sf-field-model=\"\" readonly=\"form.readonly\" flex=\"\" placeholder=\"{{form.title || form.key.slice(-1)[0]}}\"><md-chip-template><strong ng-if=\"!form.template\">{{$chip}}</strong></md-chip-template></md-chips><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></div>");
-$templateCache.put("decorators/material/date.html","<md-input-container class=\"schema-form-date {{form.htmlClass}}\"><md-datepicker sf-field-model=\"\" sf-changed=\"form\" sf-type-parser=\"form.schema\" schema-validate=\"form\" id=\"{{form.key.slice(-1)[0]}}\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" md-min-date=\"minDate\" md-max-date=\"maxDate\" md-placeholder=\"Enter date\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><div ng-messages=\"ngModel.$error\"><div sf-message=\"\" ng-message=\"\"></div></div></md-datepicker></md-input-container>");
-$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\" sf-messages=\"\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" sf-type-parser=\"form.schema\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"></md-input-container>");
+$templateCache.put("decorators/material/date.html","<div class=\"schema-form-date {{form.htmlClass}}\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><md-datepicker sf-field-model=\"\" sf-changed=\"form\" schema-validate=\"form\" sf-type-parser=\"form.schema\" id=\"{{form.key.slice(-1)[0]}}\" ng-show=\"form.key\" ng-class=\"form.fieldHtmlClass\" ng-disabled=\"form.readonly\" md-placeholder=\"Enter date\" sf-messages=\"\"></md-datepicker></div>");
+$templateCache.put("decorators/material/default.html","<md-input-container class=\"schema-form-{{form.type}} {{form.htmlClass}}\" sf-messages=\"\"><label ng-show=\"showTitle()\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label><input sf-field-model=\"\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" id=\"{{form.key.slice(-1)[0]}}\" ng-class=\"form.fieldHtmlClass\" sf-type-parser=\"form.schema\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"></md-input-container>");
 $templateCache.put("decorators/material/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div ng-transclude=\"\"></div></fieldset>");
 $templateCache.put("decorators/material/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"standard {{form.htmlClass}}\" flex=\"\"><legend ng-show=\"form.title\">{{ form.title }}</legend></fieldset>");
 $templateCache.put("decorators/material/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
@@ -64,6 +64,24 @@ angular.module('schemaForm')
         }
       };
 
+      var mdDatepicker = function(args) {
+        var mdDatepicker = args.fieldFrag.querySelector('md-datepicker');
+        if (mdDatepicker) {
+          if (args.form.onChange) {
+            mdDatepicker.setAttribute('ng-change', 'args.form.onChange(searchText)');
+          };
+          // mdDatepicker.setAttribute('md-items', 'item in $filter(''autocomplete'')(searchText);');
+          var minDate = args.form.minimum || false;
+          var maxDate = args.form.maximum || false;
+          if (minDate) {
+            mdDatepicker.setAttribute('md-max-date', minDate);
+          };
+          if (maxDate) {
+            mdDatepicker.setAttribute('md-max-date', maxDate);
+          };
+        }
+      };
+
       var tabs = function(args) {
         if (args.form.tabs && args.form.tabs.length > 0) {
           var tabContainer = args.fieldFrag.querySelector('md-tabs');
@@ -83,19 +101,20 @@ angular.module('schemaForm')
       var defaults = [ sfField, ngModel, ngModelOptions, sfMessages, condition ];
 
       decoratorsProvider.defineDecorator('materialDecorator', {
-        actions: { template: base + 'actions.html', builder: defaults },
+        actions: { template: base + 'actions.html', builder: [ sfField, simpleTransclusion, condition ] },
         array: { template: base + 'array.html', builder: [ sfField, ngModelOptions, ngModel, array, condition ] },
         autocomplete: {
           template: base + 'autocomplete.html',
           builder: [ sfField, ngModel, ngModelOptions, sfMessages, condition, sfAutocomplete ]
         },
+        boolean: { template: base + 'checkbox.html', builder: defaults },
         button: { template: base + 'submit.html', builder: defaults },
         checkbox: { template: base + 'checkbox.html', builder: defaults },
         checkboxes: {
           template: base + 'checkboxes.html',
           builder: [ sfField, ngModelOptions, ngModel, array, condition ]
         },
-        date: { template: base + 'date.html', builder: defaults },
+        date: { template: base + 'date.html', builder: [ sfField, ngModel, ngModelOptions, sfMessages, mdDatepicker, condition ] },
         'default': { template: base + 'default.html', builder: defaults },
         fieldset: { template: base + 'fieldset.html', builder: [ sfField, simpleTransclusion, condition ] },
         help: { template: base + 'help.html', builder: defaults },
@@ -139,7 +158,7 @@ angular.module('schemaForm')
   }
   else {
     if (args.form.optionFilter) {
-      mdAutocomplete.setAttribute('md-items',
+      mdDatepicker.setAttribute('md-items',
         'item in evalExpr("this[\""+form.optionFilter+"\"](\""+searchText+"\")")');
     }
   }

material-decorator.js

@@ -1,13 +1 @@
-<div class="btn-group schema-form-actions {{form.htmlClass}}">
-  <input ng-repeat-start="item in form.items"
-         type="submit"
-         class="btn {{ item.style || 'btn-default' }} {{form.fieldHtmlClass}}"
-         value="{{item.title}}"
-         ng-if="item.type === 'submit'">
-  <button ng-repeat-end
-          class="btn {{ item.style || 'btn-default' }} {{form.fieldHtmlClass}}"
-          type="button"
-          ng-disabled="form.readonly"
-          ng-if="item.type !== 'submit'"
-          ng-click="buttonClick($event,item)">{{item.title}}</button>
-</div>
+<section layout="row" class="btn-group schema-form-actions {{form.htmlClass}}"></section>

material-decorator.min.js

@@ -1,32 +1,36 @@
-<div sf-array="form" class="schema-form-array {{form.htmlClass}}"
-     ng-model="$$value$$" ng-model-options="form.ngModelOptions">
-  <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
-  <ol class="list-group" ng-model="modelArray" ui-sortable>
-    <li class="list-group-item {{form.fieldHtmlClass}}"
-        ng-repeat="item in modelArray track by $index">
-      <md-button ng-hide="form.readonly || form.remove === null"
-              ng-click="deleteFromArray($index)"
-              style="position: relative; z-index: 20;"
-              type="button" class="close pull-right">
-              <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+<div  class="schema-form-array {{form.htmlClass}}"
+      sf-field-model="sf-new-array"
+      sf-new-array>
+  <label class="control-label" ng-show="showTitle()">{{ form.title }}</label>
+  <md-list class="list-group" sf-field-model ui-sortable="form.sortOptions">
+    <md-list-item layout="row" class="list-group-item"
+             sf-field-model="ng-repeat"
+             ng-repeat="item in $$value$$ track by $index"
+             schema-form-array-items
+             class="{{form.fieldHtmlClass}}">
+      <md-button flex="none" flex-order="2"
+                 type="button"
+                 ng-hide="form.readonly || form.remove === null"
+                 ng-click="deleteFromArray($index)"
+                 ng-disabled="form.schema.minItems >= modelArray.length"
+                 class="md-icon-button" aria-label="More"
+                 style="position: relative; z-index: 20;">
+        <md-icon md-svg-icon="img/icons/ic_clear_black_18px.svg"></md-icon>
       </md-button>
-      <sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
-    </li>
-  </ol>
-  <div class="clearfix" style="padding: 15px;">
+    </md-list-item>
+  </md-list>
+  <div class="clearfix" style="padding: 15px;" ng-model="modelArray" schema-validate="form">
+    <div class="help-block"
+         ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+         ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
+
     <md-button ng-hide="form.readonly || form.add === null"
             ng-click="appendToArray()"
+            ng-disabled="form.schema.maxItems <= modelArray.length"
             type="button"
-            class="btn {{ form.style.add || 'btn-default' }} pull-right">
+            class="btn md-raised md-primary {{ form.style.add || 'btn-default' }} pull-right">
       <i class="glyphicon glyphicon-plus"></i>
       {{ form.add || 'Add'}}
     </md-button>
   </div>
-  <div ng-messages="ngModel.$error">
-    <!--
-       This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-       is needed for the styling
-    -->
-    <div sf-message ng-message></div>
-  </div>
 </div>

src/actions.html

@@ -1,22 +1,13 @@
-<md-input-container class="schema-form-date {{form.htmlClass}}">
+<div class="schema-form-date {{form.htmlClass}}">
+  <label ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
   <md-datepicker sf-field-model
                  sf-changed="form"
-                 sf-type-parser="form.schema"
                  schema-validate="form"
+                 sf-type-parser="form.schema"
                  id="{{form.key.slice(-1)[0]}}"
                  ng-show="form.key"
                  ng-class="form.fieldHtmlClass"
                  ng-disabled="form.readonly"
-                 md-min-date="minDate"
-                 md-max-date="maxDate"
-                 md-placeholder="Enter date">
-    <label  ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
-    <div ng-messages="ngModel.$error">
-      <!--
-         This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
-         is needed for the styling
-      -->
-      <div sf-message ng-message></div>
-    </div>
+                 md-placeholder="Enter date" sf-messages>
   </md-datepicker>
-</md-input-container>
+</div>

src/array.html

@@ -21,7 +21,6 @@
          type="{{form.type}}"
          step="any"
          sf-changed="form"
-         placeholder="{{form.placeholder}}"
          id="{{form.key.slice(-1)[0]}}"
          ng-class="form.fieldHtmlClass"
          sf-type-parser="form.schema"