ang/crmMailing/RadioDate.js

   1 (function(angular, $, _) {
   2   // Represent a datetime field as if it were a radio ('schedule.mode') and a datetime ('schedule.datetime').
   3   // example: <div crm-mailing-radio-date="mySchedule" ng-model="mailing.scheduled_date">...</div>
   4   angular.module('crmMailing').directive('crmMailingRadioDate', function(crmUiAlert) {
   5     return {
   6       require: 'ngModel',
   7       link: function($scope, element, attrs, ngModel) {
   8
   9         var schedule = $scope[attrs.crmMailingRadioDate] = {
  10           mode: 'now',
  11           datetime: ''
  12         };
  13
  14         ngModel.$render = function $render() {
  15           var sched = ngModel.$viewValue;
  16           if (!_.isEmpty(sched)) {
  17             schedule.mode = 'at';
  18             schedule.datetime = sched;
  19           }
  20           else {
  21             schedule.mode = 'now';
  22             schedule.datetime = '';
  23           }
  24         };
  25
  26         var updateParent = (function() {
  27           switch (schedule.mode) {
  28             case 'now':
  29               ngModel.$setViewValue(null);
  30               schedule.datetime = '';
  31               break;
  32             case 'at':
  33               schedule.datetime = schedule.datetime || '?';
  34               ngModel.$setViewValue(schedule.datetime);
  35               break;
  36             default:
  37               throw 'Unrecognized schedule mode: ' + schedule.mode;
  38           }
  39         });
  40
  41         element
  42           // Open datepicker when clicking "At" radio
  43           .on('click', ':radio[value=at]', function() {
  44             $('.crm-form-date', element).focus();
  45           })
  46           // Reset mode if user entered an invalid date
  47           .on('change', '.crm-hidden-date', function(e, context) {
  48             if (context === 'userInput' && $(this).val() === '' && $(this).siblings('.crm-form-date').val().length) {
  49               schedule.mode = 'at';
  50               schedule.datetime = '?';
  51             } else {
  52               var d = new Date(),
  53               month = '' + (d.getMonth() + 1),
  54               day = '' + d.getDate(),
  55               year = d.getFullYear(),
  56               hours = '' + d.getHours(),
  57               minutes = '' + d.getMinutes();
  58               var submittedDate = $(this).val();
  59               if (month.length < 2) month = '0' + month;
  60               if (day.length < 2) day = '0' + day;
  61               if (hours.length < 2) hours = '0' + hours;
  62               if (minutes.length < 2) minutes = '0' + minutes;
  63               date = [year, month, day].join('-');
  64               time = [hours, minutes, "00"].join(':');
  65               currentDate = date + ' ' + time;
  66               ngModel.$setValidity('dateTimeInThePast', !($(this).val().length && submittedDate < currentDate));
  67               if ($(this).val().length && submittedDate < currentDate) {
  68                 crmUiAlert({
  69                   text: ts('The scheduled date and time is in the past'),
  70                   title: ts('Error')
  71                 });
  72               }
  73             }
  74           });
  75
  76         $scope.$watch(attrs.crmMailingRadioDate + '.mode', updateParent);
  77         $scope.$watch(attrs.crmMailingRadioDate + '.datetime', function(newValue, oldValue) {
  78           // automatically switch mode based on datetime entry
  79           if (typeof oldValue === 'undefined') {
  80             oldValue = '';
  81           }
  82           if (typeof newValue === 'undefined') {
  83             newValue = '';
  84           }
  85           if (oldValue !== newValue) {
  86             if (_.isEmpty(newValue)) {
  87               schedule.mode = 'now';
  88             }
  89             else {
  90               schedule.mode = 'at';
  91             }
  92           }
  93           updateParent();
  94         });
  95       }
  96     };
  97   });
  98 })(angular, CRM.$, CRM._);