From 51a700b6ce111ac02945412c32ebbbd1d2f2326b Mon Sep 17 00:00:00 2001
From: Dani Herrero <dherrero@alfatecsistemas.es>
Date: Wed, 7 Jun 2017 13:27:57 +0200
Subject: [PATCH] date-picker v1

---
 client/core/src/date-picker/date-picker.js    | 28 ++++++++++++++-----
 .../src/filter-panel/filter-panel.html        |  4 +--
 client/production/src/index/index.html        |  2 +-
 client/vendor/src/flatpickr.js                |  6 ++++
 package.json                                  |  1 +
 5 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 client/vendor/src/flatpickr.js

diff --git a/client/core/src/date-picker/date-picker.js b/client/core/src/date-picker/date-picker.js
index 8b02d1236..9f4a1647b 100644
--- a/client/core/src/date-picker/date-picker.js
+++ b/client/core/src/date-picker/date-picker.js
@@ -2,12 +2,13 @@ import {module as _module} from '../module';
 import * as resolveFactory from '../lib/resolveDefaultComponents';
 import * as normalizerFactory from '../lib/inputAttrsNormalizer';
 import * as util from '../lib/util';
+import Flatpickr from 'vendor/src/flatpickr';
 
 const _NAME = 'datePicker';
 export const NAME = util.getName(_NAME);
 
-directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
-export function directive(resolve, normalizer) {
+directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME, '$translate'];
+export function directive(resolve, normalizer, $translate) {
     return {
         restrict: 'E',
         template: function(_, attrs) {
@@ -15,12 +16,25 @@ export function directive(resolve, normalizer) {
             return resolve.getTemplate(_NAME, attrs);
         },
         link: function(scope, element, attrs) {
-            scope.$watch(attrs.model, () => {
-                let mdlField = element[0].firstChild.MaterialTextfield;
-                if (mdlField)
-                    mdlField.updateClasses_();
+            let input = element[0];
+            let vp;
+            let initOptions = {};
+
+            if (attrs.iniOpts)
+                initOptions = scope.$eval(attrs.iniOpts);
+
+            if (!initOptions.locale)
+                initOptions.locale = $translate.use();
+
+            if (!input.matches('input'))
+                input = input.querySelector('input');
+
+            if (input)
+                vp = new Flatpickr(input, initOptions);
+
+            element.on('$destroy', function() {
+                vp.destroy();
             });
-            componentHandler.upgradeElement(element[0].firstChild);
         }
     };
 }
diff --git a/client/production/src/filter-panel/filter-panel.html b/client/production/src/filter-panel/filter-panel.html
index 2bb03ead0..aa47f9066 100644
--- a/client/production/src/filter-panel/filter-panel.html
+++ b/client/production/src/filter-panel/filter-panel.html
@@ -2,7 +2,7 @@
     <form ng-submit="$ctrl.onSearch()">
         <vn-horizontal>
             <vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield>
-            <vn-textfield vn-one label="Fecha" model="$ctrl.filter.date"></vn-textfield>
+            <vn-date-picker vn-one label="Fecha" model="$ctrl.filter.date"></vn-date-picker>
         </vn-horizontal>
         <vn-horizontal>
              <vn-autocomplete vn-one
@@ -13,7 +13,7 @@
                     value-field="id"
                     label="Provincia">
                 </vn-autocomplete>
-            <vn-textfield vn-one label="Hora" model="$ctrl.filter.hour"></vn-textfield>
+            <vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true}" model="$ctrl.filter.hour"></n-date-picker>
         </vn-horizontal>
         <vn-horizontal>
             <vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check>
diff --git a/client/production/src/index/index.html b/client/production/src/index/index.html
index 4cf14099c..bdc2da7ea 100644
--- a/client/production/src/index/index.html
+++ b/client/production/src/index/index.html
@@ -1,5 +1,5 @@
 <vn-card margin-large>
-   <mg-ajax path="" options="vnIndex"></mg-ajax>
+   <!--<mg-ajax path="" options="vnIndex"></mg-ajax>-->
    <vn-vertical pad-medium>
        <vn-horizontal vn-one>
             <vn-title vn-one><span translate>Localizador</span></vn-title>           
diff --git a/client/vendor/src/flatpickr.js b/client/vendor/src/flatpickr.js
new file mode 100644
index 000000000..8637b3b6a
--- /dev/null
+++ b/client/vendor/src/flatpickr.js
@@ -0,0 +1,6 @@
+import Flatpickr from 'flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
+import 'flatpickr/dist/themes/material_orange.css';
+import localeEs from 'flatpickr/dist/l10n/es';
+Flatpickr.l10ns.es = localeEs.es;
+export default Flatpickr;
diff --git a/package.json b/package.json
index fbbcc1bce..2050ddab2 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "angular-paging": "^2.2.2",
     "angular-translate": "^2.13.1",
     "angular-translate-loader-partial": "^2.13.1",
+    "flatpickr": "^2.6.3",
     "material-design-lite": "^1.3.0",
     "mg-crud": "^1.1.2",
     "oclazyload": "^0.6.3",