Browse Source

HUE-3294 [editor] Added documentChooser binding

Enrico Berti 9 years ago
parent
commit
8fa499e

+ 62 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -4792,4 +4792,66 @@
     }
   };
 
+  ko.bindingHandlers.documentChooser = {
+    init: function (element, valueAccessor) {
+      var options = valueAccessor();
+      $(element).selectize({
+        valueField: 'uuid',
+        labelField: 'name',
+        searchField: 'name',
+        options: [],
+        create: false,
+        preload: true,
+        render: {
+          option: function (item, escape) {
+            return '<div>' +
+              '<strong>' + escape(item.name) + '</strong><br>' +
+              '<span class="muted">' + escape(item.description) + '</span>' +
+              '</div>';
+          }
+        },
+        load: function (query, callback) {
+          $.ajax({
+            url: '/desktop/api2/docs/',
+            data: {
+              type: 'query-hive',
+              text: query,
+              include_trashed: false,
+              limit: 100
+            },
+            type: 'GET',
+            error: function () {
+              callback();
+            },
+            success: function (res) {
+              callback(res.documents);
+            }
+          });
+        },
+        onChange: function (val) {
+          if (options.value) {
+            options.value(val);
+          }
+          if (options.document) {
+            options.document(this.options[val]);
+          }
+        },
+        onLoad: function () {
+          if (options.value) {
+            this.setValue(options.value());
+          }
+          if (options.loading) {
+            options.loading(false);
+          }
+        },
+      });
+    },
+    update: function (element, valueAccessor) {
+      var options = valueAccessor();
+      if (options.value) {
+        element.selectize.setValue(options.value());
+      }
+    }
+  }
+
 })();

+ 9 - 7
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -441,14 +441,17 @@ var EditorViewModel = (function() {
         }
       });
     }
+    self.associatedDocumentLoading = ko.observable(true);
     self.associatedDocument = ko.observable();
     self.associatedDocumentUuid = ko.observable(typeof snippet.associatedDocumentUuid != "undefined" && snippet.associatedDocumentUuid != null ? snippet.associatedDocumentUuid : null);
-    if (self.associatedDocumentUuid()){
-      vm.documentChooser.setAssociatedDocument(self.associatedDocumentUuid(), self.associatedDocument);
-    }
     self.associatedDocumentUuid.subscribe(function(val){
-      vm.documentChooser.setAssociatedDocument(val, self.associatedDocument);
-      self.getExternalStatement();
+      if (val !== ''){
+        self.getExternalStatement();
+      }
+      else {
+        self.statement_raw('');
+          self.ace().setValue('', 1);
+      }
     });
     self.statement_raw = ko.observable(typeof snippet.statement_raw != "undefined" && snippet.statement_raw != null ? snippet.statement_raw : '');
     self.selectedStatement = ko.observable('');
@@ -818,7 +821,7 @@ var EditorViewModel = (function() {
           (['mapreduce'].indexOf(self.type()) != -1 && self.properties().app_jar().length > 0) ||
           (['distcp'].indexOf(self.type()) != -1 && self.properties().source_path().length > 0 && self.properties().destination_path().length > 0))) ||
         (self.statementType() == 'file' && self.statementPath().length > 0) ||
-        (self.statementType() == 'document' && self.associatedDocumentUuid().length > 0);
+        (self.statementType() == 'document' && self.associatedDocumentUuid() && self.associatedDocumentUuid().length > 0);
     });
     self.lastExecuted = ko.observable(typeof snippet.lastExecuted != "undefined" && snippet.lastExecuted != null ? snippet.lastExecuted : 0);
 
@@ -2080,7 +2083,6 @@ var EditorViewModel = (function() {
     self.successUrl = ko.observable(options.success_url);
     self.isOptimizerEnabled = ko.observable(options.is_optimizer_enabled);
     self.isNavigatorEnabled = ko.observable(options.is_navigator_enabled);
-    self.documentChooser = new DocumentChooser();
 
     self.CoordinatorEditorViewModel = CoordinatorEditorViewModel;
     self.RunningCoordinatorModel = RunningCoordinatorModel;

+ 13 - 37
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -79,7 +79,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.hotkeys.js') }"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.mousewheel.min.js') }"></script>
 <script src="${ static('desktop/ext/js/jquery.mCustomScrollbar.concat.min.js') }"></script>
-<script src="${ static('desktop/js/document/documentChooser.js') }"></script>
 
 % if ENABLE_QUERY_SCHEDULING.get():
 
@@ -1627,47 +1626,24 @@ ${ hueIcons.symbols() }
       <!-- /ko -->
 
       <!-- ko if: statementType() == 'document' -->
-        <div class="control-group">
-          <label class="control-label">${_('Document')}</label>
-          <div class="controls">
-
-          <div class="select-like">
-          <input class="input-xlarge" placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
-              source: $root.documentChooser.documentsAutocompleteSource,
-              showOnFocus: true,
-              blurOnEnter: true,
-              type: 'query-hive',
-              create: function (event, ui) {
-                if (associatedDocument()) {
-                  this.value = associatedDocument().name();
-                }
-                return false;
-               },
-              select: function (event, ui) { associatedDocumentUuid(ui.item.value); this.value = ui.item.label; return false;},
-              focus: function (event, ui) { this.value = ui.item.label; return false; },
-              change: function (event, ui) {
-                if (associatedDocument()) {
-                  this.value = associatedDocument().name();
-                }
-                return false;
-              },
-              itemTemplate: 'doc-search-autocomp-item'
-            }, valueUpdate: 'afterkeydown'">
-            <span class="inactive-action">
-              <i class="fa fa-sort"></i>
-            </span>
+        <div class="margin-top-10">
+          <label class="pull-left" style="margin-top: 6px;margin-right: 10px;">${_('Document')}</label>
+          <div class="selectize-wrapper" style="width: 300px;">
+            <select placeholder="${ _('Search your documents...') }" data-bind="documentChooser: { loading: associatedDocumentLoading, value: associatedDocumentUuid, document: associatedDocument }"></select>
           </div>
           <!-- ko if: associatedDocument() -->
-            <div data-bind='text: associatedDocument().description' style="padding: 3px; margin-top: 2px" class="muted"></div>
-            <a data-bind="attr: { href: associatedDocument().absoluteUrl() }" target="_blank" title="${ _('Open in new tab') }">
-              <i class="fa fa-external-link-square"></i>
-            </a>
+            <div class="pull-left" style="margin-top: 4px">
+              <a data-bind="attr: { href: associatedDocument().absoluteUrl }" target="_blank" title="${ _('Open in new tab') }">
+                <i class="fa fa-external-link-square"></i>
+              </a>
+              <span data-bind='text: associatedDocument().description' style="padding: 3px; margin-top: 2px" class="muted"></span>
+            </div>
           <!-- /ko -->
-          </div>
-      </div>
+        </div>
+        <div class="clearfix margin-bottom-20"></div>
       <!-- /ko -->
 
-      <div class="ace-editor" data-bind="css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode(), 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
+      <div class="ace-editor" data-bind="visible: statementType() !== 'document' || statementType() === 'document' && !associatedDocumentLoading(), css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode(), 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
         snippet: $data,
         contextTooltip: '${ _ko("Right-click for details") }',
         expandStar: '${ _ko("Shift + Click to replace with all columns") }',