(js) Add date picker to navigate in Calendar view

NEWS

@@ -10,6 +10,7 @@ Enhancements
  - [eas] use the preferred email identity in EAS if valid (#3698)
  - [eas] handle inline attachments during EAS content generation
  - [web] all batch operations can now be performed on selected messages in advanced search mode
+ - [web] add date picker to change date, week, or month of current Calendar view
  - [oc] better handling of nested attachments with OpenChange
 
 Bug fixes

UI/Templates/SchedulerUI/UIxCalDayView.wox

@@ -9,21 +9,27 @@
 
   <md-card>
     <md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
-      <md-button class="md-icon-button"
+      <md-button class="sg-icon-button"
                  var:aria-label="yesterdayName"
                  var:date="prevDayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
-      <md-button class="md-icon-button"
+                 md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
+      <md-button class="sg-icon-button"
                  var:aria-label="tomorrowName"
                  var:date="nextDayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
-      <div class="md-flex"><var:string value="currentDayName" /></div>
+                 md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
-      <md-button class="md-icon-button md-accent"
+      <md-datepicker md-hide-icons="triangle"
-                 label:aria-label="Today"
+                     md-open-on-focus="md-open-on-focus"
+                     ng-model="calendar.selectedDate"
+                     ng-change="calendar.changeDate($event, calendar.selectedDate)"
+                     sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button label:aria-label="Today"
                  var:date="todayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)">
+                 ng-click="calendar.changeDate($event)"
-        <md-tooltip><var:string label:value="Today"/></md-tooltip>
+                 md-no-ink="md-no-ink">
-        <md-icon>today</md-icon>
+        <var:string label:value="Today"/>
       </md-button>
       <a class="md-icon-button md-button"
          label:aria-label="Day"

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -12,18 +12,24 @@
       <md-button class="md-icon-button"
                  label:aria-label="Previous Month"
                  var:date="prevMonthQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
+                 md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
       <md-button class="md-icon-button"
                  label:aria-label="Next Month"
                  var:date="nextMonthQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
-      <div class="md-flex"><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
+                 md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
-      <md-button class="md-icon-button md-accent"
+      <md-datepicker md-hide-icons="triangle"
-                 label:aria-label="Today"
+                     md-open-on-focus="md-open-on-focus"
+                     ng-model="calendar.selectedDate"
+                     ng-change="calendar.changeDate($event, calendar.selectedDate)"
+                     sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button label:aria-label="Today"
                  var:date="todayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)">
+                 ng-click="calendar.changeDate($event)"
-        <md-tooltip><var:string label:value="Today"/></md-tooltip>
+                 md-no-ink="md-no-ink">
-        <md-icon>today</md-icon>
+        <var:string label:value="Today"/>
       </md-button>
       <a class="md-icon-button md-button"
          label:aria-label="Day"

UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox

@@ -12,17 +12,24 @@
       <md-button class="md-icon-button"
                  var:aria-label="yesterdayName"
                  var:date="prevDayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
+                 md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
       <md-button class="md-icon-button"
                  var:aria-label="tomorrowName"
                  var:date="nextDayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
-      <div class="md-flex"><var:string value="currentDayName" /></div>
+                 md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
-      <md-button class="md-icon-button md-accent"
+      <md-datepicker md-hide-icons="triangle"
-                 label:aria-label="Today"
+                     md-open-on-focus="md-open-on-focus"
-                 ng-click="app.today()">
+                     ng-model="calendar.selectedDate"
-        <md-tooltip><var:string label:value="Today"/></md-tooltip>
+                     ng-change="calendar.changeDate($event, calendar.selectedDate)"
-        <md-icon>today</md-icon>
+                     sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button label:aria-label="Today"
+                 var:date="todayQueryParameters.day"
+                 ng-click="calendar.changeDate($event)"
+                 md-no-ink="md-no-ink">
+        <var:string label:value="Today"/>
       </md-button>
       <a class="md-icon-button md-button"
          label:aria-label="Day"

UI/Templates/SchedulerUI/UIxCalWeekView.wox

@@ -12,18 +12,24 @@
       <md-button class="md-icon-button"
                  label:aria-label="Previous Week"
                  var:date="prevWeekQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
+                 md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
       <md-button class="md-icon-button"
                  label:aria-label="Next Week"
                  var:date="nextWeekQueryParameters.day"
-                 ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
+                 ng-click="calendar.changeDate($event)"
-      <div class="md-flex"><var:string value="currentWeekName" /></div>
+                 md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
-      <md-button class="md-icon-button md-accent"
+      <md-datepicker md-hide-icons="triangle"
-                 label:aria-label="Today"
+                     md-open-on-focus="md-open-on-focus"
+                     ng-model="calendar.selectedDate"
+                     ng-change="calendar.changeDate($event, calendar.selectedDate)"
+                     sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button label:aria-label="Today"
                  var:date="todayQueryParameters.day"
-                 ng-click="calendar.changeDate($event)">
+                 ng-click="calendar.changeDate($event)"
-        <md-tooltip><var:string label:value="Today"/></md-tooltip>
+                 md-no-ink="md-no-ink">
-        <md-icon>today</md-icon>
+        <var:string label:value="Today"/>
       </md-button>
       <a class="md-icon-button md-button"
          label:aria-label="Day"

UI/WebServerResources/js/Common/sgDatepickerReadonlyInput.directive.js

@@ -0,0 +1,43 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * sgDatepickerReadonlyInput - A directive that disabled the input field of a datepicker.
+   * @memberof SOGo.Common
+   *
+   * @example:
+
+   <md-datepicker md-hide-icons="triangle"
+                  md-open-on-focus="md-open-on-focus"
+                  ng-model="selectedDate"
+                  sg-datepicker-readonly-input>
+  */
+  function sgDatepickerReadonlyInput() {
+    return {
+      link: postLink,
+      require: 'mdDatepicker',
+      restrict: 'A'
+    };
+
+    function postLink(scope, element, attrs, datepickerCtrl) {
+      function getInput() {
+        return element.find('input').eq(0);
+      }
+
+      // We need to wait for the autocomplete directive to be compiled
+      var listener = scope.$watch(getInput, function (input) {
+        if (input.length) {
+          listener(); // self release
+          input.prop('disabled', true);
+          input.parent().addClass('sg-datepicker-readonly-input-container');
+        }
+      });
+    }
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgDatepickerReadonlyInput', sgDatepickerReadonlyInput);
+})();

UI/WebServerResources/js/Common/utils.js

@@ -299,6 +299,8 @@ Date.prototype.addDays = function(nbrDays) {
     milliSeconds = this.getTime() + dstOffset*60*1000;
     this.setTime(milliSeconds);
   }
+
+  return this;
 };
 
 Date.prototype.addHours = function(nbrHours) {
@@ -323,6 +325,56 @@ Date.prototype.beginOfDay = function() {
     return beginOfDay;
 };
 
+Date.prototype.firstWeekOfYearForDate = function(localeProvider) {
+  var firstWeekRule, dayOfWeek, januaryFirst, firstWeek;
+
+  firstWeekRule = localeProvider.firstWeekOfYear;
+
+  januaryFirst = new Date(this.getTime());
+  januaryFirst.setMonth(0);
+  januaryFirst.setDate(1);
+  dayOfWeek = januaryFirst.getDay();
+
+  if (firstWeekRule == 'First4DayWeek') {
+    if ((dayOfWeek + localeProvider.firstDayOfWeek) % 7 < 4)
+      firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
+    else
+      firstWeek = januaryFirst.addDays(7).beginOfWeek(localeProvider.firstDayOfWeek);
+  }
+  else if (firstWeekRule == 'FirstFullWeek') {
+    if (dayOfWeek === 0)
+      firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
+    else
+      firstWeek = januaryFirst.addDays(7).beginOfWeek(localeProvider.firstDayOfWeek);
+  }
+  else {
+    firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
+  }
+
+  return firstWeek;
+};
+
+Date.prototype.getWeek = function(localeProvider) {
+  var firstWeek, previousWeek, weekNumber;
+
+  firstWeek = this.firstWeekOfYearForDate(localeProvider);
+  if (firstWeek.getTime() < this.getTime()) {
+    weekNumber = 1 + Math.floor((this.getTime() - firstWeek.getTime()) / (86400000 * 7));
+  }
+  else
+    {
+      // Date is within the last week of the previous year;
+      // Compute the previous week number to find the week number of the requested date.
+      // The number will either be 52 or 53.
+      previousWeek = new Date(this.getTime());
+      previousWeek.addDays(-7);
+      firstWeek = previousWeek.firstWeekOfYearForDate(localeProvider);
+      weekNumber = 2 + Math.floor((previousWeek.getTime() - firstWeek.getTime()) / (86400000 * 7));
+    }
+
+  return weekNumber;
+};
+
 Date.prototype.beginOfWeek = function(firstDayOfWeek) {
     var offset = firstDayOfWeek - this.getDay();
     if (offset > 0)
@@ -375,7 +427,7 @@ Date.prototype.getHourString = function() {
 Date.prototype.format = function(localeProvider, format) {
   var separators, parts, i, max,
       date = [],
-      validParts = /%[deaAmbByYHIMp]/g,
+      validParts = /%[deaAmbByYUHIMp]/g,
       val = {
         '%d': this.getDate(),                                  // day of month (e.g., 01)
         '%e': this.getDate(),                                  // day of month, space padded
@@ -386,6 +438,7 @@ Date.prototype.format = function(localeProvider, format) {
         '%B': localeProvider.months[this.getMonth()],          // locale's full month name (e.g., January)
         '%y': this.getFullYear().toString().substring(2),      // last two digits of year (00..99)
         '%Y': this.getFullYear(),                              // year
+        '%U': this.getWeek(localeProvider),                    // week of the year
         '%H': this.getHours(),                                 // hour (00..23)
         '%M': this.getMinutes() };                             // minute (00..59)
   val['%I'] = val['%H'] > 12 ? val['%H'] % 12 : val['%H'];     // hour (01..12)

UI/WebServerResources/js/Preferences/Preferences.service.js

@@ -91,6 +91,10 @@
       // Configure date locale
       _this.$mdDateLocaleProvider = Preferences.$mdDateLocaleProvider;
       angular.extend(_this.$mdDateLocaleProvider, data.locale);
+      angular.extend(_this.$mdDateLocaleProvider, {
+        firstDayOfWeek: data.SOGoFirstDayOfWeek,
+        firstWeekOfYear: data.SOGoFirstWeekOfYear
+      });
       _this.$mdDateLocaleProvider.firstDayOfWeek = parseInt(data.SOGoFirstDayOfWeek);
       _this.$mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
         return l('Week %d', weekNumber);
@@ -101,7 +105,7 @@
         return dateString? dateString.parseDate(_this.$mdDateLocaleProvider, data.SOGoShortDateFormat) : new Date(NaN);
       };
       _this.$mdDateLocaleProvider.formatDate = function(date) {
-        return date? date.format(_this.$mdDateLocaleProvider, data.SOGoShortDateFormat) : '';
+        return date? date.format(_this.$mdDateLocaleProvider, date.$dateFormat || data.SOGoShortDateFormat) : '';
       };
       _this.$mdDateLocaleProvider.parseTime = function(timeString) {
         return timeString? timeString.parseDate(_this.$mdDateLocaleProvider, data.SOGoTimeFormat) : new Date(NaN);

UI/WebServerResources/js/Scheduler/CalendarController.js

@@ -6,25 +6,46 @@
   /**
    * @ngInject
    */
-  CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'Calendar', 'Component', 'stateEventsBlocks'];
+  CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'Calendar', 'Component', 'Preferences', 'stateEventsBlocks'];
-  function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
+  function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, Preferences, stateEventsBlocks) {
     var vm = this, deregisterCalendarsList;
 
     // Make the toolbar state of all-day events persistent
     if (angular.isUndefined(CalendarController.expandedAllDays))
       CalendarController.expandedAllDays = false;
 
+    vm.selectedDate = $stateParams.day.asDate();
     vm.expandedAllDays = CalendarController.expandedAllDays;
     vm.toggleAllDays = toggleAllDays;
     vm.views = stateEventsBlocks;
     vm.changeDate = changeDate;
     vm.changeView = changeView;
 
+    Preferences.ready().then(function() {
+      _formatDate(vm.selectedDate);
+    });
+
     // Refresh current view when the list of calendars is modified
     deregisterCalendarsList = $rootScope.$on('calendars:list', updateView);
 
+    // Destroy event listener when the controller is being deactivated
     $scope.$on('$destroy', deregisterCalendarsList);
 
+    function _formatDate(date) {
+      if ($stateParams.view == 'month') {
+        date.setDate(1);
+        date.setHours(12);
+        date.$dateFormat = '%B %Y';
+      }
+      else if ($stateParams.view == 'week') {
+        date.setTime(date.beginOfWeek(Preferences.defaults.SOGoFirstDayOfWeek).getTime());
+        date.$dateFormat = l('Week %d').replace('%d', '%U');
+      }
+      else {
+        date.$dateFormat = '%A';
+      }
+    }
+
     // Expand or collapse all-day events
     function toggleAllDays() {
       CalendarController.expandedAllDays = !CalendarController.expandedAllDays;
@@ -46,8 +67,10 @@
     }
 
     // Change calendar's date
-    function changeDate($event) {
+    function changeDate($event, newDate) {
-      var date = angular.element($event.currentTarget).attr('date');
+      var date = newDate? newDate.getDayString() : angular.element($event.currentTarget).attr('date');
+      if (newDate)
+        _formatDate(newDate);
       $state.go('calendars.view', { day: date });
     }
 

UI/WebServerResources/js/Scheduler/CalendarsController.js

@@ -25,7 +25,7 @@
     vm.showLinks = showLinks;
     vm.showProperties = showProperties;
     vm.subscribeToFolder = subscribeToFolder;
-    vm.today = today;
+    // vm.today = today;
 
     vm.filter = { name: '' };
     vm.toggleSortableMode = toggleSortableMode;
@@ -412,14 +412,14 @@
       });
     }
 
-    function today() {
+    // function today() {
-      var fragments = $window.location.hash.split('/'),
+    //   var fragments = $window.location.hash.split('/'),
-          state = fragments[1],
+    //       state = fragments[1],
-          view = fragments[2],
+    //       view = fragments[2],
-          now = new Date(),
+    //       now = new Date(),
-          path = ['#', state, view, now.getDayString()];
+    //       path = ['#', state, view, now.getDayString()];
-      $window.location = path.join('/');
+    //   $window.location = path.join('/');
-    }
+    // }
   }
 
   angular

UI/WebServerResources/scss/components/datepicker/datePicker.scss

@@ -12,3 +12,6 @@
   margin-left: 0;
 }
 
+.sg-datepicker-readonly-input-container {
+  border-bottom: 0;
+}