Selaa lähdekoodia

HUE-2218 [search] Add big popover UI

Enrico Berti 11 vuotta sitten
vanhempi
commit
7894d95447

+ 77 - 9
apps/search/src/search/templates/search.mako

@@ -366,7 +366,7 @@ ${ dashboard.layout_skeleton() }
           <div style="margin-bottom: 3px">
             <input type="checkbox" data-bind="checkedValue: name, checked: $root.collection.template.fieldsSelected" style="margin: 0" />
             <div data-bind="text: name, css:{'field-selector': true, 'hoverable': $root.collection.template.fieldsSelected.indexOf(name()) > -1}, click: highlightColumn"></div>
-            <i class="fa fa-question-circle pull-right" data-bind="click: function() { $root.fieldAnalysesName(name()); $root.showFieldAnalysis(); }"></i>
+            <i class="fa fa-question-circle pull-right muted pointer analysis" data-bind="click: function() { $root.fieldAnalysesName(name()); $root.showFieldAnalysis(); }"></i>
           </div>
         </div>
         <div data-bind="visible: $root.collection.template.filteredAttributeFields().length == 0" style="padding-left: 4px; padding-top: 5px; font-size: 40px; color: #CCC">
@@ -863,27 +863,83 @@ ${ dashboard.layout_skeleton() }
 <script type="text/html" id="analysis-window">
   <!-- ko if: $root.fieldAnalysesName() -->
   <div data-bind="with: $root.getFieldAnalysis()">
-    <span data-bind="text: name"></span>
+    <div class="pull-right">
+        <input type="text" data-bind="visible: section() == 'terms', clearable: terms.prefix, valueUpdate:'afterkeydown'" />
+        <input type="text" data-bind="visible: section() == 'stats', clearable: stats.facet" />
+    </div>
     <ul class="nav nav-tabs" role="tablist">
       <li class="active"><a href="#analysis-terms" role="tab" data-toggle="tab" data-bind="click: function() { section('terms'); }">${ _('Terms') }</a></li>
       <li><a href="#analysis-stats" role="tab" data-toggle="tab" data-bind="click: function() { section('stats'); }">${ _('Stats') }</a></li>
     </ul>
     <div class="tab-content">
       <div class="tab-pane active" id="analysis-terms" data-bind="with: terms">
-        <input type="text" data-bind="value: prefix, valueUpdate:'afterkeydown'" />
-        <span data-bind="text: ko.mapping.toJSON($data)"></span>
+        <div class="widget-spinner" data-bind="visible: $parent.isLoading()">
+          <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+          <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+        </div>
+        <div class="alert" data-bind="visible: ! $parent.isLoading() && $data.data().length == 0">${ _('There are no terms to be shown') }</div>
+        <table style="width: 100%" data-bind="visible: ! $parent.isLoading() && $data.data().length > 0" class="table-striped">
+          <tbody data-bind="foreach: $data.data">
+          <tr>
+            <td data-bind="text: val.value"></td>
+            <td style="width: 40px">
+              <div class="progress"><div class="bar-label" data-bind="text:val.count"></div><div class="bar bar-info" style="margin-top:-20px;" data-bind="style: {'width': ((val.count / $parent.data()[0].val.count)*100) + '%'}"></div></div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
       </div>
       <div class="tab-pane" id="analysis-stats" data-bind="with: stats">
-        <input type="text" data-bind="value: facet" />
-        <span data-bind="text: ko.mapping.toJSON($data)"></span>
+        <div class="widget-spinner" data-bind="visible: $parent.isLoading()">
+          <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+          <!--[if IE]><img src="/static/art/spinner.gif" /><![endif]-->
+        </div>
+        <div class="alert" data-bind="visible: ! $parent.isLoading() && $data.data().length > 0 && $data.data()[0].key.toLowerCase() == 'error'">${ _('This field does not support stats') }</div>
+        <table style="width: 100%" data-bind="visible: ! $parent.isLoading() && $data.data().length > 0 && $data.data()[0].key.toLowerCase() != 'error'" class="table-striped">
+          <tbody data-bind="foreach: $data.data">
+          <tr>
+            <td style="vertical-align: top"><strong data-bind="text: key"></strong></td>
+            <!-- ko if: key == 'facets' -->
+            <td>
+              <!-- ko if: val[Object.keys(val)[0]] != null -->
+              <table style="width: 100%">
+                <tbody data-bind="foreach: Object.keys(val[Object.keys(val)[0]])">
+                  <tr>
+                    <td style="vertical-align: top; padding-left: 4px; padding-right: 4px"><strong data-bind="text: $data"></strong></td>
+                    <td data-bind="template: 'stats-facets'"></td>
+                  </tr>
+                </tbody>
+              </table>
+              <!-- /ko -->
+              <!-- ko ifnot: val[Object.keys(val)[0]] != null -->
+              ${ _('Not available') }
+              <!-- /ko -->
+            </td>
+            <!-- /ko -->
+            <!-- ko ifnot: key == 'facets' -->
+            <td data-bind="text: val"></td>
+            <!-- /ko -->
+          </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
   <!-- /ko -->
 </script>
 
-<div data-bind="template: { name: 'analysis-window' }"></div>
-
+<script type="text/html" id="stats-facets">
+  <table style="width: 100%">
+    <tbody data-bind="foreach: Object.keys($parent.val[Object.keys($parent.val)[0]][$data])">
+      <tr>
+        <td style="vertical-align: top; padding-left: 4px; padding-right: 4px"><strong data-bind="text: $data"></strong></td>
+        <!-- ko ifnot: $data == 'facets' -->
+        <td style="vertical-align: top" data-bind="text: $parents[1].val[Object.keys($parents[1].val)[0]][$parent][$data]"></td>
+        <!-- /ko -->
+      </tr>
+    </tbody>
+  </table>
+</script>
 
 <div id="shareModal" class="modal hide" data-backdrop="true">
   <div class="modal-header">
@@ -937,6 +993,13 @@ ${ dashboard.layout_skeleton() }
   </div>
 </div>
 
+<div id="fieldAnalysis" class="popover mega-popover right">
+  <div class="arrow"></div>
+  <h3 class="popover-title" style="text-align: left"><a class="pull-right pointer" data-bind="click: function(){ $('#fieldAnalysis').hide(); }">&times;</a> ${ _('Micro analysis for') } <strong data-bind="text: $root.fieldAnalysesName"></strong></h3>
+  <div class="popover-content" data-bind="template: { name: 'analysis-window' }" style="text-align: left"></div>
+</div>
+
+
 
 ## Extra code for style and custom JS
 <span id="extra" data-bind="augmenthtml: $root.collection.template.extracode"></span>
@@ -1224,6 +1287,12 @@ $(document).ready(function () {
       addFacetDemiModalFieldCancel();
     }
   });
+
+  $(document).on("shown.fieldAnalysis", function(){
+
+    var _fieldElement = $(".field-selector").filter(function(){ return $(this).text().toLowerCase() === viewModel.fieldAnalysesName();}).parent();
+    $("#fieldAnalysis").show().css("top", _fieldElement.position().top - $("#fieldAnalysis").outerHeight()/2 + _fieldElement.outerHeight()/2).css("left", _fieldElement.position().left + _fieldElement.outerWidth());
+  });
 });
 
   function showShareModal() {
@@ -1351,5 +1420,4 @@ $(document).ready(function () {
   }
 </script>
 
-
 ${ commonfooter(messages) | n,unicode }

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

@@ -294,3 +294,36 @@ em {
 .field-selector.hoverable:hover {
   background-color: #DDD;
 }
+
+.mega-popover {
+  max-width: 1200px;
+}
+
+.mega-popover .popover-content {
+  width: 440px;
+  height: 300px;
+}
+
+.mega-popover .tab-pane {
+  height: 240px;
+  overflow-y: scroll;
+}
+
+.mega-popover input[type='text'] {
+  margin: 0;
+  width: 130px;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  min-height: 26px;
+  padding-left: 12px;
+}
+
+.fa.analysis {
+  margin-top: 3px;
+  margin-right: 3px;
+}
+
+.fa.analysis:hover {
+  color: #333;
+}

+ 8 - 3
apps/search/static/js/search.ko.js

@@ -205,13 +205,15 @@ var FieldAnalysis = function (vm, field_name) {
 
   self.name = ko.observable(field_name);
 
+  self.isLoading = ko.observable(true);
+
   self.section = ko.observable('terms');
   self.section.subscribe(function () {
     self.update();
   });
   self.terms = ko.mapping.fromJS({'prefix': '', 'data': []});
   self.terms.prefix.subscribe(function () {
-  self.getTerms();
+    self.getTerms();
   });
   self.terms.prefix.extend({rateLimit: {timeout: 2000, method: "notifyWhenChangesStop"}});
   self.stats = ko.mapping.fromJS({'facet': '', 'data': []});
@@ -232,8 +234,8 @@ var FieldAnalysis = function (vm, field_name) {
   }
 
   self.getTerms = function () {
+    self.isLoading(true);
     self.terms.data.removeAll();
-
     $.post("/search/get_terms", {
       collection: ko.mapping.toJSON(vm.collection),
       analysis: ko.mapping.toJSON(self)
@@ -249,6 +251,7 @@ var FieldAnalysis = function (vm, field_name) {
       else {
         $(document).trigger("error", data.message);
       }
+      self.isLoading(false);
     }).fail(function (xhr, textStatus, errorThrown) {
       $(document).trigger("error", xhr.responseText);
     });
@@ -256,7 +259,7 @@ var FieldAnalysis = function (vm, field_name) {
 
   self.getStats = function () {
     self.stats.data.removeAll();
-
+    self.isLoading(true);
     $.post("/search/get_stats", {
       collection: ko.mapping.toJSON(vm.collection),
       query: ko.mapping.toJSON(vm.query),
@@ -273,6 +276,7 @@ var FieldAnalysis = function (vm, field_name) {
       else {
         $(document).trigger("error", data.message);
       }
+      self.isLoading(false);
     }).fail(function (xhr, textStatus, errorThrown) {
       $(document).trigger("error", xhr.responseText);
     });
@@ -1061,6 +1065,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
       }
 
       analyse.update();
+      $(document).trigger("shown.fieldAnalysis")
     }
   }