Browse Source

[ui] Vue 3 - Migrated PresentationMode component

sreenaths 4 years ago
parent
commit
2480a0874e

+ 72 - 45
desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationMode.vue

@@ -50,14 +50,12 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
   import { Variable } from 'apps/editor/components/variableSubstitution/types';
   import VariableSubstitution from 'apps/editor/components/variableSubstitution/VariableSubstitution.vue';
   import { IdentifierLocation } from 'parse/types';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
 
-  import './PresentationMode.scss';
   import ExecutableActions from 'apps/editor/components/ExecutableActions.vue';
   import ResultTable from 'apps/editor/components/result/ResultTable.vue';
   import Executor from 'apps/editor/execution/executor';
@@ -74,49 +72,78 @@
 
   const headerRegEx = /--(.*)$/m;
 
-  @Component({
-    components: { VariableSubstitution, HueButton, ResultTable, ExecutableActions, SqlText },
-    methods: { I18n }
-  })
-  export default class PresentationMode extends Vue {
-    @Prop()
-    executor!: Executor;
-    @Prop({ required: false })
-    title?: string;
-    @Prop({ required: false })
-    description?: string;
-    @Prop()
-    locations!: IdentifierLocation[];
-
-    get presentationStatements(): PresentationStatement[] {
-      return (this.executor.executables as SqlExecutable[]).map(executable => {
-        let statement = executable.parsedStatement.statement.trim();
-        let header: string | undefined = undefined;
-        const headerMatch = statement.match(headerRegEx);
-        if (headerMatch && headerMatch.index === 0) {
-          header = headerMatch[1].trim();
-          statement = statement.replace(headerMatch[0], '').trim();
-        }
-
-        return {
-          executable,
-          statement,
-          header
-        };
-      });
-    }
+  export default defineComponent({
+    components: {
+      VariableSubstitution,
+      HueButton,
+      ResultTable,
+      ExecutableActions,
+      SqlText
+    },
 
-    get dialect(): string {
-      return this.executor.connector().dialect as string;
-    }
+    props: {
+      executor: {
+        type: Object as PropType<Executor>,
+        required: true
+      },
 
-    async beforeExecute(executable: SqlExecutable): Promise<void> {
-      this.$emit('before-execute', executable);
-      this.executor.activeExecutable = executable;
-    }
+      title: {
+        type: String,
+        default: undefined
+      },
+      description: {
+        type: String,
+        default: undefined
+      },
+      locations: {
+        type: Object as PropType<IdentifierLocation[]>,
+        default: undefined
+      }
+    },
+
+    emits: ['before-execute', 'variables-changed', 'close'],
+
+    computed: {
+      presentationStatements(): PresentationStatement[] {
+        return (this.executor.executables as SqlExecutable[]).map(executable => {
+          let statement = executable.parsedStatement.statement.trim();
+          let header: string | undefined = undefined;
+          const headerMatch = statement.match(headerRegEx);
+          if (headerMatch && headerMatch.index === 0) {
+            header = headerMatch[1].trim();
+            statement = statement.replace(headerMatch[0], '').trim();
+          }
+
+          return {
+            executable,
+            statement,
+            header
+          };
+        });
+      },
 
-    onVariablesChanged(variables: Variable[]): void {
-      this.$emit('variables-changed', variables);
+      dialect(): string {
+        return this.executor.connector().dialect as string;
+      }
+    },
+
+    methods: {
+      I18n,
+
+      async beforeExecute(executable: SqlExecutable): Promise<void> {
+        this.$emit('before-execute', executable);
+
+        // eslint-disable-next-line vue/no-mutating-props
+        this.executor.activeExecutable = executable;
+      },
+
+      onVariablesChanged(variables: Variable[]): void {
+        this.$emit('variables-changed', variables);
+      }
     }
-  }
+  });
 </script>
+
+<style lang="scss">
+  @import './PresentationMode.scss';
+</style>

+ 72 - 40
desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationModeKoBridge.vue

@@ -29,43 +29,71 @@
 </template>
 
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
   import { Variable } from 'apps/editor/components/variableSubstitution/types';
   import { IdentifierLocation } from 'parse/types';
   import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/sqlWorkerHandler';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
-  import { wrap } from 'vue/webComponentWrapper';
+  import { wrap } from 'vue/webComponentWrap';
 
   import PresentationMode from './PresentationMode.vue';
   import Executable from 'apps/editor/execution/executable';
   import Executor from 'apps/editor/execution/executor';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
 
-  @Component({
-    components: { PresentationMode }
-  })
-  export default class PresentationModeKoBridge extends Vue {
-    @Prop()
-    executor: Executor | null = null;
-    @Prop()
-    titleObservable!: KnockoutObservable<string | undefined>;
-    @Prop()
-    descriptionObservable!: KnockoutObservable<string | undefined>;
-    @Prop()
-    initialVariables?: Variable[];
+  const PresentationModeKoBridge = defineComponent({
+    components: {
+      PresentationMode
+    },
+
+    props: {
+      executor: {
+        type: Object as PropType<Executor | null>,
+        default: null
+      },
+
+      titleObservable: {
+        type: Object as PropType<KnockoutObservable<string | undefined>>,
+        default: undefined
+      },
+      descriptionObservable: {
+        type: Object as PropType<KnockoutObservable<string | undefined>>,
+        default: undefined
+      },
+      initialVariables: {
+        type: Object as PropType<Variable[]>,
+        default: undefined
+      }
+    },
+
+    setup(): {
+      subTracker: SubscriptionTracker;
+    } {
+      return {
+        subTracker: new SubscriptionTracker()
+      };
+    },
+
+    data(): {
+      locations: IdentifierLocation[];
 
-    locations: IdentifierLocation[] = [];
+      title: string | null;
+      description: string | null;
 
-    title: string | null = null;
-    description: string | null = null;
+      initialized: boolean;
+    } {
+      return {
+        locations: [],
 
-    initialized = false;
+        title: null,
+        description: null,
 
-    subTracker = new SubscriptionTracker();
+        initialized: false
+      };
+    },
 
     updated(): void {
-      if (!this.initialized) {
+      if (!this.initialized && this.titleObservable && this.descriptionObservable) {
         this.title = this.titleObservable() || null;
         this.subTracker.subscribe(this.titleObservable, (title?: string) => {
           this.title = title || null;
@@ -87,31 +115,35 @@
 
         this.initialized = true;
       }
-    }
+    },
 
-    destroyed(): void {
+    unmounted(): void {
       this.subTracker.dispose();
-    }
+    },
 
-    onBeforeExecute(executable: Executable): void {
-      this.$el.dispatchEvent(
-        new CustomEvent<Executable>('before-execute', { bubbles: true, detail: executable })
-      );
-    }
+    methods: {
+      onBeforeExecute(executable: Executable): void {
+        this.$el.dispatchEvent(
+          new CustomEvent<Executable>('before-execute', { bubbles: true, detail: executable })
+        );
+      },
 
-    onClose(): void {
-      this.$el.dispatchEvent(
-        new CustomEvent<void>('close', { bubbles: true })
-      );
-    }
+      onClose(): void {
+        this.$el.dispatchEvent(
+          new CustomEvent<void>('close', { bubbles: true })
+        );
+      },
 
-    onVariablesChanged(variables: Variable[]): void {
-      this.$el.dispatchEvent(
-        new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
-      );
+      onVariablesChanged(variables: Variable[]): void {
+        this.$el.dispatchEvent(
+          new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
+        );
+      }
     }
-  }
+  });
 
   export const COMPONENT_NAME = 'presentation-mode-ko-bridge';
   wrap(COMPONENT_NAME, PresentationModeKoBridge);
+
+  export default PresentationModeKoBridge;
 </script>