Merge pull request #2695 from kravets-levko/feature/better-datetime-i…

…nputs

Improve Date/DateTime type parameters

client/.babelrc

@@ -5,6 +5,10 @@
     "transform-object-assign",
     ["babel-plugin-transform-builtin-extend", {
       "globals": ["Error"]
+    }],
+    ["import", {
+      "libraryName": "antd",
+      "style": true
     }]
   ]
 }

client/app/components/DateInput.jsx

@@ -0,0 +1,37 @@
+import moment from 'moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { DatePicker } from 'antd';
+
+function DateInput({
+  value,
+  onSelect,
+  clientConfig,
+}) {
+  const format = clientConfig.dateFormat || 'YYYY-MM-DD';
+  const defaultValue = moment(value, format);
+  return (
+    <DatePicker
+      {...(defaultValue.isValid() ? { defaultValue } : {})}
+      format={format}
+      placeholder="Select Date"
+      onChange={onSelect}
+    />
+  );
+}
+
+DateInput.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  onSelect: PropTypes.func,
+};
+
+DateInput.defaultProps = {
+  value: Date.now(),
+  onSelect: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('dateInput', react2angular(DateInput, null, ['clientConfig']));
+}
+

client/app/components/DateTimeInput.jsx

@@ -0,0 +1,42 @@
+import moment from 'moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { DatePicker } from 'antd';
+
+function DateTimeInput({
+  value,
+  withSeconds,
+  onSelect,
+  clientConfig,
+}) {
+  const format = (clientConfig.dateFormat || 'YYYY-MM-DD') +
+    (withSeconds ? ' HH:mm:ss' : ' HH:mm');
+  const defaultValue = moment(value, format);
+  return (
+    <DatePicker
+      showTime
+      {...(defaultValue.isValid() ? { defaultValue } : {})}
+      format={format}
+      placeholder="Select Date and Time"
+      onChange={onSelect}
+    />
+  );
+}
+
+DateTimeInput.propTypes = {
+  value: PropTypes.instanceOf(Date),
+  withSeconds: PropTypes.bool,
+  onSelect: PropTypes.func,
+};
+
+DateTimeInput.defaultProps = {
+  value: Date.now(),
+  withSeconds: false,
+  onSelect: () => {},
+};
+
+export default function init(ngModule) {
+  ngModule.component('dateTimeInput', react2angular(DateTimeInput, null, ['clientConfig']));
+}
+

client/app/components/parameters.html

@@ -11,9 +11,12 @@
         <i class="zmdi zmdi-settings"></i>
     </button>
     <span ng-switch="param.type">
-      <input ng-switch-when="datetime-with-seconds" type="datetime-local" step="1" class="form-control" ng-model="param.ngModel">
-      <input ng-switch-when="datetime-local" type="datetime-local" class="form-control" ng-model="param.ngModel">
-      <input ng-switch-when="date" type="date" class="form-control" ng-model="param.ngModel">
+      <date-time-input ng-switch-when="datetime-with-seconds" value="param.ngModel" with-seconds="true"
+        on-select="param.updateValue"></date-time-input>
+      <date-time-input ng-switch-when="datetime-local" value="param.ngModel"
+        on-select="param.updateValue"></date-time-input>
+      <date-input ng-switch-when="date" value="param.ngModel"
+        on-select="param.updateValue"></date-input>
       <span ng-switch-when="enum">
         <select ng-model="param.value" class="form-control">
           <option ng-repeat="option in extractEnumOptions(param.enumOptions)" value="{{option}}">{{option}}</option>

client/app/services/query.js

@@ -28,6 +28,12 @@ class Parameter {
     this.global = parameter.global;
     this.enumOptions = parameter.enumOptions;
     this.queryId = parameter.queryId;
+
+    // method to update parameter value from date/time picker component
+    // (react does not support two-way binding with `ngModel`)
+    this.updateValue = (value) => {
+      this.ngModel = value;
+    };
   }
 
   get ngModel() {