Browse Source

[notebook] Move snippet result download functionality to a separate component

Johan Ahlen 10 years ago
parent
commit
6835235ba6

+ 72 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -1080,4 +1080,76 @@ from desktop.views import _ko
       }());
     }));
   </script>
+</%def>
+
+<%def name="downloadSnippetResults()">
+  <script type="text/html" id="download-results-template">
+    <form method="POST" action="${ url('notebook:download') }" class="download-form" style="display: inline">
+      ${ csrf_token(request) | n,unicode }
+      <input type="hidden" name="notebook"/>
+      <input type="hidden" name="snippet"/>
+      <input type="hidden" name="format"/>
+    </form>
+
+    <div class="hover-dropdown" data-bind="visible: snippet.status() == 'available' && snippet.result.hasSomeResults() && snippet.result.type() == 'table'" style="display:none;">
+      <a class="inactive-action dropdown-toggle pointer" data-toggle="dropdown">
+        <i class="fa fa-download"></i>
+        <i class="fa fa-caret-down"></i>
+      </a>
+      <ul class="dropdown-menu pull-right">
+        <li>
+          <a class="inactive-action download" href="javascript:void(0)" data-bind="click: downloadCsv" title="${ _('Download first rows as CSV') }">
+            <i class="fa fa-file-o"></i> ${ _('CSV') }
+          </a>
+        </li>
+        <li>
+          <a class="inactive-action download" href="javascript:void(0)" data-bind="click: downloadXls" title="${ _('Download first rows as XLS') }">
+            <i class="fa fa-file-excel-o"></i> ${ _('Excel') }
+          </a>
+        </li>
+      </ul>
+    </div>
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function (factory) {
+      if(typeof require === "function") {
+        require(['knockout'], factory);
+      } else {
+        factory(ko);
+      }
+    }(function (ko) {
+      function DownloadResultsViewModel (params, element) {
+        var self = this;
+        self.$downloadForm = $(element).find(".download-form");
+        self.snippet = params.snippet;
+        self.notebook = params.notebook;
+      }
+
+      DownloadResultsViewModel.prototype.download = function (format) {
+        var self = this;
+        self.$downloadForm.find('input[name=\'format\']').val(format);
+        self.$downloadForm.find('input[name=\'notebook\']').val(ko.mapping.toJSON(self.notebook.getContext()));
+        self.$downloadForm.find('input[name=\'snippet\']').val(ko.mapping.toJSON(self.snippet.getContext()));
+        self.$downloadForm.submit();
+      };
+
+      DownloadResultsViewModel.prototype.downloadXls = function () {
+        var self = this;
+        self.download("xls");
+      };
+
+      DownloadResultsViewModel.prototype.downloadCsv = function () {
+        var self = this;
+        self.download("csv");
+      };
+
+      ko.components.register('downloadSnippetResults', {
+        viewModel: { createViewModel: function (params, componentInfo) {
+          return new DownloadResultsViewModel(params, componentInfo.element);
+        }},
+        template: { element: 'download-results-template' }
+      });
+    }));
+  </script>
 </%def>

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/editor.mako

@@ -40,6 +40,7 @@ ${ editorComponents.commonHTML() }
 ${ koComponents.csvListInput() }
 ${ koComponents.jvmMemoryInput() }
 ${ koComponents.assistPanel() }
+${ koComponents.downloadSnippetResults() }
 
 ${ editorComponents.commonJS() }
 

+ 1 - 34
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -826,31 +826,7 @@ ${ require.config() }
         <i class="fa fa-file-text-o"></i>
       </a>
 
-      <form method="POST" action="${ url('notebook:download') }" class="download-form" style="display: inline">
-        ${ csrf_token(request) | n,unicode }
-        <input type="hidden" name="notebook"/>
-        <input type="hidden" name="snippet"/>
-        <input type="hidden" name="format" class="download-format"/>
-
-        <div class="hover-dropdown" data-bind="visible: status() == 'available' && result.hasSomeResults() && result.type() == 'table'" style="display:none;">
-          <a class="inactive-action dropdown-toggle pointer" data-toggle="dropdown">
-            <i class="fa fa-download"></i>
-            <i class="fa fa-caret-down"></i>
-          </a>
-          <ul class="dropdown-menu pull-right">
-            <li>
-              <a class="inactive-action download" href="javascript:void(0)" data-bind="click: function() { downloadResult($data, 'csv'); }" title="${ _('Download first rows as CSV') }">
-                <i class="fa fa-file-o"></i> ${ _('CSV') }
-              </a>
-            </li>
-            <li>
-              <a class="inactive-action download" href="javascript:void(0)" data-bind="click: function() { downloadResult($data, 'xls'); }" title="${ _('Download first rows as XLS') }">
-                <i class="fa fa-file-excel-o"></i> ${ _('Excel') }
-              </a>
-            </li>
-          </ul>
-        </div>
-      </form>
+      <div data-bind="component: { name: 'downloadSnippetResults', params: { snippet: $data, notebook: $parent } }" style="display:inline-block;"></div>
     </div>
   </div>
 </script>
@@ -1998,15 +1974,6 @@ ${ require.config() }
         });
       }
 
-      function downloadResult (snippet, format) {
-        $('#snippet_' + snippet.id()).find('.download-format').val(format);
-        $('#snippet_' + snippet.id()).find('input[name=\'notebook\']').val(ko.mapping.toJSON(viewModel.selectedNotebook().getContext()));
-        $('#snippet_' + snippet.id()).find('input[name=\'snippet\']').val(ko.mapping.toJSON(snippet.getContext()));
-        $('#snippet_' + snippet.id()).find('.download-form').submit();
-      }
-
-      window.downloadResult = downloadResult;
-
       forceChartDraws();
 
       $(".CodeMirror").each(function () {

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/notebook.mako

@@ -56,6 +56,7 @@ ${ koComponents.csvListInput() }
 ${ koComponents.jvmMemoryInput() }
 ${ koComponents.assistPanel() }
 ${ koComponents.addSnippetMenu() }
+${ koComponents.downloadSnippetResults() }
 
 ${ editorComponents.commonJS() }