Sfoglia il codice sorgente

HUE-4993 [assist] Assist entry optimization

Johan Ahlen 9 anni fa
parent
commit
1c092f8ca3

+ 9 - 8
desktop/core/src/desktop/static/desktop/js/assist/assistDbEntry.js

@@ -147,19 +147,20 @@ var AssistDbEntry = (function () {
     });
   }
 
-  AssistDbEntry.prototype.showContextPopover = function (entry, event, pinEnabled) {
+  AssistDbEntry.prototype.showContextPopover = function (entry, event) {
+    var self = this;
     var $source = $(event.target);
     var offset = $source.offset();
-    entry.statsVisible(true);
+    self.statsVisible(true);
     huePubSub.publish('sql.context.popover.show', {
       data: {
-        type: entry.definition.isColumn ? 'column' : 'table',
-        identifierChain: entry.definition.isColumn ? [{ name: entry.tableName }, { name: entry.columnName }] : [{ name: entry.tableName }]
+        type: self.definition.isColumn ? 'column' : 'table',
+        identifierChain: self.definition.isColumn ? [{ name: self.tableName }, { name: self.columnName }] : [{ name: self.tableName }]
       },
       orientation: 'right',
-      sourceType: entry.sourceType,
-      defaultDatabase: entry.databaseName,
-      pinEnabled: pinEnabled,
+      sourceType: self.sourceType,
+      defaultDatabase: self.databaseName,
+      pinEnabled: self.navigationSettings.pinEnabled,
       source: {
         element: event.target,
         left: offset.left,
@@ -169,7 +170,7 @@ var AssistDbEntry = (function () {
       }
     });
     huePubSub.subscribeOnce('sql.context.popover.hidden', function () {
-      entry.statsVisible(false);
+      self.statsVisible(false);
     });
   };
 

+ 40 - 32
desktop/core/src/desktop/templates/assist.mako

@@ -460,54 +460,62 @@ from metadata.conf import has_navigator
   <script type="text/html" id="assist-table-entry">
     <li class="assist-table" data-bind="visibleOnHover: { override: statsVisible, selector: '.table-actions' }">
       <div class="assist-actions table-actions" style="opacity: 0">
-        <a class="inactive-action" href="javascript:void(0)" data-bind="visible: navigationSettings.showStats, click: function (data, event) { showContextPopover(data, event, navigationSettings.pinEnabled); }, css: { 'blue': statsVisible }"><i class="fa fa-bar-chart" title="${_('Show details')}"></i></a>
+        <a class="inactive-action" href="javascript:void(0)" data-bind="visible: navigationSettings.showStats, click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-bar-chart" title="${_('Show details')}"></i></a>
         <a class="inactive-action" href="javascript:void(0)" data-bind="visible: navigationSettings.openItem, click: openItem"><i class="fa fa-long-arrow-right" title="${_('Open')}"></i></a>
       </div>
-      <a class="assist-entry assist-table-link" href="javascript:void(0)" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.title }, draggableText: { text: editorText,  meta: {'type': 'sql', 'table': tableName, 'database': databaseName} }"><i class="fa fa-fw fa-table muted valign-middle"></i><span data-bind="text: definition.displayName, css: { 'highlight': highlight }"></span></a>
+      <a class="assist-entry assist-table-link" href="javascript:void(0)" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.title }, draggableText: { text: editorText,  meta: {'type': 'sql', 'table': tableName, 'database': databaseName} }">
+        <i class="fa fa-fw fa-table muted valign-middle" data-bind="css: { 'fa-eye': definition.isView, 'fa-table': definition.isTable }"></i>
+        <span data-bind="text: definition.displayName, css: { 'highlight': highlight }"></span>
+      </a>
+      <div class="center" data-bind="visible: loading" style="display:none;"><i class="fa fa-spinner fa-spin assist-spinner"></i></div>
+      <!-- ko template: { if: open, name: 'assist-db-entries'  } --><!-- /ko -->
+    </li>
+  </script>
+
+  <script type="text/html" id="assist-column-entry">
+    <li data-bind="visible: ! hasErrors(), visibleOnHover: { override: statsVisible, selector: definition.isView ? '.table-actions' : '.column-actions' }, css: { 'assist-table': definition.isView, 'assist-column': definition.isColumn }">
+      <div class="assist-actions column-actions" style="opacity: 0">
+        <a class="inactive-action" href="javascript:void(0)" data-bind="visible: navigationSettings.showStats, click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-bar-chart" title="${_('Show details')}"></i></a>
+      </div>
+      <!-- ko if: expandable -->
+      <a class="assist-entry assist-field-link" href="javascript:void(0)" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.title }">
+        <span class="highlightable" data-bind="css: {'query-builder-menu': definition.isColumn, 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName }, text: definition.displayName, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName } }"></span>
+      </a>
+      <!-- /ko -->
+      <!-- ko ifnot: expandable -->
+      <div style="cursor: default;" class="assist-entry assist-field-link" href="javascript:void(0)" data-bind="multiClick: { dblClick: dblClick }, attr: {'title': definition.title }">
+        <span class="highlightable" data-bind="css: {'query-builder-menu': definition.isColumn, 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: definition.displayName, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span>
+      </div>
+      <!-- /ko -->
       <div class="center" data-bind="visible: loading" style="display:none;"><i class="fa fa-spinner fa-spin assist-spinner"></i></div>
       <!-- ko template: { if: open, name: 'assist-db-entries'  } --><!-- /ko -->
     </li>
   </script>
 
   <script type="text/html" id="assist-db-entries">
-    <!-- ko if: hasEntries() && ! loading() && filteredEntries().length == 0 -->
+    <!-- ko if: ! hasErrors() && hasEntries() && ! loading() && filteredEntries().length == 0 -->
     <ul class="assist-tables">
       <li class="assist-entry no-entries">${_('No results found')}</li>
     </ul>
     <!-- /ko -->
+    <!-- ko if: ! hasErrors() && hasEntries() && ! loading() && filteredEntries().length > 0 -->
     <ul class="database-tree" data-bind="foreachVisible: { data: filteredEntries, minHeight: (definition.isTable || definition.isView ? 20 : 25), container: '.assist-db-scrollable' }, css: { 'assist-tables': definition.isDatabase }">
-      <!-- ko template: { if: definition.isTable, name: 'assist-table-entry' } --><!-- /ko -->
-      <!-- ko ifnot: definition.isTable && ! hasErrors() -->
-      <li data-bind="visible: ! hasErrors(), visibleOnHover: { override: statsVisible, selector: definition.isView ? '.table-actions' : '.column-actions' }, css: { 'assist-table': definition.isView, 'assist-column': definition.isColumn }">
-        <!-- ko template: { if: definition.isView || definition.isColumn, name: 'assist-entry-actions' } --><!-- /ko -->
-        <!-- ko if: expandable -->
-        <a class="assist-entry" href="javascript:void(0)" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.title }, css: { 'assist-field-link': !definition.isView, 'assist-table-link': definition.isView }">
-          <!-- ko if: definition.isView -->
-            <i class="fa fa-fw fa-eye muted valign-middle"></i>
-          <!-- /ko -->
-          <span class="highlightable" data-bind="css: {'query-builder-menu': definition.isColumn, 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: definition.displayName, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span>
-        </a>
-        <!-- /ko -->
-        <!-- ko ifnot: expandable -->
-        <div style="cursor: default;" class="assist-entry" href="javascript:void(0)" data-bind="multiClick: { dblClick: dblClick }, attr: {'title': definition.title }, css: { 'assist-field-link': !definition.isView, 'assist-table-link': definition.isView }">
-          <!-- ko if: definition.isView -->
-          <i class="fa fa-fw fa-eye muted valign-middle"></i>
-          <!-- /ko -->
-          <span class="highlightable" data-bind="css: {'query-builder-menu': definition.isColumn, 'highlight': highlight}, attr: {'column': columnName, 'table': tableName, 'database': databaseName}, text: definition.displayName, draggableText: { text: editorText, meta: {'type': 'sql', 'column': columnName, 'table': tableName, 'database': databaseName} }"></span>
-        </div>
-        <!-- /ko -->
-        <div class="center" data-bind="visible: loading" style="display:none;"><i class="fa fa-spinner fa-spin assist-spinner"></i></div>
-        <!-- ko template: { if: open, name: 'assist-db-entries'  } --><!-- /ko -->
-      </li>
-      <!-- ko if: definition.isTable && hasErrors() -->
-      <li class="assist-errors">
-        <span >${ _('Error loading columns.') }</span>
-      </li>
-      <!-- /ko -->
-      <!-- /ko -->
+      <!-- ko template: { if: definition.isTable || definition.isView, name: 'assist-table-entry' } --><!-- /ko -->
+      <!-- ko template: { ifnot: definition.isTable || definition.isView, name: 'assist-column-entry' } --><!-- /ko -->
     </ul>
+    <!-- /ko -->
     <!-- ko template: { if: ! hasEntries() && ! loading() && (definition.isTable || definition.isView), name: 'assist-no-table-entries' } --><!-- /ko -->
     <!-- ko template: { if: ! hasEntries() && ! loading() && definition.isDatabase, name: 'assist-no-database-entries' } --><!-- /ko -->
+    <!-- ko if: hasErrors -->
+    <ul class="assist-tables">
+      <!-- ko if: definition.isTable -->
+      <li class="assist-errors">${ _('Error loading columns.') }</li>
+      <!-- /ko -->
+      <!-- ko ifnot: definition.isTable -->
+      <li class="assist-errors">${ _('Error loading fields.') }</li>
+      <!-- /ko -->
+    </ul>
+    <!-- /ko -->
   </script>
 
   <script type="text/html" id="assist-db-breadcrumb">