Explorar o código

HUE-2133 [search] Support Solr date facet format in widgets

Added custom switch
Enrico Berti %!s(int64=11) %!d(string=hai) anos
pai
achega
348e424
Modificáronse 2 ficheiros con 105 adicións e 78 borrados
  1. 100 78
      apps/search/src/search/templates/search.mako
  2. 5 0
      apps/search/static/css/search.css

+ 100 - 78
apps/search/src/search/templates/search.mako

@@ -314,7 +314,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
         <div class="slider-cnt" data-bind="slider: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
       <!-- /ko -->
       <!-- ko if: properties.isDate() -->
-        <div data-bind="simpledaterangepicker: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
+        <div data-bind="daterangepicker: {start: properties.start, end: properties.end, gap: properties.gap, min: properties.min, max: properties.max}"></div>
         <br/>
       <!-- /ko -->
     <!-- /ko -->
@@ -714,8 +714,9 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       </span>
     </div>
 
-    <div style="padding-bottom: 10px; text-align: left">
-      <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i></a>
+    <div style="padding-bottom: 10px; text-align: right; padding-right: 20px">
+      <span class="facet-field-label">${ _('Zoom') }</span>
+      <a href="javascript:void(0)" data-bind="click: $root.collection.timeLineZoom"><i class="fa fa-search-minus"></i> ${ _('reset') }</a> &nbsp;|&nbsp;
       <span class="facet-field-label">${ _('Group by') }</span>
       <select class="input-medium" data-bind="options: $root.query.multiqs, optionsValue: 'id',optionsText: 'label', value: $root.query.selectedMultiq"></select>
     </div>
@@ -955,7 +956,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 <link rel="stylesheet" href="/static/ext/css/bootstrap-timepicker.min.css">
 <link rel="stylesheet" href="/static/css/bootstrap-spinedit.css">
 <link rel="stylesheet" href="/static/css/bootstrap-slider.css">
-<link rel="stylesheet" href="/static/css/bootstrap-daterangepicker.css">
 <link rel="stylesheet" href="/static/ext/css/nv.d3.min.css">
 <link rel="stylesheet" href="/search/static/css/nv.d3.css">
 <link rel="stylesheet" href="/static/ext/chosen/chosen.min.css">
@@ -972,7 +972,6 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 <script src="/static/ext/js/bootstrap-timepicker.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/bootstrap-spinedit.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/bootstrap-slider.js" type="text/javascript" charset="utf-8"></script>
-<script src="/static/js/bootstrap-daterangepicker.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/ko.editable.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/shortcut.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/freshereditor.js" type="text/javascript" charset="utf-8"></script>
@@ -1394,7 +1393,7 @@ $(document).ready(function () {
     }
   }
 
-  ko.bindingHandlers.simpledaterangepicker = {
+  ko.bindingHandlers.daterangepicker = {
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       var DATE_FORMAT = "YYYY-MM-DD";
       var TIME_FORMAT = "HH:mm:ss";
@@ -1441,7 +1440,7 @@ $(document).ready(function () {
       }
 
       var _tmpl = $('<div class="simpledaterangepicker">' +
-                    '<div class="facet-field-cnt">' +
+                    '<div class="facet-field-cnt picker">' +
                       '<div class="facet-field-label facet-field-label-fixed-width">${ _('Start') }</div>' +
                       '<div class="input-prepend input-group">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
@@ -1452,7 +1451,7 @@ $(document).ready(function () {
                         '<input type="text" class="input-mini form-control start-time" />' +
                       '</div>' +
                     '</div>' +
-                    '<div class="facet-field-cnt">' +
+                    '<div class="facet-field-cnt picker">' +
                       '<div class="facet-field-label facet-field-label-fixed-width">${ _('End') }</div>' +
                       '<div class="input-prepend input-group">' +
                         '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
@@ -1463,46 +1462,95 @@ $(document).ready(function () {
                         '<input type="text" class="input-mini form-control end-time" />' +
                       '</div>' +
                     '</div>' +
-                    '<div class="facet-field-cnt">' +
+                    '<div class="facet-field-cnt picker">' +
                       '<div class="facet-field-label facet-field-label-fixed-width">${ _('Interval') }</div>' +
                       '<select class="input-small interval-select" style="margin-right: 6px">' +
                           renderOptions(_intervalOptions) +
                       '</select>' +
                       '<input class="input interval hide" type="text" value="" />' +
                     '</div>' +
+                    '<div class="facet-field-cnt picker">' +
+                      '<div class="facet-field-label facet-field-label-fixed-width"></div>' +
+                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar-o"></i> ${ _('Custom properties') }</a></div>' +
+                    '</div>' +
+                    '<div class="facet-field-cnt custom">' +
+                      '<div class="facet-field-label facet-field-label-fixed-width">${ _('Start') }</div>' +
+                      '<div class="input-prepend input-group">' +
+                        '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
+                        '<input type="text" class="input-large form-control start-date-custom" />' +
+                      '</div>' +
+                    '</div>' +
+                    '<div class="facet-field-cnt custom">' +
+                      '<div class="facet-field-label facet-field-label-fixed-width">${ _('End') }</div>' +
+                      '<div class="input-prepend input-group">' +
+                        '<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>' +
+                        '<input type="text" class="input-large form-control end-date-custom" />' +
+                      '</div>' +
+                    '</div>' +
+                    '<div class="facet-field-cnt custom">' +
+                      '<div class="facet-field-label facet-field-label-fixed-width">${ _('Interval') }</div>' +
+                      '<div class="input-prepend input-group">' +
+                        '<span class="add-on input-group-addon"><i class="fa fa-repeat"></i></span>' +
+                        '<input type="text" class="input-large form-control interval-custom" />' +
+                      '</div>' +
+                    '</div>' +
+                    '<div class="facet-field-cnt custom">' +
+                      '<div class="facet-field-label facet-field-label-fixed-width"></div>' +
+                      '<div class="facet-field-switch"><a href="javascript:void(0)"><i class="fa fa-calendar"></i> ${ _('Show pickers') }</a></div>' +
+                    '</div>' +
+
                   '</div>'
       );
 
       _tmpl.insertAfter(_el);
 
-      _tmpl.find(".start-date").val(moment(_options.min()).format(DATE_FORMAT));
+      var _minMoment = moment(_options.min());
+      var _maxMoment = moment(_options.max());
+      var _startMoment = moment(_options.start());
+      var _endMoment = moment(_options.end());
+
+      if (_minMoment.isValid()) {
+        _tmpl.find(".facet-field-cnt.custom").hide();
+        _tmpl.find(".facet-field-cnt.picker").show();
+        _tmpl.find(".start-date").val(_minMoment.format(DATE_FORMAT));
+        _tmpl.find(".start-time").val(_minMoment.format(TIME_FORMAT));
+        _tmpl.find(".end-date").val(_maxMoment.format(DATE_FORMAT));
+        _tmpl.find(".end-time").val(_maxMoment.format(TIME_FORMAT));
+        _tmpl.find(".interval").val(_options.gap());
+        _tmpl.find(".interval-custom").val(_options.gap());
+      }
+      else {
+        _tmpl.find(".facet-field-cnt.custom").show();
+        _tmpl.find(".facet-field-cnt.picker").hide();
+        _tmpl.find(".start-date-custom").val(_options.min())
+        _tmpl.find(".end-date-custom").val(_options.max())
+        _tmpl.find(".interval-custom").val(_options.gap())
+      }
+
       _tmpl.find(".start-date").datepicker({
         format: DATE_FORMAT.toLowerCase()
       }).on("changeDate", function () {
         rangeHandler(true);
       });
 
-      _tmpl.find(".start-time").val(moment(_options.min()).format(TIME_FORMAT));
       _tmpl.find(".start-time").timepicker({
-          minuteStep: 1,
-          showSeconds: true,
-          showMeridian: false,
-          defaultTime: false
+        minuteStep: 1,
+        showSeconds: true,
+        showMeridian: false,
+        defaultTime: false
       });
 
-      _tmpl.find(".end-date").val(moment(_options.max()).format(DATE_FORMAT));
       _tmpl.find(".end-date").datepicker({
         format: DATE_FORMAT.toLowerCase()
       }).on("changeDate", function () {
         rangeHandler(false);
       });
 
-      _tmpl.find(".end-time").val(moment(_options.max()).format(TIME_FORMAT));
       _tmpl.find(".end-time").timepicker({
-          minuteStep: 1,
-          showSeconds: true,
-          showMeridian: false,
-          defaultTime: false
+        minuteStep: 1,
+        showSeconds: true,
+        showMeridian: false,
+        defaultTime: false
       });
 
       _tmpl.find(".start-time").on("change", function () {
@@ -1519,7 +1567,33 @@ $(document).ready(function () {
         }, 200);
       });
 
-      rangeHandler(true);
+      if (_minMoment.isValid()) {
+        rangeHandler(true);
+      }
+
+      _tmpl.find(".facet-field-cnt.picker .facet-field-switch a").on("click", function(){
+        _tmpl.find(".facet-field-cnt.custom").show();
+        _tmpl.find(".facet-field-cnt.picker").hide();
+      });
+
+      _tmpl.find(".facet-field-cnt.custom .facet-field-switch a").on("click", function(){
+        _tmpl.find(".facet-field-cnt.custom").hide();
+        _tmpl.find(".facet-field-cnt.picker").show();
+      });
+
+      _tmpl.find(".start-date-custom").on("change", function () {
+        _options.min(_tmpl.find(".start-date-custom").val());
+        _options.start(_options.min());
+      });
+
+      _tmpl.find(".end-date-custom").on("change", function () {
+        _options.max(_tmpl.find(".end-date-custom").val());
+        _options.end(_options.max());
+      });
+
+      _tmpl.find(".interval-custom").on("change", function () {
+        _options.gap(_tmpl.find(".interval-custom").val());
+      });
 
       function matchIntervals(){
         if (_tmpl.find(".interval-select option[value='"+_options.gap()+"']").length > 0){
@@ -1532,8 +1606,6 @@ $(document).ready(function () {
         }
       }
 
-      _tmpl.find(".interval").val(_options.gap());
-
       _tmpl.find(".interval-select").on("change", function () {
         if (_tmpl.find(".interval-select").val() == ""){
           _tmpl.find(".interval").show();
@@ -1548,6 +1620,7 @@ $(document).ready(function () {
       _tmpl.find(".interval").on("change", function () {
         if (_tmpl.find(".interval-select").val() == ""){
           _options.gap(_tmpl.find(".interval").val());
+          _tmpl.find(".interval-custom").val(_options.gap());
         }
       });
 
@@ -1591,6 +1664,9 @@ $(document).ready(function () {
         _options.max(_calculatedEndDate.format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
         _options.end(_options.max());
 
+        _tmpl.find(".start-date-custom").val(_options.min());
+        _tmpl.find(".end-date-custom").val(_options.max());
+
         var _opts = [];
         // hide not useful options from interval
         if (_calculatedEndDate.diff(_calculatedStartDate, 'minutes') > 1 && _calculatedEndDate.diff(_calculatedStartDate, 'minutes') <= 60){
@@ -1629,60 +1705,6 @@ $(document).ready(function () {
   }
 
 
-  ko.bindingHandlers.daterangepicker = {
-    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
-      var _el = $(element);
-      var _options = $.extend(valueAccessor(), {});
-      _el.val(_options.min() + ' ${_('to')} ' + _options.max() + ', ' + _options.gap());
-      _el.daterangepicker({
-            startDate: _options.min() ? moment(_options.min()).utc() : moment().subtract('days', 29),
-            endDate: _options.max() ? moment(_options.max()).utc() : moment(),
-            interval: _options.gap() ? _options.gap() : '+30MINUTES',
-            showDropdowns: true,
-            showWeekNumbers: true,
-            timePicker: true,
-            timePickerIncrement: 1,
-            timePicker12Hour: false,
-            ranges: {
-              'Today': [moment(), moment()],
-              'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
-              'Last 7 Days': [moment().subtract('days', 6), moment()],
-              'Last 30 Days': [moment().subtract('days', 29), moment()],
-              'This Month': [moment().startOf('month'), moment().endOf('month')],
-              'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
-            },
-            opens: 'right',
-            buttonClasses: ['btn btn-default'],
-            applyClass: 'btn-small btn-primary',
-            cancelClass: 'btn-small',
-            format: 'MM/DD/YYYY HH:mm:ss',
-            separator: ' ${_('to')} ',
-            locale: {
-              applyLabel: '${_('Pick')}',
-              cancelLabel: '${_('Cancel')}',
-              fromLabel: '${_('From')}',
-              toLabel: '${_('To')}',
-              intervalLabel: '${_('Interval')}',
-              customRangeLabel: '${_('Custom')}',
-              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-              firstDay: 1
-            }
-          },
-          function (start, end, interval, label) {
-            _options.min(start.utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-            _options.start(start.utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-            _options.max(end.utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-            _options.end(end.utc().format("YYYY-MM-DD[T]HH:mm:ss[Z]"));
-            _options.gap(interval);
-            _el.val(_options.min() + ' ${_('to')} ' + _options.max() + ', ' + _options.gap());
-          });
-    },
-    update: function (element, valueAccessor, allBindingsAccessor) {
-      var _options = $.extend(valueAccessor(), {});
-    }
-  }
-
   ko.bindingHandlers.augmenthtml = {
     render: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       var _val = ko.unwrap(valueAccessor());

+ 5 - 0
apps/search/static/css/search.css

@@ -570,6 +570,11 @@ body.modal-open {
   margin-bottom: 6px;
 }
 
+.facet-field-switch {
+  display: inline;
+  margin-top: 10px;
+}
+
 .facet-field-label {
   color: #333;
   font-size: 11px;