chore(release): 0.0.13

.gitattributes

@@ -1 +1,6 @@
-* text eol=lf
+* text eol=lf
+*.jpg binary
+*.png binary
+*.gif binary
+*.ico binary
+*.icns binary

.github/workflows/codeql-analysis.yml

@@ -31,11 +31,6 @@ jobs:
         # a pull request then we can checkout the head.
         fetch-depth: 2
 
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
       uses: github/codeql-action/init@v1

.travis.yml

@@ -1,9 +1,6 @@
 language: node_js
 node_js: 12
 
-before_install:
-  - npm install
-
 cache:
   directories:
     - node_modules
@@ -20,6 +17,9 @@ env:
 jobs:
   include:
     - stage: Test
+      before_install:
+        - sudo apt-get install libsecret-1-dev
+        - npm install
       script:
         - npm test
 
@@ -27,6 +27,9 @@ jobs:
       if: tag IS present
       os: linux
       services: docker
+      before_install:
+        - sudo apt-get install libsecret-1-dev
+        - npm install
       script:
         - docker run --rm --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') -v ${PWD}:/project -v ~/.cache/electron:/root/.cache/electron -v ~/.cache/electron-builder:/root/.cache/electron-builder electronuserland/builder:wine /bin/bash -c "npm run build -- --linux --win -p always"
       before_cache:
@@ -35,6 +38,8 @@ jobs:
     - stage: Deploy Mac
       if: tag IS present
       os: osx
+      before_install:
+        - npm install
       osx_image: xcode10.2
       script:
         - npm run build -- -p always

CHANGELOG.md

@@ -2,6 +2,41 @@
 
 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.0.13](https://github.com/Fabio286/antares/compare/v0.0.12...v0.0.13) (2021-01-06)
+
+
+### Features
+
+* option to toggle line wrap mode ([d94b49f](https://github.com/Fabio286/antares/commit/d94b49febf54b0200127859f2a8ed7ef591e56ab))
+* select definer in view creation/edit ([ab307f8](https://github.com/Fabio286/antares/commit/ab307f82b1d78c5f9571233090b6678a964bd674))
+* stored routines creation ([3bcd02f](https://github.com/Fabio286/antares/commit/3bcd02fc4ea9a4b780305212f906d6d78c7a8dae))
+* stored routines delete ([aa33850](https://github.com/Fabio286/antares/commit/aa3385028685417860b3ce985cc7a74f9da377ad))
+* stored routines edit ([82fdc0b](https://github.com/Fabio286/antares/commit/82fdc0bcd7514b321c1c9852a773adacf81baf87))
+* triggers creation ([d695c9f](https://github.com/Fabio286/antares/commit/d695c9f8d2418a6a4523a7a242fa1a8cba80e035))
+* triggers delete ([b32132a](https://github.com/Fabio286/antares/commit/b32132ad84d5798555b80eec3c624b681c37c339))
+* triggers edit ([3126625](https://github.com/Fabio286/antares/commit/3126625461f4b6d68d641b6b0eda8fcd390bb636))
+* views creation ([8c4aaec](https://github.com/Fabio286/antares/commit/8c4aaec167f58333a343b52927205b68137ad408))
+* views deletion ([dcf469e](https://github.com/Fabio286/antares/commit/dcf469ebed6252b4a496800206e0c34cd83b1f5e))
+* views edit ([56f2a27](https://github.com/Fabio286/antares/commit/56f2a27f0059cc10316204210db078a97408973c))
+
+
+### Bug Fixes
+
+* breadcrumb not change after table rename ([b6b7be0](https://github.com/Fabio286/antares/commit/b6b7be098ad5ab4d55bfe05a7f862f045c1f54da))
+* unable to rename views ([b7053bd](https://github.com/Fabio286/antares/commit/b7053bdf8036d027e1685d6b5080d6b927a80e08))
+* wrong new stored routine modal icon ([0ec2710](https://github.com/Fabio286/antares/commit/0ec2710872c692b3feac076a3250d3b760af4009))
+* wrong or duplicate fields in some queries ([0df2b83](https://github.com/Fabio286/antares/commit/0df2b836b15436a2397d6a2202bd049b5cd53de4))
+
+### [0.0.12](https://github.com/Fabio286/antares/compare/v0.0.11...v0.0.12) (2020-12-24)
+
+
+### Features
+
+* better security connections credentials storage ([fc35f27](https://github.com/Fabio286/antares/commit/fc35f271d7fe384cd786ce33547c0ef17135ddd8))
+* option to change editor theme ([a95b8d1](https://github.com/Fabio286/antares/commit/a95b8d188cfcc8f563ad73b4f0b676d068775d36))
+* option to toggle editor auto completion ([155154b](https://github.com/Fabio286/antares/commit/155154b43d0cd02ae875ded3ce865a37a999da5c))
+* query editor auto-completer for tables and columns ([cb1fce6](https://github.com/Fabio286/antares/commit/cb1fce6f998ea7332886820910e245ab19416a9d))
+
 ### [0.0.11](https://github.com/Fabio286/antares/compare/v0.0.10...v0.0.11) (2020-12-15)
 
 

README.md

@@ -33,9 +33,10 @@ An application created with minimalism and semplicity in mind, with features in
 - Database management (add/edit/delete).
 - Full tables management, including indexes and foreign keys.
 - Run queries on multiple tabs.
-- Query suggestions.
+- Query suggestions and auto complete.
 - Native dark theme.
 - Multi language.
+- Secure password storage.
 - Auto updates.
 
 ## Coming soon
@@ -44,13 +45,10 @@ This is a roadmap with major features will come in near future.
 
 - Stored procedures, views, schedulers and triggers support.
 - Users management (add/edit/delete).
-- More secure password storage.
 - Database tools (variables, process list...).
 - SSL and SSH tunnel support.
 - Support for other databases.
 - UI/UX improvements.
-- Improvements of query editor area.
-- Improvements of query suggestions.
 - Query history.
 - More context menu shortcuts.
 - More keyboard shortcuts.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "A cross-platform easy to use SQL client.",
   "license": "MIT",
   "repository": "https://github.com/Fabio286/antares.git",
@@ -48,11 +48,13 @@
   },
   "dependencies": {
     "@mdi/font": "^5.8.55",
+    "ace-builds": "^1.4.12",
     "electron-log": "^4.3.0",
+    "electron-store": "^6.0.1",
     "electron-updater": "^4.3.5",
+    "keytar": "^7.3.0",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
-    "monaco-editor": "^0.20.0",
     "mssql": "^6.2.3",
     "mysql": "^2.18.1",
     "pg": "^8.5.1",
@@ -78,7 +80,6 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.1.0",
-    "monaco-editor-webpack-plugin": "^1.9.1",
     "node-sass": "^5.0.0",
     "sass-loader": "^10.1.0",
     "standard-version": "^9.0.0",

src/common/fieldTypes.js

@@ -1,5 +1,5 @@
 export const TEXT = ['CHAR', 'VARCHAR'];
-export const LONG_TEXT = ['TEXT', 'MEDIUMTEXT', 'longtext'];
+export const LONG_TEXT = ['TEXT', 'MEDIUMTEXT', 'LONGTEXT'];
 
 export const NUMBER = ['INT', 'TINYINT', 'SMALLINT', 'MEDIUMINT', 'BIGINT', 'FLOAT', 'DOUBLE', 'DECIMAL', 'BOOL'];
 

src/main/index.js

@@ -2,7 +2,9 @@
 
 import { app, BrowserWindow, nativeImage } from 'electron';
 import * as path from 'path';
+import crypto from 'crypto';
 import { format as formatUrl } from 'url';
+import keytar from 'keytar';
 import ipcHandlers from './ipc-handlers';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -89,7 +91,14 @@ else {
    });
 
    // create main BrowserWindow when electron is ready
-   app.on('ready', () => {
+   app.on('ready', async () => {
+      let key = await keytar.getPassword('antares', 'user');
+
+      if (!key) {
+         key = crypto.randomBytes(16).toString('hex');
+         keytar.setPassword('antares', 'user', key);
+      }
+
       mainWindow = createMainWindow();
    });
 }

src/main/ipc-handlers/application.js

@@ -1,7 +1,13 @@
+import keytar from 'keytar';
 import { app, ipcMain } from 'electron';
 
 export default () => {
    ipcMain.on('close-app', () => {
       app.exit();
    });
+
+   ipcMain.on('get-key', async event => {
+      const key = await keytar.getPassword('antares', 'user');
+      event.returnValue = key;
+   });
 };

src/main/ipc-handlers/index.js

@@ -1,15 +1,23 @@
 import connection from './connection';
 import tables from './tables';
+import views from './views';
+import triggers from './triggers';
+import routines from './routines';
 import updates from './updates';
 import application from './application';
 import database from './database';
+import users from './users';
 
 const connections = {};
 
 export default () => {
    connection(connections);
    tables(connections);
+   views(connections);
+   triggers(connections);
+   routines(connections);
    database(connections);
+   users(connections);
    updates();
    application();
 };

src/main/ipc-handlers/routines.js

@@ -0,0 +1,43 @@
+import { ipcMain } from 'electron';
+
+export default (connections) => {
+   ipcMain.handle('get-routine-informations', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getRoutineInformations(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('drop-routine', async (event, params) => {
+      try {
+         await connections[params.uid].dropRoutine(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-routine', async (event, params) => {
+      try {
+         await connections[params.uid].alterRoutine(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-routine', async (event, params) => {
+      try {
+         await connections[params.uid].createRoutine(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/triggers.js

@@ -0,0 +1,43 @@
+import { ipcMain } from 'electron';
+
+export default (connections) => {
+   ipcMain.handle('get-trigger-informations', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getTriggerInformations(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('drop-trigger', async (event, params) => {
+      try {
+         await connections[params.uid].dropTrigger(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-trigger', async (event, params) => {
+      try {
+         await connections[params.uid].alterTrigger(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-trigger', async (event, params) => {
+      try {
+         await connections[params.uid].createTrigger(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/users.js

@@ -0,0 +1,15 @@
+import { ipcMain } from 'electron';
+
+export default (connections) => {
+   ipcMain.handle('get-users', async (event, uid) => {
+      try {
+         const result = await connections[uid].getUsers();
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         if (err.code === 'ER_TABLEACCESS_DENIED_ERROR')
+            return { status: 'success', response: [] };
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/views.js

@@ -0,0 +1,43 @@
+import { ipcMain } from 'electron';
+
+export default (connections) => {
+   ipcMain.handle('get-view-informations', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getViewInformations(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('drop-view', async (event, params) => {
+      try {
+         await connections[params.uid].dropView(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-view', async (event, params) => {
+      try {
+         await connections[params.uid].alterView(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-view', async (event, params) => {
+      try {
+         await connections[params.uid].createView(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/libs/clients/MySQLClient.js

@@ -36,21 +36,23 @@ export class MySQLClient extends AntaresCore {
     */
    async getStructure () {
       const { rows: databases } = await this.raw('SHOW DATABASES');
-      // TODO: SHOW TABLE STATUS FROM `{DATABASE_NAME}`;
-
-      const { rows: tables } = await this
-         .select('*')
-         .schema('information_schema')
-         .from('TABLES')
-         .orderBy({ TABLE_SCHEMA: 'ASC', TABLE_NAME: 'ASC' })
-         .run();
-
       const { rows: functions } = await this.raw('SHOW FUNCTION STATUS');
       const { rows: procedures } = await this.raw('SHOW PROCEDURE STATUS');
       const { rows: schedulers } = await this.raw('SELECT *, EVENT_SCHEMA AS `Db`, EVENT_NAME AS `Name` FROM information_schema.`EVENTS`');
 
+      const tablesArr = [];
       const triggersArr = [];
+
       for (const db of databases) {
+         let { rows: tables } = await this.raw(`SHOW TABLE STATUS FROM \`${db.Database}\``);
+         if (tables.length) {
+            tables = tables.map(table => {
+               table.Db = db.Database;
+               return table;
+            });
+            tablesArr.push(...tables);
+         }
+
          let { rows: triggers } = await this.raw(`SHOW TRIGGERS FROM \`${db.Database}\``);
          if (triggers.length) {
             triggers = triggers.map(trigger => {
@@ -63,9 +65,9 @@ export class MySQLClient extends AntaresCore {
 
       return databases.map(db => {
          // TABLES
-         const remappedTables = tables.filter(table => table.TABLE_SCHEMA === db.Database).map(table => {
+         const remappedTables = tablesArr.filter(table => table.Db === db.Database).map(table => {
             let tableType;
-            switch (table.TABLE_TYPE) {
+            switch (table.Comment) {
                case 'VIEW':
                   tableType = 'view';
                   break;
@@ -75,16 +77,16 @@ export class MySQLClient extends AntaresCore {
             }
 
             return {
-               name: table.TABLE_NAME,
+               name: table.Name,
                type: tableType,
-               rows: table.TABLE_ROWS,
-               created: table.CREATE_TIME,
-               updated: table.UPDATE_TIME,
-               engine: table.ENGINE,
-               comment: table.TABLE_COMMENT,
-               size: table.DATA_LENGTH + table.INDEX_LENGTH,
-               autoIncrement: table.AUTO_INCREMENT,
-               collation: table.TABLE_COLLATION
+               rows: table.Rows,
+               created: table.Create_time,
+               updated: table.Update_time,
+               engine: table.Engine,
+               comment: table.Comment,
+               size: table.Data_length + table.Index_length,
+               autoIncrement: table.Auto_increment,
+               collation: table.Collation
             };
          });
 
@@ -102,6 +104,20 @@ export class MySQLClient extends AntaresCore {
             };
          });
 
+         // FUNCTIONS
+         const remappedFunctions = functions.filter(func => func.Db === db.Database).map(func => {
+            return {
+               name: func.Name,
+               type: func.Type,
+               definer: func.Definer,
+               created: func.Created,
+               updated: func.Modified,
+               comment: func.Comment,
+               charset: func.character_set_client,
+               security: func.Security_type
+            };
+         });
+
          // SCHEDULERS
          const remappedSchedulers = schedulers.filter(scheduler => scheduler.Db === db.Database).map(scheduler => {
             return {
@@ -146,7 +162,7 @@ export class MySQLClient extends AntaresCore {
          return {
             name: db.Database,
             tables: remappedTables,
-            functions: functions.filter(func => func.Db === db.Database), // TODO: remap functions
+            functions: remappedFunctions,
             procedures: remappedProcedures,
             triggers: remappedTriggers,
             schedulers: remappedSchedulers
@@ -262,6 +278,255 @@ export class MySQLClient extends AntaresCore {
       });
    }
 
+   /**
+    * SELECT `user`, `host`, IF(LENGTH(password)>0, password, authentication_string) AS `password` FROM `mysql`.`user`
+    *
+    * @returns {Array.<Object>} users list
+    * @memberof MySQLClient
+    */
+   async getUsers () {
+      const { rows } = await this.raw('SELECT `user`, `host`, IF(LENGTH(password)>0, password, authentication_string) AS `password` FROM `mysql`.`user`');
+
+      return rows.map(row => {
+         return {
+            name: row.user,
+            host: row.host,
+            password: row.password
+         };
+      });
+   }
+
+   /**
+    * SHOW CREATE VIEW
+    *
+    * @returns {Array.<Object>} view informations
+    * @memberof MySQLClient
+    */
+   async getViewInformations ({ schema, view }) {
+      const sql = `SHOW CREATE VIEW \`${schema}\`.\`${view}\``;
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            algorithm: row['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
+            definer: row['Create View'].match(/(?<=DEFINER=).*?(?=\s)/gs)[0],
+            security: row['Create View'].match(/(?<=SQL SECURITY ).*?(?=\s)/gs)[0],
+            updateOption: row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs) ? row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs)[0] : '',
+            sql: row['Create View'].match(/(?<=AS ).*?$/gs)[0],
+            name: row.View
+         };
+      })[0];
+   }
+
+   /**
+    * DROP VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async dropView (params) {
+      const sql = `DROP VIEW \`${params.view}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async alterView (params) {
+      const { view } = params;
+      let sql = `ALTER ALGORITHM = ${view.algorithm}${view.definer ? ` DEFINER=${view.definer}` : ''} SQL SECURITY ${view.security} VIEW \`${view.oldName}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}`;
+
+      if (view.name !== view.oldName)
+         sql += `; RENAME TABLE \`${view.oldName}\` TO \`${view.name}\``;
+
+      return await this.raw(sql);
+   }
+
+   /**
+    * CREATE VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async createView (view) {
+      const sql = `CREATE ALGORITHM = ${view.algorithm} ${view.definer ? `DEFINER=${view.definer} ` : ''}SQL SECURITY ${view.security} VIEW \`${view.name}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * SHOW CREATE TRIGGER
+    *
+    * @returns {Array.<Object>} view informations
+    * @memberof MySQLClient
+    */
+   async getTriggerInformations ({ schema, trigger }) {
+      const sql = `SHOW CREATE TRIGGER \`${schema}\`.\`${trigger}\``;
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            definer: row['SQL Original Statement'].match(/(?<=DEFINER=).*?(?=\s)/gs)[0],
+            sql: row['SQL Original Statement'].match(/(BEGIN|begin)(.*)(END|end)/gs)[0],
+            name: row.Trigger,
+            table: row['SQL Original Statement'].match(/(?<=ON `).*?(?=`)/gs)[0],
+            event1: row['SQL Original Statement'].match(/(BEFORE|AFTER)/gs)[0],
+            event2: row['SQL Original Statement'].match(/(INSERT|UPDATE|DELETE)/gs)[0]
+         };
+      })[0];
+   }
+
+   /**
+    * DROP TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async dropTrigger (params) {
+      const sql = `DROP TRIGGER \`${params.trigger}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async alterTrigger (params) {
+      const { trigger } = params;
+      const tempTrigger = Object.assign({}, trigger);
+      tempTrigger.name = `Antares_${tempTrigger.name}_tmp`;
+
+      try {
+         await this.createTrigger(tempTrigger);
+         await this.dropTrigger({ trigger: tempTrigger.name });
+         await this.dropTrigger({ trigger: trigger.oldName });
+         await this.createTrigger(trigger);
+      }
+      catch (err) {
+         return Promise.reject(err);
+      }
+   }
+
+   /**
+    * CREATE TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async createTrigger (trigger) {
+      const sql = `CREATE ${trigger.definer ? `DEFINER=${trigger.definer} ` : ''}TRIGGER \`${trigger.name}\` ${trigger.event1} ${trigger.event2} ON \`${trigger.table}\` FOR EACH ROW ${trigger.sql}`;
+      return await this.raw(sql, { split: false });
+   }
+
+   /**
+    * SHOW CREATE PROCEDURE
+    *
+    * @returns {Array.<Object>} view informations
+    * @memberof MySQLClient
+    */
+   async getRoutineInformations ({ schema, routine }) {
+      const sql = `SHOW CREATE PROCEDURE \`${schema}\`.\`${routine}\``;
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         const parameters = row['Create Procedure']
+            .match(/(?<=\().*?(?=\))/s)[0]
+            .replaceAll('\r', '')
+            .replaceAll('\t', '')
+            .split(',')
+            .map(el => {
+               const param = el.split(' ');
+               const type = param[2] ? param[2].replace(')', '').split('(') : ['', null];
+
+               return {
+                  name: param[1] ? param[1].replaceAll('`', '') : '',
+                  type: type[0],
+                  length: +type[1],
+                  context: param[0] ? param[0].replace('\n', '') : ''
+               };
+            }).filter(el => el.name);
+
+         let dataAccess = 'CONTAINS SQL';
+         if (row['Create Procedure'].includes('NO SQL'))
+            dataAccess = 'NO SQL';
+         if (row['Create Procedure'].includes('READS SQL DATA'))
+            dataAccess = 'READS SQL DATA';
+         if (row['Create Procedure'].includes('MODIFIES SQL DATA'))
+            dataAccess = 'MODIFIES SQL DATA';
+
+         return {
+            definer: row['Create Procedure'].match(/(?<=DEFINER=).*?(?=\s)/gs)[0],
+            sql: row['Create Procedure'].match(/(BEGIN|begin)(.*)(END|end)/gs)[0],
+            parameters,
+            name: row.Procedure,
+            comment: row['Create Procedure'].match(/(?<=COMMENT ').*?(?=')/gs) ? row['Create Procedure'].match(/(?<=COMMENT ').*?(?=')/gs)[0] : '',
+            security: row['Create Procedure'].includes('SQL SECURITY INVOKER') ? 'INVOKER' : 'DEFINER',
+            deterministic: row['Create Procedure'].includes('DETERMINISTIC'),
+            dataAccess
+         };
+      })[0];
+   }
+
+   /**
+    * DROP PROCEDURE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async dropRoutine (params) {
+      const sql = `DROP PROCEDURE \`${params.routine}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER PROCEDURE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async alterRoutine (params) {
+      const { routine } = params;
+      const tempProcedure = Object.assign({}, routine);
+      tempProcedure.name = `Antares_${tempProcedure.name}_tmp`;
+
+      try {
+         await this.createRoutine(tempProcedure);
+         await this.dropRoutine({ routine: tempProcedure.name });
+         await this.dropRoutine({ routine: routine.oldName });
+         await this.createRoutine(routine);
+      }
+      catch (err) {
+         return Promise.reject(err);
+      }
+   }
+
+   /**
+    * CREATE PROCEDURE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async createRoutine (routine) {
+      const parameters = routine.parameters.reduce((acc, curr) => {
+         acc.push(`${curr.context} \`${curr.name}\` ${curr.type}${curr.length ? `(${curr.length})` : ''}`);
+         return acc;
+      }, []).join(',');
+
+      const sql = `CREATE ${routine.definer ? `DEFINER=${routine.definer} ` : ''}PROCEDURE \`${routine.name}\`(${parameters})
+         LANGUAGE SQL
+         ${routine.deterministic ? 'DETERMINISTIC' : 'NOT DETERMINISTIC'}
+         ${routine.dataAccess}
+         SQL SECURITY ${routine.security}
+         COMMENT '${routine.comment}'
+         ${routine.sql}`;
+
+      return await this.raw(sql, { split: false });
+   }
+
    /**
     * SHOW COLLATION
     *
@@ -563,6 +828,7 @@ export class MySQLClient extends AntaresCore {
     * @param {object} args
     * @param {boolean} args.nest
     * @param {boolean} args.details
+    * @param {boolean} args.split
     * @returns {Promise}
     * @memberof MySQLClient
     */
@@ -570,13 +836,14 @@ export class MySQLClient extends AntaresCore {
       args = {
          nest: false,
          details: false,
+         split: true,
          ...args
       };
       const nestTables = args.nest ? '.' : false;
       const resultsArr = [];
       let paramsArr = [];
       let selectedFields = [];
-      const queries = sql.split(';');
+      const queries = args.split ? sql.split(';') : [sql];
 
       if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
 
@@ -600,7 +867,7 @@ export class MySQLClient extends AntaresCore {
                            schema: field.db,
                            table: field.table,
                            orgTable: field.orgTable,
-                           type: 'varchar'
+                           type: 'VARCHAR'
                         };
                      })
                      : [];
@@ -630,13 +897,13 @@ export class MySQLClient extends AntaresCore {
 
                               let detailedFields = response.length
                                  ? selectedFields.map(selField => {
-                                    return response.find(field => field.name === selField.name && field.table === selField.table);
+                                    return response.find(field => field.name.toLowerCase() === selField.name.toLowerCase() && field.table === selField.table);
                                  }).filter(el => !!el)
                                  : [];
 
                               if (selectedFields.length) {
                                  detailedFields = detailedFields.map(field => {
-                                    const aliasObj = remappedFields.find(resField => resField.orgName === field.name);
+                                    const aliasObj = remappedFields.find(resField => resField.orgName === field.name && resField.orgTable === field.table);
                                     return {
                                        ...field,
                                        alias: aliasObj.name || field.name,
@@ -647,12 +914,18 @@ export class MySQLClient extends AntaresCore {
 
                               if (!detailedFields.length) {
                                  detailedFields = remappedFields.map(field => {
-                                    return {
-                                       ...field,
-                                       alias: field.name,
-                                       tableAlias: field.table
-                                    };
-                                 });
+                                    const isInFields = fieldsArr.some(f => field.name.toLowerCase() === f.name.toLowerCase() && field.table === f.table);
+
+                                    if (!isInFields) {
+                                       return {
+                                          ...field,
+                                          alias: field.name,
+                                          tableAlias: field.table
+                                       };
+                                    }
+                                    else
+                                       return false;
+                                 }).filter(Boolean);
                               }
 
                               fieldsArr = fieldsArr ? [...fieldsArr, ...detailedFields] : detailedFields;

src/renderer/components/BaseContextMenu.vue

@@ -69,75 +69,81 @@ export default {
 </script>
 
 <style lang="scss">
-  .context {
+.context {
+  display: flex;
+  color: $body-font-color;
+  font-size: 16px;
+  z-index: 400;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: fixed;
+  height: 100vh;
+  right: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  .context-container {
+    min-width: 100px;
+    z-index: 10;
+    box-shadow: 0 0 2px 0 #000;
+    padding: 0;
+    background: #1d1d1d;
+    border-radius: 0.1rem;
     display: flex;
-    color: $body-font-color;
-    font-size: 16px;
-    z-index: 400;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    position: fixed;
-    height: 100vh;
-    right: 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
+    flex-direction: column;
+    position: absolute;
+    pointer-events: initial;
 
-    .context-container {
-      min-width: 100px;
-      z-index: 10;
-      box-shadow: 0 0 2px 0 #000;
-      padding: 0;
-      background: #1d1d1d;
-      border-radius: 0.1rem;
+    .context-element {
       display: flex;
-      flex-direction: column;
-      position: absolute;
-      pointer-events: initial;
+      align-items: center;
+      padding: 0.1rem 0.3rem;
+      cursor: pointer;
+      justify-content: space-between;
+      position: relative;
 
-      .context-element {
-        display: flex;
-        align-items: center;
-        padding: 0.1rem 0.3rem;
-        cursor: pointer;
-        justify-content: space-between;
-        position: relative;
+      .context-submenu {
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        background: #1d1d1d;
+        box-shadow: 0 0 2px 0 #000;
+        min-width: 100px;
+      }
+
+      &:hover {
+        background: $primary-color;
 
         .context-submenu {
-          opacity: 0;
-          visibility: hidden;
-          transition: opacity 0.2s;
-          position: absolute;
-          left: 100%;
-          top: 0;
-          background: #1d1d1d;
-          box-shadow: 0 0 2px 0 #000;
-          min-width: 100px;
-        }
-
-        &:hover {
-          background: $primary-color;
-
-          .context-submenu {
-            display: block;
-            visibility: visible;
-            opacity: 1;
-          }
+          display: block;
+          visibility: visible;
+          opacity: 1;
         }
       }
     }
-
-    .context-overlay {
-      background: transparent;
-      bottom: 0;
-      cursor: default;
-      display: block;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
   }
 
+  .context-overlay {
+    background: transparent;
+    bottom: 0;
+    cursor: default;
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+
 </style>

src/renderer/components/ModalNewRoutine.vue

@@ -0,0 +1,147 @@
+<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 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 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 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 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: 'BEGIN\r\n\r\nEND',
+            parameters: [],
+            name: '',
+            comment: '',
+            security: 'DEFINER',
+            deterministic: false,
+            dataAccess: 'CONTAINS SQL'
+         },
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      }
+   },
+   mounted () {
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmNewRoutine () {
+         this.$emit('open-create-routine-editor', this.localRoutine);
+      }
+   }
+};
+</script>

src/renderer/components/ModalNewTable.vue

@@ -84,7 +84,6 @@ export default {
       ConfirmModal
    },
    props: {
-      table: String,
       workspace: Object
    },
    data () {

src/renderer/components/ModalNewTrigger.vue

@@ -0,0 +1,140 @@
+<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 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.event1" class="form-select">
+                        <option>BEFORE</option>
+                        <option>AFTER</option>
+                     </select>
+                     <select v-model="localTrigger.event2" class="form-select">
+                        <option>INSERT</option>
+                        <option>UPDATE</option>
+                        <option>DELETE</option>
+                     </select>
+                  </div>
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalNewTrigger',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      workspace: Object
+   },
+   data () {
+      return {
+         localTrigger: {
+            definer: '',
+            sql: 'BEGIN\r\n\r\nEND',
+            name: '',
+            table: '',
+            event1: 'BEFORE',
+            event2: 'INSERT'
+         },
+         isOptionsChanging: false
+      };
+   },
+   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') : [];
+      }
+   },
+   mounted () {
+      this.localTrigger.table = this.schemaTables.length ? this.schemaTables[0].name : '';
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmNewTrigger () {
+         this.$emit('open-create-trigger-editor', this.localTrigger);
+      }
+   }
+};
+</script>

src/renderer/components/ModalNewView.vue

@@ -0,0 +1,192 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="medium"
+      @confirm="confirmOptionsChange"
+      @hide="$emit('close')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-eye-plus mr-1" /> {{ $t('message.createNewView') }}
+         </div>
+      </template>
+      <div :slot="'body'">
+         <div class="container">
+            <div class="columns mb-4">
+               <div class="column col-6">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('word.name') }}</label>
+                     <input
+                        ref="firstInput"
+                        v-model="localView.name"
+                        class="form-input"
+                        type="text"
+                     >
+                  </div>
+               </div>
+               <div class="column col-6">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('word.definer') }}</label>
+                     <select v-model="localView.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>
+                  </div>
+               </div>
+            </div>
+            <div class="columns">
+               <div class="column col-4">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.security"
+                           type="radio"
+                           name="security"
+                           value="DEFINER"
+                        >
+                        <i class="form-icon" /> DEFINER
+                     </label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.security"
+                           type="radio"
+                           name="security"
+                           value="INVOKER"
+                        >
+                        <i class="form-icon" /> INVOKER
+                     </label>
+                  </div>
+               </div>
+               <div class="column col-4">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('word.algorithm') }}</label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.algorithm"
+                           type="radio"
+                           name="algorithm"
+                           value="UNDEFINED"
+                        >
+                        <i class="form-icon" /> UNDEFINED
+                     </label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.algorithm"
+                           type="radio"
+                           value="MERGE"
+                           name="algorithm"
+                        >
+                        <i class="form-icon" /> MERGE
+                     </label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.algorithm"
+                           type="radio"
+                           value="TEMPTABLE"
+                           name="algorithm"
+                        >
+                        <i class="form-icon" /> TEMPTABLE
+                     </label>
+                  </div>
+               </div>
+               <div class="column col-4">
+                  <div class="form-group">
+                     <label class="form-label">{{ $t('message.updateOption') }}</label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.updateOption"
+                           type="radio"
+                           name="update"
+                           value=""
+                        >
+                        <i class="form-icon" /> None
+                     </label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.updateOption"
+                           type="radio"
+                           name="update"
+                           value="CASCADED"
+                        >
+                        <i class="form-icon" /> CASCADED
+                     </label>
+                     <label class="form-radio">
+                        <input
+                           v-model="localView.updateOption"
+                           type="radio"
+                           name="update"
+                           value="LOCAL"
+                        >
+                        <i class="form-icon" /> LOCAL
+                     </label>
+                  </div>
+               </div>
+            </div>
+         </div>
+         <div class="workspace-query-results column col-12 mt-2">
+            <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
+            <QueryEditor
+               ref="queryEditor"
+               :value.sync="localView.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: 'ModalNewView',
+   components: {
+      ConfirmModal,
+      QueryEditor
+   },
+   props: {
+      workspace: Object
+   },
+   data () {
+      return {
+         localView: {
+            algorithm: 'UNDEFINED',
+            definer: '',
+            security: 'DEFINER',
+            updateOption: '',
+            sql: '',
+            name: ''
+         },
+         isOptionsChanging: false,
+         editorHeight: 300
+      };
+   },
+   computed: {
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      }
+   },
+   mounted () {
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmOptionsChange () {
+         this.$emit('open-create-view-editor', this.localView);
+      }
+   }
+};
+</script>

src/renderer/components/ModalSettings.vue

@@ -45,59 +45,154 @@
                      </li>
                   </ul>
                </div>
-
                <div v-if="selectedTab === 'general'" class="panel-body py-4">
-                  <form class="form-horizontal">
-                     <div class="col-8 col-sm-12">
-                        <div class="form-group mb-4">
-                           <div class="col-6 col-sm-12">
-                              <label class="form-label">
-                                 <i class="mdi mdi-18px mdi-translate mr-1" />
-                                 {{ $t('word.language') }}:
-                              </label>
-                           </div>
-                           <div class="col-6 col-sm-12">
-                              <select
-                                 v-model="localLocale"
-                                 class="form-select"
-                                 @change="changeLocale(localLocale)"
-                              >
-                                 <option
-                                    v-for="(locale, key) in locales"
-                                    :key="key"
-                                    :value="locale.code"
+                  <div class="container">
+                     <form class="form-horizontal columns">
+                        <div class="column col-12 h6 text-uppercase mb-1">
+                           {{ $t('word.application') }}
+                        </div>
+                        <div class="column col-8 col-sm-12 mb-2">
+                           <div class="form-group mb-4">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    <i class="mdi mdi-18px mdi-translate mr-1" />
+                                    {{ $t('word.language') }}:
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <select
+                                    v-model="localLocale"
+                                    class="form-select"
+                                    @change="changeLocale(localLocale)"
                                  >
-                                    {{ locale.name }}
-                                 </option>
-                              </select>
+                                    <option
+                                       v-for="(locale, key) in locales"
+                                       :key="key"
+                                       :value="locale.code"
+                                    >
+                                       {{ locale.name }}
+                                    </option>
+                                 </select>
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.notificationsTimeout') }}:
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <div class="input-group">
+                                    <input
+                                       v-model="localTimeout"
+                                       class="form-input"
+                                       type="number"
+                                       min="1"
+                                       @focusout="checkNotificationsTimeout"
+                                    >
+                                    <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                                 </div>
+                              </div>
                            </div>
                         </div>
-                        <div class="form-group">
-                           <div class="col-6 col-sm-12">
-                              <label class="form-label">
-                                 {{ $t('message.notificationsTimeout') }}:
-                              </label>
+
+                        <div class="column col-12 h6 mt-4 text-uppercase mb-1">
+                           {{ $t('word.editor') }}
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('word.autoCompletion') }}:
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
+                                    <input type="checkbox" :checked="selectedAutoComplete">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
                            </div>
-                           <div class="col-6 col-sm-12">
-                              <div class="input-group">
-                                 <input
-                                    v-model="localTimeout"
-                                    class="form-input"
-                                    type="number"
-                                    min="1"
-                                    @focusout="checkNotificationsTimeout"
-                                 >
-                                 <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.wrapLongLines') }}:
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
+                                    <input type="checkbox" :checked="selectedLineWrap">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
+                        </div>
+                     </form>
+                  </div>
+               </div>
+
+               <div v-if="selectedTab === 'themes'" class="panel-body py-4">
+                  <div class="container">
+                     <div class="columns">
+                        <div class="column col-12 h6 text-uppercase mb-2">
+                           {{ $t('message.applicationTheme') }}
+                        </div>
+                        <div class="column col-6 c-hand theme-block" :class="{'selected': applicationTheme === 'dark'}">
+                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <div class="theme-name">
+                              <i class="mdi mdi-moon-waning-crescent mdi-48px" />
+                              <div class="h6 mt-4">
+                                 {{ $t('word.dark') }}
+                              </div>
+                           </div>
+                        </div>
+                        <div class="column col-6 theme-block disabled" :class="{'selected': applicationTheme === 'light'}">
+                           <div class="theme-name">
+                              <i class="mdi mdi-white-balance-sunny mdi-48px" />
+                              <div class="h6 mt-4">
+                                 {{ $t('word.light') }} (Coming)
                               </div>
                            </div>
                         </div>
                      </div>
-                  </form>
-               </div>
 
-               <div v-if="selectedTab === 'themes'" class="panel-body py-4">
-                  <div class="text-center">
-                     <p>In future releases</p>
+                     <div class="columns mt-4">
+                        <div class="column col-12 h6 text-uppercase mb-2 mt-4">
+                           {{ $t('message.editorTheme') }}
+                        </div>
+                        <div class="column col-6 h5 mb-4">
+                           <select
+                              v-model="localEditorTheme"
+                              class="form-select"
+                              @change="changeEditorTheme(localEditorTheme)"
+                           >
+                              <optgroup
+                                 v-for="group in editorThemes"
+                                 :key="group.group"
+                                 :label="group.group"
+                              >
+                                 <option
+                                    v-for="theme in group.themes"
+                                    :key="theme.name"
+                                    :value="theme.code"
+                                    :selected="editorTheme === theme.code"
+                                 >
+                                    {{ theme.name }}
+                                 </option>
+                              </optgroup>
+                           </select>
+                        </div>
+                        <div class="column col-12">
+                           <QueryEditor
+                              :value="exampleQuery"
+                              :workspace="workspace"
+                              :read-only="true"
+                              :height="270"
+                           />
+                        </div>
+                     </div>
                   </div>
                </div>
 
@@ -127,18 +222,70 @@
 import { mapActions, mapGetters } from 'vuex';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
+import QueryEditor from '@/components/QueryEditor';
 const { shell } = require('electron');
 
 export default {
    name: 'ModalSettings',
    components: {
-      ModalSettingsUpdate
+      ModalSettingsUpdate,
+      QueryEditor
    },
    data () {
       return {
          localLocale: null,
          localTimeout: null,
-         selectedTab: 'general'
+         localEditorTheme: null,
+         selectedTab: 'general',
+         editorThemes: [
+            {
+               group: this.$t('word.light'),
+               themes: [
+                  { code: 'chrome', name: 'Chrome' },
+                  { code: 'clouds', name: 'Clouds' },
+                  { code: 'crimson_editor', name: 'Crimson Editor' },
+                  { code: 'dawn', name: 'Dawn' },
+                  { code: 'dreamweaver', name: 'Dreamweaver' },
+                  { code: 'eclupse', name: 'Eclipse' },
+                  { code: 'github', name: 'GitHub' },
+                  { code: 'iplastic', name: 'IPlastic' },
+                  { code: 'solarized_light', name: 'Solarized Light' },
+                  { code: 'textmate', name: 'TextMate' },
+                  { code: 'tomorrow', name: 'Tomorrow' },
+                  { code: 'xcode', name: 'Xcode' },
+                  { code: 'kuroir', name: 'Kuroir' },
+                  { code: 'katzenmilch', name: 'KatzenMilch' },
+                  { code: 'sqlserver', name: 'SQL Server' }
+               ]
+            },
+            {
+               group: this.$t('word.dark'),
+               themes: [
+                  { code: 'ambiance', name: 'Ambiance' },
+                  { code: 'chaos', name: 'Chaos' },
+                  { code: 'clouds_midnight', name: 'Clouds Midnight' },
+                  { code: 'dracula', name: 'Dracula' },
+                  { code: 'cobalt', name: 'Cobalt' },
+                  { code: 'gruvbox', name: 'Gruvbox' },
+                  { code: 'gob', name: 'Green on Black' },
+                  { code: 'idle_fingers', name: 'Idle Fingers' },
+                  { code: 'kr_theme', name: 'krTheme' },
+                  { code: 'merbivore', name: 'Merbivore' },
+                  { code: 'mono_industrial', name: 'Mono Industrial' },
+                  { code: 'monokai', name: 'Monokai' },
+                  { code: 'nord_dark', name: 'Nord Dark' },
+                  { code: 'pastel_on_dark', name: 'Pastel on Dark' },
+                  { code: 'solarized_dark', name: 'Solarized Dark' },
+                  { code: 'terminal', name: 'Terminal' },
+                  { code: 'tomorrow_night', name: 'Tomorrow Night' },
+                  { code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
+                  { code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
+                  { code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
+                  { code: 'twilight', name: 'Twilight' },
+                  { code: 'vibrant_ink', name: 'Vibrant Ink' }
+               ]
+            }
+         ]
       };
    },
    computed: {
@@ -147,8 +294,14 @@ export default {
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
+         selectedAutoComplete: 'settings/getAutoComplete',
+         selectedLineWrap: 'settings/getLineWrap',
          notificationsTimeout: 'settings/getNotificationsTimeout',
-         updateStatus: 'application/getUpdateStatus'
+         applicationTheme: 'settings/getApplicationTheme',
+         editorTheme: 'settings/getEditorTheme',
+         updateStatus: 'application/getUpdateStatus',
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
       }),
       locales () {
          const locales = [];
@@ -159,11 +312,32 @@ export default {
       },
       hasUpdates () {
          return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
+      },
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      exampleQuery () {
+         return `-- This is an example
+SELECT 
+    employee.id,
+    employee.first_name,
+    employee.last_name,
+    SUM(DATEDIFF("SECOND", call.start, call.end)) AS call_duration
+FROM call
+INNER JOIN employee ON call.employee_id = employee.id
+GROUP BY
+    employee.id,
+    employee.first_name,
+    employee.last_name
+ORDER BY
+    employee.id ASC;
+`;
       }
    },
    created () {
       this.localLocale = this.selectedLocale;
       this.localTimeout = this.notificationsTimeout;
+      this.localEditorTheme = this.editorTheme;
       this.selectedTab = this.selectedSettingTab;
       window.addEventListener('keydown', this.onKey);
    },
@@ -174,6 +348,9 @@ export default {
       ...mapActions({
          closeModal: 'application/hideSettingModal',
          changeLocale: 'settings/changeLocale',
+         changeAutoComplete: 'settings/changeAutoComplete',
+         changeLineWrap: 'settings/changeLineWrap',
+         changeEditorTheme: 'settings/changeEditorTheme',
          updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
       }),
       selectTab (tab) {
@@ -192,6 +369,12 @@ export default {
          e.stopPropagation();
          if (e.key === 'Escape')
             this.closeModal();
+      },
+      toggleAutoComplete () {
+         this.changeAutoComplete(!this.selectedAutoComplete);
+      },
+      toggleLineWrap () {
+         this.changeLineWrap(!this.selectedLineWrap);
       }
    }
 };
@@ -205,6 +388,34 @@ export default {
     .panel-body {
       height: calc(70vh - 70px);
       overflow: auto;
+
+      .theme-block {
+        position: relative;
+        text-align: center;
+
+        &.selected {
+          img {
+            box-shadow: 0 0 0 3px $primary-color;
+          }
+        }
+
+        &.disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+
+        .theme-name {
+          position: absolute;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          top: 0;
+          height: 100%;
+          width: 100%;
+          text-shadow: 0 0 8px #000;
+        }
+      }
     }
 
     .badge::after {

src/renderer/components/QueryEditor.vue

@@ -1,43 +1,180 @@
 <template>
    <div class="editor-wrapper">
-      <div ref="editor" class="editor" />
+      <div
+         ref="editor"
+         class="editor"
+         :style="{height: `${height}px`}"
+      />
    </div>
 </template>
 
 <script>
-
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import { completionItemProvider } from '@/suggestions/sql';
-
-monaco.languages.registerCompletionItemProvider('sql', completionItemProvider(monaco));
+import * as ace from 'ace-builds';
+import 'ace-builds/webpack-resolver';
+import '../libs/ext-language_tools';
+import { mapGetters } from 'vuex';
+import Tables from '@/ipc-api/Tables';
 
 export default {
    name: 'QueryEditor',
    props: {
       value: String,
-      autoFocus: { type: Boolean, default: false }
+      workspace: Object,
+      schema: { type: String, default: '' },
+      autoFocus: { type: Boolean, default: false },
+      readOnly: { type: Boolean, default: false },
+      height: { type: Number, default: 200 }
    },
    data () {
       return {
-         editor: null
+         editor: null,
+         fields: [],
+         baseCompleter: []
       };
    },
+   computed: {
+      ...mapGetters({
+         editorTheme: 'settings/getEditorTheme',
+         autoComplete: 'settings/getAutoComplete',
+         lineWrap: 'settings/getLineWrap'
+      }),
+      tables () {
+         return this.workspace
+            ? this.workspace.structure.filter(schema => schema.name === this.schema)
+               .reduce((acc, curr) => {
+                  acc.push(...curr.tables);
+                  return acc;
+               }, []).map(table => {
+                  return {
+                     name: table.name,
+                     comment: table.comment,
+                     type: table.type,
+                     fields: []
+                  };
+               })
+            : [];
+      },
+      mode () {
+         switch (this.workspace.client) {
+            case 'mysql':
+            case 'maria':
+               return 'mysql';
+            case 'mssql':
+               return 'sqlserver';
+            case 'pg':
+               return 'pgsql';
+            default:
+               return 'sql';
+         }
+      },
+      lastWord () {
+         const words = this.value.split(' ');
+         return words[words.length - 1];
+      },
+      isLastWordATable () {
+         return /\w+\.\w*/gm.test(this.lastWord);
+      },
+      fieldsCompleter () {
+         return {
+            getCompletions: (editor, session, pos, prefix, callback) => {
+               const completions = [];
+               this.fields.forEach(field => {
+                  completions.push({
+                     value: field,
+                     meta: 'column',
+                     score: 1000
+                  });
+               });
+               callback(null, completions);
+            }
+         };
+      }
+   },
+   watch: {
+      editorTheme () {
+         if (this.editor)
+            this.editor.setTheme(`ace/theme/${this.editorTheme}`);
+      },
+      autoComplete () {
+         if (this.editor) {
+            this.editor.setOptions({
+               enableLiveAutocompletion: this.autoComplete
+            });
+         }
+      },
+      lineWrap () {
+         if (this.editor) {
+            this.editor.setOptions({
+               wrap: this.lineWrap
+            });
+         }
+      }
+   },
    mounted () {
-      this.editor = monaco.editor.create(this.$refs.editor, {
+      this.editor = ace.edit(this.$refs.editor, {
+         mode: `ace/mode/${this.mode}`,
+         theme: `ace/theme/${this.editorTheme}`,
          value: this.value,
-         language: 'sql',
-         theme: 'vs-dark',
-         autoIndent: true,
-         minimap: {
-            enabled: false
-         },
-         contextmenu: false,
-         wordBasedSuggestions: true,
-         acceptSuggestionOnEnter: 'smart',
-         quickSuggestions: true
+         fontSize: '14px',
+         printMargin: false,
+         readOnly: this.readOnly
       });
 
-      this.editor.onDidChangeModelContent(e => {
+      this.editor.setOptions({
+         enableBasicAutocompletion: true,
+         wrap: this.lineWrap,
+         enableSnippets: true,
+         enableLiveAutocompletion: this.autoComplete
+      });
+
+      this.editor.completers.push({
+         getCompletions: (editor, session, pos, prefix, callback) => {
+            const completions = [];
+            this.tables.forEach(table => {
+               completions.push({
+                  value: table.name,
+                  meta: table.type,
+                  caption: table.comment
+               });
+            });
+            callback(null, completions);
+         }
+      });
+
+      this.baseCompleter = this.editor.completers;
+
+      this.editor.commands.on('afterExec', e => {
+         if (['insertstring', 'backspace', 'del'].includes(e.command.name)) {
+            if (this.isLastWordATable || e.args === '.') {
+               if (e.args !== ' ') {
+                  const table = this.tables.find(t => t.name === this.lastWord.split('.').pop());
+
+                  if (table) {
+                     const params = {
+                        uid: this.workspace.uid,
+                        schema: this.schema,
+                        table: table.name
+                     };
+
+                     Tables.getTableColumns(params).then(res => {
+                        if (res.response.length)
+                           this.fields = res.response.map(field => field.name);
+                        this.editor.completers = [this.fieldsCompleter];
+                        this.editor.execCommand('startAutocomplete');
+                     }).catch(console.log);
+                  }
+                  else
+                     this.editor.completers = this.baseCompleter;
+               }
+               else
+                  this.editor.completers = this.baseCompleter;
+            }
+            else
+               this.editor.completers = this.baseCompleter;
+         }
+      });
+
+      this.editor.session.on('change', () => {
          const content = this.editor.getValue();
          this.$emit('update:value', content);
       });
@@ -45,33 +182,41 @@ export default {
       if (this.autoFocus) {
          setTimeout(() => {
             this.editor.focus();
+            this.editor.resize();
          }, 20);
       }
-   },
-   beforeDestroy () {
-      this.editor && this.editor.dispose();
+
+      setTimeout(() => {
+         this.editor.resize();
+      }, 20);
    }
 };
 </script>
 
 <style lang="scss">
-  .editor-wrapper {
-    border-bottom: 1px solid #444;
+.editor-wrapper {
+  border-bottom: 1px solid #444;
 
-    .editor {
-      height: 200px;
-      width: 100%;
-    }
+  .editor {
+    width: 100%;
   }
+}
 
-  .CodeMirror {
-    .CodeMirror-scroll {
-      max-width: 100%;
-    }
+.ace_.mdi {
+  display: inline-block;
+  width: 17px;
+}
 
-    .CodeMirror-line {
-      word-break: break-word !important;
-      white-space: pre-wrap !important;
-    }
-  }
+.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
+  background-color: #c9561a99;
+}
+
+.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
+  background-color: #c9571a33;
+  border: none;
+}
+
+.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
+  color: #e0d00c;
+}
 </style>

src/renderer/components/Workspace.vue

@@ -13,25 +13,25 @@
                </a>
             </li>
             <li
-               v-if="workspace.breadcrumbs.table"
+               v-if="schemaChild"
                class="tab-item"
                :class="{'active': selectedTab === 'prop'}"
                @click="selectTab({uid: workspace.uid, tab: 'prop'})"
             >
                <a class="tab-link">
                   <i class="mdi mdi-18px mdi-tune mr-1" />
-                  <span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
+                  <span :title="schemaChild">{{ $t('word.properties').toUpperCase() }}: {{ schemaChild }}</span>
                </a>
             </li>
             <li
-               v-if="workspace.breadcrumbs.table"
+               v-if="workspace.breadcrumbs.table || workspace.breadcrumbs.view"
                class="tab-item"
                :class="{'active': selectedTab === 'data'}"
                @click="selectTab({uid: workspace.uid, tab: 'data'})"
             >
                <a class="tab-link">
-                  <i class="mdi mdi-18px mdi-table mr-1" />
-                  <span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
+                  <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
+                  <span :title="schemaChild">{{ $t('word.data').toUpperCase() }}: {{ schemaChild }}</span>
                </a>
             </li>
             <li
@@ -66,15 +66,33 @@
             </li>
          </ul>
          <WorkspacePropsTab
-            v-show="selectedTab === 'prop'"
+            v-show="selectedTab === 'prop' && workspace.breadcrumbs.table"
             :is-selected="selectedTab === 'prop'"
             :connection="connection"
             :table="workspace.breadcrumbs.table"
          />
+         <WorkspacePropsTabView
+            v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
+            :is-selected="selectedTab === 'prop'"
+            :connection="connection"
+            :view="workspace.breadcrumbs.view"
+         />
+         <WorkspacePropsTabTrigger
+            v-show="selectedTab === 'prop' && workspace.breadcrumbs.trigger"
+            :is-selected="selectedTab === 'prop'"
+            :connection="connection"
+            :trigger="workspace.breadcrumbs.trigger"
+         />
+         <WorkspacePropsTabRoutine
+            v-show="selectedTab === 'prop' && workspace.breadcrumbs.procedure"
+            :is-selected="selectedTab === 'prop'"
+            :connection="connection"
+            :routine="workspace.breadcrumbs.procedure"
+         />
          <WorkspaceTableTab
             v-show="selectedTab === 'data'"
             :connection="connection"
-            :table="workspace.breadcrumbs.table"
+            :table="workspace.breadcrumbs.table || workspace.breadcrumbs.view"
          />
          <WorkspaceQueryTab
             v-for="tab of queryTabs"
@@ -94,6 +112,9 @@ import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
 import WorkspacePropsTab from '@/components/WorkspacePropsTab';
+import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
+import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
+import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
 
 export default {
    name: 'Workspace',
@@ -101,7 +122,10 @@ export default {
       WorkspaceExploreBar,
       WorkspaceQueryTab,
       WorkspaceTableTab,
-      WorkspacePropsTab
+      WorkspacePropsTab,
+      WorkspacePropsTabView,
+      WorkspacePropsTabTrigger,
+      WorkspacePropsTabRoutine
    },
    props: {
       connection: Object
@@ -123,7 +147,15 @@ export default {
          return this.selectedWorkspace === this.connection.uid;
       },
       selectedTab () {
-         if (this.workspace.breadcrumbs.table === null && ['data', 'prop'].includes(this.workspace.selected_tab))
+         if (
+            this.workspace.breadcrumbs.table === null &&
+            this.workspace.breadcrumbs.view === null &&
+            this.workspace.breadcrumbs.trigger === null &&
+            this.workspace.breadcrumbs.procedure === null &&
+            this.workspace.breadcrumbs.function === null &&
+            this.workspace.breadcrumbs.scheduler === null &&
+            ['data', 'prop'].includes(this.workspace.selected_tab)
+         )
             return this.queryTabs[0].uid;
 
          return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) ||
@@ -133,6 +165,13 @@ export default {
       },
       queryTabs () {
          return this.workspace.tabs.filter(tab => tab.type === 'query');
+      },
+      schemaChild () {
+         for (const key in this.workspace.breadcrumbs) {
+            if (key === 'schema') continue;
+            if (this.workspace.breadcrumbs[key]) return this.workspace.breadcrumbs[key];
+         }
+         return false;
       }
    },
    async created () {
@@ -193,6 +232,7 @@ export default {
       align-items: flex-start;
       flex-wrap: nowrap;
       overflow: auto;
+      margin-bottom: 0;
 
       &::-webkit-scrollbar {
         width: 2px;

src/renderer/components/WorkspaceExploreBar.vue

@@ -40,6 +40,7 @@
                :connection="connection"
                @show-database-context="openDatabaseContext"
                @show-table-context="openTableContext"
+               @show-misc-context="openMiscContext"
             />
          </div>
       </div>
@@ -54,12 +55,33 @@
          @close="hideCreateTableModal"
          @open-create-table-editor="openCreateTableEditor"
       />
+      <ModalNewView
+         v-if="isNewViewModal"
+         :workspace="workspace"
+         @close="hideCreateViewModal"
+         @open-create-view-editor="openCreateViewEditor"
+      />
+      <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"
+      />
       <DatabaseContext
          v-if="isDatabaseContext"
          :selected-database="selectedDatabase"
          :context-event="databaseContextEvent"
          @close-context="closeDatabaseContext"
          @show-create-table-modal="showCreateTableModal"
+         @show-create-view-modal="showCreateViewModal"
+         @show-create-trigger-modal="showCreateTriggerModal"
+         @show-create-routine-modal="showCreateRoutineModal"
          @reload="refresh"
       />
       <TableContext
@@ -69,19 +91,35 @@
          @close-context="closeTableContext"
          @reload="refresh"
       />
+      <MiscContext
+         v-if="isMiscContext"
+         :selected-misc="selectedMisc"
+         :context-event="miscContextEvent"
+         @close-context="closeMiscContext"
+         @reload="refresh"
+      />
    </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import _ from 'lodash';
+import _ from 'lodash';// TODO: remove
+
 import Tables from '@/ipc-api/Tables';
+import Views from '@/ipc-api/Views';
+import Triggers from '@/ipc-api/Triggers';
+import Routines from '@/ipc-api/Routines';
+
 import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
 import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
 import DatabaseContext from '@/components/WorkspaceExploreBarDatabaseContext';
 import TableContext from '@/components/WorkspaceExploreBarTableContext';
+import MiscContext from '@/components/WorkspaceExploreBarMiscContext';
 import ModalNewDatabase from '@/components/ModalNewDatabase';
 import ModalNewTable from '@/components/ModalNewTable';
+import ModalNewView from '@/components/ModalNewView';
+import ModalNewTrigger from '@/components/ModalNewTrigger';
+import ModalNewRoutine from '@/components/ModalNewRoutine';
 
 export default {
    name: 'WorkspaceExploreBar',
@@ -90,8 +128,12 @@ export default {
       WorkspaceExploreBarDatabase,
       DatabaseContext,
       TableContext,
+      MiscContext,
       ModalNewDatabase,
-      ModalNewTable
+      ModalNewTable,
+      ModalNewView,
+      ModalNewTrigger,
+      ModalNewRoutine
    },
    props: {
       connection: Object,
@@ -100,15 +142,25 @@ export default {
    data () {
       return {
          isRefreshing: false,
+
          isNewDBModal: false,
          isNewTableModal: false,
+         isNewViewModal: false,
+         isNewTriggerModal: false,
+         isNewRoutineModal: false,
+
          localWidth: null,
          isDatabaseContext: false,
          isTableContext: false,
+         isMiscContext: false,
+
          databaseContextEvent: null,
          tableContextEvent: null,
+         miscContextEvent: null,
+
          selectedDatabase: '',
-         selectedTable: ''
+         selectedTable: null,
+         selectedMisc: null
       };
    },
    computed: {
@@ -215,6 +267,83 @@ export default {
       },
       closeTableContext () {
          this.isTableContext = false;
+      },
+      openMiscContext (payload) {
+         this.selectedMisc = payload.misc;
+         this.miscContextEvent = payload.event;
+         this.isMiscContext = true;
+      },
+      closeMiscContext () {
+         this.isMiscContext = false;
+      },
+      showCreateViewModal () {
+         this.closeDatabaseContext();
+         this.isNewViewModal = true;
+      },
+      hideCreateViewModal () {
+         this.isNewViewModal = false;
+      },
+      async openCreateViewEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Views.createView(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, view: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
+      },
+      showCreateTriggerModal () {
+         this.closeDatabaseContext();
+         this.isNewTriggerModal = true;
+      },
+      hideCreateTriggerModal () {
+         this.isNewTriggerModal = false;
+      },
+      async openCreateTriggerEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Triggers.createTrigger(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, trigger: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
+      },
+      showCreateRoutineModal () {
+         this.closeDatabaseContext();
+         this.isNewRoutineModal = true;
+      },
+      hideCreateRoutineModal () {
+         this.isNewRoutineModal = false;
+      },
+      async openCreateRoutineEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Routines.createRoutine(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, procedure: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
       }
    }
 };

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -17,20 +17,136 @@
                   v-for="table of database.tables"
                   :key="table.name"
                   class="menu-item"
-                  :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.table === table.name}"
-                  @click="setBreadcrumbs({schema: database.name, table: table.name})"
-                  @contextmenu.prevent="showTableContext($event, table.name)"
+                  :class="{'text-bold': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
+                  @click="setBreadcrumbs({schema: database.name, [table.type]: table.name})"
+                  @contextmenu.prevent="showTableContext($event, table)"
                >
                   <a class="table-name">
                      <i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
                      <span>{{ table.name }}</span>
                   </a>
-                  <div class="table-size  tooltip tooltip-left mr-1" :data-tooltip="formatBytes(table.size)">
+                  <div
+                     v-if="table.type === 'table'"
+                     class="table-size  tooltip tooltip-left mr-1"
+                     :data-tooltip="formatBytes(table.size)"
+                  >
                      <div class="pie" :style="piePercentage(table.size)" />
                   </div>
                </li>
             </ul>
          </div>
+
+         <div v-if="database.triggers.length" class="database-misc">
+            <details class="accordion">
+               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger}">
+                  <i class="misc-icon mdi mdi-18px mdi-folder-cog mr-1" />
+                  {{ $tc('word.trigger', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="trigger of database.triggers"
+                           :key="trigger.name"
+                           class="menu-item"
+                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
+                           @click="setBreadcrumbs({schema: database.name, trigger: trigger.name})"
+                           @contextmenu.prevent="showMiscContext($event, {...trigger, type: 'trigger'})"
+                        >
+                           <a class="table-name">
+                              <i class="table-icon mdi mdi-table-cog mdi-18px mr-1" />
+                              <span>{{ trigger.name }}</span>
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
+
+         <div v-if="database.procedures.length" class="database-misc">
+            <details class="accordion">
+               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.procedure}">
+                  <i class="misc-icon mdi mdi-18px mdi-folder-sync mr-1" />
+                  {{ $tc('word.storedRoutine', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="procedure of database.procedures"
+                           :key="procedure.name"
+                           class="menu-item"
+                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.procedure === procedure.name}"
+                           @click="setBreadcrumbs({schema: database.name, procedure: procedure.name})"
+                           @contextmenu.prevent="showMiscContext($event, {...procedure, type: 'procedure'})"
+                        >
+                           <a class="table-name">
+                              <i class="table-icon mdi mdi-sync-circle mdi-18px mr-1" />
+                              <span>{{ procedure.name }}</span>
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
+
+         <div v-if="database.functions.length" class="database-misc">
+            <details class="accordion">
+               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function}">
+                  <i class="misc-icon mdi mdi-18px mdi-folder-move mr-1" />
+                  {{ $tc('word.function', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="func of database.functions"
+                           :key="func.name"
+                           class="menu-item"
+                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
+                           @click="setBreadcrumbs({schema: database.name, function: func.name})"
+                           @contextmenu.prevent="showMiscContext($event, {...func, type: 'function'})"
+                        >
+                           <a class="table-name">
+                              <i class="table-icon mdi mdi-arrow-right-bold-box mdi-18px mr-1" />
+                              <span>{{ func.name }}</span>
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
+
+         <div v-if="database.schedulers.length" class="database-misc">
+            <details class="accordion">
+               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler}">
+                  <i class="misc-icon mdi mdi-18px mdi-folder-clock mr-1" />
+                  {{ $tc('word.scheduler', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="scheduler of database.schedulers"
+                           :key="scheduler.name"
+                           class="menu-item"
+                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
+                           @click="setBreadcrumbs({schema: database.name, scheduler: scheduler.name})"
+                           @contextmenu.prevent="showMiscContext($event, {...scheduler, type: 'scheduler'})"
+                        >
+                           <a class="table-name">
+                              <i class="table-icon mdi mdi-calendar-clock mdi-18px mr-1" />
+                              <span>{{ scheduler.name }}</span>
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
       </div>
    </details>
 </template>
@@ -68,11 +184,17 @@ export default {
       }),
       formatBytes,
       showDatabaseContext (event, database) {
+         this.changeBreadcrumbs({ schema: database, table: null });
          this.$emit('show-database-context', { event, database });
       },
       showTableContext (event, table) {
+         this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
          this.$emit('show-table-context', { event, table });
       },
+      showMiscContext (event, misc) {
+         this.setBreadcrumbs({ schema: this.database.name, [misc.type]: misc.name });
+         this.$emit('show-misc-context', { event, misc });
+      },
       piePercentage (val) {
          const perc = val / this.maxSize * 100;
          return { background: `conic-gradient(lime ${perc}%, white 0)` };
@@ -88,6 +210,7 @@ export default {
 <style lang="scss">
 .workspace-explorebar-database {
   .database-name,
+  .misc-name,
   a.table-name {
     display: flex;
     align-items: center;
@@ -103,12 +226,20 @@ export default {
     }
 
     .database-icon,
-    .table-icon {
+    .table-icon,
+    .misc-icon {
       opacity: 0.7;
     }
   }
 
-  .database-name {
+  .misc-name {
+    line-height: 1;
+    padding: 0.1rem 1rem 0.1rem 0.1rem;
+    position: relative;
+  }
+
+  .database-name,
+  .misc-name {
     &:hover {
       color: $body-font-color;
       background: rgba($color: #fff, $alpha: 0.05);
@@ -138,6 +269,18 @@ export default {
     margin-left: 1.2rem;
   }
 
+  .database-misc {
+    margin-left: 1.6rem;
+
+    .accordion[open] .accordion-header > .misc-icon:first-child::before {
+      content: "\F0770";
+    }
+
+    .accordion-body {
+      margin-bottom: 0.2rem;
+    }
+  }
+
   .table-size {
     position: absolute;
     right: 0;

src/renderer/components/WorkspaceExploreBarDatabaseContext.vue

@@ -10,6 +10,21 @@
             <div class="context-element" @click="showCreateTableModal">
                <span class="d-flex"><i class="mdi mdi-18px mdi-table text-light pr-1" /> {{ $t('word.table') }}</span>
             </div>
+            <div class="context-element" @click="showCreateViewModal">
+               <span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ $t('word.view') }}</span>
+            </div>
+            <div class="context-element" @click="showCreateTriggerModal">
+               <span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ $tc('word.trigger', 1) }}</span>
+            </div>
+            <div class="context-element" @click="showCreateRoutineModal">
+               <span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ $tc('word.storedRoutine', 1) }}</span>
+            </div>
+            <div class="context-element disabled" @click="false">
+               <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
+            </div>
+            <div class="context-element disabled" @click="false">
+               <span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ $tc('word.scheduler', 1) }}</span>
+            </div>
          </div>
       </div>
       <div class="context-element" @click="showEditModal">
@@ -84,6 +99,15 @@ export default {
       showCreateTableModal () {
          this.$emit('show-create-table-modal');
       },
+      showCreateViewModal () {
+         this.$emit('show-create-view-modal');
+      },
+      showCreateTriggerModal () {
+         this.$emit('show-create-trigger-modal');
+      },
+      showCreateRoutineModal () {
+         this.$emit('show-create-routine-modal');
+      },
       showDeleteModal () {
          this.isDeleteModal = true;
       },
@@ -124,3 +148,8 @@ export default {
    }
 };
 </script>
+<style lang="scss" scoped>
+.context-submenu {
+  min-width: 150px !important;
+}
+</style>

src/renderer/components/WorkspaceExploreBarMiscContext.vue

@@ -0,0 +1,142 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div
+         v-if="selectedMisc.type === 'procedure'"
+         class="context-element disabled"
+         @click="showRunModal"
+      >
+         <span class="d-flex"><i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ $t('word.run') }}</span>
+      </div>
+      <div class="context-element" @click="showDeleteModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ $t('word.delete') }}</span>
+      </div>
+      <ConfirmModal
+         v-if="isDeleteModal"
+         @confirm="deleteMisc"
+         @hide="hideDeleteModal"
+      >
+         <template slot="header">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ deleteMessage }}
+            </div>
+         </template>
+         <div slot="body">
+            <div class="mb-2">
+               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedMisc.name }}</b>"?
+            </div>
+         </div>
+      </ConfirmModal>
+   </BaseContextMenu>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import Triggers from '@/ipc-api/Triggers';
+import Routines from '@/ipc-api/Routines';
+
+export default {
+   name: 'WorkspaceExploreBarMiscContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedMisc: Object
+   },
+   data () {
+      return {
+         isDeleteModal: false,
+         isRunModal: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      deleteMessage () {
+         switch (this.selectedMisc.type) {
+            case 'trigger':
+               return this.$t('message.deleteTrigger');
+            case 'procedure':
+               return this.$t('message.deleteRoutine');
+            default:
+               return '';
+         }
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      showCreateTableModal () {
+         this.$emit('show-create-table-modal');
+      },
+      showDeleteModal () {
+         this.isDeleteModal = true;
+      },
+      hideDeleteModal () {
+         this.isDeleteModal = false;
+      },
+      showRunModal () {
+         this.isRunModal = true;
+      },
+      hideRunModal () {
+         this.isRunModal = false;
+      },
+      closeContext () {
+         this.$emit('close-context');
+      },
+      async deleteMisc () {
+         try {
+            let res;
+
+            switch (this.selectedMisc.type) {
+               case 'trigger':
+                  res = await Triggers.dropTrigger({
+                     uid: this.selectedWorkspace,
+                     trigger: this.selectedMisc.name
+                  });
+                  break;
+               case 'procedure':
+                  res = await Routines.dropRoutine({
+                     uid: this.selectedWorkspace,
+                     routine: this.selectedMisc.name
+                  });
+                  break;
+               // case 'schedules':
+               //    res = await Tables.dropScheduler({
+               //       uid: this.selectedWorkspace,
+               //       scheduler: this.selectedMisc.name
+               //    });
+               //    break;
+            }
+
+            const { status, response } = res;
+
+            if (status === 'success') {
+               this.changeBreadcrumbs({ [this.selectedMisc.type]: null });
+
+               this.closeContext();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceExploreBarTableContext.vue

@@ -3,7 +3,11 @@
       :context-event="contextEvent"
       @close-context="closeContext"
    >
-      <div class="context-element" @click="showEmptyModal">
+      <div
+         v-if="selectedTable.type === 'table'"
+         class="context-element"
+         @click="showEmptyModal"
+      >
          <span class="d-flex"><i class="mdi mdi-18px mdi-table-off text-light pr-1" /> {{ $t('message.emptyTable') }}</span>
       </div>
       <div class="context-element" @click="showDeleteModal">
@@ -22,7 +26,7 @@
          </template>
          <div slot="body">
             <div class="mb-2">
-               {{ $t('message.emptyCorfirm') }} "<b>{{ selectedTable }}</b>"?
+               {{ $t('message.emptyCorfirm') }} "<b>{{ selectedTable.name }}</b>"?
             </div>
          </div>
       </ConfirmModal>
@@ -33,12 +37,12 @@
       >
          <template slot="header">
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-table-remove mr-1" /> {{ $t('message.deleteTable') }}
+               <i class="mdi mdi-24px mdi-table-remove mr-1" /> {{ selectedTable.type === 'table' ? $t('message.deleteTable') : $t('message.deleteView') }}
             </div>
          </template>
          <div slot="body">
             <div class="mb-2">
-               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedTable }}</b>"?
+               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedTable.name }}</b>"?
             </div>
          </div>
       </ConfirmModal>
@@ -50,6 +54,7 @@ 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',
@@ -59,7 +64,7 @@ export default {
    },
    props: {
       contextEvent: MouseEvent,
-      selectedTable: String
+      selectedTable: Object
    },
    data () {
       return {
@@ -103,11 +108,11 @@ export default {
          try {
             const { status, response } = await Tables.truncateTable({
                uid: this.selectedWorkspace,
-               table: this.selectedTable
+               table: this.selectedTable.name
             });
 
             if (status === 'success') {
-               if (this.selectedTable === this.workspace.breadcrumbs.table)
+               if (this.selectedTable.name === this.workspace.breadcrumbs.table)
                   this.changeBreadcrumbs({ table: null });
 
                this.closeContext();
@@ -122,14 +127,26 @@ export default {
       },
       async deleteTable () {
          try {
-            const { status, response } = await Tables.dropTable({
-               uid: this.selectedWorkspace,
-               table: this.selectedTable
-            });
+            let res;
+
+            if (this.selectedTable.type === 'table') {
+               res = await Tables.dropTable({
+                  uid: this.selectedWorkspace,
+                  table: this.selectedTable.name
+               });
+            }
+            else if (this.selectedTable.type === 'view') {
+               res = await Views.dropView({
+                  uid: this.selectedWorkspace,
+                  view: this.selectedTable.name
+               });
+            }
+
+            const { status, response } = res;
 
             if (status === 'success') {
-               if (this.selectedTable === this.workspace.breadcrumbs.table)
-                  this.changeBreadcrumbs({ table: null });
+               if (this.selectedTable.name === this.workspace.breadcrumbs.table || this.selectedTable.name === this.workspace.breadcrumbs.view)
+                  this.changeBreadcrumbs({ table: null, view: null });
 
                this.closeContext();
                this.$emit('reload');

src/renderer/components/WorkspacePropsRoutineOptionsModal.vue

@@ -0,0 +1,145 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmOptionsChange"
+      @hide="$emit('hide')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ localOptions.name }}"
+         </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="optionsProxy.name"
+                     class="form-input"
+                     :class="{'is-error': !isTableNameValid}"
+                     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="optionsProxy.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="optionsProxy.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="optionsProxy.security" class="form-select">
+                     <option>DEFINER</option>
+                     <option>INVOKER</option>
+                  </select>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('message.dataAccess') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.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 class="form-group">
+               <div class="col-4" />
+               <div class="column">
+                  <label class="form-checkbox form-inline">
+                     <input v-model="optionsProxy.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: 'WorkspacePropsRoutineOptionsModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localOptions: Object,
+      workspace: Object
+   },
+   data () {
+      return {
+         optionsProxy: {},
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      isTableNameValid () {
+         return this.optionsProxy.name !== '';
+      }
+   },
+   created () {
+      this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmOptionsChange () {
+         if (!this.isTableNameValid)
+            this.optionsProxy.name = this.localOptions.name;
+
+         this.$emit('options-update', this.optionsProxy);
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsRoutineParamsModal.vue

@@ -0,0 +1,300 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="medium"
+      @confirm="confirmIndexesChange"
+      @hide="$emit('hide')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-dots-horizontal mr-1" /> {{ $t('word.parameters') }} "{{ routine }}"
+         </div>
+      </template>
+      <div :slot="'body'">
+         <div class="columns col-gapless">
+            <div class="column col-5">
+               <div class="panel" :style="{ height: modalInnerHeight + 'px'}">
+                  <div class="panel-header pt-0 pl-0">
+                     <div class="d-flex">
+                        <button class="btn btn-dark btn-sm d-flex" @click="addParameter">
+                           <span>{{ $t('word.add') }}</span>
+                           <i class="mdi mdi-24px mdi-plus ml-1" />
+                        </button>
+                        <button
+                           class="btn btn-dark btn-sm d-flex ml-2 mr-0"
+                           :title="$t('message.clearChanges')"
+                           :disabled="!isChanged"
+                           @click.prevent="clearChanges"
+                        >
+                           <span>{{ $t('word.clear') }}</span>
+                           <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
+                        </button>
+                     </div>
+                  </div>
+                  <div ref="parametersPanel" class="panel-body p-0 pr-1">
+                     <div
+                        v-for="param in parametersProxy"
+                        :key="param.name"
+                        class="tile tile-centered c-hand mb-1 p-1"
+                        :class="{'selected-param': selectedParam === param.name}"
+                        @click="selectParameter($event, param.name)"
+                     >
+                        <div class="tile-icon">
+                           <div>
+                              <i class="mdi mdi-hexagon mdi-24px" :class="`type-${param.type.toLowerCase()}`" />
+                           </div>
+                        </div>
+                        <div class="tile-content">
+                           <div class="tile-title">
+                              {{ param.name }}
+                           </div>
+                           <small class="tile-subtitle text-gray">{{ param.type }}{{ param.length ? `(${param.length})` : '' }} · {{ param.context }}</small>
+                        </div>
+                        <div class="tile-action">
+                           <button
+                              class="btn btn-link remove-field p-0 mr-2"
+                              :title="$t('word.delete')"
+                              @click.prevent="removeParameter(param.name)"
+                           >
+                              <i class="mdi mdi-close" />
+                           </button>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+
+            <div class="column col-7 pl-2 editor-col">
+               <form
+                  v-if="selectedParamObj"
+                  :style="{ height: modalInnerHeight + 'px'}"
+                  class="form-horizontal"
+               >
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.name') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="selectedParamObj.name"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.type') }}
+                     </label>
+                     <div class="column">
+                        <select v-model="selectedParamObj.type" class="form-select text-uppercase">
+                           <optgroup
+                              v-for="group in workspace.dataTypes"
+                              :key="group.group"
+                              :label="group.group"
+                           >
+                              <option
+                                 v-for="type in group.types"
+                                 :key="type.name"
+                                 :selected="selectedParamObj.type.toUpperCase() === type.name"
+                                 :value="type.name"
+                              >
+                                 {{ type.name }}
+                              </option>
+                           </optgroup>
+                        </select>
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.length') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="selectedParamObj.length"
+                           class="form-input"
+                           type="number"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.context') }}
+                     </label>
+                     <div class="column">
+                        <label class="form-radio">
+                           <input
+                              v-model="selectedParamObj.context"
+                              type="radio"
+                              name="context"
+                              value="IN"
+                           > <i class="form-icon" /> IN
+                        </label>
+                        <label class="form-radio">
+                           <input
+                              v-model="selectedParamObj.context"
+                              type="radio"
+                              value="OUT"
+                              name="context"
+                           > <i class="form-icon" /> OUT
+                        </label>
+                        <label class="form-radio">
+                           <input
+                              v-model="selectedParamObj.context"
+                              type="radio"
+                              value="INOUT"
+                              name="context"
+                           > <i class="form-icon" /> INOUT
+                        </label>
+                     </div>
+                  </div>
+               </form>
+               <div v-if="!parametersProxy.length" class="empty">
+                  <div class="empty-icon">
+                     <i class="mdi mdi-dots-horizontal mdi-48px" />
+                  </div>
+                  <p class="empty-title h5">
+                     {{ $t('message.thereAreNoParameters') }}
+                  </p>
+                  <div class="empty-action">
+                     <button class="btn btn-primary" @click="addParameter">
+                        {{ $t('message.createNewParameter') }}
+                     </button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsRoutineParamsModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localParameters: Array,
+      routine: String,
+      workspace: Object
+   },
+   data () {
+      return {
+         parametersProxy: [],
+         isOptionsChanging: false,
+         selectedParam: '',
+         modalInnerHeight: 400,
+         i: 1
+      };
+   },
+   computed: {
+      selectedParamObj () {
+         return this.parametersProxy.find(param => param.name === this.selectedParam);
+      },
+      isChanged () {
+         return JSON.stringify(this.localParameters) !== JSON.stringify(this.parametersProxy);
+      }
+   },
+   mounted () {
+      this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
+      this.i = this.parametersProxy.length + 1;
+
+      if (this.parametersProxy.length)
+         this.resetSelectedID();
+
+      this.getModalInnerHeight();
+      window.addEventListener('resize', this.getModalInnerHeight);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.getModalInnerHeight);
+   },
+   methods: {
+      confirmIndexesChange () {
+         this.$emit('parameters-update', this.parametersProxy);
+      },
+      selectParameter (event, name) {
+         if (this.selectedParam !== name && !event.target.classList.contains('remove-field'))
+            this.selectedParam = name;
+      },
+      getModalInnerHeight () {
+         const modalBody = document.querySelector('.modal-body');
+         if (modalBody)
+            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+      },
+      addParameter () {
+         this.parametersProxy = [...this.parametersProxy, {
+            name: `Param${this.i++}`,
+            type: 'INT',
+            context: 'IN',
+            length: 10
+         }];
+
+         if (this.parametersProxy.length === 1)
+            this.resetSelectedID();
+
+         setTimeout(() => {
+            this.$refs.parametersPanel.scrollTop = this.$refs.parametersPanel.scrollHeight + 60;
+         }, 20);
+      },
+      removeParameter (name) {
+         this.parametersProxy = this.parametersProxy.filter(param => param.name !== name);
+
+         if (this.selectedParam === name && this.parametersProxy.length)
+            this.resetSelectedID();
+      },
+      clearChanges () {
+         this.parametersProxy = JSON.parse(JSON.stringify(this.localParameters));
+         this.i = this.parametersProxy.length + 1;
+
+         if (!this.parametersProxy.some(param => param.name === this.selectedParam))
+            this.resetSelectedID();
+      },
+      resetSelectedID () {
+         this.selectedParam = this.parametersProxy.length ? this.parametersProxy[0].name : '';
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.tile {
+  border-radius: 2px;
+  opacity: 0.5;
+  transition: background 0.2s;
+  transition: opacity 0.2s;
+
+  .tile-action {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover {
+    background: $bg-color-light;
+
+    .tile-action {
+      opacity: 1;
+    }
+  }
+
+  &.selected-param {
+    background: $bg-color-light;
+    opacity: 1;
+  }
+}
+
+.editor-col {
+  border-left: 2px solid $bg-color-light;
+}
+
+.fields-list {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.remove-field .mdi {
+  pointer-events: none;
+}
+</style>

src/renderer/components/WorkspacePropsTab.vue

@@ -200,7 +200,8 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       async getFieldsData () {
          if (!this.table) return;
@@ -394,7 +395,15 @@ export default {
             const { status, response } = await Tables.alterTable(params);
 
             if (status === 'success') {
+               const oldName = this.tableOptions.name;
+
                await this.refreshStructure(this.connection.uid);
+
+               if (oldName !== this.localOptions.name) {
+                  this.setUnsavedChanges(false);
+                  this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
+               }
+
                this.getFieldsData();
             }
             else

src/renderer/components/WorkspacePropsTabRoutine.vue

@@ -0,0 +1,262 @@
+<template>
+   <div 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}"
+                  @click="saveChanges"
+               >
+                  <span>{{ $t('word.save') }}</span>
+                  <i class="mdi mdi-24px mdi-content-save ml-1" />
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <span>{{ $t('word.clear') }}</span>
+                  <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
+               </button>
+
+               <div class="divider-vert py-3" />
+
+               <button
+                  class="btn btn-dark btn-sm disabled"
+                  :disabled="isChanged"
+                  @click="false"
+               >
+                  <span>{{ $t('word.run') }}</span>
+                  <i class="mdi mdi-24px mdi-play ml-1" />
+               </button>
+               <button class="btn btn-dark btn-sm" @click="showParamsModal">
+                  <span>{{ $t('word.parameters') }}</span>
+                  <i class="mdi mdi-24px mdi-dots-horizontal ml-1" />
+               </button>
+               <button class="btn btn-dark btn-sm" @click="showOptionsModal">
+                  <span>{{ $t('word.options') }}</span>
+                  <i class="mdi mdi-24px mdi-cogs ml-1" />
+               </button>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2">
+         <label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
+         <QueryEditor
+            v-if="isSelected"
+            ref="queryEditor"
+            :value.sync="localRoutine.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspacePropsRoutineOptionsModal
+         v-if="isOptionsModal"
+         :local-options="localRoutine"
+         :workspace="workspace"
+         @hide="hideOptionsModal"
+         @options-update="optionsUpdate"
+      />
+      <WorkspacePropsRoutineParamsModal
+         v-if="isParamsModal"
+         :local-parameters="localRoutine.parameters"
+         :workspace="workspace"
+         :routine="localRoutine.name"
+         @hide="hideParamsModal"
+         @parameters-update="parametersUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import QueryEditor from '@/components/QueryEditor';
+import WorkspacePropsRoutineOptionsModal from '@/components/WorkspacePropsRoutineOptionsModal';
+import WorkspacePropsRoutineParamsModal from '@/components/WorkspacePropsRoutineParamsModal';
+import Routines from '@/ipc-api/Routines';
+
+export default {
+   name: 'WorkspacePropsTabRoutine',
+   components: {
+      QueryEditor,
+      WorkspacePropsRoutineOptionsModal,
+      WorkspacePropsRoutineParamsModal
+   },
+   props: {
+      connection: Object,
+      routine: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isQuering: false,
+         isSaving: false,
+         isOptionsModal: false,
+         isParamsModal: false,
+         originalRoutine: null,
+         localRoutine: { sql: '' },
+         lastRoutine: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      isSelected () {
+         return this.workspace.selected_tab === 'prop';
+      },
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      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: {
+      async routine () {
+         if (this.isSelected) {
+            await this.getRoutineData();
+            this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
+            this.lastRoutine = this.routine;
+         }
+      },
+      async isSelected (val) {
+         if (val && this.lastRoutine !== this.routine) {
+            await this.getRoutineData();
+            this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
+            this.lastRoutine = this.routine;
+         }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastRoutine === this.routine && this.routine !== null)
+            this.setUnsavedChanges(val);
+      }
+   },
+   mounted () {
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      async getRoutineData () {
+         if (!this.routine) return;
+         this.isQuering = true;
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            routine: this.workspace.breadcrumbs.procedure
+         };
+
+         try {
+            const { status, response } = await Routines.getRoutineInformations(params);
+            if (status === 'success') {
+               this.originalRoutine = response;
+               this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
+               this.sqlProxy = this.localRoutine.sql;
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.resizeQueryEditor();
+         this.isQuering = false;
+      },
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            routine: {
+               ...this.localRoutine,
+               oldName: this.originalRoutine.name
+            }
+         };
+
+         try {
+            const { status, response } = await Routines.alterRoutine(params);
+
+            if (status === 'success') {
+               const oldName = this.originalRoutine.name;
+
+               await this.refreshStructure(this.connection.uid);
+
+               if (oldName !== this.localRoutine.name) {
+                  this.setUnsavedChanges(false);
+                  this.changeBreadcrumbs({ schema: this.schema, procedure: this.localRoutine.name });
+               }
+
+               this.getRoutineData();
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localRoutine = JSON.parse(JSON.stringify(this.originalRoutine));
+         this.$refs.queryEditor.editor.session.setValue(this.localRoutine.sql);
+      },
+      resizeQueryEditor () {
+         if (this.$refs.queryEditor) {
+            const footer = document.getElementById('footer');
+            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
+            this.editorHeight = size;
+            this.$refs.queryEditor.editor.resize();
+         }
+      },
+      optionsUpdate (options) {
+         this.localRoutine = options;
+      },
+      parametersUpdate (parameters) {
+         this.localRoutine = { ...this.localRoutine, parameters };
+      },
+      showOptionsModal () {
+         this.isOptionsModal = true;
+      },
+      hideOptionsModal () {
+         this.isOptionsModal = false;
+      },
+      showParamsModal () {
+         this.isParamsModal = true;
+      },
+      hideParamsModal () {
+         this.isParamsModal = false;
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTabTrigger.vue

@@ -0,0 +1,275 @@
+<template>
+   <div 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}"
+                  @click="saveChanges"
+               >
+                  <span>{{ $t('word.save') }}</span>
+                  <i class="mdi mdi-24px mdi-content-save ml-1" />
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <span>{{ $t('word.clear') }}</span>
+                  <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
+               </button>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns mb-4">
+            <div class="column col-3">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <input
+                     v-model="localTrigger.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-3">
+               <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>
+         </div>
+         <div class="columns">
+            <div class="column col-3">
+               <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-3">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.event') }}</label>
+                  <div class="input-group">
+                     <select v-model="localTrigger.event1" class="form-select">
+                        <option>BEFORE</option>
+                        <option>AFTER</option>
+                     </select>
+                     <select v-model="localTrigger.event2" class="form-select">
+                        <option>INSERT</option>
+                        <option>UPDATE</option>
+                        <option>DELETE</option>
+                     </select>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2">
+         <label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
+         <QueryEditor
+            v-if="isSelected"
+            ref="queryEditor"
+            :value.sync="localTrigger.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import QueryEditor from '@/components/QueryEditor';
+import Triggers from '@/ipc-api/Triggers';
+
+export default {
+   name: 'WorkspacePropsTabTrigger',
+   components: {
+      QueryEditor
+   },
+   props: {
+      connection: Object,
+      trigger: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isQuering: false,
+         isSaving: false,
+         originalTrigger: null,
+         localTrigger: { sql: '' },
+         lastTrigger: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      isSelected () {
+         return this.workspace.selected_tab === 'prop';
+      },
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      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: {
+      async trigger () {
+         if (this.isSelected) {
+            await this.getTriggerData();
+            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
+            this.lastTrigger = this.trigger;
+         }
+      },
+      async isSelected (val) {
+         if (val && this.lastTrigger !== this.trigger) {
+            await this.getTriggerData();
+            this.$refs.queryEditor.editor.session.setValue(this.localTrigger.sql);
+            this.lastTrigger = this.trigger;
+         }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastTrigger === this.trigger && this.trigger !== null)
+            this.setUnsavedChanges(val);
+      }
+   },
+   mounted () {
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      async getTriggerData () {
+         if (!this.trigger) return;
+         this.isQuering = true;
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            trigger: this.workspace.breadcrumbs.trigger
+         };
+
+         try {
+            const { status, response } = await Triggers.getTriggerInformations(params);
+            if (status === 'success') {
+               this.originalTrigger = response;
+               this.localTrigger = JSON.parse(JSON.stringify(this.originalTrigger));
+               this.sqlProxy = this.localTrigger.sql;
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.resizeQueryEditor();
+         this.isQuering = false;
+      },
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            trigger: {
+               ...this.localTrigger,
+               oldName: this.originalTrigger.name
+            }
+         };
+
+         try {
+            const { status, response } = await Triggers.alterTrigger(params);
+
+            if (status === 'success') {
+               const oldName = this.originalTrigger.name;
+
+               await this.refreshStructure(this.connection.uid);
+
+               if (oldName !== this.localTrigger.name) {
+                  this.setUnsavedChanges(false);
+                  this.changeBreadcrumbs({ schema: this.schema, trigger: this.localTrigger.name });
+               }
+
+               this.getTriggerData();
+            }
+            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);
+      },
+      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();
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTabView.vue

@@ -0,0 +1,329 @@
+<template>
+   <div 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}"
+                  @click="saveChanges"
+               >
+                  <span>{{ $t('word.save') }}</span>
+                  <i class="mdi mdi-24px mdi-content-save ml-1" />
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <span>{{ $t('word.clear') }}</span>
+                  <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
+               </button>
+            </div>
+         </div>
+      </div>
+      <div class="container">
+         <div class="columns mb-4">
+            <div class="column col-3">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.name') }}</label>
+                  <input
+                     v-model="localView.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="column col-3">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.definer') }}</label>
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localView.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option v-if="!isDefinerInUsers" :value="originalView.definer">
+                        {{ originalView.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>
+         <div class="columns">
+            <div class="column col-2">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('message.sqlSecurity') }}</label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.security"
+                        type="radio"
+                        name="security"
+                        value="DEFINER"
+                     >
+                     <i class="form-icon" /> DEFINER
+                  </label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.security"
+                        type="radio"
+                        name="security"
+                        value="INVOKER"
+                     >
+                     <i class="form-icon" /> INVOKER
+                  </label>
+               </div>
+            </div>
+            <div class="column col-2">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('word.algorithm') }}</label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.algorithm"
+                        type="radio"
+                        name="algorithm"
+                        value="UNDEFINED"
+                     >
+                     <i class="form-icon" /> UNDEFINED
+                  </label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.algorithm"
+                        type="radio"
+                        value="MERGE"
+                        name="algorithm"
+                     >
+                     <i class="form-icon" /> MERGE
+                  </label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.algorithm"
+                        type="radio"
+                        value="TEMPTABLE"
+                        name="algorithm"
+                     >
+                     <i class="form-icon" /> TEMPTABLE
+                  </label>
+               </div>
+            </div>
+            <div class="column col-2">
+               <div class="form-group">
+                  <label class="form-label">{{ $t('message.updateOption') }}</label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.updateOption"
+                        type="radio"
+                        name="update"
+                        value=""
+                     >
+                     <i class="form-icon" /> None
+                  </label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.updateOption"
+                        type="radio"
+                        name="update"
+                        value="CASCADED"
+                     >
+                     <i class="form-icon" /> CASCADED
+                  </label>
+                  <label class="form-radio">
+                     <input
+                        v-model="localView.updateOption"
+                        type="radio"
+                        name="update"
+                        value="LOCAL"
+                     >
+                     <i class="form-icon" /> LOCAL
+                  </label>
+               </div>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2">
+         <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
+         <QueryEditor
+            v-if="isSelected"
+            ref="queryEditor"
+            :value.sync="localView.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import QueryEditor from '@/components/QueryEditor';
+import Views from '@/ipc-api/Views';
+
+export default {
+   name: 'WorkspacePropsTabView',
+   components: {
+      QueryEditor
+   },
+   props: {
+      connection: Object,
+      view: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isQuering: false,
+         isSaving: false,
+         originalView: null,
+         localView: { sql: '' },
+         lastView: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      isSelected () {
+         return this.workspace.selected_tab === 'prop';
+      },
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
+      },
+      isDefinerInUsers () {
+         return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+      }
+   },
+   watch: {
+      async view () {
+         if (this.isSelected) {
+            await this.getViewData();
+            this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
+            this.lastView = this.view;
+         }
+      },
+      async isSelected (val) {
+         if (val && this.lastView !== this.view) {
+            await this.getViewData();
+            this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
+            this.lastView = this.view;
+         }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastView === this.view && this.view !== null)
+            this.setUnsavedChanges(val);
+      }
+   },
+   mounted () {
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      async getViewData () {
+         if (!this.view) return;
+         this.isQuering = true;
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            view: this.workspace.breadcrumbs.view
+         };
+
+         try {
+            const { status, response } = await Views.getViewInformations(params);
+            if (status === 'success') {
+               this.originalView = response;
+               this.localView = JSON.parse(JSON.stringify(this.originalView));
+               this.sqlProxy = this.localView.sql;
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.resizeQueryEditor();
+         this.isQuering = false;
+      },
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            view: {
+               ...this.localView,
+               oldName: this.originalView.name
+            }
+         };
+
+         try {
+            const { status, response } = await Views.alterView(params);
+
+            if (status === 'success') {
+               const oldName = this.originalView.name;
+
+               await this.refreshStructure(this.connection.uid);
+
+               if (oldName !== this.localView.name) {
+                  this.setUnsavedChanges(false);
+                  this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
+               }
+
+               this.getViewData();
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localView = JSON.parse(JSON.stringify(this.originalView));
+         this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
+      },
+      resizeQueryEditor () {
+         if (this.$refs.queryEditor) {
+            const footer = document.getElementById('footer');
+            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
+            this.editorHeight = size;
+            this.$refs.queryEditor.editor.resize();
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTableContext.vue

@@ -77,11 +77,3 @@ export default {
    }
 };
 </script>
-
-<style lang="scss" scoped>
-.disabled {
-  pointer-events: none;
-  filter: grayscale(100%);
-  opacity: 0.5;
-}
-</style>

src/renderer/components/WorkspaceQueryTab.vue

@@ -5,6 +5,8 @@
             v-if="isSelected"
             :auto-focus="true"
             :value.sync="query"
+            :workspace="workspace"
+            :schema="schema"
          />
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">

src/renderer/components/WorkspaceTableTab.vue

@@ -171,7 +171,7 @@ export default {
          const params = {
             uid: this.connection.uid,
             schema: this.schema,
-            table: this.workspace.breadcrumbs.table,
+            table: this.workspace.breadcrumbs.table || this.workspace.breadcrumbs.view,
             sortParams
          };
 

src/renderer/i18n/en-US.js

@@ -62,7 +62,23 @@ module.exports = {
       table: 'Table',
       discard: 'Discard',
       stay: 'Stay',
-      author: 'Author'
+      author: 'Author',
+      light: 'Light',
+      dark: 'Dark',
+      autoCompletion: 'Auto Completion',
+      application: 'Application',
+      editor: 'Editor',
+      view: 'View',
+      definer: 'Definer',
+      algorithm: 'Algorithm',
+      trigger: 'Trigger | Triggers',
+      storedRoutine: 'Stored routine | Stored routines',
+      scheduler: 'Scheduler | Schedulers',
+      event: 'Event',
+      parameters: 'Parameters',
+      function: 'Function | Functions',
+      deterministic: 'Deterministic',
+      context: 'Context'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -124,7 +140,25 @@ module.exports = {
       referenceField: 'Ref. field',
       foreignFields: 'Foreign fields',
       invalidDefault: 'Invalid default',
-      onDelete: 'On delete'
+      onDelete: 'On delete',
+      applicationTheme: 'Application Theme',
+      editorTheme: 'Editor Theme',
+      wrapLongLines: 'Wrap long lines',
+      selectStatement: 'Select statement',
+      triggerStatement: 'Trigger statement',
+      sqlSecurity: 'SQL security',
+      updateOption: 'Update option',
+      deleteView: 'Delete view',
+      createNewView: 'Create new view',
+      deleteTrigger: 'Delete trigger',
+      createNewTrigger: 'Create new trigger',
+      currentUser: 'Current user',
+      routineBody: 'Routine body',
+      dataAccess: 'Data access',
+      thereAreNoParameters: 'There are no parameters',
+      createNewParameter: 'Create new parameter',
+      createNewRoutine: 'Create new stored routine',
+      deleteRoutine: 'Delete stored routine'
    },
    // Date and Time
    short: {

src/renderer/ipc-api/Application.js

@@ -0,0 +1,8 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getKey (params) {
+      return ipcRenderer.sendSync('get-key', params);
+   }
+}

src/renderer/ipc-api/Routines.js

@@ -0,0 +1,20 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getRoutineInformations (params) {
+      return ipcRenderer.invoke('get-routine-informations', params);
+   }
+
+   static dropRoutine (params) {
+      return ipcRenderer.invoke('drop-routine', params);
+   }
+
+   static alterRoutine (params) {
+      return ipcRenderer.invoke('alter-routine', params);
+   }
+
+   static createRoutine (params) {
+      return ipcRenderer.invoke('create-routine', params);
+   }
+}

src/renderer/ipc-api/Triggers.js

@@ -0,0 +1,20 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getTriggerInformations (params) {
+      return ipcRenderer.invoke('get-trigger-informations', params);
+   }
+
+   static dropTrigger (params) {
+      return ipcRenderer.invoke('drop-trigger', params);
+   }
+
+   static alterTrigger (params) {
+      return ipcRenderer.invoke('alter-trigger', params);
+   }
+
+   static createTrigger (params) {
+      return ipcRenderer.invoke('create-trigger', params);
+   }
+}

src/renderer/ipc-api/Users.js

@@ -0,0 +1,8 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getUsers (params) {
+      return ipcRenderer.invoke('get-users', params);
+   }
+}

src/renderer/ipc-api/Views.js

@@ -0,0 +1,20 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getViewInformations (params) {
+      return ipcRenderer.invoke('get-view-informations', params);
+   }
+
+   static dropView (params) {
+      return ipcRenderer.invoke('drop-view', params);
+   }
+
+   static alterView (params) {
+      return ipcRenderer.invoke('alter-view', params);
+   }
+
+   static createView (params) {
+      return ipcRenderer.invoke('create-view', params);
+   }
+}

src/renderer/scss/main.scss

@@ -212,6 +212,7 @@ body {
 
 .input-group .input-group-addon {
   border-color: #3f3f3f;
+  z-index: 1;
 }
 
 .menu {
@@ -225,7 +226,7 @@ body {
 }
 
 .accordion-body {
-  max-height: 500rem !important;
+  max-height: 5000rem !important;
 }
 
 .btn.loading {

src/renderer/store/modules/connections.store.js

@@ -1,10 +1,18 @@
 'use strict';
+import Store from 'electron-store';
+import Application from '../../ipc-api/Application';
+const key = Application.getKey();
+
+const persistentStore = new Store({
+   name: 'connections',
+   encryptionKey: key
+});
 
 export default {
    namespaced: true,
    strict: true,
    state: {
-      connections: []
+      connections: persistentStore.get('connections') || []
    },
    getters: {
       getConnections: state => state.connections,
@@ -20,9 +28,11 @@ export default {
    mutations: {
       ADD_CONNECTION (state, connection) {
          state.connections.push(connection);
+         persistentStore.set('connections', state.connections);
       },
       DELETE_CONNECTION (state, connection) {
          state.connections = state.connections.filter(el => el.uid !== connection.uid);
+         persistentStore.set('connections', state.connections);
       },
       EDIT_CONNECTION (state, connection) {
          const editedConnections = state.connections.map(conn => {
@@ -31,9 +41,11 @@ export default {
          });
          state.connections = editedConnections;
          state.selected_conection = {};
+         persistentStore.set('connections', state.connections);
       },
       UPDATE_CONNECTIONS (state, connections) {
          state.connections = connections;
+         persistentStore.set('connections', state.connections);
       }
    },
    actions: {

src/renderer/store/modules/settings.store.js

@@ -1,29 +1,53 @@
 'use strict';
 import i18n from '@/i18n';
+import Store from 'electron-store';
+const persistentStore = new Store({ name: 'settings' });
 
 export default {
    namespaced: true,
    strict: true,
    state: {
-      locale: 'en-US',
-      explorebar_size: null,
-      notifications_timeout: 5
+      locale: persistentStore.get('locale') || 'en-US',
+      explorebar_size: persistentStore.get('explorebar_size') || null,
+      notifications_timeout: persistentStore.get('notifications_timeout') || 5,
+      auto_complete: persistentStore.get('auto_complete') || true,
+      line_wrap: persistentStore.get('line_wrap') || true,
+      application_theme: persistentStore.get('application_theme') || 'dark',
+      editor_theme: persistentStore.get('editor_theme') || 'twilight'
    },
    getters: {
       getLocale: state => state.locale,
       getExplorebarSize: state => state.explorebar_size,
-      getNotificationsTimeout: state => state.notifications_timeout
+      getNotificationsTimeout: state => state.notifications_timeout,
+      getAutoComplete: state => state.auto_complete,
+      getLineWrap: state => state.line_wrap,
+      getApplicationTheme: state => state.application_theme,
+      getEditorTheme: state => state.editor_theme
    },
    mutations: {
       SET_LOCALE (state, locale) {
          state.locale = locale;
          i18n.locale = locale;
+         persistentStore.set('locale', state.locale);
       },
       SET_NOTIFICATIONS_TIMEOUT (state, timeout) {
          state.notifications_timeout = timeout;
+         persistentStore.set('notifications_timeout', state.notifications_timeout);
+      },
+      SET_AUTO_COMPLETE (state, val) {
+         state.auto_complete = val;
+         persistentStore.set('auto_complete', state.auto_complete);
+      },
+      SET_LINE_WRAP (state, val) {
+         state.line_wrap = val;
+         persistentStore.set('line_wrap', state.line_wrap);
       },
       SET_EXPLOREBAR_SIZE (state, size) {
          state.explorebar_size = size;
+         persistentStore.set('explorebar_size', state.explorebar_size);
+      },
+      SET_EDITOR_THEME (state, theme) {
+         state.editor_theme = theme;
       }
    },
    actions: {
@@ -35,6 +59,15 @@ export default {
       },
       changeExplorebarSize ({ commit }, size) {
          commit('SET_EXPLOREBAR_SIZE', size);
+      },
+      changeAutoComplete ({ commit }, val) {
+         commit('SET_AUTO_COMPLETE', val);
+      },
+      changeLineWrap ({ commit }, val) {
+         commit('SET_LINE_WRAP', val);
+      },
+      changeEditorTheme ({ commit }, theme) {
+         commit('SET_EDITOR_THEME', theme);
       }
    }
 };

src/renderer/store/modules/workspaces.store.js

@@ -1,6 +1,7 @@
 'use strict';
 import Connection from '@/ipc-api/Connection';
 import Database from '@/ipc-api/Database';
+import Users from '@/ipc-api/Users';
 import { uidGen } from 'common/libs/uidGen';
 const tabIndex = [];
 let lastBreadcrumbs = {};
@@ -100,6 +101,14 @@ export default {
             }
             : workspace);
       },
+      REFRESH_USERS (state, { uid, users }) {
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               users
+            }
+            : workspace);
+      },
       ADD_WORKSPACE (state, workspace) {
          state.workspaces.push(workspace);
       },
@@ -221,6 +230,7 @@ export default {
                dispatch('refreshCollations', connection.uid);
                dispatch('refreshVariables', connection.uid);
                dispatch('refreshEngines', connection.uid);
+               dispatch('refreshUsers', connection.uid);
             }
          }
          catch (err) {
@@ -275,6 +285,18 @@ export default {
             dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
          }
       },
+      async refreshUsers ({ dispatch, commit }, uid) {
+         try {
+            const { status, response } = await Users.getUsers(uid);
+            if (status === 'error')
+               dispatch('notifications/addNotification', { status, message: response }, { root: true });
+            else
+               commit('REFRESH_USERS', { uid, users: response });
+         }
+         catch (err) {
+            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
+         }
+      },
       removeConnected ({ commit }, uid) {
          Connection.disconnect(uid);
          commit('REMOVE_CONNECTED', uid);
@@ -300,6 +322,7 @@ export default {
             structure: {},
             variables: [],
             collations: [],
+            users: [],
             breadcrumbs: {}
          };
 
@@ -322,7 +345,9 @@ export default {
             table: null,
             trigger: null,
             procedure: null,
-            scheduler: null
+            function: null,
+            scheduler: null,
+            view: null
          };
 
          const hasLastChildren = Object.keys(lastBreadcrumbs).filter(b => b !== 'schema').some(b => lastBreadcrumbs[b]);

src/renderer/suggestions/sql.js

@@ -1,12 +0,0 @@
-import { functions } from '@/suggestions/sql/sql-functions';
-import { keywords } from '@/suggestions/sql/sql-keywords';
-import { operators } from '@/suggestions/sql/sql-operators';
-import { variables } from '@/suggestions/sql/sql-variables';
-
-export const completionItemProvider = (monaco) => {
-   return {
-      provideCompletionItems () {
-         return { suggestions: [...functions(monaco), ...keywords(monaco), ...operators(monaco), ...variables(monaco)] };
-      }
-   };
-};

src/renderer/suggestions/sql/sql-operators.js

@@ -1,142 +0,0 @@
-export const operators = (monaco) => {
-   return [{
-      label: 'ALL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'ALL'
-   },
-   {
-      label: 'AND',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'AND'
-   },
-   {
-      label: 'ANY',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'ANY'
-   },
-   {
-      label: 'BETWEEN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'BETWEEN'
-   },
-   {
-      label: 'EXISTS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'EXISTS'
-   },
-   {
-      label: 'IN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'IN'
-   },
-   {
-      label: 'LIKE',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'LIKE'
-   },
-   {
-      label: 'NOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'NOT'
-   },
-   {
-      label: 'OR',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'OR'
-   },
-   {
-      label: 'SOME',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'SOME'
-   },
-   {
-      label: 'EXCEPT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'EXCEPT'
-   },
-   {
-      label: 'INTERSECT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'INTERSECT'
-   },
-   {
-      label: 'UNION',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'UNION'
-   },
-   {
-      label: 'APPLY',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'APPLY'
-   },
-   {
-      label: 'CROSS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'CROSS'
-   },
-   {
-      label: 'FULL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'FULL'
-   },
-   {
-      label: 'INNER',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'INNER'
-   },
-   {
-      label: 'JOIN',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'JOIN'
-   },
-   {
-      label: 'LEFT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'LEFT'
-   },
-   {
-      label: 'OUTER',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'OUTER'
-   },
-   {
-      label: 'RIGHT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'RIGHT'
-   },
-   {
-      label: 'CONTAINS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'CONTAINS'
-   },
-   {
-      label: 'FREETEXT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'FREETEXT'
-   },
-   {
-      label: 'IS',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'IS'
-   },
-   {
-      label: 'NULL',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'NULL'
-   },
-   {
-      label: 'PIVOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'PIVOT'
-   },
-   {
-      label: 'UNPIVOT',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'UNPIVOT'
-   },
-   {
-      label: 'MATCHED',
-      kind: monaco.languages.CompletionItemKind.Operator,
-      insertText: 'MATCHED'
-   }];
-};

src/renderer/suggestions/sql/sql-variables.js

@@ -1,172 +0,0 @@
-export const variables = (monaco) => {
-   return [{
-      label: '@@DATEFIRST',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DATEFIRST'
-   },
-   {
-      label: '@@DBTS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DBTS'
-   },
-   {
-      label: '@@LANGID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LANGID'
-   },
-   {
-      label: '@@LANGUAGE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LANGUAGE'
-   },
-   {
-      label: '@@LOCK_TIMEOUT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@LOCK_TIMEOUT'
-   },
-   {
-      label: '@@MAX_CONNECTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@MAX_CONNECTIONS'
-   },
-   {
-      label: '@@MAX_PRECISION',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@MAX_PRECISION'
-   },
-   {
-      label: '@@NESTLEVEL',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@NESTLEVEL'
-   },
-   {
-      label: '@@OPTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@OPTIONS'
-   },
-   {
-      label: '@@REMSERVER',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@REMSERVER'
-   },
-   {
-      label: '@@SERVERNAME',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SERVERNAME'
-   },
-   {
-      label: '@@SERVICENAME',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SERVICENAME'
-   },
-   {
-      label: '@@SPID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@SPID'
-   },
-   {
-      label: '@@TEXTSIZE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TEXTSIZE'
-   },
-   {
-      label: '@@VERSION',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@VERSION'
-   },
-   {
-      label: '@@CURSOR_ROWS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CURSOR_ROWS'
-   },
-   {
-      label: '@@FETCH_STATUS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@FETCH_STATUS'
-   },
-   {
-      label: '@@DATEFIRST',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@DATEFIRST'
-   },
-   {
-      label: '@@PROCID',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PROCID'
-   },
-   {
-      label: '@@ERROR',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@ERROR'
-   },
-   {
-      label: '@@IDENTITY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IDENTITY'
-   },
-   {
-      label: '@@ROWCOUNT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@ROWCOUNT'
-   },
-   {
-      label: '@@TRANCOUNT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TRANCOUNT'
-   },
-   {
-      label: '@@CONNECTIONS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CONNECTIONS'
-   },
-   {
-      label: '@@CPU_BUSY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@CPU_BUSY'
-   },
-   {
-      label: '@@IDLE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IDLE'
-   },
-   {
-      label: '@@IO_BUSY',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@IO_BUSY'
-   },
-   {
-      label: '@@PACKET_ERRORS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACKET_ERRORS'
-   },
-   {
-      label: '@@PACK_RECEIVED',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACK_RECEIVED'
-   },
-   {
-      label: '@@PACK_SENT',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@PACK_SENT'
-   },
-   {
-      label: '@@TIMETICKS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TIMETICKS'
-   },
-   {
-      label: '@@TOTAL_ERRORS',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_ERRORS'
-   },
-   {
-      label: '@@TOTAL_READ',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_READ'
-   },
-   {
-      label: '@@TOTAL_WRITE',
-      kind: monaco.languages.CompletionItemKind.Variable,
-      insertText: '@@TOTAL_WRITE'
-   }];
-};

webpack.config.js

@@ -1,12 +1,8 @@
 const webpack = require('webpack');
-const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
    stats: 'errors-warnings',
    plugins: [
-      new MonacoEditorPlugin({
-         languages: ['sql']
-      }),
       new webpack.DefinePlugin({
          'process.env': {
             PACKAGE_VERSION: JSON.stringify(require('./package.json').version)