X-Git-Url: https://vcs.fsf.org/?a=blobdiff_plain;f=js%2Fangular-crm-ui.js;h=d9f590678aefecb2c1b60a95790bce78b6f54d7e;hb=29468114469beefe8f88946215d768d0483f9305;hp=44b19bdb280e104578148adaf1efc952ad5a764e;hpb=3afb86ef3703af3a1280cebeb11da0b2d94335f0;p=civicrm-core.git

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index 44b19bdb28..d9f590678a 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -23,73 +23,93 @@
       };
     })
 
-    // example: <input crm-ui-date="myobj.datefield" />
-    // example: <input crm-ui-date="myobj.datefield" crm-ui-date-format="yy-mm-dd" />
+    // Display a date widget.
+    // example: <input crm-ui-date ng-model="myobj.datefield" />
+    // example: <input crm-ui-date ng-model="myobj.datefield" crm-ui-date-format="yy-mm-dd" />
     .directive('crmUiDate', function ($parse, $timeout) {
       return {
         restrict: 'AE',
+        require: 'ngModel',
         scope: {
-          crmUiDate: '@', // expression, model binding
           crmUiDateFormat: '@' // expression, date format (default: "yy-mm-dd")
         },
-        link: function (scope, element, attrs) {
+        link: function (scope, element, attrs, ngModel) {
           var fmt = attrs.crmUiDateFormat ? $parse(attrs.crmUiDateFormat)() : "yy-mm-dd";
-          var model = $parse(attrs.crmUiDate);
 
           element.addClass('dateplugin');
           $(element).datepicker({
             dateFormat: fmt
           });
 
-          var updateChildren = (function() {
-            element.off('change', updateParent);
-            $(element).datepicker('setDate', model(scope.$parent));
-            element.on('change', updateParent);
-          });
+          ngModel.$render = function $render() {
+            $(element).datepicker('setDate', ngModel.$viewValue);
+          };
           var updateParent = (function() {
             $timeout(function () {
-              model.assign(scope.$parent, $(element).val());
+              ngModel.$setViewValue(element.val());
             });
           });
 
-          updateChildren();
-          scope.$parent.$watch(attrs.crmUiDate, updateChildren);
           element.on('change', updateParent);
         }
       };
     })
 
-    // example: <div crm-ui-date-time="myobj.mydatetimefield"></div>
+    // Display a date-time widget.
+    // example: <div crm-ui-date-time ng-model="myobj.mydatetimefield"></div>
     .directive('crmUiDateTime', function ($parse) {
       return {
         restrict: 'AE',
+        require: 'ngModel',
         scope: {
-          crmUiDateTime: '@'
+          ngRequired: '@'
         },
-        template: '<input crm-ui-date="dtparts.date" placeholder="{{dateLabel}}"/> <input crm-ui-time="dtparts.time" placeholder="{{timeLabel}}"/>',
-        link: function (scope, element, attrs) {
-          var model = $parse(attrs.crmUiDateTime);
+        templateUrl: '~/crmUi/datetime.html',
+        link: function (scope, element, attrs, ngModel) {
+          var ts = scope.ts = CRM.ts(null);
           scope.dateLabel = ts('Date');
           scope.timeLabel = ts('Time');
+          element.addClass('crm-ui-datetime');
 
-          var updateChildren = (function () {
-            var value = model(scope.$parent);
-            if (value) {
-              var dtparts = value.split(/ /);
+          ngModel.$render = function $render() {
+            if (!_.isEmpty(ngModel.$viewValue)) {
+              var dtparts = ngModel.$viewValue.split(/ /);
               scope.dtparts = {date: dtparts[0], time: dtparts[1]};
             }
             else {
               scope.dtparts = {date: '', time: ''};
             }
-          });
-          var updateParent = (function () {
-            model.assign(scope.$parent, scope.dtparts.date + " " + scope.dtparts.time);
-          });
+          };
+
+          function updateParent() {
+            var incompleteDateTime = _.isEmpty(scope.dtparts.date) ^ _.isEmpty(scope.dtparts.time);
+            ngModel.$setValidity('incompleteDateTime', !incompleteDateTime);
+
+            if (_.isEmpty(scope.dtparts.date) && _.isEmpty(scope.dtparts.time)) {
+              ngModel.$setViewValue(' ');
+            }
+            else {
+              //ngModel.$setViewValue(scope.dtparts.date + ' ' + scope.dtparts.time);
+              ngModel.$setViewValue((scope.dtparts.date ? scope.dtparts.date : '') + ' ' + (scope.dtparts.time ? scope.dtparts.time : ''));
+            }
+          }
 
-          updateChildren();
-          scope.$parent.$watch(attrs.crmUiDateTime, updateChildren);
           scope.$watch('dtparts.date', updateParent);
           scope.$watch('dtparts.time', updateParent);
+
+          function updateRequired() {
+            scope.required = scope.$parent.$eval(attrs.ngRequired);
+          }
+
+          if (attrs.ngRequired) {
+            updateRequired();
+            scope.$parent.$watch(attrs.ngRequired, updateRequired);
+          }
+
+          scope.reset = function reset() {
+            scope.dtparts = {date: '', time: ''};
+            ngModel.$setViewValue('');
+          };
         }
       };
     })
@@ -203,6 +223,7 @@
       };
     })
 
+    // Define a scope in which a name like "subform.foo" maps to a unique ID.
     // example: <div ng-form="subform" crm-ui-id-scope><label crm-ui-for="subform.foo">Foo:</label><input crm-ui-id="subform.foo" name="foo"/></div>
     .directive('crmUiIdScope', function () {
       return {
@@ -222,6 +243,7 @@
       };
     })
 
+    // Display an HTML blurb inside an IFRAME.
     // example: <iframe crm-ui-iframe="getHtmlContent()"></iframe>
     .directive('crmUiIframe', function ($parse) {
       return {
@@ -251,12 +273,13 @@
           };
 
           scope.$parent.$watch(attrs.crmUiIframe, refresh);
-          //setTimeout(function () { refresh(); }, 50);
         }
       };
     })
 
+    // Define a rich text editor.
     // example: <textarea crm-ui-id="myForm.body_html" crm-ui-richtext name="body_html" ng-model="mailing.body_html"></textarea>
+    // WISHLIST: use ngModel
     .directive('crmUiRichtext', function ($timeout) {
       return {
         require: '?ngModel',
@@ -286,6 +309,7 @@
       };
     })
 
+    // Display a lock icon (based on a boolean).
     // example: <a crm-ui-lock binding="mymodel.boolfield"></a>
     // example: <a crm-ui-lock
     //            binding="mymodel.boolfield"
@@ -348,6 +372,7 @@
       };
     })
 
+    // Display a fancy SELECT (based on select2).
     // usage: <select crm-ui-select="{placeholder:'Something',allowClear:true,...}" ng-model="myobj.field"><option...></select>
     .directive('crmUiSelect', function ($parse, $timeout) {
       return {
@@ -427,40 +452,35 @@
       };
     })
 
-    // example: <input crm-ui-time="myobj.mytimefield" />
+    // Display a time-entry field.
+    // example: <input crm-ui-time ng-model="myobj.mytimefield" />
     .directive('crmUiTime', function ($parse, $timeout) {
       return {
         restrict: 'AE',
+        require: 'ngModel',
         scope: {
-          crmUiTime: '@'
         },
-        link: function (scope, element, attrs) {
-          var model = $parse(attrs.crmUiTime);
-
+        link: function (scope, element, attrs, ngModel) {
           element.addClass('crm-form-text six');
-          $(element).timeEntry({show24Hours: true});
+          element.timeEntry({show24Hours: true});
+
+          ngModel.$render = function $render() {
+            element.timeEntry('setTime', ngModel.$viewValue);
+          };
 
-          var updateChildren = (function() {
-            element.off('change', updateParent);
-            $(element).timeEntry('setTime', model(scope.$parent));
-            element.on('change', updateParent);
-          });
           var updateParent = (function () {
             $timeout(function () {
-              model.assign(scope.$parent, element.val());
+              ngModel.$setViewValue(element.val());
             });
           });
-
-          updateChildren();
-          scope.$parent.$watch(attrs.crmUiTime, updateChildren);
           element.on('change', updateParent);
         }
       };
     })
 
+    // Generic, field-independent form validator.
     // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" />
     // example: <span ng-model="placeholder" crm-ui-validate="foo && bar || whiz" crm-ui-validate-name="myError" />
-    // Generic, field-independent validator.
     .directive('crmUiValidate', function() {
       return {
         restrict: 'EA',