Forráskód Böngészése

HUE-2857 [search] Details of the document in the HTML layout

Enrico Berti 10 éve
szülő
commit
6e05e6714b

+ 1 - 0
apps/search/src/search/static/search/css/search.css

@@ -262,6 +262,7 @@ em {
 .document-details {
   padding: 10px;
   border-left: 1px solid #e5e5e5;
+  width: 93%;
 }
 
 .document-details td, .document-details th  {

+ 11 - 17
apps/search/src/search/static/search/js/search.ko.js

@@ -1358,10 +1358,10 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
           var _resultsHash = ko.mapping.toJSON(data.response.docs);
 
           if (self.resultsHash != _resultsHash) {
-            if (self.collection.template.isGridLayout()) {
-              // Table view
+
               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;
@@ -1387,6 +1387,7 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
                 var doc = {
                   'id': item[self.collection.idField()],
                   'row': row,
+                  'item': ko.mapping.fromJS(item),
                   'showEdit': ko.observable(false),
                   'hasChanged': ko.observable(false),
                   'externalLink': ko.observable(_externalLink),
@@ -1395,24 +1396,17 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
                   'showDetails': ko.observable(false),
                   'leafletmap': leafletmap
                 };
-                _docs.push(doc);
-              });
-              self.results(_docs);
-            }
-            else {
-              // Template view
-              var _docs = [];
-              var _mustacheTmpl = fixTemplateDotsAndFunctionNames(self.collection.template.template());
-              $.each(data.response.docs, function (index, item) {
-                // fix the fields that contain dots in the name
-                addTemplateFunctions(item);
-                if (self.additionalMustache != null && typeof self.additionalMustache == "function"){
-                  self.additionalMustache(item);
+                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(Mustache.render(_mustacheTmpl, item));
+                _docs.push(doc);
               });
               self.results(_docs);
-            }
           }
           self.resultsHash = _resultsHash;
         }

+ 68 - 43
apps/search/src/search/templates/search.mako

@@ -609,46 +609,8 @@ ${ dashboard.layout_skeleton() }
                 <!-- /ko -->
               </tr>
               <tr data-bind="visible: doc.showDetails" class="show-details">
-                <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}">
-                  <!-- ko if: $data.details().length == 0 -->
-                    <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
-                    <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }" /><![endif]-->
-                  <!-- /ko -->
-                  <!-- ko if: $data.details().length > 0 -->
-                    <div class="document-details-actions pull-left">
-                      <a href="javascript:void(0)" data-bind="visible: ! showEdit(), click: function() { showEdit(true); }" title="${ _('Edit this document') }">
-                        <i class="fa fa-edit fa-fw"></i>
-                      </a>
-                      <a href="javascript:void(0)" data-bind="visible: showEdit(), click: function(data, e) { $(e.currentTarget).parent().css('marginTop', '8px'); $root.getDocument($data); showEdit(false); }" title="${ _('Undo changes') }">
-                        <i class="fa fa-undo fa-fw"></i>
-                      </a>
-                      <a href="javascript:void(0)" data-bind="visible: showEdit() && originalDetails() != ko.toJSON(details), click: $root.updateDocument" title="${ _('Update this document') }">
-                        <i class="fa fa-save fa-fw"></i>
-                      </a>
-                      <a href="javascript:void(0)" data-bind="visible: externalLink(), attr: { href: externalLink}" target="_blank" title="${ _('Show original document') }">
-                        <i class="fa fa-external-link fa-fw"></i>
-                      </a>
-                    </div>
-                    <div class="document-details pull-left">
-                      <table>
-                        <tbody data-bind="foreach: details">
-                          <tr data-bind="css: {'readonly': ! $parent.showEdit()}">
-                             <th class="grid-th" data-bind="text: key"></th>
-                             <td width="100%">
-                               <span data-bind="text: value, visible: ! $parent.showEdit()"></span>
-                               <input data-bind="value: value, visible: $parent.showEdit, valueUpdate: 'afterkeydown',
-                               click: function(detail, e){
-                                var target = $(e.currentTarget);
-                                target.parents('.show-details').find('.document-details-actions').animate({
-                                  'marginTop': (target.position().top - target.parents('table').position().top) + 'px'
-                                }, 200)
-                               }" class="input-xxlarge" style="width: 600px" />
-                             </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-                  <!-- /ko -->
+                <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}" colspan="2">
+                  <span data-bind="template: {name: 'document-details', data: $data}"></span>
                 </td>
               </tr>
             </tbody>
@@ -763,9 +725,30 @@ ${ dashboard.layout_skeleton() }
         <div data-bind="template: {name: 'resultset-pagination', data: $root.response() }"></div>
       <!-- /ko -->
 
-      <div id="result-container" data-bind="foreach: $root.results">
-        <div class="result-row" data-bind="html: $data"></div>
-      </div>
+
+      <table id="result-container" data-bind="visible: $root.hasRetrievedResults()" style="margin-top: 0; width: 100%">
+        <thead>
+          <tr>
+            <th style="width: 18px">&nbsp;</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody data-bind="foreach: {data: $root.results, as: 'doc'}" class="result-tbody">
+          <tr>
+            <td valign="top">
+              <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>
+              </a>
+            </td>
+            <td><div class="result-row" data-bind="html: content, style: {'marginBottom': doc.showDetails() ? '-20px' : '0px'}"></div></td>
+          </tr>
+          <tr data-bind="visible: doc.showDetails" class="show-details">
+            <td data-bind="attr: {'colspan': $root.collection.template.fieldsSelected().length > 0 ? $root.collection.template.fieldsSelected().length + 1 : 2}" colspan="2">
+              <span data-bind="template: {name: 'document-details', data: $data}"></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
 
       <div class="widget-spinner" data-bind="visible: ! $root.hasRetrievedResults()">
         <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
@@ -776,6 +759,48 @@ ${ dashboard.layout_skeleton() }
 </script>
 
 
+<script type="text/html" id="document-details">
+  <!-- ko if: $data.details().length == 0 -->
+    <!--[if !IE]> --><i class="fa fa-spinner fa-spin"></i><!-- <![endif]-->
+    <!--[if IE]><img src="${ static('desktop/art/spinner.gif') }" /><![endif]-->
+  <!-- /ko -->
+  <!-- ko if: $data.details().length > 0 -->
+    <div class="document-details-actions pull-left">
+      <a href="javascript:void(0)" data-bind="visible: ! showEdit(), click: function() { showEdit(true); }" title="${ _('Edit this document') }">
+        <i class="fa fa-edit fa-fw"></i>
+      </a>
+      <a href="javascript:void(0)" data-bind="visible: showEdit(), click: function(data, e) { $(e.currentTarget).parent().css('marginTop', '8px'); $root.getDocument($data); showEdit(false); }" title="${ _('Undo changes') }">
+        <i class="fa fa-undo fa-fw"></i>
+      </a>
+      <a href="javascript:void(0)" data-bind="visible: showEdit() && originalDetails() != ko.toJSON(details), click: $root.updateDocument" title="${ _('Update this document') }">
+        <i class="fa fa-save fa-fw"></i>
+      </a>
+      <a href="javascript:void(0)" data-bind="visible: externalLink(), attr: { href: externalLink}" target="_blank" title="${ _('Show original document') }">
+        <i class="fa fa-external-link fa-fw"></i>
+      </a>
+    </div>
+    <div class="document-details pull-left">
+      <table>
+        <tbody data-bind="foreach: details">
+          <tr data-bind="css: {'readonly': ! $parent.showEdit()}">
+             <th class="grid-th" data-bind="text: key"></th>
+             <td width="100%">
+               <span data-bind="text: value, visible: ! $parent.showEdit()"></span>
+               <input data-bind="value: value, visible: $parent.showEdit, valueUpdate: 'afterkeydown',
+               click: function(detail, e){
+                var target = $(e.currentTarget);
+                target.parents('.show-details').find('.document-details-actions').animate({
+                  'marginTop': (target.position().top - target.parents('table').position().top) + 'px'
+                }, 200)
+               }" class="input-xxlarge" style="width: 600px" />
+             </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  <!-- /ko -->
+</script>
+
 <script type="text/html" id="result-sorting">
 <th style="width: 18px">&nbsp;</th>
 <!-- ko foreach: $root.collection.template.fieldsSelected -->