瀏覽代碼

HUE-2981 [search] Display nested documents of records

Romain Rigaux 9 年之前
父節點
當前提交
8a0827a
共有 2 個文件被更改,包括 100 次插入82 次删除
  1. 70 50
      apps/search/src/search/static/search/js/search.ko.js
  2. 30 32
      apps/search/src/search/templates/common_search.mako

+ 70 - 50
apps/search/src/search/static/search/js/search.ko.js

@@ -1402,7 +1402,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   self.draggableTimeline = ko.observable(bareWidgetBuilder("Timeline", "timeline-widget"));
   self.draggableGradienMap = ko.observable(bareWidgetBuilder("Gradient Map", "gradient-map-widget"));
   self.draggableTree2 = ko.observable(bareWidgetBuilder("Tree", "tree2-widget"));
-  self.draggableTextFacet = ko.observable(bareWidgetBuilder("Text Facet", "text-facet-widget")); 
+  self.draggableTextFacet = ko.observable(bareWidgetBuilder("Text Facet", "text-facet-widget"));
 
 
   self.availableDateFields = ko.computed(function() {
@@ -1557,56 +1557,9 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
                 if (self.resultsHash != _resultsHash) {
 
                   var _docs = [];
-                  var leafletmap = {};
                   var _mustacheTmpl = self.collection.template.isGridLayout() ? "" : fixTemplateDotsAndFunctionNames(self.collection.template.template());
                   $.each(data.response.docs, function (index, item) {
-                    var row = [];
-                    var _externalLink = item.externalLink;
-                    var _details = item.details;
-                    var _id = item.hueId;
-                    var _childDocuments = item._childDocuments_;
-                    delete item["externalLink"];
-                    delete item["details"];
-                    delete item["hueId"];
-                    delete item["_childDocuments_"];
-                    var fields = self.collection.template.fieldsSelected();
-                    // Display selected fields or whole json document
-                    if (fields.length != 0) {
-                      $.each(self.collection.template.fieldsSelected(), function (index, field) {
-                        row.push(item[field]);
-                      });
-                    } else {
-                      row.push(ko.mapping.toJSON(item));
-                    }
-                    if (self.collection.template.leafletmapOn()) {
-                      leafletmap = {
-                        'latitude': item[self.collection.template.leafletmap.latitudeField()],
-                        'longitude': item[self.collection.template.leafletmap.longitudeField()],
-                        'label': self.collection.template.leafletmap.labelField() ? item[self.collection.template.leafletmap.labelField()] : ""
-                      }
-                    }
-                    var doc = {
-                      'id': _id,
-                      'row': row,
-                      'item': ko.mapping.fromJS(item),
-                      'showEdit': ko.observable(false),
-                      'hasChanged': ko.observable(false),
-                      'externalLink': ko.observable(_externalLink),
-                      'details': ko.observableArray(_details),
-                      'originalDetails': ko.observable(''),
-                      'showDetails': ko.observable(false),
-                      'childDocuments': ko.observable(_childDocuments),
-                      'leafletmap': leafletmap
-                    };
-                    if (!self.collection.template.isGridLayout()) {
-                      // fix the fields that contain dots in the name
-                      addTemplateFunctions(item);
-                      if (self.additionalMustache != null && typeof self.additionalMustache == "function") {
-                        self.additionalMustache(item);
-                      }
-                      doc.content = Mustache.render(_mustacheTmpl, item);
-                    }
-                    _docs.push(doc);
+                    _docs.push(self._make_result_doc(item));
                   });
                   self.results(_docs);
                 }
@@ -1614,7 +1567,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
               }
             }
             catch (e) {
-
+              console.log(e);
             }
           },
           "text")
@@ -1646,6 +1599,73 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
       });
   };
 
+  self._make_result_doc = function(item) {
+      var row = [];
+      var leafletmap = {};
+      var _externalLink = item.externalLink;
+      var _details = item.details;
+      var _id = item.hueId;
+      var _childDocuments = item._childDocuments_;
+      delete item["externalLink"];
+      delete item["details"];
+      delete item["hueId"];
+      delete item["_childDocuments_"];
+      var fields = self.collection.template.fieldsSelected();
+      // Display selected fields or whole json document
+      if (fields.length != 0) {
+        $.each(self.collection.template.fieldsSelected(), function (index, field) {
+          row.push(item[field]);
+        });
+      } else {
+        row.push(ko.mapping.toJSON(item));
+      }
+      if (self.collection.template.leafletmapOn()) {
+        leafletmap = {
+          'latitude': item[self.collection.template.leafletmap.latitudeField()],
+          'longitude': item[self.collection.template.leafletmap.longitudeField()],
+          'label': self.collection.template.leafletmap.labelField() ? item[self.collection.template.leafletmap.labelField()] : ""
+        }
+      }
+      var doc = {
+        'id': _id,
+        'row': row,
+        'item': ko.mapping.fromJS(item),
+        'showEdit': ko.observable(false),
+        'hasChanged': ko.observable(false),
+        'externalLink': ko.observable(_externalLink),
+        'details': ko.observableArray(_details),
+        'originalDetails': ko.observable(''),
+        'showDetails': ko.observable(false),
+        'leafletmap': leafletmap
+      };
+
+      if (_childDocuments) {
+    	var childRecords = [];
+    	$.each(_childDocuments, function (index, item) {
+    	  var record = self._make_result_doc(item);
+          $.each(item, function(key, val) {
+            var _field = ko.mapping.fromJS({
+                key: key,
+                value: val,
+                hasChanged: false
+            });
+            record.details.push(_field);
+          });
+    	  childRecords.push(record);
+        });
+    	doc['childDocuments'] = ko.observable(childRecords);
+      }
+      if (!self.collection.template.isGridLayout()) {
+        // fix the fields that contain dots in the name
+        addTemplateFunctions(item);
+        if (self.additionalMustache != null && typeof self.additionalMustache == "function") {
+          self.additionalMustache(item);
+        }
+        doc.content = Mustache.render(_mustacheTmpl, item);
+      }
+      return doc;
+  }
+
   self.suggest = function (query, callback) {
     $.post("/search/suggest/", {
       collection: ko.mapping.toJSON(self.collection),

+ 30 - 32
apps/search/src/search/templates/common_search.mako

@@ -1309,38 +1309,36 @@ ${ dashboard.layout_skeleton() }
         </tbody>
       </table>
       
-
-          <table id="result-container" data-bind="visible: $root.hasRetrievedResults()" style="margin-top: 0; width: 100%">
-            <thead>
-              <tr data-bind="visible: $root.collection.template.fieldsSelected().length > 0, template: {name: 'result-sorting'}">
-              </tr>
-              <tr data-bind="visible: $root.collection.template.fieldsSelected().length == 0">
-                <th style="width: 18px">&nbsp;</th>
-                <th>${ _('Document') }</th>
-              </tr>
-            </thead>
-            <tbody data-bind="foreach: {data: childDocuments, as: 'doc'}" class="result-tbody">
-              <tr class="result-row" data-bind="style: {'backgroundColor': $index() % 2 == 0 ? '#FFF': '#F6F6F6'}">
-                <td>
-                  <a href="javascript:void(0)" data-bind="click: toggleDocDetails">
-                    <i class="fa" data-bind="css: {'fa-caret-right' : ! doc.showDetails(), 'fa-caret-down': doc.showDetails()}"></i>
-                    <!-- ko if: doc.childDocuments != undefined -->
-                    &nbsp(<span data-bind="text: doc.childDocuments().length"></span>)
-                    <!-- /ko -->
-                  </a>
-                </td>
-                <!-- ko foreach: row -->
-                  <td data-bind="html: $data"></td>
-                <!-- /ko -->
-              </tr>
-              <tr data-bind="visible: doc.showDetails" class="show-details">
-                <td>&nbsp;</td>
-                <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}">
-                  <span data-bind="template: {name: 'document-details', data: $data}"></span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+      <!-- ko if: doc.childDocuments != undefined -->
+        <table id="result-container" data-bind="visible: $root.hasRetrievedResults()" style="margin-top: 0; width: 100%">
+          <thead>
+            <tr data-bind="visible: $root.collection.template.fieldsSelected().length > 0, template: {name: 'result-sorting'}">
+            </tr>
+            <tr data-bind="visible: $root.collection.template.fieldsSelected().length == 0">
+              <th style="width: 18px">&nbsp;</th>
+              <th>${ _('Child Documents') }</th>
+            </tr>
+          </thead>
+          <tbody data-bind="foreach: {data: childDocuments, as: 'doc'}" class="result-tbody">
+            <tr class="result-row" data-bind="style: {'backgroundColor': $index() % 2 == 0 ? '#FFF': '#F6F6F6'}">
+              <td>
+                <a href="javascript:void(0)" data-bind="click: function() { doc.showDetails(! doc.showDetails()); }">
+                  <i class="fa" data-bind="css: {'fa-caret-right' : ! doc.showDetails(), 'fa-caret-down': doc.showDetails()}"></i>
+                </a>
+              </td>
+              <!-- ko foreach: row -->
+                <td data-bind="html: $data"></td>
+              <!-- /ko -->
+            </tr>
+            <tr data-bind="visible: doc.showDetails" class="show-details">
+              <td>&nbsp;</td>
+              <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}">
+                <span data-bind="template: {name: 'document-details', data: $data}"></span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      <!-- /ko -->
 
     </div>
   <!-- /ko -->