Przeglądaj źródła

[editor] Add Knockout to Vue adapter component for the Executable Actions

Johan Ahlen 5 lat temu
rodzic
commit
5639dc1321

+ 5 - 7
desktop/core/src/desktop/js/apps/notebook2/components/SqlEditor.vue → desktop/core/src/desktop/js/apps/notebook2/components/ExecutableActionsKoBridge.vue

@@ -29,19 +29,16 @@
 <script lang="ts">
   import ExecutableActions from './ExecutableActions.vue';
   import SqlExecutable from 'apps/notebook2/execution/sqlExecutable';
-  import HueButton from 'components/HueButton.vue';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
-  import I18n from 'utils/i18n';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
   import { wrap } from 'vue/webComponentWrapper';
 
   @Component({
-    components: { HueButton, ExecutableActions },
-    methods: { I18n }
+    components: { ExecutableActions }
   })
-  export default class SqlEditor extends Vue {
+  export default class ExecutableActionsKoBridge extends Vue {
     @Prop()
     executableObservable?: KnockoutObservable<SqlExecutable | undefined>;
     @Prop()
@@ -57,6 +54,7 @@
         this.subTracker.subscribe(this.executableObservable, (executable: SqlExecutable) => {
           this.executable = executable;
         });
+        this.initialized = true;
       }
     }
 
@@ -71,6 +69,6 @@
     }
   }
 
-  export const COMPONENT_NAME = 'sql-editor';
-  wrap(COMPONENT_NAME, SqlEditor);
+  export const COMPONENT_NAME = 'executable-actions-ko-bridge';
+  wrap(COMPONENT_NAME, ExecutableActionsKoBridge);
 </script>

+ 1 - 1
desktop/core/src/desktop/js/apps/notebook2/snippet.js

@@ -25,7 +25,7 @@ import 'apps/notebook2/components/ko.snippetEditorActions';
 import 'apps/notebook2/components/ko.snippetResults';
 import 'apps/notebook2/components/ko.queryHistory';
 
-import './components/SqlEditor.vue';
+import './components/ExecutableActionsKoBridge.vue';
 
 import AceAutocompleteWrapper from 'apps/notebook/aceAutocompleteWrapper';
 import apiHelper from 'api/apiHelper';

+ 3 - 3
desktop/core/src/desktop/js/ko/components/contextPopover/ko.quickQueryContext.js

@@ -21,7 +21,7 @@ import { CONTEXT_SELECTOR_COMPONENT } from 'ko/components/ko.contextSelector';
 import { HUE_DROP_DOWN_COMPONENT } from 'ko/components/ko.dropDown';
 import { SIMPLE_RESULT_GRID_COMPONENT } from 'apps/notebook2/components/resultGrid/ko.simpleResultGrid';
 
-import 'apps/notebook2/components/SqlEditor.vue';
+import 'apps/notebook2/components/ExecutableActionsKoBridge.vue';
 
 import componentUtils from 'ko/components/componentUtils';
 import DisposableComponent from 'ko/components/DisposableComponent';
@@ -84,9 +84,9 @@ const TEMPLATE = `
           }
         }
       "></div>
-      <sql-editor data-bind="vueKoProps: {
+      <executable-actions-ko-bridge data-bind="vueKoProps: {
           executableObservable: $parent.activeExecutable
-        }"></sql-editor>
+        }"></executable-actions-ko-bridge>
       <div data-bind="
         component: {
           name: '${ SIMPLE_RESULT_GRID_COMPONENT }',

+ 2 - 2
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -1238,10 +1238,10 @@
   <script type ="text/html" id="snippet-execution-controls${ suffix }">
     <div class="snippet-actions clearfix">
       <div class="pull-left">
-        <sql-editor data-bind="vueKoProps: {
+        <executable-actions-ko-bridge data-bind="vueKoProps: {
           executableObservable: activeExecutable,
           beforeExecute: beforeExecute
-        }"></sql-editor>
+        }"></executable-actions-ko-bridge>
       </div>
       <!-- ko if: isSqlDialect() && !$root.isPresentationMode() -->
       <div class="pull-right" data-bind="component: { name: 'snippet-editor-actions', params: { snippet: $data } }"></div>