Browse Source

HUE-8246 [dashboard] 'Add' on an empty widget should behave and look like dimensions metric forms

Enrico Berti 7 years ago
parent
commit
ebf821d701

+ 94 - 9
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -221,24 +221,109 @@
         </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 }">
-
+        <!-- ko with: emptyProperties -->
         <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)">
+            <div class="action-icon" data-bind="click: function(){ isAdding(true); }"><i class="fa fa-plus"></i> ${ _('Add') }</div>
+            <div class="metric-form empty-widget-form" data-bind="visible: isAdding">
+                <a href="javascript:void(0)" data-bind="toggle: isAdding" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
+                <select data-bind="selectize: fieldOperations, optionsText: 'label', optionsValue: 'value', value: fieldOperation" class="input-small"></select>
+                <select data-bind="selectize: $root.collection.template.filteredModalFields().sort(function (l, r) { return l.name() > r.name() ? 1 : -1 }), value: fieldName, optionsValue: 'name', optionsText: 'name', optionsCaption: '${ _ko('Field...') }'" class="hit-options input-small" style="margin-bottom: 0"></select>
+                <!-- ko if: fieldName -->
+                <a class="inactive-action context-popover-icon" href="javascript:void(0);" data-bind="sqlContextPopover: { sourceType: 'solr', path: 'default.' + $root.collection.name() + '.' + fieldName()  }">
+                  <i class="fa fa-fw fa-info" title="${_('Show Details')}"/>
+                </a>
+                <!-- /ko -->
+
+                <div class="clearfix"></div>
+                <br>
+
+                <div class="facet-field-cnt">
+                  <span class="facet-field-label facet-field-label-fixed-width">${ _('Visualization') }</span>
+                  <div class="dropdown inline-block">
+                    <a class="dropdown-toggle" href="javascript: void(0)" data-toggle="dropdown" title="${ _('Change widget visualization') }">
+                      <!-- ko switch: fieldViz -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.COUNTER --><i class="fa fa-superscript fa-fw"></i> ${_('Counter')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.TEXTSELECT --><i class="fa fa-sort-amount-asc fa-fw"></i> ${_('Text select')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.BARCHART --><i class="hcha hcha-bar-chart fa-fw"></i> ${_('Bars')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.PIECHART --><i class="hcha hcha-pie-chart fa-fw"></i> ${_('Pie')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.TIMELINECHART --><i class="fa fa-fw fa-line-chart"></i> ${_('Timeline')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.GRADIENTMAP --><i class="hcha fa-fw hcha-map-chart chart-icon"></i> ${_('Gradient Map')}<!-- /ko -->
+                        <!-- ko case: ko.HUE_CHARTS.TYPES.MAP --><i class="fa fa-fw fa-map-marker chart-icon"></i> ${_('Marker Map')}<!-- /ko -->
+                      <!-- /ko -->
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.COUNTER); }">
+                          <i class="fa fa-superscript fa-fw"></i> ${_('Counter')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.TEXTSELECT); }">
+                          <i class="fa fa-sort-amount-asc fa-fw"></i> ${_('Text select')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.BARCHART); }">
+                          <i class="hcha hcha-bar-chart fa-fw"></i> ${_('Bars')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.PIECHART); }">
+                          <i class="hcha hcha-pie-chart fa-fw"></i> ${_('Pie')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.TIMELINECHART); }">
+                          <i class="fa fa-fw fa-line-chart"></i> ${_('Timeline')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.GRADIENTMAP); }">
+                          <i class="hcha fa-fw hcha-map-chart chart-icon"></i> ${_('Gradient Map')}
+                        </a>
+                      </li>
+                      <li>
+                        <a href="javascript:void(0)"
+                           data-bind="click: function(){ fieldViz(ko.HUE_CHARTS.TYPES.MAP); }">
+                          <i class="fa fa-fw fa-map-marker chart-icon"></i> ${_('Marker Map')}
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="facet-field-cnt">
+                  <span class="facet-field-label facet-field-label-fixed-width">${ _('Sorting') }</span>
+                  <a href="javascript: void(0)" title="${ _('Toggle sort order') }" data-bind="click: loopThroughSorts">
+                    <i class="fa fa-fw" data-bind="css: { 'fa-caret-down': fieldSort() == 'desc', 'fa-caret-up': fieldSort() == 'asc', 'fa-sort': fieldSort() == 'default' }"></i>
+                    <span data-bind="visible: fieldSort() == 'desc'">${_('descending')}</span>
+                    <span data-bind="visible: fieldSort() == 'asc'">${_('ascending')}</span>
+                    <span data-bind="visible: fieldSort() == 'default'">${_('default')}</span>
+                  </a>
+                </div>
+
+
+                <a data-bind="visible: fieldName(), click: function() { huePubSub.publish('gridster.empty.add', { widget: $root.draggableBucket(), target: $parent }); }" class="pull-right margin-top-10" href="javascript:void(0)">
                   <i class="fa fa-plus"></i> ${ _('Add') }
                 </a>
+                <div class="pull-right margin-top-10 muted" data-bind="visible: !fieldName()">
+                  <i class="fa fa-plus"></i> ${ _('Add') }
+                </div>
             </div>
           </div>
         </div>
+        <!-- /ko -->
       </div>
-    <div class="clearfix"></div>
-  </div>
-
-      </div>
+      <div class="clearfix"></div>
     </div>
-    <!-- /ko -->
+  <!-- /ko -->
   <!-- ko with: widget -->
     <div data-bind="template: 'widget-template${ suffix }', css: { 'query-builder': $root.isQueryBuilder }"></div>
     <div class="clearfix"></div>

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


+ 31 - 12
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -63,17 +63,16 @@ function loadSearchLayout(viewModel, json_layout) {
   viewModel.columns(_columns);
 }
 
-function loadDashboardLayout(viewModel, gridster_layout) {
+function loadDashboardLayout(vm, gridster_layout) {
   $.each(gridster_layout, function(index, item) {
-    viewModel.gridItems.push(
-      ko.mapping.fromJS({
-        col: parseInt(item.col),
-        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,
-        tempFieldName: null,
-      }));
+    vm.gridItems.push(ko.mapping.fromJS({
+      col: parseInt(item.col),
+      row: parseInt(item.row),
+      size_x: parseInt(item.size_x),
+      size_y: parseInt(item.size_y),
+      widget: item.widget ? vm.getWidgetById(item.widget.id) : null,
+      emptyProperties: new EmptyGridsterWidget(vm),
+    }));
   });
 }
 
@@ -104,7 +103,8 @@ function layoutToGridster(vm) {
           row: parseInt(startingRow),
           size_x: parseInt(column.size()),
           size_y: parseInt(emptyWidgetHeight),
-          widget: null
+          widget: null,
+          emptyProperties: new EmptyGridsterWidget(vm),
         }));
         startingRow += emptyWidgetHeight;
       }
@@ -115,6 +115,25 @@ function layoutToGridster(vm) {
   return layout;
 }
 
+var EmptyGridsterWidget = function (vm) {
+  var self = this;
+
+  self.isAdding = ko.observable(true);
+  self.fieldName = ko.observable();
+  self.fieldViz = ko.observable(ko.HUE_CHARTS.TYPES.BARCHART);
+  self.fieldSort = ko.observable('desc');
+  self.fieldOperation = ko.observable();
+  self.fieldOperations = ko.pureComputed(function () {
+    return HIT_OPTIONS;
+  });
+
+  self.availableSorts = ['desc', 'asc', 'default'];
+  self.loopThroughSorts = function () {
+    self.availableSorts.push(self.availableSorts.shift());
+    self.fieldSort(self.availableSorts[0]);
+  }
+};
+
 var Query = function (vm, query) {
   var self = this;
 
@@ -1065,7 +1084,7 @@ var Collection = function (vm, collection) {
 
           self._addObservablesToFacet(facet, vm); // Top widget
           self.facets.push(facet);
-
+          huePubSub.publish('search.facet.added', facet);
           vm.search();
         } else {
           $(document).trigger("error", data.message);

+ 5 - 3
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -614,13 +614,16 @@
     margin-top: 8px;
     margin-left: -5px;
     .selectize-control {
+      width: 140px;
       margin-top: 4px;
-      margin-right: 20px;
     }
     .context-popover-icon {
-      margin-left: -20px;
       margin-right: 20px;
     }
+    .dropdown a.dropdown-toggle {
+      padding-left: 0;
+    }
+
   }
 
   .html-form {
@@ -631,7 +634,6 @@
 
   .empty-gridster-widget {
     .metric-form {
-      .hue-no-box-shadow;
       .selectize-control {
         margin-right: auto;
       }

+ 13 - 5
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -2187,7 +2187,6 @@ ${ dashboard.layout_skeleton(suffix='search') }
 <script type="text/html" id="metric-form">
     <!-- ko if: typeof isEditing !== 'undefined' && isEditing() -->
     <div>
-
       <!-- ko if: typeof $parents[0].isAdding === 'undefined' || !$parents[0].isAdding() -->
       <a href="javascript:void(0)" data-bind="toggle: isEditing" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
       <!-- /ko -->
@@ -2195,7 +2194,7 @@ ${ dashboard.layout_skeleton(suffix='search') }
       <a href="javascript:void(0)" data-bind="toggle: $parents[0].isAdding" class="pull-right"><i class="fa fa-times inactive-action"></i></a>
       <!-- /ko -->
       <!-- ko with: aggregate -->
-      <select data-bind="options: metrics, optionsText: 'label', optionsValue: 'value', value: $data.function, disable: $parents[1].widgetType() != 'hit-widget' && (typeof $index != 'undefined' && $index() == 0)" class="input-small"></select>
+      <select data-bind="selectize: metrics, optionsText: 'label', optionsValue: 'value', value: $data.function, disable: $parents[1].widgetType() != 'hit-widget' && (typeof $index != 'undefined' && $index() == 0)" class="input-small"></select>
 
       <!-- ko if: $data.function() == 'percentile' -->
       <input type="number" class="input-mini" data-bind="value: percentile"/>
@@ -4315,11 +4314,20 @@ $(document).ready(function () {
     selectedWidget = new Widget(widgetClone);
     fakeRow.addWidget(selectedWidget);
     selectedGridster = options.target;
+    huePubSub.subscribeOnce('search.facet.added', function (facet) {
+      facet.template.chartSettings.chartType(selectedGridster.emptyProperties.fieldViz());
+      var form = facet.properties.facets()[0];
+      if (form) {
+        form.aggregate.function(selectedGridster.emptyProperties.fieldOperation());
+        form.sort(selectedGridster.emptyProperties.fieldSort());
+      }
+    }, 'dashboard');
     addFacetDemiModalFieldPreview({
       'name': function () {
-        return selectedGridster.tempFieldName
+        return selectedGridster.emptyProperties.fieldName
       }
     });
+
     tempDraggable = null;
   }, 'dashboard');
 
@@ -4521,7 +4529,7 @@ $(document).ready(function () {
                 size_x: dimensions.sizex,
                 size_y: tempDraggable.gridsterHeight(),
                 widget: null,
-                tempFieldName: null,
+                emptyProperties: new EmptyGridsterWidget(searchViewModel),
                 callback: function (el) {
                   if (["resultset-widget", "html-resultset-widget", "filter-widget", "leafletmap-widget"].indexOf(tempDraggable.widgetType()) > -1) {
                     showAddFacetDemiModal(tempDraggable, searchViewModel.gridItems()[searchViewModel.gridItems().length - 1]);
@@ -4540,7 +4548,7 @@ $(document).ready(function () {
               size_x: dimensions.sizex,
               size_y: 6,
               widget: null,
-              tempFieldName: null,
+              emptyProperties: new EmptyGridsterWidget(searchViewModel),
               callback: function (el) {
                 showAddFacetDemiModal(null, searchViewModel.gridItems()[searchViewModel.gridItems().length - 1]);
               }

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