refactor: ts and composition api on missing components

src/common/interfaces/antares.ts

@@ -92,13 +92,15 @@ export interface TableInfos {
    collation: string;
 }
 
+export type TableOptions = Partial<TableInfos>;
+
 export interface TableField {
    // eslint-disable-next-line camelcase
    _antares_id?: string;
    name: string;
-   key: string;
    type: string;
    schema: string;
+   table?: string;
    numPrecision?: number;
    numLength?: number;
    datePrecision?: number;
@@ -109,6 +111,7 @@ export interface TableField {
    zerofill?: boolean;
    order?: number;
    default?: string;
+   defaultType?: string;
    enumValues?: string;
    charset?: string;
    collation?: string;
@@ -118,7 +121,11 @@ export interface TableField {
    comment?: string;
    after?: string;
    orgName?: string;
-   length?: number;
+   length?: number | false;
+   alias: string;
+   tableAlias: string;
+   orgTable: string;
+   key?: 'pri' | 'uni';
 }
 
 export interface TableIndex {
@@ -136,6 +143,8 @@ export interface TableIndex {
 }
 
 export interface TableForeign {
+   // eslint-disable-next-line camelcase
+   _antares_id?: string;
    constraintName: string;
    refSchema: string;
    table: string;
@@ -147,15 +156,6 @@ export interface TableForeign {
    oldName?: string;
 }
 
-export interface TableOptions {
-   name: string;
-   type?: 'table' | 'view';
-   engine?: string;
-   comment?: string;
-   collation?: string;
-   autoIncrement?: number;
-}
-
 export interface CreateTableParams {
    /** Connection UID */
    uid?: string;
@@ -236,15 +236,12 @@ export interface CreateTriggerParams {
 export interface AlterTriggerParams extends CreateTriggerParams {
    oldName?: string;
 }
-export interface TriggerFunctionInfos {
-   name: string;
-   type: string;
-   security: string;
-}
 
 // Routines & Functions
 
 export interface FunctionParam {
+   // eslint-disable-next-line camelcase
+   _antares_id: string;
    context: string;
    name: string;
    type: string;
@@ -267,9 +264,11 @@ export interface RoutineInfos {
    parameters?: FunctionParam[];
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    returns?: any;
+   returnsLength?: number;
 }
 
 export type FunctionInfos = RoutineInfos
+export type TriggerFunctionInfos = FunctionInfos
 
 export interface CreateRoutineParams {
    name: string;
@@ -309,29 +308,6 @@ export interface AlterFunctionParams extends CreateFunctionParams {
 
 // Events
 export interface EventInfos {
-   name: string;
-   definition: string;
-   type: string;
-   definer: string;
-   body: string;
-   starts: string;
-   ends: string;
-   enabled: boolean;
-   executeAt: string;
-   intervalField: string;
-   intervalValue: string;
-   onCompletion: string;
-   originator: string;
-   sqlMode: string;
-   created: string;
-   updated: string;
-   lastExecuted: string;
-   comment: string;
-   charset: string;
-   timezone: string;
-}
-
-export interface CreateEventParams {
    definer?: string;
    schema: string;
    name: string;
@@ -340,12 +316,15 @@ export interface CreateEventParams {
    starts: string;
    ends: string;
    at: string;
-   preserve: string;
+   preserve: boolean;
    state: string;
    comment: string;
+   enabled?: boolean;
    sql: string;
 }
 
+export type CreateEventParams = EventInfos;
+
 export interface AlterEventParams extends CreateEventParams {
    oldName?: string;
 }
@@ -397,17 +376,10 @@ export interface QueryParams {
    tabUid?: string;
 }
 
-export interface QueryField {
-   name: string;
-   alias: string;
-   orgName: string;
-   schema: string;
-   table: string;
-   tableAlias: string;
-   orgTable: string;
-   type: string;
-   length: number;
-}
+/**
+ * @deprecated Use TableFIeld
+ */
+export type QueryField = TableField
 
 export interface QueryForeign {
    schema: string;

src/common/interfaces/tableApis.ts

@@ -1,5 +1,34 @@
 import { UsableLocale } from '@faker-js/faker';
 
+export interface TableUpdateParams {
+   uid: string;
+   schema: string;
+   table: string;
+   primary?: string;
+   id: number | string;
+   content: number | string | boolean | Date | Blob | null;
+   type: string;
+   field: string;
+}
+
+export interface TableDeleteParams {
+   uid: string;
+   schema: string;
+   table: string;
+   primary?: string;
+   field: string;
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   rows: {[key: string]: any};
+}
+
+export interface TableFilterClausole {
+   active: boolean;
+   field: string;
+   op: '=' | '!=' | '>' | '<' | '>=' | '<=' | 'IN' | 'NOT IN' | 'LIKE' | 'BETWEEN' | 'IS NULL' | 'IS NOT NULL';
+   value: '';
+   value2: '';
+}
+
 export interface InsertRowsParams {
    uid: string;
    schema: string;

src/main/libs/clients/MySQLClient.ts

@@ -381,25 +381,18 @@ export class MySQLClient extends AntaresCore {
             const remappedSchedulers: antares.EventInfos[] = schedulers.filter(scheduler => scheduler.Db === db.Database).map(scheduler => {
                return {
                   name: scheduler.EVENT_NAME,
-                  definition: scheduler.EVENT_DEFINITION,
-                  type: scheduler.EVENT_TYPE,
+                  schema: scheduler.Db,
+                  sql: scheduler.EVENT_DEFINITION,
+                  execution: scheduler.EVENT_TYPE === 'RECURRING' ? 'EVERY' : 'ONCE',
                   definer: scheduler.DEFINER,
-                  body: scheduler.EVENT_BODY,
                   starts: scheduler.STARTS,
                   ends: scheduler.ENDS,
+                  state: scheduler.STATUS === 'ENABLED' ? 'ENABLE' : scheduler.STATE === 'DISABLED' ? 'DISABLE' : 'DISABLE ON SLAVE',
                   enabled: scheduler.STATUS === 'ENABLED',
-                  executeAt: scheduler.EXECUTE_AT,
-                  intervalField: scheduler.INTERVAL_FIELD,
-                  intervalValue: scheduler.INTERVAL_VALUE,
-                  onCompletion: scheduler.ON_COMPLETION,
-                  originator: scheduler.ORIGINATOR,
-                  sqlMode: scheduler.SQL_MODE,
-                  created: scheduler.CREATED,
-                  updated: scheduler.LAST_ALTERED,
-                  lastExecuted: scheduler.LAST_EXECUTED,
-                  comment: scheduler.EVENT_COMMENT,
-                  charset: scheduler.CHARACTER_SET_CLIENT,
-                  timezone: scheduler.TIME_ZONE
+                  at: scheduler.EXECUTE_AT,
+                  every: [scheduler.INTERVAL_FIELD, scheduler.INTERVAL_VALUE],
+                  preserve: scheduler.ON_COMPLETION.includes('PRESERVE'),
+                  comment: scheduler.EVENT_COMMENT
                };
             });
 
@@ -930,19 +923,22 @@ export class MySQLClient extends AntaresCore {
    }
 
    async getViewInformations ({ schema, view }: { schema: string; view: string }) {
-      const sql = `SHOW CREATE VIEW \`${schema}\`.\`${view}\``;
-      const results = await this.raw(sql);
+      const { rows: algorithm } = await this.raw(`SHOW CREATE VIEW \`${schema}\`.\`${view}\``);
+      const { rows: viewInfo } = await this.raw(`
+          SELECT * 
+          FROM INFORMATION_SCHEMA.VIEWS
+          WHERE TABLE_SCHEMA = '${schema}' 
+          AND TABLE_NAME = '${view}'
+       `);
 
-      return results.rows.map(row => {
-         return {
-            algorithm: row['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
-            definer: row['Create View'].match(/(?<=DEFINER=).*?(?=\s)/gs)[0],
-            security: row['Create View'].match(/(?<=SQL SECURITY ).*?(?=\s)/gs)[0],
-            updateOption: row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs) ? row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs)[0] : '',
-            sql: row['Create View'].match(/(?<=AS ).*?$/gs)[0],
-            name: row.View
-         };
-      })[0];
+      return {
+         algorithm: algorithm[0]['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
+         definer: viewInfo[0].DEFINER,
+         security: viewInfo[0].SECURITY_TYPE,
+         updateOption: viewInfo[0].CHECK_OPTION === 'NONE' ? '' : viewInfo[0].CHECK_OPTION,
+         sql: viewInfo[0].VIEW_DEFINITION,
+         name: viewInfo[0].TABLE_NAME
+      };
    }
 
    async dropView (params: { schema: string; view: string }) {
@@ -955,7 +951,7 @@ export class MySQLClient extends AntaresCore {
          USE \`${view.schema}\`; 
          ALTER ALGORITHM = ${view.algorithm}${view.definer ? ` DEFINER=${view.definer}` : ''} 
          SQL SECURITY ${view.security} 
-         params \`${view.schema}\`.\`${view.oldName}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}
+         VIEW \`${view.schema}\`.\`${view.oldName}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}
       `;
 
       if (view.name !== view.oldName)

src/renderer/components/ModalAskParameters.vue

@@ -50,14 +50,11 @@
 <script setup lang="ts">
 import { computed, PropType, Ref, ref } from 'vue';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
-import { FunctionParam } from 'common/interfaces/antares';
+import { FunctionInfos, RoutineInfos } from 'common/interfaces/antares';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 
-// eslint-disable-next-line camelcase
-type LocalRoutineParams = FunctionParam & {_antares_id: string};
-
 const props = defineProps({
-   localRoutine: Object as PropType<{name: string; parameters: LocalRoutineParams[]}>,
+   localRoutine: Object as PropType<RoutineInfos | FunctionInfos>,
    client: String
 });
 

src/renderer/components/ModalHistory.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-history mr-1" />
-                     <span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
+                     <span class="cut-text">{{ t('word.history') }}: {{ connectionName }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -22,7 +22,7 @@
                      v-model="searchTerm"
                      class="form-input"
                      type="text"
-                     :placeholder="$t('message.searchForQueries')"
+                     :placeholder="t('message.searchForQueries')"
                   >
                   <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
                   <i
@@ -67,13 +67,13 @@
                                     <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
                                     <div class="tile-history-buttons">
                                        <button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
-                                          <i class="mdi mdi-open-in-app pr-1" /> {{ $t('word.select') }}
+                                          <i class="mdi mdi-open-in-app pr-1" /> {{ t('word.select') }}
                                        </button>
                                        <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
-                                          <i class="mdi mdi-content-copy pr-1" /> {{ $t('word.copy') }}
+                                          <i class="mdi mdi-content-copy pr-1" /> {{ t('word.copy') }}
                                        </button>
                                        <button class="btn btn-link pl-1" @click="deleteQuery(query)">
-                                          <i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
+                                          <i class="mdi mdi-delete-forever pr-1" /> {{ t('word.delete') }}
                                        </button>
                                     </div>
                                  </div>
@@ -88,7 +88,7 @@
                      <i class="mdi mdi-history mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ $t('message.thereIsNoQueriesYet') }}
+                     {{ t('message.thereIsNoQueriesYet') }}
                   </p>
                </div>
             </div>
@@ -99,12 +99,15 @@
 
 <script setup lang="ts">
 import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import * as moment from 'moment';
 import { ConnectionParams } from 'common/interfaces/antares';
 import { HistoryRecord, useHistoryStore } from '@/stores/history';
 import { useConnectionsStore } from '@/stores/connections';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 
+const { t } = useI18n();
+
 const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
 const { getConnectionName } = useConnectionsStore();
 

src/renderer/components/WorkspaceTabNewFunction.vue

@@ -11,27 +11,27 @@
                   @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" />
 
                <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>
@@ -42,7 +42,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.name') }}
+                     {{ t('word.name') }}
                   </label>
                   <input
                      ref="firstInput"
@@ -55,7 +55,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="localFunction.language"
@@ -67,11 +67,11 @@
             <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="localFunction.definer"
-                     :options="[{value: '', name:$t('message.currentUser')}, ...workspace.users]"
+                     :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"
@@ -81,7 +81,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.returns') }}
+                     {{ t('word.returns') }}
                   </label>
                   <div class="input-group">
                      <BaseSelect
@@ -101,7 +101,7 @@
                         class="form-input"
                         type="number"
                         min="0"
-                        :placeholder="$t('word.length')"
+                        :placeholder="t('word.length')"
                      >
                   </div>
                </div>
@@ -109,7 +109,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="localFunction.comment"
@@ -121,7 +121,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.sqlSecurity') }}
+                     {{ t('message.sqlSecurity') }}
                   </label>
                   <BaseSelect
                      v-model="localFunction.security"
@@ -133,7 +133,7 @@
             <div v-if="customizations.functionDataAccess" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.dataAccess') }}
+                     {{ t('message.dataAccess') }}
                   </label>
                   <BaseSelect
                      v-model="localFunction.dataAccess"
@@ -146,7 +146,7 @@
                <div class="form-group">
                   <label class="form-label d-invisible">.</label>
                   <label class="form-checkbox form-inline">
-                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ t('word.deterministic') }}
                   </label>
                </div>
             </div>
@@ -154,7 +154,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.functionBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.functionBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -186,6 +186,9 @@ import QueryEditor from '@/components/QueryEditor.vue';
 import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { FunctionInfos, FunctionParam } from 'common/interfaces/antares';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
    tabUid: String,

src/renderer/components/WorkspaceTabNewTable.vue

@@ -201,7 +201,7 @@ const {
    changeBreadcrumbs
 } = workspacesStore;
 
-const indexTable: Ref<Component & {$refs: { tableWrapper: HTMLDivElement }}> = ref(null);
+const indexTable: Ref<Component & { tableWrapper: HTMLDivElement }> = ref(null);
 const firstInput: Ref<HTMLInputElement> = ref(null);
 const isLoading = ref(false);
 const isSaving = ref(false);
@@ -336,7 +336,7 @@ const addField = () => {
    });
 
    setTimeout(() => {
-      const scrollable = indexTable.value.$refs.tableWrapper;
+      const scrollable = indexTable.value.tableWrapper;
       scrollable.scrollTop = scrollable.scrollHeight + 30;
    }, 20);
 };
@@ -364,7 +364,7 @@ const duplicateField = (uid: string) => {
    localFields.value = [...localFields.value, fieldToClone];
 
    setTimeout(() => {
-      const scrollable = indexTable.value.$refs.tableWrapper;
+      const scrollable = indexTable.value.tableWrapper;
       scrollable.scrollTop = scrollable.scrollHeight + 30;
    }, 20);
 };

src/renderer/components/WorkspaceTabNewTrigger.vue

@@ -85,12 +85,12 @@
                         />
                         <div v-if="customizations.triggerMultipleEvents" class="px-4">
                            <label
-                              v-for="event in Object.keys(localEvents)"
+                              v-for="event in Object.keys(localEvents) as ('INSERT' | 'UPDATE' | 'DELETE')[]"
                               :key="event"
                               class="form-checkbox form-inline"
-                              @change.prevent="changeEvents(event as 'INSERT' | 'UPDATE' | 'DELETE')"
+                              @change.prevent="changeEvents(event)"
                            >
-                              <input :checked="localEvents[event as 'INSERT' | 'UPDATE' | 'DELETE']" type="checkbox"><i class="form-icon" /> {{ event }}
+                              <input :checked="localEvents[event]" type="checkbox"><i class="form-icon" /> {{ event }}
                            </label>
                         </div>
                      </div>

src/renderer/components/WorkspaceTabNewView.vue

@@ -144,17 +144,9 @@ const originalView = ref(null);
 const localView = ref(null);
 const editorHeight = ref(300);
 
-const workspace = computed(() => {
-   return getWorkspace(props.connection.uid);
-});
-
-const isChanged = computed(() => {
-   return JSON.stringify(originalView.value) !== JSON.stringify(localView.value);
-});
-
-const isDefinerInUsers = computed(() => {
-   return originalView.value ? workspace.value.users.some(user => originalView.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
-});
+const workspace = computed(() => getWorkspace(props.connection.uid));
+const isChanged = computed(() => JSON.stringify(originalView.value) !== JSON.stringify(localView.value));
+const isDefinerInUsers = computed(() => originalView.value ? workspace.value.users.some(user => originalView.value.definer === `\`${user.name}\`@\`${user.host}\``) : true);
 
 const users = computed(() => {
    const users = [{ value: '' }, ...workspace.value.users];

src/renderer/components/WorkspaceTabPropsFunction.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="runFunctionCheck"
                >
                   <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="localFunction.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="localFunction.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,13 +90,13 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.returns') }}
+                     {{ t('word.returns') }}
                   </label>
                   <div class="input-group">
                      <BaseSelect
                         v-model="localFunction.returns"
                         class="form-select text-uppercase"
-                        :options="[{ name: 'VOID' }, ...workspace.dataTypes]"
+                        :options="[{ name: 'VOID' }, ...(workspace.dataTypes as any)]"
                         group-label="group"
                         group-values="types"
                         option-label="name"
@@ -110,7 +110,7 @@
                         class="form-input"
                         type="number"
                         min="0"
-                        :placeholder="$t('word.length')"
+                        :placeholder="t('word.length')"
                      >
                   </div>
                </div>
@@ -118,7 +118,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="localFunction.comment"
@@ -130,7 +130,7 @@
             <div class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.sqlSecurity') }}
+                     {{ t('message.sqlSecurity') }}
                   </label>
                   <BaseSelect
                      v-model="localFunction.security"
@@ -142,7 +142,7 @@
             <div v-if="customizations.functionDataAccess" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('message.dataAccess') }}
+                     {{ t('message.dataAccess') }}
                   </label>
                   <BaseSelect
                      v-model="localFunction.dataAccess"
@@ -155,7 +155,7 @@
                <div class="form-group">
                   <label class="form-label d-invisible">.</label>
                   <label class="form-checkbox form-inline">
-                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
+                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ t('word.deterministic') }}
                   </label>
                </div>
             </div>
@@ -163,7 +163,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.functionBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.functionBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -191,300 +191,273 @@
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { Ace } from 'ace-builds';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
-import BaseLoader from '@/components/BaseLoader';
-import QueryEditor from '@/components/QueryEditor';
-import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
-import ModalAskParameters from '@/components/ModalAskParameters';
+import BaseLoader from '@/components/BaseLoader.vue';
+import QueryEditor from '@/components/QueryEditor.vue';
+import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal.vue';
+import ModalAskParameters from '@/components/ModalAskParameters.vue';
 import Functions from '@/ipc-api/Functions';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { useI18n } from 'vue-i18n';
+import { AlterFunctionParams, FunctionInfos, FunctionParam } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsFunction',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      WorkspaceTabPropsFunctionParamsModal,
-      ModalAskParameters,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      function: 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,
+   function: 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,
-         originalFunction: null,
-         localFunction: { sql: '' },
-         lastFunction: null,
-         sqlProxy: '',
-         editorHeight: 300
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      },
-      isChanged () {
-         return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
-      },
-      isDefinerInUsers () {
-         return this.originalFunction
-            ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
-            : true;
-      },
-      isTableNameValid () {
-         return this.localFunction.name !== '';
-      },
-      isInDataTypes () {
-         let typeNames = [];
-         for (const group of this.workspace.dataTypes) {
-            typeNames = group.types.reduce((acc, curr) => {
-               acc.push(curr.name);
-               return acc;
-            }, []);
-         }
-         return typeNames.includes(this.localFunction.returns);
-      },
-      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 originalFunction: Ref<FunctionInfos> = ref(null);
+const localFunction: Ref<FunctionInfos> = ref({ name: '', sql: '', definer: null });
+const lastFunction = 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(originalFunction.value) !== JSON.stringify(localFunction.value);
+});
+
+const isTableNameValid = computed(() => {
+   return localFunction.value.name !== '';
+});
+
+const getFunctionData = async () => {
+   if (!props.function) return;
+
+   isLoading.value = true;
+   localFunction.value = { name: '', sql: '', definer: null };
+   lastFunction.value = props.function;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      func: props.function
+   };
+
+   try {
+      const { status, response } = await Functions.getFunctionInformations(params);
+      if (status === 'success') {
+         originalFunction.value = response;
+
+         originalFunction.value.parameters = [...originalFunction.value.parameters.map(param => {
+            param._antares_id = uidGen();
+            return param;
+         })];
+
+         localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
+         sqlProxy.value = localFunction.value.sql;
       }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getFunctionData();
-            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
-            this.lastFunction = this.function;
+      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,
+      func: {
+         ...localFunction.value,
+         schema: props.schema,
+         oldName: originalFunction.value.name
+      } as AlterFunctionParams
+   };
+
+   try {
+      const { status, response } = await Functions.alterFunction(params);
+
+      if (status === 'success') {
+         const oldName = originalFunction.value.name;
+
+         await refreshStructure(props.connection.uid);
+
+         if (oldName !== localFunction.value.name) {
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: oldName,
+               elementNewName: localFunction.value.name,
+               elementType: 'function'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, function: localFunction.value.name });
          }
-      },
-      async function () {
-         if (this.isSelected) {
-            await this.getFunctionData();
-            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
-            this.lastFunction = this.function;
-         }
-      },
-      async isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, function: this.function });
-
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
-
-            if (this.lastFunction !== this.function)
-               this.getRoutineData();
-         }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-      }
-   },
-   async created () {
-      await this.getFunctionData();
-      this.$refs.queryEditor.editor.session.setValue(this.localFunction.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 getFunctionData () {
-         if (!this.function) return;
-
-         this.isLoading = true;
-         this.localFunction = { sql: '' };
-         this.lastFunction = this.function;
-
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            func: this.function
-         };
-
-         try {
-            const { status, response } = await Functions.getFunctionInformations(params);
-            if (status === 'success') {
-               this.originalFunction = response;
-
-               this.originalFunction.parameters = [...this.originalFunction.parameters.map(param => {
-                  param._antares_id = uidGen();
-                  return param;
-               })];
-
-               this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
-               this.sqlProxy = this.localFunction.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,
-            func: {
-               ...this.localFunction,
-               schema: this.schema,
-               oldName: this.originalFunction.name
-            }
-         };
-
-         try {
-            const { status, response } = await Functions.alterFunction(params);
-
-            if (status === 'success') {
-               const oldName = this.originalFunction.name;
-
-               await this.refreshStructure(this.connection.uid);
-
-               if (oldName !== this.localFunction.name) {
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: oldName,
-                     elementNewName: this.localFunction.name,
-                     elementType: 'function'
-                  });
-
-                  this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
-               }
-               else
-                  this.getFunctionData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
-         this.$refs.queryEditor.editor.session.setValue(this.localFunction.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.localFunction = options;
-      },
-      parametersUpdate (parameters) {
-         this.localFunction = { ...this.localFunction, parameters };
-      },
-      runFunctionCheck () {
-         if (this.localFunction.parameters.length)
-            this.showAskParamsModal();
          else
-            this.runFunction();
-      },
-      runFunction (params) {
-         if (!params) params = [];
+            getFunctionData();
+      }
+      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':
-               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
-               break;
-            case 'pg':
-               sql = `SELECT ${this.originalFunction.name}(${params.join(',')})`;
-               break;
-            case 'mssql':
-               sql = `SELECT ${this.originalFunction.name} ${params.join(',')}`;
-               break;
-            default:
-               sql = `SELECT \`${this.originalFunction.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 = () => {
+   localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
+   queryEditor.value.editor.session.setValue(localFunction.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[]) => {
+   localFunction.value = { ...localFunction.value, parameters };
+};
+
+const runFunctionCheck = () => {
+   if (localFunction.value.parameters.length)
+      showAskParamsModal();
+   else
+      runFunction();
+};
+
+const runFunction = (params?: string[]) => {
+   if (!params) params = [];
+
+   let sql;
+   switch (props.connection.client) { // TODO: move in a better place
+      case 'maria':
+      case 'mysql':
+         sql = `SELECT \`${originalFunction.value.name}\` (${params.join(',')})`;
+         break;
+      case 'pg':
+         sql = `SELECT ${originalFunction.value.name}(${params.join(',')})`;
+         break;
+      case 'mssql':
+         sql = `SELECT ${originalFunction.value.name} ${params.join(',')}`;
+         break;
+      default:
+         sql = `SELECT \`${originalFunction.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.keyCode === 83) { // CTRL + S
+         if (isChanged.value)
+            saveChanges();
       }
    }
 };
+
+watch(() => props.schema, async () => {
+   if (props.isSelected) {
+      await getFunctionData();
+      queryEditor.value.editor.session.setValue(localFunction.value.sql);
+      lastFunction.value = props.function;
+   }
+});
+
+watch(() => props.function, async () => {
+   if (props.isSelected) {
+      await getFunctionData();
+      queryEditor.value.editor.session.setValue(localFunction.value.sql);
+      lastFunction.value = props.function;
+   }
+});
+
+watch(() => props.isSelected, async (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: props.schema, function: props.function });
+
+      setTimeout(() => {
+         resizeQueryEditor();
+      }, 200);
+
+      if (lastFunction.value !== props.function)
+         getFunctionData();
+   }
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getFunctionData();
+   queryEditor.value.editor.session.setValue(localFunction.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
 </script>

src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.confirm')"
+      :confirm-text="t('word.confirm')"
       size="medium"
       class="options-modal"
       @confirm="confirmParametersChange"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
-            <span class="cut-text">{{ $t('word.parameters') }} "{{ func }}"</span>
+            <span class="cut-text">{{ t('word.parameters') }} "{{ func }}"</span>
          </div>
       </template>
       <template #body>
@@ -20,16 +20,16 @@
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addParameter">
                            <i class="mdi mdi-24px mdi-plus mr-1" />
-                           <span>{{ $t('word.add') }}</span>
+                           <span>{{ t('word.add') }}</span>
                         </button>
                         <button
                            class="btn btn-dark btn-sm d-flex ml-2 mr-0"
-                           :title="$t('message.clearChanges')"
+                           :title="t('message.clearChanges')"
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
                            <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                           <span>{{ $t('word.clear') }}</span>
+                           <span>{{ t('word.clear') }}</span>
                         </button>
                      </div>
                   </div>
@@ -55,7 +55,7 @@
                         <div class="tile-action">
                            <button
                               class="btn btn-link remove-field p-0 mr-2"
-                              :title="$t('word.delete')"
+                              :title="t('word.delete')"
                               @click.prevent="removeParameter(param._antares_id)"
                            >
                               <i class="mdi mdi-close" />
@@ -74,7 +74,7 @@
                >
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.name') }}
+                        {{ t('word.name') }}
                      </label>
                      <div class="column">
                         <input
@@ -86,7 +86,7 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.type') }}
+                        {{ t('word.type') }}
                      </label>
                      <div class="column">
                         <BaseSelect
@@ -102,7 +102,7 @@
                   </div>
                   <div v-if="customizations.parametersLength" class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.length') }}
+                        {{ t('word.length') }}
                      </label>
                      <div class="column">
                         <input
@@ -115,7 +115,7 @@
                   </div>
                   <div v-if="customizations.functionContext" class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.context') }}
+                        {{ t('word.context') }}
                      </label>
                      <div class="column">
                         <label class="form-radio">
@@ -150,11 +150,11 @@
                      <i class="mdi mdi-dots-horizontal mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ $t('message.thereAreNoParameters') }}
+                     {{ t('message.thereAreNoParameters') }}
                   </p>
                   <div class="empty-action">
                      <button class="btn btn-primary" @click="addParameter">
-                        {{ $t('message.createNewParameter') }}
+                        {{ t('message.createNewParameter') }}
                      </button>
                   </div>
                </div>
@@ -164,113 +164,118 @@
    </ConfirmModal>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { uidGen } from 'common/libs/uidGen';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabPropsFunctionParamsModal',
-   components: {
-      ConfirmModal,
-      BaseSelect
-   },
-   props: {
-      localParameters: {
-         type: Array,
-         default: () => []
-      },
-      func: String,
-      workspace: Object
-   },
-   emits: ['hide', 'parameters-update'],
-   data () {
-      return {
-         parametersProxy: [],
-         isOptionsChanging: false,
-         selectedParam: '',
-         modalInnerHeight: 400,
-         i: 1
-      };
-   },
-   computed: {
-      selectedParamObj () {
-         return this.parametersProxy.find(param => param._antares_id === this.selectedParam);
-      },
-      isChanged () {
-         return JSON.stringify(this.localParameters) !== JSON.stringify(this.parametersProxy);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   mounted () {
-      this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
-      this.i = this.parametersProxy.length + 1;
+const { t } = useI18n();
 
-      if (this.parametersProxy.length)
-         this.resetSelectedID();
-
-      this.getModalInnerHeight();
-      window.addEventListener('resize', this.getModalInnerHeight);
+const props = defineProps({
+   localParameters: {
+      type: Array,
+      default: () => []
    },
-   unmounted () {
-      window.removeEventListener('resize', this.getModalInnerHeight);
-   },
-   methods: {
-      typeClass (type) {
-         if (type)
-            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-         return '';
-      },
-      confirmParametersChange () {
-         this.$emit('parameters-update', this.parametersProxy);
-      },
-      selectParameter (event, uid) {
-         if (this.selectedParam !== uid && !event.target.classList.contains('remove-field'))
-            this.selectedParam = uid;
-      },
-      getModalInnerHeight () {
-         const modalBody = document.querySelector('.modal-body');
-         if (modalBody)
-            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
-      },
-      addParameter () {
-         const newUid = uidGen();
-         this.parametersProxy = [...this.parametersProxy, {
-            _antares_id: newUid,
-            name: `param${this.i++}`,
-            type: this.workspace.dataTypes[0].types[0].name,
-            context: 'IN',
-            length: ''
-         }];
+   func: String,
+   workspace: Object
+});
 
-         if (this.parametersProxy.length === 1)
-            this.resetSelectedID();
+const emit = defineEmits(['hide', 'parameters-update']);
 
-         setTimeout(() => {
-            this.$refs.parametersPanel.scrollTop = this.$refs.parametersPanel.scrollHeight + 60;
-            this.selectedParam = newUid;
-         }, 20);
-      },
-      removeParameter (uid) {
-         this.parametersProxy = this.parametersProxy.filter(param => param._antares_id !== uid);
+const parametersPanel: Ref<HTMLDivElement> = ref(null);
+const parametersProxy = ref([]);
+const selectedParam = ref('');
+const modalInnerHeight = ref(400);
+const i = ref(1);
 
-         if (this.parametersProxy.length && this.selectedParam === uid)
-            this.resetSelectedID();
-      },
-      clearChanges () {
-         this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
-         this.i = this.parametersProxy.length + 1;
+const selectedParamObj = computed(() => {
+   return parametersProxy.value.find(param => param._antares_id === selectedParam.value);
+});
 
-         if (!this.parametersProxy.some(param => param.name === this.selectedParam))
-            this.resetSelectedID();
-      },
-      resetSelectedID () {
-         this.selectedParam = this.parametersProxy.length ? this.parametersProxy[0]._antares_id : '';
-      }
-   }
+const isChanged = computed(() => {
+   return JSON.stringify(props.localParameters) !== JSON.stringify(parametersProxy.value);
+});
+
+const customizations = computed(() => {
+   return props.workspace.customizations;
+});
+
+const typeClass = (type: string) => {
+   if (type)
+      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+   return '';
 };
+
+const confirmParametersChange = () => {
+   emit('parameters-update', parametersProxy.value);
+};
+
+const selectParameter = (event: MouseEvent, uid: string) => {
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   if (selectedParam.value !== uid && !(event.target as any).classList.contains('remove-field'))
+      selectedParam.value = uid;
+};
+
+const getModalInnerHeight = () => {
+   const modalBody = document.querySelector('.modal-body');
+   if (modalBody)
+      modalInnerHeight.value = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+};
+
+const addParameter = () => {
+   const newUid = uidGen();
+   parametersProxy.value = [...parametersProxy.value, {
+      _antares_id: newUid,
+      name: `param${i.value++}`,
+      type: props.workspace.dataTypes[0].types[0].name,
+      context: 'IN',
+      length: ''
+   }];
+
+   if (parametersProxy.value.length === 1)
+      resetSelectedID();
+
+   setTimeout(() => {
+      parametersPanel.value.scrollTop = parametersPanel.value.scrollHeight + 60;
+      selectedParam.value = newUid;
+   }, 20);
+};
+
+const removeParameter = (uid: string) => {
+   parametersProxy.value = parametersProxy.value.filter(param => param._antares_id !== uid);
+
+   if (parametersProxy.value.length && selectedParam.value === uid)
+      resetSelectedID();
+};
+
+const clearChanges = () => {
+   parametersProxy.value = JSON.parse(JSON.stringify(props.localParameters));
+   i.value = parametersProxy.value.length + 1;
+
+   if (!parametersProxy.value.some(param => param.name === selectedParam.value))
+      resetSelectedID();
+};
+
+const resetSelectedID = () => {
+   selectedParam.value = parametersProxy.value.length ? parametersProxy.value[0]._antares_id : '';
+};
+
+onMounted(() => {
+   parametersProxy.value = JSON.parse(JSON.stringify(props.localParameters));
+   i.value = parametersProxy.value.length + 1;
+
+   if (parametersProxy.value.length)
+      resetSelectedID();
+
+   getModalInnerHeight();
+   window.addEventListener('resize', getModalInnerHeight);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', getModalInnerHeight);
+});
 </script>
 
 <style lang="scss" scoped>

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>

src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.confirm')"
+      :confirm-text="t('word.confirm')"
       size="medium"
       class="options-modal"
       @confirm="confirmParametersChange"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
-            <span class="cut-text">{{ $t('word.parameters') }} "{{ routine }}"</span>
+            <span class="cut-text">{{ t('word.parameters') }} "{{ routine }}"</span>
          </div>
       </template>
       <template #body>
@@ -20,16 +20,16 @@
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addParameter">
                            <i class="mdi mdi-24px mdi-plus mr-1" />
-                           <span>{{ $t('word.add') }}</span>
+                           <span>{{ t('word.add') }}</span>
                         </button>
                         <button
                            class="btn btn-dark btn-sm d-flex ml-2 mr-0"
-                           :title="$t('message.clearChanges')"
+                           :title="t('message.clearChanges')"
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
                            <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                           <span>{{ $t('word.clear') }}</span>
+                           <span>{{ t('word.clear') }}</span>
                         </button>
                      </div>
                   </div>
@@ -55,7 +55,7 @@
                         <div class="tile-action">
                            <button
                               class="btn btn-link remove-field p-0 mr-2"
-                              :title="$t('word.delete')"
+                              :title="t('word.delete')"
                               @click.prevent="removeParameter(param._antares_id)"
                            >
                               <i class="mdi mdi-close" />
@@ -74,7 +74,7 @@
                >
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.name') }}
+                        {{ t('word.name') }}
                      </label>
                      <div class="column">
                         <input
@@ -86,7 +86,7 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.type') }}
+                        {{ t('word.type') }}
                      </label>
                      <div class="column">
                         <BaseSelect
@@ -102,7 +102,7 @@
                   </div>
                   <div v-if="customizations.parametersLength" class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.length') }}
+                        {{ t('word.length') }}
                      </label>
                      <div class="column">
                         <input
@@ -115,7 +115,7 @@
                   </div>
                   <div v-if="customizations.procedureContext" class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.context') }}
+                        {{ t('word.context') }}
                      </label>
                      <div class="column">
                         <label class="form-radio">
@@ -150,11 +150,11 @@
                      <i class="mdi mdi-dots-horizontal mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ $t('message.thereAreNoParameters') }}
+                     {{ t('message.thereAreNoParameters') }}
                   </p>
                   <div class="empty-action">
                      <button class="btn btn-primary" @click="addParameter">
-                        {{ $t('message.createNewParameter') }}
+                        {{ t('message.createNewParameter') }}
                      </button>
                   </div>
                </div>
@@ -164,113 +164,118 @@
    </ConfirmModal>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { uidGen } from 'common/libs/uidGen';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabPropsRoutineParamsModal',
-   components: {
-      ConfirmModal,
-      BaseSelect
-   },
-   props: {
-      localParameters: {
-         type: Array,
-         default: () => []
-      },
-      routine: String,
-      workspace: Object
-   },
-   emits: ['parameters-update', 'hide'],
-   data () {
-      return {
-         parametersProxy: [],
-         isOptionsChanging: false,
-         selectedParam: '',
-         modalInnerHeight: 400,
-         i: 1
-      };
-   },
-   computed: {
-      selectedParamObj () {
-         return this.parametersProxy.find(param => param._antares_id === this.selectedParam);
-      },
-      isChanged () {
-         return JSON.stringify(this.localParameters) !== JSON.stringify(this.parametersProxy);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   mounted () {
-      this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
-      this.i = this.parametersProxy.length + 1;
+const { t } = useI18n();
 
-      if (this.parametersProxy.length)
-         this.resetSelectedID();
-
-      this.getModalInnerHeight();
-      window.addEventListener('resize', this.getModalInnerHeight);
+const props = defineProps({
+   localParameters: {
+      type: Array,
+      default: () => []
    },
-   unmounted () {
-      window.removeEventListener('resize', this.getModalInnerHeight);
-   },
-   methods: {
-      typeClass (type) {
-         if (type)
-            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-         return '';
-      },
-      confirmParametersChange () {
-         this.$emit('parameters-update', this.parametersProxy);
-      },
-      selectParameter (event, uid) {
-         if (this.selectedParam !== uid && !event.target.classList.contains('remove-field'))
-            this.selectedParam = uid;
-      },
-      getModalInnerHeight () {
-         const modalBody = document.querySelector('.modal-body');
-         if (modalBody)
-            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
-      },
-      addParameter () {
-         const newUid = uidGen();
-         this.parametersProxy = [...this.parametersProxy, {
-            _antares_id: newUid,
-            name: `param${this.i++}`,
-            type: this.workspace.dataTypes[0].types[0].name,
-            context: 'IN',
-            length: ''
-         }];
+   routine: String,
+   workspace: Object
+});
 
-         if (this.parametersProxy.length === 1)
-            this.resetSelectedID();
+const emit = defineEmits(['hide', 'parameters-update']);
 
-         setTimeout(() => {
-            this.$refs.parametersPanel.scrollTop = this.$refs.parametersPanel.scrollHeight + 60;
-            this.selectedParam = newUid;
-         }, 20);
-      },
-      removeParameter (uid) {
-         this.parametersProxy = this.parametersProxy.filter(param => param._antares_id !== uid);
+const parametersPanel: Ref<HTMLDivElement> = ref(null);
+const parametersProxy = ref([]);
+const selectedParam = ref('');
+const modalInnerHeight = ref(400);
+const i = ref(1);
 
-         if (this.parametersProxy.length && this.selectedParam === uid)
-            this.resetSelectedID();
-      },
-      clearChanges () {
-         this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
-         this.i = this.parametersProxy.length + 1;
+const selectedParamObj = computed(() => {
+   return parametersProxy.value.find(param => param._antares_id === selectedParam.value);
+});
 
-         if (!this.parametersProxy.some(param => param.name === this.selectedParam))
-            this.resetSelectedID();
-      },
-      resetSelectedID () {
-         this.selectedParam = this.parametersProxy.length ? this.parametersProxy[0]._antares_id : '';
-      }
-   }
+const isChanged = computed(() => {
+   return JSON.stringify(props.localParameters) !== JSON.stringify(parametersProxy.value);
+});
+
+const customizations = computed(() => {
+   return props.workspace.customizations;
+});
+
+const typeClass = (type: string) => {
+   if (type)
+      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+   return '';
 };
+
+const confirmParametersChange = () => {
+   emit('parameters-update', parametersProxy.value);
+};
+
+const selectParameter = (event: MouseEvent, uid: string) => {
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   if (selectedParam.value !== uid && !(event.target as any).classList.contains('remove-field'))
+      selectedParam.value = uid;
+};
+
+const getModalInnerHeight = () => {
+   const modalBody = document.querySelector('.modal-body');
+   if (modalBody)
+      modalInnerHeight.value = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+};
+
+const addParameter = () => {
+   const newUid = uidGen();
+   parametersProxy.value = [...parametersProxy.value, {
+      _antares_id: newUid,
+      name: `param${i.value++}`,
+      type: props.workspace.dataTypes[0].types[0].name,
+      context: 'IN',
+      length: ''
+   }];
+
+   if (parametersProxy.value.length === 1)
+      resetSelectedID();
+
+   setTimeout(() => {
+      parametersPanel.value.scrollTop = parametersPanel.value.scrollHeight + 60;
+      selectedParam.value = newUid;
+   }, 20);
+};
+
+const removeParameter = (uid: string) => {
+   parametersProxy.value = parametersProxy.value.filter(param => param._antares_id !== uid);
+
+   if (parametersProxy.value.length && selectedParam.value === uid)
+      resetSelectedID();
+};
+
+const clearChanges = () => {
+   parametersProxy.value = JSON.parse(JSON.stringify(props.localParameters));
+   i.value = parametersProxy.value.length + 1;
+
+   if (!parametersProxy.value.some(param => param.name === selectedParam.value))
+      resetSelectedID();
+};
+
+const resetSelectedID = () => {
+   selectedParam.value = parametersProxy.value.length ? parametersProxy.value[0]._antares_id : '';
+};
+
+onMounted(() => {
+   parametersProxy.value = JSON.parse(JSON.stringify(props.localParameters));
+   i.value = parametersProxy.value.length + 1;
+
+   if (parametersProxy.value.length)
+      resetSelectedID();
+
+   getModalInnerHeight();
+   window.addEventListener('resize', getModalInnerHeight);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', getModalInnerHeight);
+});
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/WorkspaceTabPropsScheduler.vue

@@ -11,26 +11,26 @@
                   @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" />
                <button class="btn btn-dark btn-sm" @click="showTimingModal">
                   <i class="mdi mdi-24px mdi-timer mr-1" />
-                  <span>{{ $t('word.timing') }}</span>
+                  <span>{{ t('word.timing') }}</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>
@@ -40,7 +40,7 @@
          <div class="columns">
             <div class="column col-auto">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <label class="form-label">{{ t('word.name') }}</label>
                   <input
                      v-model="localScheduler.name"
                      class="form-input"
@@ -50,19 +50,19 @@
             </div>
             <div class="column col-auto">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <label class="form-label">{{ t('word.definer') }}</label>
                   <BaseSelect
                      v-model="localScheduler.definer"
                      :options="users"
-                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
-                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
+                     :option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
                   />
                </div>
             </div>
             <div class="column">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.comment') }}</label>
+                  <label class="form-label">{{ t('word.comment') }}</label>
                   <input
                      v-model="localScheduler.comment"
                      class="form-input"
@@ -72,7 +72,7 @@
             </div>
             <div class="column">
                <div class="form-group">
-                  <label class="form-label mr-2">{{ $t('word.state') }}</label>
+                  <label class="form-label mr-2">{{ t('word.state') }}</label>
                   <label class="form-radio form-inline">
                      <input
                         v-model="localScheduler.state"
@@ -103,7 +103,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.schedulerBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.schedulerBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -122,245 +122,231 @@
       />
    </div>
 </template>
-
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { AlterEventParams, EventInfos } from 'common/interfaces/antares';
+import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { Ace } from 'ace-builds';
+import { useI18n } from 'vue-i18n';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import BaseLoader from '@/components/BaseLoader';
-import QueryEditor from '@/components/QueryEditor';
-import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
-import Schedulers from '@/ipc-api/Schedulers';
+import BaseLoader from '@/components/BaseLoader.vue';
+import QueryEditor from '@/components/QueryEditor.vue';
+import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import Schedulers from '@/ipc-api/Schedulers';
 
-export default {
-   name: 'WorkspaceTabPropsScheduler',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      WorkspaceTabPropsSchedulerTimingModal,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      scheduler: 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,
+   scheduler: 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,
-         isTimingModal: false,
-         originalScheduler: null,
-         localScheduler: { sql: '' },
-         lastScheduler: null,
-         sqlProxy: '',
-         editorHeight: 300
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      isChanged () {
-         return JSON.stringify(this.originalScheduler) !== JSON.stringify(this.localScheduler);
-      },
-      isDefinerInUsers () {
-         return this.originalScheduler ? this.workspace.users.some(user => this.originalScheduler.definer === `\`${user.name}\`@\`${user.host}\``) : true;
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
+const {
+   getWorkspace,
+   refreshStructure,
+   renameTabs,
+   changeBreadcrumbs,
+   setUnsavedChanges
+} = workspacesStore;
 
-         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
-      },
-      users () {
-         const users = [{ value: '' }, ...this.workspace.users];
-         if (!this.isDefinerInUsers) {
-            const [name, host] = this.originalScheduler.definer.replaceAll('`', '').split('@');
-            users.unshift({ name, host });
-         }
+const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const isTimingModal = ref(false);
+const originalScheduler: Ref<EventInfos> = ref(null);
+const localScheduler: Ref<EventInfos> = ref({} as EventInfos);
+const lastScheduler = ref(null);
+const sqlProxy = ref('');
+const editorHeight = ref(300);
 
-         return users;
+const workspace = computed(() => {
+   return getWorkspace(props.connection.uid);
+});
+
+const isChanged = computed(() => {
+   return JSON.stringify(originalScheduler.value) !== JSON.stringify(localScheduler.value);
+});
+
+const isDefinerInUsers = computed(() => {
+   return originalScheduler.value ? workspace.value.users.some(user => originalScheduler.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+});
+
+const users = computed(() => {
+   const users = [{ value: '' }, ...workspace.value.users];
+   if (!isDefinerInUsers.value) {
+      const [name, host] = originalScheduler.value.definer.replaceAll('`', '').split('@');
+      users.unshift({ name, host });
+   }
+
+   return users;
+});
+
+const getSchedulerData = async () => {
+   if (!props.scheduler) return;
+
+   isLoading.value = true;
+   lastScheduler.value = props.scheduler;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      scheduler: props.scheduler
+   };
+
+   try {
+      const { status, response } = await Schedulers.getSchedulerInformations(params);
+      if (status === 'success') {
+         originalScheduler.value = response;
+         localScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
+         sqlProxy.value = localScheduler.value.sql;
       }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getSchedulerData();
-            this.$refs.queryEditor.editor.session.setValue(this.localScheduler.sql);
-            this.lastScheduler = this.scheduler;
-         }
-      },
-      async scheduler () {
-         if (this.isSelected) {
-            await this.getSchedulerData();
-            this.$refs.queryEditor.editor.session.setValue(this.localScheduler.sql);
-            this.lastScheduler = this.scheduler;
-         }
-      },
-      async isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, scheduler: this.scheduler });
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
 
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
+   resizeQueryEditor();
+   isLoading.value = false;
+};
 
-            if (this.lastScheduler !== this.scheduler)
-               this.getSchedulerData();
+const saveChanges = async () => {
+   if (isSaving.value) return;
+   isSaving.value = true;
+   const params = {
+      uid: props.connection.uid,
+      scheduler: {
+         ...localScheduler.value,
+         schema: props.schema,
+         oldName: originalScheduler.value.name
+      } as AlterEventParams
+   };
+
+   try {
+      const { status, response } = await Schedulers.alterScheduler(params);
+
+      if (status === 'success') {
+         const oldName = originalScheduler.value.name;
+
+         await refreshStructure(props.connection.uid);
+
+         if (oldName !== localScheduler.value.name) {
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: oldName,
+               elementNewName: localScheduler.value.name,
+               elementType: 'scheduler'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, scheduler: localScheduler.value.name });
          }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+         else
+            getSchedulerData();
       }
-   },
-   async created () {
-      await this.getSchedulerData();
-      this.$refs.queryEditor.editor.session.setValue(this.localScheduler.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 getSchedulerData () {
-         if (!this.scheduler) return;
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
 
-         this.isLoading = true;
-         this.lastScheduler = this.scheduler;
+   isSaving.value = false;
+};
 
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            scheduler: this.scheduler
-         };
+const clearChanges = () => {
+   localScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
+   queryEditor.value.editor.session.setValue(localScheduler.value.sql);
+};
 
-         try {
-            const { status, response } = await Schedulers.getSchedulerInformations(params);
-            if (status === 'success') {
-               this.originalScheduler = response;
-               this.localScheduler = JSON.parse(JSON.stringify(this.originalScheduler));
-               this.sqlProxy = this.localScheduler.sql;
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+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();
+   }
+};
 
-         this.resizeQueryEditor();
-         this.isLoading = false;
-      },
-      async saveChanges () {
-         if (this.isSaving) return;
-         this.isSaving = true;
-         const params = {
-            uid: this.connection.uid,
-            scheduler: {
-               ...this.localScheduler,
-               schema: this.schema,
-               oldName: this.originalScheduler.name
-            }
-         };
+const showTimingModal = () => {
+   isTimingModal.value = true;
+};
 
-         try {
-            const { status, response } = await Schedulers.alterScheduler(params);
+const hideTimingModal = () => {
+   isTimingModal.value = false;
+};
 
-            if (status === 'success') {
-               const oldName = this.originalScheduler.name;
+const timingUpdate = (options: EventInfos) => {
+   localScheduler.value = options;
+};
 
-               await this.refreshStructure(this.connection.uid);
-
-               if (oldName !== this.localScheduler.name) {
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: oldName,
-                     elementNewName: this.localScheduler.name,
-                     elementType: 'scheduler'
-                  });
-
-                  this.changeBreadcrumbs({ schema: this.schema, scheduler: this.localScheduler.name });
-               }
-               else
-                  this.getSchedulerData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localScheduler = JSON.parse(JSON.stringify(this.originalScheduler));
-         this.$refs.queryEditor.editor.session.setValue(this.localScheduler.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();
-         }
-      },
-      showTimingModal () {
-         this.isTimingModal = true;
-      },
-      hideTimingModal () {
-         this.isTimingModal = false;
-      },
-      timingUpdate (options) {
-         this.localScheduler = options;
-      },
-      onKey (e) {
-         if (this.isSelected) {
-            e.stopPropagation();
-            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
-               if (this.isChanged)
-                  this.saveChanges();
-            }
-         }
+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 getSchedulerData();
+      queryEditor.value.editor.session.setValue(localScheduler.value.sql);
+      lastScheduler.value = props.scheduler;
+   }
+});
+
+watch(() => props.scheduler, async () => {
+   if (props.isSelected) {
+      await getSchedulerData();
+      queryEditor.value.editor.session.setValue(localScheduler.value.sql);
+      lastScheduler.value = props.scheduler;
+   }
+});
+
+watch(() => props.isSelected, async (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: props.schema, scheduler: props.scheduler });
+
+      setTimeout(() => {
+         resizeQueryEditor();
+      }, 200);
+
+      if (lastScheduler.value !== props.scheduler)
+         getSchedulerData();
+   }
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getSchedulerData();
+   queryEditor.value.editor.session.setValue(localScheduler.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
+
 </script>

src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.confirm')"
+      :confirm-text="t('word.confirm')"
       size="400"
       @confirm="confirmOptionsChange"
       @hide="$emit('hide')"
@@ -8,14 +8,14 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-timer mr-1" />
-            <span class="cut-text">{{ $t('word.timing') }} "{{ localOptions.name }}"</span>
+            <span class="cut-text">{{ t('word.timing') }} "{{ localOptions.name }}"</span>
          </div>
       </template>
       <template #body>
          <form class="form-horizontal">
             <div class="form-group">
                <label class="form-label col-4">
-                  {{ $t('word.execution') }}
+                  {{ t('word.execution') }}
                </label>
                <div class="column">
                   <BaseSelect
@@ -61,7 +61,7 @@
                </div>
                <div class="form-group">
                   <label class="form-label col-4">
-                     {{ $t('word.starts') }}
+                     {{ t('word.starts') }}
                   </label>
                   <div class="column">
                      <div class="input-group">
@@ -82,7 +82,7 @@
                </div>
                <div class="form-group">
                   <label class="form-label col-4">
-                     {{ $t('word.ends') }}
+                     {{ t('word.ends') }}
                   </label>
                   <div class="column">
                      <div class="input-group">
@@ -124,7 +124,7 @@
                <div class="col-4" />
                <div class="column">
                   <label class="form-checkbox form-inline mt-2">
-                     <input v-model="optionsProxy.preserve" type="checkbox"><i class="form-icon" /> {{ $t('message.preserveOnCompletion') }}
+                     <input v-model="optionsProxy.preserve" type="checkbox"><i class="form-icon" /> {{ t('message.preserveOnCompletion') }}
                   </label>
                </div>
             </div>
@@ -133,52 +133,47 @@
    </ConfirmModal>
 </template>
 
-<script>
-import moment from 'moment';
-import ConfirmModal from '@/components/BaseConfirmModal';
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+import * as moment from 'moment';
+import { useI18n } from 'vue-i18n';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { EventInfos } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsSchedulerTimingModal',
-   components: {
-      ConfirmModal,
-      BaseSelect
-   },
-   props: {
-      localOptions: Object,
-      workspace: Object
-   },
-   emits: ['hide', 'options-update'],
-   data () {
-      return {
-         optionsProxy: {},
-         isOptionsChanging: false,
-         hasStart: false,
-         hasEnd: false
-      };
-   },
-   created () {
-      this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
+const { t } = useI18n();
 
-      this.hasStart = !!this.optionsProxy.starts;
-      this.hasEnd = !!this.optionsProxy.ends;
+const props = defineProps({
+   localOptions: Object,
+   workspace: Object
+});
 
-      if (!this.optionsProxy.at) this.optionsProxy.at = moment().format('YYYY-MM-DD HH:mm:ss');
-      if (!this.optionsProxy.starts) this.optionsProxy.starts = moment().format('YYYY-MM-DD HH:mm:ss');
-      if (!this.optionsProxy.ends) this.optionsProxy.ends = moment().format('YYYY-MM-DD HH:mm:ss');
-      if (!this.optionsProxy.every.length) this.optionsProxy.every = ['1', 'DAY'];
-   },
-   methods: {
-      confirmOptionsChange () {
-         if (!this.hasStart) this.optionsProxy.starts = '';
-         if (!this.hasEnd) this.optionsProxy.ends = '';
+const emit = defineEmits(['hide', 'options-update']);
 
-         this.$emit('options-update', this.optionsProxy);
-      },
-      isNumberOrMinus (event) {
-         if (!/\d/.test(event.key) && event.key !== '-')
-            return event.preventDefault();
-      }
-   }
+const optionsProxy: Ref<EventInfos> = ref({} as EventInfos);
+const hasStart = ref(false);
+const hasEnd = ref(false);
+
+const confirmOptionsChange = () => {
+   if (!hasStart.value) optionsProxy.value.starts = '';
+   if (!hasEnd.value) optionsProxy.value.ends = '';
+
+   emit('options-update', optionsProxy.value);
 };
+
+const isNumberOrMinus = (event: KeyboardEvent) => {
+   if (!/\d/.test(event.key) && event.key !== '-')
+      return event.preventDefault();
+};
+
+optionsProxy.value = JSON.parse(JSON.stringify(props.localOptions));
+
+hasStart.value = !!optionsProxy.value.starts;
+hasEnd.value = !!optionsProxy.value.ends;
+
+if (!optionsProxy.value.at) optionsProxy.value.at = moment().format('YYYY-MM-DD HH:mm:ss');
+if (!optionsProxy.value.starts) optionsProxy.value.starts = moment().format('YYYY-MM-DD HH:mm:ss');
+if (!optionsProxy.value.ends) optionsProxy.value.ends = moment().format('YYYY-MM-DD HH:mm:ss');
+if (!optionsProxy.value.every.length) optionsProxy.value.every = ['1', 'DAY'];
+
 </script>

src/renderer/components/WorkspaceTabPropsTableContext.vue

@@ -4,7 +4,7 @@
       @close-context="closeContext"
    >
       <div class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ $t('message.createNewIndex') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ t('message.createNewIndex') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
          <div class="context-submenu">
             <div
@@ -19,7 +19,7 @@
          </div>
       </div>
       <div v-if="indexes.length" class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-key-arrow-right text-light pr-1" /> {{ $t('message.addToIndex') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-key-arrow-right text-light pr-1" /> {{ t('message.addToIndex') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
          <div class="context-submenu">
             <div
@@ -34,54 +34,54 @@
          </div>
       </div>
       <div class="context-element" @click="duplicateField">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ $t('word.duplicate') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('word.duplicate') }}</span>
       </div>
       <div class="context-element" @click="deleteField">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('message.deleteField') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('message.deleteField') }}</span>
       </div>
    </BaseContextMenu>
 </template>
 
-<script>
-import BaseContextMenu from '@/components/BaseContextMenu';
+<script setup lang="ts">
+import { computed, Prop } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import { TableIndex } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabQueryTableContext',
-   components: {
-      BaseContextMenu
-   },
-   props: {
-      contextEvent: MouseEvent,
-      indexes: Array,
-      indexTypes: Array,
-      selectedField: Object
-   },
-   emits: ['close-context', 'duplicate-selected', 'delete-selected', 'add-new-index', 'add-to-index'],
-   computed: {
-      hasPrimary () {
-         return this.indexes.some(index => index.type === 'PRIMARY');
-      }
-   },
-   methods: {
-      closeContext () {
-         this.$emit('close-context');
-      },
-      duplicateField () {
-         this.$emit('duplicate-selected');
-         this.closeContext();
-      },
-      deleteField () {
-         this.$emit('delete-selected');
-         this.closeContext();
-      },
-      addNewIndex (index) {
-         this.$emit('add-new-index', { field: this.selectedField.name, index });
-         this.closeContext();
-      },
-      addToIndex (index) {
-         this.$emit('add-to-index', { field: this.selectedField.name, index });
-         this.closeContext();
-      }
-   }
+const { t } = useI18n();
+
+const props = defineProps({
+   contextEvent: MouseEvent,
+   indexes: Array as Prop<TableIndex[]>,
+   indexTypes: Array as Prop<string[]>,
+   selectedField: Object
+});
+
+const emit = defineEmits(['close-context', 'duplicate-selected', 'delete-selected', 'add-new-index', 'add-to-index']);
+
+const hasPrimary = computed(() => props.indexes.some(index => index.type === 'PRIMARY'));
+
+const closeContext = () => {
+   emit('close-context');
+};
+
+const duplicateField = () => {
+   emit('duplicate-selected');
+   closeContext();
+};
+
+const deleteField = () => {
+   emit('delete-selected');
+   closeContext();
+};
+
+const addNewIndex = (index: string) => {
+   emit('add-new-index', { field: props.selectedField.name, index });
+   closeContext();
+};
+
+const addToIndex = (index: string) => {
+   emit('add-to-index', { field: props.selectedField.name, index });
+   closeContext();
 };
 </script>

src/renderer/components/WorkspaceTabPropsTableFields.vue

@@ -13,89 +13,89 @@
          @delete-selected="removeField"
          @duplicate-selected="duplicateField"
          @close-context="isContext = false"
-         @add-new-index="$emit('add-new-index', $event)"
-         @add-to-index="$emit('add-to-index', $event)"
+         @add-new-index="emit('add-new-index', $event)"
+         @add-to-index="emit('add-to-index', $event)"
       />
       <div ref="propTable" class="table table-hover">
          <div class="thead">
             <div class="tr">
                <div class="th">
                   <div class="text-right">
-                     {{ $t('word.order') }}
+                     {{ t('word.order') }}
                   </div>
                </div>
                <div class="th">
                   <div class="table-column-title">
-                     {{ $tc('word.key', 2) }}
+                     {{ t('word.key', 2) }}
                   </div>
                </div>
                <div class="th">
                   <div class="column-resizable min-100">
                      <div class="table-column-title">
-                        {{ $t('word.name') }}
+                        {{ t('word.name') }}
                      </div>
                   </div>
                </div>
                <div class="th">
                   <div class="column-resizable min-100">
                      <div class="table-column-title">
-                        {{ $t('word.type') }}
+                        {{ t('word.type') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.tableArray" class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('word.array') }}
+                        {{ t('word.array') }}
                      </div>
                   </div>
                </div>
                <div class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('word.length') }}
+                        {{ t('word.length') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.unsigned" class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('word.unsigned') }}
+                        {{ t('word.unsigned') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.nullable" class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('message.allowNull') }}
+                        {{ t('message.allowNull') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.zerofill" class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('message.zeroFill') }}
+                        {{ t('message.zeroFill') }}
                      </div>
                   </div>
                </div>
                <div class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('word.default') }}
+                        {{ t('word.default') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.comment" class="th">
                   <div class="column-resizable">
                      <div class="table-column-title">
-                        {{ $t('word.comment') }}
+                        {{ t('word.comment') }}
                      </div>
                   </div>
                </div>
                <div v-if="customizations.collation" class="th">
                   <div class="column-resizable min-100">
                      <div class="table-column-title">
-                        {{ $t('word.collation') }}
+                        {{ t('word.collation') }}
                      </div>
                   </div>
                </div>
@@ -116,7 +116,7 @@
                   :data-types="dataTypes"
                   :customizations="customizations"
                   @contextmenu="contextMenu"
-                  @rename-field="$emit('rename-field', $event)"
+                  @rename-field="emit('rename-field', $event)"
                />
             </template>
          </Draggable>
@@ -124,135 +124,115 @@
    </div>
 </template>
 
-<script>// TODO: expose tableWrapper
-import { storeToRefs } from 'pinia';
-import { useNotificationsStore } from '@/stores/notifications';
+<script setup lang="ts">
+import { Component, computed, onMounted, onUnmounted, onUpdated, Prop, ref, Ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import Draggable from 'vuedraggable';
-import TableRow from '@/components/WorkspaceTabPropsTableRow';
-import TableContext from '@/components/WorkspaceTabPropsTableContext';
+import * as Draggable from 'vuedraggable';
+import TableRow from '@/components/WorkspaceTabPropsTableRow.vue';
+import TableContext from '@/components/WorkspaceTabPropsTableContext.vue';
+import { TableField, TableForeign, TableIndex } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsTableFields',
-   components: {
-      TableRow,
-      TableContext,
-      Draggable
-   },
-   props: {
-      fields: Array,
-      indexes: Array,
-      foreigns: Array,
-      indexTypes: Array,
-      tabUid: [String, Number],
-      connUid: String,
-      table: String,
-      schema: String,
-      mode: String
-   },
-   emits: ['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field'],
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const props = defineProps({
+   fields: Array as Prop<TableField[]>,
+   indexes: Array as Prop<TableIndex[]>,
+   foreigns: Array as Prop<TableForeign[]>,
+   indexTypes: Array as Prop<string[]>,
+   tabUid: [String, Number],
+   connUid: String,
+   table: String,
+   schema: String,
+   mode: String
+});
 
-      const { getWorkspace } = workspacesStore;
+const emit = defineEmits(['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field']);
 
-      return {
-         addNotification,
-         selectedWorkspace,
-         getWorkspace
-      };
-   },
-   data () {
-      return {
-         resultsSize: 1000,
-         isContext: false,
-         contextEvent: null,
-         selectedField: null,
-         scrollElement: null
-      };
-   },
-   computed: {
-      workspaceSchema () {
-         return this.getWorkspace(this.connUid).breadcrumbs.schema;
-      },
-      customizations () {
-         return this.getWorkspace(this.connUid).customizations;
-      },
-      dataTypes () {
-         return this.getWorkspace(this.connUid).dataTypes;
-      },
-      primaryField () {
-         return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
-      },
-      tabProperties () {
-         return this.getWorkspaceTab(this.tabUid);
-      },
-      fieldsLength () {
-         return this.fields.length;
-      }
-   },
-   watch: {
-      fieldsLength () {
-         this.refreshScroller();
-      }
-   },
-   updated () {
-      if (this.$refs.propTable)
-         this.refreshScroller();
+const workspacesStore = useWorkspacesStore();
 
-      if (this.$refs.tableWrapper)
-         this.scrollElement = this.$refs.tableWrapper;
-   },
-   mounted () {
-      window.addEventListener('resize', this.resizeResults);
-   },
-   unmounted () {
-      window.removeEventListener('resize', this.resizeResults);
-   },
-   methods: {
-      resizeResults () {
-         if (this.$refs.resultTable) {
-            const el = this.$refs.tableWrapper;
+const { getWorkspace } = workspacesStore;
 
-            if (el) {
-               const footer = document.getElementById('footer');
-               const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
-               this.resultsSize = size;
-            }
-         }
-      },
-      refreshScroller () {
-         this.resizeResults();
-      },
-      contextMenu (event, uid) {
-         this.selectedField = this.fields.find(field => field._antares_id === uid);
-         this.contextEvent = event;
-         this.isContext = true;
-      },
-      duplicateField () {
-         this.$emit('duplicate-field', this.selectedField._antares_id);
-      },
-      removeField () {
-         this.$emit('remove-field', this.selectedField._antares_id);
-      },
-      getIndexes (field) {
-         return this.indexes.reduce((acc, curr) => {
-            acc.push(...curr.fields.map(f => ({ name: f, type: curr.type })));
-            return acc;
-         }, []).filter(f => f.name === field);
-      },
-      getForeigns (field) {
-         return this.foreigns.reduce((acc, curr) => {
-            if (curr.field === field)
-               acc.push(`${curr.refTable}.${curr.refField}`);
-            return acc;
-         }, []);
+const tableWrapper: Ref<HTMLDivElement> = ref(null);
+const propTable: Ref<HTMLDivElement> = ref(null);
+const resultTable: Ref<Component> = ref(null);
+const resultsSize = ref(1000);
+const isContext = ref(false);
+const contextEvent = ref(null);
+const selectedField = ref(null);
+const scrollElement = ref(null);
+
+const customizations = computed(() => getWorkspace(props.connUid).customizations);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const dataTypes = computed(() => getWorkspace(props.connUid).dataTypes) as any;
+const fieldsLength = computed(() => props.fields.length);
+
+const resizeResults = () => {
+   if (resultTable.value) {
+      const el = tableWrapper.value;
+
+      if (el) {
+         const footer = document.getElementById('footer');
+         const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
+         resultsSize.value = size;
       }
    }
 };
+
+const refreshScroller = () => {
+   resizeResults();
+};
+
+const contextMenu = (event: MouseEvent, uid: string) => {
+   selectedField.value = props.fields.find(field => field._antares_id === uid);
+   contextEvent.value = event;
+   isContext.value = true;
+};
+
+const duplicateField = () => {
+   emit('duplicate-field', selectedField.value._antares_id);
+};
+
+const removeField = () => {
+   emit('remove-field', selectedField.value._antares_id);
+};
+
+const getIndexes = (field: string) => {
+   return props.indexes.reduce((acc, curr) => {
+      acc.push(...curr.fields.map(f => ({ name: f, type: curr.type })));
+      return acc;
+   }, []).filter(f => f.name === field);
+};
+
+const getForeigns = (field: string) => {
+   return props.foreigns.reduce((acc, curr) => {
+      if (curr.field === field)
+         acc.push(`${curr.refTable}.${curr.refField}`);
+      return acc;
+   }, []);
+};
+
+watch(fieldsLength, () => {
+   refreshScroller();
+});
+
+onUpdated(() => {
+   if (propTable.value)
+      refreshScroller();
+
+   if (tableWrapper.value)
+      scrollElement.value = tableWrapper.value;
+});
+
+onMounted(() => {
+   window.addEventListener('resize', resizeResults);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeResults);
+});
+
+defineExpose({ tableWrapper });
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/WorkspaceTabPropsTableForeignModal.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.confirm')"
+      :confirm-text="t('word.confirm')"
       size="medium"
       class="options-modal"
       @confirm="confirmForeignsChange"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-key-link mr-1" />
-            <span class="cut-text">{{ $t('word.foreignKeys') }} "{{ table }}"</span>
+            <span class="cut-text">{{ t('word.foreignKeys') }} "{{ table }}"</span>
          </div>
       </template>
       <template #body>
@@ -20,16 +20,16 @@
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addForeign">
                            <i class="mdi mdi-24px mdi-link-plus mr-1" />
-                           <span>{{ $t('word.add') }}</span>
+                           <span>{{ t('word.add') }}</span>
                         </button>
                         <button
                            class="btn btn-dark btn-sm d-flex ml-2 mr-0"
-                           :title="$t('message.clearChanges')"
+                           :title="t('message.clearChanges')"
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
                            <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                           <span>{{ $t('word.clear') }}</span>
+                           <span>{{ t('word.clear') }}</span>
                         </button>
                      </div>
                   </div>
@@ -67,7 +67,7 @@
                         <div class="tile-action">
                            <button
                               class="btn btn-link remove-field p-0 mr-2"
-                              :title="$t('word.delete')"
+                              :title="t('word.delete')"
                               @click.prevent="removeIndex(foreign._antares_id)"
                            >
                               <i class="mdi mdi-close" />
@@ -86,7 +86,7 @@
                >
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.name') }}
+                        {{ t('word.name') }}
                      </label>
                      <div class="column">
                         <input
@@ -98,7 +98,7 @@
                   </div>
                   <div class="form-group mb-4">
                      <label class="form-label col-3">
-                        {{ $tc('word.field', 1) }}
+                        {{ t('word.field', 1) }}
                      </label>
                      <div class="fields-list column pt-1">
                         <label
@@ -114,7 +114,7 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3 pt-0">
-                        {{ $t('message.referenceTable') }}
+                        {{ t('message.referenceTable') }}
                      </label>
                      <div class="column">
                         <BaseSelect
@@ -129,7 +129,7 @@
                   </div>
                   <div class="form-group mb-4">
                      <label class="form-label col-3">
-                        {{ $t('message.referenceField') }}
+                        {{ t('message.referenceField') }}
                      </label>
                      <div class="fields-list column pt-1">
                         <label
@@ -145,7 +145,7 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('message.onUpdate') }}
+                        {{ t('message.onUpdate') }}
                      </label>
                      <div class="column">
                         <BaseSelect
@@ -157,7 +157,7 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('message.onDelete') }}
+                        {{ t('message.onDelete') }}
                      </label>
                      <div class="column">
                         <BaseSelect
@@ -174,11 +174,11 @@
                      <i class="mdi mdi-key-link mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ $t('message.thereAreNoForeign') }}
+                     {{ t('message.thereAreNoForeign') }}
                   </p>
                   <div class="empty-action">
                      <button class="btn btn-primary" @click="addForeign">
-                        {{ $t('message.createNewForeign') }}
+                        {{ t('message.createNewForeign') }}
                      </button>
                   </div>
                </div>
@@ -188,176 +188,173 @@
    </ConfirmModal>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
 import { useNotificationsStore } from '@/stores/notifications';
+import { useI18n } from 'vue-i18n';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { TableField } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsTableForeignModal',
-   components: {
-      ConfirmModal,
-      BaseSelect
-   },
-   props: {
-      localKeyUsage: Array,
-      connection: Object,
-      table: String,
-      schema: String,
-      schemaTables: Array,
-      fields: Array,
-      workspace: Object
-   },
-   emits: ['foreigns-update', 'hide'],
-   setup () {
-      const { addNotification } = useNotificationsStore();
+const { t } = useI18n();
 
-      return { addNotification };
-   },
-   data () {
-      return {
-         foreignProxy: [],
-         isOptionsChanging: false,
-         selectedForeignID: '',
-         modalInnerHeight: 400,
-         refFields: {},
-         foreignActions: [
-            'RESTRICT',
-            'CASCADE',
-            'SET NULL',
-            'NO ACTION'
-         ]
-      };
-   },
-   computed: {
-      selectedForeignObj () {
-         return this.foreignProxy.find(foreign => foreign._antares_id === this.selectedForeignID);
-      },
-      isChanged () {
-         return JSON.stringify(this.localKeyUsage) !== JSON.stringify(this.foreignProxy);
-      },
-      hasPrimary () {
-         return this.foreignProxy.some(foreign => foreign.type === 'PRIMARY');
-      }
-   },
-   mounted () {
-      this.foreignProxy = JSON.parse(JSON.stringify(this.localKeyUsage));
+const props = defineProps({
+   localKeyUsage: Array,
+   connection: Object,
+   table: String,
+   schema: String,
+   schemaTables: Array,
+   fields: Array as Prop<TableField[]>,
+   workspace: Object
+});
 
-      if (this.foreignProxy.length)
-         this.resetSelectedID();
+const emit = defineEmits(['foreigns-update', 'hide']);
 
-      if (this.selectedForeignObj)
-         this.getRefFields();
+const { addNotification } = useNotificationsStore();
 
-      this.getModalInnerHeight();
-      window.addEventListener('resize', this.getModalInnerHeight);
-   },
-   unmounted () {
-      window.removeEventListener('resize', this.getModalInnerHeight);
-   },
-   methods: {
-      confirmForeignsChange () {
-         this.foreignProxy = this.foreignProxy.filter(foreign =>
-            foreign.field &&
-            foreign.refField &&
-            foreign.table &&
-            foreign.refTable
-         );
-         this.$emit('foreigns-update', this.foreignProxy);
-      },
-      selectForeign (event, id) {
-         if (this.selectedForeignID !== id && !event.target.classList.contains('remove-field')) {
-            this.selectedForeignID = id;
-            this.getRefFields();
-         }
-      },
-      getModalInnerHeight () {
-         const modalBody = document.querySelector('.modal-body');
-         if (modalBody)
-            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
-      },
-      addForeign () {
-         this.foreignProxy = [...this.foreignProxy, {
-            _antares_id: uidGen(),
-            constraintName: `FK_${uidGen()}`,
-            refSchema: this.schema,
-            table: this.table,
-            refTable: '',
-            field: '',
-            refField: '',
-            onUpdate: this.foreignActions[0],
-            onDelete: this.foreignActions[0]
-         }];
+const indexesPanel: Ref<HTMLDivElement> = ref(null);
+const foreignProxy = ref([]);
+const selectedForeignID = ref('');
+const modalInnerHeight = ref(400);
+const refFields = ref({} as {[key: string]: TableField[]});
+const foreignActions = [
+   'RESTRICT',
+   'CASCADE',
+   'SET NULL',
+   'NO ACTION'
+];
 
-         if (this.foreignProxy.length === 1)
-            this.resetSelectedID();
+const selectedForeignObj = computed(() => foreignProxy.value.find(foreign => foreign._antares_id === selectedForeignID.value));
+const isChanged = computed(() => JSON.stringify(props.localKeyUsage) !== JSON.stringify(foreignProxy.value));
 
-         setTimeout(() => {
-            this.$refs.indexesPanel.scrollTop = this.$refs.indexesPanel.scrollHeight + 60;
-         }, 20);
-      },
-      removeIndex (id) {
-         this.foreignProxy = this.foreignProxy.filter(foreign => foreign._antares_id !== id);
+const confirmForeignsChange = () => {
+   foreignProxy.value = foreignProxy.value.filter(foreign =>
+      foreign.field &&
+      foreign.refField &&
+      foreign.table &&
+      foreign.refTable
+   );
+   emit('foreigns-update', foreignProxy.value);
+};
 
-         if (this.selectedForeignID === id && this.foreignProxy.length)
-            this.resetSelectedID();
-      },
-      clearChanges () {
-         this.foreignProxy = JSON.parse(JSON.stringify(this.localKeyUsage));
-         if (!this.foreignProxy.some(foreign => foreign._antares_id === this.selectedForeignID))
-            this.resetSelectedID();
-      },
-      toggleField (field) {
-         this.foreignProxy = this.foreignProxy.map(foreign => {
-            if (foreign._antares_id === this.selectedForeignID)
-               foreign.field = field;
-
-            return foreign;
-         });
-      },
-      toggleRefField (field) {
-         this.foreignProxy = this.foreignProxy.map(foreign => {
-            if (foreign._antares_id === this.selectedForeignID)
-               foreign.refField = field;
-
-            return foreign;
-         });
-      },
-      resetSelectedID () {
-         this.selectedForeignID = this.foreignProxy.length ? this.foreignProxy[0]._antares_id : '';
-      },
-      async getRefFields () {
-         if (!this.selectedForeignObj.refTable) return;
-
-         const params = {
-            uid: this.connection.uid,
-            schema: this.selectedForeignObj.refSchema,
-            table: this.selectedForeignObj.refTable
-         };
-
-         try { // Field data
-            const { status, response } = await Tables.getTableColumns(params);
-            if (status === 'success') {
-               this.refFields = {
-                  ...this.refFields,
-                  [this.selectedForeignID]: response
-               };
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-      },
-      reloadRefFields () {
-         this.selectedForeignObj.refField = '';
-         this.getRefFields();
-      }
+const selectForeign = (event: MouseEvent, id: string) => {
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   if (selectedForeignID.value !== id && !(event.target as any).classList.contains('remove-field')) {
+      selectedForeignID.value = id;
+      getRefFields();
    }
 };
+
+const getModalInnerHeight = () => {
+   const modalBody = document.querySelector('.modal-body');
+   if (modalBody)
+      modalInnerHeight.value = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+};
+
+const addForeign = () => {
+   foreignProxy.value = [...foreignProxy.value, {
+      _antares_id: uidGen(),
+      constraintName: `FK_${uidGen()}`,
+      refSchema: props.schema,
+      table: props.table,
+      refTable: '',
+      field: '',
+      refField: '',
+      onUpdate: foreignActions[0],
+      onDelete: foreignActions[0]
+   }];
+
+   if (foreignProxy.value.length === 1)
+      resetSelectedID();
+
+   setTimeout(() => {
+      indexesPanel.value.scrollTop = indexesPanel.value.scrollHeight + 60;
+   }, 20);
+};
+
+const removeIndex = (id: string) => {
+   foreignProxy.value = foreignProxy.value.filter(foreign => foreign._antares_id !== id);
+
+   if (selectedForeignID.value === id && foreignProxy.value.length)
+      resetSelectedID();
+};
+
+const clearChanges = () => {
+   foreignProxy.value = JSON.parse(JSON.stringify(props.localKeyUsage));
+   if (!foreignProxy.value.some(foreign => foreign._antares_id === selectedForeignID.value))
+      resetSelectedID();
+};
+
+const toggleField = (field: string) => {
+   foreignProxy.value = foreignProxy.value.map(foreign => {
+      if (foreign._antares_id === selectedForeignID.value)
+         foreign.field = field;
+
+      return foreign;
+   });
+};
+
+const toggleRefField = (field: string) => {
+   foreignProxy.value = foreignProxy.value.map(foreign => {
+      if (foreign._antares_id === selectedForeignID.value)
+         foreign.refField = field;
+
+      return foreign;
+   });
+};
+
+const resetSelectedID = () => {
+   selectedForeignID.value = foreignProxy.value.length ? foreignProxy.value[0]._antares_id : '';
+};
+
+const getRefFields = async () => {
+   if (!selectedForeignObj.value.refTable) return;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: selectedForeignObj.value.refSchema,
+      table: selectedForeignObj.value.refTable
+   };
+
+   try { // Field data
+      const { status, response } = await Tables.getTableColumns(params);
+      if (status === 'success') {
+         refFields.value = {
+            ...refFields.value,
+            [selectedForeignID.value]: response
+         };
+      }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+};
+
+const reloadRefFields = () => {
+   selectedForeignObj.value.refField = '';
+   getRefFields();
+};
+
+onMounted(() => {
+   foreignProxy.value = JSON.parse(JSON.stringify(props.localKeyUsage));
+
+   if (foreignProxy.value.length)
+      resetSelectedID();
+
+   if (selectedForeignObj.value)
+      getRefFields();
+
+   getModalInnerHeight();
+   window.addEventListener('resize', getModalInnerHeight);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', getModalInnerHeight);
+});
 </script>
 
 <style lang="scss" scoped>
@@ -384,7 +381,7 @@ export default {
 }
 
 .fields-list {
-  max-height: 80px;
+  max-height: 90px;
   overflow: auto;
 }
 

src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      :confirm-text="$t('word.confirm')"
+      :confirm-text="t('word.confirm')"
       size="medium"
       class="options-modal"
       @confirm="confirmIndexesChange"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
-            <span class="cut-text">{{ $t('word.indexes') }} "{{ table }}"</span>
+            <span class="cut-text">{{ t('word.indexes') }} "{{ table }}"</span>
          </div>
       </template>
       <template #body>
@@ -20,16 +20,16 @@
                      <div class="d-flex">
                         <button class="btn btn-dark btn-sm d-flex" @click="addIndex">
                            <i class="mdi mdi-24px mdi-key-plus mr-1" />
-                           <span>{{ $t('word.add') }}</span>
+                           <span>{{ t('word.add') }}</span>
                         </button>
                         <button
                            class="btn btn-dark btn-sm d-flex ml-2 mr-0"
-                           :title="$t('message.clearChanges')"
+                           :title="t('message.clearChanges')"
                            :disabled="!isChanged"
                            @click.prevent="clearChanges"
                         >
                            <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
-                           <span>{{ $t('word.clear') }}</span>
+                           <span>{{ t('word.clear') }}</span>
                         </button>
                      </div>
                   </div>
@@ -50,12 +50,12 @@
                            <div class="tile-title">
                               {{ index.name }}
                            </div>
-                           <small class="tile-subtitle text-gray">{{ index.type }} · {{ index.fields.length }} {{ $tc('word.field', index.fields.length) }}</small>
+                           <small class="tile-subtitle text-gray">{{ index.type }} · {{ index.fields.length }} {{ t('word.field', index.fields.length) }}</small>
                         </div>
                         <div class="tile-action">
                            <button
                               class="btn btn-link remove-field p-0 mr-2"
-                              :title="$t('word.delete')"
+                              :title="t('word.delete')"
                               @click.prevent="removeIndex(index._antares_id)"
                            >
                               <i class="mdi mdi-close" />
@@ -74,7 +74,7 @@
                >
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.name') }}
+                        {{ t('word.name') }}
                      </label>
                      <div class="column">
                         <input
@@ -86,20 +86,20 @@
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $t('word.type') }}
+                        {{ t('word.type') }}
                      </label>
                      <div class="column">
                         <BaseSelect
                            v-model="selectedIndexObj.type"
                            :options="indexTypes"
-                           :option-disabled="(opt) => opt === 'PRIMARY'"
+                           :option-disabled="(opt: any) => opt === 'PRIMARY'"
                            class="form-select"
                         />
                      </div>
                   </div>
                   <div class="form-group">
                      <label class="form-label col-3">
-                        {{ $tc('word.field', fields.length) }}
+                        {{ t('word.field', fields.length) }}
                      </label>
                      <div class="fields-list column pt-1">
                         <label
@@ -108,7 +108,7 @@
                            class="form-checkbox m-0"
                            @click.prevent="toggleField(field.name)"
                         >
-                           <input type="checkbox" :checked="selectedIndexObj.fields.some(f => f === field.name)">
+                           <input type="checkbox" :checked="selectedIndexObj.fields.some((f: string) => f === field.name)">
                            <i class="form-icon" /> {{ field.name }}
                         </label>
                      </div>
@@ -119,11 +119,11 @@
                      <i class="mdi mdi-key-outline mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ $t('message.thereAreNoIndexes') }}
+                     {{ t('message.thereAreNoIndexes') }}
                   </p>
                   <div class="empty-action">
                      <button class="btn btn-primary" @click="addIndex">
-                        {{ $t('message.createNewIndex') }}
+                        {{ t('message.createNewIndex') }}
                      </button>
                   </div>
                </div>
@@ -133,116 +133,113 @@
    </ConfirmModal>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
+import { TableField } from 'common/interfaces/antares';
 import { uidGen } from 'common/libs/uidGen';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import { useI18n } from 'vue-i18n';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabPropsTableIndexesModal',
-   components: {
-      ConfirmModal,
-      BaseSelect
-   },
-   props: {
-      localIndexes: Array,
-      table: String,
-      fields: Array,
-      workspace: Object,
-      indexTypes: Array
-   },
-   emits: ['hide', 'indexes-update'],
-   data () {
-      return {
-         indexesProxy: [],
-         isOptionsChanging: false,
-         selectedIndexID: '',
-         modalInnerHeight: 400
-      };
-   },
-   computed: {
-      selectedIndexObj () {
-         return this.indexesProxy.find(index => index._antares_id === this.selectedIndexID);
-      },
-      isChanged () {
-         return JSON.stringify(this.localIndexes) !== JSON.stringify(this.indexesProxy);
-      },
-      hasPrimary () {
-         return this.indexesProxy.some(index => index.type === 'PRIMARY');
-      }
-   },
-   mounted () {
-      this.indexesProxy = JSON.parse(JSON.stringify(this.localIndexes));
+const { t } = useI18n();
 
-      if (this.indexesProxy.length)
-         this.resetSelectedID();
+const props = defineProps({
+   localIndexes: Array,
+   table: String,
+   fields: Array as Prop<TableField[]>,
+   workspace: Object,
+   indexTypes: Array
+});
 
-      this.getModalInnerHeight();
-      window.addEventListener('resize', this.getModalInnerHeight);
-   },
-   unmounted () {
-      window.removeEventListener('resize', this.getModalInnerHeight);
-   },
-   methods: {
-      confirmIndexesChange () {
-         this.indexesProxy = this.indexesProxy.filter(index => index.fields.length);
-         this.$emit('indexes-update', this.indexesProxy);
-      },
-      selectIndex (event, id) {
-         if (this.selectedIndexID !== id && !event.target.classList.contains('remove-field'))
-            this.selectedIndexID = id;
-      },
-      getModalInnerHeight () {
-         const modalBody = document.querySelector('.modal-body');
-         if (modalBody)
-            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
-      },
-      addIndex () {
-         this.indexesProxy = [...this.indexesProxy, {
-            _antares_id: uidGen(),
-            name: 'NEW_INDEX',
-            fields: [],
-            type: 'INDEX',
-            comment: '',
-            indexType: 'BTREE',
-            indexComment: '',
-            cardinality: 0
-         }];
+const emit = defineEmits(['hide', 'indexes-update']);
 
-         if (this.indexesProxy.length === 1)
-            this.resetSelectedID();
+const indexesPanel: Ref<HTMLDivElement> = ref(null);
+const indexesProxy = ref([]);
+const selectedIndexID = ref('');
+const modalInnerHeight = ref(400);
 
-         setTimeout(() => {
-            this.$refs.indexesPanel.scrollTop = this.$refs.indexesPanel.scrollHeight + 60;
-         }, 20);
-      },
-      removeIndex (id) {
-         this.indexesProxy = this.indexesProxy.filter(index => index._antares_id !== id);
+const selectedIndexObj = computed(() => indexesProxy.value.find(index => index._antares_id === selectedIndexID.value));
+const isChanged = computed(() => JSON.stringify(props.localIndexes) !== JSON.stringify(indexesProxy.value));
 
-         if (this.selectedIndexID === id && this.indexesProxy.length)
-            this.resetSelectedID();
-      },
-      clearChanges () {
-         this.indexesProxy = JSON.parse(JSON.stringify(this.localIndexes));
-         if (!this.indexesProxy.some(index => index._antares_id === this.selectedIndexID))
-            this.resetSelectedID();
-      },
-      toggleField (field) {
-         this.indexesProxy = this.indexesProxy.map(index => {
-            if (index._antares_id === this.selectedIndexID) {
-               if (index.fields.includes(field))
-                  index.fields = index.fields.filter(f => f !== field);
-               else
-                  index.fields.push(field);
-            }
-            return index;
-         });
-      },
-      resetSelectedID () {
-         this.selectedIndexID = this.indexesProxy.length ? this.indexesProxy[0]._antares_id : '';
-      }
-   }
+const confirmIndexesChange = () => {
+   indexesProxy.value = indexesProxy.value.filter(index => index.fields.length);
+   emit('indexes-update', indexesProxy.value);
 };
+
+const selectIndex = (event: MouseEvent, id: string) => {
+   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+   if (selectedIndexID.value !== id && !(event.target as any).classList.contains('remove-field'))
+      selectedIndexID.value = id;
+};
+
+const getModalInnerHeight = () => {
+   const modalBody = document.querySelector('.modal-body');
+   if (modalBody)
+      modalInnerHeight.value = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+};
+
+const addIndex = () => {
+   indexesProxy.value = [...indexesProxy.value, {
+      _antares_id: uidGen(),
+      name: 'NEW_INDEX',
+      fields: [],
+      type: 'INDEX',
+      comment: '',
+      indexType: 'BTREE',
+      indexComment: '',
+      cardinality: 0
+   }];
+
+   if (indexesProxy.value.length === 1)
+      resetSelectedID();
+
+   setTimeout(() => {
+      indexesPanel.value.scrollTop = indexesPanel.value.scrollHeight + 60;
+   }, 20);
+};
+
+const removeIndex = (id: string) => {
+   indexesProxy.value = indexesProxy.value.filter(index => index._antares_id !== id);
+
+   if (selectedIndexID.value === id && indexesProxy.value.length)
+      resetSelectedID();
+};
+
+const clearChanges = () => {
+   indexesProxy.value = JSON.parse(JSON.stringify(props.localIndexes));
+   if (!indexesProxy.value.some(index => index._antares_id === selectedIndexID.value))
+      resetSelectedID();
+};
+
+const toggleField = (field: string) => {
+   indexesProxy.value = indexesProxy.value.map(index => {
+      if (index._antares_id === selectedIndexID.value) {
+         if (index.fields.includes(field))
+            index.fields = index.fields.filter((f: string) => f !== field);
+         else
+            index.fields.push(field);
+      }
+      return index;
+   });
+};
+
+const resetSelectedID = () => {
+   selectedIndexID.value = indexesProxy.value.length ? indexesProxy.value[0]._antares_id : '';
+};
+
+onMounted(() => {
+   indexesProxy.value = JSON.parse(JSON.stringify(props.localIndexes));
+
+   if (indexesProxy.value.length)
+      resetSelectedID();
+
+   getModalInnerHeight();
+   window.addEventListener('resize', getModalInnerHeight);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', getModalInnerHeight);
+});
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/WorkspaceTabPropsTableRow.vue

@@ -219,7 +219,7 @@
       </div>
       <ConfirmModal
          v-if="isDefaultModal"
-         :confirm-text="$t('word.confirm')"
+         :confirm-text="t('word.confirm')"
          size="400"
          @confirm="editOFF"
          @hide="hideDefaultModal"
@@ -227,7 +227,7 @@
          <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
-               <span class="cut-text">{{ $t('word.default') }} "{{ row.name }}"</span>
+               <span class="cut-text">{{ t('word.default') }} "{{ row.name }}"</span>
             </div>
          </template>
          <template #body>
@@ -250,7 +250,7 @@
                            value="custom"
                            type="radio"
                            name="default"
-                        ><i class="form-icon" /> {{ $t('message.customValue') }}
+                        ><i class="form-icon" /> {{ t('message.customValue') }}
                      </label>
                      <div class="column">
                         <input
@@ -291,7 +291,7 @@
                            type="radio"
                            name="default"
                            value="expression"
-                        ><i class="form-icon" /> {{ $t('word.expression') }}
+                        ><i class="form-icon" /> {{ t('word.expression') }}
                      </label>
                      <div class="column">
                         <input
@@ -306,7 +306,7 @@
                <div v-if="customizations.onUpdate">
                   <div class="form-group">
                      <label class="form-label col-4">
-                        {{ $t('message.onUpdate') }}
+                        {{ t('message.onUpdate') }}
                      </label>
                      <div class="column">
                         <input
@@ -323,285 +323,269 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, nextTick, onMounted, Prop, PropType, Ref, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import ConfirmModal from '@/components/BaseConfirmModal';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { TableField, TableIndex, TypesGroup } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsTableRow',
-   components: {
-      ConfirmModal,
-      BaseSelect
+const { t } = useI18n();
+
+const props = defineProps({
+   row: Object as Prop<TableField>,
+   dataTypes: {
+      type: Array as PropType<TypesGroup[]>,
+      default: () => []
    },
-   props: {
-      row: Object,
-      dataTypes: { type: Array, default: () => [] },
-      indexes: Array,
-      foreigns: Array,
-      customizations: Object
-   },
-   emits: ['contextmenu', 'rename-field'],
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+   indexes: Array as Prop<TableIndex[]>,
+   foreigns: Array as Prop<string[]>,
+   customizations: Object
+});
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const emit = defineEmits(['contextmenu', 'rename-field']);
 
-      const { getWorkspace } = workspacesStore;
+const workspacesStore = useWorkspacesStore();
 
-      return {
-         addNotification,
-         selectedWorkspace,
-         getWorkspace
-      };
-   },
-   data () {
-      return {
-         localRow: {},
-         isInlineEditor: {},
-         isDefaultModal: false,
-         defaultValue: {
-            type: 'noval',
-            custom: '',
-            expression: '',
-            onUpdate: ''
-         },
-         editingContent: null,
-         originalContent: null,
-         editingField: null
-      };
-   },
-   computed: {
-      localLength () {
-         const localLength = this.localRow.numLength || this.localRow.charLength || this.localRow.datePrecision || this.localRow.numPrecision || 0;
-         return localLength === true ? null : localLength;
-      },
-      fieldType () {
-         const fieldType = this.dataTypes.reduce((acc, group) => [...acc, ...group.types], []).filter(type =>
-            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : '')
-         );
-         const group = this.dataTypes.filter(group => group.types.some(type =>
-            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : ''))
-         );
+const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
-         return fieldType.length ? { ...fieldType[0], group: group[0].group } : {};
-      },
-      fieldDefault () {
-         if (this.localRow.autoIncrement) return 'AUTO_INCREMENT';
-         if (this.localRow.default === 'NULL') return 'NULL';
-         return this.localRow.default;
-      },
-      collations () {
-         return this.getWorkspace(this.selectedWorkspace).collations;
-      },
-      canAutoincrement () {
-         return this.indexes.some(index => ['PRIMARY', 'UNIQUE'].includes(index.type));
-      },
-      isNullable () {
-         return this.customizations.nullablePrimary || !this.indexes.some(index => ['PRIMARY'].includes(index.type));
-      },
-      isInDataTypes () {
-         let typeNames = [];
-         for (const group of this.dataTypes) {
-            const groupTypeNames = group.types.reduce((acc, curr) => {
-               acc.push(curr.name);
-               return acc;
-            }, []);
+const { getWorkspace } = workspacesStore;
 
-            typeNames = [...groupTypeNames, ...typeNames];
-         }
-         return typeNames.includes(this.row.type);
-      },
-      types () {
-         const types = [...this.dataTypes];
-         if (!this.isInDataTypes)
-            types.unshift({ name: this.row });
+const localRow: Ref<TableField> = ref({} as TableField);
+const isInlineEditor: Ref<TableField> = ref({} as TableField);
+const isDefaultModal = ref(false);
+const defaultValue = ref({
+   type: 'noval',
+   custom: '',
+   expression: '',
+   onUpdate: ''
+});
+const editingContent: Ref<string | number> = ref(null);
+const originalContent = ref(null);
+const editingField: Ref<keyof TableField> = ref(null);
 
-         return types;
-      }
-   },
-   watch: {
-      localRow () {
-         this.initLocalRow();
-      },
-      row () {
-         this.localRow = this.row;
-      },
-      indexes () {
-         if (!this.canAutoincrement)
-            this.localRow.autoIncrement = false;
+const localLength = computed(() => {
+   const localLength = localRow.value.numLength || localRow.value.charLength || localRow.value.datePrecision || localRow.value.numPrecision || 0 as number | true;
+   return localLength === true ? null : localLength;
+});
 
-         if (!this.isNullable)
-            this.localRow.nullable = false;
-      }
-   },
-   mounted () {
-      this.localRow = this.row;
-      this.initLocalRow();
-      this.isInlineEditor.length = false;
-   },
-   methods: {
-      keyName (key) {
-         switch (key) {
-            case 'pri':
-               return 'PRIMARY';
-            case 'uni':
-               return 'UNIQUE';
-            case 'mul':
-               return 'INDEX';
-            default:
-               return 'UNKNOWN ' + key;
-         }
-      },
-      typeClass (type) {
-         if (type)
-            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-         return '';
-      },
-      initLocalRow () {
-         Object.keys(this.localRow).forEach(key => {
-            this.isInlineEditor[key] = false;
-         });
+const fieldType = computed(() => {
+   const fieldType = props.dataTypes.reduce((acc, group) => [...acc, ...group.types], []).filter(type =>
+      type.name === (localRow.value.type ? localRow.value.type.toUpperCase() : '')
+   );
+   const group = props.dataTypes.filter(group => group.types.some(type =>
+      type.name === (localRow.value.type ? localRow.value.type.toUpperCase() : ''))
+   );
 
-         this.defaultValue.onUpdate = this.localRow.onUpdate;
-         this.defaultValue.type = this.localRow.defaultType || 'noval';
-         if (this.defaultValue.type === 'custom') {
-            this.defaultValue.custom = this.localRow.default
-               ? this.localRow.default.includes('\'')
-                  ? this.localRow.default.split('\'')[1]
-                  : this.localRow.default
-               : '';
-         }
-         else if (this.defaultValue.type === 'expression') {
-            if (this.localRow.default.toUpperCase().includes('ON UPDATE'))
-               this.defaultValue.expression = this.localRow.default.replace(/ on update.*$/i, '');
-            else
-               this.defaultValue.expression = this.localRow.default;
-         }
-      },
-      editON (event, content, field) {
-         if (field === 'length') {
-            if (['integer', 'float', 'binary', 'spatial'].includes(this.fieldType.group)) this.editingField = 'numLength';
-            else if (['string', 'unknown'].includes(this.fieldType.group)) this.editingField = 'charLength';
-            else if (['other'].includes(this.fieldType.group)) this.editingField = 'enumValues';
-            else if (['time'].includes(this.fieldType.group)) this.editingField = 'datePrecision';
-         }
-         else
-            this.editingField = field;
+   return fieldType.length ? { ...fieldType[0], group: group[0].group } : {};
+});
 
-         if (this.localRow.enumValues && field === 'length') {
-            this.editingContent = this.localRow.enumValues;
-            this.originalContent = this.localRow.enumValues;
-         }
-         else if (this.fieldType.scale && field === 'length') {
-            const scale = this.localRow.numScale !== null ? this.localRow.numScale : 0;
-            this.editingContent = `${content}, ${scale}`;
-            this.originalContent = `${content}, ${scale}`;
-         }
-         else {
-            this.editingContent = content;
-            this.originalContent = content;
-         }
+const fieldDefault = computed(() => {
+   if (localRow.value.autoIncrement) return 'AUTO_INCREMENT';
+   if (localRow.value.default === 'NULL') return 'NULL';
+   return localRow.value.default;
+});
 
-         const obj = { [field]: true };
-         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+const collations = computed(() => getWorkspace(selectedWorkspace.value).collations);
+const canAutoincrement = computed(() => props.indexes.some(index => ['PRIMARY', 'UNIQUE'].includes(index.type)));
+const isNullable = computed(() => props.customizations.nullablePrimary || !props.indexes.some(index => ['PRIMARY'].includes(index.type)));
 
-         if (field === 'default')
-            this.isDefaultModal = true;
-         else {
-            this.$nextTick(() => { // Focus on input
-               event.target.blur();
+const isInDataTypes = computed(() => {
+   let typeNames: string[] = [];
+   for (const group of props.dataTypes) {
+      const groupTypeNames = group.types.reduce((acc, curr) => {
+         acc.push(curr.name);
+         return acc;
+      }, []);
 
-               this.$nextTick(() => document.querySelector('.editable-field').focus());
-            });
-         }
-      },
-      editOFF () {
-         if (this.editingField === 'name')
-            this.$emit('rename-field', { old: this.localRow[this.editingField], new: this.editingContent });
+      typeNames = [...groupTypeNames, ...typeNames];
+   }
+   return typeNames.includes(props.row.type);
+});
 
-         if (this.editingField === 'numLength' && this.fieldType.scale) {
-            const [length, scale] = this.editingContent.split(',');
-            this.localRow.numLength = +length;
-            this.localRow.numScale = scale ? +scale : null;
-         }
-         else
-            this.localRow[this.editingField] = this.editingContent;
+const types = computed(() => {
+   const types = [...props.dataTypes];
+   if (!isInDataTypes.value)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (types as any).unshift({ name: props.row });
 
-         if (this.editingField === 'type' && this.editingContent !== this.originalContent) {
-            this.localRow.numLength = null;
-            this.localRow.numScale = null;
-            this.localRow.charLength = null;
-            this.localRow.datePrecision = null;
-            this.localRow.enumValues = '';
+   return types;
+});
 
-            if (this.fieldType.length) {
-               if (['integer', 'float', 'binary', 'spatial'].includes(this.fieldType.group)) this.localRow.numLength = 11;
-               if (['string'].includes(this.fieldType.group)) this.localRow.charLength = 15;
-               if (['time'].includes(this.fieldType.group)) this.localRow.datePrecision = 0;
-               if (['other'].includes(this.fieldType.group)) this.localRow.enumValues = '\'valA\',\'valB\'';
-            }
+const typeClass = (type: string) => {
+   if (type)
+      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+   return '';
+};
 
-            if (!this.fieldType.collation)
-               this.localRow.collation = null;
+const initLocalRow = () => {
+   Object.keys(localRow.value).forEach(key => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (isInlineEditor as any).value[key] = false;
+   });
 
-            if (!this.fieldType.unsigned)
-               this.localRow.unsigned = false;
-
-            if (!this.fieldType.zerofill)
-               this.localRow.zerofill = false;
-         }
-         else if (this.editingField === 'default') {
-            switch (this.defaultValue.type) {
-               case 'autoincrement':
-                  this.localRow.autoIncrement = true;
-                  break;
-               case 'noval':
-                  this.localRow.autoIncrement = false;
-                  this.localRow.default = null;
-                  break;
-               case 'null':
-                  this.localRow.autoIncrement = false;
-                  this.localRow.default = 'NULL';
-                  break;
-               case 'custom':
-                  this.localRow.autoIncrement = false;
-                  this.localRow.default = Number.isNaN(+this.defaultValue.custom) ? `'${this.defaultValue.custom}'` : this.defaultValue.custom;
-                  break;
-               case 'expression':
-                  this.localRow.autoIncrement = false;
-                  this.localRow.default = this.defaultValue.expression;
-                  break;
-            }
-
-            this.localRow.onUpdate = this.defaultValue.onUpdate;
-         }
-
-         Object.keys(this.isInlineEditor).forEach(key => {
-            this.isInlineEditor = { ...this.isInlineEditor, [key]: false };
-         });
-
-         this.editingContent = null;
-         this.originalContent = null;
-         this.editingField = null;
-      },
-      checkLengthScale (e) {
-         e = (e) || window.event;
-         const charCode = (e.which) ? e.which : e.keyCode;
-
-         if (((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 44) || (charCode === 44 && e.target.value.includes(',')))
-            e.preventDefault();
-         else
-            return true;
-      },
-      hideDefaultModal () {
-         this.isDefaultModal = false;
-      }
+   defaultValue.value.onUpdate = localRow.value.onUpdate;
+   defaultValue.value.type = localRow.value.defaultType || 'noval';
+   if (defaultValue.value.type === 'custom') {
+      defaultValue.value.custom = localRow.value.default
+         ? localRow.value.default.includes('\'')
+            ? localRow.value.default.split('\'')[1]
+            : localRow.value.default
+         : '';
+   }
+   else if (defaultValue.value.type === 'expression') {
+      if (localRow.value.default.toUpperCase().includes('ON UPDATE'))
+         defaultValue.value.expression = localRow.value.default.replace(/ on update.*$/i, '');
+      else
+         defaultValue.value.expression = localRow.value.default;
    }
 };
+
+const editON = async (event: MouseEvent, content: string | number, field: keyof TableField) => {
+   if (field === 'length') {
+      if (['integer', 'float', 'binary', 'spatial'].includes(fieldType.value.group)) editingField.value = 'numLength';
+      else if (['string', 'unknown'].includes(fieldType.value.group)) editingField.value = 'charLength';
+      else if (['other'].includes(fieldType.value.group)) editingField.value = 'enumValues';
+      else if (['time'].includes(fieldType.value.group)) editingField.value = 'datePrecision';
+   }
+   else
+      editingField.value = field;
+
+   if (localRow.value.enumValues && field === 'length') {
+      editingContent.value = localRow.value.enumValues;
+      originalContent.value = localRow.value.enumValues;
+   }
+   else if (fieldType.value.scale && field === 'length') {
+      const scale = localRow.value.numScale !== null ? localRow.value.numScale : 0;
+      editingContent.value = `${content}, ${scale}`;
+      originalContent.value = `${content}, ${scale}`;
+   }
+   else {
+      editingContent.value = content;
+      originalContent.value = content;
+   }
+
+   const obj = { [field]: true };
+   isInlineEditor.value = { ...isInlineEditor.value, ...obj };
+
+   if (field === 'default')
+      isDefaultModal.value = true;
+   else {
+      await nextTick();
+      (event as MouseEvent & { target: HTMLInputElement }).target.blur();
+      await nextTick();
+      document.querySelector<HTMLInputElement>('.editable-field').focus();
+   }
+};
+
+const editOFF = () => {
+   if (editingField.value === 'name')
+      emit('rename-field', { old: localRow.value[editingField.value], new: editingContent.value });
+
+   if (editingField.value === 'numLength' && fieldType.value.scale) {
+      const [length, scale] = (editingContent.value as string).split(',');
+      localRow.value.numLength = +length;
+      localRow.value.numScale = scale ? +scale : null;
+   }
+   else
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (localRow.value as any)[editingField.value] = editingContent.value;
+
+   if (editingField.value === 'type' && editingContent.value !== originalContent.value) {
+      localRow.value.numLength = null;
+      localRow.value.numScale = null;
+      localRow.value.charLength = null;
+      localRow.value.datePrecision = null;
+      localRow.value.enumValues = '';
+
+      if (fieldType.value.length) {
+         if (['integer', 'float', 'binary', 'spatial'].includes(fieldType.value.group)) localRow.value.numLength = 11;
+         if (['string'].includes(fieldType.value.group)) localRow.value.charLength = 15;
+         if (['time'].includes(fieldType.value.group)) localRow.value.datePrecision = 0;
+         if (['other'].includes(fieldType.value.group)) localRow.value.enumValues = '\'valA\',\'valB\'';
+      }
+
+      if (!fieldType.value.collation)
+         localRow.value.collation = null;
+
+      if (!fieldType.value.unsigned)
+         localRow.value.unsigned = false;
+
+      if (!fieldType.value.zerofill)
+         localRow.value.zerofill = false;
+   }
+   else if (editingField.value === 'default') {
+      switch (defaultValue.value.type) {
+         case 'autoincrement':
+            localRow.value.autoIncrement = true;
+            break;
+         case 'noval':
+            localRow.value.autoIncrement = false;
+            localRow.value.default = null;
+            break;
+         case 'null':
+            localRow.value.autoIncrement = false;
+            localRow.value.default = 'NULL';
+            break;
+         case 'custom':
+            localRow.value.autoIncrement = false;
+            localRow.value.default = Number.isNaN(+defaultValue.value.custom) ? `'${defaultValue.value.custom}'` : defaultValue.value.custom;
+            break;
+         case 'expression':
+            localRow.value.autoIncrement = false;
+            localRow.value.default = defaultValue.value.expression;
+            break;
+      }
+
+      localRow.value.onUpdate = defaultValue.value.onUpdate;
+   }
+
+   Object.keys(isInlineEditor.value).forEach(key => {
+      isInlineEditor.value = { ...isInlineEditor.value, [key]: false };
+   });
+
+   editingContent.value = null;
+   originalContent.value = null;
+   editingField.value = null;
+};
+
+const checkLengthScale = (e: KeyboardEvent & { target: HTMLInputElement }) => {
+   e = (e) || window.event as KeyboardEvent & { target: HTMLInputElement };
+   const charCode = (e.which) ? e.which : e.code;
+
+   if (((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 44) || (charCode === 44 && e.target.value.includes(',')))
+      e.preventDefault();
+   else
+      return true;
+};
+
+const hideDefaultModal = () => {
+   isDefaultModal.value = false;
+};
+
+watch(localRow, () => {
+   initLocalRow();
+});
+
+watch(() => props.row, () => {
+   localRow.value = props.row;
+});
+
+watch(() => props.indexes, () => {
+   if (!canAutoincrement.value)
+      localRow.value.autoIncrement = false;
+
+   if (!isNullable.value)
+      localRow.value.nullable = false;
+});
+
+onMounted(() => {
+   localRow.value = props.row;
+   initLocalRow();
+   isInlineEditor.value.length = false;
+});
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/WorkspaceTabPropsTrigger.vue

@@ -11,20 +11,20 @@
                   @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>
             <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>
@@ -34,7 +34,7 @@
          <div class="columns">
             <div class="column col-auto">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <label class="form-label">{{ t('word.name') }}</label>
                   <input
                      v-model="localTrigger.name"
                      class="form-input"
@@ -44,12 +44,12 @@
             </div>
             <div v-if="customizations.definer" class="column col-auto">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <label class="form-label">{{ t('word.definer') }}</label>
                   <BaseSelect
                      v-model="localTrigger.definer"
                      :options="users"
-                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
-                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
+                     :option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
                   />
                </div>
@@ -57,7 +57,7 @@
             <fieldset class="column columns mb-0" :disabled="customizations.triggerOnlyRename">
                <div class="column col-auto">
                   <div class="form-group">
-                     <label class="form-label">{{ $t('word.table') }}</label>
+                     <label class="form-label">{{ t('word.table') }}</label>
                      <BaseSelect
                         v-model="localTrigger.table"
                         :options="schemaTables"
@@ -69,7 +69,7 @@
                </div>
                <div class="column col-auto">
                   <div class="form-group">
-                     <label class="form-label">{{ $t('word.event') }}</label>
+                     <label class="form-label">{{ t('word.event') }}</label>
                      <div class="input-group">
                         <BaseSelect
                            v-model="localTrigger.activation"
@@ -85,7 +85,7 @@
 
                         <div v-if="customizations.triggerMultipleEvents" class="px-4">
                            <label
-                              v-for="event in Object.keys(localEvents)"
+                              v-for="event in (Object.keys(localEvents) as ('INSERT' | 'UPDATE' | 'DELETE')[])"
                               :key="event"
                               class="form-checkbox form-inline"
                               @change.prevent="changeEvents(event)"
@@ -101,7 +101,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.triggerStatement') }}</label>
+         <label class="form-label ml-2">{{ t('message.triggerStatement') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -114,268 +114,252 @@
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { Ace } from 'ace-builds';
+import { useI18n } from 'vue-i18n';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import QueryEditor from '@/components/QueryEditor';
-import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor.vue';
+import BaseLoader from '@/components/BaseLoader.vue';
 import Triggers from '@/ipc-api/Triggers';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabPropsTrigger',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      trigger: String,
-      isSelected: Boolean,
-      schema: String
-   },
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+type TriggerEventName = 'INSERT' | 'UPDATE' | 'DELETE'
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const { t } = useI18n();
 
-      const {
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         newTab,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      } = workspacesStore;
+const props = defineProps({
+   tabUid: String,
+   connection: Object,
+   trigger: String,
+   isSelected: Boolean,
+   schema: String
+});
 
-      return {
-         addNotification,
-         selectedWorkspace,
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         newTab,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      };
-   },
-   data () {
-      return {
-         isLoading: false,
-         isSaving: false,
-         originalTrigger: null,
-         localTrigger: { sql: '' },
-         lastTrigger: null,
-         sqlProxy: '',
-         editorHeight: 300,
-         localEvents: { INSERT: false, UPDATE: false, DELETE: false }
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      },
-      isChanged () {
-         return JSON.stringify(this.originalTrigger) !== JSON.stringify(this.localTrigger);
-      },
-      isDefinerInUsers () {
-         return this.originalTrigger ? this.workspace.users.some(user => this.originalTrigger.definer === `\`${user.name}\`@\`${user.host}\``) : true;
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
+const { addNotification } = useNotificationsStore();
+const workspacesStore = useWorkspacesStore();
 
-         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
-      },
-      users () {
-         const users = [{ value: '' }, ...this.workspace.users];
-         if (!this.isDefinerInUsers) {
-            const [name, host] = this.originalTrigger.definer.replaceAll('`', '').split('@');
-            users.unshift({ name, host });
-         }
+const {
+   getWorkspace,
+   refreshStructure,
+   renameTabs,
+   changeBreadcrumbs,
+   setUnsavedChanges
+} = workspacesStore;
 
-         return users;
-      }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getTriggerData();
-            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
-            this.lastTrigger = this.trigger;
-         }
-      },
-      async trigger () {
-         if (this.isSelected) {
-            await this.getTriggerData();
-            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
-            this.lastTrigger = this.trigger;
-         }
-      },
-      async isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, trigger: this.trigger });
+const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
+const lastTrigger = ref(null);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const originalTrigger = ref(null);
+const localTrigger = ref(null);
+const editorHeight = ref(300);
+const localEvents = ref({ INSERT: false, UPDATE: false, DELETE: false });
 
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
+const workspace = computed(() => {
+   return getWorkspace(props.connection.uid);
+});
 
-            if (this.lastTrigger !== this.trigger)
-               this.getTriggerData();
-         }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-      }
-   },
-   async created () {
-      await this.getTriggerData();
-      this.$refs.queryEditor.editor.session.setValue(this.localTrigger.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 getTriggerData () {
-         if (!this.trigger) return;
+const customizations = computed(() => {
+   return workspace.value.customizations;
+});
 
-         Object.keys(this.localEvents).forEach(event => {
-            this.localEvents[event] = false;
-         });
+const isChanged = computed(() => {
+   return JSON.stringify(originalTrigger.value) !== JSON.stringify(localTrigger.value);
+});
 
-         this.localTrigger = { sql: '' };
-         this.isLoading = true;
-         this.lastTrigger = this.trigger;
+const isDefinerInUsers = computed(() => {
+   return originalTrigger.value ? workspace.value.users.some(user => originalTrigger.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+});
 
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            trigger: this.trigger
-         };
+const schemaTables = computed(() => {
+   const schemaTables = workspace.value.structure
+      .filter(schema => schema.name === props.schema)
+      .map(schema => schema.tables);
 
-         try {
-            const { status, response } = await Triggers.getTriggerInformations(params);
-            if (status === 'success') {
-               this.originalTrigger = response;
-               this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
-               this.sqlProxy = this.localTrigger.sql;
+   return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+});
 
-               if (this.customizations.triggerMultipleEvents) {
-                  this.originalTrigger.event.forEach(e => {
-                     this.localEvents[e] = true;
-                  });
-               }
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+const users = computed(() => {
+   const users = [{ value: '' }, ...workspace.value.users];
+   if (!isDefinerInUsers.value) {
+      const [name, host] = originalTrigger.value.definer.replaceAll('`', '').split('@');
+      users.unshift({ name, host });
+   }
 
-         this.resizeQueryEditor();
-         this.isLoading = false;
-      },
-      changeEvents (event) {
-         if (this.customizations.triggerMultipleEvents) {
-            this.localEvents[event] = !this.localEvents[event];
-            this.localTrigger.event = [];
-            for (const key in this.localEvents) {
-               if (this.localEvents[key])
-                  this.localTrigger.event.push(key);
-            }
-         }
-      },
-      async saveChanges () {
-         if (this.isSaving) return;
-         this.isSaving = true;
-         const params = {
-            uid: this.connection.uid,
-            trigger: {
-               ...this.localTrigger,
-               schema: this.schema,
-               oldName: this.originalTrigger.name
-            }
-         };
+   return users;
+});
 
-         try {
-            const { status, response } = await Triggers.alterTrigger(params);
+const getTriggerData = async () => {
+   if (!props.trigger) return;
 
-            if (status === 'success') {
-               await this.refreshStructure(this.connection.uid);
+   Object.keys(localEvents.value).forEach((event: TriggerEventName) => {
+      localEvents.value[event] = false;
+   });
 
-               if (this.originalTrigger.name !== this.localTrigger.name) {
-                  const triggerName = this.customizations.triggerTableInName ? `${this.localTrigger.table}.${this.localTrigger.name}` : this.localTrigger.name;
-                  const triggerOldName = this.customizations.triggerTableInName ? `${this.originalTrigger.table}.${this.originalTrigger.name}` : this.originalTrigger.name;
+   localTrigger.value = { sql: '' };
+   isLoading.value = true;
+   lastTrigger.value = props.trigger;
 
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: triggerOldName,
-                     elementNewName: triggerName,
-                     elementType: 'trigger'
-                  });
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      trigger: props.trigger
+   };
 
-                  this.changeBreadcrumbs({ schema: this.schema, trigger: triggerName });
-               }
-               else
-                  this.getTriggerData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+   try {
+      const { status, response } = await Triggers.getTriggerInformations(params);
+      if (status === 'success') {
+         originalTrigger.value = response;
+         localTrigger.value = JSON.parse(JSON.stringify(originalTrigger.value));
 
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
-         this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
-
-         Object.keys(this.localEvents).forEach(event => {
-            this.localEvents[event] = false;
-         });
-
-         if (this.customizations.triggerMultipleEvents) {
-            this.originalTrigger.event.forEach(e => {
-               this.localEvents[e] = true;
+         if (customizations.value.triggerMultipleEvents) {
+            originalTrigger.value.event.forEach((event: TriggerEventName) => {
+               localEvents.value[event] = true;
             });
          }
-      },
-      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();
-         }
-      },
-      onKey (e) {
-         if (this.isSelected) {
-            e.stopPropagation();
-            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
-               if (this.isChanged)
-                  this.saveChanges();
-            }
-         }
+      }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   resizeQueryEditor();
+   isLoading.value = false;
+};
+
+const changeEvents = (event: TriggerEventName) => {
+   if (customizations.value.triggerMultipleEvents) {
+      localEvents.value[event] = !localEvents.value[event];
+      localTrigger.value.event = [];
+      for (const key in localEvents.value) {
+         if (localEvents.value[key as TriggerEventName])
+            localTrigger.value.event.push(key);
       }
    }
 };
+
+const saveChanges = async () => {
+   if (isSaving.value) return;
+   isSaving.value = true;
+   const params = {
+      uid: props.connection.uid,
+      trigger: {
+         ...localTrigger.value,
+         schema: props.schema,
+         oldName: originalTrigger.value.name
+      }
+   };
+
+   try {
+      const { status, response } = await Triggers.alterTrigger(params);
+
+      if (status === 'success') {
+         await refreshStructure(props.connection.uid);
+
+         if (originalTrigger.value.name !== localTrigger.value.name) {
+            const triggerName = customizations.value.triggerTableInName ? `${localTrigger.value.table}.${localTrigger.value.name}` : localTrigger.value.name;
+            const triggerOldName = customizations.value.triggerTableInName ? `${originalTrigger.value.table}.${originalTrigger.value.name}` : originalTrigger.value.name;
+
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: triggerOldName,
+               elementNewName: triggerName,
+               elementType: 'trigger'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, trigger: triggerName });
+         }
+         else
+            getTriggerData();
+      }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   isSaving.value = false;
+};
+
+const clearChanges = () => {
+   localTrigger.value = JSON.parse(JSON.stringify(originalTrigger.value));
+   queryEditor.value.editor.session.setValue(localTrigger.value.sql);
+
+   Object.keys(localEvents.value).forEach((event: TriggerEventName) => {
+      localEvents.value[event] = false;
+   });
+
+   if (customizations.value.triggerMultipleEvents) {
+      originalTrigger.value.event.forEach((event: TriggerEventName) => {
+         localEvents.value[event] = true;
+      });
+   }
+};
+
+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 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 getTriggerData();
+      queryEditor.value.editor.session.setValue(localTrigger.value.sql);
+      lastTrigger.value = props.trigger;
+   }
+});
+
+watch(() => props.trigger, async () => {
+   if (props.isSelected) {
+      await getTriggerData();
+      queryEditor.value.editor.session.setValue(localTrigger.value.sql);
+      lastTrigger.value = props.trigger;
+   }
+});
+
+watch(() => props.isSelected, (val) => {
+   if (val) changeBreadcrumbs({ schema: props.schema });
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getTriggerData();
+   queryEditor.value.editor.session.setValue(localTrigger.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
 </script>

src/renderer/components/WorkspaceTabPropsTriggerFunction.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>
          </div>
@@ -30,7 +30,7 @@
             <div v-if="customizations.triggerFunctionlanguages" class="column col-auto">
                <div class="form-group">
                   <label class="form-label">
-                     {{ $t('word.language') }}
+                     {{ t('word.language') }}
                   </label>
                   <BaseSelect
                      v-model="localFunction.language"
@@ -42,20 +42,20 @@
             <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="localFunction.definer"
                      :options="workspace.users"
-                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
-                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
+                     :option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
                   />
                </div>
             </div>
             <div v-if="customizations.comment" class="form-group">
                <label class="form-label">
-                  {{ $t('word.comment') }}
+                  {{ t('word.comment') }}
                </label>
                <input
                   v-model="localFunction.comment"
@@ -67,7 +67,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.functionBody') }}</label>
+         <label class="form-label ml-2">{{ t('message.functionBody') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -77,295 +77,194 @@
             :height="editorHeight"
          />
       </div>
-      <ModalAskParameters
-         v-if="isAskingParameters"
-         :local-routine="localFunction"
-         :client="workspace.client"
-         @confirm="runFunction"
-         @close="hideAskParamsModal"
-      />
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+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 BaseLoader from '@/components/BaseLoader';
-import QueryEditor from '@/components/QueryEditor';
-import ModalAskParameters from '@/components/ModalAskParameters';
+import BaseLoader from '@/components/BaseLoader.vue';
+import QueryEditor from '@/components/QueryEditor.vue';
 import Functions from '@/ipc-api/Functions';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { AlterFunctionParams, TriggerFunctionInfos } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabPropsTriggerFunction',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      ModalAskParameters,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      function: 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,
+   function: 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,
-         originalFunction: null,
-         localFunction: { sql: '' },
-         lastFunction: null,
-         sqlProxy: '',
-         editorHeight: 300
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      },
-      isChanged () {
-         return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
-      },
-      isDefinerInUsers () {
-         return this.originalFunction
-            ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
-            : true;
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
+const {
+   getWorkspace,
+   refreshStructure,
+   renameTabs,
+   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 isLoading = ref(false);
+const isSaving = ref(false);
+const originalFunction: Ref<TriggerFunctionInfos> = ref(null);
+const localFunction: Ref<TriggerFunctionInfos> = ref(null);
+const lastFunction = ref(null);
+const sqlProxy = ref('');
+const editorHeight = ref(300);
+
+const workspace = computed(() => getWorkspace(props.connection.uid));
+const customizations = computed(() => workspace.value.customizations);
+const isChanged = computed(() => JSON.stringify(originalFunction.value) !== JSON.stringify(localFunction.value));
+
+const getFunctionData = async () => {
+   if (!props.function) return;
+
+   isLoading.value = true;
+   localFunction.value = { name: '', sql: '', type: '', definer: null };
+   lastFunction.value = props.function;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      func: props.function
+   };
+
+   try {
+      const { status, response } = await Functions.getFunctionInformations(params);
+      if (status === 'success') {
+         originalFunction.value = response;
+
+         localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
+         sqlProxy.value = localFunction.value.sql;
       }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getFunctionData();
-            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
-            this.lastFunction = this.function;
+      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,
+      func: {
+         ...localFunction.value,
+         schema: props.schema,
+         oldName: originalFunction.value.name
+      } as AlterFunctionParams
+   };
+
+   try {
+      const { status, response } = await Functions.alterTriggerFunction(params);
+
+      if (status === 'success') {
+         const oldName = originalFunction.value.name;
+
+         await refreshStructure(props.connection.uid);
+
+         if (oldName !== localFunction.value.name) {
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: oldName,
+               elementNewName: localFunction.value.name,
+               elementType: 'triggerFunction'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, triggerFunction: localFunction.value.name });
          }
-      },
-      async function () {
-         if (this.isSelected) {
-            await this.getFunctionData();
-            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
-            this.lastFunction = this.function;
-         }
-      },
-      async isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.function });
-
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
-
-            if (this.lastFunction !== this.function)
-               await this.getFunctionData();
-         }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
-      }
-   },
-   async created () {
-      await this.getFunctionData();
-      this.$refs.queryEditor.editor.session.setValue(this.localFunction.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 getFunctionData () {
-         if (!this.function) return;
-
-         this.isLoading = true;
-         this.localFunction = { sql: '' };
-         this.lastFunction = this.function;
-
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            func: this.function
-         };
-
-         try {
-            const { status, response } = await Functions.getFunctionInformations(params);
-            if (status === 'success') {
-               this.originalFunction = response;
-
-               this.originalFunction.parameters = [...this.originalFunction.parameters.map(param => {
-                  param._antares_id = uidGen();
-                  return param;
-               })];
-
-               this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
-               this.sqlProxy = this.localFunction.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,
-            func: {
-               ...this.localFunction,
-               schema: this.schema,
-               oldName: this.originalFunction.name
-            }
-         };
-
-         try {
-            const { status, response } = await Functions.alterTriggerFunction(params);
-
-            if (status === 'success') {
-               const oldName = this.originalFunction.name;
-
-               await this.refreshStructure(this.connection.uid);
-
-               if (oldName !== this.localFunction.name) {
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: oldName,
-                     elementNewName: this.localFunction.name,
-                     elementType: 'triggerFunction'
-                  });
-
-                  this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.localFunction.name });
-               }
-               else
-                  this.getFunctionData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
-         this.$refs.queryEditor.editor.session.setValue(this.localFunction.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.localFunction = options;
-      },
-      parametersUpdate (parameters) {
-         this.localFunction = { ...this.localFunction, parameters };
-      },
-      runFunctionCheck () {
-         if (this.localFunction.parameters.length)
-            this.showAskParamsModal();
          else
-            this.runFunction();
-      },
-      runFunction (params) {
-         if (!params) params = [];
+            getFunctionData();
+      }
+      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':
-               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
-               break;
-            case 'pg':
-               sql = `SELECT ${this.originalFunction.name}(${params.join(',')})`;
-               break;
-            case 'mssql':
-               sql = `SELECT ${this.originalFunction.name} ${params.join(',')}`;
-               break;
-            default:
-               sql = `SELECT \`${this.originalFunction.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 = () => {
+   localFunction.value = JSON.parse(JSON.stringify(originalFunction.value));
+   queryEditor.value.editor.session.setValue(localFunction.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 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 getFunctionData();
+      queryEditor.value.editor.session.setValue(localFunction.value.sql);
+      lastFunction.value = props.function;
+   }
+});
+
+watch(() => props.function, async () => {
+   if (props.isSelected) {
+      await getFunctionData();
+      queryEditor.value.editor.session.setValue(localFunction.value.sql);
+      lastFunction.value = props.function;
+   }
+});
+
+watch(() => props.isSelected, (val) => {
+   if (val) changeBreadcrumbs({ schema: props.schema });
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getFunctionData();
+   queryEditor.value.editor.session.setValue(localFunction.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
 </script>

src/renderer/components/WorkspaceTabPropsView.vue

@@ -11,20 +11,20 @@
                   @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>
             <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>
@@ -34,7 +34,7 @@
          <div class="columns">
             <div class="column col-auto">
                <div class="form-group">
-                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <label class="form-label">{{ t('word.name') }}</label>
                   <input
                      v-model="localView.name"
                      class="form-input"
@@ -44,19 +44,19 @@
             </div>
             <div class="column col-auto">
                <div v-if="workspace.customizations.definer" class="form-group">
-                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <label class="form-label">{{ t('word.definer') }}</label>
                   <BaseSelect
                      v-model="localView.definer"
                      :options="users"
-                     :option-label="(user) => user.value === '' ? $t('message.currentUser') : `${user.name}@${user.host}`"
-                     :option-track-by="(user) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
+                     :option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
+                     :option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
                      class="form-select"
                   />
                </div>
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
-                  <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
+                  <label class="form-label">{{ t('message.sqlSecurity') }}</label>
                   <BaseSelect
                      v-model="localView.security"
                      :options="['DEFINER', 'INVOKER']"
@@ -66,7 +66,7 @@
             </div>
             <div class="column col-auto mr-2">
                <div v-if="workspace.customizations.viewAlgorithm" class="form-group">
-                  <label class="form-label">{{ $t('word.algorithm') }}</label>
+                  <label class="form-label">{{ t('word.algorithm') }}</label>
                   <BaseSelect
                      v-model="localView.algorithm"
                      :options="['UNDEFINED', 'MERGE', 'TEMPTABLE']"
@@ -76,10 +76,10 @@
             </div>
             <div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
                <div class="form-group">
-                  <label class="form-label">{{ $t('message.updateOption') }}</label>
+                  <label class="form-label">{{ t('message.updateOption') }}</label>
                   <BaseSelect
                      v-model="localView.updateOption"
-                     :option-track-by="(user) => user.value"
+                     :option-track-by="(user: any) => user.value"
                      :options="[{label: 'None', value: ''}, {label: 'CASCADED', value: 'CASCADED'}, {label: 'LOCAL', value: 'LOCAL'}]"
                      class="form-select"
                   />
@@ -89,7 +89,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.selectStatement') }}</label>
+         <label class="form-label ml-2">{{ t('message.selectStatement') }}</label>
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
@@ -102,223 +102,204 @@
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { Ace } from 'ace-builds';
+import { useI18n } from 'vue-i18n';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import BaseLoader from '@/components/BaseLoader';
-import QueryEditor from '@/components/QueryEditor';
-import Views from '@/ipc-api/Views';
+import BaseLoader from '@/components/BaseLoader.vue';
+import QueryEditor from '@/components/QueryEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import Views from '@/ipc-api/Views';
 
-export default {
-   name: 'WorkspaceTabPropsView',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      BaseSelect
-   },
-   props: {
-      tabUid: String,
-      connection: Object,
-      isSelected: Boolean,
-      schema: String,
-      view: String
-   },
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const props = defineProps({
+   tabUid: String,
+   connection: Object,
+   isSelected: Boolean,
+   schema: String,
+   view: String
+});
 
-      const {
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      } = workspacesStore;
+const { addNotification } = useNotificationsStore();
+const workspacesStore = useWorkspacesStore();
 
-      return {
-         addNotification,
-         selectedWorkspace,
-         getWorkspace,
-         refreshStructure,
-         renameTabs,
-         changeBreadcrumbs,
-         setUnsavedChanges
-      };
-   },
-   data () {
-      return {
-         isLoading: false,
-         isSaving: false,
-         originalView: null,
-         localView: { sql: '' },
-         lastView: null,
-         sqlProxy: '',
-         editorHeight: 300
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      isChanged () {
-         return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
-      },
-      isDefinerInUsers () {
-         return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
-      },
-      users () {
-         const users = [{ value: '' }, ...this.workspace.users];
-         if (!this.isDefinerInUsers) {
-            const [name, host] = this.originalView.definer.replaceAll('`', '').split('@');
-            users.unshift({ name, host });
-         }
+const {
+   getWorkspace,
+   refreshStructure,
+   renameTabs,
+   changeBreadcrumbs,
+   setUnsavedChanges
+} = workspacesStore;
 
-         return users;
+const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
+const isLoading = ref(false);
+const isSaving = ref(false);
+const originalView = ref(null);
+const localView = ref(null);
+const editorHeight = ref(300);
+const lastView = ref(null);
+const sqlProxy = ref('');
+
+const workspace = computed(() => getWorkspace(props.connection.uid));
+const isChanged = computed(() => JSON.stringify(originalView.value) !== JSON.stringify(localView.value));
+const isDefinerInUsers = computed(() => originalView.value ? workspace.value.users.some(user => originalView.value.definer === `\`${user.name}\`@\`${user.host}\``) : true);
+
+const users = computed(() => {
+   const users = [{ value: '' }, ...workspace.value.users];
+   if (!isDefinerInUsers.value) {
+      const [name, host] = originalView.value.definer.replaceAll('`', '').split('@');
+      users.unshift({ name, host });
+   }
+
+   return users;
+});
+
+const getViewData = async () => {
+   if (!props.view) return;
+   isLoading.value = true;
+   localView.value = { sql: '' };
+   lastView.value = props.view;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      view: props.view
+   };
+
+   try {
+      const { status, response } = await Views.getViewInformations(params);
+      if (status === 'success') {
+         originalView.value = response;
+         localView.value = JSON.parse(JSON.stringify(originalView.value));
+         sqlProxy.value = localView.value.sql;
       }
-   },
-   watch: {
-      async schema () {
-         if (this.isSelected) {
-            await this.getViewData();
-            this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
-            this.lastView = this.view;
-         }
-      },
-      async view () {
-         if (this.isSelected) {
-            await this.getViewData();
-            this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
-            this.lastView = this.view;
-         }
-      },
-      isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, view: this.view });
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
 
-            setTimeout(() => {
-               this.resizeQueryEditor();
-            }, 200);
+   resizeQueryEditor();
+   isLoading.value = false;
+};
 
-            if (this.lastView !== this.view)
-               this.getViewData();
-         }
-      },
-      isChanged (val) {
-         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+const saveChanges = async () => {
+   if (isSaving.value) return;
+   isSaving.value = true;
+   const params = {
+      uid: props.connection.uid,
+      view: {
+         ...localView.value,
+         schema: props.schema,
+         oldName: originalView.value.name
       }
-   },
-   async created () {
-      await this.getViewData();
-      this.$refs.queryEditor.editor.session.setValue(this.localView.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 getViewData () {
-         if (!this.view) return;
-         this.isLoading = true;
-         this.localView = { sql: '' };
-         this.lastView = this.view;
+   };
 
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            view: this.view
-         };
+   try {
+      const { status, response } = await Views.alterView(params);
 
-         try {
-            const { status, response } = await Views.getViewInformations(params);
-            if (status === 'success') {
-               this.originalView = response;
-               this.localView = JSON.parse(JSON.stringify(this.originalView));
-               this.sqlProxy = this.localView.sql;
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
+      if (status === 'success') {
+         const oldName = originalView.value.name;
+
+         await refreshStructure(props.connection.uid);
+
+         if (oldName !== localView.value.name) {
+            renameTabs({
+               uid: props.connection.uid,
+               schema: props.schema,
+               elementName: oldName,
+               elementNewName: localView.value.name,
+               elementType: 'view'
+            });
+
+            changeBreadcrumbs({ schema: props.schema, view: localView.value.name });
          }
+         else
+            getViewData();
+      }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      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,
-            view: {
-               ...this.localView,
-               schema: this.schema,
-               oldName: this.originalView.name
-            }
-         };
+   isSaving.value = false;
+};
 
-         try {
-            const { status, response } = await Views.alterView(params);
+const clearChanges = () => {
+   localView.value = JSON.parse(JSON.stringify(originalView.value));
+   queryEditor.value.editor.session.setValue(localView.value.sql);
+};
 
-            if (status === 'success') {
-               const oldName = this.originalView.name;
+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();
+   }
+};
 
-               await this.refreshStructure(this.connection.uid);
-
-               if (oldName !== this.localView.name) {
-                  this.renameTabs({
-                     uid: this.connection.uid,
-                     schema: this.schema,
-                     elementName: oldName,
-                     elementNewName: this.localView.name,
-                     elementType: 'view'
-                  });
-
-                  this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
-               }
-               else
-                  this.getViewData();
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isSaving = false;
-      },
-      clearChanges () {
-         this.localView = JSON.parse(JSON.stringify(this.originalView));
-         this.$refs.queryEditor.editor.session.setValue(this.localView.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();
-         }
-      },
-      onKey (e) {
-         if (this.isSelected) {
-            e.stopPropagation();
-            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
-               if (this.isChanged)
-                  this.saveChanges();
-            }
-         }
+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 getViewData();
+      queryEditor.value.editor.session.setValue(localView.value.sql);
+      lastView.value = props.view;
+   }
+});
+
+watch(() => props.view, async () => {
+   if (props.isSelected) {
+      await getViewData();
+      queryEditor.value.editor.session.setValue(localView.value.sql);
+      lastView.value = props.view;
+   }
+});
+
+watch(() => props.isSelected, (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: props.schema, view: localView.value.name });
+
+      setTimeout(() => {
+         resizeQueryEditor();
+      }, 50);
+   }
+});
+
+watch(isChanged, (val) => {
+   setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
+});
+
+(async () => {
+   await getViewData();
+   queryEditor.value.editor.session.setValue(localView.value.sql);
+   window.addEventListener('keydown', onKey);
+})();
+
+onMounted(() => {
+   window.addEventListener('resize', resizeQueryEditor);
+});
+
+onUnmounted(() => {
+   window.removeEventListener('resize', resizeQueryEditor);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
 </script>

src/renderer/components/WorkspaceTabQuery.vue

@@ -28,11 +28,11 @@
                      v-if="showCancel && isQuering"
                      class="btn btn-primary btn-sm cancellable"
                      :disabled="!query"
-                     :title="$t('word.cancel')"
+                     :title="t('word.cancel')"
                      @click="killTabQuery()"
                   >
                      <i class="mdi mdi-24px mdi-window-close" />
-                     <span class="d-invisible pr-1">{{ $t('word.run') }}</span>
+                     <span class="d-invisible pr-1">{{ t('word.run') }}</span>
                   </button>
                   <button
                      v-else
@@ -43,7 +43,7 @@
                      @click="runQuery(query)"
                   >
                      <i class="mdi mdi-24px mdi-play pr-1" />
-                     <span>{{ $t('word.run') }}</span>
+                     <span>{{ t('word.run') }}</span>
                   </button>
                </div>
                <button
@@ -53,7 +53,7 @@
                   @click="commitTab()"
                >
                   <i class="mdi mdi-24px mdi-cube-send pr-1" />
-                  <span>{{ $t('word.commit') }}</span>
+                  <span>{{ t('word.commit') }}</span>
                </button>
                <button
                   v-if="!autocommit"
@@ -62,7 +62,7 @@
                   @click="rollbackTab()"
                >
                   <i class="mdi mdi-24px mdi-undo-variant pr-1" />
-                  <span>{{ $t('word.rollback') }}</span>
+                  <span>{{ t('word.rollback') }}</span>
                </button>
                <button
                   class="btn btn-link btn-sm mr-0"
@@ -71,7 +71,7 @@
                   @click="clear()"
                >
                   <i class="mdi mdi-24px mdi-delete-sweep pr-1" />
-                  <span>{{ $t('word.clear') }}</span>
+                  <span>{{ t('word.clear') }}</span>
                </button>
 
                <div class="divider-vert py-3" />
@@ -83,7 +83,7 @@
                   @click="beautify()"
                >
                   <i class="mdi mdi-24px mdi-brush pr-1" />
-                  <span>{{ $t('word.format') }}</span>
+                  <span>{{ t('word.format') }}</span>
                </button>
                <button
                   class="btn btn-dark btn-sm"
@@ -92,7 +92,7 @@
                   @click="openHistoryModal()"
                >
                   <i class="mdi mdi-24px mdi-history pr-1" />
-                  <span>{{ $t('word.history') }}</span>
+                  <span>{{ t('word.history') }}</span>
                </button>
                <div class="dropdown table-dropdown pr-2">
                   <button
@@ -101,7 +101,7 @@
                      tabindex="0"
                   >
                      <i class="mdi mdi-24px mdi-file-export mr-1" />
-                     <span>{{ $t('word.export') }}</span>
+                     <span>{{ t('word.export') }}</span>
                      <i class="mdi mdi-24px mdi-menu-down" />
                   </button>
                   <ul class="menu text-left">
@@ -113,13 +113,13 @@
                      </li>
                   </ul>
                </div>
-               <div class="input-group pr-2" :title="$t('message.commitMode')">
+               <div class="input-group pr-2" :title="t('message.commitMode')">
                   <i class="input-group-addon addon-sm mdi mdi-24px mdi-source-commit p-0" />
                   <BaseSelect
                      v-model="autocommit"
-                     :options="[{value: true, label: $t('message.autoCommit')}, {value: false, label: $t('message.manualCommit')}]"
-                     :option-label="opt => opt.label"
-                     :option-track-by="opt => opt.value"
+                     :options="[{value: true, label: t('message.autoCommit')}, {value: false, label: t('message.manualCommit')}]"
+                     :option-label="(opt: any) => opt.label"
+                     :option-track-by="(opt: any) => opt.value"
                      class="form-select select-sm text-bold"
                   />
                </div>
@@ -128,30 +128,30 @@
                <div
                   v-if="results.length"
                   class="d-flex"
-                  :title="$t('message.queryDuration')"
+                  :title="t('message.queryDuration')"
                >
                   <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ durationsCount / 1000 }}s</b>
                </div>
                <div
                   v-if="resultsCount"
                   class="d-flex"
-                  :title="$t('word.results')"
+                  :title="t('word.results')"
                >
                   <i class="mdi mdi-equal pr-1" /> <b>{{ resultsCount.toLocaleString() }}</b>
                </div>
                <div
                   v-if="hasAffected"
                   class="d-flex"
-                  :title="$t('message.affectedRows')"
+                  :title="t('message.affectedRows')"
                >
                   <i class="mdi mdi-target pr-1" /> <b>{{ affectedCount }}</b>
                </div>
-               <div class="input-group" :title="$t('word.schema')">
+               <div class="input-group" :title="t('word.schema')">
                   <i class="input-group-addon addon-sm mdi mdi-24px mdi-database" />
 
                   <BaseSelect
                      v-model="selectedSchema"
-                     :options="[{value: null, label: $t('message.noSchema')}, ...databaseSchemas.map(el => ({label: el, value: el}))]"
+                     :options="[{value: null, label: t('message.noSchema')}, ...databaseSchemas.map(el => ({label: el, value: el}))]"
                      class="form-select select-sm text-bold"
                   />
                </div>
@@ -183,347 +183,331 @@
    </div>
 </template>
 
-<script>
-import { storeToRefs } from 'pinia';
+<script setup lang="ts">
+import { Component, computed, onBeforeUnmount, onMounted, Prop, ref, Ref, watch } from 'vue';
+import { Ace } from 'ace-builds';
+import { useI18n } from 'vue-i18n';
 import { format } from 'sql-formatter';
+import { ConnectionParams } from 'common/interfaces/antares';
 import { useHistoryStore } from '@/stores/history';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
-import QueryEditor from '@/components/QueryEditor';
-import BaseLoader from '@/components/BaseLoader';
-import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
-import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyState';
-import ModalHistory from '@/components/ModalHistory';
-import tableTabs from '@/mixins/tableTabs';
+import QueryEditor from '@/components/QueryEditor.vue';
+import BaseLoader from '@/components/BaseLoader.vue';
+import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';
+import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyState.vue';
+import ModalHistory from '@/components/ModalHistory.vue';
+import { useResultTables } from '@/composables/useResultTables';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-export default {
-   name: 'WorkspaceTabQuery',
-   components: {
-      BaseLoader,
-      QueryEditor,
-      WorkspaceTabQueryTable,
-      WorkspaceTabQueryEmptyState,
-      ModalHistory,
-      BaseSelect
-   },
-   mixins: [tableTabs],
-   props: {
-      tabUid: String,
-      connection: Object,
-      tab: Object,
-      isSelected: Boolean
-   },
-   setup () {
-      const { getHistoryByWorkspace, saveHistory } = useHistoryStore();
-      const { addNotification } = useNotificationsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const props = defineProps({
+   tabUid: String,
+   connection: Object as Prop<ConnectionParams>,
+   tab: Object,
+   isSelected: Boolean
+});
 
-      const {
-         getWorkspace,
-         changeBreadcrumbs,
-         updateTabContent,
-         setUnsavedChanges
-      } = workspacesStore;
+const reloadTable = () => runQuery(lastQuery.value);
 
-      return {
-         getHistoryByWorkspace,
-         saveHistory,
-         addNotification,
-         selectedWorkspace,
-         getWorkspace,
-         changeBreadcrumbs,
-         updateTabContent,
-         setUnsavedChanges
-      };
-   },
-   data () {
-      return {
-         query: '',
-         lastQuery: '',
-         isQuering: false,
-         isCancelling: false,
-         showCancel: false,
-         autocommit: true,
-         results: [],
-         selectedSchema: null,
-         resultsCount: 0,
-         durationsCount: 0,
-         affectedCount: null,
-         editorHeight: 200,
-         isHistoryOpen: false,
-         debounceTimeout: null
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      breadcrumbsSchema () {
-         return this.workspace.breadcrumbs.schema || null;
-      },
-      databaseSchemas () {
-         return this.workspace.structure.reduce((acc, curr) => {
-            acc.push(curr.name);
-            return acc;
-         }, []);
-      },
-      isWorkspaceSelected () {
-         return this.workspace.uid === this.selectedWorkspace;
-      },
-      history () {
-         return this.getHistoryByWorkspace(this.connection.uid) || [];
-      },
-      hasResults () {
-         return this.results.length && this.results[0].rows;
-      },
-      hasAffected () {
-         return this.affectedCount || (!this.resultsCount && this.affectedCount !== null);
-      }
-   },
-   watch: {
-      query (val) {
-         clearTimeout(this.debounceTimeout);
+const {
+   queryTable,
+   isQuering,
+   updateField,
+   deleteSelected
+} = useResultTables(props.connection.uid, reloadTable);
 
-         this.debounceTimeout = setTimeout(() => {
-            this.updateTabContent({
-               uid: this.connection.uid,
-               tab: this.tab.uid,
-               type: 'query',
-               schema: this.selectedSchema,
-               content: val
-            });
-         }, 200);
-      },
-      isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });
-            setTimeout(() => {
-               if (this.$refs.queryEditor)
-                  this.$refs.queryEditor.editor.focus();
-            }, 0);
-         }
-      },
-      selectedSchema () {
-         this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });
-      }
-   },
-   created () {
-      this.query = this.tab.content;
-      this.selectedSchema = this.tab.schema || this.breadcrumbsSchema;
+const { saveHistory } = useHistoryStore();
+const { addNotification } = useNotificationsStore();
+const workspacesStore = useWorkspacesStore();
 
-      if (!this.databaseSchemas.includes(this.selectedSchema))
-         this.selectedSchema = null;
+const {
+   getWorkspace,
+   changeBreadcrumbs,
+   updateTabContent,
+   setUnsavedChanges
+} = workspacesStore;
 
-      window.addEventListener('keydown', this.onKey);
-      window.addEventListener('resize', this.onWindowResize);
-   },
-   mounted () {
-      const resizer = this.$refs.resizer;
+const queryEditor: Ref<Component & { editor: Ace.Editor; $el: HTMLElement }> = ref(null);
+const queryAreaFooter: Ref<HTMLDivElement> = ref(null);
+const resizer: Ref<HTMLDivElement> = ref(null);
+const query = ref('');
+const lastQuery = ref('');
+const isCancelling = ref(false);
+const showCancel = ref(false);
+const autocommit = ref(true);
+const results = ref([]);
+const selectedSchema = ref(null);
+const resultsCount = ref(0);
+const durationsCount = ref(0);
+const affectedCount = ref(null);
+const editorHeight = ref(200);
+const isHistoryOpen = ref(false);
+const debounceTimeout = ref(null);
 
-      resizer.addEventListener('mousedown', e => {
-         e.preventDefault();
+const workspace = computed(() => getWorkspace(props.connection.uid));
+const breadcrumbsSchema = computed(() => workspace.value.breadcrumbs.schema || null);
+const databaseSchemas = computed(() => {
+   return workspace.value.structure.reduce((acc, curr) => {
+      acc.push(curr.name);
+      return acc;
+   }, []);
+});
+const hasResults = computed(() => results.value.length && results.value[0].rows);
+const hasAffected = computed(() => affectedCount.value || (!resultsCount.value && affectedCount.value !== null));
 
-         window.addEventListener('mousemove', this.resize);
-         window.addEventListener('mouseup', this.stopResize);
+watch(query, (val) => {
+   clearTimeout(debounceTimeout.value);
+
+   debounceTimeout.value = setTimeout(() => {
+      updateTabContent({
+         uid: props.connection.uid,
+         tab: props.tab.uid,
+         type: 'query',
+         schema: selectedSchema.value,
+         content: val
       });
+   }, 200);
+});
 
-      if (this.tab.autorun)
-         this.runQuery(this.query);
-   },
-   beforeUnmount () {
-      window.removeEventListener('resize', this.onWindowResize);
-      window.removeEventListener('keydown', this.onKey);
+watch(() => props.isSelected, (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: selectedSchema.value, query: `Query #${props.tab.index}` });
+      setTimeout(() => {
+         if (queryEditor.value)
+            queryEditor.value.editor.focus();
+      }, 0);
+   }
+});
+
+watch(selectedSchema, () => {
+   changeBreadcrumbs({ schema: selectedSchema.value, query: `Query #${props.tab.index}` });
+});
+
+const runQuery = async (query: string) => {
+   if (!query || isQuering.value) return;
+   isQuering.value = true;
+   clearTabData();
+   queryTable.value.resetSort();
+
+   try { // Query Data
       const params = {
-         uid: this.connection.uid,
-         tabUid: this.tab.uid
+         uid: props.connection.uid,
+         schema: selectedSchema.value,
+         tabUid: props.tab.uid,
+         autocommit: autocommit.value,
+         query
       };
-      Schema.destroyConnectionToCommit(params);
-   },
-   methods: {
-      async runQuery (query) {
-         if (!query || this.isQuering) return;
-         this.isQuering = true;
-         this.clearTabData();
-         this.$refs.queryTable.resetSort();
 
-         try { // Query Data
-            const params = {
-               uid: this.connection.uid,
-               schema: this.selectedSchema,
-               tabUid: this.tab.uid,
-               autocommit: this.autocommit,
-               query
-            };
+      const { status, response } = await Schema.rawQuery(params);
 
-            const { status, response } = await Schema.rawQuery(params);
+      if (status === 'success') {
+         results.value = Array.isArray(response) ? response : [response];
+         resultsCount.value = results.value.reduce((acc, curr) => acc + (curr.rows ? curr.rows.length : 0), 0);
+         durationsCount.value = results.value.reduce((acc, curr) => acc + curr.duration, 0);
+         affectedCount.value = results.value
+            .filter(result => result.report !== null)
+            .reduce((acc, curr) => {
+               if (acc === null) acc = 0;
+               return acc + (curr.report ? curr.report.affectedRows : 0);
+            }, null);
 
-            if (status === 'success') {
-               this.results = Array.isArray(response) ? response : [response];
-               this.resultsCount = this.results.reduce((acc, curr) => acc + (curr.rows ? curr.rows.length : 0), 0);
-               this.durationsCount = this.results.reduce((acc, curr) => acc + curr.duration, 0);
-               this.affectedCount = this.results
-                  .filter(result => result.report !== null)
-                  .reduce((acc, curr) => {
-                     if (acc === null) acc = 0;
-                     return acc + (curr.report ? curr.report.affectedRows : 0);
-                  }, null);
-
-               this.saveHistory(params);
-               if (!this.autocommit)
-                  this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: true });
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isQuering = false;
-         this.lastQuery = query;
-      },
-      async killTabQuery () {
-         if (this.isCancelling) return;
-
-         this.isCancelling = true;
-
-         try {
-            const params = {
-               uid: this.connection.uid,
-               tabUid: this.tab.uid
-            };
-
-            await Schema.killTabQuery(params);
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isCancelling = false;
-      },
-      setCancelButtonVisibility (val) {
-         if (this.workspace.customizations.cancelQueries)
-            this.showCancel = val;
-      },
-      reloadTable () {
-         this.runQuery(this.lastQuery);
-      },
-      clearTabData () {
-         this.results = [];
-         this.resultsCount = 0;
-         this.durationsCount = 0;
-         this.affectedCount = null;
-      },
-      resize (e) {
-         const el = this.$refs.queryEditor.$el;
-         const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
-         const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
-         const maxHeight = window.innerHeight - 100 - queryFooterHeight;
-         let editorHeight = bottom - el.getBoundingClientRect().top;
-         if (editorHeight > maxHeight) editorHeight = maxHeight;
-         if (editorHeight < 50) editorHeight = 50;
-         this.editorHeight = editorHeight;
-      },
-      onWindowResize (e) {
-         const el = this.$refs.queryEditor.$el;
-         const queryFooterHeight = this.$refs.queryAreaFooter.clientHeight;
-         const bottom = e.pageY || this.$refs.resizer.getBoundingClientRect().bottom;
-         const maxHeight = window.innerHeight - 100 - queryFooterHeight;
-         const editorHeight = bottom - el.getBoundingClientRect().top;
-
-         if (editorHeight > maxHeight)
-            this.editorHeight = maxHeight;
-      },
-      stopResize () {
-         window.removeEventListener('mousemove', this.resize);
-         if (this.$refs.queryTable && this.results.length)
-            this.$refs.queryTable.resizeResults();
-
-         if (this.$refs.queryEditor)
-            this.$refs.queryEditor.editor.resize();
-      },
-      beautify () {
-         if (this.$refs.queryEditor) {
-            let language = 'sql';
-
-            switch (this.workspace.client) {
-               case 'mysql':
-                  language = 'mysql';
-                  break;
-               case 'maria':
-                  language = 'mariadb';
-                  break;
-               case 'pg':
-                  language = 'postgresql';
-                  break;
-            }
-
-            const formattedQuery = format(this.query, {
-               language,
-               uppercase: true
-            });
-            this.$refs.queryEditor.editor.session.setValue(formattedQuery);
-         }
-      },
-      openHistoryModal () {
-         this.isHistoryOpen = true;
-      },
-      selectQuery (sql) {
-         if (this.$refs.queryEditor)
-            this.$refs.queryEditor.editor.session.setValue(sql);
-
-         this.isHistoryOpen = false;
-      },
-      clear () {
-         if (this.$refs.queryEditor)
-            this.$refs.queryEditor.editor.session.setValue('');
-         this.clearTabData();
-      },
-      downloadTable (format) {
-         this.$refs.queryTable.downloadTable(format, `${this.tab.type}-${this.tab.index}`);
-      },
-      async commitTab () {
-         this.isQuering = true;
-         try {
-            const params = {
-               uid: this.connection.uid,
-               tabUid: this.tab.uid
-            };
-
-            await Schema.commitTab(params);
-            this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: false });
-            this.addNotification({ status: 'success', message: this.$t('message.actionSuccessful', { action: 'COMMIT' }) });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isQuering = false;
-      },
-      async rollbackTab () {
-         this.isQuering = true;
-         try {
-            const params = {
-               uid: this.connection.uid,
-               tabUid: this.tab.uid
-            };
-
-            await Schema.rollbackTab(params);
-            this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: false });
-            this.addNotification({ status: 'success', message: this.$t('message.actionSuccessful', { action: 'ROLLBACK' }) });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isQuering = false;
+         saveHistory(params);
+         if (!autocommit.value)
+            setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: true });
       }
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   isQuering.value = false;
+   lastQuery.value = query;
+};
+
+const killTabQuery = async () => {
+   if (isCancelling.value) return;
+
+   isCancelling.value = true;
+
+   try {
+      const params = {
+         uid: props.connection.uid,
+         tabUid: props.tab.uid
+      };
+
+      await Schema.killTabQuery(params);
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   isCancelling.value = false;
+};
+
+const setCancelButtonVisibility = (val: boolean) => {
+   if (workspace.value.customizations.cancelQueries)
+      showCancel.value = val;
+};
+
+const clearTabData = () => {
+   results.value = [];
+   resultsCount.value = 0;
+   durationsCount.value = 0;
+   affectedCount.value = null;
+};
+
+const resize = (e: MouseEvent) => {
+   const el = queryEditor.value.$el;
+   const queryFooterHeight = queryAreaFooter.value.clientHeight;
+   const bottom = e.pageY || resizer.value.getBoundingClientRect().bottom;
+   const maxHeight = window.innerHeight - 100 - queryFooterHeight;
+   let localEditorHeight = bottom - el.getBoundingClientRect().top;
+   if (localEditorHeight > maxHeight) localEditorHeight = maxHeight;
+   if (localEditorHeight < 50) localEditorHeight = 50;
+   editorHeight.value = localEditorHeight;
+};
+
+const onWindowResize = (e: MouseEvent) => {
+   const el = queryEditor.value.$el;
+   const queryFooterHeight = queryAreaFooter.value.clientHeight;
+   const bottom = e.pageY || resizer.value.getBoundingClientRect().bottom;
+   const maxHeight = window.innerHeight - 100 - queryFooterHeight;
+   const localEditorHeight = bottom - el.getBoundingClientRect().top;
+
+   if (localEditorHeight > maxHeight)
+      editorHeight.value = maxHeight;
+};
+
+const stopResize = () => {
+   window.removeEventListener('mousemove', resize);
+   if (queryTable.value && results.value.length)
+      queryTable.value.resizeResults();
+
+   if (queryEditor.value)
+      queryEditor.value.editor.resize();
+};
+
+const beautify = () => {
+   if (queryEditor.value) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let language: any = 'sql';
+
+      switch (workspace.value.client) {
+         case 'mysql':
+            language = 'mysql';
+            break;
+         case 'maria':
+            language = 'mariadb';
+            break;
+         case 'pg':
+            language = 'postgresql';
+            break;
+      }
+
+      const formattedQuery = format(query.value, {
+         language,
+         uppercase: true
+      });
+      queryEditor.value.editor.session.setValue(formattedQuery);
    }
 };
+
+const openHistoryModal = () => {
+   isHistoryOpen.value = true;
+};
+
+const selectQuery = (sql: string) => {
+   if (queryEditor.value)
+      queryEditor.value.editor.session.setValue(sql);
+
+   isHistoryOpen.value = false;
+};
+
+const clear = () => {
+   if (queryEditor.value)
+      queryEditor.value.editor.session.setValue('');
+   clearTabData();
+};
+
+const downloadTable = (format: 'csv' | 'json') => {
+   queryTable.value.downloadTable(format, `${props.tab.type}-${props.tab.index}`);
+};
+
+const commitTab = async () => {
+   isQuering.value = true;
+   try {
+      const params = {
+         uid: props.connection.uid,
+         tabUid: props.tab.uid
+      };
+
+      await Schema.commitTab(params);
+      setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: false });
+      addNotification({ status: 'success', message: t('message.actionSuccessful', { action: 'COMMIT' }) });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   isQuering.value = false;
+};
+
+const rollbackTab = async () => {
+   isQuering.value = true;
+   try {
+      const params = {
+         uid: props.connection.uid,
+         tabUid: props.tab.uid
+      };
+
+      await Schema.rollbackTab(params);
+      setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: false });
+      addNotification({ status: 'success', message: t('message.actionSuccessful', { action: 'ROLLBACK' }) });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   isQuering.value = false;
+};
+
+query.value = props.tab.content as string;
+selectedSchema.value = props.tab.schema || breadcrumbsSchema.value;
+
+if (!databaseSchemas.value.includes(selectedSchema.value))
+   selectedSchema.value = null;
+
+// window.addEventListener('keydown', onKey);
+window.addEventListener('resize', onWindowResize);
+
+onMounted(() => {
+   const localResizer = resizer.value;
+
+   localResizer.addEventListener('mousedown', (e: MouseEvent) => {
+      e.preventDefault();
+
+      window.addEventListener('mousemove', resize);
+      window.addEventListener('mouseup', stopResize);
+   });
+
+   if (props.tab.autorun)
+      runQuery(query.value);
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('resize', onWindowResize);
+   // window.removeEventListener('keydown', onKey);
+   const params = {
+      uid: props.connection.uid,
+      tabUid: props.tab.uid
+   };
+   Schema.destroyConnectionToCommit(params);
+});
 </script>
 
 <style lang="scss">

src/renderer/components/WorkspaceTabQueryEmptyState.vue

@@ -3,25 +3,25 @@
       <div class="columns">
          <div class="column col-16 text-right">
             <div class="mb-4">
-               {{ $t('message.runQuery') }}
+               {{ t('message.runQuery') }}
             </div>
             <div v-if="customizations.cancelQueries" class="mb-4">
-               {{ $t('message.killQuery') }}
+               {{ t('message.killQuery') }}
             </div>
             <div class="mb-4">
-               {{ $t('word.format') }}
+               {{ t('word.format') }}
             </div>
             <div class="mb-4">
-               {{ $t('word.clear') }}
+               {{ t('word.clear') }}
             </div>
             <div class="mb-4">
-               {{ $t('word.history') }}
+               {{ t('word.history') }}
             </div>
             <div class="mb-4">
-               {{ $t('message.openNewTab') }}
+               {{ t('message.openNewTab') }}
             </div>
             <div class="mb-4">
-               {{ $t('message.closeTab') }}
+               {{ t('message.closeTab') }}
             </div>
          </div>
          <div class="column col-16">
@@ -51,13 +51,14 @@
    </div>
 </template>
 
-<script>
-export default {
-   name: 'WorkspaceTabQueryEmptyState',
-   props: {
-      customizations: Object
-   }
-};
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+defineProps({
+   customizations: Object
+});
 </script>
 
 <style scoped>

src/renderer/components/WorkspaceTabQueryTableContext.vue

@@ -4,7 +4,7 @@
       @close-context="closeContext"
    >
       <div v-if="selectedRows.length === 1" class="context-element">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ $t('word.copy') }}</span>
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('word.copy') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
          <div class="context-submenu">
             <div
@@ -13,7 +13,7 @@
                @click="copyCell"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ $tc('word.cell', 1) }}
+                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
                </span>
             </div>
             <div
@@ -22,7 +22,7 @@
                @click="copyRow"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ $tc('word.row', 1) }}
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', 1) }}
                </span>
             </div>
          </div>
@@ -33,7 +33,7 @@
          @click="setNull"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-null text-light pr-1" /> {{ $t('message.setNull') }}
+            <i class="mdi mdi-18px mdi-null text-light pr-1" /> {{ t('message.setNull') }}
          </span>
       </div>
       <div
@@ -42,45 +42,46 @@
          @click="showConfirmModal"
       >
          <span class="d-flex">
-            <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+            <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('message.deleteRows', selectedRows.length) }}
          </span>
       </div>
    </BaseContextMenu>
 </template>
 
-<script>
-import BaseContextMenu from '@/components/BaseContextMenu';
+<script setup lang="ts">
+import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import { useI18n } from 'vue-i18n';
 
-export default {
-   name: 'WorkspaceTabQueryTableContext',
-   components: {
-      BaseContextMenu
-   },
-   props: {
-      contextEvent: MouseEvent,
-      selectedRows: Array,
-      selectedCell: Object
-   },
-   emits: ['show-delete-modal', 'close-context', 'set-null', 'copy-cell', 'copy-row'],
-   methods: {
-      showConfirmModal () {
-         this.$emit('show-delete-modal');
-      },
-      closeContext () {
-         this.$emit('close-context');
-      },
-      setNull () {
-         this.$emit('set-null');
-         this.closeContext();
-      },
-      copyCell () {
-         this.$emit('copy-cell');
-         this.closeContext();
-      },
-      copyRow () {
-         this.$emit('copy-row');
-         this.closeContext();
-      }
-   }
+const { t } = useI18n();
+
+defineProps({
+   contextEvent: MouseEvent,
+   selectedRows: Array,
+   selectedCell: Object
+});
+
+const emit = defineEmits(['show-delete-modal', 'close-context', 'set-null', 'copy-cell', 'copy-row']);
+
+const showConfirmModal = () => {
+   emit('show-delete-modal');
+};
+
+const closeContext = () => {
+   emit('close-context');
+};
+
+const setNull = () => {
+   emit('set-null');
+   closeContext();
+};
+
+const copyCell = () => {
+   emit('copy-cell');
+   closeContext();
+};
+
+const copyRow = () => {
+   emit('copy-row');
+   closeContext();
 };
 </script>

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -19,7 +19,7 @@
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
                @dblclick="editON(cKey)"
-            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length)) }}</span>
+            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length) as string) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
                v-model="editingContent"
@@ -68,14 +68,14 @@
       </div>
       <ConfirmModal
          v-if="isTextareaEditor"
-         :confirm-text="$t('word.update')"
+         :confirm-text="t('word.update')"
          size="medium"
          @confirm="editOFF"
          @hide="hideEditorModal"
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
          <template #body>
@@ -90,7 +90,7 @@
                <div class="editor-field-info p-vcentered">
                   <div class="d-flex p-vcentered">
                      <label for="editorMode" class="form-label mr-2">
-                        <b>{{ $t('word.content') }}</b>:
+                        <b>{{ t('word.content') }}</b>:
                      </label>
                      <BaseSelect
                         id="editorMode"
@@ -104,10 +104,10 @@
                   <div class="d-flex">
                      <div class="p-vcentered">
                         <div class="mr-4">
-                           <b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
+                           <b>{{ t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
                         </div>
                         <div v-if="editingType">
-                           <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                           <b>{{ t('word.type') }}</b>: {{ editingType.toUpperCase() }}
                         </div>
                      </div>
                   </div>
@@ -132,14 +132,14 @@
       </ConfirmModal>
       <ConfirmModal
          v-if="isBlobEditor"
-         :confirm-text="$t('word.update')"
+         :confirm-text="t('word.update')"
          @confirm="editOFF"
          @hide="hideEditorModal"
       >
          <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-playlist-edit mr-1" />
-               <span class="cut-text">{{ $t('word.edit') }} "{{ editingField }}"</span>
+               <span class="cut-text">{{ t('word.edit') }} "{{ editingField }}"</span>
             </div>
          </template>
          <template #body>
@@ -156,11 +156,11 @@
                      </div>
                      <div class="editor-buttons mt-2">
                         <button class="btn btn-link btn-sm" @click="downloadFile">
-                           <span>{{ $t('word.download') }}</span>
+                           <span>{{ t('word.download') }}</span>
                            <i class="mdi mdi-24px mdi-download ml-1" />
                         </button>
                         <button class="btn btn-link btn-sm" @click="prepareToDelete">
-                           <span>{{ $t('word.delete') }}</span>
+                           <span>{{ t('word.delete') }}</span>
                            <i class="mdi mdi-24px mdi-delete-forever ml-1" />
                         </button>
                      </div>
@@ -168,19 +168,19 @@
                </Transition>
                <div class="editor-field-info">
                   <div>
-                     <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
-                     <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
+                     <b>{{ t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
+                     <b>{{ t('word.mimeType') }}</b>: {{ contentInfo.mime }}
                   </div>
                   <div v-if="editingType">
-                     <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                     <b>{{ t('word.type') }}</b>: {{ editingType.toUpperCase() }}
                   </div>
                </div>
                <div class="mt-3">
-                  <label>{{ $t('message.uploadFile') }}</label>
+                  <label>{{ t('message.uploadFile') }}</label>
                   <input
                      class="form-input"
                      type="file"
-                     @change="filesChange($event)"
+                     @change="filesChange($event as any)"
                   >
                </div>
             </div>
@@ -189,13 +189,15 @@
    </div>
 </template>
 
-<script>
-import moment from 'moment';
+<script setup lang="ts">
+import { computed, onBeforeUnmount, Prop, ref, Ref, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import * as moment from 'moment';
 import { ModelOperations } from '@vscode/vscode-languagedetection';
 import { mimeFromHex } from 'common/libs/mimeFromHex';
 import { formatBytes } from 'common/libs/formatBytes';
 import { bufferToBase64 } from 'common/libs/bufferToBase64';
-import hexToBinary from 'common/libs/hexToBinary';
+import hexToBinary, { HexChar } from 'common/libs/hexToBinary';
 import {
    TEXT,
    LONG_TEXT,
@@ -213,413 +215,423 @@ import {
    SPATIAL,
    IS_MULTI_SPATIAL
 } from 'common/fieldTypes';
-import ConfirmModal from '@/components/BaseConfirmModal';
-import TextEditor from '@/components/BaseTextEditor';
-import BaseMap from '@/components/BaseMap';
-import ForeignKeySelect from '@/components/ForeignKeySelect';
+import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import TextEditor from '@/components/BaseTextEditor.vue';
+import BaseMap from '@/components/BaseMap.vue';
+import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { QueryForeign, TableField } from 'common/interfaces/antares';
 
-export default {
-   name: 'WorkspaceTabQueryTableRow',
-   components: {
-      ConfirmModal,
-      TextEditor,
-      ForeignKeySelect,
-      BaseMap,
-      BaseSelect
-   },
-   props: {
-      row: Object,
-      fields: Object,
-      keyUsage: Array,
-      itemHeight: Number,
-      elementType: { type: String, default: 'table' },
-      selected: { type: Boolean, default: false },
-      selectedCell: { type: String, default: null }
-   },
-   emits: ['update-field', 'select-row', 'contextmenu', 'start-editing', 'stop-editing'],
-   data () {
-      return {
-         isInlineEditor: {},
-         isTextareaEditor: false,
-         isBlobEditor: false,
-         isMapModal: false,
-         isMultiSpatial: false,
-         willBeDeleted: false,
-         originalContent: null,
-         editingContent: null,
-         editingType: null,
-         editingField: null,
-         editingLength: null,
-         editorMode: 'text',
-         contentInfo: {
-            ext: '',
-            mime: '',
-            size: null
-         },
-         fileToUpload: null,
-         availableLanguages: [
-            { name: 'TEXT', slug: 'text', id: 'text' },
-            { name: 'HTML', slug: 'html', id: 'html' },
-            { name: 'XML', slug: 'xml', id: 'xml' },
-            { name: 'JSON', slug: 'json', id: 'json' },
-            { name: 'SVG', slug: 'svg', id: 'svg' },
-            { name: 'INI', slug: 'ini', id: 'ini' },
-            { name: 'MARKDOWN', slug: 'markdown', id: 'md' },
-            { name: 'YAML', slug: 'yaml', id: 'yaml' }
-         ]
-      };
-   },
-   computed: {
-      inputProps () {
-         if ([...TEXT, ...LONG_TEXT].includes(this.editingType))
-            return { type: 'text', mask: false };
+const { t } = useI18n();
 
-         if ([...NUMBER, ...FLOAT].includes(this.editingType))
-            return { type: 'number', mask: false };
+const props = defineProps({
+   row: Object,
+   fields: Object as Prop<{
+      [key: string]: TableField;
+   }>,
+   keyUsage: Array as Prop<QueryForeign[]>,
+   itemHeight: Number,
+   elementType: { type: String, default: 'table' },
+   selected: { type: Boolean, default: false },
+   selectedCell: { type: String, default: null }
+});
 
-         if (TIME.includes(this.editingType)) {
-            let timeMask = '##:##:##';
-            const precision = this.fields[this.editingField].length;
+const emit = defineEmits(['update-field', 'select-row', 'contextmenu', 'start-editing', 'stop-editing']);
 
-            for (let i = 0; i < precision; i++)
-               timeMask += i === 0 ? '.#' : '#';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isInlineEditor: Ref<any> = ref({});
+const isTextareaEditor = ref(false);
+const isBlobEditor = ref(false);
+const isMapModal = ref(false);
+const isMultiSpatial = ref(false);
+const willBeDeleted = ref(false);
+const originalContent = ref(null);
+const editingContent = ref(null);
+const editingType = ref(null);
+const editingField = ref(null);
+const editingLength = ref(null);
+const editorMode = ref('text');
+const contentInfo = ref({
+   ext: '',
+   mime: '',
+   size: null
+});
+const fileToUpload = ref(null);
+const availableLanguages = ref([
+   { name: 'TEXT', slug: 'text', id: 'text' },
+   { name: 'HTML', slug: 'html', id: 'html' },
+   { name: 'XML', slug: 'xml', id: 'xml' },
+   { name: 'JSON', slug: 'json', id: 'json' },
+   { name: 'SVG', slug: 'svg', id: 'svg' },
+   { name: 'INI', slug: 'ini', id: 'ini' },
+   { name: 'MARKDOWN', slug: 'markdown', id: 'md' },
+   { name: 'YAML', slug: 'yaml', id: 'yaml' }
+]);
 
-            if (HAS_TIMEZONE.includes(this.editingType))
-               timeMask += 'X##';
+const inputProps = computed(() => {
+   if ([...TEXT, ...LONG_TEXT].includes(editingType.value))
+      return { type: 'text', mask: false };
 
-            return { type: 'text', mask: timeMask };
-         }
+   if ([...NUMBER, ...FLOAT].includes(editingType.value))
+      return { type: 'number', mask: false };
 
-         if (DATE.includes(this.editingType))
-            return { type: 'text', mask: '####-##-##' };
+   if (TIME.includes(editingType.value)) {
+      let timeMask = '##:##:##';
+      const precision = props.fields[editingField.value].length;
 
-         if (DATETIME.includes(this.editingType)) {
-            let datetimeMask = '####-##-## ##:##:##';
-            const precision = this.fields[this.editingField].length;
+      for (let i = 0; i < precision; i++)
+         timeMask += i === 0 ? '.#' : '#';
 
-            for (let i = 0; i < precision; i++)
-               datetimeMask += i === 0 ? '.#' : '#';
+      if (HAS_TIMEZONE.includes(editingType.value))
+         timeMask += 'X##';
 
-            if (HAS_TIMEZONE.includes(this.editingType))
-               datetimeMask += 'X##';
+      return { type: 'text', mask: timeMask };
+   }
 
-            return { type: 'text', mask: datetimeMask };
-         }
+   if (DATE.includes(editingType.value))
+      return { type: 'text', mask: '####-##-##' };
 
-         if (BLOB.includes(this.editingType))
-            return { type: 'file', mask: false };
+   if (DATETIME.includes(editingType.value)) {
+      let datetimeMask = '####-##-## ##:##:##';
+      const precision = props.fields[editingField.value].length;
 
-         if (BOOLEAN.includes(this.editingType))
-            return { type: 'boolean', mask: false };
+      for (let i = 0; i < precision; i++)
+         datetimeMask += i === 0 ? '.#' : '#';
 
-         if (SPATIAL.includes(this.editingType))
-            return { type: 'map', mask: false };
+      if (HAS_TIMEZONE.includes(editingType.value))
+         datetimeMask += 'X##';
 
-         return { type: 'text', mask: false };
-      },
-      isImage () {
-         return ['gif', 'jpg', 'png', 'bmp', 'ico', 'tif'].includes(this.contentInfo.ext);
-      },
-      foreignKeys () {
-         return this.keyUsage.map(key => key.field);
-      },
-      isEditable () {
-         if (this.elementType === 'view') return false;
+      return { type: 'text', mask: datetimeMask };
+   }
 
-         if (this.fields) {
-            const nElements = Object.keys(this.fields).reduce((acc, curr) => {
-               acc.add(this.fields[curr].table);
-               acc.add(this.fields[curr].schema);
-               return acc;
-            }, new Set([]));
+   if (BLOB.includes(editingType.value))
+      return { type: 'file', mask: false };
 
-            if (nElements.size > 2) return false;
+   if (BOOLEAN.includes(editingType.value))
+      return { type: 'boolean', mask: false };
 
-            return !!(this.fields[Object.keys(this.fields)[0]].schema && this.fields[Object.keys(this.fields)[0]].table);
-         }
+   if (SPATIAL.includes(editingType.value))
+      return { type: 'map', mask: false };
 
-         return false;
-      },
-      isBaseSelectField () {
-         return this.isForeignKey(this.editingField) || this.inputProps.type === 'boolean' || this.enumArray;
-      },
-      enumArray () {
-         if (this.fields[this.editingField] && this.fields[this.editingField].enumValues)
-            return this.fields[this.editingField].enumValues.replaceAll('\'', '').split(',');
-         return false;
-      }
-   },
-   watch: {
-      fields () {
-         Object.keys(this.fields).forEach(field => {
-            this.isInlineEditor[field.name] = false;
-         });
-      },
-      isTextareaEditor (val) {
-         if (val) {
-            const modelOperations = new ModelOperations();
-            (async () => {
-               const detected = await modelOperations.runModel(this.editingContent);
-               const filteredLanguages = detected.filter(dLang =>
-                  this.availableLanguages.some(aLang => aLang.id === dLang.languageId) &&
-                     dLang.confidence > 0.1
-               );
+   return { type: 'text', mask: false };
+});
 
-               if (filteredLanguages.length)
-                  this.editorMode = this.availableLanguages.find(lang => lang.id === filteredLanguages[0].languageId).slug;
-            })();
-         }
-      },
-      selected (isSelected) {
-         if (isSelected)
-            window.addEventListener('keydown', this.onKey);
+const isImage = computed(() => {
+   return ['gif', 'jpg', 'png', 'bmp', 'ico', 'tif'].includes(contentInfo.value.ext);
+});
 
-         else {
-            this.editOFF();
-            window.removeEventListener('keydown', this.onKey);
-         }
-      }
-   },
-   beforeUnmount () {
-      if (this.selected)
-         window.removeEventListener('keydown', this.onKey);
-   },
-   methods: {
-      isForeignKey (key) {
-         if (key.includes('.'))
-            key = key.split('.').pop();
+const foreignKeys = computed(() => {
+   return props.keyUsage.map(key => key.field);
+});
 
-         return this.foreignKeys.includes(key);
-      },
-      isNull (value) {
-         return value === null ? ' is-null' : '';
-      },
-      typeClass (type) {
-         if (type)
-            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-         return '';
-      },
-      bufferToBase64 (val) {
-         return bufferToBase64(val);
-      },
-      editON (field) {
-         if (!this.isEditable || this.editingType === 'none') return;
+const isEditable = computed(() => {
+   if (props.elementType === 'view') return false;
 
-         const content = this.row[field];
-         const type = this.fields[field].type.toUpperCase();
-         this.originalContent = this.typeFormat(content, type, this.fields[field].length);
-         this.editingType = type;
-         this.editingField = field;
-         this.editingLength = this.fields[field].length;
+   if (props.fields) {
+      const nElements = Object.keys(props.fields).reduce((acc, curr) => {
+         acc.add(props.fields[curr].table);
+         acc.add(props.fields[curr].schema);
+         return acc;
+      }, new Set([]));
 
-         if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
-            this.isTextareaEditor = true;
-            this.editingContent = this.typeFormat(content, type);
-            this.$emit('start-editing', field);
-            return;
-         }
+      if (nElements.size > 2) return false;
 
-         if (SPATIAL.includes(type)) {
-            if (content) {
-               this.isMultiSpatial = IS_MULTI_SPATIAL.includes(type);
-               this.isMapModal = true;
-               this.editingContent = this.typeFormat(content, type);
-            }
-            this.$emit('start-editing', field);
-            return;
-         }
+      return !!(props.fields[Object.keys(props.fields)[0]].schema && props.fields[Object.keys(props.fields)[0]].table);
+   }
 
-         if (BLOB.includes(type)) {
-            this.isBlobEditor = true;
-            this.editingContent = content || '';
-            this.fileToUpload = null;
-            this.willBeDeleted = false;
+   return false;
+});
 
-            if (content !== null) {
-               const buff = Buffer.from(this.editingContent);
-               if (buff.length) {
-                  const hex = buff.toString('hex').substring(0, 8).toUpperCase();
-                  const { ext, mime } = mimeFromHex(hex);
-                  this.contentInfo = {
-                     ext,
-                     mime,
-                     size: this.editingContent.length
-                  };
-               }
-            }
-            this.$emit('start-editing', field);
-            return;
-         }
+const isBaseSelectField = computed(() => {
+   return isForeignKey(editingField.value) || inputProps.value.type === 'boolean' || enumArray.value;
+});
 
-         // Inline editable fields
-         this.editingContent = this.originalContent;
+const enumArray = computed(() => {
+   if (props.fields[editingField.value] && props.fields[editingField.value].enumValues)
+      return props.fields[editingField.value].enumValues.replaceAll('\'', '').split(',');
+   return false;
+});
 
-         const obj = { [field]: true };
-         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+const isForeignKey = (key: string) => {
+   if (key) {
+      if (key.includes('.'))
+         key = key.split('.').pop();
 
-         this.$nextTick(() => { // Focus on input
-            document.querySelector('.editable-field').focus();
-         });
-
-         this.$emit('start-editing', field);
-      },
-      editOFF () {
-         if (!this.editingField) return;
-
-         this.isInlineEditor[this.editingField] = false;
-         let content;
-         if (!BLOB.includes(this.editingType)) {
-            if ([...DATETIME, ...TIME].includes(this.editingType)) {
-               if (this.editingContent.substring(this.editingContent.length - 1) === '.')
-                  this.editingContent = this.editingContent.slice(0, -1);
-            }
-
-            // If not changed
-            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) {
-               this.editingType = null;
-               this.editingField = null;
-               this.$emit('stop-editing', this.editingField);
-               return;
-            }
-
-            content = this.editingContent;
-         }
-         else { // Handle file upload
-            if (this.willBeDeleted) {
-               content = '';
-               this.willBeDeleted = false;
-            }
-            else {
-               if (!this.fileToUpload) return;
-               content = this.fileToUpload.file.path;
-            }
-         }
-
-         this.$emit('update-field', {
-            field: this.fields[this.editingField].name,
-            type: this.editingType,
-            content
-         });
-
-         this.$emit('stop-editing', this.editingField);
-
-         this.editingType = null;
-         this.editingField = null;
-      },
-      hideEditorModal () {
-         this.isTextareaEditor = false;
-         this.isBlobEditor = false;
-         this.isMapModal = false;
-         this.isMultiSpatial = false;
-         this.$emit('stop-editing', this.editingField);
-      },
-      downloadFile () {
-         const downloadLink = document.createElement('a');
-
-         downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
-         downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
-         document.body.appendChild(downloadLink);
-
-         downloadLink.click();
-         downloadLink.remove();
-      },
-      filesChange (event) {
-         const { files } = event.target;
-         if (!files.length) return;
-
-         this.fileToUpload = { name: files[0].name, file: files[0] };
-         this.willBeDeleted = false;
-      },
-      prepareToDelete () {
-         this.editingContent = '';
-         this.contentInfo = {
-            ext: '',
-            mime: '',
-            size: null
-         };
-         this.willBeDeleted = true;
-      },
-      selectRow (event, field) {
-         this.$emit('select-row', event, this.row, field);
-      },
-      getKeyUsage (keyName) {
-         if (keyName.includes('.'))
-            return this.keyUsage.find(key => key.field === keyName.split('.').pop());
-         return this.keyUsage.find(key => key.field === keyName);
-      },
-      openContext (event, payload) {
-         payload.field = this.fields[payload.orgField].name;// Ensures field name only
-         payload.isEditable = this.isEditable;
-         this.$emit('contextmenu', event, payload);
-      },
-      onKey (e) {
-         e.stopPropagation();
-
-         if (!this.editingField && e.key === 'Enter')
-            return this.editON(this.selectedCell);
-
-         if (this.editingField && e.key === 'Enter' && !this.isBaseSelectField)
-            return this.editOFF();
-
-         if (this.editingField && e.key === 'Escape') {
-            this.isInlineEditor[this.editingField] = false;
-            this.editingField = null;
-            this.$emit('stop-editing', this.editingField);
-         }
-      },
-      formatBytes,
-      cutText (val) {
-         if (typeof val !== 'string') return val;
-         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
-      },
-      typeFormat (val, type, precision) {
-         if (!val) return val;
-
-         type = type.toUpperCase();
-
-         if (DATE.includes(type))
-            return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
-
-         if (DATETIME.includes(type)) {
-            if (typeof val === 'string')
-               return val;
-
-            let datePrecision = '';
-            for (let i = 0; i < precision; i++)
-               datePrecision += i === 0 ? '.S' : 'S';
-
-            return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
-         }
-
-         if (BLOB.includes(type)) {
-            const buff = Buffer.from(val);
-            if (!buff.length) return '';
-
-            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
-            return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
-         }
-
-         if (BIT.includes(type)) {
-            if (typeof val === 'number') val = [val];
-            const hex = Buffer.from(val).toString('hex');
-            const bitString = hexToBinary(hex);
-            return parseInt(bitString).toString().padStart(precision, '0');
-         }
-
-         if (ARRAY.includes(type)) {
-            if (Array.isArray(val))
-               return JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
-            return val;
-         }
-
-         if (SPATIAL.includes(type))
-            return val;
-
-         return typeof val === 'object' ? JSON.stringify(val) : val;
-      }
+      return foreignKeys.value.includes(key);
    }
 };
+
+const isNull = (value: null | string | number) => {
+   return value === null ? ' is-null' : '';
+};
+
+const typeClass = (type: string) => {
+   if (type)
+      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+   return '';
+};
+
+const editON = async (field: string) => {
+   if (!isEditable.value || editingType.value === 'none') return;
+
+   const content = props.row[field];
+   const type = props.fields[field].type.toUpperCase();
+   originalContent.value = typeFormat(content, type, props.fields[field].length);
+   editingType.value = type;
+   editingField.value = field;
+   editingLength.value = props.fields[field].length;
+
+   if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
+      isTextareaEditor.value = true;
+      editingContent.value = typeFormat(content, type);
+      emit('start-editing', field);
+      return;
+   }
+
+   if (SPATIAL.includes(type)) {
+      if (content) {
+         isMultiSpatial.value = IS_MULTI_SPATIAL.includes(type);
+         isMapModal.value = true;
+         editingContent.value = typeFormat(content, type);
+      }
+      emit('start-editing', field);
+      return;
+   }
+
+   if (BLOB.includes(type)) {
+      isBlobEditor.value = true;
+      editingContent.value = content || '';
+      fileToUpload.value = null;
+      willBeDeleted.value = false;
+
+      if (content !== null) {
+         const buff = Buffer.from(editingContent.value);
+         if (buff.length) {
+            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+            const { ext, mime } = mimeFromHex(hex);
+            contentInfo.value = {
+               ext,
+               mime,
+               size: editingContent.value.length
+            };
+         }
+      }
+      emit('start-editing', field);
+      return;
+   }
+
+   // Inline editable fields
+   editingContent.value = originalContent.value;
+
+   const obj = { [field]: true };
+   isInlineEditor.value = { ...isInlineEditor.value, ...obj };
+   nextTick(() => {
+      document.querySelector<HTMLInputElement>('.editable-field').focus();
+   });
+
+   emit('start-editing', field);
+};
+
+const editOFF = () => {
+   if (!editingField.value) return;
+
+   isInlineEditor.value[editingField.value] = false;
+   let content;
+   if (!BLOB.includes(editingType.value)) {
+      if ([...DATETIME, ...TIME].includes(editingType.value)) {
+         if (editingContent.value.substring(editingContent.value.length - 1) === '.')
+            editingContent.value = editingContent.value.slice(0, -1);
+      }
+
+      // If not changed
+      if (editingContent.value === typeFormat(originalContent.value, editingType.value, editingLength.value)) {
+         editingType.value = null;
+         editingField.value = null;
+         emit('stop-editing', editingField.value);
+         return;
+      }
+
+      content = editingContent.value;
+   }
+   else { // Handle file upload
+      if (willBeDeleted.value) {
+         content = '';
+         willBeDeleted.value = false;
+      }
+      else {
+         if (!fileToUpload.value) return;
+         content = fileToUpload.value.file.path;
+      }
+   }
+
+   emit('update-field', {
+      field: props.fields[editingField.value].name,
+      type: editingType.value,
+      content
+   });
+
+   emit('stop-editing', editingField.value);
+
+   editingType.value = null;
+   editingField.value = null;
+};
+
+const hideEditorModal = () => {
+   isTextareaEditor.value = false;
+   isBlobEditor.value = false;
+   isMapModal.value = false;
+   isMultiSpatial.value = false;
+   emit('stop-editing', editingField.value);
+};
+
+const downloadFile = () => {
+   const downloadLink = document.createElement('a');
+
+   downloadLink.href = `data:${contentInfo.value.mime};base64, ${bufferToBase64(editingContent.value)}`;
+   downloadLink.setAttribute('download', `${editingField.value}.${contentInfo.value.ext}`);
+   document.body.appendChild(downloadLink);
+
+   downloadLink.click();
+   downloadLink.remove();
+};
+
+const filesChange = (event: Event & {target: {files: {name: string}[]}}) => {
+   const { files } = event.target;
+   if (!files.length) return;
+
+   fileToUpload.value = { name: files[0].name, file: files[0] };
+   willBeDeleted.value = false;
+};
+
+const prepareToDelete = () => {
+   editingContent.value = '';
+   contentInfo.value = {
+      ext: '',
+      mime: '',
+      size: null
+   };
+   willBeDeleted.value = true;
+};
+
+const selectRow = (event: Event, field: string) => {
+   emit('select-row', event, props.row, field);
+};
+
+const getKeyUsage = (keyName: string) => {
+   if (keyName.includes('.'))
+      return props.keyUsage.find(key => key.field === keyName.split('.').pop());
+   return props.keyUsage.find(key => key.field === keyName);
+};
+
+const openContext = (event: MouseEvent, payload: { id: string; field?: string; orgField: string; isEditable?: boolean }) => {
+   payload.field = props.fields[payload.orgField].name;// Ensures field name only
+   payload.isEditable = isEditable.value;
+   emit('contextmenu', event, payload);
+};
+
+const onKey = (e: KeyboardEvent) => {
+   e.stopPropagation();
+
+   if (!editingField.value && e.key === 'Enter')
+      return editON(props.selectedCell);
+
+   if (editingField.value && e.key === 'Enter' && !isBaseSelectField.value)
+      return editOFF();
+
+   if (editingField.value && e.key === 'Escape') {
+      isInlineEditor.value[editingField.value] = false;
+      editingField.value = null;
+      emit('stop-editing', editingField.value);
+   }
+};
+
+const cutText = (val: string) => {
+   if (typeof val !== 'string') return val;
+   return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
+};
+
+const typeFormat = (val: string | number | Date | number[], type: string, precision?: number | false) => {
+   if (!val) return val;
+
+   type = type.toUpperCase();
+
+   if (DATE.includes(type))
+      return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
+
+   if (DATETIME.includes(type)) {
+      if (typeof val === 'string')
+         return val;
+
+      let datePrecision = '';
+      for (let i = 0; i < precision; i++)
+         datePrecision += i === 0 ? '.S' : 'S';
+
+      return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
+   }
+
+   if (BLOB.includes(type)) {
+      const buff = Buffer.from(val as string);
+      if (!buff.length) return '';
+
+      const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+      return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
+   }
+
+   if (BIT.includes(type)) {
+      if (typeof val === 'number') val = [val] as number[];
+      const hex = Buffer.from(val as number[]).toString('hex') as unknown as HexChar[];
+      const bitString = hexToBinary(hex);
+      return parseInt(bitString).toString().padStart(Number(precision), '0');
+   }
+
+   if (ARRAY.includes(type)) {
+      if (Array.isArray(val))
+         return JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
+      return val;
+   }
+
+   if (SPATIAL.includes(type))
+      return val;
+
+   return typeof val === 'object' ? JSON.stringify(val) : val;
+};
+
+watch(() => props.fields, () => {
+   Object.keys(props.fields).forEach(field => {
+      isInlineEditor.value[field] = false;
+   });
+});
+
+watch(isTextareaEditor, (val) => {
+   if (val) {
+      const modelOperations = new ModelOperations();
+      (async () => {
+         const detected = await modelOperations.runModel(editingContent.value);
+         const filteredLanguages = detected.filter(dLang =>
+            availableLanguages.value.some(aLang => aLang.id === dLang.languageId) &&
+               dLang.confidence > 0.1
+         );
+
+         if (filteredLanguages.length)
+            editorMode.value = availableLanguages.value.find(lang => lang.id === filteredLanguages[0].languageId).slug;
+      })();
+   }
+});
+
+watch(() => props.selected, (isSelected) => {
+   if (isSelected)
+      window.addEventListener('keydown', onKey);
+
+   else {
+      editOFF();
+      window.removeEventListener('keydown', onKey);
+   }
+});
+
+onBeforeUnmount(() => {
+   if (props.selected)
+      window.removeEventListener('keydown', onKey);
+});
 </script>
 
 <style lang="scss">

src/renderer/components/WorkspaceTabTable.vue

@@ -8,7 +8,7 @@
                      <button
                         class="btn btn-dark btn-sm mr-0 pr-1"
                         :class="{'loading':isQuering}"
-                        :title="`${$t('word.refresh')} (F5)`"
+                        :title="`${t('word.refresh')} (F5)`"
                         @click="reloadTable"
                      >
                         <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
@@ -18,7 +18,7 @@
                         <i class="mdi mdi-24px mdi-menu-down" />
                      </div>
                      <div class="menu px-3">
-                        <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
+                        <span>{{ t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
                         <input
                            v-model="autorefreshTimer"
                            class="slider no-border"
@@ -46,7 +46,7 @@
                            {{ page }}
                         </div>
                         <div class="menu px-3">
-                           <span>{{ $t('message.pageNumber') }}</span>
+                           <span>{{ t('message.pageNumber') }}</span>
                            <input
                               ref="pageSelect"
                               v-model="pageProxy"
@@ -72,7 +72,7 @@
 
                <button
                   class="btn btn-sm"
-                  :title="`${$t('word.filter')} (CTRL+F)`"
+                  :title="`${t('word.filter')} (CTRL+F)`"
                   :class="{'btn-primary': isSearch, 'btn-dark': !isSearch}"
                   @click="isSearch = !isSearch"
                >
@@ -95,7 +95,7 @@
                      tabindex="0"
                   >
                      <i class="mdi mdi-24px mdi-file-export mr-1" />
-                     <span>{{ $t('word.export') }}</span>
+                     <span>{{ t('word.export') }}</span>
                      <i class="mdi mdi-24px mdi-menu-down" />
                   </button>
                   <ul class="menu text-left">
@@ -112,22 +112,22 @@
                <div
                   v-if="results.length"
                   class="d-flex"
-                  :title="$t('message.queryDuration')"
+                  :title="t('message.queryDuration')"
                >
                   <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ results[0].duration / 1000 }}s</b>
                </div>
                <div v-if="results.length && results[0].rows">
-                  {{ $t('word.results') }}: <b>{{ localeString(results[0].rows.length) }}</b>
+                  {{ t('word.results') }}: <b>{{ localeString(results[0].rows.length) }}</b>
                </div>
                <div v-if="hasApproximately || (page > 1 && approximateCount)">
-                  {{ $t('word.total') }}: <b
-                     :title="!customizations.tableRealCount ? $t('word.approximately') : ''"
+                  {{ t('word.total') }}: <b
+                     :title="!customizations.tableRealCount ? t('word.approximately') : ''"
                   >
                      <span v-if="!customizations.tableRealCount">≈</span>
                      {{ localeString(approximateCount) }}
                   </b>
                </div>
-               <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>
@@ -167,291 +167,288 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, onBeforeUnmount, Prop, ref, Ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 import Tables from '@/ipc-api/Tables';
+import { useResultTables } from '@/composables/useResultTables';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import BaseLoader from '@/components/BaseLoader';
-import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
-import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters';
-import ModalFakerRows from '@/components/ModalFakerRows';
-import tableTabs from '@/mixins/tableTabs';
+import BaseLoader from '@/components/BaseLoader.vue';
+import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';
+import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters.vue';
+import ModalFakerRows from '@/components/ModalFakerRows.vue';
+import { ConnectionParams } from 'common/interfaces/antares';
+import { TableFilterClausole } from 'common/interfaces/tableApis';
 
-export default {
-   name: 'WorkspaceTabTable',
-   components: {
-      BaseLoader,
-      WorkspaceTabQueryTable,
-      WorkspaceTabTableFilters,
-      ModalFakerRows
-   },
-   mixins: [tableTabs],
-   props: {
-      connection: Object,
-      isSelected: Boolean,
-      table: String,
-      schema: String,
-      elementType: String
-   },
-   setup () {
-      const { addNotification } = useNotificationsStore();
-      const settingsStore = useSettingsStore();
-      const workspacesStore = useWorkspacesStore();
+const { t } = useI18n();
 
-      const { dataTabLimit: limit } = storeToRefs(settingsStore);
-      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+const props = defineProps({
+   connection: Object as Prop<ConnectionParams>,
+   isSelected: Boolean,
+   table: String,
+   schema: String,
+   elementType: String
+});
 
-      const { changeBreadcrumbs, getWorkspace } = workspacesStore;
+const reloadTable = () => getTableData();
 
-      return {
-         addNotification,
-         limit,
-         selectedWorkspace,
-         changeBreadcrumbs,
-         getWorkspace
-      };
-   },
-   data () {
-      return {
-         tabUid: 'data', // ???
-         isQuering: false,
-         isPageMenu: false,
-         isSearch: false,
-         results: [],
-         lastTable: null,
-         isFakerModal: false,
-         autorefreshTimer: 0,
-         refreshInterval: null,
-         sortParams: {},
-         filters: [],
-         page: 1,
-         pageProxy: 1,
-         approximateCount: 0
-      };
-   },
-   computed: {
-      workspace () {
-         return this.getWorkspace(this.connection.uid);
-      },
-      customizations () {
-         return this.workspace.customizations;
-      },
-      isTable () {
-         return !!this.workspace.breadcrumbs.table;
-      },
-      fields () {
-         return this.results.length ? this.results[0].fields : [];
-      },
-      keyUsage () {
-         return this.results.length ? this.results[0].keys : [];
-      },
-      tableInfo () {
-         try {
-            return this.workspace.structure.find(db => db.name === this.schema).tables.find(table => table.name === this.table);
-         }
-         catch (err) {
-            return { rows: 0 };
-         }
-      },
-      hasApproximately () {
-         return this.results.length &&
-            this.results[0].rows &&
-            this.results[0].rows.length === this.limit &&
-            this.results[0].rows.length < this.approximateCount;
-      }
-   },
-   watch: {
-      schema () {
-         if (this.isSelected) {
-            this.page = 1;
-            this.approximateCount = 0;
-            this.sortParams = {};
-            this.getTableData();
-            this.lastTable = this.table;
-            this.$refs.queryTable.resetSort();
-         }
-      },
-      table () {
-         if (this.isSelected) {
-            this.page = 1;
-            this.approximateCount = 0;
-            this.sortParams = {};
-            this.getTableData();
-            this.lastTable = this.table;
-            this.$refs.queryTable.resetSort();
-         }
-      },
-      page (val, oldVal) {
-         if (val && val > 0 && val !== oldVal) {
-            this.pageProxy = this.page;
-            this.getTableData();
-         }
-      },
-      isSelected (val) {
-         if (val) {
-            this.changeBreadcrumbs({ schema: this.schema, [this.elementType]: this.table });
+const {
+   queryTable,
+   isQuering,
+   updateField,
+   deleteSelected
+} = useResultTables(props.connection.uid, reloadTable);
 
-            if (this.lastTable !== this.table)
-               this.getTableData();
-         }
-      },
-      isSearch (val) {
-         if (this.filters.length > 0 && !val) {
-            this.filters = [];
-            this.getTableData();
-         }
-         this.resizeScroller();
-      }
-   },
-   created () {
-      this.getTableData();
-      window.addEventListener('keydown', this.onKey);
-   },
-   beforeUnmount () {
-      window.removeEventListener('keydown', this.onKey);
-      clearInterval(this.refreshInterval);
-   },
-   methods: {
-      async getTableData () {
-         if (!this.table || !this.isSelected) return;
-         this.isQuering = true;
+const { addNotification } = useNotificationsStore();
+const settingsStore = useSettingsStore();
+const workspacesStore = useWorkspacesStore();
 
-         // if table changes clear cached values
-         if (this.lastTable !== this.table)
-            this.results = [];
+const { dataTabLimit: limit } = storeToRefs(settingsStore);
 
-         this.lastTable = this.table;
+const { changeBreadcrumbs, getWorkspace } = workspacesStore;
 
-         const params = {
-            uid: this.connection.uid,
-            schema: this.schema,
-            table: this.table,
-            limit: this.limit,
-            page: this.page,
-            sortParams: { ...this.sortParams },
-            where: [...this.filters] || []
-         };
+const pageSelect: Ref<HTMLInputElement> = ref(null);
+const tabUid = ref('data');
+const isPageMenu = ref(false);
+const isSearch = ref(false);
+const results = ref([]);
+const lastTable = ref(null);
+const isFakerModal = ref(false);
+const autorefreshTimer = ref(0);
+const refreshInterval = ref(null);
+const sortParams = ref({} as { field: string; dir: 'asc' | 'desc'});
+const filters = ref([]);
+const page = ref(1);
+const pageProxy = ref(1);
+const approximateCount = ref(0);
 
-         try { // Table data
-            const { status, response } = await Tables.getTableData(params);
+const workspace = computed(() => {
+   return getWorkspace(props.connection.uid);
+});
 
-            if (status === 'success')
-               this.results = [response];
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+const customizations = computed(() => {
+   return workspace.value.customizations;
+});
 
-         if (this.results.length && this.results[0].rows.length === this.limit) {
-            try { // Table approximate count
-               const { status, response } = await Tables.getTableApproximateCount(params);
+const isTable = computed(() => {
+   return !!workspace.value.breadcrumbs.table;
+});
 
-               if (status === 'success')
-                  this.approximateCount = response;
-               else
-                  this.addNotification({ status: 'error', message: response });
-            }
-            catch (err) {
-               this.addNotification({ status: 'error', message: err.stack });
-            }
-         }
+const fields = computed(() => {
+   return results.value.length ? results.value[0].fields : [];
+});
 
-         this.isQuering = false;
-      },
-      getTable () {
-         return this.table;
-      },
-      reloadTable () {
-         this.getTableData();
-      },
-      hardSort (sortParams) {
-         this.sortParams = sortParams;
-         this.getTableData();
-      },
-      openPageMenu () {
-         if (this.isQuering || (this.results.length && this.results[0].rows.length < this.limit && this.page === 1)) return;
+const keyUsage = computed(() => {
+   return results.value.length ? results.value[0].keys : [];
+});
 
-         this.isPageMenu = true;
-         if (this.isPageMenu)
-            setTimeout(() => this.$refs.pageSelect.focus(), 20);
-      },
-      setPageNumber () {
-         this.isPageMenu = false;
+const getTableData = async () => {
+   if (!props.table || !props.isSelected) return;
+   isQuering.value = true;
 
-         if (this.pageProxy > 0)
-            this.page = this.pageProxy;
+   // if table changes clear cached values
+   if (lastTable.value !== props.table)
+      results.value = [];
+
+   lastTable.value = props.table;
+
+   const params = {
+      uid: props.connection.uid,
+      schema: props.schema,
+      table: props.table,
+      limit: limit.value,
+      page: page.value,
+      sortParams: { ...sortParams.value },
+      where: [...filters.value] || []
+   };
+
+   try { // Table data
+      const { status, response } = await Tables.getTableData(params);
+
+      if (status === 'success')
+         results.value = [response];
+      else
+         addNotification({ status: 'error', message: response });
+   }
+   catch (err) {
+      addNotification({ status: 'error', message: err.stack });
+   }
+
+   if (results.value.length && results.value[0].rows.length === limit.value) {
+      try { // Table approximate count
+         const { status, response } = await Tables.getTableApproximateCount(params);
+
+         if (status === 'success')
+            approximateCount.value = response;
          else
-            this.pageProxy = this.page;
-      },
-      pageChange (direction) {
-         if (this.isQuering) return;
+            addNotification({ status: 'error', message: response as unknown as string });
+      }
+      catch (err) {
+         addNotification({ status: 'error', message: err.stack });
+      }
+   }
 
-         if (direction === 'next' && (this.results.length && this.results[0].rows.length === this.limit)) {
-            if (!this.page)
-               this.page = 2;
-            else
-               this.page++;
-         }
-         else if (direction === 'prev' && this.page > 1)
-            this.page--;
-      },
-      showFakerModal () {
-         if (this.isQuering) return;
-         this.isFakerModal = true;
-      },
-      hideFakerModal () {
-         this.isFakerModal = false;
-      },
-      onKey (e) {
-         if (this.isSelected) {
-            e.stopPropagation();
-            if (e.key === 'F5')
-               this.reloadTable();
+   isQuering.value = false;
+};
 
-            if (e.ctrlKey || e.metaKey) {
-               if (e.key === 'ArrowRight')
-                  this.pageChange('next');
-               if (e.key === 'ArrowLeft')
-                  this.pageChange('prev');
-               if (e.keyCode === 70) // f
-                  this.isSearch = !this.isSearch;
-            }
-         }
-      },
-      setRefreshInterval () {
-         if (this.refreshInterval)
-            clearInterval(this.refreshInterval);
+const hardSort = (params: { field: string; dir: 'asc' | 'desc'}) => {
+   sortParams.value = params;
+   getTableData();
+};
 
-         if (+this.autorefreshTimer) {
-            this.refreshInterval = setInterval(() => {
-               if (!this.isQuering)
-                  this.reloadTable();
-            }, this.autorefreshTimer * 1000);
-         }
-      },
-      downloadTable (format) {
-         this.$refs.queryTable.downloadTable(format, this.table);
-      },
-      onFilterChange (clausoles) {
-         this.resizeScroller();
-         if (clausoles.length === 0)
-            this.isSearch = false;
-      },
-      resizeScroller () {
-         setTimeout(() => this.$refs.queryTable.refreshScroller(), 1);
-      },
-      updateFilters (clausoles) {
-         this.filters = clausoles;
-         this.getTableData();
-      },
-      localeString (val) {
-         if (val !== null)
-            return val.toLocaleString();
+const openPageMenu = () => {
+   if (isQuering.value || (results.value.length && results.value[0].rows.length < limit.value && page.value === 1)) return;
+
+   isPageMenu.value = true;
+   if (isPageMenu.value)
+      setTimeout(() => pageSelect.value.focus(), 20);
+};
+
+const setPageNumber = () => {
+   isPageMenu.value = false;
+
+   if (pageProxy.value > 0)
+      page.value = pageProxy.value;
+   else
+      pageProxy.value = page.value;
+};
+
+const pageChange = (direction: 'prev' | 'next') => {
+   if (isQuering.value) return;
+
+   if (direction === 'next' && (results.value.length && results.value[0].rows.length === limit.value)) {
+      if (!page.value)
+         page.value = 2;
+      else
+         page.value++;
+   }
+   else if (direction === 'prev' && page.value > 1)
+      page.value--;
+};
+
+const showFakerModal = () => {
+   if (isQuering.value) return;
+   isFakerModal.value = true;
+};
+
+const hideFakerModal = () => {
+   isFakerModal.value = false;
+};
+
+const onKey = (e: KeyboardEvent) => {
+   if (props.isSelected) {
+      e.stopPropagation();
+      if (e.key === 'F5')
+         reloadTable();
+
+      if (e.ctrlKey || e.metaKey) {
+         if (e.key === 'ArrowRight')
+            pageChange('next');
+         if (e.key === 'ArrowLeft')
+            pageChange('prev');
+         if (e.key === 'f') // f
+            isSearch.value = !isSearch.value;
       }
    }
 };
+
+const setRefreshInterval = () => {
+   if (refreshInterval.value)
+      clearInterval(refreshInterval.value);
+
+   if (+autorefreshTimer.value) {
+      refreshInterval.value = setInterval(() => {
+         if (!isQuering.value)
+            reloadTable();
+      }, autorefreshTimer.value * 1000);
+   }
+};
+
+const downloadTable = (format: 'csv' | 'json') => {
+   queryTable.value.downloadTable(format, props.table);
+};
+
+const onFilterChange = (clausoles: TableFilterClausole[]) => {
+   resizeScroller();
+   if (clausoles.length === 0)
+      isSearch.value = false;
+};
+
+const resizeScroller = () => {
+   setTimeout(() => queryTable.value.refreshScroller(), 1);
+};
+
+const updateFilters = (clausoles: TableFilterClausole[]) => {
+   filters.value = clausoles;
+   getTableData();
+};
+
+const localeString = (val: number | null) => {
+   if (val !== null)
+      return val.toLocaleString();
+};
+
+const hasApproximately = computed(() => {
+   return results.value.length &&
+      results.value[0].rows &&
+      results.value[0].rows.length === limit.value &&
+      results.value[0].rows.length < approximateCount.value;
+});
+
+watch(() => props.schema, () => {
+   if (props.isSelected) {
+      page.value = 1;
+      approximateCount.value = 0;
+      sortParams.value = {} as { field: string; dir: 'asc' | 'desc'};
+      getTableData();
+      lastTable.value = props.table;
+      queryTable.value.resetSort();
+   }
+});
+
+watch(() => props.table, () => {
+   if (props.isSelected) {
+      page.value = 1;
+      approximateCount.value = 0;
+      sortParams.value = {} as { field: string; dir: 'asc' | 'desc'};
+      getTableData();
+      lastTable.value = props.table;
+      queryTable.value.resetSort();
+   }
+});
+
+watch(page, (val, oldVal) => {
+   if (val && val > 0 && val !== oldVal) {
+      pageProxy.value = page.value;
+      getTableData();
+   }
+});
+
+watch(() => props.isSelected, (val) => {
+   if (val) {
+      changeBreadcrumbs({ schema: props.schema, [props.elementType]: props.table });
+
+      if (lastTable.value !== props.table)
+         getTableData();
+   }
+});
+
+watch(isSearch, (val) => {
+   if (filters.value.length > 0 && !val) {
+      filters.value = [];
+      getTableData();
+   }
+   resizeScroller();
+});
+
+getTableData();
+window.addEventListener('keydown', onKey);
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+   clearInterval(refreshInterval.value);
+});
 </script>

src/renderer/components/WorkspaceTabTableFilters.vue

@@ -64,91 +64,85 @@
    </form>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, Prop, ref } from 'vue';
+import { ClientCode, TableField } from 'common/interfaces/antares';
 import customizations from 'common/customizations';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
 import BaseSelect from '@/components/BaseSelect.vue';
+import { TableFilterClausole } from 'common/interfaces/tableApis';
 
-export default {
-   components: {
-      BaseSelect
-   },
-   props: {
-      fields: Array,
-      connClient: String
-   },
-   emits: ['filter-change', 'filter'],
-   data () {
-      return {
-         rows: [],
-         operators: [
-            '=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'BETWEEN', 'IS NULL', 'IS NOT NULL'
-         ]
-      };
-   },
-   computed: {
-      customizations () {
-         return customizations[this.connClient];
-      }
-   },
-   created () {
-      this.addRow();
-   },
-   methods: {
-      addRow () {
-         this.rows.push({ active: true, field: this.fields[0].name, op: '=', value: '', value2: '' });
-         this.$emit('filter-change', this.rows);
-      },
-      removeRow (i) {
-         this.rows = this.rows.filter((_, idx) => idx !== i);
-         this.$emit('filter-change', this.rows);
-      },
-      doFilter () {
-         const clausoles = this.rows.filter(el => el.active).map(el => this.createClausole(el));
-         this.$emit('filter', clausoles);
-      },
-      createClausole (filter) {
-         const field = this.fields.find(field => field.name === filter.field);
-         const isNumeric = [...NUMBER, ...FLOAT].includes(field.type);
-         const { elementsWrapper: ew, stringsWrapper: sw } = this.customizations;
-         let value;
+const props = defineProps({
+   fields: Array as Prop<TableField[]>,
+   connClient: String as Prop<ClientCode>
+});
 
-         switch (filter.op) {
-            case '=':
-            case '!=':
-               value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
-               break;
-            case 'BETWEEN':
-               value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
-               value += ' AND ';
-               value += isNumeric ? filter.value2 : `${sw}${filter.value2}${sw}`;
-               break;
-            case 'IN':
-            case 'NOT IN':
-               value = filter.value.split(',').map(val => {
-                  val = val.trim();
-                  return isNumeric ? val : `${sw}${val}${sw}`;
-               }).join(',');
-               value = `(${filter.value})`;
-               break;
-            case 'IS NULL':
-            case 'IS NOT NULL':
-               value = '';
-               break;
-            case 'LIKE':
-               value = `${sw}%${filter.value}%${sw}`;
-               break;
-            default:
-               value = `${sw}${filter.value}${sw}`;
-         }
+const emit = defineEmits(['filter-change', 'filter']);
 
-         if (isNumeric && !value.length && !['IS NULL', 'IS NOT NULL'].includes(filter.op))
-            value = `${sw}${sw}`;
+const rows = ref([]);
+const operators = ref([
+   '=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'BETWEEN', 'IS NULL', 'IS NOT NULL'
+]);
 
-         return `${ew}${filter.field}${ew} ${filter.op} ${value}`;
-      }
-   }
+const clientCustomizations = computed(() => customizations[props.connClient]);
+
+const addRow = () => {
+   rows.value.push({ active: true, field: props.fields[0].name, op: '=', value: '', value2: '' });
+   emit('filter-change', rows.value);
 };
+
+const removeRow = (i: number) => {
+   rows.value = rows.value.filter((_, idx) => idx !== i);
+   emit('filter-change', rows.value);
+};
+
+const doFilter = () => {
+   const clausoles = rows.value.filter(el => el.active).map(el => createClausole(el));
+   emit('filter', clausoles);
+};
+
+const createClausole = (filter: TableFilterClausole) => {
+   const field = props.fields.find(field => field.name === filter.field);
+   const isNumeric = [...NUMBER, ...FLOAT].includes(field.type);
+   const { elementsWrapper: ew, stringsWrapper: sw } = clientCustomizations.value;
+   let value;
+
+   switch (filter.op) {
+      case '=':
+      case '!=':
+         value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
+         break;
+      case 'BETWEEN':
+         value = isNumeric ? filter.value : `${sw}${filter.value}${sw}`;
+         value += ' AND ';
+         value += isNumeric ? filter.value2 : `${sw}${filter.value2}${sw}`;
+         break;
+      case 'IN':
+      case 'NOT IN':
+         value = filter.value.split(',').map(val => {
+            val = val.trim();
+            return isNumeric ? val : `${sw}${val}${sw}`;
+         }).join(',');
+         value = `(${filter.value})`;
+         break;
+      case 'IS NULL':
+      case 'IS NOT NULL':
+         value = '';
+         break;
+      case 'LIKE':
+         value = `${sw}%${filter.value}%${sw}`;
+         break;
+      default:
+         value = `${sw}${filter.value}${sw}`;
+   }
+
+   if (isNumeric && !value.length && !['IS NULL', 'IS NOT NULL'].includes(filter.op))
+      value = `${sw}${sw}`;
+
+   return `${ew}${filter.field}${ew} ${filter.op} ${value}`;
+};
+
+addRow();
 </script>
 
 <style lang="scss">

src/renderer/composables/useResultTables.ts

@@ -1,12 +1,20 @@
-// TODO: unfinished
 import Tables from '@/ipc-api/Tables';
-import { ref } from 'vue';
+import { Component, Ref, ref } from 'vue';
+import { useNotificationsStore } from '@/stores/notifications';
+import { TableDeleteParams, TableUpdateParams } from 'common/interfaces/tableApis';
+const { addNotification } = useNotificationsStore();
 
-export default function useResultTables (uid, reloadTable, addNotification) {
-   const tableRef = ref(null);
+export function useResultTables (uid: string, reloadTable: () => void) {
+   const queryTable: Ref<Component & {
+      resetSort: () => void;
+      resizeResults: () => void;
+      refreshScroller: () => void;
+      downloadTable: (format: string, fileName: string) => void;
+      applyUpdate: (payload: TableUpdateParams) => void;
+   }> = ref(null);
    const isQuering = ref(false);
 
-   async function updateField (payload) {
+   async function updateField (payload: TableUpdateParams) {
       isQuering.value = true;
 
       const params = {
@@ -20,7 +28,7 @@ export default function useResultTables (uid, reloadTable, addNotification) {
             if (response.reload)// Needed for blob fields
                reloadTable();
             else
-               tableRef.value.applyUpdate(payload);
+               queryTable.value.applyUpdate(payload);
          }
          else
             addNotification({ status: 'error', message: response });
@@ -32,7 +40,7 @@ export default function useResultTables (uid, reloadTable, addNotification) {
       isQuering.value = false;
    }
 
-   async function deleteSelected (payload) {
+   async function deleteSelected (payload: TableDeleteParams) {
       isQuering.value = true;
 
       const params = {
@@ -56,7 +64,7 @@ export default function useResultTables (uid, reloadTable, addNotification) {
    }
 
    return {
-      tableRef,
+      queryTable,
       isQuering,
       updateField,
       deleteSelected

src/renderer/ipc-api/Functions.ts

@@ -15,7 +15,7 @@ export default class {
       return ipcRenderer.invoke('alter-function', unproxify(params));
    }
 
-   static alterTriggerFunction (params: {func: CreateFunctionParams & { uid: string }}): Promise<IpcResponse> {
+   static alterTriggerFunction (params: { uid: string; func: AlterFunctionParams }): Promise<IpcResponse> {
       return ipcRenderer.invoke('alter-trigger-function', unproxify(params));
    }
 

src/renderer/ipc-api/Routines.ts

@@ -11,7 +11,7 @@ export default class {
       return ipcRenderer.invoke('drop-routine', unproxify(params));
    }
 
-   static alterRoutine (params: { routine: AlterRoutineParams & { uid: string } }): Promise<IpcResponse> {
+   static alterRoutine (params: { uid: string; routine: AlterRoutineParams }): Promise<IpcResponse> {
       return ipcRenderer.invoke('alter-routine', unproxify(params));
    }
 

src/renderer/ipc-api/Schedulers.ts

@@ -1,9 +1,9 @@
 import { ipcRenderer } from 'electron';
 import { unproxify } from '../libs/unproxify';
-import { AlterEventParams, CreateEventParams, EventInfos, IpcResponse } from 'common/interfaces/antares';
+import { AlterEventParams, CreateEventParams, IpcResponse } from 'common/interfaces/antares';
 
 export default class {
-   static getSchedulerInformations (params: { uid: string; schema: string; scheduler: string}): Promise<IpcResponse<EventInfos>> {
+   static getSchedulerInformations (params: { uid: string; schema: string; scheduler: string}): Promise<IpcResponse> {
       return ipcRenderer.invoke('get-scheduler-informations', unproxify(params));
    }
 
@@ -11,7 +11,7 @@ export default class {
       return ipcRenderer.invoke('drop-scheduler', unproxify(params));
    }
 
-   static alterScheduler (params: { scheduler: AlterEventParams & { uid: string } }): Promise<IpcResponse> {
+   static alterScheduler (params: { uid: string; scheduler: AlterEventParams }): Promise<IpcResponse> {
       return ipcRenderer.invoke('alter-scheduler', unproxify(params));
    }
 

src/renderer/ipc-api/Schema.ts

@@ -82,7 +82,7 @@ export default class {
       return ipcRenderer.invoke('get-processes', uid);
    }
 
-   static killProcess (params: { uid: string; pid: string }): Promise<IpcResponse> {
+   static killProcess (params: { uid: string; pid: number }): Promise<IpcResponse> {
       return ipcRenderer.invoke('kill-process', unproxify(params));
    }
 

src/renderer/ipc-api/Tables.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import { unproxify } from '../libs/unproxify';
-import { AlterTableParams, CreateTableParams, IpcResponse, TableForeign, TableIndex, TableInfos } from 'common/interfaces/antares';
+import { AlterTableParams, CreateTableParams, IpcResponse } from 'common/interfaces/antares';
 
 export default class {
    static getTableColumns (params: {schema: string; table: string }): Promise<IpcResponse> {
@@ -27,15 +27,15 @@ export default class {
       return ipcRenderer.invoke('get-table-count', unproxify(params));
    }
 
-   static getTableOptions (params: { uid: string; schema: string; table: string }): Promise<IpcResponse<TableInfos>> {
+   static getTableOptions (params: { uid: string; schema: string; table: string }): Promise<IpcResponse> {
       return ipcRenderer.invoke('get-table-options', unproxify(params));
    }
 
-   static getTableIndexes (params: { uid: string; schema: string; table: string }): Promise<IpcResponse<TableIndex[]>> {
+   static getTableIndexes (params: { uid: string; schema: string; table: string }): Promise<IpcResponse> {
       return ipcRenderer.invoke('get-table-indexes', unproxify(params));
    }
 
-   static getKeyUsage (params: { uid: string; schema: string; table: string }): Promise<IpcResponse<TableForeign[]>> {
+   static getKeyUsage (params: { uid: string; schema: string; table: string }): Promise<IpcResponse> {
       return ipcRenderer.invoke('get-key-usage', unproxify(params));
    }
 

src/renderer/mixins/tableTabs.js

@@ -1,53 +0,0 @@
-import Tables from '@/ipc-api/Tables';
-
-export default {
-   methods: {
-      async updateField (payload) {
-         this.isQuering = true;
-
-         const params = {
-            uid: this.connection.uid,
-            ...payload
-         };
-
-         try {
-            const { status, response } = await Tables.updateTableCell(params);
-            if (status === 'success') {
-               if (response.reload)// Needed for blob fields
-                  this.reloadTable();
-               else
-                  this.$refs.queryTable.applyUpdate(payload);
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.isQuering = false;
-      },
-      async deleteSelected (payload) {
-         this.isQuering = true;
-
-         const params = {
-            uid: this.connection.uid,
-            ...payload
-         };
-
-         try {
-            const { status, response } = await Tables.deleteTableRows(params);
-            this.isQuering = false;
-
-            if (status === 'success')
-               this.reloadTable();
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-            this.isQuering = false;
-         }
-      }
-   }
-};