Browse Source

HUE-8226 [dashboard] Adding a new widget shouldn't show the semi modal for picking a field

Enrico Berti 7 years ago
parent
commit
5261ead4a3

+ 17 - 1
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -219,7 +219,23 @@
           <a href="javascript:void(0)" class="remove-widget" data-bind="publish: { 'gridster.remove': $data }"><i class="fa fa-times"></i></a>
         </div>
       </h2>
-      <div class="empty-content" data-bind="droppable: { data: function(w) { huePubSub.publish('gridster.empty.drop', { widget: w, target: $data }); }, options: { greedy:true, hoverClass: 'droppable-hover', drop: function(){ huePubSub.publish('gridster.added.widget'); } }}, css: { 'query-builder': $root.isQueryBuilder }"></div>
+      <div class="empty-content" data-bind="droppable: { data: function(w) { huePubSub.publish('gridster.empty.drop', { widget: w, target: $data }); }, options: { greedy:true, hoverClass: 'droppable-hover', drop: function(){ huePubSub.publish('gridster.added.widget'); } }}, css: { 'query-builder': $root.isQueryBuilder }">
+
+        <div class="edit-dimensions">
+          <div class="badge dimensions-badge-container dimensions-badge-container-add is-adding">
+            <div class="metric-form">
+                <select data-bind="selectize: $root.collection.template.filteredModalFields().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 }), value: $data.tempFieldName, optionsValue: 'name', optionsText: 'name', optionsCaption: '${ _ko('Field...') }'" class="hit-options input-small" style="margin-bottom: 0"></select>
+                <a data-bind="click: function() { huePubSub.publish('gridster.empty.add', { widget: $root.draggableBucket(), target: $data }); }" class="pull-right margin-top-10" href="javascript:void(0)">
+                  <i class="fa fa-plus"></i> ${ _('Add') }
+                </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    <div class="clearfix"></div>
+  </div>
+
+      </div>
     </div>
     <!-- /ko -->
   <!-- ko with: widget -->

File diff suppressed because it is too large
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


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

@@ -71,7 +71,8 @@ function loadDashboardLayout(viewModel, gridster_layout) {
         row: parseInt(item.row),
         size_x: parseInt(item.size_x),
         size_y: parseInt(item.size_y),
-        widget: item.widget ? viewModel.getWidgetById(item.widget.id) : null
+        widget: item.widget ? viewModel.getWidgetById(item.widget.id) : null,
+        tempFieldName: null,
       }));
   });
 }

+ 21 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -556,6 +556,18 @@
     }
   }
 
+  .empty-gridster-widget {
+    .edit-dimensions {
+      opacity: 1;
+      .action-icon, .dimensions-badge-container-add {
+        opacity: 1;
+      }
+      .dimensions-badge-container-add {
+        float: left;
+      }
+    }
+  }
+
   .metric-form {
     position: absolute;
     z-index: 10;
@@ -570,6 +582,15 @@
     }
   }
 
+  .empty-gridster-widget {
+    .metric-form {
+      .hue-no-box-shadow;
+      .selectize-control {
+        margin-right: auto;
+      }
+    }
+  }
+
   .search-bar .form-search .selectize-control {
     width: 220px;
     display: inline-block;

+ 20 - 1
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -2167,6 +2167,9 @@ ${ dashboard.layout_skeleton(suffix='search') }
 
 
 <script type="text/html" id="metric-form">
+  <pre data-bind="text: ko.toJSON($data, null, 2)">
+
+  </pre>
     <!-- ko if: typeof isEditing !== 'undefined' && isEditing() -->
     <div>
       <!-- ko if: typeof $parents[0].isAdding === 'undefined' || !$parents[0].isAdding() -->
@@ -4281,6 +4284,21 @@ $(document).ready(function () {
     tempDraggable = null;
   }, 'dashboard');
 
+  huePubSub.subscribe('gridster.empty.add', function (options) {
+    var fakeRow = searchViewModel.columns()[0].addEmptyRow(true);
+    var widgetClone = ko.mapping.toJS(options.widget);
+    widgetClone.id = UUID();
+    selectedWidget = new Widget(widgetClone);
+    fakeRow.addWidget(selectedWidget);
+    selectedGridster = options.target;
+    addFacetDemiModalFieldPreview({
+      'name': function () {
+        return selectedGridster.tempFieldName
+      }
+    });
+    tempDraggable = null;
+  }, 'dashboard');
+
   function removeInternalScroll(widget) {
     var scrollDifference = widget.gridsterElement.scrollHeight - widget.gridsterElement.clientHeight;
     if (scrollDifference > 0) { // avoid scrollbars inside the widget
@@ -4453,8 +4471,8 @@ $(document).ready(function () {
                 size_x: dimensions.sizex,
                 size_y: tempDraggable.gridsterHeight(),
                 widget: null,
+                tempFieldName: null,
                 callback: function (el) {
-                  showAddFacetDemiModal(tempDraggable, searchViewModel.gridItems()[searchViewModel.gridItems().length - 1]);
                   tempDraggable = null;
                 }
               })
@@ -4469,6 +4487,7 @@ $(document).ready(function () {
               size_x: dimensions.sizex,
               size_y: 6,
               widget: null,
+              tempFieldName: null,
               callback: function (el) {
                 showAddFacetDemiModal(null, searchViewModel.gridItems()[searchViewModel.gridItems().length - 1]);
               }

Some files were not shown because too many files changed in this diff