Преглед изворни кода

HUE-7363 [assist] Allow drag and drop of fields into a dashboard

Enrico Berti пре 8 година
родитељ
комит
0080370560

+ 1 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -2647,7 +2647,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, get_ord
           <!-- ko if: filteredFields().length > 0 -->
           <ul class="assist-tables" data-bind="foreachVisible: { data: filteredFields, minHeight: 23, container: '.assist-db-scrollable' }">
             <li class="assist-entry assist-table-link" style="position: relative;">
-              <div class="assist-entry default-cursor assist-entry-left-action" href="javascript:void(0)" data-bind="attr: {'title':  name() + ' - ' + type() }, draggableText: { text: name, meta: {'type': 'solr', 'field': name, 'type': type} }">
+              <div class="assist-entry default-cursor assist-entry-left-action" href="javascript:void(0)" data-bind="attr: {'title':  name() + ' - ' + type() }, draggableText: { text: name, meta: {'type': 'solr', 'field': name, 'fieldType': type} }">
                 <span data-bind="text: type" class="muted pull-right margin-right-20"></span>
                 <span data-bind="text: name"></span><!-- ko if: isId  --> <i class="fa fa-key"></i><!-- /ko -->
               </div>

+ 3 - 3
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -149,12 +149,12 @@
     </div>
     <div class="clearfix"></div>
     <div class="container-fluid" data-bind="visible: $root.isEditing()">
-      <div data-bind="click: function(){$data.addEmptyRow(true)}, css: {'add-row': true, 'is-editing': $root.isEditing}, sortable: { data: drops, isEnabled: $root.isEditing, 'afterMove': function(event){var widget=event.item; var _r = $data.addEmptyRow(true); _r.addWidget(widget);$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)}); columnDropAdditionalHandler(widget)}, options: {'placeholder': 'add-row-highlight', 'greedy': true, 'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"></div>
+      <div data-bind="click: function(){$data.addEmptyRow(true)}, css: {'add-row': true, 'is-editing': $root.isEditing}, droppable: { data: function() { $root.collection.dropOnEmpty($data, true) }, options:{ greedy:true }}, sortable: { data: drops, isEnabled: $root.isEditing, 'afterMove': function(event){var widget=event.item; var _r = $data.addEmptyRow(true); _r.addWidget(widget);$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)}); columnDropAdditionalHandler(widget)}, options: {'placeholder': 'add-row-highlight', 'greedy': true, 'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"></div>
     </div>
     <div data-bind="template: { name: 'row-template${ suffix }', foreach: rows}">
     </div>
     <div class="container-fluid" data-bind="visible: $root.isEditing() && rows().length > 0">
-      <div data-bind="click: function(){$data.addEmptyRow()}, css: {'add-row': true, 'is-editing': $root.isEditing}, sortable: { data: drops, isEnabled: $root.isEditing, 'afterMove': function(event){var widget=event.item; var _r = $data.addEmptyRow(); _r.addWidget(widget);$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)}); columnDropAdditionalHandler(widget)}, options: {'placeholder': 'add-row-highlight', 'greedy': true, 'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"></div>
+      <div data-bind="click: function(){$data.addEmptyRow()}, css: {'add-row': true, 'is-editing': $root.isEditing}, droppable: { data: function() { $root.collection.dropOnEmpty($data, false) }, options:{ greedy:true }}, sortable: { data: drops, isEnabled: $root.isEditing, 'afterMove': function(event){var widget=event.item; var _r = $data.addEmptyRow(); _r.addWidget(widget);$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)}); columnDropAdditionalHandler(widget)}, options: {'placeholder': 'add-row-highlight', 'greedy': true, 'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});}}}"></div>
     </div>
   </div>
 </script>
@@ -191,7 +191,7 @@
 </script>
 
 <script type="text/html" id="widget-template${ suffix }">
-  <div data-bind="attr: {'id': 'wdg_'+ id(),}, css: klass">
+  <div data-bind="attr: {'id': 'wdg_'+ id(),}, css: klass, droppable: { data: function() { $root.collection.dropOnWidget(id()) }, options:{ greedy:true }}">
     <h2 class="card-heading simple">
       <span data-bind="visible: $root.isEditing">
         <a href="javascript:void(0)" class="move-widget"><i class="fa fa-arrows"></i></a>

+ 40 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -1010,6 +1010,41 @@ var Collection = function (vm, collection) {
     return _facets;
   }
 
+  self.dropOnWidget = function (id) {
+    if (vm.isEditing() && vm.lastDraggedMeta() && vm.lastDraggedMeta().type === 'solr') {
+      var facet = self.getFacetById(id);
+      if (facet && facet.properties && facet.properties.facets_form) {
+        facet.properties.facets_form.field(vm.lastDraggedMeta().field());
+      }
+      if (self.supportAnalytics()) {
+        self.addPivotFacetValue2(facet);
+      }
+      else {
+        self.addPivotFacetValue(facet);
+      }
+      vm.lastDraggedMeta(null);
+    }
+  }
+
+  self.dropOnEmpty = function (column, atBeginning) {
+    if (vm.isEditing() && vm.lastDraggedMeta() && vm.lastDraggedMeta().type === 'solr') {
+      var row = column.addEmptyRow(atBeginning);
+      if (self.supportAnalytics()) {
+        row.addWidget(vm.draggableBucket());
+      }
+      else {
+        row.addWidget(vm.draggableBar());
+      }
+      var widget = row.widgets()[0];
+      self.addFacet({
+        'name': vm.lastDraggedMeta().field(),
+        'widget_id': widget.id(),
+        'widgetType': widget.widgetType()
+      });
+      vm.lastDraggedMeta(null);
+    }
+  }
+
   self.template.fields = ko.computed(function () {
     var _fields = [];
     $.each(self.template.fieldsAttributes(), function (index, field) {
@@ -1709,8 +1744,12 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
     });
     self.availableDraggableMap = ko.computed(function () {
       return self.availableStringFields().length > 0;
-    })
+    });
 
+    self.lastDraggedMeta = ko.observable();
+    huePubSub.subscribe('draggable.text.meta', function (meta) {
+      self.lastDraggedMeta(meta);
+    }, 'dashboard');
 
     self.init = function (callback) {
       self.isEditing(self.columns().length == 0);