Merge branch '#1214' into 'master'

#1214 Update date-picker in vacation form & add date-to-moment directive See merge request linagora/lgs/openpaas/linagora.esn.unifiedinbox!495
linagora · Jun 25, 2020 · 764de58 · 764de58
2 parents 1bf9c87 + 78ff84a
commit 764de58
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 2 deletions.
diff --git a/frontend/app/directives/date-to-moment.js b/frontend/app/directives/date-to-moment.js
@@ -0,0 +1,22 @@
+(function(angular) {
+  angular.module('linagora.esn.unifiedinbox')
+    .directive('dateToMoment', dateToMoment);
+
+  function dateToMoment(moment) {
+    var directive = {
+      restrict: 'A',
+      require: 'ngModel',
+      link: function(scope, element, attrs, ngModel) {
+        ngModel.$parsers.unshift(ensureModelHasMoment);
+
+        function ensureModelHasMoment(value) {
+          var result = moment(value);
+
+          return result.isValid() ? result : undefined;
+        }
+      }
+    };
+
+    return directive;
+  }
+})(angular);
diff --git a/frontend/views/configuration/vacation/index.pug b/frontend/views/configuration/vacation/index.pug
@@ -25,7 +25,15 @@ sub-header
       .form-group.flex-form-group.full-width
         .field-name.field-label #{__('Start date')}
         .fg-line
-          input.input.form-control.from-date(type='text', ng-model="vacation.fromDate", autoclose="1", start-week="1", date-format="{{::dateFormat}}", placeholder=__('Start date'), ng-change="ctrl.updateDateAndTime('fromDate')", bs-datepicker)
+          esn-date-picker(
+            ng-model="vacation.fromDate",
+            autoclose="1",
+            start-week="1",
+            date-format="{{::dateFormat}}",
+            placeholder=__('Start date'),
+            ng-change="ctrl.updateDateAndTime('fromDate')",
+            custom-attributes="{'date-to-moment': 'date-to-moment'}"
+          )
         .separator
         .fg-line
           input.input.form-control(ng-if="!is24HourFormat" type="text", ng-model="vacation.fromDate", autoclose="0", time-format= "shortTime", placeholder=__('No end time'), aria-expanded="false", ng-change="ctrl.fixTime('fromDate'); ctrl.updateDateAndTime('fromDate')", lng-clockpicker)
@@ -38,7 +46,17 @@ sub-header
       .form-group.flex-form-group.full-width.vacation-end-date(ng-disabled="!vacation.isEnabled || !vacation.hasToDate")
         .field-name.field-label #{__('End date')}
         .fg-line(ng-class="{'invalid': ctrl.toDateIsInvalid()}")
-          input.input.form-control.to-date(type='text', ng-model="vacation.toDate", autoclose="1", start-week="1", date-format="{{::dateFormat}}", placeholder=__('No end date'), ng-disabled="!vacation.hasToDate", ng-class="{'invalid': ctrl.toDateIsInvalid()}", ng-change="ctrl.updateDateAndTime('toDate')", bs-datepicker)
+          esn-date-picker(
+            ng-model="vacation.toDate",
+            autoclose="1",
+            start-week="1",
+            date-format="{{::dateFormat}}",
+            placeholder=__('No end date'),
+            ng-disabled="!vacation.hasToDate",
+            class-name="{{ ctrl.toDateIsInvalid() ? 'invalid' : ''}}",
+            ng-change="ctrl.updateDateAndTime('toDate')",
+            custom-attributes="{'date-to-moment': 'date-to-moment'}"
+          )
         .separator
         .fg-line(ng-class="{'invalid': ctrl.toDateIsInvalid()}")
           input.input.form-control(ng-if="!is24HourFormat" type="text", ng-model="vacation.toDate", autoclose="0", time-format= "shortTime", placeholder=__('No end time'), aria-expanded="false", ng-disabled="!vacation.hasToDate", ng-class="{'invalid': ctrl.toDateIsInvalid()}", ng-change="ctrl.fixTime('toDate'); ctrl.updateDateAndTime('toDate')", lng-clockpicker)

diff --git a/test/unit-frontend/directives/date-to-moment.js b/test/unit-frontend/directives/date-to-moment.js
@@ -0,0 +1,59 @@
+'use strict';
+
+/* global chai: false */
+
+var expect = chai.expect;
+
+describe('The dateToMoment directive', function() {
+  beforeEach(function() {
+    module('jadeTemplates');
+    angular.mock.module('esn.core');
+    angular.mock.module('linagora.esn.unifiedinbox');
+
+    inject(['$compile', '$rootScope', 'moment', function($c, $r, moment) {
+      this.$compile = $c;
+      this.$rootScope = $r;
+      this.moment = moment;
+      this.$scope = this.$rootScope.$new();
+
+      this.initDirective = function(scope) {
+        var html = '<input ng-model="event.end" date-to-moment/>';
+        var element = this.$compile(html)(scope);
+
+        scope.$digest();
+
+        return element;
+      };
+    }]);
+  });
+
+  it('should return a moment', function() {
+    this.$scope.event = {};
+    var element = this.initDirective(this.$scope);
+    var parser = element.controller('ngModel').$parsers[0];
+
+    expect(moment.isMoment(parser('2015-07-03 10:30'))).to.be.true;
+  });
+
+  describe('comportment for invalid date', function() {
+    /* global moment: false */
+
+    beforeEach(function() {
+      moment.suppressDeprecationWarnings = true;
+    });
+
+    it('should return undefined for invalid date', function() {
+      this.$scope.event = {
+        allDay: false
+      };
+      var element = this.initDirective(this.$scope);
+      var parser = element.controller('ngModel').$parsers[0];
+
+      expect(parser('this is a bad date')).to.be.undefined;
+    });
+
+    afterEach(function() {
+      moment.suppressDeprecationWarnings = false;
+    });
+  });
+});