(feat) integrated md-datepicker and enabled it in the Preferences module (Vacation)

The date picker suffers from this bug: https://github.com/angular/material/issues/4192

Which makes it not that usable right now.

UI/Templates/PreferencesUI/UIxPreferences.wox

@@ -748,11 +748,9 @@
                         <var:string label:value="Disable auto reply on" />
                       </md-checkbox>
 
-                      <div class="value">
+                        <md-datepicker
-                        <p class="PseudoField-inputLike--underline">
+                            ng-disabled="app.preferences.defaults.Vacation.endDateEnabled == 0"
-                          <input ng-disabled="app.preferences.defaults.Vacation.endDateEnabled == 0" type="date" ng-model="app.preferences.defaults.Vacation.endDate"/>
+                            ng-model="app.preferences.defaults.Vacation.endDate"><!-- datepicker --></md-datepicker>
-                        </p>
-                      </div>
 
                     </div>
 

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

@@ -14,23 +14,38 @@
     this.settings = {};
 
     this.defaultsPromise = Preferences.$$resource.fetch("jsonDefaults").then(function(data) {
-        // We swap $key -> _$key to avoid an Angular bug (https://github.com/angular/angular.js/issues/6266)
+      // We swap $key -> _$key to avoid an Angular bug (https://github.com/angular/angular.js/issues/6266)
-        var labels = _.object(_.map(data.SOGoMailLabelsColors, function(value, key) {
+      var labels = _.object(_.map(data.SOGoMailLabelsColors, function(value, key) {
-          if (key.charAt(0) == '$')
+        if (key.charAt(0) == '$')
-            return ['_' + key, value];
+          return ['_' + key, value];
-          return [key, value];
+        return [key, value];
-        }));
+      }));
 
-        data.SOGoMailLabelsColors = labels;
+      data.SOGoMailLabelsColors = labels;
 
-        // We convert our list of autoReplyEmailAddresses/forwardAddress into a string.
+      // We convert our list of autoReplyEmailAddresses/forwardAddress into a string.
-        if (data.Vacation && data.Vacation.autoReplyEmailAddresses)
+      // We also convert our date objects into real date, otherwise we'll have strings
+      // or undefined values and the md-datepicker does NOT like this.
+      if (data.Vacation) {
+        if (data.Vacation.endDate)
+          data.Vacation.endDate = new Date(parseInt(data.Vacation.endDate) * 1000);
+        else {
+          data.Vacation.endDateEnabled = 0;
+          data.Vacation.endDate = new Date();
+        }
+
+        if (data.Vacation.autoReplyEmailAddresses)
           data.Vacation.autoReplyEmailAddresses = data.Vacation.autoReplyEmailAddresses.join(",");
+      } else {
+        data.Vacation = {};
+        data.Vacation.endDateEnabled = 0;
+        data.Vacation.endDate = new Date();
+      }
 
-        if (data.Forward && data.Forward.forwardAddress)
+      if (data.Forward && data.Forward.forwardAddress)
-          data.Forward.forwardAddress = data.Forward.forwardAddress.join(",");
+        data.Forward.forwardAddress = data.Forward.forwardAddress.join(",");
 
-        angular.extend(_this.defaults, data);
+      angular.extend(_this.defaults, data);
 
       return _this.defaults;
     });
@@ -42,8 +57,6 @@
             var match = /^(.+)\s<(\S+)>$/.exec(value);
             return new Preferences.$User({uid: key, cn: match[1], c_email: match[2]});
           });
-        else
-          data.Calendar.PreventInvitationsWhitelist = [];
 
       angular.extend(_this.settings, data);
 
@@ -134,8 +147,15 @@
 
     preferences.defaults.SOGoMailLabelsColors = labels;
 
-    if (preferences.defaults.Vacation && preferences.defaults.Vacation.autoReplyEmailAddresses)
+    if (preferences.defaults.Vacation) {
-      preferences.defaults.Vacation.autoReplyEmailAddresses = preferences.defaults.Vacation.autoReplyEmailAddresses.split(",");
+      if (preferences.defaults.Vacation.endDateEnabled)
+        preferences.defaults.Vacation.endDate = preferences.defaults.Vacation.endDate.getTime()/1000;
+      else
+        preferences.defaults.Vacation.endDate = 0;
+
+      if (preferences.defaults.Vacation.autoReplyEmailAddresses)
+        preferences.defaults.Vacation.autoReplyEmailAddresses = preferences.defaults.Vacation.autoReplyEmailAddresses.split(",");
+    }
 
     if (preferences.defaults.Forward && preferences.defaults.Forward.forwardAddress)
       preferences.defaults.Forward.forwardAddress = preferences.defaults.Forward.forwardAddress.split(",");

UI/WebServerResources/scss/components/datepicker/_extends-calendar.scss

@@ -0,0 +1,2 @@
+/*! datepicker/_extends.scss - */
+@import '../../../angular-material/src/components/datepicker/calendar.scss';

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

@@ -0,0 +1,2 @@
+/*! datepicker/_extends.scss - */
+@import '../../../angular-material/src/components/datepicker/datePicker.scss';

UI/WebServerResources/scss/components/datepicker/calendar.scss

@@ -0,0 +1,2 @@
+/// calendar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+@import 'extends-calendar';

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

@@ -0,0 +1,2 @@
+/// datePicker.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+@import 'extends-datePicker';

UI/WebServerResources/scss/components/menu/menu.scss

@@ -1,2 +1,2 @@
-/// menu..scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// menu.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';

UI/WebServerResources/scss/core/variables.scss

@@ -165,3 +165,9 @@ $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !defa
 $swift-ease-in-out-duration: 0.5s !default;
 $swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+// Fab Buttons (shared between buttons.scss and fab*.scss)
+// -------------------------------------------
+$button-fab-width: rem(5.600) !default;
+$button-fab-height: rem(5.600) !default;
+$button-fab-padding: rem(1.60) !default;

UI/WebServerResources/scss/styles.scss

@@ -33,9 +33,11 @@
 @import 'components/checkbox/checkbox';
 @import 'components/chips/chips';
 @import 'components/content/content';
+@import 'components/datepicker/calendar';
+@import 'components/datepicker/datePicker';
 @import 'components/dialog/dialog';
 @import 'components/divider/divider';
-//@import 'components/favActions/fabActions';
+//@import 'components/fabActions/fabActions';
 @import 'components/fabSpeedDial/fabSpeedDial';
 //@import 'components/fabToolbar/fabToolbar';
 //@import 'components/fabTrigger/fabTrigger';