chore(release): 0.3.6

build(deps): bump @electron/remote from 1.2.2 to 2.0.1

CHANGELOG.md

@@ -2,6 +2,49 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.6](https://github.com/Fabio286/antares/compare/v0.3.5...v0.3.6) (2021-09-26)
+
+
+### Features
+
+* copy cell/row or kill connections on context menu from processes list ([85f625d](https://github.com/Fabio286/antares/commit/85f625daf7026815dac6223a29c5a6479830edbb))
+* processes list exportation ([13aa47c](https://github.com/Fabio286/antares/commit/13aa47cd4441aa47c93038dbd91d6a0e54f6a60c))
+* workspace query history ([3959333](https://github.com/Fabio286/antares/commit/39593336626e6d9f3d3b65d2a4081388900e37d6))
+
+
+### Bug Fixes
+
+* adding a connection default values not change when switching clients, closes [#101](https://github.com/Fabio286/antares/issues/101) ([d4888ad](https://github.com/Fabio286/antares/commit/d4888ad8fba3c8e8ec2d6b6d9a78bb212d83eeed))
+
+
+### Improvements
+
+* **core:** better communication of internal exceptions ([abd46aa](https://github.com/Fabio286/antares/commit/abd46aa32256f822e52eaac2fc698da378b8163f))
+
+### [0.3.5](https://github.com/Fabio286/antares/compare/v0.3.4...v0.3.5) (2021-09-13)
+
+
+### Bug Fixes
+
+* **MySQL:** connections stuck at startup if 5 or more tabs are restored ([95b60df](https://github.com/Fabio286/antares/commit/95b60df8fc634b96a4c2c5c48dc6b10848888978))
+
+### [0.3.4](https://github.com/Fabio286/antares/compare/v0.3.3...v0.3.4) (2021-09-12)
+
+
+### Features
+
+* new create function tabs ([0203f69](https://github.com/Fabio286/antares/commit/0203f69e95093d25a7ef3e66df1c70f76edcedf2))
+* new create routine tabs ([3fd26a0](https://github.com/Fabio286/antares/commit/3fd26a05238368ae375197c79d42162a5910bb07))
+* new create scheduler tabs ([3c5a69a](https://github.com/Fabio286/antares/commit/3c5a69adc9cecdc4b8f46097676005f2a60f06cf))
+* new create trigger function tabs ([09c07ac](https://github.com/Fabio286/antares/commit/09c07acd5c2a6ed2b75640dbb83e782ed432bc30))
+* new create trigger tabs ([e217d51](https://github.com/Fabio286/antares/commit/e217d5181b37ec6304151120b4a2aba9455c6a84))
+* start search when typing with focus on the left bar ([265ed66](https://github.com/Fabio286/antares/commit/265ed66d25d35be99ed0a6b1668dab9f246ed71e))
+
+
+### Bug Fixes
+
+* **UI:** context menu of tables cut if close to bottom edge ([21e3e79](https://github.com/Fabio286/antares/commit/21e3e79ddf9e292bcfc5881b8fa76a1dc58b207c))
+
 ### [0.3.3](https://github.com/Fabio286/antares/compare/v0.3.2...v0.3.3) (2021-08-22)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "A cross-platform easy to use SQL client.",
   "license": "MIT",
   "repository": "https://github.com/Fabio286/antares.git",
@@ -87,47 +87,47 @@
     }
   },
   "dependencies": {
-    "@electron/remote": "^1.2.1",
-    "@mdi/font": "^5.9.55",
+    "@electron/remote": "^2.0.1",
+    "@mdi/font": "^6.1.95",
     "ace-builds": "^1.4.12",
     "electron-log": "^4.4.1",
     "electron-store": "^8.0.0",
     "electron-updater": "^4.3.9",
     "faker": "^5.5.3",
-    "marked": "^3.0.0",
+    "marked": "^3.0.3",
     "moment": "^2.29.1",
     "mysql2": "^2.3.0",
     "pg": "^8.7.1",
     "pgsql-ast-parser": "^7.2.1",
-    "source-map-support": "^0.5.16",
+    "source-map-support": "^0.5.20",
     "spectre.css": "^0.5.9",
     "sql-formatter": "^4.0.2",
     "ssh2-promise": "^0.2.0",
     "v-mask": "^2.2.4",
-    "vue-i18n": "^8.24.4",
+    "vue-i18n": "^8.25.1",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.4",
     "cross-env": "^7.0.2",
-    "electron": "^13.1.8",
+    "electron": "^14.0.1",
     "electron-builder": "^22.11.7",
     "electron-devtools-installer": "^3.2.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-vue": "^2.4.0",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.15.1",
-    "sass": "^1.37.5",
+    "eslint-plugin-vue": "^7.17.0",
+    "sass": "^1.40.0",
     "sass-loader": "^10.2.0",
     "standard-version": "^9.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "stylelint-scss": "^3.20.1",
+    "stylelint-scss": "^3.21.0",
     "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.46.0"

src/main/index.js

@@ -3,9 +3,11 @@
 import { app, BrowserWindow, /* session, */ nativeImage, Menu } from 'electron';
 import * as path from 'path';
 import Store from 'electron-store';
+import * as remoteMain from '@electron/remote/main';
 
 import ipcHandlers from './ipc-handlers';
 
+// remoteMain.initialize();
 Store.initRenderer();
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -30,13 +32,14 @@ async function createMainWindow () {
          nodeIntegration: true,
          contextIsolation: false,
          'web-security': false,
-         enableRemoteModule: true,
          spellcheck: false
       },
       frame: false,
       backgroundColor: '#1d1d1d'
    });
 
+   remoteMain.enable(window.webContents);
+
    try {
       if (isDevelopment) { //
          await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
@@ -97,7 +100,16 @@ else {
    app.on('ready', async () => {
       mainWindow = await createMainWindow();
       Menu.setApplicationMenu(null);
+
       if (isDevelopment)
          mainWindow.webContents.openDevTools();
+
+      process.on('uncaughtException', error => {
+         mainWindow.webContents.send('unhandled-exception', error);
+      });
+
+      process.on('unhandledRejection', error => {
+         mainWindow.webContents.send('unhandled-exception', error);
+      });
    });
 }

src/main/ipc-handlers/schema.js

@@ -112,6 +112,17 @@ export default connections => {
       }
    });
 
+   ipcMain.handle('kill-process', async (event, { uid, pid }) => {
+      try {
+         const result = await connections[uid].killProcess(pid);
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
    ipcMain.handle('use-schema', async (event, { uid, schema }) => {
       if (!schema) return;
 

src/main/libs/clients/MySQLClient.js

@@ -955,10 +955,12 @@ export class MySQLClient extends AntaresCore {
     * @memberof MySQLClient
     */
    async createFunction (params) {
-      const parameters = params.parameters.reduce((acc, curr) => {
-         acc.push(`\`${curr.name}\` ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
-         return acc;
-      }, []).join(',');
+      const parameters = 'parameters' in params
+         ? params.parameters.reduce((acc, curr) => {
+            acc.push(`\`${curr.name}\` ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+            return acc;
+         }, []).join(',')
+         : '';
 
       const body = params.returns ? params.sql : 'BEGIN\n  RETURN 0;\nEND';
 
@@ -1174,6 +1176,10 @@ export class MySQLClient extends AntaresCore {
       });
    }
 
+   async killProcess (id) {
+      return await this.raw(`KILL ${id}`);
+   }
+
    /**
     * CREATE TABLE
     *

src/main/libs/clients/PostgreSQLClient.js

@@ -758,7 +758,7 @@ export class PostgreSQLClient extends AntaresCore {
    async createRoutine (routine) {
       const parameters = 'parameters' in routine
          ? routine.parameters.reduce((acc, curr) => {
-            acc.push(`${curr.context} ${curr.name} ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+            acc.push(`${curr.context} ${curr.name} ${curr.type}`);
             return acc;
          }, []).join(',')
          : '';
@@ -887,7 +887,7 @@ export class PostgreSQLClient extends AntaresCore {
    async createFunction (func) {
       const parameters = 'parameters' in func
          ? func.parameters.reduce((acc, curr) => {
-            acc.push(`${curr.context} ${curr.name || ''} ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+            acc.push(`${curr.context} ${curr.name || ''} ${curr.type}`);
             return acc;
          }, []).join(',')
          : '';
@@ -1029,6 +1029,10 @@ export class PostgreSQLClient extends AntaresCore {
       });
    }
 
+   async killProcess (id) {
+      return await this.raw(`SELECT pg_terminate_backend(${id})`);
+   }
+
    /**
     * CREATE TABLE
     *

src/renderer/components/ModalHistory.vue

@@ -0,0 +1,282 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0 pb-4">
+         <div class="modal-header pl-2">
+            <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>
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body p-0 workspace-query-results">
+            <div
+               v-if="history.length"
+               ref="searchForm"
+               class="form-group has-icon-right p-2 m-0"
+            >
+               <input
+                  v-model="searchTerm"
+                  class="form-input"
+                  type="text"
+                  :placeholder="$t('message.searchForQueries')"
+               >
+               <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
+               <i
+                  v-else
+                  class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
+                  @click="searchTerm = ''"
+               />
+            </div>
+            <div
+               v-if="history.length"
+               ref="tableWrapper"
+               class="vscroll px-1 "
+               :style="{'height': resultsSize+'px'}"
+            >
+               <div ref="table">
+                  <BaseVirtualScroll
+                     ref="resultTable"
+                     :items="filteredHistory"
+                     :item-height="66"
+                     :visible-height="resultsSize"
+                     :scroll-element="scrollElement"
+                  >
+                     <template slot-scope="{ items }">
+                        <div
+                           v-for="query in items"
+                           :key="query.uid"
+                           class="tile my-2"
+                           tabindex="0"
+                        >
+                           <div class="tile-icon">
+                              <i class="mdi mdi-code-tags pr-1" />
+                           </div>
+                           <div class="tile-content">
+                              <div class="tile-title">
+                                 <code
+                                    class="cut-text"
+                                    :title="query.sql"
+                                    v-html="highlightWord(query.sql)"
+                                 />
+                              </div>
+                              <div class="tile-bottom-content">
+                                 <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') }}
+                                    </button>
+                                    <button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
+                                       <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') }}
+                                    </button>
+                                 </div>
+                              </div>
+                           </div>
+                        </div>
+                     </template>
+                  </BaseVirtualScroll>
+               </div>
+            </div>
+            <div v-else class="empty">
+               <div class="empty-icon">
+                  <i class="mdi mdi-history mdi-48px" />
+               </div>
+               <p class="empty-title h5">
+                  {{ $t('message.thereIsNoQueriesYet') }}
+               </p>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mapGetters, mapActions } from 'vuex';
+import BaseVirtualScroll from '@/components/BaseVirtualScroll';
+
+export default {
+   name: 'ModalHistory',
+   components: {
+      BaseVirtualScroll
+   },
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         resultsSize: 1000,
+         isQuering: false,
+         scrollElement: null,
+         searchTermInterval: null,
+         searchTerm: '',
+         localSearchTerm: ''
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getConnectionName: 'connections/getConnectionName',
+         getHistoryByWorkspace: 'history/getHistoryByWorkspace'
+      }),
+      connectionName () {
+         return this.getConnectionName(this.connection.uid);
+      },
+      history () {
+         return this.getHistoryByWorkspace(this.connection.uid) || [];
+      },
+      filteredHistory () {
+         return this.history.filter(q => q.sql.toLowerCase().search(this.searchTerm.toLowerCase()) >= 0);
+      }
+   },
+   watch: {
+      searchTerm () {
+         clearTimeout(this.searchTermInterval);
+
+         this.searchTermInterval = setTimeout(() => {
+            this.localSearchTerm = this.searchTerm;
+         }, 200);
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey, { capture: true });
+   },
+   updated () {
+      if (this.$refs.table)
+         this.refreshScroller();
+
+      if (this.$refs.tableWrapper)
+         this.scrollElement = this.$refs.tableWrapper;
+   },
+   mounted () {
+      this.resizeResults();
+      window.addEventListener('resize', this.resizeResults);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey, { capture: true });
+      window.removeEventListener('resize', this.resizeResults);
+      clearInterval(this.refreshInterval);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         deleteQueryFromHistory: 'history/deleteQueryFromHistory'
+      }),
+      copyQuery (sql) {
+         navigator.clipboard.writeText(sql);
+      },
+      deleteQuery (query) {
+         this.deleteQueryFromHistory({
+            workspace: this.connection.uid,
+            ...query
+         });
+      },
+      resizeResults () {
+         if (this.$refs.resultTable) {
+            const el = this.$refs.tableWrapper.parentElement;
+
+            if (el)
+               this.resultsSize = el.offsetHeight - this.$refs.searchForm.offsetHeight;
+
+            this.$refs.resultTable.updateWindow();
+         }
+      },
+      formatDate (date) {
+         return moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
+      },
+      refreshScroller () {
+         this.resizeResults();
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      highlightWord (string) {
+         string = string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+
+         if (this.searchTerm) {
+            const regexp = new RegExp(`(${this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+            return string.replace(regexp, '<span class="text-primary text-bold">$1</span>');
+         }
+         else
+            return string;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.vscroll {
+  height: 1000px;
+  overflow: auto;
+  overflow-anchor: none;
+}
+
+.tile {
+  border-radius: $border-radius;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    .tile-content {
+      .tile-bottom-content {
+        .tile-history-buttons {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .tile-icon {
+    font-size: 1.2rem;
+    margin-left: 0.3rem;
+    width: 28px;
+  }
+
+  .tile-content {
+    padding: 0.3rem;
+    padding-left: 0.1rem;
+    max-width: calc(100% - 30px);
+
+    code {
+      max-width: 100%;
+      display: inline-block;
+      font-size: 100%;
+      // color: $primary-color;
+      opacity: 0.8;
+    }
+
+    .tile-subtitle {
+      opacity: 0.8;
+    }
+
+    .tile-bottom-content {
+      display: flex;
+      justify-content: space-between;
+
+      .tile-history-buttons {
+        opacity: 0;
+        transition: opacity 0.2s;
+
+        button {
+          font-size: 0.7rem;
+          height: 1rem;
+          line-height: 1rem;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+</style>

src/renderer/components/ModalNewFunction.vue

@@ -1,170 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewFunction"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewFunction') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localFunction.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="customizations.languages" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.language') }}
-               </label>
-               <div class="column">
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.definer" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localFunction.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.comment" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.comment') }}
-               </label>
-               <div class="column">
-                  <input
-                     v-model="localFunction.comment"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('message.sqlSecurity') }}
-               </label>
-               <div class="column">
-                  <select v-model="localFunction.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.functionDataAccess" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('message.dataAccess') }}
-               </label>
-               <div class="column">
-                  <select v-model="localFunction.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.functionDeterministic" class="form-group">
-               <div class="col-4" />
-               <div class="column">
-                  <label class="form-checkbox form-inline">
-                     <input v-model="localFunction.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
-                  </label>
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewFunction',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localFunction: {
-            definer: '',
-            sql: '',
-            parameters: [],
-            name: '',
-            comment: '',
-            language: null,
-            returns: null,
-            returnsLength: 10,
-            security: 'DEFINER',
-            deterministic: false,
-            dataAccess: 'CONTAINS SQL'
-         },
-         isOptionsChanging: false
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   mounted () {
-      if (this.customizations.languages)
-         this.localFunction.language = this.customizations.languages[0];
-
-      if (this.customizations.functionSql)
-         this.localFunction.sql = this.customizations.functionSql;
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewFunction () {
-         this.$emit('open-create-function-editor', this.localFunction);
-      }
-   }
-};
-</script>

src/renderer/components/ModalNewRoutine.vue

@@ -1,168 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewRoutine"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewRoutine') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localRoutine.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="customizations.languages" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.language') }}
-               </label>
-               <div class="column">
-                  <select v-model="localRoutine.language" class="form-select">
-                     <option v-for="language in customizations.languages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.definer" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localRoutine.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.comment" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.comment') }}
-               </label>
-               <div class="column">
-                  <input
-                     v-model="localRoutine.comment"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('message.sqlSecurity') }}
-               </label>
-               <div class="column">
-                  <select v-model="localRoutine.security" class="form-select">
-                     <option>DEFINER</option>
-                     <option>INVOKER</option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.comment" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('message.dataAccess') }}
-               </label>
-               <div class="column">
-                  <select v-model="localRoutine.dataAccess" class="form-select">
-                     <option>CONTAINS SQL</option>
-                     <option>NO SQL</option>
-                     <option>READS SQL DATA</option>
-                     <option>MODIFIES SQL DATA</option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.procedureDeterministic" class="form-group">
-               <div class="col-4" />
-               <div class="column">
-                  <label class="form-checkbox form-inline">
-                     <input v-model="localRoutine.deterministic" type="checkbox"><i class="form-icon" /> {{ $t('word.deterministic') }}
-                  </label>
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewRoutine',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localRoutine: {
-            definer: '',
-            sql: '',
-            parameters: [],
-            name: '',
-            comment: '',
-            language: null,
-            security: 'DEFINER',
-            deterministic: false,
-            dataAccess: 'CONTAINS SQL'
-         },
-         isOptionsChanging: false
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   mounted () {
-      if (this.customizations.languages)
-         this.localRoutine.language = this.customizations.languages[0];
-
-      if (this.customizations.procedureSql)
-         this.localRoutine.sql = this.customizations.procedureSql;
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewRoutine () {
-         this.$emit('open-create-routine-editor', this.localRoutine);
-      }
-   }
-};
-</script>

src/renderer/components/ModalNewScheduler.vue

@@ -1,109 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewTrigger"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewScheduler') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localScheduler.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localScheduler.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.comment') }}
-               </label>
-               <div class="column">
-                  <input
-                     v-model="localScheduler.comment"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewScheduler',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localScheduler: {
-            definer: '',
-            sql: 'BEGIN\r\n\r\nEND',
-            name: '',
-            comment: '',
-            execution: 'EVERY',
-            every: ['1', 'DAY'],
-            preserve: true,
-            state: 'DISABLE'
-         }
-      };
-   },
-   mounted () {
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewTrigger () {
-         this.$emit('open-create-scheduler-editor', this.localScheduler);
-      }
-   }
-};
-</script>

src/renderer/components/ModalNewTrigger.vue

@@ -1,183 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewTrigger"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewTrigger') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localTrigger.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="customizations.definer" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localTrigger.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.table') }}
-               </label>
-               <div class="column">
-                  <select v-model="localTrigger.table" class="form-select">
-                     <option v-for="table in schemaTables" :key="table.name">
-                        {{ table.name }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.event') }}
-               </label>
-               <div class="column">
-                  <div class="input-group">
-                     <select v-model="localTrigger.activation" class="form-select">
-                        <option>BEFORE</option>
-                        <option>AFTER</option>
-                     </select>
-                     <select
-                        v-if="!customizations.triggerMultipleEvents"
-                        v-model="localTrigger.event"
-                        class="form-select"
-                     >
-                        <option v-for="event in Object.keys(localEvents)" :key="event">
-                           {{ event }}
-                        </option>
-                     </select>
-                     <div v-if="customizations.triggerMultipleEvents" class="px-4">
-                        <label
-                           v-for="event in Object.keys(localEvents)"
-                           :key="event"
-                           class="form-checkbox form-inline"
-                           @change.prevent="changeEvents(event)"
-                        >
-                           <input :checked="localEvents[event]" type="checkbox"><i class="form-icon" /> {{ event }}
-                        </label>
-                     </div>
-                  </div>
-               </div>
-            </div>
-         </form>
-         <div v-if="customizations.triggerStatementInCreation" class="workspace-query-results column col-12 mt-2">
-            <label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
-            <QueryEditor
-               ref="queryEditor"
-               :value.sync="localTrigger.sql"
-               :workspace="workspace"
-               :schema="schema"
-               :height="editorHeight"
-            />
-         </div>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-import QueryEditor from '@/components/QueryEditor';
-
-export default {
-   name: 'ModalNewTrigger',
-   components: {
-      ConfirmModal,
-      QueryEditor
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localTrigger: {
-            definer: '',
-            sql: '',
-            name: '',
-            table: '',
-            activation: 'BEFORE',
-            event: 'INSERT'
-         },
-         isOptionsChanging: false,
-         localEvents: { INSERT: false, UPDATE: false, DELETE: false },
-         editorHeight: 150
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
-
-         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   created () {
-      this.localTrigger.table = this.schemaTables.length ? this.schemaTables[0].name : '';
-      this.localTrigger.sql = this.customizations.triggerSql;
-   },
-   mounted () {
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewTrigger () {
-         this.$emit('open-create-trigger-editor', this.localTrigger);
-      },
-      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);
-            }
-         }
-      }
-   }
-};
-</script>

src/renderer/components/ModalNewTriggerFunction.vue

@@ -1,132 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewFunction"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewFunction') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localFunction.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div v-if="customizations.languages" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.language') }}
-               </label>
-               <div class="column">
-                  <select v-model="localFunction.language" class="form-select">
-                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
-                        {{ language }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.definer" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localFunction.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div v-if="customizations.comment" class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.comment') }}
-               </label>
-               <div class="column">
-                  <input
-                     v-model="localFunction.comment"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewTriggerFunction',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localFunction: {
-            definer: '',
-            sql: '',
-            name: '',
-            comment: '',
-            language: null
-         },
-         isOptionsChanging: false
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
-      customizations () {
-         return this.workspace.customizations;
-      }
-   },
-   mounted () {
-      if (this.customizations.triggerFunctionlanguages)
-         this.localFunction.language = this.customizations.triggerFunctionlanguages[0];
-
-      if (this.customizations.triggerFunctionSql)
-         this.localFunction.sql = this.customizations.triggerFunctionSql;
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewFunction () {
-         this.$emit('open-create-function-editor', this.localFunction);
-      }
-   }
-};
-</script>

src/renderer/components/ModalProcessesList.vue

@@ -1,5 +1,15 @@
 <template>
    <div class="modal active">
+      <ModalProcessesListContext
+         v-if="isContext"
+         :context-event="contextEvent"
+         :selected-row="selectedRow"
+         :selected-cell="selectedCell"
+         @copy-cell="copyCell"
+         @copy-row="copyRow"
+         @kill-process="killProcess"
+         @close-context="closeContext"
+      />
       <a class="modal-overlay" @click.stop="closeModal" />
       <div class="modal-container p-0 pb-4">
          <div class="modal-header pl-2">
@@ -12,34 +22,55 @@
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
          </div>
          <div class="processes-toolbar py-2 px-4">
-            <div class="dropdown">
-               <div class="btn-group">
-                  <button
-                     class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
-                     :class="{'loading':isQuering}"
-                     title="F5"
-                     @click="getProcessesList"
-                  >
-                     <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
-                     <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
-                     <span>{{ $t('word.refresh') }}</span>
-                  </button>
-                  <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
-                     <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>
-                     <input
-                        v-model="autorefreshTimer"
-                        class="slider no-border"
-                        type="range"
-                        min="0"
-                        max="15"
-                        step="0.5"
-                        @change="setRefreshInterval"
+            <div class="workspace-query-buttons">
+               <div class="dropdown pr-1">
+                  <div class="btn-group">
+                     <button
+                        class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
+                        :class="{'loading':isQuering}"
+                        title="F5"
+                        @click="getProcessesList"
                      >
+                        <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
+                        <i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
+                        <span>{{ $t('word.refresh') }}</span>
+                     </button>
+                     <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                        <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>
+                        <input
+                           v-model="autorefreshTimer"
+                           class="slider no-border"
+                           type="range"
+                           min="0"
+                           max="15"
+                           step="0.5"
+                           @change="setRefreshInterval"
+                        >
+                     </div>
                   </div>
                </div>
+               <div class="dropdown table-dropdown">
+                  <button
+                     :disabled="isQuering"
+                     class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
+                     tabindex="0"
+                  >
+                     <i class="mdi mdi-24px mdi-file-export mr-1" />
+                     <span>{{ $t('word.export') }}</span>
+                     <i class="mdi mdi-24px mdi-menu-down" />
+                  </button>
+                  <ul class="menu text-left">
+                     <li class="menu-item">
+                        <a class="c-hand" @click="downloadTable('json')">JSON</a>
+                     </li>
+                     <li class="menu-item">
+                        <a class="c-hand" @click="downloadTable('csv')">CSV</a>
+                     </li>
+                  </ul>
+               </div>
             </div>
             <div class="workspace-query-info">
                <div v-if="sortedResults.length">
@@ -85,9 +116,10 @@
                      <template slot-scope="{ items }">
                         <ModalProcessesListRow
                            v-for="row in items"
-                           :key="row._id"
+                           :key="row.id"
                            class="process-row"
                            :row="row"
+                           @select-row="selectRow(row.id)"
                            @contextmenu="contextMenu"
                            @stop-refresh="stopRefresh"
                         />
@@ -102,15 +134,18 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import arrayToFile from '../libs/arrayToFile';
 import Schema from '@/ipc-api/Schema';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
 import ModalProcessesListRow from '@/components/ModalProcessesListRow';
+import ModalProcessesListContext from '@/components/ModalProcessesListContext';
 
 export default {
    name: 'ModalProcessesList',
    components: {
       BaseVirtualScroll,
-      ModalProcessesListRow
+      ModalProcessesListRow,
+      ModalProcessesListContext
    },
    props: {
       connection: Object
@@ -119,8 +154,12 @@ export default {
       return {
          resultsSize: 1000,
          isQuering: false,
+         isContext: false,
          autorefreshTimer: 0,
          refreshInterval: null,
+         contextEvent: null,
+         selectedCell: null,
+         selectedRow: null,
          results: [],
          fields: [],
          currentSort: '',
@@ -245,10 +284,55 @@ export default {
          this.autorefreshTimer = 0;
          this.clearRefresh();
       },
-      contextMenu () {},
+      selectRow (row) {
+         this.selectedRow = row;
+      },
+      contextMenu (event, cell) {
+         if (event.target.localName === 'input') return;
+         this.stopRefresh();
+
+         this.selectedCell = cell;
+         this.selectedRow = cell.id;
+         this.contextEvent = event;
+         this.isContext = true;
+      },
+      async killProcess () {
+         try { // Table data
+            const { status, response } = await Schema.killProcess({ uid: this.connection.uid, pid: this.selectedRow });
+
+            if (status === 'success')
+               this.getProcessesList();
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      closeContext () {
+         this.isContext = false;
+      },
+      copyCell () {
+         const row = this.results.find(row => row.id === this.selectedRow);
+         const valueToCopy = row[this.selectedCell.field];
+         navigator.clipboard.writeText(valueToCopy);
+      },
+      copyRow () {
+         const row = this.results.find(row => row.id === this.selectedRow);
+         const rowToCopy = JSON.parse(JSON.stringify(row));
+         navigator.clipboard.writeText(JSON.stringify(rowToCopy));
+      },
       closeModal () {
          this.$emit('close');
       },
+      downloadTable (format) {
+         if (!this.sortedResults) return;
+         arrayToFile({
+            type: format,
+            content: this.sortedResults,
+            filename: 'processes'
+         });
+      },
       onKey (e) {
          e.stopPropagation();
          if (e.key === 'Escape')

src/renderer/components/ModalProcessesListContext.vue

@@ -0,0 +1,75 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div v-if="selectedRow" class="context-element">
+         <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
+               v-if="selectedRow"
+               class="context-element"
+               @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) }}
+               </span>
+            </div>
+            <div
+               v-if="selectedRow"
+               class="context-element"
+               @click="copyRow"
+            >
+               <span class="d-flex">
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ $tc('word.row', 1) }}
+               </span>
+            </div>
+         </div>
+      </div>
+      <div
+         v-if="selectedRow"
+         class="context-element"
+         @click="killProcess"
+      >
+         <span class="d-flex">
+            <i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ $t('message.killProcess') }}
+         </span>
+      </div>
+   </BaseContextMenu>
+</template>
+
+<script>
+import BaseContextMenu from '@/components/BaseContextMenu';
+
+export default {
+   name: 'ModalProcessesListContext',
+   components: {
+      BaseContextMenu
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedRow: Number,
+      selectedCell: Object
+   },
+   computed: {
+   },
+   methods: {
+      closeContext () {
+         this.$emit('close-context');
+      },
+      copyCell () {
+         this.$emit('copy-cell');
+         this.closeContext();
+      },
+      copyRow () {
+         this.$emit('copy-row');
+         this.closeContext();
+      },
+      killProcess () {
+         this.$emit('kill-process');
+         this.closeContext();
+      }
+   }
+};
+</script>

src/renderer/components/ModalProcessesListRow.vue

@@ -1,21 +1,18 @@
 <template>
-   <div class="tr" @click="selectRow($event, row._id)">
+   <div class="tr" @click="selectRow()">
       <div
          v-for="(col, cKey) in row"
-         v-show="cKey !== '_id'"
          :key="cKey"
          class="td p-0"
          tabindex="0"
-         @contextmenu.prevent="openContext($event, { id: row._id, field: cKey })"
+         @contextmenu.prevent="openContext($event, { id: row.id, field: cKey })"
       >
-         <template v-if="cKey !== '_id'">
-            <span
-               v-if="!isInlineEditor[cKey]"
-               class="cell-content"
-               :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
-               @dblclick="dblClick(cKey)"
-            >{{ col | cutText }}</span>
-         </template>
+         <span
+            v-if="!isInlineEditor[cKey]"
+            class="cell-content"
+            :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
+            @dblclick="dblClick(cKey)"
+         >{{ col | cutText }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
@@ -73,25 +70,15 @@ export default {
       };
    },
    computed: {},
-   watch: {
-      fields () {
-         Object.keys(this.fields).forEach(field => {
-            this.isInlineEditor[field.name] = false;
-         });
-      }
-   },
    methods: {
       isNull (value) {
          return value === null ? ' is-null' : '';
       },
-      selectRow (event, row) {
-         this.$emit('select-row', event, row);
+      selectRow () {
+         this.$emit('select-row');
       },
       openContext (event, payload) {
-         if (this.isEditable) {
-            payload.field = this.fields[payload.field].name;// Ensures field name only
-            this.$emit('contextmenu', event, payload);
-         }
+         this.$emit('contextmenu', event, payload);
       },
       hideInfoModal () {
          this.isInfoModal = false;

src/renderer/components/Workspace.vue

@@ -102,6 +102,23 @@
                   </span>
                </a>
 
+               <a
+                  v-else-if="tab.type === 'view-props'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
+                     {{ tab.elementName | cutText }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
                <a
                   v-else-if="tab.type === 'new-view'"
                   class="tab-link"
@@ -120,13 +137,81 @@
                </a>
 
                <a
-                  v-else-if="tab.type === 'view-props'"
+                  v-else-if="tab.type === 'new-trigger'"
                   class="tab-link"
                   :class="{'badge': tab.isChanged}"
                >
-                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
-                     {{ tab.elementName | cutText }}
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newTrigger') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-routine'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newRoutine') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-function'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newFunction') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-trigger-function'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newTriggerFunction') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-scheduler'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newScheduler') }}
                      <span
                         class="btn btn-clear"
                         :title="$t('word.close')"
@@ -268,6 +353,15 @@
                :view="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewTrigger
+               v-else-if="tab.type === 'new-trigger'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsTrigger
                v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
                :key="tab.uid"
@@ -276,6 +370,15 @@
                :trigger="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewTriggerFunction
+               v-else-if="tab.type === 'new-trigger-function'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsTriggerFunction
                v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
                :key="tab.uid"
@@ -284,6 +387,15 @@
                :function="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewRoutine
+               v-else-if="tab.type === 'new-routine'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsRoutine
                v-else-if="['temp-routine-props', 'routine-props'].includes(tab.type)"
                :key="tab.uid"
@@ -292,6 +404,15 @@
                :routine="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewFunction
+               v-else-if="tab.type === 'new-function'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsFunction
                v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
                :key="tab.uid"
@@ -300,6 +421,15 @@
                :function="tab.elementName"
                :schema="tab.schema"
             />
+            <WorkspaceTabNewScheduler
+               v-else-if="tab.type === 'new-scheduler'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
             <WorkspaceTabPropsScheduler
                v-else-if="['temp-scheduler-props', 'scheduler-props'].includes(tab.type)"
                :key="tab.uid"
@@ -337,6 +467,11 @@ import WorkspaceTabTable from '@/components/WorkspaceTabTable';
 
 import WorkspaceTabNewTable from '@/components/WorkspaceTabNewTable';
 import WorkspaceTabNewView from '@/components/WorkspaceTabNewView';
+import WorkspaceTabNewTrigger from '@/components/WorkspaceTabNewTrigger';
+import WorkspaceTabNewRoutine from '@/components/WorkspaceTabNewRoutine';
+import WorkspaceTabNewFunction from '@/components/WorkspaceTabNewFunction';
+import WorkspaceTabNewScheduler from '@/components/WorkspaceTabNewScheduler';
+import WorkspaceTabNewTriggerFunction from '@/components/WorkspaceTabNewTriggerFunction';
 
 import WorkspaceTabPropsTable from '@/components/WorkspaceTabPropsTable';
 import WorkspaceTabPropsView from '@/components/WorkspaceTabPropsView';
@@ -358,13 +493,18 @@ export default {
       WorkspaceTabQuery,
       WorkspaceTabTable,
       WorkspaceTabNewTable,
-      WorkspaceTabNewView,
       WorkspaceTabPropsTable,
+      WorkspaceTabNewView,
       WorkspaceTabPropsView,
+      WorkspaceTabNewTrigger,
       WorkspaceTabPropsTrigger,
+      WorkspaceTabNewTriggerFunction,
       WorkspaceTabPropsTriggerFunction,
+      WorkspaceTabNewRoutine,
+      WorkspaceTabNewFunction,
       WorkspaceTabPropsRoutine,
       WorkspaceTabPropsFunction,
+      WorkspaceTabNewScheduler,
       WorkspaceTabPropsScheduler,
       ModalProcessesList,
       ModalDiscardChanges

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -393,6 +393,13 @@ export default {
          return this.isConnecting || this.isTesting;
       }
    },
+   watch: {
+      'connection.client' () {
+         this.connection.user = this.customizations.defaultUser;
+         this.connection.port = this.customizations.defaultPort;
+         this.connection.database = this.customizations.defaultDatabase;
+      }
+   },
    created () {
       this.setDefaults();
 

src/renderer/components/WorkspaceExploreBar.vue

@@ -5,6 +5,9 @@
          ref="explorebar"
          class="workspace-explorebar column"
          :style="{width: localWidth ? localWidth+'px' : ''}"
+         tabindex="0"
+         @keypress="explorebarSearch"
+         @keydown="explorebarSearch"
       >
          <div class="workspace-explorebar-header">
             <span class="workspace-explorebar-title">{{ connectionName }}</span>
@@ -30,6 +33,7 @@
          <div class="workspace-explorebar-search">
             <div v-if="workspace.connectionStatus === 'connected'" class="has-icon-right">
                <input
+                  ref="searchInput"
                   v-model="searchTerm"
                   class="form-input input-sm"
                   type="text"
@@ -43,7 +47,7 @@
                />
             </div>
          </div>
-         <div class="workspace-explorebar-body">
+         <div class="workspace-explorebar-body" @click="$refs.explorebar.focus()">
             <WorkspaceExploreBarSchema
                v-for="db of workspace.structure"
                :key="db.name"
@@ -61,36 +65,6 @@
          @close="hideNewDBModal"
          @reload="refresh"
       />
-      <ModalNewTrigger
-         v-if="isNewTriggerModal"
-         :workspace="workspace"
-         @close="hideCreateTriggerModal"
-         @open-create-trigger-editor="openCreateTriggerEditor"
-      />
-      <ModalNewRoutine
-         v-if="isNewRoutineModal"
-         :workspace="workspace"
-         @close="hideCreateRoutineModal"
-         @open-create-routine-editor="openCreateRoutineEditor"
-      />
-      <ModalNewFunction
-         v-if="isNewFunctionModal"
-         :workspace="workspace"
-         @close="hideCreateFunctionModal"
-         @open-create-function-editor="openCreateFunctionEditor"
-      />
-      <ModalNewTriggerFunction
-         v-if="isNewTriggerFunctionModal"
-         :workspace="workspace"
-         @close="hideCreateTriggerFunctionModal"
-         @open-create-function-editor="openCreateTriggerFunctionEditor"
-      />
-      <ModalNewScheduler
-         v-if="isNewSchedulerModal"
-         :workspace="workspace"
-         @close="hideCreateSchedulerModal"
-         @open-create-scheduler-editor="openCreateSchedulerEditor"
-      />
       <DatabaseContext
          v-if="isDatabaseContext"
          :selected-schema="selectedSchema"
@@ -98,18 +72,20 @@
          @close-context="closeDatabaseContext"
          @open-create-table-tab="openCreateElementTab('table')"
          @open-create-view-tab="openCreateElementTab('view')"
-         @show-create-trigger-modal="showCreateTriggerModal"
-         @show-create-routine-modal="showCreateRoutineModal"
-         @show-create-function-modal="showCreateFunctionModal"
-         @show-create-trigger-function-modal="showCreateTriggerFunctionModal"
-         @show-create-scheduler-modal="showCreateSchedulerModal"
+         @open-create-trigger-tab="openCreateElementTab('trigger')"
+         @open-create-routine-tab="openCreateElementTab('routine')"
+         @open-create-function-tab="openCreateElementTab('function')"
+         @open-create-trigger-function-tab="openCreateElementTab('trigger-function')"
+         @open-create-scheduler-tab="openCreateElementTab('scheduler')"
          @reload="refresh"
       />
       <TableContext
-         v-show="isTableContext"
+         v-if="isTableContext"
          :selected-schema="selectedSchema"
          :selected-table="selectedTable"
          :context-event="tableContextEvent"
+         @delete-table="deleteTable"
+         @duplicate-table="duplicateTable"
          @close-context="closeTableContext"
          @reload="refresh"
       />
@@ -126,11 +102,11 @@
          :selected-misc="selectedMisc"
          :selected-schema="selectedSchema"
          :context-event="miscContextEvent"
-         @show-create-trigger-modal="showCreateTriggerModal"
-         @show-create-routine-modal="showCreateRoutineModal"
-         @show-create-function-modal="showCreateFunctionModal"
-         @show-create-trigger-function-modal="showCreateTriggerFunctionModal"
-         @show-create-scheduler-modal="showCreateSchedulerModal"
+         @open-create-trigger-tab="openCreateElementTab('trigger')"
+         @open-create-routine-tab="openCreateElementTab('routine')"
+         @open-create-function-tab="openCreateElementTab('function')"
+         @open-create-trigger-function-tab="openCreateElementTab('trigger-function')"
+         @open-create-scheduler-tab="openCreateElementTab('scheduler')"
          @close-context="closeMiscFolderContext"
          @reload="refresh"
       />
@@ -140,8 +116,8 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 
-import Triggers from '@/ipc-api/Triggers';
-import Routines from '@/ipc-api/Routines';
+import Tables from '@/ipc-api/Tables';
+import Views from '@/ipc-api/Views';
 import Functions from '@/ipc-api/Functions';
 import Schedulers from '@/ipc-api/Schedulers';
 
@@ -151,11 +127,6 @@ import TableContext from '@/components/WorkspaceExploreBarTableContext';
 import MiscContext from '@/components/WorkspaceExploreBarMiscContext';
 import MiscFolderContext from '@/components/WorkspaceExploreBarMiscFolderContext';
 import ModalNewSchema from '@/components/ModalNewSchema';
-import ModalNewTrigger from '@/components/ModalNewTrigger';
-import ModalNewRoutine from '@/components/ModalNewRoutine';
-import ModalNewFunction from '@/components/ModalNewFunction';
-import ModalNewTriggerFunction from '@/components/ModalNewTriggerFunction';
-import ModalNewScheduler from '@/components/ModalNewScheduler';
 
 export default {
    name: 'WorkspaceExploreBar',
@@ -165,12 +136,7 @@ export default {
       TableContext,
       MiscContext,
       MiscFolderContext,
-      ModalNewSchema,
-      ModalNewTrigger,
-      ModalNewRoutine,
-      ModalNewFunction,
-      ModalNewTriggerFunction,
-      ModalNewScheduler
+      ModalNewSchema
    },
    props: {
       connection: Object,
@@ -261,9 +227,12 @@ export default {
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
          selectTab: 'workspaces/selectTab',
          newTab: 'workspaces/newTab',
+         removeTabs: 'workspaces/removeTabs',
          setSearchTerm: 'workspaces/setSearchTerm',
          addNotification: 'notifications/addNotification',
-         changeExplorebarSize: 'settings/changeExplorebarSize'
+         changeExplorebarSize: 'settings/changeExplorebarSize',
+         addLoadingElement: 'workspaces/addLoadingElement',
+         removeLoadingElement: 'workspaces/removeLoadingElement'
       }),
       async refresh () {
          if (!this.isRefreshing) {
@@ -272,6 +241,19 @@ export default {
             this.isRefreshing = false;
          }
       },
+      explorebarSearch (e) {
+         if (e.code === 'Backspace') {
+            e.preventDefault();
+            if (this.searchTerm.length)
+               this.searchTerm = this.searchTerm.slice(0, -1);
+            else
+               return;
+         }
+         else if (e.key.length > 1)// Prevent non-alphanumerics
+            return;
+
+         this.$refs.searchInput.focus();
+      },
       resize (e) {
          const el = this.$refs.explorebar;
          let explorebarWidth = e.pageX - el.getBoundingClientRect().left;
@@ -290,6 +272,7 @@ export default {
       },
       openCreateElementTab (element) {
          this.closeDatabaseContext();
+         this.closeMiscFolderContext();
 
          this.newTab({
             uid: this.workspace.uid,
@@ -342,31 +325,6 @@ export default {
       hideCreateTriggerModal () {
          this.isNewTriggerModal = false;
       },
-      async openCreateTriggerEditor (payload) {
-         const params = {
-            uid: this.connection.uid,
-            schema: this.selectedSchema,
-            ...payload
-         };
-
-         const { status, response } = await Triggers.createTrigger(params);
-
-         if (status === 'success') {
-            await this.refresh();
-            const triggerName = this.customizations.triggerTableInName ? `${payload.table}.${payload.name}` : payload.name;
-            this.changeBreadcrumbs({ schema: this.selectedSchema, trigger: triggerName });
-
-            this.newTab({
-               uid: this.workspace.uid,
-               schema: this.selectedSchema,
-               elementName: triggerName,
-               elementType: 'trigger',
-               type: 'trigger-props'
-            });
-         }
-         else
-            this.addNotification({ status: 'error', message: response });
-      },
       showCreateRoutineModal () {
          this.closeDatabaseContext();
          this.closeMiscFolderContext();
@@ -375,30 +333,6 @@ export default {
       hideCreateRoutineModal () {
          this.isNewRoutineModal = false;
       },
-      async openCreateRoutineEditor (payload) {
-         const params = {
-            uid: this.connection.uid,
-            schema: this.selectedSchema,
-            ...payload
-         };
-
-         const { status, response } = await Routines.createRoutine(params);
-
-         if (status === 'success') {
-            await this.refresh();
-            this.changeBreadcrumbs({ schema: this.selectedSchema, routine: payload.name });
-
-            this.newTab({
-               uid: this.workspace.uid,
-               schema: this.selectedSchema,
-               elementName: payload.name,
-               elementType: 'routine',
-               type: 'routine-props'
-            });
-         }
-         else
-            this.addNotification({ status: 'error', message: response });
-      },
       showCreateFunctionModal () {
          this.closeDatabaseContext();
          this.closeMiscFolderContext();
@@ -423,6 +357,89 @@ export default {
       hideCreateSchedulerModal () {
          this.isNewSchedulerModal = false;
       },
+      async deleteTable (payload) {
+         this.closeTableContext();
+
+         this.addLoadingElement({
+            name: payload.table.name,
+            schema: payload.schema,
+            type: 'table'
+         });
+
+         try {
+            let res;
+
+            if (payload.table.type === 'table') {
+               res = await Tables.dropTable({
+                  uid: this.connection.uid,
+                  table: payload.table.name,
+                  schema: payload.schema
+               });
+            }
+            else if (payload.table.type === 'view') {
+               res = await Views.dropView({
+                  uid: this.connection.uid,
+                  view: payload.table.name,
+                  schema: payload.schema
+               });
+            }
+
+            const { status, response } = res;
+
+            if (status === 'success') {
+               this.refresh();
+
+               this.removeTabs({
+                  uid: this.connection.uid,
+                  elementName: payload.table.name,
+                  elementType: payload.table.type,
+                  schema: payload.schema
+               });
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.removeLoadingElement({
+            name: payload.table.name,
+            schema: payload.schema,
+            type: 'table'
+         });
+      },
+      async duplicateTable (payload) {
+         this.closeTableContext();
+
+         this.addLoadingElement({
+            name: payload.table.name,
+            schema: payload.schema,
+            type: 'table'
+         });
+
+         try {
+            const { status, response } = await Tables.duplicateTable({
+               uid: this.connection.uid,
+               table: payload.table.name,
+               schema: payload.schema
+            });
+
+            if (status === 'success')
+               this.refresh();
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.removeLoadingElement({
+            name: payload.table.name,
+            schema: payload.schema,
+            type: 'table'
+         });
+      },
       async openCreateFunctionEditor (payload) {
          const params = {
             uid: this.connection.uid,
@@ -527,6 +544,10 @@ export default {
     position: relative;
     padding: 0;
 
+    &:focus {
+      outline: none;
+    }
+
     .workspace-explorebar-header {
       width: 100%;
       padding: 0.3rem;

src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue

@@ -6,35 +6,35 @@
       <div
          v-if="selectedMisc === 'trigger'"
          class="context-element"
-         @click="$emit('show-create-trigger-modal')"
+         @click="$emit('open-create-trigger-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ $t('message.createNewTrigger') }}</span>
       </div>
       <div
          v-if="selectedMisc === 'procedure'"
          class="context-element"
-         @click="$emit('show-create-routine-modal')"
+         @click="$emit('open-create-routine-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle text-light pr-1" /> {{ $t('message.createNewRoutine') }}</span>
       </div>
       <div
          v-if="selectedMisc === 'function'"
          class="context-element"
-         @click="$emit('show-create-function-modal')"
+         @click="$emit('open-create-function-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box text-light pr-1" /> {{ $t('message.createNewFunction') }}</span>
       </div>
       <div
          v-if="selectedMisc === 'triggerFunction'"
          class="context-element"
-         @click="$emit('show-create-trigger-function-modal')"
+         @click="$emit('open-create-trigger-function-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise text-light pr-1" /> {{ $t('message.createNewFunction') }}</span>
       </div>
       <div
          v-if="selectedMisc === 'scheduler'"
          class="context-element"
-         @click="$emit('show-create-scheduler-modal')"
+         @click="$emit('open-create-scheduler-tab')"
       >
          <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ $t('message.createNewScheduler') }}</span>
       </div>

src/renderer/components/WorkspaceExploreBarSchemaContext.vue

@@ -24,35 +24,35 @@
             <div
                v-if="workspace.customizations.triggerAdd"
                class="context-element"
-               @click="showCreateTriggerModal"
+               @click="openCreateTriggerTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ $tc('word.trigger', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.routineAdd"
                class="context-element"
-               @click="showCreateRoutineModal"
+               @click="openCreateRoutineTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ $tc('word.storedRoutine', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.functionAdd"
                class="context-element"
-               @click="showCreateFunctionModal"
+               @click="openCreateFunctionTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.triggerFunctionAdd"
                class="context-element"
-               @click="showCreateTriggerFunctionModal"
+               @click="openCreateTriggerFunctionTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ $tc('word.triggerFunction', 1) }}</span>
             </div>
             <div
                v-if="workspace.customizations.schedulerAdd"
                class="context-element"
-               @click="showCreateSchedulerModal"
+               @click="openCreateSchedulerTab"
             >
                <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ $tc('word.scheduler', 1) }}</span>
             </div>
@@ -138,20 +138,20 @@ export default {
       openCreateViewTab () {
          this.$emit('open-create-view-tab');
       },
-      showCreateTriggerModal () {
-         this.$emit('show-create-trigger-modal');
+      openCreateTriggerTab () {
+         this.$emit('open-create-trigger-tab');
       },
-      showCreateRoutineModal () {
-         this.$emit('show-create-routine-modal');
+      openCreateRoutineTab () {
+         this.$emit('open-create-routine-tab');
       },
-      showCreateFunctionModal () {
-         this.$emit('show-create-function-modal');
+      openCreateFunctionTab () {
+         this.$emit('open-create-function-tab');
       },
-      showCreateTriggerFunctionModal () {
-         this.$emit('show-create-trigger-function-modal');
+      openCreateTriggerFunctionTab () {
+         this.$emit('open-create-trigger-function-tab');
       },
-      showCreateSchedulerModal () {
-         this.$emit('show-create-scheduler-modal');
+      openCreateSchedulerTab () {
+         this.$emit('open-create-scheduler-tab');
       },
       showDeleteModal () {
          this.isDeleteModal = true;

src/renderer/components/WorkspaceExploreBarTableContext.vue

@@ -76,7 +76,6 @@ import { mapGetters, mapActions } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import Tables from '@/ipc-api/Tables';
-import Views from '@/ipc-api/Views';
 
 export default {
    name: 'WorkspaceExploreBarTableContext',
@@ -163,36 +162,8 @@ export default {
 
          this.closeContext();
       },
-      async duplicateTable () {
-         this.closeContext();
-
-         this.addLoadingElement({
-            name: this.selectedTable.name,
-            schema: this.selectedSchema,
-            type: 'table'
-         });
-
-         try {
-            const { status, response } = await Tables.duplicateTable({
-               uid: this.selectedWorkspace,
-               table: this.selectedTable.name,
-               schema: this.selectedSchema
-            });
-
-            if (status === 'success')
-               this.$emit('reload');
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.removeLoadingElement({
-            name: this.selectedTable.name,
-            schema: this.selectedSchema,
-            type: 'table'
-         });
+      duplicateTable () {
+         this.$emit('duplicate-table', { schema: this.selectedSchema, table: this.selectedTable });
       },
       async emptyTable () {
          this.closeContext();
@@ -225,57 +196,8 @@ export default {
             type: 'table'
          });
       },
-      async deleteTable () {
-         this.closeContext();
-
-         this.addLoadingElement({
-            name: this.selectedTable.name,
-            schema: this.selectedSchema,
-            type: 'table'
-         });
-
-         try {
-            let res;
-
-            if (this.selectedTable.type === 'table') {
-               res = await Tables.dropTable({
-                  uid: this.selectedWorkspace,
-                  table: this.selectedTable.name,
-                  schema: this.selectedSchema
-               });
-            }
-            else if (this.selectedTable.type === 'view') {
-               res = await Views.dropView({
-                  uid: this.selectedWorkspace,
-                  view: this.selectedTable.name,
-                  schema: this.selectedSchema
-               });
-            }
-
-            const { status, response } = res;
-
-            if (status === 'success') {
-               this.removeTabs({
-                  uid: this.selectedWorkspace,
-                  elementName: this.selectedTable.name,
-                  elementType: this.selectedTable.type,
-                  schema: this.selectedSchema
-               });
-
-               this.$emit('reload');
-            }
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         this.removeLoadingElement({
-            name: this.selectedTable.name,
-            schema: this.selectedSchema,
-            type: 'table'
-         });
+      deleteTable () {
+         this.$emit('delete-table', { schema: this.selectedSchema, table: this.selectedTable });
       }
    }
 };

src/renderer/components/WorkspaceTabNewFunction.vue

@@ -0,0 +1,397 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <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>
+               </button>
+            </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.name') }}
+                  </label>
+                  <input
+                     ref="firstInput"
+                     v-model="localFunction.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.languages" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.language') }}
+                  </label>
+                  <select v-model="localFunction.language" class="form-select">
+                     <option v-for="language in customizations.languages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.definer') }}
+                  </label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localFunction.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.returns') }}
+                  </label>
+                  <div class="input-group">
+                     <select
+                        v-model="localFunction.returns"
+                        class="form-select text-uppercase"
+                        style="max-width: 150px;"
+                     >
+                        <option v-if="localFunction.returns === 'VOID'">
+                           VOID
+                        </option>
+                        <optgroup
+                           v-for="group in workspace.dataTypes"
+                           :key="group.group"
+                           :label="group.group"
+                        >
+                           <option
+                              v-for="type in group.types"
+                              :key="type.name"
+                              :selected="localFunction.returns === type.name"
+                              :value="type.name"
+                           >
+                              {{ type.name }}
+                           </option>
+                        </optgroup>
+                     </select>
+                     <input
+                        v-if="customizations.parametersLength"
+                        v-model="localFunction.returnsLength"
+                        style="max-width: 150px;"
+                        class="form-input"
+                        type="number"
+                        min="0"
+                        :placeholder="$t('word.length')"
+                     >
+                  </div>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="column">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.comment') }}
+                  </label>
+                  <input
+                     v-model="localFunction.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.sqlSecurity') }}
+                  </label>
+                  <select v-model="localFunction.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.functionDataAccess" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.dataAccess') }}
+                  </label>
+                  <select v-model="localFunction.dataAccess" class="form-select">
+                     <option>CONTAINS SQL</option>
+                     <option>NO SQL</option>
+                     <option>READS SQL DATA</option>
+                     <option>MODIFIES SQL DATA</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.functionDeterministic" class="column col-auto">
+               <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') }}
+                  </label>
+               </div>
+            </div>
+         </div>
+      </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>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localFunction.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspaceTabPropsFunctionParamsModal
+         v-if="isParamsModal"
+         :local-parameters="localFunction.parameters"
+         :workspace="workspace"
+         :func="localFunction.name"
+         @hide="hideParamsModal"
+         @parameters-update="parametersUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
+import Functions from '@/ipc-api/Functions';
+
+export default {
+   name: 'WorkspaceTabNewFunction',
+   components: {
+      BaseLoader,
+      QueryEditor,
+      WorkspaceTabPropsFunctionParamsModal
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         isParamsModal: false,
+         originalFunction: {},
+         localFunction: {},
+         lastFunction: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      customizations () {
+         return this.workspace.customizations;
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      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);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   created () {
+      this.originalFunction = {
+         sql: this.customizations.functionSql,
+         language: this.customizations.languages ? this.customizations.languages[0] : null,
+         name: '',
+         definer: '',
+         comment: '',
+         security: 'DEFINER',
+         dataAccess: 'CONTAINS SQL',
+         deterministic: false,
+         returns: this.workspace.dataTypes.length ? this.workspace.dataTypes[0].types[0].name : null
+      };
+
+      this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localFunction
+         };
+
+         try {
+            const { status, response } = await Functions.createFunction(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localFunction.name,
+                  elementType: 'function',
+                  type: 'function-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
+            }
+            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 };
+      },
+      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();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewRoutine.vue

@@ -0,0 +1,353 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <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>
+               </button>
+            </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.name') }}
+                  </label>
+                  <input
+                     ref="firstInput"
+                     v-model="localRoutine.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.languages" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.language') }}
+                  </label>
+                  <select v-model="localRoutine.language" class="form-select">
+                     <option v-for="language in customizations.languages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.definer') }}
+                  </label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localRoutine.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="column">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.comment') }}
+                  </label>
+                  <input
+                     v-model="localRoutine.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.sqlSecurity') }}
+                  </label>
+                  <select v-model="localRoutine.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.procedureDataAccess" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('message.dataAccess') }}
+                  </label>
+                  <select v-model="localRoutine.dataAccess" class="form-select">
+                     <option>CONTAINS SQL</option>
+                     <option>NO SQL</option>
+                     <option>READS SQL DATA</option>
+                     <option>MODIFIES SQL DATA</option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.procedureDeterministic" class="column col-auto">
+               <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') }}
+                  </label>
+               </div>
+            </div>
+         </div>
+      </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>
+         <QueryEditor
+            v-show="isSelected"
+            :key="`new-${_uid}`"
+            ref="queryEditor"
+            :value.sync="localRoutine.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspaceTabPropsRoutineParamsModal
+         v-if="isParamsModal"
+         :local-parameters="localRoutine.parameters"
+         :workspace="workspace"
+         routine="new"
+         @hide="hideParamsModal"
+         @parameters-update="parametersUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import QueryEditor from '@/components/QueryEditor';
+import BaseLoader from '@/components/BaseLoader';
+import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
+import Routines from '@/ipc-api/Routines';
+
+export default {
+   name: 'WorkspaceTabNewRoutine',
+   components: {
+      QueryEditor,
+      BaseLoader,
+      WorkspaceTabPropsRoutineParamsModal
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         isParamsModal: false,
+         originalRoutine: {},
+         localRoutine: {},
+         lastRoutine: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      customizations () {
+         return this.workspace.customizations;
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      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;
+      },
+      schemaTables () {
+         const schemaTables = this.workspace.structure
+            .filter(schema => schema.name === this.schema)
+            .map(schema => schema.tables);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   created () {
+      this.originalRoutine = {
+         sql: this.customizations.procedureSql,
+         language: this.customizations.languages ? this.customizations.languages[0] : null,
+         name: '',
+         definer: '',
+         comment: '',
+         security: 'DEFINER',
+         dataAccess: 'CONTAINS SQL',
+         deterministic: false
+      };
+
+      this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localRoutine
+         };
+
+         try {
+            const { status, response } = await Routines.createRoutine(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localRoutine.name,
+                  elementType: 'routine',
+                  type: 'routine-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, routine: this.localRoutine.name });
+            }
+            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();
+         }
+      },
+      parametersUpdate (parameters) {
+         this.localRoutine = { ...this.localRoutine, parameters };
+      },
+      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();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewScheduler.vue

@@ -0,0 +1,323 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <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>
+               </button>
+            </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <input
+                     ref="firstInput"
+                     v-model="localScheduler.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localScheduler.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option v-if="!isDefinerInUsers" :value="originalScheduler.definer">
+                        {{ originalScheduler.definer.replaceAll('`', '') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="column">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.comment') }}</label>
+                  <input
+                     v-model="localScheduler.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column">
+               <div class="form-group">
+                  <label class="form-label mr-2">{{ $t('word.state') }}</label>
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="localScheduler.state"
+                        type="radio"
+                        name="state"
+                        value="ENABLE"
+                     ><i class="form-icon" /> ENABLE
+                  </label>
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="localScheduler.state"
+                        type="radio"
+                        name="state"
+                        value="DISABLE"
+                     ><i class="form-icon" /> DISABLE
+                  </label>
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="localScheduler.state"
+                        type="radio"
+                        name="state"
+                        value="DISABLE ON SLAVE"
+                     ><i class="form-icon" /> DISABLE ON SLAVE
+                  </label>
+               </div>
+            </div>
+         </div>
+      </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>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localScheduler.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspaceTabPropsSchedulerTimingModal
+         v-if="isTimingModal"
+         :local-options="localScheduler"
+         :workspace="workspace"
+         @hide="hideTimingModal"
+         @options-update="timingUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
+import Schedulers from '@/ipc-api/Schedulers';
+
+export default {
+   name: 'WorkspaceTabNewScheduler',
+   components: {
+      BaseLoader,
+      QueryEditor,
+      WorkspaceTabPropsSchedulerTimingModal
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         isTimingModal: false,
+         originalScheduler: {},
+         localScheduler: {},
+         lastScheduler: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      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);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   async created () {
+      this.originalScheduler = {
+         definer: '',
+         sql: 'BEGIN\r\n\r\nEND',
+         name: '',
+         comment: '',
+         execution: 'EVERY',
+         every: ['1', 'DAY'],
+         preserve: true,
+         state: 'DISABLE'
+      };
+
+      this.localScheduler = JSON.parse(JSON.stringify(this.originalScheduler));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localScheduler
+         };
+
+         try {
+            const { status, response } = await Schedulers.createScheduler(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localScheduler.name,
+                  elementType: 'scheduler',
+                  type: 'scheduler-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, scheduler: this.localScheduler.name });
+            }
+            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();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewTable.vue

@@ -314,6 +314,7 @@ export default {
                });
 
                this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
             }
             else
                this.addNotification({ status: 'error', message: response });

src/renderer/components/WorkspaceTabNewTrigger.vue

@@ -0,0 +1,323 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <span>{{ $t('word.clear') }}</span>
+               </button>
+            </div>
+            <div class="workspace-query-info">
+               <div class="d-flex" :title="$t('word.schema')">
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <input
+                     ref="firstInput"
+                     v-model="localTrigger.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localTrigger.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option v-if="!isDefinerInUsers" :value="originalTrigger.definer">
+                        {{ originalTrigger.definer.replaceAll('`', '') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <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>
+                     <select v-model="localTrigger.table" class="form-select">
+                        <option v-for="table in schemaTables" :key="table.name">
+                           {{ table.name }}
+                        </option>
+                     </select>
+                  </div>
+               </div>
+               <div class="column col-auto">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('word.event') }}</label>
+                     <div class="input-group">
+                        <select v-model="localTrigger.activation" class="form-select">
+                           <option>BEFORE</option>
+                           <option>AFTER</option>
+                        </select>
+                        <select
+                           v-if="!customizations.triggerMultipleEvents"
+                           v-model="localTrigger.event"
+                           class="form-select"
+                        >
+                           <option v-for="event in Object.keys(localEvents)" :key="event">
+                              {{ event }}
+                           </option>
+                        </select>
+                        <div v-if="customizations.triggerMultipleEvents" class="px-4">
+                           <label
+                              v-for="event in Object.keys(localEvents)"
+                              :key="event"
+                              class="form-checkbox form-inline"
+                              @change.prevent="changeEvents(event)"
+                           >
+                              <input :checked="localEvents[event]" type="checkbox"><i class="form-icon" /> {{ event }}
+                           </label>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </fieldset>
+         </div>
+      </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>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localTrigger.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+   </div>
+</template>
+
+<script>
+import QueryEditor from '@/components/QueryEditor';
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import Triggers from '@/ipc-api/Triggers';
+
+export default {
+   name: 'WorkspaceTabNewTrigger',
+   components: {
+      BaseLoader,
+      QueryEditor
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         originalTrigger: {},
+         localTrigger: {},
+         lastTrigger: null,
+         sqlProxy: '',
+         editorHeight: 300,
+         localEvents: { INSERT: false, UPDATE: false, DELETE: false }
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      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);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   created () {
+      this.originalTrigger = {
+         sql: this.customizations.triggerSql,
+         definer: '',
+         table: this.schemaTables.length ? this.schemaTables[0].name : null,
+         activation: 'BEFORE',
+         event: this.customizations.triggerMultipleEvents ? ['INSERT'] : 'INSERT',
+         name: ''
+      };
+
+      this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      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,
+            schema: this.schema,
+            ...this.localTrigger
+         };
+
+         try {
+            const { status, response } = await Triggers.createTrigger(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localTrigger.name,
+                  elementType: 'trigger',
+                  type: 'trigger-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, trigger: this.localTrigger.name });
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         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;
+            });
+         }
+      },
+      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();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewTriggerFunction.vue

@@ -0,0 +1,279 @@
+<template>
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <i class="mdi mdi-24px mdi-content-save mr-1" />
+                  <span>{{ $t('word.save') }}</span>
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <i class="mdi mdi-24px mdi-delete-sweep mr-1" />
+                  <span>{{ $t('word.clear') }}</span>
+               </button>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns">
+            <div class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.name') }}
+                  </label>
+                  <input
+                     ref="firstInput"
+                     v-model="localFunction.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.triggerFunctionlanguages" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.language') }}
+                  </label>
+                  <select v-model="localFunction.language" class="form-select">
+                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="column col-auto">
+               <div class="form-group">
+                  <label class="form-label">
+                     {{ $t('word.definer') }}
+                  </label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localFunction.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="form-group">
+               <label class="form-label">
+                  {{ $t('word.comment') }}
+               </label>
+               <input
+                  v-model="localFunction.comment"
+                  class="form-input"
+                  type="text"
+               >
+            </div>
+         </div>
+      </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>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localFunction.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import Functions from '@/ipc-api/Functions';
+
+export default {
+   name: 'WorkspaceTabNewTriggerFunction',
+   components: {
+      BaseLoader,
+      QueryEditor
+   },
+   props: {
+      connection: Object,
+      tab: Object,
+      isSelected: Boolean,
+      schema: String
+   },
+   data () {
+      return {
+         isLoading: false,
+         isSaving: false,
+         isParamsModal: false,
+         isAskingParameters: false,
+         originalFunction: {},
+         localFunction: {},
+         lastFunction: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      customizations () {
+         return this.workspace.customizations;
+      },
+      tabUid () {
+         return this.$vnode.key;
+      },
+      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);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      isSelected (val) {
+         if (val)
+            this.changeBreadcrumbs({ schema: this.schema });
+      },
+      isChanged (val) {
+         this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
+      }
+   },
+   created () {
+      this.originalFunction = {
+         sql: this.customizations.triggerFunctionSql,
+         language: this.customizations.triggerFunctionlanguages.length ? this.customizations.triggerFunctionlanguages[0] : null,
+         name: ''
+      };
+
+      this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+
+      setTimeout(() => {
+         this.resizeQueryEditor();
+      }, 50);
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.isSelected)
+         this.changeBreadcrumbs({ schema: this.schema });
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 100);
+
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab',
+         renameTabs: 'workspaces/renameTabs'
+      }),
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            ...this.localFunction
+         };
+
+         try {
+            const { status, response } = await Functions.createTriggerFunction(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+
+               this.newTab({
+                  uid: this.connection.uid,
+                  schema: this.schema,
+                  elementName: this.localFunction.name,
+                  elementType: 'triggerFunction',
+                  type: 'trigger-function-props'
+               });
+
+               this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, triggerFunction: this.localFunction.name });
+            }
+            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();
+         }
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
+               if (this.isChanged)
+                  this.saveChanges();
+            }
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceTabNewView.vue

@@ -250,6 +250,7 @@ export default {
                });
 
                this.removeTab({ uid: this.connection.uid, tab: this.tab.uid });
+               this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
             }
             else
                this.addNotification({ status: 'error', message: response });

src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue

@@ -176,7 +176,7 @@ import { uidGen } from 'common/libs/uidGen';
 import ConfirmModal from '@/components/BaseConfirmModal';
 
 export default {
-   name: 'WorkspaceTabPropsRoutineParamsModal',
+   name: 'WorkspaceTabPropsFunctionParamsModal',
    components: {
       ConfirmModal
    },
@@ -242,7 +242,7 @@ export default {
             name: `Param${this.i++}`,
             type: 'INT',
             context: 'IN',
-            length: 10
+            length: ''
          }];
 
          if (this.parametersProxy.length === 1)

src/renderer/components/WorkspaceTabPropsTableRow.vue

@@ -606,7 +606,7 @@ export default {
   min-height: auto;
 
   .form-icon {
-    top: 0.15rem;
+    top: -0.65rem;
     left: calc(50% - 8px);
   }
 }

src/renderer/components/WorkspaceTabQuery.vue

@@ -5,7 +5,8 @@
       tabindex="0"
       @keydown.116="runQuery(query)"
       @keydown.ctrl.87="clear"
-      @keydown.ctrl.119="beautify"
+      @keydown.ctrl.66="beautify"
+      @keydown.ctrl.71="openHistoryModal"
    >
       <div class="workspace-query-runner column col-12">
          <QueryEditor
@@ -32,16 +33,7 @@
                   <span>{{ $t('word.run') }}</span>
                </button>
                <button
-                  class="btn btn-dark btn-sm"
-                  :disabled="!query || isQuering"
-                  title="CTRL+F8"
-                  @click="beautify()"
-               >
-                  <i class="mdi mdi-24px mdi-brush pr-1" />
-                  <span>{{ $t('word.format') }}</span>
-               </button>
-               <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-link btn-sm mr-0"
                   :disabled="!query || isQuering"
                   title="CTRL+W"
                   @click="clear()"
@@ -52,6 +44,24 @@
 
                <div class="divider-vert py-3" />
 
+               <button
+                  class="btn btn-dark btn-sm"
+                  :disabled="!query || isQuering"
+                  title="CTRL+B"
+                  @click="beautify()"
+               >
+                  <i class="mdi mdi-24px mdi-brush pr-1" />
+                  <span>{{ $t('word.format') }}</span>
+               </button>
+               <button
+                  class="btn btn-dark btn-sm"
+                  :disabled="isQuering"
+                  title="CTRL+G"
+                  @click="openHistoryModal()"
+               >
+                  <i class="mdi mdi-24px mdi-history pr-1" />
+                  <span>{{ $t('word.history') }}</span>
+               </button>
                <div class="dropdown table-dropdown pr-2">
                   <button
                      :disabled="!results.length || isQuering"
@@ -116,17 +126,24 @@
             @delete-selected="deleteSelected"
          />
       </div>
+      <ModalHistory
+         v-if="isHistoryOpen"
+         :connection="connection"
+         @select-query="selectQuery"
+         @close="isHistoryOpen = false"
+      />
    </div>
 </template>
 
 <script>
 import { format } from 'sql-formatter';
+import { mapGetters, mapActions } from 'vuex';
 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 { mapGetters, mapActions } from 'vuex';
+import ModalHistory from '@/components/ModalHistory';
 import tableTabs from '@/mixins/tableTabs';
 
 export default {
@@ -135,7 +152,8 @@ export default {
       BaseLoader,
       QueryEditor,
       WorkspaceTabQueryTable,
-      WorkspaceTabQueryEmptyState
+      WorkspaceTabQueryEmptyState,
+      ModalHistory
    },
    mixins: [tableTabs],
    props: {
@@ -153,13 +171,15 @@ export default {
          resultsCount: 0,
          durationsCount: 0,
          affectedCount: 0,
-         editorHeight: 200
+         editorHeight: 200,
+         isHistoryOpen: false
       };
    },
    computed: {
       ...mapGetters({
          getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected'
+         selectedWorkspace: 'workspaces/getSelected',
+         getHistoryByWorkspace: 'history/getHistoryByWorkspace'
       }),
       workspace () {
          return this.getWorkspace(this.connection.uid);
@@ -175,6 +195,9 @@ export default {
       },
       isWorkspaceSelected () {
          return this.workspace.uid === this.selectedWorkspace;
+      },
+      history () {
+         return this.getHistoryByWorkspace(this.connection.uid) || [];
       }
    },
    watch: {
@@ -189,7 +212,6 @@ export default {
    created () {
       this.query = this.tab.content;
       this.selectedSchema = this.tab.schema || this.breadcrumbsSchema;
-      // this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });
 
       window.addEventListener('keydown', this.onKey);
    },
@@ -213,7 +235,8 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         updateTabContent: 'workspaces/updateTabContent'
+         updateTabContent: 'workspaces/updateTabContent',
+         saveHistory: 'history/saveHistory'
       }),
       async runQuery (query) {
          if (!query || this.isQuering) return;
@@ -236,7 +259,14 @@ export default {
                this.durationsCount += this.results.reduce((acc, curr) => acc + curr.duration, 0);
                this.affectedCount += this.results.reduce((acc, curr) => acc + (curr.report ? curr.report.affectedRows : 0), 0);
 
-               this.updateTabContent({ uid: this.connection.uid, tab: this.tab.uid, type: 'query', schema: this.selectedSchema, content: query });
+               this.updateTabContent({
+                  uid: this.connection.uid,
+                  tab: this.tab.uid,
+                  type: 'query',
+                  schema: this.selectedSchema,
+                  content: query
+               });
+               this.saveHistory(params);
             }
             else
                this.addNotification({ status: 'error', message: response });
@@ -295,6 +325,15 @@ export default {
             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('');

src/renderer/components/WorkspaceTabQueryEmptyState.vue

@@ -11,17 +11,23 @@
             <div class="mb-4">
                {{ $t('word.clear') }}
             </div>
+            <div class="mb-4">
+               {{ $t('word.history') }}
+            </div>
          </div>
          <div class="column col-16">
             <div class="mb-4">
                <code>F5</code>
             </div>
             <div class="mb-4">
-               <code>CTRL</code> + <code>F8</code>
+               <code>CTRL</code> + <code>B</code>
             </div>
             <div class="mb-4">
                <code>CTRL</code> + <code>W</code>
             </div>
+            <div class="mb-4">
+               <code>CTRL</code> + <code>G</code>
+            </div>
          </div>
       </div>
    </div>

src/renderer/components/WorkspaceTabTable.vue

@@ -287,7 +287,7 @@ export default {
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       async getTableData () {
-         if (!this.table) return;
+         if (!this.table || !this.isSelected) return;
          this.isQuering = true;
 
          // if table changes clear cached values

src/renderer/i18n/en-US.js

@@ -117,7 +117,9 @@ module.exports = {
       all: 'All',
       duplicate: 'Duplicate',
       routine: 'Routine',
-      new: 'New'
+      new: 'New',
+      history: 'History',
+      select: 'Select'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -233,7 +235,15 @@ module.exports = {
       runQuery: 'Run query',
       thereAreNoTableFields: 'There are no table fields',
       newTable: 'New table',
-      newView: 'New view'
+      newView: 'New view',
+      newTrigger: 'New trigger',
+      newRoutine: 'New routine',
+      newFunction: 'New function',
+      newScheduler: 'New scheduler',
+      newTriggerFunction: 'New trigger function',
+      thereIsNoQueriesYet: 'There is no queries yet',
+      searchForQueries: 'Search for queries',
+      killProcess: 'Kill process'
    },
    faker: {
       address: 'Address',

src/renderer/ipc-api/Schema.js

@@ -42,6 +42,10 @@ export default class {
       return ipcRenderer.invoke('get-processes', uid);
    }
 
+   static killProcess (params) {
+      return ipcRenderer.invoke('kill-process', params);
+   }
+
    static useSchema (params) {
       return ipcRenderer.invoke('use-schema', params);
    }

src/renderer/scss/themes/dark-theme.scss

@@ -283,6 +283,12 @@
   }
 
   .tile {
+    transition: background 0.2s;
+
+    &:focus {
+      background: rgba($bg-color-light-dark, 60%);
+    }
+
     &:hover {
       background: $bg-color-light-dark;
     }

src/renderer/scss/themes/light-theme.scss

@@ -79,6 +79,12 @@
   }
 
   .tile {
+    transition: background 0.2s;
+
+    &:focus {
+      background: rgba($bg-color-light-gray, 70%);
+    }
+
     &:hover {
       background: $bg-color-light-gray;
     }

src/renderer/store/index.js

@@ -5,12 +5,14 @@ import Vuex from 'vuex';
 
 import application from './modules/application.store';
 import settings from './modules/settings.store';
+import history from './modules/history.store';
 import scratchpad from './modules/scratchpad.store';
 import connections from './modules/connections.store';
 import workspaces from './modules/workspaces.store';
 import notifications from './modules/notifications.store';
 
 import ipcUpdates from './plugins/ipcUpdates';
+import ipcExceptions from './plugins/ipcExceptions';
 
 Vue.use(Vuex);
 
@@ -19,12 +21,14 @@ export default new Vuex.Store({
    modules: {
       application,
       settings,
+      history,
       scratchpad,
       connections,
       workspaces,
       notifications
    },
    plugins: [
-      ipcUpdates
+      ipcUpdates,
+      ipcExceptions
    ]
 });

src/renderer/store/modules/history.store.js

@@ -0,0 +1,54 @@
+'use strict';
+import Store from 'electron-store';
+import { uidGen } from 'common/libs/uidGen';
+const persistentStore = new Store({ name: 'history' });
+const historySize = 1000;
+
+export default {
+   namespaced: true,
+   strict: true,
+   state: {
+      history: persistentStore.get('history', {}),
+      favorites: persistentStore.get('favorites', {})
+   },
+   getters: {
+      getHistoryByWorkspace: state => uid => state.history[uid]
+   },
+   mutations: {
+      SET_HISTORY (state, args) {
+         if (!(args.uid in state.history))
+            state.history[args.uid] = [];
+
+         state.history[args.uid] = [
+            {
+               uid: uidGen('H'),
+               sql: args.query,
+               date: new Date(),
+               schema: args.schema
+            },
+            ...state.history[args.uid]
+         ];
+
+         if (state.history[args.uid].length > historySize)
+            state.history[args.uid] = state.history[args.uid].slice(0, historySize);
+
+         persistentStore.set('history', state.history);
+      },
+      DELETE_QUERY_FROM_HISTORY (state, query) {
+         state.history[query.workspace] = state.history[query.workspace].filter(q => q.uid !== query.uid);
+         persistentStore.set('history', state.history);
+      }
+   },
+   actions: {
+      saveHistory ({ commit, getters }, args) {
+         if (getters.getHistoryByWorkspace(args.uid) &&
+            getters.getHistoryByWorkspace(args.uid).length &&
+            getters.getHistoryByWorkspace(args.uid)[0].sql === args.query
+         ) return;
+         commit('SET_HISTORY', args);
+      },
+      deleteQueryFromHistory ({ commit }, query) {
+         commit('DELETE_QUERY_FROM_HISTORY', query);
+      }
+   }
+};

src/renderer/store/plugins/ipcExceptions.js

@@ -0,0 +1,7 @@
+import { ipcRenderer } from 'electron';
+
+export default store => {
+   ipcRenderer.on('unhandled-exception', (event, error) => {
+      store.dispatch('notifications/addNotification', { status: 'error', message: error.message });
+   });
+};