Răsfoiți Sursa

HUE-7323 [frontend] Enable drag and drop from the global search results

Johan Ahlen 8 ani în urmă
părinte
comite
80d579c

+ 14 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -507,11 +507,15 @@
     init: function (element, valueAccessor) {
       var $element = $(element);
       var options = valueAccessor();
+      if ((ko.isObservable(options.text) && !options.text()) || !options.text) {
+        return;
+      }
       $element.addClass("draggableText");
 
       var $helper = $("<div>").text(ko.isObservable(options.text) ? options.text() : options.text).css("z-index", "99999");
       var dragStartX = -1;
       var dragStartY = -1;
+      var notifiedOnDragStarted = false;
       $element.draggable({
         helper: function () { return $helper },
         appendTo: "body",
@@ -519,6 +523,13 @@
           dragStartX = event.clientX;
           dragStartY = event.clientY;
           huePubSub.publish('draggable.text.meta', options.meta);
+          notifiedOnDragStarted = false;
+        },
+        drag: function (event) {
+          if (!notifiedOnDragStarted && Math.sqrt((dragStartX-event.clientX)*(dragStartX-event.clientX) + (dragStartY-event.clientY)*(dragStartY-event.clientY)) >= 10) {
+            huePubSub.publish('draggable.text.started', options.meta);
+            notifiedOnDragStarted = true;
+          }
         },
         stop: function (event) {
           if (Math.sqrt((dragStartX-event.clientX)*(dragStartX-event.clientX) + (dragStartY-event.clientY)*(dragStartY-event.clientY)) < 10) {
@@ -529,7 +540,9 @@
               $(elementAtStop).trigger('click');
             }
           }
-        },
+          notifiedOnDragStarted = false;
+          huePubSub.publish('draggable.text.stopped');
+        }
       });
     }
   };

+ 46 - 3
desktop/core/src/desktop/templates/ko_components.mako

@@ -620,7 +620,7 @@ from desktop.views import _ko
       </div>
     </div>
     <!-- ko if: searchResultVisible-->
-    <div class="global-search-results" data-bind="onClickOutside: onResultClickOutside, css: { 'global-search-empty' : searchResultCategories().length === 0 }">
+    <div class="global-search-results" data-bind="onClickOutside: onResultClickOutside, css: { 'global-search-empty' : searchResultCategories().length === 0 }, style: { 'height' : heightWhenDragging }">
       <!-- ko hueSpinner: { spin: loading() && searchResultCategories().length === 0 , center: true, size: 'large' } --><!-- /ko -->
       <!-- ko if: !loading() && searchResultCategories().length === 0 -->
         <div>${ _('No results found.') }</div>
@@ -633,7 +633,7 @@ from desktop.views import _ko
             <li data-bind="multiClick: {
                 click: function () { $parents[1].resultSelected($parentContext.$index(), $index()) },
                 dblClick: function () { $parents[1].resultSelected($parentContext.$index(), $index()); $parents[1].openResult(); }
-              }, html: label, css: { 'selected': $parents[1].selectedResult() === $data }"></li>
+              }, html: label, css: { 'selected': $parents[1].selectedResult() === $data }, draggableText: { text: draggable, meta: draggableMeta }"></li>
           </ul>
         </div>
       </div>
@@ -676,6 +676,7 @@ from desktop.views import _ko
         self.inlineAutocomplete = ko.observable('');
         self.searchActive = ko.observable(false);
         self.searchResultVisible = ko.observable(false);
+        self.heightWhenDragging = ko.observable(null);
         self.searchResultCategories = ko.observableArray([]);
         self.selectedIndex = ko.observable();
         self.loading = ko.observable(false);
@@ -694,6 +695,18 @@ from desktop.views import _ko
           }, 0);
         });
 
+        huePubSub.subscribe('draggable.text.started', function (meta) {
+          // We have to set the height to 0 when dragging a text, just closing the results will break the
+          // jQuery draggable plugin
+          if (meta.source === 'globalSearch') {
+            huePubSub.subscribeOnce('draggable.text.stopped', function () {
+              self.heightWhenDragging(null);
+              self.close();
+            });
+            self.heightWhenDragging(0);
+          }
+        });
+
         self.searchInput.subscribe(function (newValue) {
           if (self.inlineAutocomplete().indexOf(newValue) !== 0 || newValue === '') {
             self.inlineAutocomplete(newValue);
@@ -721,7 +734,9 @@ from desktop.views import _ko
         });
 
         self.searchResultVisible.subscribe(function (newVal) {
-          if (!newVal) {
+          if (newVal) {
+            self.heightWhenDragging(null);
+          } else {
             self.selectedIndex(undefined);
           }
         });
@@ -965,6 +980,10 @@ from desktop.views import _ko
           data.results.forEach(function (doc) {
             docCategory.result.push({
               label: doc.hue_name,
+              draggable: doc.originalName,
+              draggableMeta: {
+                source: 'globalSearch'
+              },
               type: 'document',
               data: doc
             })
@@ -1001,8 +1020,32 @@ from desktop.views import _ko
                 };
                 newCategories[typeLower] = category;
               }
+              var meta = {
+                source: 'globalSearch'
+              };
+              if (result.type.toLowerCase() === 'database') {
+                meta.type = 'sql';
+                meta.database = result.originalName
+              } else if (result.type.toLowerCase() === 'table') {
+                meta.type = 'sql';
+                var split = result.originalName.split('.');
+                if (split.length == 2) {
+                  meta.database = split[0];
+                  meta.table = split[1];
+                }
+              } else if (result.type.toLowerCase() === 'field') {
+                meta.type = 'sql';
+                var split = result.originalName.split('.');
+                if (split.length >= 3) {
+                  meta.database = split[0];
+                  meta.table = split[1];
+                  meta.column = split[2];
+                }
+              }
               category.result.push({
                 label: result.hue_name || result.originalName,
+                draggable: result.originalName,
+                draggableMeta: meta,
                 type: typeLower,
                 data: result
               })