refactor: ts and composition api on missing components

src/renderer/components/WorkspaceTabPropsRoutine.vue

@@ -11,16 +11,16 @@
                   @click="saveChanges"
                >
                   <i class="mdi mdi-24px mdi-content-save mr-1" />
-                  <span>{{ $t('word.save') }}</span>
+                  <span>{{ t('word.save') }}</span>
                </button>
                <button
                   :disabled="!isChanged"
                   class="btn btn-link btn-sm mr-0"
-                  :title="$t('message.clearChanges')"
+                  :title="t('message.clearChanges')"
                   @click="clearChanges"
                >
                   <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                  <span>{{ $t('word.clear') }}</span>
+                  <span>{{ t('word.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
@@ -31,15 +31,15 @@
                   @click="runRoutineCheck"
                >
                   <i class="mdi mdi-24px mdi-play mr-1" />
-                  <span>{{ $t('word.run') }}</span>
+                  <span>{{ t('word.run') }}</span>
                </button>
                <button class="btn btn-dark btn-sm" @click="showParamsModal">
                   <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
-                  <span>{{ $t('word.parameters') }}</span>
+                  <span>{{ t('word.parameters') }}</span>
                </button>
             </div>
             <div class="workspace-query-info">
-               <div class="d-flex" :title="$t('word.schema')">
+               <div class="d-flex" :title="t('word.schema')">
                   <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
                </div>
             </div>
@@ -50,7 +50,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.name') }}
+                     {{ t('word.name') }}
                   </label>
                   <input
                      ref="firstInput"
@@ -64,7 +64,7 @@
             <div v-if="customizations.languages" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.language') }}
+                     {{ t('word.language') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.language"
@@ -76,13 +76,13 @@
             <div v-if="customizations.definer" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.definer') }}
+                     {{ t('word.definer') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.definer"
-                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
-                     :option-label="(user) => user.value === '' ? user.name : `${user.name}@${user.host}`"
-                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
+                     :options="[{value: '', name: t('message.currentUser')}, ...workspace.users]"
+                     :option-label="(user: any) => user.value === '' ? user.name : `${user.name}@${user.host}`"
+                     :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
                   />
                </div>
@@ -90,7 +90,7 @@
             <div v-if="customizations.comment" class="column">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.comment') }}
+                     {{ t('word.comment') }}
                   </label>
                   <input
                      v-model="localRoutine.comment"
@@ -102,7 +102,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.sqlSecurity') }}
+                     {{ t('message.sqlSecurity') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.security"
@@ -114,7 +114,7 @@
             <div v-if="customizations.procedureDataAccess" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.dataAccess') }}
+                     {{ t('message.dataAccess') }}
                   </label>
                   <BaseSelect
                      v-model="localRoutine.dataAccess"
@@ -127,7 +127,7 @@
                <div class="form-group">
                   <label class="form-label d-invisible">.</label>
                   <label class="form-checkbox form-inline">
-                     <input v-model="localRoutine.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                     <input v-model="localRoutine.deterministic" type="checkbox"><i class="form-icon" /> {{ t('word.deterministic') }}
                   </label>
                </div>
             </div>
@@ -135,7 +135,7 @@
       </div>
       <div class="workspace-query-results column col-12 mt-2 p-relative">
          <BaseLoader v-if="isLoading" />
-         <label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.routineBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -163,286 +163,272 @@
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onUnmounted, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
+import { AlterRoutineParams, FunctionParam, RoutineInfos } from 'common/interfaces/antares';
+import { Ace } from 'ace-builds';
+import { useI18n } from 'vue-i18n';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
-import QueryEditor from '@/components/QueryEditor';
-import BaseLoader from '@/components/BaseLoader';
-import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
-import ModalAskParameters from '@/components/ModalAskParameters';
 import Routines from '@/ipc-api/Routines';
+import QueryEditor from '@/components/QueryEditor.vue';
+import BaseLoader from '@/components/BaseLoader.vue';
+import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal.vue';
+import ModalAskParameters from '@/components/ModalAskParameters.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabPropsRoutine',
-   components: {
-      QueryEditor,
-      BaseLoader,
-      WorkspaceTabPropsRoutineParamsModal,
-      ModalAskParameters,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      routine: String,
-      isSelected: Boolean,
-      schema: String
-   },
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const props = defineProps({
+   tabUid: String,
+   connection: Object,
+   routine: String,
+   isSelected: Boolean,
+   schema: String
+});
 
-      const {
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         newTab,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      } = workspacesStore;
+const { addNotification } = useNotificationsStore();
+const workspacesStore = useWorkspacesStore();
 
-      return {
-         addNotification,
-         selectedWorkspace,
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         newTab,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      };
-   },
-   data () {
-      return {
-         isLoading: false,
-         isSaving: false,
-         isParamsModal: false,
-         isAskingParameters: false,
-         originalRoutine: null,
-         localRoutine: { sql: '' },
-         lastRoutine: null,
-         sqlProxy: '',
-         editorHeight: 300
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      },
-      isChanged () {
-         return JSON.stringify(this.originalRoutine) !== JSON.stringify(this.localRoutine);
-      },
-      isDefinerInUsers () {
-         return this.originalRoutine ? this.workspace.users.some(user => this.originalRoutine.definer === `\`${user.name}\`@\`${user.host}\``) : true;
-      },
-      isTableNameValid () {
-         return this.localRoutine.name !== '';
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
+const {
+   getWorkspace,
+   refreshStructure,
+   renameTabs,
+   newTab,
+   changeBreadcrumbs,
+   setUnsavedChanges
+} = workspacesStore;
 
-         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
+const firstInput: Ref<HTMLInputElement> = ref(null);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const isParamsModal = ref(false);
+const isAskingParameters = ref(false);
+const originalRoutine: Ref<RoutineInfos> = ref(null);
+const localRoutine: Ref<RoutineInfos> = ref(null);
+const lastRoutine = ref(null);
+const sqlProxy = ref('');
+const editorHeight = ref(300);
+
+const workspace = computed(() => {
+   return getWorkspace(props.connection.uid);
+});
+
+const customizations = computed(() => {
+   return workspace.value.customizations;
+});
+
+const isChanged = computed(() => {
+   return JSON.stringify(originalRoutine.value) !== JSON.stringify(localRoutine.value);
+});
+
+const isTableNameValid = computed(() => {
+   return localRoutine.value.name !== '';
+});
+
+const getRoutineData = async () => {
+   if (!props.routine) return;
+
+   localRoutine.value = { name: '', sql: '', definer: null };
+   isLoading.value = true;
+   lastRoutine.value = props.routine;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      routine: props.routine
+   };
+
+   try {
+      const { status, response } = await Routines.getRoutineInformations(params);
+      if (status === 'success') {
+         originalRoutine.value = response;
+
+         originalRoutine.value.parameters = [...originalRoutine.value.parameters.map(param => {
+            param._antares_id = uidGen();
+            return param;
+         })];
+
+         localRoutine.value = JSON.parse(JSON.stringify(originalRoutine.value));
+         sqlProxy.value = localRoutine.value.sql;
       }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getRoutineData();
-            this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
-            this.lastRoutine = this.routine;
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   resizeQueryEditor();
+   isLoading.value = false;
+};
+
+const saveChanges = async () => {
+   if (isSaving.value) return;
+   isSaving.value = true;
+   const params = {
+      uid: props.connection.uid as string,
+      routine: {
+         ...localRoutine.value,
+         schema: props.schema,
+         oldName: originalRoutine.value.name
+      } as AlterRoutineParams
+   };
+
+   try {
+      const { status, response } = await Routines.alterRoutine(params);
+
+      if (status === 'success') {
+         const oldName = originalRoutine.value.name;
+
+         await refreshStructure(props.connection.uid);
+
+         if (oldName !== localRoutine.value.name) {
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: oldName,
+               elementNewName: localRoutine.value.name,
+               elementType: 'procedure'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, routine: localRoutine.value.name });
          }
-      },
-      async routine () {
-         if (this.isSelected) {
-            await this.getRoutineData();
-            this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
-            this.lastRoutine = this.routine;
-         }
-      },
-      async isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, routine: this.routine });
-
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
-
-            if (this.lastRoutine !== this.routine)
-               this.getRoutineData();
-         }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-      }
-   },
-   async created () {
-      await this.getRoutineData();
-      this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
-      window.addEventListener('keydown', this.onKey);
-   },
-   mounted () {
-      window.addEventListener('resize', this.resizeQueryEditor);
-   },
-   unmounted () {
-      window.removeEventListener('resize', this.resizeQueryEditor);
-   },
-   beforeUnmount () {
-      window.removeEventListener('keydown', this.onKey);
-   },
-   methods: {
-      async getRoutineData () {
-         if (!this.routine) return;
-
-         this.localRoutine = { sql: '' };
-         this.isLoading = true;
-         this.lastRoutine = this.routine;
-
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            routine: this.routine
-         };
-
-         try {
-            const { status, response } = await Routines.getRoutineInformations(params);
-            if (status === 'success') {
-               this.originalRoutine = response;
-
-               this.originalRoutine.parameters = [...this.originalRoutine.parameters.map(param => {
-                  param._antares_id = uidGen();
-                  return param;
-               })];
-
-               this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
-               this.sqlProxy = this.localRoutine.sql;
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.resizeQueryEditor();
-         this.isLoading = false;
-      },
-      async saveChanges () {
-         if (this.isSaving) return;
-         this.isSaving = true;
-         const params = {
-            uid: this.connection.uid,
-            routine: {
-               ...this.localRoutine,
-               schema: this.schema,
-               oldName: this.originalRoutine.name
-            }
-         };
-
-         try {
-            const { status, response } = await Routines.alterRoutine(params);
-
-            if (status === 'success') {
-               const oldName = this.originalRoutine.name;
-
-               await this.refreshStructure(this.connection.uid);
-
-               if (oldName !== this.localRoutine.name) {
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: oldName,
-                     elementNewName: this.localRoutine.name,
-                     elementType: 'procedure'
-                  });
-
-                  this.changeBreadcrumbs({ schema: this.schema, procedure: this.localRoutine.name });
-               }
-               else
-                  this.getRoutineData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
-         this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
-      },
-      resizeQueryEditor () {
-         if (this.$refs.queryEditor) {
-            const footer = document.getElementById('footer');
-            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
-            this.editorHeight = size;
-            this.$refs.queryEditor.editor.resize();
-         }
-      },
-      optionsUpdate (options) {
-         this.localRoutine = options;
-      },
-      parametersUpdate (parameters) {
-         this.localRoutine = { ...this.localRoutine, parameters };
-      },
-      runRoutineCheck () {
-         if (this.localRoutine.parameters.length)
-            this.showAskParamsModal();
          else
-            this.runRoutine();
-      },
-      runRoutine (params) {
-         if (!params) params = [];
+            getRoutineData();
+      }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
 
-         let sql;
-         switch (this.connection.client) { // TODO: move in a better place
-            case 'maria':
-            case 'mysql':
-            case 'pg':
-               sql = `CALL ${this.originalRoutine.name}(${params.join(',')})`;
-               break;
-            case 'mssql':
-               sql = `EXEC ${this.originalRoutine.name} ${params.join(',')}`;
-               break;
-            default:
-               sql = `CALL \`${this.originalRoutine.name}\`(${params.join(',')})`;
-         }
+   isSaving.value = false;
+};
 
-         this.newTab({ uid: this.connection.uid, content: sql, type: 'query', autorun: true });
-      },
-      showParamsModal () {
-         this.isParamsModal = true;
-      },
-      hideParamsModal () {
-         this.isParamsModal = false;
-      },
-      showAskParamsModal () {
-         this.isAskingParameters = true;
-      },
-      hideAskParamsModal () {
-         this.isAskingParameters = false;
-      },
-      onKey (e) {
-         if (this.isSelected) {
-            e.stopPropagation();
-            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
-               if (this.isChanged)
-                  this.saveChanges();
-            }
-         }
+const clearChanges = () => {
+   localRoutine.value = JSON.parse(JSON.stringify(originalRoutine.value));
+   queryEditor.value.editor.session.setValue(localRoutine.value.sql);
+};
+
+const resizeQueryEditor = () => {
+   if (queryEditor.value) {
+      const footer = document.getElementById('footer');
+      const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
+      editorHeight.value = size;
+      queryEditor.value.editor.resize();
+   }
+};
+
+const parametersUpdate = (parameters: FunctionParam[]) => {
+   localRoutine.value = { ...localRoutine.value, parameters };
+};
+
+const runRoutineCheck = () => {
+   if (localRoutine.value.parameters.length)
+      showAskParamsModal();
+   else
+      runRoutine();
+};
+
+const runRoutine = (params?: string[]) => {
+   if (!params) params = [];
+
+   let sql;
+   switch (props.connection.client) { // TODO: move in a better place
+      case 'maria':
+      case 'mysql':
+      case 'pg':
+         sql = `CALL ${originalRoutine.value.name}(${params.join(',')})`;
+         break;
+      case 'mssql':
+         sql = `EXEC ${originalRoutine.value.name} ${params.join(',')}`;
+         break;
+      default:
+         sql = `CALL \`${originalRoutine.value.name}\`(${params.join(',')})`;
+   }
+
+   newTab({ uid: props.connection.uid, content: sql, type: 'query', autorun: true });
+};
+
+const showParamsModal = () => {
+   isParamsModal.value = true;
+};
+
+const hideParamsModal = () => {
+   isParamsModal.value = false;
+};
+
+const showAskParamsModal = () => {
+   isAskingParameters.value = true;
+};
+
+const hideAskParamsModal = () => {
+   isAskingParameters.value = false;
+};
+
+const onKey = (e: KeyboardEvent) => {
+   if (props.isSelected) {
+      e.stopPropagation();
+      if (e.ctrlKey && e.key === 's') { // CTRL + S
+         if (isChanged.value)
+            saveChanges();
       }
    }
 };
+
+watch(() => props.schema, async () => {
+   if (props.isSelected) {
+      await getRoutineData();
+      queryEditor.value.editor.session.setValue(localRoutine.value.sql);
+      lastRoutine.value = props.routine;
+   }
+});
+
+watch(() => props.routine, async () => {
+   if (props.isSelected) {
+      await getRoutineData();
+      queryEditor.value.editor.session.setValue(localRoutine.value.sql);
+      lastRoutine.value = props.routine;
+   }
+});
+
+watch(() => props.isSelected, async (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: props.schema, routine: props.routine });
+
+      setTimeout(() => {
+         resizeQueryEditor();
+      }, 200);
+
+      if (lastRoutine.value !== props.routine)
+         getRoutineData();
+   }
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getRoutineData();
+   queryEditor.value.editor.session.setValue(localRoutine.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
 </script>