Prechádzať zdrojové kódy

HUE-2132 [search] Offer field sorting within the HTML widget

Re-use the gridlayout header sorting.
Minor issue is that the list can overflow now.
Romain Rigaux 11 rokov pred
rodič
commit
3c011bca85

+ 45 - 31
apps/search/src/search/templates/search.mako

@@ -308,6 +308,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   <!-- /ko -->
 </script>
 
+
 <script type="text/html" id="facet-toggle">
     <div class="facet-field-cnt" data-bind="visible: properties.canRange">
       <span class="facet-field-label facet-field-label-fixed-width">${ _('Type') }</span>
@@ -483,28 +484,7 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
             <thead>
               <tr data-bind="visible: $root.collection.template.fieldsSelected().length > 0">
                 <th style="width: 18px">&nbsp;</th>
-                <!-- ko foreach: $root.collection.template.fieldsSelected -->
-                <th data-bind="with: $root.collection.getTemplateField($data), event: { mouseover: $root.enableGridlayoutResultChevron, mouseout: $root.disableGridlayoutResultChevron }" style="white-space: nowrap">
-                  <div style="display: inline-block; width:20px;">
-                    <a href="javascript: void(0)" data-bind="click: function(){ $root.collection.translateSelectedField($index(), 'left'); }">
-                      <i class="fa fa-chevron-left" data-bind="visible: $root.toggledGridlayoutResultChevron() && $index() > 0"></i>
-                      <i class="fa fa-chevron-left" style="color: #FFF" data-bind="visible: !$root.toggledGridlayoutResultChevron() || $index() == 0"></i>
-                    </a>
-                  </div>
-                  <div style="display: inline-block;">
-                    <a href="javascript: void(0)" data-bind="click: $root.collection.toggleSortColumnGridLayout" title="${ _('Click to sort') }">
-                      <span data-bind="text: name"></span>
-                      <i class="fa" data-bind="visible: sort.direction() != null, css: { 'fa-chevron-down': sort.direction() == 'desc', 'fa-chevron-up': sort.direction() == 'asc' }"></i>
-                    </a>
-                  </div>
-                  <div style="display: inline-block; width:20px;">
-                    <a href="javascript: void(0)" data-bind="click: function(){ $root.collection.translateSelectedField($index(), 'right'); }">
-                      <i class="fa fa-chevron-right" data-bind="visible: $root.toggledGridlayoutResultChevron() && $index() < $root.collection.template.fields().length - 1"></i>
-                      <i class="fa fa-chevron-up" style="color: #FFF" data-bind="visible: !$root.toggledGridlayoutResultChevron() || $index() == $root.collection.template.fields().length - 1,"></i>
-                    </a>
-                  </div>
-                </th>
-                <!-- /ko -->
+                <div data-bind="template: {name: 'result-sorting'}"></div>
               </tr>
               <tr data-bind="visible: $root.collection.template.fieldsSelected().length == 0">
                 <th style="width: 18px">&nbsp;</th>
@@ -633,12 +613,14 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
       <div class="widget-section widget-css-section" style="display: none">
         <textarea data-bind="codemirror: {data: $root.collection.template.extracode, lineNumbers: true, htmlMode: true, mode: 'text/html' }"></textarea>
       </div>
-      <div class="widget-section widget-settings-section" style="display: none, min-height:200px">
+      <div class="widget-section widget-settings-section" style="display: none">
         ${ _('Sorting') }
 
-        <div data-bind="foreach: $root.collection.template.fieldsSelected">
-          <span data-bind="text: $data"></span>
-        </div>
+        <table>
+          <tr>
+            <div data-bind="template: {name: 'result-sorting'}"></div>
+           </tr>
+        </table>
         <br/>
       </div>
     <!-- /ko -->
@@ -665,6 +647,33 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
   <!-- /ko -->
 </script>
 
+
+<script type="text/html" id="result-sorting">
+<!-- ko foreach: $root.collection.template.fieldsSelected -->
+<th data-bind="with: $root.collection.getTemplateField($data), event: { mouseover: $root.enableGridlayoutResultChevron, mouseout: $root.disableGridlayoutResultChevron }" style="white-space: nowrap">
+  <div style="display: inline-block; width:20px;">
+    <a href="javascript: void(0)" data-bind="click: function(){ $root.collection.translateSelectedField($index(), 'left'); }">
+      <i class="fa fa-chevron-left" data-bind="visible: $root.toggledGridlayoutResultChevron() && $index() > 0"></i>
+      <i class="fa fa-chevron-left" style="color: #FFF" data-bind="visible: !$root.toggledGridlayoutResultChevron() || $index() == 0"></i>
+    </a>
+  </div>
+  <div style="display: inline-block;">
+    <a href="javascript: void(0)" data-bind="click: $root.collection.toggleSortColumnGridLayout" title="${ _('Click to sort') }">
+      <span data-bind="text: name"></span>
+      <i class="fa" data-bind="visible: sort.direction() != null, css: { 'fa-chevron-down': sort.direction() == 'desc', 'fa-chevron-up': sort.direction() == 'asc' }"></i>
+    </a>
+  </div>
+  <div style="display: inline-block; width:20px;">
+    <a href="javascript: void(0)" data-bind="click: function(){ $root.collection.translateSelectedField($index(), 'right'); }">
+      <i class="fa fa-chevron-right" data-bind="visible: $root.toggledGridlayoutResultChevron() && $index() < $root.collection.template.fields().length - 1"></i>
+      <i class="fa fa-chevron-up" style="color: #FFF" data-bind="visible: !$root.toggledGridlayoutResultChevron() || $index() == $root.collection.template.fields().length - 1,"></i>
+    </a>
+  </div>
+</th>
+<!-- /ko -->
+</script>
+
+
 <script type="text/html" id="resultset-pagination">
 <div style="text-align: center; margin-top: 4px">
   <a href="javascript: void(0)" title="${ _('Previous') }">
@@ -1207,6 +1216,7 @@ $(document).ready(function () {
 
   $(document).on("click", ".widget-settings-pill", function(){
     $(this).parents(".card-body").find(".widget-section").hide();
+    selectAllCollectionFields(); // Make sure all the collection fields appear
     $(this).parents(".card-body").find(".widget-settings-section").show();
     $(this).parent().siblings().removeClass("active");
     $(this).parent().addClass("active");
@@ -1929,14 +1939,18 @@ $(document).ready(function () {
       viewModel.collection.template.fieldsSelected([])
     }
     else {
-      var _fields = [];
-      $.each(viewModel.collection.fields(), function (index, field) {
-        _fields.push(field.name());
-      });
-      viewModel.collection.template.fieldsSelected(_fields);
+      selectAllCollectionFields();
     }
   }
 
+  function selectAllCollectionFields() {
+    var _fields = [];
+    $.each(viewModel.collection.fields(), function (index, field) {
+      _fields.push(field.name());
+    });
+    viewModel.collection.template.fieldsSelected(_fields);
+  }
+
   var selectedWidget = null;
   function showAddFacetDemiModal(widget) {
     if (["resultset-widget", "html-resultset-widget", "filter-widget"].indexOf(widget.widgetType()) == -1) {

+ 59 - 61
apps/search/static/js/search.ko.js

@@ -302,15 +302,15 @@ var Query = function (vm, query) {
       }));      
     } else {
       if (fq.filter().indexOf(data.from) > -1) { // Unselect
-      fq.filter.remove(data.from);
-      $.each(fq.properties(), function (index, prop) {
-        if (prop && prop.from() == data.from) {
-          fq.properties.remove(prop);
-        }
-      });
-      if (fq.filter().length == 0) {
+        fq.filter.remove(data.from);
+        $.each(fq.properties(), function (index, prop) {
+          if (prop && prop.from() == data.from) {
+            fq.properties.remove(prop);
+          }
+        });
+        if (fq.filter().length == 0) {
           self.removeFilter(ko.mapping.fromJS({'id': data.widget_id}));
-      }      
+        }      
       } else {
        fq.filter.push(data.from);
        fq.properties.push(ko.mapping.fromJS({'from': data.from, 'to': data.to}));
@@ -337,12 +337,12 @@ var Query = function (vm, query) {
   };
 
   self.paginate = function (direction) {
-  if (direction == 'next') {
-    self.start(self.start() + vm.collection.template.rows() * 1.0);
-  } else {
-    self.start(self.start() - vm.collection.template.rows() * 1.0);
-  }
-  vm.search();
+    if (direction == 'next') {
+      self.start(self.start() + vm.collection.template.rows() * 1.0);
+    } else {
+      self.start(self.start() - vm.collection.template.rows() * 1.0);
+    }
+    vm.search();
   };
 };
 
@@ -411,7 +411,7 @@ var Collection = function (vm, collection) {
 
   self.availableFacetFields = ko.computed(function() {
     var facetFieldNames = $.map(self.facets(), function(facet) {
-    return facet.field(); //filter out text_general, __version__
+      return facet.field(); //filter out text_general, __version__
     });
     return $.grep(self.fields(), function(field) {
       return facetFieldNames.indexOf(field.name()) == -1;
@@ -533,9 +533,9 @@ var Collection = function (vm, collection) {
     }
   });
   self.template.availableWidgetFieldsNames = ko.computed(function() {
-  return $.map(self.template.availableWidgetFields(), function(field){
-    return field.name();
-  });
+    return $.map(self.template.availableWidgetFields(), function(field) {
+      return field.name();
+    });
   });
 
   self.template.fieldsModalFilter.subscribe(function(value) {
@@ -559,20 +559,20 @@ var Collection = function (vm, collection) {
         self.template.template(data.collection.collection.template.template);
         self.template.fieldsAttributes.removeAll();
         $.each(data.collection.collection.template.fieldsAttributes, function(index, field) {
-        self.template.fieldsAttributes.push(ko.mapping.fromJS(field));
-      });  
+          self.template.fieldsAttributes.push(ko.mapping.fromJS(field));
+        });  
         self.fields.removeAll();
         $.each(data.collection.collection.fields, function(index, field) {
-        self.fields.push(ko.mapping.fromJS(field));
+          self.fields.push(ko.mapping.fromJS(field));
         });
       }
-  }).fail(function (xhr, textStatus, errorThrown) {});
+    }).fail(function (xhr, textStatus, errorThrown) {});
   };
 
   function diff(A, B) {
-  return A.filter(function (a) {
-    return B.indexOf(a) == -1;
-  });
+    return A.filter(function (a) {
+      return B.indexOf(a) == -1;
+    });
   }
 
   function syncArray(currentObservable, newJson, isDynamic) {
@@ -585,7 +585,7 @@ var Collection = function (vm, collection) {
     });
     var _newFieldsNames = $.map(
       $.grep(newJson, function(field) {
-        return field.isDynamic == isDynamic;
+          return field.isDynamic == isDynamic;
         }), function(field) {
       return field.name;
     });
@@ -602,8 +602,8 @@ var Collection = function (vm, collection) {
     // New fields
     $.each(newJson, function(index, field) {
      if (_toAdd.indexOf(field.name) != -1) {
-        currentObservable.push(ko.mapping.fromJS(field));
-      }
+       currentObservable.push(ko.mapping.fromJS(field));
+     }
     });
   }
 
@@ -766,9 +766,9 @@ var NewTemplate = function (vm, initial) {
     if (self.inited()) {
       // If new dashboard
       vm.collection.name.subscribe(function(newValue) {
-      vm.collection.label(newValue);
-      vm.collection.switchCollection();
-      vm.search();
+        vm.collection.label(newValue);
+        vm.collection.switchCollection();
+        vm.search();
       });
     } else {
       self.syncCollections();
@@ -781,23 +781,23 @@ var NewTemplate = function (vm, initial) {
 
   self.syncCollections = function () {
     $.post("/search/get_collections", {
-    },function (data) {
-      if (data.status == 0) {
-      // Sync new and old names
-        $.each(data.collection, function(index, name) {
-          if (self.collections.indexOf(name) == -1) {
-            self.collections.push(name);
-          }
-        });
-        $.each(self.collections(), function(index, collection) {
-          if (data.collection.indexOf(collection) == -1) {
-            self.collections.remove(collection);
-          }
-        });
-      }
-      else {
-        $(document).trigger("error", data.message);
-      }
+      }, function (data) {
+        if (data.status == 0) {
+          // Sync new and old names
+          $.each(data.collection, function(index, name) {
+            if (self.collections.indexOf(name) == -1) {
+              self.collections.push(name);
+            }
+          });
+          $.each(self.collections(), function(index, collection) {
+            if (data.collection.indexOf(collection) == -1) {
+              self.collections.remove(collection);
+            }
+          });
+        }
+        else {
+          $(document).trigger("error", data.message);
+        }
     }).fail(function (xhr, textStatus, errorThrown) {
       $(document).trigger("error", xhr.responseText);
     }).done(function() {
@@ -879,18 +879,16 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   };
 
   self.availableDraggableResultset = ko.computed(function() {
-    return getWidgets(function(widget){ return ['resultset-widget', 'html-resultset-widget'].indexOf(widget.widgetType()) != -1; }).length == 0;
+    return getWidgets(function(widget) { return ['resultset-widget', 'html-resultset-widget'].indexOf(widget.widgetType()) != -1; }).length == 0;
   });
   self.availableDraggableFilter = ko.computed(function() {
-    return getWidgets(function(widget){ return widget.widgetType() == 'filter-widget'; }).length == 0;
+    return getWidgets(function(widget) { return widget.widgetType() == 'filter-widget'; }).length == 0;
   });
   self.availableDraggableHistogram = ko.computed(function() {
-    return getWidgets(function(widget){ return widget.widgetType() == 'histogram-widget'; }).length == 0 &&
-    self.availableDateFields().length > 0;
+    return getWidgets(function(widget) { return widget.widgetType() == 'histogram-widget'; }).length == 0 && self.availableDateFields().length > 0;
   });
   self.availableDraggableNumbers = ko.computed(function() {
-    return getWidgets(function(widget){ return widget.widgetType() == 'line-widget'; }).length == 0 &&
-    self.availableNumberFields().length > 0;
+    return getWidgets(function(widget) { return widget.widgetType() == 'line-widget'; }).length == 0 && self.availableNumberFields().length > 0;
   });
   self.availableDraggableChart = ko.computed(function() {
     return self.collection.availableFacetFields().length > 0;
@@ -1047,12 +1045,12 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
       id: doc.id
     }, function (data) {
       if (data.status == 0) {
-      $.each(data.doc.doc, function(key, val) {
-        doc['details'].push(ko.mapping.fromJS({
-          key: key,
-          value: val
-      }));                
-      });
+        $.each(data.doc.doc, function(key, val) {
+            doc['details'].push(ko.mapping.fromJS({
+              key: key,
+              value: val
+          }));                
+        });
       }
       else if (data.status == 1) {
         $(document).trigger("info", data.message);
@@ -1074,7 +1072,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
       if (data.status == 0) {
         self.collection.id = data.id;
         $(document).trigger("info", data.message);
-        if (window.location.search.indexOf("collection") == -1){
+        if (window.location.search.indexOf("collection") == -1) {
           window.location.hash = '#collection=' + data.id;
         }
       }