chore(release): 0.0.10

build(deps-dev): bump eslint-plugin-standard from 4.1.0 to 5.0.0

.eslintrc

@@ -21,7 +21,7 @@
         ],
         "linebreak-style": [
             "error",
-            "windows"
+            "unix"
         ],
         "brace-style": [
             "error", 

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [fabio286]
 patreon: fabio286
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -8,4 +8,4 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "daily" 
+      interval: "weekly" 

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,62 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master]
+  schedule:
+    - cron: '0 15 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # 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
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.travis.yml

@@ -22,6 +22,7 @@ jobs:
     - stage: Test
       script:
         - npm test
+
     - stage: Deploy Linux & Windows
       if: tag IS present
       os: linux
@@ -30,9 +31,17 @@ jobs:
         - 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:
         - rm -rf $HOME/.cache/electron-builder/wine
+
     - stage: Deploy Mac
       if: tag IS present
       os: osx
       osx_image: xcode10.2
       script:
-        - npm run build -- -p always
+        - npm run build -- -p always
+    
+    # - stage: Deploy ARM Linux
+    #   if: tag IS present
+    #   os: linux
+    #   arch: arm64
+    #   script:
+    #     - npm run build -- --linux AppImage -p always

CHANGELOG.md

@@ -2,10 +2,139 @@
 
 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.4](https://github.com/EStarium/antares/compare/v0.0.3-alpha...v0.0.4) (2020-08-06)
+### [0.0.10](https://github.com/Fabio286/antares/compare/v0.0.9...v0.0.10) (2020-12-04)
 
 
 ### Features
 
-* blob fields edit/view/download ([712fe9f](https://github.com/EStarium/antares/commit/712fe9f00d210db0f2317eca61e7fb648383e3fe))
-* window title in app title bar ([0089c0c](https://github.com/EStarium/antares/commit/0089c0cbac6caf0a6fd195849099f18713580228))
+* approximate totals in table tata tab ([e95d29c](https://github.com/Fabio286/antares/commit/e95d29c7c37e24e7cc14b466f9b539fa667042c2))
+* create new tables ([e6602d1](https://github.com/Fabio286/antares/commit/e6602d1bfa9ca10c6bb078ee80ddc94fb338763d))
+* display all keys in properties tab ([27769f2](https://github.com/Fabio286/antares/commit/27769f204f731d20c7ba2f838c02b7c2f28fa0c3))
+* drop and truncate tables ([a4122b4](https://github.com/Fabio286/antares/commit/a4122b4eaaa5b30d97ba5a93df8c9d21c30bc40b))
+* index management ([41505bd](https://github.com/Fabio286/antares/commit/41505bde6547c0af3c3413248ad8a0d182838bb1))
+* tables options edit ([0805b96](https://github.com/Fabio286/antares/commit/0805b96a75e439a7d65e8341ecc86fa938679a9f))
+* unsaved changes reminder ([33d1fa2](https://github.com/Fabio286/antares/commit/33d1fa22905f477924292135b0dcfefe168ee641))
+
+
+### Bug Fixes
+
+* index deletion issue ([f8cf90a](https://github.com/Fabio286/antares/commit/f8cf90a89e7367c95e164b7dc669506df392b700))
+* some problems with properties and data tabs when changing database from sidebar ([0fe7157](https://github.com/Fabio286/antares/commit/0fe71572a5e74c17a5c66237351bb0b02c33e824))
+* sqlEscaper function wrong quotes conversion ([dfb24c6](https://github.com/Fabio286/antares/commit/dfb24c65f3c395d78d27a2f29e9aa8eeb427cff7))
+
+### [0.0.9](https://github.com/EStarium/antares/compare/v0.0.8...v0.0.9) (2020-11-13)
+
+
+### Features
+
+* ability to edit table fields ([249926b](https://github.com/EStarium/antares/commit/249926b8e040d62d50244362b7f999f26337b93c))
+* support to aliased tables ([1658432](https://github.com/EStarium/antares/commit/1658432fd30073ba3bffb39b5c4ca69194ae1330))
+* table fields addition ([0765403](https://github.com/EStarium/antares/commit/07654039b6a99f3115c378b53d659593e5c81f35))
+* table fields deletion ([242ddec](https://github.com/EStarium/antares/commit/242ddec744814d15657db1ca88b2d865045ea219))
+* **ui:** display table properties tab ([2dc16e8](https://github.com/EStarium/antares/commit/2dc16e8ea8d6d9b79288335888e155ff180eebf5))
+
+
+### Bug Fixes
+
+* duplicate header fields on join result tables ([ea9b489](https://github.com/EStarium/antares/commit/ea9b489f5f45cffa4a7ac87873fff070205e88c4))
+* F9 key shortcut refresh all query tabs instead of just selected one ([c9ba2e5](https://github.com/EStarium/antares/commit/c9ba2e5962eae1afc46daf35e55fb0ea5c3af5a4))
+* issue with tabs horizontal scroll with wheel ([c393f86](https://github.com/EStarium/antares/commit/c393f86947d1f65f896cadaa39d53f13e0a1f4eb))
+* zero fill field option was not saved ([3e5770f](https://github.com/EStarium/antares/commit/3e5770f7de51bdf2bc0f1f38c7ceb9ef0f4dcd00))
+* **mysql:** error getting foreign key list ([ee18388](https://github.com/EStarium/antares/commit/ee183886f64947305cc4f0d38dbdf7919953ec01))
+* wrong result fields type and order with some queries ([a8cd177](https://github.com/EStarium/antares/commit/a8cd17748f4ac7d75092f65ae7ca5f96a8a9e8c5))
+
+### [0.0.8](https://github.com/EStarium/antares/compare/v0.0.7...v0.0.8) (2020-10-18)
+
+
+### Features
+
+* **render:** field type and length on table header mouse hover ([04804b0](https://github.com/EStarium/antares/commit/04804b07c71cec271c31ace13bd41b2c7415e892))
+* close modals pressing ESC ([d563cec](https://github.com/EStarium/antares/commit/d563cec70d996f66c4f724bba7de618fc8678e66))
+* data table autorefresh, closes [#36](https://github.com/EStarium/antares/issues/36) ([9ecd888](https://github.com/EStarium/antares/commit/9ecd88870d1fcf32bb2c970a1506206c477810a0))
+* pie chart with table size in database explore bar ([426628f](https://github.com/EStarium/antares/commit/426628f268c77496a13b3498f03fd7b11fee299a))
+* query and data tabs keyboard shortcuts (F5, F9) ([0bf2c8d](https://github.com/EStarium/antares/commit/0bf2c8dc9dd9bdf7a8f48bed61eed7f1f1aacf71))
+
+
+### Bug Fixes
+
+* context menu outside window when near bottom or right edge ([d4ecaf6](https://github.com/EStarium/antares/commit/d4ecaf65e56044170139bac61c3ee69efc35a8f0))
+* disable cell editor for not editable results ([b7c779e](https://github.com/EStarium/antares/commit/b7c779eef63c257c166e7128ea643bdd6142aa88))
+* missing connection name when "ask for crendential" selected ([c70e5b4](https://github.com/EStarium/antares/commit/c70e5b422c3534e92a64a0b534eb58663621489c))
+* missing header for some query results ([d560c38](https://github.com/EStarium/antares/commit/d560c384f5aed58ea975935975843c3b9061dd85))
+* no connection passed to connection's edit modal ([ce25cd0](https://github.com/EStarium/antares/commit/ce25cd0a3130db486ea4da24dd393d45c2ef9e0d))
+
+### [0.0.7](https://github.com/EStarium/antares/compare/v0.0.6...v0.0.7) (2020-10-03)
+
+
+### Features
+
+* Database creation ([3d0a83f](https://github.com/EStarium/antares/commit/3d0a83f2cf68c4dd412fd7679c39d63f081b7c19))
+* Database deletion ([4288a1f](https://github.com/EStarium/antares/commit/4288a1fd331f4a28de2e756f898d208a6a6599c4))
+* Edit database collation ([54717e1](https://github.com/EStarium/antares/commit/54717e1f6a36ec0b3dd096d0e1e747512f6dda09))
+* Field comment on mouse over a table field name ([2554444](https://github.com/EStarium/antares/commit/2554444322b59a6b1ab3ff05ccf8604bf6f8c8b8))
+* Support to multiple queries in the same tab ([48f77ba](https://github.com/EStarium/antares/commit/48f77bae01efbff40bd0f5ce8c66e2619f44bf3a))
+* Update italian translation ([89c3dc9](https://github.com/EStarium/antares/commit/89c3dc9fede63c77eb22b48df1a375ea44830306))
+* **Spanish translation** thanks to 
+[hongkfui](https://github.com/hongkfui) ([#32](https://github.com/EStarium/antares/pull/32))
+
+### Bug Fixes
+
+* Cell update soft reload doesn't apply changes ([1b04b21](https://github.com/EStarium/antares/commit/1b04b216b21b697e47062a9366bc1b6a040a1a72))
+* Empty databases not shown in explore bar ([3e737cb](https://github.com/EStarium/antares/commit/3e737cba62f795f225e944939c6bff04b27fa3d4))
+* Glitch on table data tab ([10b426b](https://github.com/EStarium/antares/commit/10b426b90b6b9461cfffce3026c982463f6e0599))
+* Lack of loading progressbar when an update is available ([86aec4f](https://github.com/EStarium/antares/commit/86aec4f5e41c059e88066a01f0d85155de99a5ee))
+* Missing schema when queryng INFORMATION_SCHEMA ([530d1bd](https://github.com/EStarium/antares/commit/530d1bd43fa95de05f594b9b5cae2f4b397f96e0))
+* Prevent multiple app instances ([12fbe8c](https://github.com/EStarium/antares/commit/12fbe8c1a03259648554f2a5c69b5abbedc18a48))
+* Several fix on data and query tabs ([530907d](https://github.com/EStarium/antares/commit/530907d097ac4d995e1bfcb02e6c890fd6007e21))
+* Unable to obtain fields informations for some queries ([43c7072](https://github.com/EStarium/antares/commit/43c7072c1c83a2455ae48a37be69b444b3eb6560))
+* Unable to obtain keyUsage informations when adding new row ([023c6a6](https://github.com/EStarium/antares/commit/023c6a633a7f268b1a97b748ad08d2416cc30ffe))
+* Value overridden when join tables with fields with same name ([78965d2](https://github.com/EStarium/antares/commit/78965d23e3efb7d8d6d110d79142966e57200757))
+* Wrong field names when join tables ([ad0bad8](https://github.com/EStarium/antares/commit/ad0bad8486c3d67ec14ec1aed3d8aff6cce9df87))
+* Wrong italian translation ([b29e07c](https://github.com/EStarium/antares/commit/b29e07c3b722aec7e78f3cef2e357a53cbcac474))
+* Wrong schema fetching table fields and key usage ([8e71f42](https://github.com/EStarium/antares/commit/8e71f42a28060fdfeeb81502b0759d0d11f5bcfd))
+* Wrong table and schema when more than one query in a tab ([4684b41](https://github.com/EStarium/antares/commit/4684b4114b9c9c253120292d7d164d7676011f86))
+
+### [0.0.6](https://github.com/EStarium/antares/compare/v0.0.5...v0.0.6) (2020-09-03)
+
+
+### Features
+
+* Aliases support ([264de9c](https://github.com/EStarium/antares/commit/264de9c5686fb3a2ef22d96171f45b915ba1b34b))
+* Middle click to close tabs ([256ec76](https://github.com/EStarium/antares/commit/256ec765883fcf247355190827e943c76e95f13b))
+* Monaco-editor as query editor ([196a3e0](https://github.com/EStarium/antares/commit/196a3e0185a3d68b7c4ade8dbf187d2b216cc00b))
+* Sql suggestions in query editor ([8dc74ef](https://github.com/EStarium/antares/commit/8dc74ef2c335e8ae4a69f5d2651df65939139b1b))
+* Support to multiple query tabs ([d7ed00f](https://github.com/EStarium/antares/commit/d7ed00f4a3613da9015c9fc48c4d8062d292e416))
+* Tabs horizontal scroll with mouse wheel ([3a6ea76](https://github.com/EStarium/antares/commit/3a6ea76b93682ebd50908df7368c62c2c1e27958))
+* **Arabic translation** thanks to [Mohd-PH](https://github.com/Mohd-PH) ([#29](https://github.com/EStarium/antares/pull/29))
+
+### Bug Fixes
+
+* Error when launching queries without a result from query tabs ([a1a6f51](https://github.com/EStarium/antares/commit/a1a6f51f2fba5140f5e3bd9cd6557c8a13dfaa2c))
+* Field name displayed instead of alias ([801a0de](https://github.com/EStarium/antares/commit/801a0de1865dea2a59ff057b7c2cc988cc9c87ed))
+* Wrong table height calc in some cases ([fd6d517](https://github.com/EStarium/antares/commit/fd6d5177efb6161aab01f9e108eda60df6c7d8c4))
+
+### [0.0.5](https://github.com/EStarium/antares/compare/v0.0.4...v0.0.5) (2020-08-17)
+
+### Features
+
+* Badge on setting icon and update tab when update is available ([e8141b6](https://github.com/EStarium/antares/commit/e8141b632154f765ca73fa50b9b7120dc592ead0))
+* Foreign key support in add/edit row ([0b6a188](https://github.com/EStarium/antares/commit/0b6a188d1959b80b4a66946cc79d2dd3853a428b))
+* Option to insert table rows ([2f1dfdc](https://github.com/EStarium/antares/commit/2f1dfdc6543b4a6c1d595f0daa00c0832be49c77))
+
+### Bug Fixes
+
+* Insert files via add row option ([3c6e818](https://github.com/EStarium/antares/commit/3c6e818ba06f1b8b5db0ecf80c3b7498d6d2a841))
+* Newline replaced with undefined inside queries ([59e4a79](https://github.com/EStarium/antares/commit/59e4a79f42076b3fce98a764e9ad6a01c674555b))
+* Query result header didn't show just selected fields ([7bc1009](https://github.com/EStarium/antares/commit/7bc10092fe4823e03133e69e0a7bf86e44fde43b))
+* Table header not fixed on top when fast scrolling ([13b0816](https://github.com/EStarium/antares/commit/13b0816837461119eaab79fdb7e92223e0950630))
+* Time and datetime precision ([771f8a2](https://github.com/EStarium/antares/commit/771f8a2d682c64105231e3fef199f05150596298))
+* Update a row with a string key value ([eb348b3](https://github.com/EStarium/antares/commit/eb348b3095b6905321b62eed6cea228374ebc3d1))
+* Window title not perfectly centered ([7651d05](https://github.com/EStarium/antares/commit/7651d05b37970574d6ae4bdf75c20c69d59c1e6d))
+* Wrong schema passed in query tab when a different database was selected ([6d0724d](https://github.com/EStarium/antares/commit/6d0724dc90cdebb10e0342d2c472bdd07aa345f8))
+
+### [0.0.4](https://github.com/EStarium/antares/compare/v0.0.3-alpha...v0.0.4) (2020-08-06)
+
+### Features
+
+* Blob fields edit/view/download ([712fe9f](https://github.com/EStarium/antares/commit/712fe9f00d210db0f2317eca61e7fb648383e3fe))
+* Window title in app title bar ([0089c0c](https://github.com/EStarium/antares/commit/0089c0cbac6caf0a6fd195849099f18713580228))

README.md

@@ -4,21 +4,66 @@
 
 # Antares SQL Client
 
-![GitHub package.json version](https://img.shields.io/github/package-json/v/estarium/antares) [![Build Status](https://travis-ci.com/EStarium/antares.svg?branch=master)](https://travis-ci.com/EStarium/antares) ![GitHub All Releases](https://img.shields.io/github/downloads/estarium/antares/total) ![GitHub](https://img.shields.io/github/license/estarium/antares)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) [![Build Status](https://travis-ci.com/Fabio286/antares.svg?branch=master)](https://travis-ci.com/Fabio286/antares) ![GitHub All Releases](https://img.shields.io/github/downloads/fabio286/antares/total) ![GitHub](https://img.shields.io/github/license/fabio286/antares)
 
-Antares is an SQL client based on Electron.js and Vue.js that aims to become a useful tool, especially for developers.  
+Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers.  
 My target is to support as many databases as possible, and all major operating systems, including the ARM versions.  
 
-At the moment this application is in a development state, it lacks many features, and is'nt ready as a main SQL client. However i'm actively working on it, hoping to provide all essential features as soon as possible.
+**At the moment this application is an alpha, it lacks many features, and isn't ready as a main SQL client**. However i'm actively working on it (yes, i'm a lone dev), hoping to provide all essential features as soon as possible.
 
-If you are curious to try this early state of Antares you can download and install the [latest release](https://github.com/EStarium/antares/releases), and stay tuned for updates. At moment i'm testing only on Windows.
+🔗 If you are curious to try this early state of Antares you can download and install the [latest release](https://github.com/Fabio286/antares/releases).  
+👁 To stay tuned for new releases watch this repo on **Release only** channel.  
+🌟 Don't forget to **leave a star** if you appreciate this project.
+
+## Philosophy
+
+Why am I developing an SQL client when there are a lot of them on the market?  
+The main goal is to develop a totally free, full featured, cross platform and open source alternative, empowered by JavaScript's ecosystem.  
+An application created with minimalism and semplicity in mind, with features in the right places, not hundreds of tiny buttons or submenu.
+
+## How to contribute
+
+- [Translate Antares](https://github.com/Fabio286/antares/wiki/Translate-Antares)
+
+## Current main features
+
+- Multiple database connections at same time.
+- Database management (add/edit/delete).
+- Tables fields management (add/edit/delete).
+- Tables content management (add/edit/delete).
+- Run queries on multiple tabs.
+- Query suggestions.
+- Native dark theme.
+- Multi language.
+- Auto updates.
+
+## Coming soon
+
+This is a roadmap with major features will come in near future.
+
+- Tables management (add/edit/delete).
+- Users management (add/edit/delete).
+- Stored procedures, views, schedulers and triggers support.
+- More secure password storage.
+- Database tools (variables, process list...).
+- Support for other databases.
+- Improvements of query editor area.
+- Improvements of query suggestions.
+- Query history.
+- More context menu shortcuts.
+- More keyboard shortcuts.
+- Query logs console.
+- Fake data filler.
+- Import/export and migration.
+- SSL and SSH tunnel support.
+- Themes.
 
 ## Currently supported
 
 ### Databases
 
 - [x] MySQL/MariaDB
-- [ ] PostrgreSQL
+- [ ] PostgreSQL
 - [ ] MSSQL
 - [ ] SQLite
 - [ ] OracleDB
@@ -26,10 +71,20 @@ If you are curious to try this early state of Antares you can download and insta
 
 ### Operating Systems
 
+#### • x64
+
 - [x] Windows
+- [x] Linux
+- [x] MacOS (needs tests)
+
+#### • ARM
+
+- [ ] Windows
 - [ ] Linux
 - [ ] MacOS
 
 ## Translations
 
-[Giuseppe Gigliotti](https://github.com/ReverbOD) / [Italian Translation](https://github.com/EStarium/antares/pull/20)
+[Giuseppe Gigliotti](https://github.com/ReverbOD) / [Italian Translation](https://github.com/Fabio286/antares/pull/20)  
+[Mohd-PH](https://github.com/Mohd-PH) / [Arabic Translation](https://github.com/Fabio286/antares/pull/29)  
+[hongkfui](https://github.com/hongkfui) / [Spanish Translation](https://github.com/Fabio286/antares/pull/32)

package.json

@@ -1,30 +1,24 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.0.4",
+  "version": "0.0.10",
   "description": "A cross-platform easy to use SQL client.",
-  "main": "src/main/index.js",
   "license": "MIT",
-  "repository": "https://github.com/EStarium/antares.git",
+  "repository": "https://github.com/Fabio286/antares.git",
   "scripts": {
     "dev": "cross-env NODE_ENV=development electron-webpack dev",
     "compile": "electron-webpack",
     "build": "cross-env NODE_ENV=production npm run compile && electron-builder",
     "release": "standard-version",
-    "release:pre": "npm run release -- --prerelease alpha"
+    "release:pre": "npm run release -- --prerelease alpha",
+    "test": "npm run lint",
+    "lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
+    "lint:fix": "eslint . --ext .js,.vue --fix && stylelint \"./src/**/*.{css,scss,sass,vue}\" --fix"
   },
   "author": "Fabio Di Stasio <fabio286@gmail.com>",
   "build": {
-    "npmRebuild": false,
-    "asar": true,
-    "appId": "com.estarium.antares",
+    "appId": "com.fabio286.antares",
     "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
-    "files": [
-      "dist/**/*",
-      "src/**/*",
-      "node_modules/**/*",
-      "package.json"
-    ],
     "dmg": {
       "contents": [
         {
@@ -39,11 +33,6 @@
         }
       ]
     },
-    "win": {
-      "target": [
-        "nsis"
-      ]
-    },
     "linux": {
       "target": [
         "deb",
@@ -53,54 +42,51 @@
     }
   },
   "electronWebpack": {
-    "whiteListedModules": [
-      "codemirror"
-    ],
     "renderer": {
       "webpackConfig": "webpack.config.js"
     }
   },
   "dependencies": {
-    "codemirror": "^5.56.0",
-    "electron-log": "^4.2.2",
-    "electron-updater": "^4.3.4",
-    "lodash": "^4.17.19",
-    "material-design-icons": "^3.0.1",
-    "moment": "^2.27.0",
-    "mssql": "^6.2.1",
+    "@mdi/font": "^5.8.55",
+    "electron-log": "^4.3.0",
+    "electron-updater": "^4.3.5",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "monaco-editor": "^0.20.0",
+    "mssql": "^6.2.3",
     "mysql": "^2.18.1",
-    "pg": "^8.3.0",
+    "pg": "^8.5.1",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.9",
-    "vue-click-outside": "^1.1.0",
-    "vue-i18n": "^8.20.0",
+    "vue-i18n": "^8.22.2",
     "vue-the-mask": "^0.11.1",
-    "vuedraggable": "^2.24.0",
-    "vuex": "^3.5.1",
-    "vuex-persist": "^2.2.0"
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.0",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
-    "electron": "^9.1.2",
-    "electron-builder": "^22.8.0",
+    "electron": "^11.0.2",
+    "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",
     "electron-webpack": "^2.8.2",
     "electron-webpack-vue": "^2.4.0",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint": "^7.14.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^9.0.3",
-    "standard-version": "^8.0.2",
-    "stylelint": "^13.6.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",
+    "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
-    "vue": "^2.6.11",
-    "webpack": "^4.44.1"
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^4.44.2"
   }
 }

src/common/data-types/mysql.js

@@ -0,0 +1,303 @@
+module.exports = [
+   {
+      group: 'integer',
+      types: [
+         {
+            name: 'TINYINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'SMALLINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'INT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'MEDIUMINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BIGINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BIT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         }
+      ]
+   },
+   {
+      group: 'float',
+      types: [
+         {
+            name: 'FLOAT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DOUBLE',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DECIMAL',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'string',
+      types: [
+         {
+            name: 'CHAR',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'VARCHAR',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TINYTEXT',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MEDIUMTEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LONGTEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'JSON',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'binary',
+      types: [
+         {
+            name: 'BINARY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'VARBINARY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TINYBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'BLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MEDIUMBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LONGBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'time',
+      types: [
+         {
+            name: 'DATE',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'YEAR',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DATETIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TIMESTAMP',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'spatial',
+      types: [
+         {
+            name: 'POINT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LINESTRING',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'POLYGON',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'GEOMETRY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTIPOINT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTILINESTRING',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTIPOLYGON',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'GEOMETRYCOLLECTION',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'other',
+      types: [
+         {
+            name: 'UNKNOWN',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'ENUM',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'SET',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   }
+];

src/common/fieldTypes.js

@@ -1,7 +1,7 @@
 export const TEXT = ['char', 'varchar'];
 export const LONG_TEXT = ['text', 'mediumtext', 'longtext'];
 
-export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal'];
+export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal', 'bool'];
 
 export const DATE = ['date'];
 export const TIME = ['time'];

src/common/index-types/mysql.js

@@ -0,0 +1,6 @@
+module.exports = [
+   'PRIMARY',
+   'INDEX',
+   'UNIQUE',
+   'FULLTEXT'
+];

src/common/libs/sqlEscaper.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-useless-escape */
 // eslint-disable-next-line no-control-regex
-const regex = new RegExp(/[\0\x08\x09\x1a\n\r"'\\\%]/g);
+const pattern = /[\0\x08\x09\x1a\n\r"'\\\%]/gm;
+const regex = new RegExp(pattern);
 
 /**
  * Escapes a string
@@ -9,10 +10,10 @@ const regex = new RegExp(/[\0\x08\x09\x1a\n\r"'\\\%]/g);
  * @returns {String}
  */
 function sqlEscaper (string) {
-   return string.replace(regex, (char) => {
-      const m = ['\\0', '\\x08', '\\x09', '\\x1a', '\\n', '\\r', '\'', '"', '\\', '\\\\', '%'];
-      const r = ['\\\\0', '\\\\b', '\\\\t', '\\\\z', '\\\\n', '\\\\r', '\'\'', '""', '\\\\', '\\\\\\\\', '\\%'];
-      return r[m.indexOf(char)];
+   return string.replace(regex, char => {
+      const m = ['\\0', '\\x08', '\\x09', '\\x1a', '\\n', '\\r', '\'', '\"', '\\', '\\\\', '%'];
+      const r = ['\\\\0', '\\\\b', '\\\\t', '\\\\z', '\\\\n', '\\\\r', '\\\'', '\\\"', '\\\\', '\\\\\\\\', '\\%'];
+      return r[m.indexOf(char)] || char;
    });
 }
 

src/common/libs/uidGen.js

@@ -1,4 +1,8 @@
-'use strict';
-export function uidGen () {
-   return Math.random().toString(36).substr(2, 9).toUpperCase();
+/**
+ * @export
+ * @param {String} [prefix]
+ * @returns {String} Unique ID
+ */
+export function uidGen (prefix) {
+   return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase();
 };

src/main/index.js

@@ -3,10 +3,11 @@
 import { app, BrowserWindow, nativeImage } from 'electron';
 import * as path from 'path';
 import { format as formatUrl } from 'url';
-
 import ipcHandlers from './ipc-handlers';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
+const gotTheLock = app.requestSingleInstanceLock();
+
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
 
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
@@ -68,23 +69,27 @@ async function createMainWindow () {
    return window;
 };
 
-// Initialize ipcHandlers
-ipcHandlers();
+if (!gotTheLock)
+   app.quit();
+else {
+   // Initialize ipcHandlers
+   ipcHandlers();
 
-// quit application when all windows are closed
-app.on('window-all-closed', () => {
-   // on macOS it is common for applications to stay open until the user explicitly quits
-   if (process.platform !== 'darwin')
-      app.quit();
-});
+   // quit application when all windows are closed
+   app.on('window-all-closed', () => {
+      // on macOS it is common for applications to stay open until the user explicitly quits
+      if (process.platform !== 'darwin')
+         app.quit();
+   });
 
-app.on('activate', () => {
-   // on macOS it is common to re-create a window even after all windows have been closed
-   if (mainWindow === null)
+   app.on('activate', () => {
+      // on macOS it is common to re-create a window even after all windows have been closed
+      if (mainWindow === null)
+         mainWindow = createMainWindow();
+   });
+
+   // create main BrowserWindow when electron is ready
+   app.on('ready', () => {
       mainWindow = createMainWindow();
-});
-
-// create main BrowserWindow when electron is ready
-app.on('ready', () => {
-   mainWindow = createMainWindow();
-});
+   });
+}

src/main/ipc-handlers/application.js

@@ -1,7 +1,7 @@
 import { app, ipcMain } from 'electron';
 
 export default () => {
-   ipcMain.on('closeApp', () => {
+   ipcMain.on('close-app', () => {
       app.exit();
    });
 };

src/main/ipc-handlers/connection.js

@@ -1,12 +1,10 @@
 
 import { ipcMain } from 'electron';
-import { AntaresConnector } from '../libs/AntaresConnector';
-import InformationSchema from '../models/InformationSchema';
-import Generic from '../models/Generic';
+import { ClientsFactory } from '../libs/ClientsFactory';
 
-export default (connections) => {
-   ipcMain.handle('testConnection', async (event, conn) => {
-      const Connection = new AntaresConnector({
+export default connections => {
+   ipcMain.handle('test-connection', async (event, conn) => {
+      const connection = ClientsFactory.getConnection({
          client: conn.client,
          params: {
             host: conn.host,
@@ -16,10 +14,11 @@ export default (connections) => {
          }
       });
 
-      await Connection.connect();
+      await connection.connect();
 
       try {
-         await InformationSchema.testConnection(Connection);
+         await connection.select('1+1').run();
+         connection.destroy();
 
          return { status: 'success' };
       }
@@ -28,12 +27,12 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('checkConnection', async (event, uid) => {
+   ipcMain.handle('check-connection', async (event, uid) => {
       return uid in connections;
    });
 
    ipcMain.handle('connect', async (event, conn) => {
-      const Connection = new AntaresConnector({
+      const connection = ClientsFactory.getConnection({
          client: conn.client,
          params: {
             host: conn.host,
@@ -41,14 +40,16 @@ export default (connections) => {
             user: conn.user,
             password: conn.password
          },
-         poolSize: 3
+         poolSize: 1
       });
 
       try {
-         await Connection.connect();
+         await connection.connect();
+
+         const structure = await connection.getStructure();
+
+         connections[conn.uid] = connection;
 
-         const { rows: structure } = await InformationSchema.getStructure(Connection);
-         connections[conn.uid] = Connection;
          return { status: 'success', response: structure };
       }
       catch (err) {
@@ -60,25 +61,4 @@ export default (connections) => {
       connections[uid].destroy();
       delete connections[uid];
    });
-
-   ipcMain.handle('refresh', async (event, uid) => {
-      try {
-         const { rows: structure } = await InformationSchema.getStructure(connections[uid]);
-         return { status: 'success', response: structure };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
-
-   ipcMain.handle('rawQuery', async (event, { uid, query, schema }) => {
-      if (!query) return;
-      try {
-         const result = await Generic.raw(connections[uid], query, schema);
-         return { status: 'success', response: result };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
 };

src/main/ipc-handlers/database.js

@@ -0,0 +1,121 @@
+
+import { ipcMain } from 'electron';
+
+export default connections => {
+   ipcMain.handle('create-database', async (event, params) => {
+      try {
+         const query = `CREATE DATABASE \`${params.name}\` COLLATE ${params.collation}`;
+         await connections[params.uid].raw(query);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('update-database', async (event, params) => {
+      try {
+         const query = `ALTER DATABASE \`${params.name}\` COLLATE ${params.collation}`;
+         await connections[params.uid].raw(query);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('delete-database', async (event, params) => {
+      try {
+         const query = `DROP DATABASE \`${params.database}\``;
+         await connections[params.uid].raw(query);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-database-collation', async (event, params) => { // TODO: move to mysql class
+      try {
+         const query = `SELECT \`DEFAULT_COLLATION_NAME\` FROM \`information_schema\`.\`SCHEMATA\` WHERE \`SCHEMA_NAME\`='${params.database}'`;
+         const collation = await connections[params.uid].raw(query);
+
+         return { status: 'success', response: collation.rows.length ? collation.rows[0].DEFAULT_COLLATION_NAME : '' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-structure', async (event, uid) => {
+      try {
+         const structure = await connections[uid].getStructure();
+
+         return { status: 'success', response: structure };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-collations', async (event, uid) => {
+      try {
+         const result = await connections[uid].getCollations();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-variables', async (event, uid) => {
+      try {
+         const result = await connections[uid].getVariables();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-engines', async (event, uid) => {
+      try {
+         const result = await connections[uid].getEngines();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('use-schema', async (event, { uid, schema }) => {
+      if (!schema) return;
+
+      try {
+         await connections[uid].use(schema);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('raw-query', async (event, { uid, query, schema }) => {
+      if (!query) return;
+
+      try {
+         const result = await connections[uid].raw(query, { nest: true, details: true });
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/index.js

@@ -2,12 +2,14 @@ import connection from './connection';
 import tables from './tables';
 import updates from './updates';
 import application from './application';
+import database from './database';
 
 const connections = {};
 
 export default () => {
    connection(connections);
    tables(connections);
+   database(connections);
    updates();
    application();
 };

src/main/ipc-handlers/tables.js

@@ -1,13 +1,12 @@
 import { ipcMain } from 'electron';
-import InformationSchema from '../models/InformationSchema';
-import Tables from '../models/Tables';
-
-// TODO: remap objects based on client
+import { sqlEscaper } from 'common/libs/sqlEscaper';
+import { TEXT, LONG_TEXT, NUMBER, BLOB } from 'common/fieldTypes';
+import fs from 'fs';
 
 export default (connections) => {
-   ipcMain.handle('getTableColumns', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-columns', async (event, params) => {
       try {
-         const result = await InformationSchema.getTableColumns(connections[uid], schema, table);// TODO: uniform column properties
+         const result = await connections[params.uid].getTableColumns(params);
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -15,9 +14,15 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('getTableData', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-data', async (event, { uid, schema, table }) => {
       try {
-         const result = await Tables.getTableData(connections[uid], schema, table);
+         const result = await connections[uid]
+            .select('*')
+            .schema(schema)
+            .from(table)
+            .limit(1000)
+            .run({ details: true });
+
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -25,9 +30,10 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('updateTableCell', async (event, params) => {
+   ipcMain.handle('get-table-indexes', async (event, params) => {
       try {
-         const result = await Tables.updateTableCell(connections[params.uid], params);
+         const result = await connections[params.uid].getTableIndexes(params);
+
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -35,13 +41,167 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('deleteTableRows', async (event, params) => {
+   ipcMain.handle('get-key-usage', async (event, params) => {
       try {
-         const result = await Tables.deleteTableRows(connections[params.uid], params);
+         const result = await connections[params.uid].getKeyUsage(params);
+
          return { status: 'success', response: result };
       }
       catch (err) {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('update-table-cell', async (event, params) => {
+      try {
+         let escapedParam;
+         let reload = false;
+         const id = typeof params.id === 'number' ? params.id : `"${params.id}"`;
+
+         if (NUMBER.includes(params.type))
+            escapedParam = params.content;
+         else if ([...TEXT, ...LONG_TEXT].includes(params.type))
+            escapedParam = `"${sqlEscaper(params.content)}"`;
+         else if (BLOB.includes(params.type)) {
+            if (params.content) {
+               const fileBlob = fs.readFileSync(params.content);
+               escapedParam = `0x${fileBlob.toString('hex')}`;
+               reload = true;
+            }
+            else
+               escapedParam = '""';
+         }
+         else
+            escapedParam = `"${sqlEscaper(params.content)}"`;
+
+         await connections[params.uid]
+            .update({ [params.field]: `= ${escapedParam}` })
+            .schema(params.schema)
+            .from(params.table)
+            .where({ [params.primary]: `= ${id}` })
+            .run();
+
+         return { status: 'success', response: { reload } };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('delete-table-rows', async (event, params) => {
+      try {
+         const result = await connections[params.uid]
+            .schema(params.schema)
+            .delete(params.table)
+            .where({ [params.primary]: `IN (${params.rows.join(',')})` })
+            .run();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('insert-table-rows', async (event, params) => {
+      try {
+         const insertObj = {};
+         for (const key in params.row) {
+            const type = params.fields[key];
+            let escapedParam;
+
+            if (params.row[key] === null)
+               escapedParam = 'NULL';
+            else if (NUMBER.includes(type))
+               escapedParam = params.row[key];
+            else if ([...TEXT, ...LONG_TEXT].includes(type))
+               escapedParam = `"${sqlEscaper(params.row[key])}"`;
+            else if (BLOB.includes(type)) {
+               if (params.row[key]) {
+                  const fileBlob = fs.readFileSync(params.row[key]);
+                  escapedParam = `0x${fileBlob.toString('hex')}`;
+               }
+               else
+                  escapedParam = '""';
+            }
+            else
+               escapedParam = `"${sqlEscaper(params.row[key])}"`;
+
+            insertObj[key] = escapedParam;
+         }
+
+         for (let i = 0; i < params.repeat; i++) {
+            await connections[params.uid]
+               .schema(params.schema)
+               .into(params.table)
+               .insert(insertObj)
+               .run();
+         }
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-foreign-list', async (event, { uid, schema, table, column, description }) => {
+      try {
+         const query = connections[uid]
+            .select(`${column} AS foreignColumn`)
+            .schema(schema)
+            .from(table)
+            .orderBy('foreignColumn ASC');
+
+         if (description)
+            query.select(`LEFT(${description}, 20) AS foreignDescription`);
+
+         const results = await query.run();
+
+         return { status: 'success', response: results };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-table', async (event, params) => {
+      try {
+         await connections[params.uid].createTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-table', async (event, params) => {
+      try {
+         await connections[params.uid].alterTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('truncate-table', async (event, params) => {
+      try {
+         await connections[params.uid].truncateTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('drop-table', async (event, params) => {
+      try {
+         await connections[params.uid].dropTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };

src/main/ipc-handlers/updates.js

@@ -2,39 +2,40 @@ import { ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 
 let mainWindow;
+autoUpdater.allowPrerelease = true;
 
 export default () => {
-   ipcMain.on('checkForUpdates', event => {
+   ipcMain.on('check-for-updates', event => {
       mainWindow = event;
 
       autoUpdater.checkForUpdatesAndNotify().catch(() => {
-         mainWindow.reply('checkFailed');
+         mainWindow.reply('check-failed');
       });
    });
 
-   ipcMain.on('restartToUpdate', () => {
+   ipcMain.on('restart-to-update', () => {
       autoUpdater.quitAndInstall();
    });
 
    // auto-updater events
    autoUpdater.on('checking-for-update', () => {
-      mainWindow.reply('checkingForUpdate');
+      mainWindow.reply('checking-for-update');
    });
 
    autoUpdater.on('update-available', () => {
-      mainWindow.reply('updateAvailable');
+      mainWindow.reply('update-available');
    });
 
    autoUpdater.on('update-not-available', () => {
-      mainWindow.reply('updateNotAvailable');
+      mainWindow.reply('update-not-available');
    });
 
-   autoUpdater.on('download-progress', (data) => {
-      mainWindow.reply('downloadProgress', data);
+   autoUpdater.on('download-progress', data => {
+      mainWindow.reply('download-progress', data);
    });
 
    autoUpdater.on('update-downloaded', () => {
-      mainWindow.reply('updateDownloaded');
+      mainWindow.reply('update-downloaded');
    });
 
    autoUpdater.logger = require('electron-log');

src/main/libs/AntaresConnector.js

@@ -1,291 +0,0 @@
-'use strict';
-import mysql from 'mysql';
-import mssql from 'mssql';
-// import pg from 'pg'; TODO: PostgreSQL
-
-/**
- * As Simple As Possible Query Builder
- *
- * @export
- * @class AntaresConnector
- */
-export class AntaresConnector {
-   /**
-    *Creates an instance of AntaresConnector.
-    * @param {Object} args connection params
-    * @memberof AntaresConnector
-    */
-   constructor (args) {
-      this._client = args.client;
-      this._params = args.params;
-      this._poolSize = args.poolSize || false;
-      this._connection = null;
-      this._logger = args.logger || console.log;
-
-      this._queryDefaults = {
-         schema: '',
-         select: [],
-         from: '',
-         where: [],
-         groupBy: [],
-         orderBy: [],
-         limit: [],
-         join: [],
-         update: [],
-         insert: [],
-         delete: false
-      };
-      this._query = Object.assign({}, this._queryDefaults);
-   }
-
-   _reducer (acc, curr) {
-      const type = typeof curr;
-
-      switch (type) {
-         case 'number':
-         case 'string':
-            return [...acc, curr];
-         case 'object':
-            if (Array.isArray(curr))
-               return [...acc, ...curr];
-            else {
-               const clausoles = [];
-               for (const key in curr)
-                  clausoles.push(`${key} ${curr[key]}`);
-
-               return clausoles;
-            }
-      }
-   }
-
-   /**
-    * Resets the query object after a query
-    *
-    * @memberof AntaresConnector
-    */
-   _resetQuery () {
-      this._query = Object.assign({}, this._queryDefaults);
-   }
-
-   /**
-    * @memberof AntaresConnector
-    */
-   async connect () {
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            if (!this._poolSize)
-               this._connection = mysql.createConnection(this._params);
-            else
-               this._connection = mysql.createPool({ ...this._params, connectionLimit: this._poolSize });
-            break;
-         case 'mssql': {
-            const mssqlParams = {
-               user: this._params.user,
-               password: this._params.password,
-               server: this._params.host
-            };
-            this._connection = await mssql.connect(mssqlParams);
-         }
-            break;
-         default:
-            break;
-      }
-   }
-
-   schema (schema) {
-      this._query.schema = schema;
-      return this;
-   }
-
-   select (...args) {
-      this._query.select = [...this._query.select, ...args];
-      return this;
-   }
-
-   from (table) {
-      this._query.from = table;
-      return this;
-   }
-
-   delete (table) {
-      this._query.delete = true;
-      this.from(table);
-      return this;
-   }
-
-   where (...args) {
-      this._query.where = [...this._query.where, ...args];
-      return this;
-   }
-
-   groupBy (...args) {
-      this._query.groupBy = [...this._query.groupBy, ...args];
-      return this;
-   }
-
-   orderBy (...args) {
-      this._query.orderBy = [...this._query.orderBy, ...args];
-      return this;
-   }
-
-   limit (...args) {
-      this._query.limit = args;
-      return this;
-   }
-
-   use (schema) {
-      let sql;
-
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            sql = `USE \`${schema}\``;
-            break;
-         case 'mssql':
-            sql = `USE "${schema}"`;
-            break;
-         default:
-            break;
-      }
-
-      return this.raw(sql);
-   }
-
-   /**
-    * @param {String | Array} args field = value
-    * @returns
-    * @memberof AntaresConnector
-    */
-   update (...args) {
-      this._query.update = [...this._query.update, ...args];
-      return this;
-   }
-
-   /**
-    * @returns {string} SQL string
-    * @memberof AntaresConnector
-    */
-   getSQL () {
-      // SELECT
-      const selectArray = this._query.select.reduce(this._reducer, []);
-      let selectRaw = '';
-      if (selectArray.length) {
-         switch (this._client) {
-            case 'maria':
-            case 'mysql':
-               selectRaw = selectArray.length ? `SELECT ${selectArray.join(', ')} ` : 'SELECT * ';
-               break;
-            case 'mssql': {
-               const topRaw = this._query.limit.length ? ` TOP (${this._query.limit[0]}) ` : '';
-               selectRaw = selectArray.length ? `SELECT${topRaw} ${selectArray.join(', ')} ` : 'SELECT * ';
-            }
-               break;
-            default:
-               break;
-         }
-      }
-
-      // FROM
-      let fromRaw = '';
-      if (!this._query.update.length && !!this._query.from)
-         fromRaw = 'FROM';
-
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            fromRaw += this._query.from ? ` ${this._query.schema ? `\`${this._query.schema}\`.` : ''}\`${this._query.from}\` ` : '';
-            break;
-         case 'mssql':
-            fromRaw += this._query.from ? ` ${this._query.schema ? `${this._query.schema}.` : ''}${this._query.from} ` : '';
-            break;
-         default:
-            break;
-      }
-
-      const whereArray = this._query.where.reduce(this._reducer, []);
-      const whereRaw = whereArray.length ? `WHERE ${whereArray.join(' AND ')} ` : '';
-
-      const updateArray = this._query.update.reduce(this._reducer, []);
-      const updateRaw = updateArray.length ? `SET ${updateArray.join(', ')} ` : '';
-
-      const groupByArray = this._query.groupBy.reduce(this._reducer, []);
-      const groupByRaw = groupByArray.length ? `GROUP BY ${groupByArray.join(', ')} ` : '';
-
-      const orderByArray = this._query.orderBy.reduce(this._reducer, []);
-      const orderByRaw = orderByArray.length ? `ORDER BY ${orderByArray.join(', ')} ` : '';
-
-      // LIMIT
-      let limitRaw;
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            limitRaw = this._query.limit.length ? `LIMIT ${this._query.limit.join(', ')} ` : '';
-            break;
-         case 'mssql':
-            limitRaw = '';
-            break;
-         default:
-            break;
-      }
-
-      return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}`;
-   }
-
-   /**
-    * @returns {Promise}
-    * @memberof AntaresConnector
-    */
-   async run () {
-      const rawQuery = this.getSQL();
-      this._resetQuery();
-      return this.raw(rawQuery);
-   }
-
-   /**
-    * @param {string} sql raw SQL query
-    * @returns {Promise}
-    * @memberof AntaresConnector
-    */
-   async raw (sql) {
-      if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
-
-      switch (this._client) { // TODO: uniform fields with every client type, needed table name and fields array
-         case 'maria':
-         case 'mysql': {
-            const { rows, fields } = await new Promise((resolve, reject) => {
-               this._connection.query(sql, (err, rows, fields) => {
-                  if (err)
-                     reject(err);
-                  else
-                     resolve({ rows, fields });
-               });
-            });
-            return { rows, fields };
-         }
-         case 'mssql': {
-            const results = await this._connection.request().query(sql);
-            return { rows: results.recordsets[0] };// TODO: fields
-         }
-         default:
-            break;
-      }
-   }
-
-   /**
-    * @memberof AntaresConnector
-    */
-   destroy () {
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            this._connection.end();
-            break;
-         case 'mssql':
-            this._connection.close();
-            break;
-         default:
-            break;
-      }
-   }
-}

src/main/libs/AntaresCore.js

@@ -0,0 +1,142 @@
+'use strict';
+/**
+ * As Simple As Possible Query Builder Core
+ *
+ * @class AntaresCore
+ */
+export class AntaresCore {
+   /**
+    * Creates an instance of AntaresCore.
+    *
+    * @param {Object} args connection params
+    * @memberof AntaresCore
+    */
+   constructor (args) {
+      this._client = args.client;
+      this._params = args.params;
+      this._poolSize = args.poolSize || false;
+      this._connection = null;
+      this._logger = args.logger || console.log;
+
+      this._queryDefaults = {
+         schema: '',
+         select: [],
+         from: '',
+         where: [],
+         groupBy: [],
+         orderBy: [],
+         limit: [],
+         join: [],
+         update: [],
+         insert: {},
+         delete: false
+      };
+      this._query = Object.assign({}, this._queryDefaults);
+   }
+
+   _reducer (acc, curr) {
+      const type = typeof curr;
+
+      switch (type) {
+         case 'number':
+         case 'string':
+            return [...acc, curr];
+         case 'object':
+            if (Array.isArray(curr))
+               return [...acc, ...curr];
+            else {
+               const clausoles = [];
+               for (const key in curr)
+                  clausoles.push(`${key} ${curr[key]}`);
+
+               return clausoles;
+            }
+      }
+   }
+
+   /**
+    * Resets the query object after a query
+    *
+    * @memberof AntaresCore
+    */
+   _resetQuery () {
+      this._query = Object.assign({}, this._queryDefaults);
+   }
+
+   schema (schema) {
+      this._query.schema = schema;
+      return this;
+   }
+
+   select (...args) {
+      this._query.select = [...this._query.select, ...args];
+      return this;
+   }
+
+   from (table) {
+      this._query.from = table;
+      return this;
+   }
+
+   into (table) {
+      this._query.from = table;
+      return this;
+   }
+
+   delete (table) {
+      this._query.delete = true;
+      this.from(table);
+      return this;
+   }
+
+   where (...args) {
+      this._query.where = [...this._query.where, ...args];
+      return this;
+   }
+
+   groupBy (...args) {
+      this._query.groupBy = [...this._query.groupBy, ...args];
+      return this;
+   }
+
+   orderBy (...args) {
+      this._query.orderBy = [...this._query.orderBy, ...args];
+      return this;
+   }
+
+   limit (...args) {
+      this._query.limit = args;
+      return this;
+   }
+
+   /**
+    * @param {String | Array} args field = value
+    * @returns
+    * @memberof AntaresCore
+    */
+   update (...args) {
+      this._query.update = [...this._query.update, ...args];
+      return this;
+   }
+
+   /**
+    * @param {Object} obj field: value
+    * @returns
+    * @memberof AntaresCore
+    */
+   insert (obj) {
+      this._query.insert = { ...this._query.insert, ...obj };
+      return this;
+   }
+
+   /**
+    * @param {Object} args
+    * @returns {Promise}
+    * @memberof AntaresCore
+    */
+   async run (args) {
+      const rawQuery = this.getSQL();
+      this._resetQuery();
+      return this.raw(rawQuery, args);
+   }
+}

src/main/libs/ClientsFactory.js

@@ -0,0 +1,27 @@
+'use strict';
+import { MySQLClient } from './clients/MySQLClient';
+
+export class ClientsFactory {
+   /**
+    * Returns a database connection based on received args.
+    *
+    * @param {Object} args
+    * @param {String} args.client
+    * @param {Object} args.params
+    * @param {String} args.params.host
+    * @param {Number} args.params.port
+    * @param {String} args.params.password
+    * @param {Number=} args.poolSize
+    * @returns Database Connection
+    * @memberof ClientsFactory
+    */
+   static getConnection (args) {
+      switch (args.client) {
+         case 'mysql':
+         case 'maria':
+            return new MySQLClient(args);
+         default:
+            return new Error(`Unknown database client: ${args.client}`);
+      }
+   }
+}

src/main/libs/clients/MySQLClient.js

@@ -0,0 +1,663 @@
+'use strict';
+import mysql from 'mysql';
+import { AntaresCore } from '../AntaresCore';
+
+export class MySQLClient extends AntaresCore {
+   /**
+    * @memberof MySQLClient
+    */
+   async connect () {
+      if (!this._poolSize)
+         this._connection = mysql.createConnection(this._params);
+      else
+         this._connection = mysql.createPool({ ...this._params, connectionLimit: this._poolSize });
+   }
+
+   /**
+    * @memberof MySQLClient
+    */
+   destroy () {
+      this._connection.end();
+   }
+
+   /**
+    * Executes an USE query
+    *
+    * @param {String} schema
+    * @memberof MySQLClient
+    */
+   use (schema) {
+      return this.raw(`USE \`${schema}\``);
+   }
+
+   /**
+    * @returns {Array.<Object>} databases scructure
+    * @memberof MySQLClient
+    */
+   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 triggersArr = [];
+      for (const db of databases) {
+         let { rows: triggers } = await this.raw(`SHOW TRIGGERS FROM \`${db.Database}\``);
+         if (triggers.length) {
+            triggers = triggers.map(trigger => {
+               trigger.Db = db.Database;
+               return trigger;
+            });
+            triggersArr.push(...triggers);
+         }
+      }
+
+      return databases.map(db => {
+         // TABLES
+         const remappedTables = tables.filter(table => table.TABLE_SCHEMA === db.Database).map(table => {
+            let tableType;
+            switch (table.TABLE_TYPE) {
+               case 'VIEW':
+                  tableType = 'view';
+                  break;
+               default:
+                  tableType = 'table';
+                  break;
+            }
+
+            return {
+               name: table.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
+            };
+         });
+
+         // PROCEDURES
+         const remappedProcedures = procedures.filter(procedure => procedure.Db === db.Database).map(procedure => {
+            return {
+               name: procedure.Name,
+               type: procedure.Type,
+               definer: procedure.Definer,
+               created: procedure.Created,
+               updated: procedure.Modified,
+               comment: procedure.Comment,
+               charset: procedure.character_set_client,
+               security: procedure.Security_type
+            };
+         });
+
+         // SCHEDULERS
+         const remappedSchedulers = schedulers.filter(scheduler => scheduler.Db === db.Database).map(scheduler => {
+            return {
+               name: scheduler.EVENT_NAME,
+               definition: scheduler.EVENT_DEFINITION,
+               type: scheduler.EVENT_TYPE,
+               definer: scheduler.DEFINER,
+               body: scheduler.EVENT_BODY,
+               starts: scheduler.STARTS,
+               ends: scheduler.ENDS,
+               status: scheduler.STATUS,
+               executeAt: scheduler.EXECUTE_AT,
+               intervalField: scheduler.INTERVAL_FIELD,
+               intervalValue: scheduler.INTERVAL_VALUE,
+               onCompletion: scheduler.ON_COMPLETION,
+               originator: scheduler.ORIGINATOR,
+               sqlMode: scheduler.SQL_MODE,
+               created: scheduler.CREATED,
+               updated: scheduler.LAST_ALTERED,
+               lastExecuted: scheduler.LAST_EXECUTED,
+               comment: scheduler.EVENT_COMMENT,
+               charset: scheduler.CHARACTER_SET_CLIENT,
+               timezone: scheduler.TIME_ZONE
+            };
+         });
+
+         // TRIGGERS
+         const remappedTriggers = triggersArr.filter(trigger => trigger.Db === db.Database).map(trigger => {
+            return {
+               name: trigger.Trigger,
+               statement: trigger.Statement,
+               timing: trigger.Timing,
+               definer: trigger.Definer,
+               event: trigger.Event,
+               table: trigger.Table,
+               sqlMode: trigger.sql_mode,
+               created: trigger.Created,
+               charset: trigger.character_set_client
+            };
+         });
+
+         return {
+            name: db.Database,
+            tables: remappedTables,
+            functions: functions.filter(func => func.Db === db.Database), // TODO: remap functions
+            procedures: remappedProcedures,
+            triggers: remappedTriggers,
+            schedulers: remappedSchedulers
+         };
+      });
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table scructure
+    * @memberof MySQLClient
+    */
+   async getTableColumns ({ schema, table }) {
+      const { rows } = await this
+         .select('*')
+         .schema('information_schema')
+         .from('COLUMNS')
+         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'` })
+         .orderBy({ ORDINAL_POSITION: 'ASC' })
+         .run();
+
+      return rows.map(field => {
+         let numLength = field.COLUMN_TYPE.match(/int\(([^)]+)\)/);
+         numLength = numLength ? +numLength.pop() : null;
+
+         return {
+            name: field.COLUMN_NAME,
+            key: field.COLUMN_KEY.toLowerCase(),
+            type: field.DATA_TYPE,
+            schema: field.TABLE_SCHEMA,
+            table: field.TABLE_NAME,
+            numPrecision: field.NUMERIC_PRECISION,
+            numLength,
+            datePrecision: field.DATETIME_PRECISION,
+            charLength: field.CHARACTER_MAXIMUM_LENGTH,
+            nullable: field.IS_NULLABLE.includes('YES'),
+            unsigned: field.COLUMN_TYPE.includes('unsigned'),
+            zerofill: field.COLUMN_TYPE.includes('zerofill'),
+            order: field.ORDINAL_POSITION,
+            default: field.COLUMN_DEFAULT,
+            charset: field.CHARACTER_SET_NAME,
+            collation: field.COLLATION_NAME,
+            autoIncrement: field.EXTRA.includes('auto_increment'),
+            onUpdate: field.EXTRA.toLowerCase().includes('on update') ? field.EXTRA.replace('on update', '') : '',
+            comment: field.COLUMN_COMMENT
+         };
+      });
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table indexes
+    * @memberof MySQLClient
+    */
+   async getTableIndexes ({ schema, table }) {
+      const { rows } = await this.raw(`SHOW INDEXES FROM \`${table}\` FROM \`${schema}\``);
+
+      return rows.map(row => {
+         return {
+            unique: !row.Non_unique,
+            name: row.Key_name,
+            column: row.Column_name,
+            indexType: row.Index_type,
+            type: row.Key_name === 'PRIMARY' ? 'PRIMARY' : !row.Non_unique ? 'UNIQUE' : row.Index_type === 'FULLTEXT' ? 'FULLTEXT' : 'INDEX',
+            cardinality: row.Cardinality,
+            comment: row.Comment,
+            indexComment: row.Index_comment
+         };
+      });
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table key usage
+    * @memberof MySQLClient
+    */
+   async getKeyUsage ({ schema, table }) {
+      const { rows } = await this
+         .select('*')
+         .schema('information_schema')
+         .from('KEY_COLUMN_USAGE')
+         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'`, REFERENCED_TABLE_NAME: 'IS NOT NULL' })
+         .run();
+
+      return rows.map(field => {
+         return {
+            schema: field.TABLE_SCHEMA,
+            table: field.TABLE_NAME,
+            column: field.COLUMN_NAME,
+            position: field.ORDINAL_POSITION,
+            constraintPosition: field.POSITION_IN_UNIQUE_CONSTRAINT,
+            constraintName: field.CONSTRAINT_NAME,
+            refSchema: field.REFERENCED_TABLE_SCHEMA,
+            refTable: field.REFERENCED_TABLE_NAME,
+            refColumn: field.REFERENCED_COLUMN_NAME
+         };
+      });
+   }
+
+   /**
+    * SHOW COLLATION
+    *
+    * @returns {Array.<Object>} collations list
+    * @memberof MySQLClient
+    */
+   async getCollations () {
+      const results = await this.raw('SHOW COLLATION');
+
+      return results.rows.map(row => {
+         return {
+            charset: row.Charset,
+            collation: row.Collation,
+            compiled: row.Compiled.includes('Yes'),
+            default: row.Default.includes('Yes'),
+            id: row.Id,
+            sortLen: row.Sortlen
+         };
+      });
+   }
+
+   /**
+    * SHOW VARIABLES
+    *
+    * @returns {Array.<Object>} variables list
+    * @memberof MySQLClient
+    */
+   async getVariables () {
+      const sql = 'SHOW VARIABLES';
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            name: row.Variable_name,
+            value: row.Value
+         };
+      });
+   }
+
+   /**
+    * SHOW ENGINES
+    *
+    * @returns {Array.<Object>} engines list
+    * @memberof MySQLClient
+    */
+   async getEngines () {
+      const sql = 'SHOW ENGINES';
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            name: row.Engine,
+            support: row.Support,
+            comment: row.Comment,
+            transactions: row.Transactions,
+            xa: row.XA,
+            savepoints: row.Savepoints,
+            isDefault: row.Support.includes('DEFAULT')
+         };
+      });
+   }
+
+   /**
+    * CREATE TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async createTable (params) {
+      const {
+         name,
+         collation,
+         comment,
+         engine
+      } = params;
+
+      const sql = `CREATE TABLE \`${name}\` (\`${name}_ID\` INT NULL) COMMENT='${comment}', COLLATE='${collation}', ENGINE=${engine}`;
+
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async alterTable (params) {
+      const {
+         table,
+         additions,
+         deletions,
+         changes,
+         indexChanges,
+         options
+      } = params;
+
+      let sql = `ALTER TABLE \`${table}\` `;
+      const alterColumns = [];
+
+      // OPTIONS
+      if ('comment' in options) alterColumns.push(`COMMENT='${options.comment}'`);
+      if ('engine' in options) alterColumns.push(`ENGINE=${options.engine}`);
+      if ('autoIncrement' in options) alterColumns.push(`AUTO_INCREMENT=${+options.autoIncrement}`);
+      if ('collation' in options) alterColumns.push(`COLLATE='${options.collation}'`);
+
+      // ADD FIELDS
+      additions.forEach(addition => {
+         const length = addition.numLength || addition.charLength || addition.datePrecision;
+
+         alterColumns.push(`ADD COLUMN \`${addition.name}\` 
+            ${addition.type.toUpperCase()}${length ? `(${length})` : ''} 
+            ${addition.unsigned ? 'UNSIGNED' : ''} 
+            ${addition.zerofill ? 'ZEROFILL' : ''}
+            ${addition.nullable ? 'NULL' : 'NOT NULL'}
+            ${addition.autoIncrement ? 'AUTO_INCREMENT' : ''}
+            ${addition.default ? `DEFAULT ${addition.default}` : ''}
+            ${addition.comment ? `COMMENT '${addition.comment}'` : ''}
+            ${addition.collation ? `COLLATE ${addition.collation}` : ''}
+            ${addition.onUpdate ? `ON UPDATE ${addition.onUpdate}` : ''}
+            ${addition.after ? `AFTER \`${addition.after}\`` : 'FIRST'}`);
+      });
+
+      // ADD INDEX
+      indexChanges.additions.forEach(addition => {
+         const fields = addition.fields.map(field => `\`${field}\``).join(',');
+         let type = addition.type;
+
+         if (type === 'PRIMARY')
+            alterColumns.push(`ADD PRIMARY KEY (${fields})`);
+         else {
+            if (type === 'UNIQUE')
+               type = 'UNIQUE INDEX';
+
+            alterColumns.push(`ADD ${type} \`${addition.name}\` (${fields})`);
+         }
+      });
+
+      // CHANGE FIELDS
+      changes.forEach(change => {
+         const length = change.numLength || change.charLength || change.datePrecision;
+
+         alterColumns.push(`CHANGE COLUMN \`${change.orgName}\` \`${change.name}\` 
+            ${change.type.toUpperCase()}${length ? `(${length})` : ''} 
+            ${change.unsigned ? 'UNSIGNED' : ''} 
+            ${change.zerofill ? 'ZEROFILL' : ''}
+            ${change.nullable ? 'NULL' : 'NOT NULL'}
+            ${change.autoIncrement ? 'AUTO_INCREMENT' : ''}
+            ${change.default ? `DEFAULT ${change.default}` : ''}
+            ${change.comment ? `COMMENT '${change.comment}'` : ''}
+            ${change.collation ? `COLLATE ${change.collation}` : ''}
+            ${change.onUpdate ? `ON UPDATE ${change.onUpdate}` : ''}
+            ${change.after ? `AFTER \`${change.after}\`` : 'FIRST'}`);
+      });
+
+      // CHANGE INDEX
+      indexChanges.changes.forEach(change => {
+         if (change.oldType === 'PRIMARY')
+            alterColumns.push('DROP PRIMARY KEY');
+         else
+            alterColumns.push(`DROP INDEX \`${change.oldName}\``);
+
+         const fields = change.fields.map(field => `\`${field}\``).join(',');
+         let type = change.type;
+
+         if (type === 'PRIMARY')
+            alterColumns.push(`ADD PRIMARY KEY (${fields})`);
+         else {
+            if (type === 'UNIQUE')
+               type = 'UNIQUE INDEX';
+
+            alterColumns.push(`ADD ${type} \`${change.name}\` (${fields})`);
+         }
+      });
+
+      // DROP FIELDS
+      deletions.forEach(deletion => {
+         alterColumns.push(`DROP COLUMN \`${deletion.name}\``);
+      });
+
+      // DROP INDEX
+      indexChanges.deletions.forEach(deletion => {
+         if (deletion.type === 'PRIMARY')
+            alterColumns.push('DROP PRIMARY KEY');
+         else
+            alterColumns.push(`DROP INDEX \`${deletion.name}\``);
+      });
+
+      sql += alterColumns.join(', ');
+
+      // RENAME
+      if (options.name) sql += `; RENAME TABLE \`${table}\` TO \`${options.name}\``;
+
+      return await this.raw(sql);
+   }
+
+   /**
+    * TRUNCATE TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async truncateTable (params) {
+      const sql = `TRUNCATE TABLE \`${params.table}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * DROP TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async dropTable (params) {
+      const sql = `DROP TABLE \`${params.table}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * @returns {String} SQL string
+    * @memberof MySQLClient
+    */
+   getSQL () {
+      // SELECT
+      const selectArray = this._query.select.reduce(this._reducer, []);
+      let selectRaw = '';
+
+      if (selectArray.length)
+         selectRaw = selectArray.length ? `SELECT ${selectArray.join(', ')} ` : 'SELECT * ';
+
+      // FROM
+      let fromRaw = '';
+
+      if (!this._query.update.length && !Object.keys(this._query.insert).length && !!this._query.from)
+         fromRaw = 'FROM';
+      else if (Object.keys(this._query.insert).length)
+         fromRaw = 'INTO';
+
+      fromRaw += this._query.from ? ` ${this._query.schema ? `\`${this._query.schema}\`.` : ''}\`${this._query.from}\` ` : '';
+
+      // WHERE
+      const whereArray = this._query.where.reduce(this._reducer, []);
+      const whereRaw = whereArray.length ? `WHERE ${whereArray.join(' AND ')} ` : '';
+
+      // UPDATE
+      const updateArray = this._query.update.reduce(this._reducer, []);
+      const updateRaw = updateArray.length ? `SET ${updateArray.join(', ')} ` : '';
+
+      // INSERT
+      let insertRaw = '';
+
+      if (Object.keys(this._query.insert).length) {
+         const fieldsList = [];
+         const valueList = [];
+         const fields = this._query.insert;
+
+         for (const key in fields) {
+            if (fields[key] === null) continue;
+            fieldsList.push(key);
+            valueList.push(fields[key]);
+         }
+
+         insertRaw = `(${fieldsList.join(', ')}) VALUES (${valueList.join(', ')}) `;
+      }
+
+      // GROUP BY
+      const groupByArray = this._query.groupBy.reduce(this._reducer, []);
+      const groupByRaw = groupByArray.length ? `GROUP BY ${groupByArray.join(', ')} ` : '';
+
+      // ORDER BY
+      const orderByArray = this._query.orderBy.reduce(this._reducer, []);
+      const orderByRaw = orderByArray.length ? `ORDER BY ${orderByArray.join(', ')} ` : '';
+
+      // LIMIT
+      const limitRaw = this._query.limit.length ? `LIMIT ${this._query.limit.join(', ')} ` : '';
+
+      return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${insertRaw}`;
+   }
+
+   /**
+    * @param {string} sql raw SQL query
+    * @param {object} args
+    * @param {boolean} args.nest
+    * @param {boolean} args.details
+    * @returns {Promise}
+    * @memberof MySQLClient
+    */
+   async raw (sql, args) {
+      args = {
+         nest: false,
+         details: false,
+         ...args
+      };
+      const nestTables = args.nest ? '.' : false;
+      const resultsArr = [];
+      let paramsArr = [];
+      let selectedFields = [];
+      const queries = sql.split(';');
+
+      if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
+
+      for (const query of queries) {
+         if (!query) continue;
+         let fieldsArr = [];
+         let keysArr = [];
+
+         const { rows, report, fields, keys } = await new Promise((resolve, reject) => {
+            this._connection.query({ sql: query, nestTables }, async (err, response, fields) => {
+               const queryResult = response;
+
+               if (err)
+                  reject(err);
+               else {
+                  const remappedFields = fields
+                     ? fields.map(field => {
+                        return {
+                           name: field.name,
+                           orgName: field.orgName,
+                           schema: field.db,
+                           table: field.table,
+                           orgTable: field.orgTable,
+                           type: 'varchar'
+                        };
+                     })
+                     : [];
+
+                  if (args.details) {
+                     let cachedTable;
+
+                     if (remappedFields.length) {
+                        selectedFields = remappedFields.map(field => {
+                           return {
+                              name: field.orgName || field.name,
+                              table: field.orgTable || field.table
+                           };
+                        });
+
+                        paramsArr = remappedFields.map(field => {
+                           if (field.table) cachedTable = field.table;// Needed for some queries on information_schema
+                           return {
+                              table: field.orgTable || cachedTable,
+                              schema: field.schema || 'INFORMATION_SCHEMA'
+                           };
+                        }).filter((val, i, arr) => arr.findIndex(el => el.schema === val.schema && el.table === val.table) === i);
+
+                        for (const paramObj of paramsArr) {
+                           try { // Table data
+                              const response = await this.getTableColumns(paramObj);
+
+                              let detailedFields = response.length
+                                 ? selectedFields.map(selField => {
+                                    return response.find(field => field.name === selField.name && field.table === selField.table);
+                                 }).filter(el => !!el)
+                                 : [];
+
+                              if (selectedFields.length) {
+                                 detailedFields = detailedFields.map(field => {
+                                    const aliasObj = remappedFields.find(resField => resField.orgName === field.name);
+                                    return {
+                                       ...field,
+                                       alias: aliasObj.name || field.name,
+                                       tableAlias: aliasObj.table || field.table
+                                    };
+                                 });
+                              }
+
+                              if (!detailedFields.length) {
+                                 detailedFields = remappedFields.map(field => {
+                                    return {
+                                       ...field,
+                                       alias: field.name,
+                                       tableAlias: field.table
+                                    };
+                                 });
+                              }
+
+                              fieldsArr = fieldsArr ? [...fieldsArr, ...detailedFields] : detailedFields;
+                           }
+                           catch (err) {
+                              reject(err);
+                           }
+
+                           try { // Key usage (foreign keys)
+                              const response = await this.getKeyUsage(paramObj);
+                              keysArr = keysArr ? [...keysArr, ...response] : response;
+                           }
+                           catch (err) {
+                              reject(err);
+                           }
+                        }
+                     }
+                  }
+
+                  resolve({
+                     rows: Array.isArray(queryResult) ? queryResult : false,
+                     report: !Array.isArray(queryResult) ? queryResult : false,
+                     fields: fieldsArr.length ? fieldsArr : remappedFields,
+                     keys: keysArr
+                  });
+               }
+            });
+         });
+
+         resultsArr.push({ rows, report, fields, keys });
+      }
+
+      return resultsArr.length === 1 ? resultsArr[0] : resultsArr;
+   }
+}

src/main/models/Generic.js

@@ -1,14 +0,0 @@
-'use strict';
-export default class {
-   static async raw (connection, query, schema) {
-      if (schema) {
-         try {
-            await connection.use(schema);
-         }
-         catch (err) {
-            return err;
-         }
-      }
-      return connection.raw(query);
-   }
-}

src/main/models/InformationSchema.js

@@ -1,34 +0,0 @@
-'use strict';
-export default class {
-   static testConnection (connection) {
-      return connection.select('1+1').run();
-   }
-
-   static getStructure (connection) {
-      return connection
-         .select('*')
-         .schema('information_schema')
-         .from('TABLES')
-         .orderBy({ TABLE_SCHEMA: 'ASC', TABLE_NAME: 'ASC' })
-         .run();
-   }
-
-   static async getTableColumns (connection, schema, table) {
-      const { rows } = await connection
-         .select('*')
-         .schema('information_schema')
-         .from('COLUMNS')
-         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'` })
-         .orderBy({ ORDINAL_POSITION: 'ASC' })
-         .run();
-
-      return rows.map(field => {
-         return {
-            name: field.COLUMN_NAME,
-            key: field.COLUMN_KEY.toLowerCase(),
-            type: field.DATA_TYPE,
-            precision: field.DATETIME_PRECISION
-         };
-      });
-   }
-}

src/main/models/Tables.js

@@ -1,53 +0,0 @@
-'use strict';
-import { sqlEscaper } from 'common/libs/sqlEscaper';
-import { TEXT, LONG_TEXT, NUMBER, BLOB } from 'common/fieldTypes';
-import fs from 'fs';
-
-export default class {
-   static async getTableData (connection, schema, table) {
-      return connection
-         .select('*')
-         .schema(schema)
-         .from(table)
-         .limit(1000)
-         .run();
-   }
-
-   static async updateTableCell (connection, params) {
-      let escapedParam;
-      let reload = false;
-
-      if (NUMBER.includes(params.type))
-         escapedParam = params.content;
-      else if ([...TEXT, ...LONG_TEXT].includes(params.type))
-         escapedParam = `"${sqlEscaper(params.content)}"`;
-      else if (BLOB.includes(params.type)) {
-         if (params.content) {
-            const fileBlob = fs.readFileSync(params.content);
-            escapedParam = `0x${fileBlob.toString('hex')}`;
-            reload = true;
-         }
-         else
-            escapedParam = '""';
-      }
-      else
-         escapedParam = `"${sqlEscaper(params.content)}"`;
-
-      await connection
-         .update({ [params.field]: `= ${escapedParam}` })
-         .schema(params.schema)
-         .from(params.table)
-         .where({ [params.primary]: `= ${params.id}` })
-         .run();
-
-      return { reload };
-   }
-
-   static async deleteTableRows (connection, params) {
-      return connection
-         .schema(params.schema)
-         .delete(params.table)
-         .where({ [params.primary]: `IN (${params.rows.join(',')})` })
-         .run();
-   }
-}

src/renderer/App.vue

@@ -4,7 +4,7 @@
       <div id="window-content">
          <TheSettingBar />
          <div id="main-content" class="container">
-            <TheAppWelcome v-if="!connections.length" @newConn="showNewConnModal" />
+            <TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
             <div v-else class="columns col-gapless">
                <Workspace
                   v-for="connection in connections"
@@ -16,8 +16,8 @@
          <TheFooter />
          <TheNotificationsBoard />
          <ModalNewConnection v-if="isNewConnModal" />
-         <ModalEditConnection v-if="isEditModal" />
          <ModalSettings v-if="isSettingModal" />
+         <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
       </div>
    </div>
 </template>
@@ -36,8 +36,8 @@ export default {
       TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
       Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
       ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
-      ModalEditConnection: () => import(/* webpackChunkName: "ModalEditConnection" */'@/components/ModalEditConnection'),
-      ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings')
+      ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
+      ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges')
    },
    data () {
       return {};
@@ -48,11 +48,12 @@ export default {
          isNewConnModal: 'application/isNewModal',
          isEditModal: 'application/isEditModal',
          isSettingModal: 'application/isSettingModal',
-         connections: 'connections/getConnections'
+         connections: 'connections/getConnections',
+         isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
       })
    },
    mounted () {
-      ipcRenderer.send('checkForUpdates');
+      ipcRenderer.send('check-for-updates');
    },
    methods: {
       ...mapActions({

src/renderer/components/BaseConfirmModal.vue

@@ -2,7 +2,7 @@
    <div class="modal active" :class="modalSizeClass">
       <a class="modal-overlay" @click="hideModal" />
       <div class="modal-container">
-         <div v-if="hasHeader" class="modal-header">
+         <div v-if="hasHeader" class="modal-header pl-2">
             <div class="modal-title h6">
                <slot name="header" />
             </div>
@@ -27,7 +27,7 @@
          <div class="modal-footer">
             <button
                class="btn btn-primary mr-2"
-               @click="confirmModal"
+               @click.stop="confirmModal"
             >
                {{ confirmText || $t('word.confirm') }}
             </button>
@@ -48,7 +48,7 @@ export default {
    props: {
       size: {
          type: String,
-         validator: prop => ['small', 'medium', 'large'].includes(prop),
+         validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
          default: 'small'
       },
       confirmText: String,
@@ -67,6 +67,8 @@ export default {
       modalSizeClass () {
          if (this.size === 'small')
             return 'modal-sm';
+         if (this.size === '400')
+            return 'modal-400';
          else if (this.size === 'large')
             return 'modal-lg';
          else return '';
@@ -86,7 +88,12 @@ export default {
 </script>
 
 <style scoped>
-  .modal.modal-sm .modal-container {
-    padding: 0;
-  }
+.modal-400 .modal-container {
+  max-width: 400px;
+}
+
+.modal.modal-sm .modal-container {
+  padding: 0;
+}
+
 </style>

src/renderer/components/BaseContextMenu.vue

@@ -1,7 +1,12 @@
 <template>
    <div class="context">
+      <a
+         class="context-overlay"
+         @click="close"
+         @contextmenu="close"
+      />
       <div
-         v-click-outside="close"
+         ref="contextContent"
          class="context-container"
          :style="position"
       >
@@ -11,27 +16,53 @@
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside';
-
 export default {
    name: 'BaseContextMenu',
-   directives: {
-      ClickOutside
-   },
    props: {
       contextEvent: MouseEvent
    },
+   data () {
+      return {
+         contextSize: null
+      };
+   },
    computed: {
       position () {
-         return { // TODO: calc direction if near corners
-            top: this.contextEvent.clientY + 5 + 'px',
-            left: this.contextEvent.clientX + 5 + 'px'
+         const { clientY, clientX } = this.contextEvent;
+         let topCord = `${clientY + 5}px`;
+         let leftCord = `${clientX + 5}px`;
+
+         if (this.contextSize) {
+            if (clientY + this.contextSize.height + 5 >= window.innerHeight)
+               topCord = `${clientY - this.contextSize.height}px`;
+
+            if (clientX + this.contextSize.width + 5 >= window.innerWidth)
+               leftCord = `${clientX - this.contextSize.width}px`;
+         }
+
+         return {
+            top: topCord,
+            left: leftCord
          };
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      this.contextSize = this.$refs.contextContent.getBoundingClientRect();
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       close () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.close();
       }
    }
 };
@@ -46,19 +77,17 @@ export default {
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    padding: 0.4rem;
     position: fixed;
+    height: 100vh;
     right: 0;
     top: 0;
     left: 0;
     bottom: 0;
-    pointer-events: none;
 
     .context-container {
       min-width: 100px;
-      max-width: 150px;
-      z-index: 1;
-      box-shadow: 0 0 1px 0 #000;
+      z-index: 10;
+      box-shadow: 0 0 2px 0 #000;
       padding: 0;
       background: #1d1d1d;
       border-radius: 0.1rem;
@@ -72,9 +101,29 @@ export default {
         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 {
+            display: block;
+            visibility: visible;
+            opacity: 1;
+          }
         }
       }
     }

src/renderer/components/BaseNotification.vue

@@ -1,14 +1,15 @@
 <template>
    <div class="toast mt-2" :class="notificationStatus.className">
       <span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
-         <i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
+         <i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
          <span class="notification-message">{{ message }}</span>
       </span>
       <i
          v-if="isExpandable"
-         class="material-icons c-hand"
+         class="mdi mdi-24px c-hand expand-btn"
+         :class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
          @click="toggleExpand"
-      >{{ isExpanded ? 'expand_less' : 'expand_more' }}</i>
+      />
       <button class="btn btn-clear ml-2" @click="hideToast" />
    </div>
 </template>
@@ -38,19 +39,19 @@ export default {
          switch (this.status) {
             case 'success':
                className = 'toast-success';
-               iconName = 'done';
+               iconName = 'mdi-check';
                break;
             case 'error':
                className = 'toast-error';
-               iconName = 'error';
+               iconName = 'mdi-alert-rhombus';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconName = 'warning';
+               iconName = 'mdi-alert';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconName = 'info_outline';
+               iconName = 'mdi-information-outline';
                break;
          }
 
@@ -88,6 +89,10 @@ export default {
     max-width: 30rem;
   }
 
+  .expand-btn {
+    align-items: initial;
+  }
+
   .expanded .notification-message {
     white-space: initial;
   }

src/renderer/components/BaseToast.vue

@@ -34,19 +34,19 @@ export default {
          switch (this.status) {
             case 'success':
                className = 'toast-success';
-               iconTag = '<i class="material-icons mr-1">done</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-check mr-1"></i>';
                break;
             case 'error':
                className = 'toast-error';
-               iconTag = '<i class="material-icons mr-1">error</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconTag = '<i class="material-icons mr-1">warning</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconTag = '<i class="material-icons mr-1">info_outline</i>';
+               iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
                break;
          }
 

src/renderer/components/BaseVirtualScroll.vue

@@ -21,47 +21,50 @@
 </template>
 
 <script>
-// credits: https://github.com/xrado 👼
 export default {
    name: 'BaseVirtualScroll',
    props: {
       items: Array,
-      itemHeight: Number
+      itemHeight: Number,
+      visibleHeight: Number,
+      scrollElement: {
+         type: HTMLDivElement,
+         default: null
+      }
    },
    data () {
       return {
          topHeight: 0,
          bottomHeight: 0,
-         visibleItems: []
+         visibleItems: [],
+         renderTimeout: null,
+         localScrollElement: null
       };
    },
    mounted () {
       this._checkScrollPosition = this.checkScrollPosition.bind(this);
-      this.checkScrollPosition();
-      this.$el.addEventListener('scroll', this._checkScrollPosition);
-      this.$el.addEventListener('wheel', this._checkScrollPosition);
+      this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
+      this.updateWindow();
+      this.localScrollElement.addEventListener('scroll', this._checkScrollPosition);
    },
    beforeDestroy () {
-      this.$el.removeEventListener('scroll', this._checkScrollPosition);
-      this.$el.removeEventListener('wheel', this._checkScrollPosition);
+      this.localScrollElement.removeEventListener('scroll', this._checkScrollPosition);
    },
    methods: {
-      checkScrollPosition (e = {}) {
-         const el = this.$el;
+      checkScrollPosition (e) {
+         clearTimeout(this.renderTimeout);
 
-         // prevent parent scroll
-         if ((el.scrollTop === 0 && e.deltaY < 0) || (Math.abs(el.scrollTop - (el.scrollHeight - el.clientHeight)) <= 1 && e.deltaY > 0))
-            e.preventDefault();
-
-         this.updateWindow(e);
+         this.renderTimeout = setTimeout(() => {
+            this.updateWindow(e);
+         }, 200);
       },
-
       updateWindow (e) {
-         const visibleItemsCount = Math.ceil(this.$el.clientHeight / this.itemHeight);
+         const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
          const totalScrollHeight = this.items.length * this.itemHeight;
+         const offset = 50;
+
+         const scrollTop = this.localScrollElement.scrollTop;
 
-         const scrollTop = this.$el.scrollTop;
-         const offset = 5;
          const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
          const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
          const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);

src/renderer/components/ForeignKeySelect.vue

@@ -0,0 +1,89 @@
+<template>
+   <select
+      ref="editField"
+      class="px-1"
+      @change="onChange"
+      @blur="$emit('blur')"
+   >
+      <option
+         v-for="row in foreignList"
+         :key="row.foreignColumn"
+         :value="row.foreignColumn"
+         :selected="row.foreignColumn === value"
+      >
+         {{ row.foreignColumn }} {{ 'foreignDescription' in row ? ` - ${row.foreignDescription}` : '' | cutText }}
+      </option>
+   </select>
+</template>
+
+<script>
+import Tables from '@/ipc-api/Tables';
+import { mapGetters, mapActions } from 'vuex';
+import { TEXT, LONG_TEXT } from 'common/fieldTypes';
+export default {
+   name: 'ForeignKeySelect',
+   filters: {
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 15 ? `${val.substring(0, 15)}...` : val;
+      }
+   },
+   props: {
+      value: [String, Number],
+      keyUsage: Object
+   },
+   data () {
+      return {
+         foreignList: []
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected'
+      })
+   },
+   async created () {
+      let firstTextField;
+      const params = {
+         uid: this.selectedWorkspace,
+         schema: this.keyUsage.refSchema,
+         table: this.keyUsage.refTable
+      };
+
+      try { // Field data
+         const { status, response } = await Tables.getTableColumns(params);
+         if (status === 'success')
+            firstTextField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type)).name || false;
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+
+      try { // Foregn list
+         const { status, response } = await Tables.getForeignList({
+            ...params,
+            column: this.keyUsage.refColumn,
+            description: firstTextField
+         });
+
+         if (status === 'success')
+            this.foreignList = response.rows;
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      onChange () {
+         this.$emit('update:value', this.$refs.editField.value);
+      }
+   }
+};
+</script>

src/renderer/components/ModalAskCredentials.vue

@@ -2,13 +2,15 @@
    <div class="modal active modal-sm">
       <a class="modal-overlay" />
       <div class="modal-container p-0">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('word.credentials') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
          </div>
-         <div class="modal-body">
+         <div class="modal-body pb-0">
             <div class="content">
                <form class="form-horizontal">
                   <div class="form-group">
@@ -63,7 +65,7 @@ export default {
    },
    methods: {
       closeModal () {
-         this.$emit('closeAsking');
+         this.$emit('close-asking');
       },
       sendCredentials () {
          this.$emit('credentials', this.credentials);

src/renderer/components/ModalDiscardChanges.vue

@@ -0,0 +1,57 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.discard')"
+      :cancel-text="$t('word.stay')"
+      @confirm="discardUnsavedChanges"
+      @hide="closeUnsavedChangesModal"
+   >
+      <template slot="header">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
+         </div>
+      </template>
+      <div slot="body">
+         <div>
+            {{ $t('message.discardUnsavedChanges') }}
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalDiscardChanges',
+   components: {
+      ConfirmModal
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         discardUnsavedChanges: 'workspaces/discardUnsavedChanges',
+         closeUnsavedChangesModal: 'workspaces/closeUnsavedChangesModal'
+      }),
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 360px;
+  }
+</style>

src/renderer/components/ModalEditConnection.vue

@@ -2,13 +2,15 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.editConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server mr-1" /> {{ $t('message.editConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
-         <div class="modal-body">
+         <div class="modal-body pb-0">
             <div class="content">
                <form class="form-horizontal">
                   <fieldset class="m-0" :disabled="isTesting">
@@ -111,13 +113,13 @@
                   </fieldset>
                </form>
             </div>
-         </div>
-         <div class="modal-footer text-light">
             <BaseToast
                class="mb-2"
                :message="toast.message"
                :status="toast.status"
             />
+         </div>
+         <div class="modal-footer text-light">
             <button
                class="btn btn-gray mr-2"
                :class="{'loading': isTesting}"
@@ -135,14 +137,14 @@
       </div>
       <ModalAskCredentials
          v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
          @credentials="continueTest"
       />
    </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
@@ -153,6 +155,9 @@ export default {
       ModalAskCredentials,
       BaseToast
    },
+   props: {
+      connection: Object
+   },
    data () {
       return {
          toast: {
@@ -164,17 +169,15 @@ export default {
          localConnection: null
       };
    },
-   computed: {
-      ...mapGetters({
-         connection: 'application/getSelectedConnection'
-      })
-   },
    created () {
       this.localConnection = Object.assign({}, this.connection);
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
-         closeModal: 'application/hideEditConnModal',
          editConnection: 'connections/editConnection'
       }),
       async startTest () {
@@ -224,6 +227,14 @@ export default {
       closeAsking () {
          this.isTesting = false;
          this.isAsking = false;
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalEditDatabase.vue

@@ -0,0 +1,161 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-database-edit mr-1" /> {{ $t('message.editDatabase') }}
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body pb-0">
+            <div class="content">
+               <form class="form-horizontal">
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.name') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <input
+                           v-model="database.name"
+                           class="form-input"
+                           type="text"
+                           required
+                           :placeholder="$t('message.databaseName')"
+                           readonly
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.collation') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <select v-model="database.collation" class="form-select">
+                           <option
+                              v-for="collation in collations"
+                              :key="collation.id"
+                              :value="collation.collation"
+                           >
+                              {{ collation.collation }}
+                           </option>
+                        </select>
+                        <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                     </div>
+                  </div>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <button class="btn btn-primary mr-2" @click.stop="updateDatabase">
+               {{ $t('word.update') }}
+            </button>
+            <button class="btn btn-link" @click.stop="closeModal">
+               {{ $t('word.close') }}
+            </button>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Database from '@/ipc-api/Database';
+
+export default {
+   name: 'ModalEditDatabase',
+   props: {
+      selectedDatabase: String
+   },
+   data () {
+      return {
+         database: {
+            name: '',
+            prevName: '',
+            collation: ''
+         }
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      },
+      defaultCollation () {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+      }
+   },
+   async created () {
+      let actualCollation;
+      try {
+         const { status, response } = await Database.getDatabaseCollation({ uid: this.selectedWorkspace, database: this.selectedDatabase });
+
+         if (status === 'success')
+            actualCollation = response;
+
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+
+      this.database = {
+         name: this.selectedDatabase,
+         prevName: this.selectedDatabase,
+         collation: actualCollation || this.defaultCollation,
+         prevCollation: actualCollation || this.defaultCollation
+      };
+
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async updateDatabase () {
+         if (this.database.collation !== this.database.prevCollation) {
+            try {
+               const { status, response } = await Database.updateDatabase({
+                  uid: this.selectedWorkspace,
+                  ...this.database
+               });
+
+               if (status === 'success')
+                  this.closeModal();
+               else
+                  this.addNotification({ status: 'error', message: response });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+         }
+         else
+            this.closeModal();
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 360px;
+  }
+</style>

src/renderer/components/ModalNewConnection.vue

@@ -2,13 +2,15 @@
    <div class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
+         <div class="modal-header pl-2">
             <div class="modal-title h6">
-               {{ $t('message.createNewConnection') }}
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
-         <div class="modal-body">
+         <div class="modal-body pb-0">
             <div class="content">
                <form class="form-horizontal">
                   <fieldset class="m-0" :disabled="isTesting">
@@ -115,13 +117,13 @@
                   </fieldset>
                </form>
             </div>
-         </div>
-         <div class="modal-footer text-light">
             <BaseToast
                class="mb-2"
                :message="toast.message"
                :status="toast.status"
             />
+         </div>
+         <div class="modal-footer text-light">
             <button
                class="btn btn-gray mr-2"
                :class="{'loading': isTesting}"
@@ -139,7 +141,7 @@
       </div>
       <ModalAskCredentials
          v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
          @credentials="continueTest"
       />
    </div>
@@ -168,7 +170,7 @@ export default {
             user: 'root',
             password: '',
             ask: false,
-            uid: uidGen()
+            uid: uidGen('C')
          },
          toast: {
             status: '',
@@ -178,6 +180,12 @@ export default {
          isAsking: false
       };
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          closeModal: 'application/hideNewConnModal',
@@ -247,6 +255,11 @@ export default {
       closeAsking () {
          this.isAsking = false;
          this.isTesting = false;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };

src/renderer/components/ModalNewDatabase.vue

@@ -0,0 +1,134 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-database-plus mr-1" /> {{ $t('message.createNewDatabase') }}
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body pb-0">
+            <div class="content">
+               <form class="form-horizontal">
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.name') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <input
+                           v-model="database.name"
+                           class="form-input"
+                           type="text"
+                           required
+                           :placeholder="$t('message.databaseName')"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.collation') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <select v-model="database.collation" class="form-select">
+                           <option
+                              v-for="collation in collations"
+                              :key="collation.id"
+                              :value="collation.collation"
+                           >
+                              {{ collation.collation }}
+                           </option>
+                        </select>
+                        <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                     </div>
+                  </div>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <button class="btn btn-primary mr-2" @click.stop="createDatabase">
+               {{ $t('word.add') }}
+            </button>
+            <button class="btn btn-link" @click.stop="closeModal">
+               {{ $t('word.close') }}
+            </button>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Database from '@/ipc-api/Database';
+
+export default {
+   name: 'ModalNewDatabase',
+   data () {
+      return {
+         database: {
+            name: '',
+            collation: ''
+         }
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      },
+      defaultCollation () {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+      }
+   },
+   created () {
+      this.database = { ...this.database, collation: this.defaultCollation };
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async createDatabase () {
+         try {
+            const { status, response } = await Database.createDatabase({
+               uid: this.selectedWorkspace,
+               ...this.database
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 360px;
+  }
+</style>

src/renderer/components/ModalNewTable.vue

@@ -0,0 +1,122 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmOptionsChange"
+      @hide="$emit('close')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-table-plus mr-1" /> {{ $t('message.createNewTable') }}
+         </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
+                     v-model="localOptions.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.comment') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="localOptions.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.collation') }}
+               </label>
+               <div class="column">
+                  <select v-model="localOptions.collation" class="form-select">
+                     <option
+                        v-for="collation in workspace.collations"
+                        :key="collation.id"
+                        :value="collation.collation"
+                     >
+                        {{ collation.collation }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.engine') }}
+               </label>
+               <div class="column">
+                  <select v-model="localOptions.engine" class="form-select">
+                     <option
+                        v-for="engine in workspace.engines"
+                        :key="engine.name"
+                        :value="engine.name"
+                     >
+                        {{ engine.name }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalNewTable',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      table: String,
+      workspace: Object
+   },
+   data () {
+      return {
+         localOptions: {
+            name: '',
+            comment: '',
+            collation: '',
+            engine: ''
+         },
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      defaultCollation () {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+      },
+      defaultEngine () {
+         return this.workspace.engines.find(engine => engine.isDefault).name;
+      }
+   },
+   mounted () {
+      this.localOptions.collation = this.defaultCollation;
+      this.localOptions.engine = this.defaultEngine;
+   },
+   methods: {
+      confirmOptionsChange () {
+         this.$emit('open-create-table-editor', this.localOptions);
+      }
+   }
+};
+</script>

src/renderer/components/ModalNewTableRow.vue

@@ -0,0 +1,331 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.addNewRow') }}
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body pb-0">
+            <div class="content">
+               <form class="form-horizontal">
+                  <fieldset :disabled="isInserting">
+                     <div
+                        v-for="(field, key) in fields"
+                        :key="field.name"
+                        class="form-group"
+                     >
+                        <div class="col-4 col-sm-12">
+                           <label class="form-label" :title="field.name">{{ field.name }}</label>
+                        </div>
+                        <div class="input-group col-8 col-sm-12">
+                           <ForeignKeySelect
+                              v-if="foreignKeys.includes(field.name)"
+                              class="form-select"
+                              :value.sync="localRow[field.name]"
+                              :key-usage="getKeyUsage(field.name)"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                           />
+                           <input
+                              v-else-if="inputProps(field).mask"
+                              v-model="localRow[field.name]"
+                              v-mask="inputProps(field).mask"
+                              class="form-input"
+                              :type="inputProps(field).type"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                           >
+                           <input
+                              v-else-if="inputProps(field).type === 'file'"
+                              class="form-input"
+                              type="file"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                              @change="filesChange($event,field.name)"
+                           >
+                           <input
+                              v-else
+                              v-model="localRow[field.name]"
+                              class="form-input"
+                              :type="inputProps(field).type"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                           >
+                           <span class="input-group-addon" :class="`type-${field.type}`">
+                              {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                           </span>
+                           <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                              <input
+                                 type="checkbox"
+                                 :checked="!field.autoIncrement"
+                                 @change.prevent="toggleFields($event, field)"
+                              ><i class="form-icon" />
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+               <input
+                  v-model="nInserts"
+                  type="number"
+                  class="form-input"
+                  min="1"
+                  :disabled="isInserting"
+               >
+               <span class="input-group-addon">
+                  <i class="mdi mdi-24px mdi-repeat" />
+               </span>
+            </div>
+            <div>
+               <button
+                  class="btn btn-primary mr-2"
+                  :class="{'loading': isInserting}"
+                  @click.stop="insertRows"
+               >
+                  {{ $t('word.insert') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { TEXT, LONG_TEXT, NUMBER, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { mask } from 'vue-the-mask';
+import { mapGetters, mapActions } from 'vuex';
+import Tables from '@/ipc-api/Tables';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
+
+export default {
+   name: 'ModalNewTableRow',
+   components: {
+      ForeignKeySelect
+   },
+   directives: {
+      mask
+   },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
+   props: {
+      tabUid: [String, Number],
+      fields: Array,
+      keyUsage: Array
+   },
+   data () {
+      return {
+         localRow: {},
+         fieldsToExclude: [],
+         nInserts: 1,
+         isInserting: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getWorkspaceTab: 'workspaces/getWorkspaceTab'
+      }),
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      foreignKeys () {
+         return this.keyUsage.map(key => key.column);
+      }
+   },
+   watch: {
+      nInserts (val) {
+         if (!val || val < 1)
+            this.nInserts = 1;
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      const rowObj = {};
+
+      for (const field of this.fields) {
+         let fieldDefault;
+
+         if (field.default === 'NULL') fieldDefault = null;
+         else {
+            if (NUMBER.includes(field.type))
+               fieldDefault = +field.default;
+
+            if ([...TEXT, ...LONG_TEXT].includes(field.type))
+               fieldDefault = field.default ? field.default.substring(1, field.default.length - 1) : '';
+
+            if ([...TIME, ...DATE].includes(field.type))
+               fieldDefault = field.default;
+
+            if (DATETIME.includes(field.type)) {
+               if (field.default && field.default.toLowerCase().includes('current_timestamp')) {
+                  let datePrecision = '';
+                  for (let i = 0; i < field.datePrecision; i++)
+                     datePrecision += i === 0 ? '.S' : 'S';
+                  fieldDefault = moment().format(`YYYY-MM-DD HH:mm:ss${datePrecision}`);
+               }
+            }
+         }
+
+         rowObj[field.name] = fieldDefault;
+
+         if (field.autoIncrement)// Disable by default auto increment fields
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      }
+
+      this.localRow = { ...rowObj };
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async insertRows () {
+         this.isInserting = true;
+         const rowToInsert = this.localRow;
+         Object.keys(rowToInsert).forEach(key => {
+            if (this.fieldsToExclude.includes(key))
+               delete rowToInsert[key];
+            if (typeof rowToInsert[key] === 'undefined')
+               delete rowToInsert[key];
+         });
+
+         const fieldTypes = {};
+         this.fields.forEach(field => {
+            fieldTypes[field.name] = field.type;
+         });
+
+         try {
+            const { status, response } = await Tables.insertTableRows({
+               uid: this.selectedWorkspace,
+               schema: this.workspace.breadcrumbs.schema,
+               table: this.workspace.breadcrumbs.table,
+               row: rowToInsert,
+               repeat: this.nInserts,
+               fields: fieldTypes
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isInserting = false;
+      },
+      closeModal () {
+         this.$emit('hide');
+      },
+      fieldLength (field) {
+         if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
+         return field.numLength || field.datePrecision || field.charLength || 0;
+      },
+      inputProps (field) {
+         if ([...TEXT, ...LONG_TEXT].includes(field.type))
+            return { type: 'text', mask: false };
+
+         if (NUMBER.includes(field.type))
+            return { type: 'number', mask: false };
+
+         if (TIME.includes(field.type)) {
+            let timeMask = '##:##:##';
+            const precision = this.fieldLength(field);
+
+            for (let i = 0; i < precision; i++)
+               timeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: timeMask };
+         }
+
+         if (DATE.includes(field.type))
+            return { type: 'text', mask: '####-##-##' };
+
+         if (DATETIME.includes(field.type)) {
+            let datetimeMask = '####-##-## ##:##:##';
+            const precision = this.fieldLength(field);
+
+            for (let i = 0; i < precision; i++)
+               datetimeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: datetimeMask };
+         }
+
+         if (BLOB.includes(field.type))
+            return { type: 'file', mask: false };
+
+         if (BIT.includes(field.type))
+            return { type: 'text', mask: false };
+
+         return { type: 'text', mask: false };
+      },
+      toggleFields (event, field) {
+         if (event.target.checked)
+            this.fieldsToExclude = this.fieldsToExclude.filter(f => f !== field.name);
+         else
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      },
+      filesChange (event, field) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localRow[field] = files[0].path;
+      },
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.column === keyName);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 500px;
+  }
+
+  .form-label {
+    overflow: hidden;
+    white-space: normal;
+    text-overflow: ellipsis;
+  }
+
+  .input-group-addon {
+    display: flex;
+    align-items: center;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

src/renderer/components/ModalSettings.vue

@@ -2,9 +2,12 @@
    <div id="settings" class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
-            <div class="modal-title h5">
-               {{ $t('word.settings') }}
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-cog mr-1" />
+                  {{ $t('word.settings') }}
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
@@ -31,7 +34,7 @@
                         :class="{'active': selectedTab === 'update'}"
                         @click="selectTab('update')"
                      >
-                        <a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
+                        <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                      </li>
                      <li
                         class="tab-item"
@@ -49,7 +52,7 @@
                         <div class="form-group mb-4">
                            <div class="col-6 col-sm-12">
                               <label class="form-label">
-                                 <i class="material-icons md-18 mr-1">translate</i>
+                                 <i class="mdi mdi-18px mdi-translate mr-1" />
                                  {{ $t('word.language') }}:
                               </label>
                            </div>
@@ -132,7 +135,6 @@ export default {
    },
    data () {
       return {
-         isUpdate: false,
          localLocale: null,
          localTimeout: null,
          selectedTab: 'general'
@@ -144,7 +146,8 @@ export default {
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
-         notificationsTimeout: 'settings/getNotificationsTimeout'
+         notificationsTimeout: 'settings/getNotificationsTimeout',
+         updateStatus: 'application/getUpdateStatus'
       }),
       locales () {
          const locales = [];
@@ -152,12 +155,19 @@ export default {
             locales.push({ code: locale, name: localesNames[locale] });
 
          return locales;
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
       }
    },
    created () {
       this.localLocale = this.selectedLocale;
       this.localTimeout = this.notificationsTimeout;
       this.selectedTab = this.selectedSettingTab;
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -176,6 +186,11 @@ export default {
             this.localTimeout = 10;
 
          this.updateNotificationsTimeout(+this.localTimeout);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };
@@ -195,6 +210,11 @@ export default {
       background: #32b643;
     }
 
+    .badge-update::after {
+      bottom: initial;
+      background: $primary-color;
+    }
+
     .form-label {
       display: flex;
       align-items: center;

src/renderer/components/ModalSettingsUpdate.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="empty">
       <div class="empty-icon">
-         <i class="material-icons md-48">system_update_alt</i>
+         <i class="mdi mdi-48px mdi-cloud-download" />
       </div>
       <p class="empty-title h5">
          {{ updateMessage }}
@@ -16,6 +16,9 @@
             {{ downloadPercentage }}%
          </p>
       </div>
+      <div v-if="updateStatus === 'available'">
+         <progress class="progress" max="100" />
+      </div>
       <div class="empty-action">
          <button
             v-if="['noupdate', 'checking', 'nocheck'].includes(updateStatus)"
@@ -68,10 +71,10 @@ export default {
    },
    methods: {
       checkForUpdates () {
-         ipcRenderer.send('checkForUpdates');
+         ipcRenderer.send('check-for-updates');
       },
       restartToUpdate () {
-         ipcRenderer.send('restartToUpdate');
+         ipcRenderer.send('restart-to-update');
       }
    }
 };

src/renderer/components/QueryEditor.vue

@@ -1,25 +1,15 @@
 <template>
    <div class="editor-wrapper">
-      <textarea
-         ref="codemirror"
-         :options="cmOptions"
-      />
+      <div ref="editor" class="editor" />
    </div>
 </template>
 
 <script>
-import CodeMirror from 'codemirror';
 
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/material-darker.css';
-import 'codemirror/mode/sql/sql';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/selection/active-line';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/addon/hint/sql-hint';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { completionItemProvider } from '@/suggestions/sql';
 
-CodeMirror.defineOption('sql-hint');
+monaco.languages.registerCompletionItemProvider('sql', completionItemProvider(monaco));
 
 export default {
    name: 'QueryEditor',
@@ -28,42 +18,31 @@ export default {
    },
    data () {
       return {
-         cminstance: null,
-         content: '',
-         cmOptions: {
-            tabSize: 3,
-            smartIndent: true,
-            styleActiveLine: true,
-            lineNumbers: true,
-            line: true,
-            mode: 'text/x-sql',
-            theme: 'material-darker',
-            extraKeys: {
-               'Ctrl-Space': 'autocomplete'
-            },
-            hintOptions: {
-               tables: {
-                  users: ['name', 'score', 'birthDate'],
-                  countries: ['name', 'population', 'size']
-               }
-            },
-            autoCloseBrackets: true
-         }
+         editor: null
       };
    },
    mounted () {
-      this.initialize();
-   },
-   methods: {
-      initialize () {
-         this.cminstance = CodeMirror.fromTextArea(this.$refs.codemirror, this.cmOptions);
-         this.cminstance.setValue(this.value || this.content);
+      this.editor = monaco.editor.create(this.$refs.editor, {
+         value: this.value,
+         language: 'sql',
+         theme: 'vs-dark',
+         autoIndent: true,
+         minimap: {
+            enabled: false
+         },
+         contextmenu: false,
+         wordBasedSuggestions: true,
+         acceptSuggestionOnEnter: 'smart',
+         quickSuggestions: true
+      });
 
-         this.cminstance.on('change', cm => {
-            this.content = cm.getValue();
-            this.$emit('input', this.content);
-         });
-      }
+      this.editor.onDidChangeModelContent(e => {
+         const content = this.editor.getValue();
+         this.$emit('update:value', content);
+      });
+   },
+   beforeDestroy () {
+      this.editor && this.editor.dispose();
    }
 };
 </script>
@@ -71,11 +50,14 @@ export default {
 <style lang="scss">
   .editor-wrapper {
     border-bottom: 1px solid #444;
+
+    .editor {
+      height: 200px;
+      width: 100%;
+    }
   }
 
   .CodeMirror {
-    height: 200px;
-
     .CodeMirror-scroll {
       max-width: 100%;
     }

src/renderer/components/SettingBarContext.vue

@@ -1,26 +1,33 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="$emit('closeContext')"
+      @close-context="$emit('close-context')"
    >
       <div class="context-element" @click="showEditModal(contextConnection)">
-         <i class="material-icons md-18 text-light pr-1">edit</i> {{ $t('word.edit') }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
       </div>
       <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $t('word.delete') }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
       </div>
 
+      <ModalEditConnection
+         v-if="isEditModal"
+         :connection="contextConnection"
+         @close="hideEditModal"
+      />
       <ConfirmModal
          v-if="isConfirmModal"
-         @confirm="deleteConnection(contextConnection)"
+         @confirm="confirmDeleteConnection"
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $t('message.deleteConnection') }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
-               {{ $t('message.deleteConnectionCorfirm') }} <b>{{ connectionName }}</b>?
+               {{ $t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
             </div>
          </div>
       </ConfirmModal>
@@ -31,11 +38,13 @@
 import { mapActions, mapGetters } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'SettingBarContext',
    components: {
       BaseContextMenu,
+      ModalEditConnection,
       ConfirmModal
    },
    props: {
@@ -44,7 +53,8 @@ export default {
    },
    data () {
       return {
-         isConfirmModal: false
+         isConfirmModal: false,
+         isEditModal: false
       };
    },
    computed: {
@@ -57,14 +67,28 @@ export default {
    },
    methods: {
       ...mapActions({
-         deleteConnection: 'connections/deleteConnection',
-         showEditModal: 'application/showEditConnModal'
+         deleteConnection: 'connections/deleteConnection'
       }),
+      confirmDeleteConnection () {
+         this.deleteConnection(this.contextConnection);
+         this.closeContext();
+      },
+      showEditModal () {
+         this.isEditModal = true;
+      },
+      hideEditModal () {
+         this.isEditModal = false;
+         this.closeContext();
+      },
       showConfirmModal () {
          this.isConfirmModal = true;
       },
       hideConfirmModal () {
          this.isConfirmModal = false;
+         this.closeContext();
+      },
+      closeContext () {
+         this.$emit('close-context');
       }
    }
 };

src/renderer/components/TheAppWelcome.vue

@@ -2,7 +2,7 @@
    <div class="columns">
       <div class="column col-12 empty text-light">
          <div class="empty-icon">
-            <i class="material-icons md-48">mood</i>
+            <i class="mdi mdi-48px mdi-emoticon" />
          </div>
          <p class="empty-title h5">
             {{ $t('message.appWelcome') }}
@@ -11,7 +11,7 @@
             {{ $t('message.appFirstStep') }}
          </p>
          <div class="empty-action">
-            <button class="btn btn-primary" @click="$emit('newConn')">
+            <button class="btn btn-primary" @click="$emit('new-conn')">
                {{ $t('message.createConnection') }}
             </button>
          </div>

src/renderer/components/TheFooter.vue

@@ -2,8 +2,8 @@
    <div id="footer" class="text-light">
       <div class="footer-left-elements">
          <ul class="footer-elements">
-            <li class="footer-element">
-               <i class="material-icons md-18 mr-1">memory</i>
+            <li class="footer-element" :title="$t('word.version')">
+               <i class="mdi mdi-18px mdi-memory mr-1" />
                <small>{{ appVersion }}</small>
             </li>
          </ul>
@@ -11,15 +11,15 @@
 
       <div class="footer-right-elements">
          <ul class="footer-elements">
-            <li class="footer-element footer-link" @click="openOutside('https://www.patreon.com/fabio286')">
-               <i class="material-icons md-18 mr-1">favorite</i>
+            <li class="footer-element footer-link" @click="openOutside('https://github.com/sponsors/Fabio286')">
+               <i class="mdi mdi-18px mdi-coffee mr-1" />
                <small>{{ $t('word.donate') }}</small>
             </li>
             <li class="footer-element footer-link" @click="openOutside('https://github.com/EStarium/antares/issues')">
-               <i class="material-icons md-18">bug_report</i>
+               <i class="mdi mdi-18px mdi-bug" />
             </li>
             <li class="footer-element footer-link" @click="showSettingModal('about')">
-               <i class="material-icons md-18">info_outline</i>
+               <i class="mdi mdi-18px mdi-information-outline" />
             </li>
          </ul>
       </div>

src/renderer/components/TheNotificationsBoard.vue

@@ -77,7 +77,7 @@ export default {
 <style lang="scss">
   #notifications-board {
     position: absolute;
-    z-index: 9;
+    z-index: 999;
     right: 1rem;
     bottom: 1rem;
   }

src/renderer/components/TheSettingBar.vue

@@ -5,7 +5,7 @@
             v-if="isContext"
             :context-event="contextEvent"
             :context-connection="contextConnection"
-            @closeContext="isContext = false"
+            @close-context="isContext = false"
          />
          <ul class="settingbar-elements">
             <draggable v-model="connections">
@@ -28,7 +28,7 @@
                @click="showNewConnModal"
                @mouseover.self="tooltipPosition"
             >
-               <i class="settingbar-element-icon material-icons text-light">add</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
                <span class="ex-tooltip-content">{{ $t('message.addConnection') }}</span>
             </li>
          </ul>
@@ -37,7 +37,7 @@
       <div class="settingbar-bottom-elements">
          <ul class="settingbar-elements">
             <li class="settingbar-element btn btn-link ex-tooltip" @click="showSettingModal('general')">
-               <i class="settingbar-element-icon material-icons text-light">settings</i>
+               <i class="settingbar-element-icon mdi mdi-24px mdi-cog text-light" :class="{' badge badge-update': hasUpdates}" />
                <span class="ex-tooltip-content">{{ $t('word.settings') }}</span>
             </li>
          </ul>
@@ -70,7 +70,8 @@ export default {
          getConnections: 'connections/getConnections',
          getConnectionName: 'connections/getConnectionName',
          connected: 'workspaces/getConnected',
-         selectedWorkspace: 'workspaces/getSelected'
+         selectedWorkspace: 'workspaces/getSelected',
+         updateStatus: 'application/getUpdateStatus'
       }),
       connections: {
          get () {
@@ -79,6 +80,9 @@ export default {
          set (value) {
             this.updateConnections(value);
          }
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
       }
    },
    methods: {
@@ -169,6 +173,11 @@ export default {
             position: absolute;
             background: $success-color;
           }
+
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
         }
       }
     }
@@ -192,6 +201,7 @@ export default {
       max-width: 320px;
       pointer-events: none;
       text-overflow: ellipsis;
+      overflow: hidden;
       transition: opacity 0.2s;
     }
 

src/renderer/components/TheTitleBar.vue

@@ -4,7 +4,7 @@
       <div class="titlebar-elements">
          <img class="titlebar-logo" :src="require('@/images/logo.svg').default">
       </div>
-      <div class="titlebar-elements">
+      <div class="titlebar-elements titlebar-title">
          {{ windowTitle }}
       </div>
       <div class="titlebar-elements">
@@ -13,24 +13,24 @@
             class="titlebar-element"
             @click="openDevTools"
          >
-            <i class="material-icons">code</i>
+            <i class="mdi mdi-24px mdi-code-tags" />
          </div>
          <div
             v-if="isDevelopment"
             class="titlebar-element"
             @click="reload"
          >
-            <i class="material-icons">refresh</i>
+            <i class="mdi mdi-24px mdi-refresh" />
          </div>
          <div class="titlebar-element" @click="minimizeApp">
-            <i class="material-icons">remove</i>
+            <i class="mdi mdi-24px mdi-minus" />
          </div>
          <div class="titlebar-element" @click="toggleFullScreen">
-            <i v-if="isMaximized" class="material-icons">fullscreen_exit</i>
-            <i v-else class="material-icons">fullscreen</i>
+            <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
+            <i v-else class="mdi mdi-24px mdi-fullscreen" />
          </div>
          <div class="titlebar-element close-button" @click="closeApp">
-            <i class="material-icons">close</i>
+            <i class="mdi mdi-24px mdi-close" />
          </div>
       </div>
    </div>
@@ -73,7 +73,7 @@ export default {
    },
    methods: {
       closeApp () {
-         ipcRenderer.send('closeApp');
+         ipcRenderer.send('close-app');
       },
       minimizeApp () {
          this.w.minimize();
@@ -123,6 +123,15 @@ export default {
       display: flex;
       align-items: center;
 
+      &.titlebar-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        text-align: center;
+        display: block;
+        pointer-events: none;
+      }
+
       .titlebar-logo {
         height: $titlebar-height;
         padding: 0 0.4rem;

src/renderer/components/Workspace.vue

@@ -2,37 +2,85 @@
    <div v-show="isSelected" class="workspace column columns col-gapless">
       <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
       <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
-         <ul class="tab tab-block column col-12">
-            <li
-               v-if="workspace.breadcrumbs.table"
-               class="tab-item"
-               :class="{'active': selectedTab === 1}"
-               @click="selectTab({uid: workspace.uid, tab: 1})"
-            >
-               <a class="tab-link">
-                  <i class="material-icons md-18 mr-1">grid_on</i>
-                  <span :title="workspace.breadcrumbs.table">{{ workspace.breadcrumbs.table }}</span>
+         <ul
+            id="tabWrap"
+            ref="tabWrap"
+            class="tab tab-block column col-12"
+         >
+            <li class="tab-item d-none">
+               <a class="tab-link workspace-tools-link">
+                  <i class="mdi mdi-24px mdi-tools" />
                </a>
             </li>
             <li
-               v-for="(tab, key) of queryTabs"
+               v-if="workspace.breadcrumbs.table"
+               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>
+               </a>
+            </li>
+            <li
+               v-if="workspace.breadcrumbs.table"
+               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>
+               </a>
+            </li>
+            <li
+               v-for="tab of queryTabs"
                :key="tab.uid"
                class="tab-item"
                :class="{'active': selectedTab === tab.uid}"
                @click="selectTab({uid: workspace.uid, tab: tab.uid})"
+               @mouseup.middle="closeTab(tab.uid)"
             >
-               <a><span>Query #{{ key+1 }} <span v-if="queryTabs.length > 1" class="btn btn-clear" /></span></a>
+               <a class="tab-link">
+                  <i class="mdi mdi-18px mdi-code-tags mr-1" />
+                  <span>
+                     Query #{{ tab.index }}
+                     <span
+                        v-if="queryTabs.length > 1"
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @click.stop="closeTab(tab.uid)"
+                     />
+                  </span>
+               </a>
+            </li>
+            <li class="tab-item">
+               <a
+                  class="tab-add"
+                  :title="$t('message.openNewTab')"
+                  @click="addTab"
+               >
+                  <i class="mdi mdi-24px mdi-plus" />
+               </a>
             </li>
          </ul>
+         <WorkspacePropsTab
+            v-show="selectedTab === 'prop'"
+            :is-selected="selectedTab === 'prop'"
+            :connection="connection"
+            :table="workspace.breadcrumbs.table"
+         />
          <WorkspaceTableTab
-            v-show="selectedTab === 1"
+            v-show="selectedTab === 'data'"
             :connection="connection"
             :table="workspace.breadcrumbs.table"
          />
          <WorkspaceQueryTab
             v-for="tab of queryTabs"
-            v-show="selectedTab === tab.uid"
             :key="tab.uid"
+            :tab-uid="tab.uid"
+            :is-selected="selectedTab === tab.uid"
             :connection="connection"
          />
       </div>
@@ -45,17 +93,24 @@ import Connection from '@/ipc-api/Connection';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
 import WorkspaceTableTab from '@/components/WorkspaceTableTab';
+import WorkspacePropsTab from '@/components/WorkspacePropsTab';
 
 export default {
    name: 'Workspace',
    components: {
       WorkspaceExploreBar,
       WorkspaceQueryTab,
-      WorkspaceTableTab
+      WorkspaceTableTab,
+      WorkspacePropsTab
    },
    props: {
       connection: Object
    },
+   data () {
+      return {
+         hasWheelEvent: false
+      };
+   },
    computed: {
       ...mapGetters({
          selectedWorkspace: 'workspaces/getSelected',
@@ -68,7 +123,13 @@ export default {
          return this.selectedWorkspace === this.connection.uid;
       },
       selectedTab () {
-         return this.workspace.selected_tab || this.queryTabs[0].uid;
+         if (this.workspace.breadcrumbs.table === null)
+            return this.queryTabs[0].uid;
+
+         return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) ||
+         ['data', 'prop'].includes(this.workspace.selected_tab)
+            ? this.workspace.selected_tab
+            : this.queryTabs[0].uid;
       },
       queryTabs () {
          return this.workspace.tabs.filter(tab => tab.type === 'query');
@@ -80,13 +141,38 @@ export default {
       if (isInitiated)
          this.connectWorkspace(this.connection);
    },
+   mounted () {
+      if (this.$refs.tabWrap) {
+         this.$refs.tabWrap.addEventListener('wheel', e => {
+            if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+            else this.$refs.tabWrap.scrollLeft -= 50;
+         });
+      }
+   },
    methods: {
       ...mapActions({
          addWorkspace: 'workspaces/addWorkspace',
          connectWorkspace: 'workspaces/connectWorkspace',
          removeConnected: 'workspaces/removeConnected',
-         selectTab: 'workspaces/selectTab'
-      })
+         selectTab: 'workspaces/selectTab',
+         newTab: 'workspaces/newTab',
+         removeTab: 'workspaces/removeTab'
+      }),
+      addTab () {
+         this.newTab(this.connection.uid);
+
+         if (!this.hasWheelEvent) {
+            this.$refs.tabWrap.addEventListener('wheel', e => {
+               if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+               else this.$refs.tabWrap.scrollLeft -= 50;
+            });
+            this.hasWheelEvent = true;
+         }
+      },
+      closeTab (tUid) {
+         if (this.queryTabs.length === 1) return;
+         this.removeTab({ uid: this.connection.uid, tab: tUid });
+      }
    }
 };
 </script>
@@ -97,22 +183,27 @@ export default {
   margin: 0;
 
   .workspace-tabs {
-    overflow: auto;
+    overflow: hidden;
     height: calc(100vh - #{$excluding-size});
 
     .tab-block {
       background: $bg-color-light;
       margin-top: 0;
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: nowrap;
+      overflow: auto;
+
+      &::-webkit-scrollbar {
+        width: 2px;
+        height: 2px;
+      }
 
       .tab-item {
         max-width: 12rem;
         width: fit-content;
         flex: initial;
 
-        &.active a {
-          opacity: 1;
-        }
-
         > a {
           padding: 0.2rem 0.8rem;
           color: $body-font-color;
@@ -126,12 +217,28 @@ export default {
             opacity: 1;
           }
 
+          &.tab-add {
+            padding: 0.2rem 0.4rem;
+            margin-top: 2px;
+            border: 0;
+          }
+
           > span {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            padding: 0 0.2rem;
           }
         }
+
+        &.active a {
+          opacity: 1;
+        }
+
+        .workspace-tools-link {
+          padding-bottom: 0;
+          padding-top: 0.3rem;
+        }
       }
     }
   }
@@ -155,6 +262,7 @@ export default {
         padding: 0;
         font-weight: 700;
         font-size: 0.7rem;
+        z-index: 1;
 
         > div {
           padding: 0.1rem 0.4rem;
@@ -172,6 +280,7 @@ export default {
         white-space: nowrap;
         overflow: hidden;
         font-size: 0.7rem;
+        position: relative;
 
         &:focus {
           box-shadow: inset 0 0 0 1px $body-font-color;

src/renderer/components/WorkspaceConnectPanel.vue

@@ -2,10 +2,10 @@
    <div class="columns">
       <div class="column col-12 empty text-light">
          <div class="empty-icon">
-            <i class="material-icons md-48">cloud_off</i>
+            <i class="mdi mdi-48px mdi-power-plug-off" />
          </div>
          <p class="empty-title h5">
-            {{ $t('word.disconnected') }}
+            {{ isConnecting ? $t('word.connecting') : $t('word.disconnected') }}
          </p>
          <div class="empty-action">
             <button
@@ -19,7 +19,7 @@
       </div>
       <ModalAskCredentials
          v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
          @credentials="continueTest"
       />
    </div>

src/renderer/components/WorkspaceExploreBar.vue

@@ -10,16 +10,21 @@
             <span class="workspace-explorebar-title">{{ connectionName }}</span>
             <span v-if="workspace.connected" class="workspace-explorebar-tools">
                <i
-                  class="material-icons md-18 c-hand"
+                  class="mdi mdi-18px mdi-database-plus c-hand mr-2"
+                  :title="$t('message.createNewDatabase')"
+                  @click="showNewDBModal"
+               />
+               <i
+                  class="mdi mdi-18px mdi-refresh c-hand mr-2"
                   :class="{'rotate':isRefreshing}"
                   :title="$t('word.refresh')"
                   @click="refresh"
-               >refresh</i>
+               />
                <i
-                  class="material-icons md-18 c-hand mr-1 ml-2"
+                  class="mdi mdi-18px mdi-power-plug-off c-hand"
                   :title="$t('word.disconnect')"
                   @click="disconnectWorkspace(connection.uid)"
-               >exit_to_app</i>
+               />
             </span>
          </div>
          <WorkspaceConnectPanel
@@ -33,23 +38,60 @@
                :key="db.name"
                :database="db"
                :connection="connection"
+               @show-database-context="openDatabaseContext"
+               @show-table-context="openTableContext"
             />
          </div>
       </div>
+      <ModalNewDatabase
+         v-if="isNewDBModal"
+         @close="hideNewDBModal"
+         @reload="refresh"
+      />
+      <ModalNewTable
+         v-if="isNewTableModal"
+         :workspace="workspace"
+         @close="hideCreateTableModal"
+         @open-create-table-editor="openCreateTableEditor"
+      />
+      <DatabaseContext
+         v-if="isDatabaseContext"
+         :selected-database="selectedDatabase"
+         :context-event="databaseContextEvent"
+         @close-context="closeDatabaseContext"
+         @show-create-table-modal="showCreateTableModal"
+         @reload="refresh"
+      />
+      <TableContext
+         v-if="isTableContext"
+         :selected-table="selectedTable"
+         :context-event="tableContextEvent"
+         @close-context="closeTableContext"
+         @reload="refresh"
+      />
    </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import _ from 'lodash';
+import Tables from '@/ipc-api/Tables';
 import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
 import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
+import DatabaseContext from '@/components/WorkspaceExploreBarDatabaseContext';
+import TableContext from '@/components/WorkspaceExploreBarTableContext';
+import ModalNewDatabase from '@/components/ModalNewDatabase';
+import ModalNewTable from '@/components/ModalNewTable';
 
 export default {
    name: 'WorkspaceExploreBar',
    components: {
       WorkspaceConnectPanel,
-      WorkspaceExploreBarDatabase
+      WorkspaceExploreBarDatabase,
+      DatabaseContext,
+      TableContext,
+      ModalNewDatabase,
+      ModalNewTable
    },
    props: {
       connection: Object,
@@ -58,7 +100,15 @@ export default {
    data () {
       return {
          isRefreshing: false,
-         localWidth: null
+         isNewDBModal: false,
+         isNewTableModal: false,
+         localWidth: null,
+         isDatabaseContext: false,
+         isTableContext: false,
+         databaseContextEvent: null,
+         tableContextEvent: null,
+         selectedDatabase: '',
+         selectedTable: ''
       };
    },
    computed: {
@@ -99,6 +149,9 @@ export default {
       ...mapActions({
          disconnectWorkspace: 'workspaces/removeConnected',
          refreshStructure: 'workspaces/refreshStructure',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         selectTab: 'workspaces/selectTab',
+         addNotification: 'notifications/addNotification',
          changeExplorebarSize: 'settings/changeExplorebarSize'
       }),
       async refresh () {
@@ -117,6 +170,51 @@ export default {
       },
       stopResize () {
          window.removeEventListener('mousemove', this.resize);
+      },
+      showNewDBModal () {
+         this.isNewDBModal = true;
+      },
+      hideNewDBModal () {
+         this.isNewDBModal = false;
+      },
+      showCreateTableModal () {
+         this.closeDatabaseContext();
+         this.isNewTableModal = true;
+      },
+      hideCreateTableModal () {
+         this.isNewTableModal = false;
+      },
+      async openCreateTableEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Tables.createTable(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, table: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
+      },
+      openDatabaseContext (payload) {
+         this.selectedDatabase = payload.database;
+         this.databaseContextEvent = payload.event;
+         this.isDatabaseContext = true;
+      },
+      closeDatabaseContext () {
+         this.isDatabaseContext = false;
+      },
+      openTableContext (payload) {
+         this.selectedTable = payload.table;
+         this.tableContextEvent = payload.event;
+         this.isTableContext = true;
+      },
+      closeTableContext () {
+         this.isTableContext = false;
       }
    }
 };

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -1,12 +1,13 @@
 <template>
    <details class="accordion workspace-explorebar-database">
       <summary
-         class="accordion-header database-name pb-0"
+         class="accordion-header database-name"
          :class="{'text-bold': breadcrumbs.schema === database.name}"
-         @click="changeBreadcrumbs({schema: database.name, table:null})"
+         @click="changeBreadcrumbs({schema: database.name, table: null})"
+         @contextmenu.prevent="showDatabaseContext($event, database.name)"
       >
-         <i class="icon material-icons md-18 mr-1">navigate_next</i>
-         <i class="material-icons md-18 mr-1">view_agenda</i>
+         <i class="icon mdi mdi-18px mdi-chevron-right" />
+         <i class="database-icon mdi mdi-18px mdi-database mr-1" />
          <span>{{ database.name }}</span>
       </summary>
       <div class="accordion-body">
@@ -14,15 +15,19 @@
             <ul class="menu menu-nav pt-0">
                <li
                   v-for="table of database.tables"
-                  :key="table.TABLE_NAME"
+                  :key="table.name"
                   class="menu-item"
-                  :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.table === table.TABLE_NAME}"
-                  @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
+                  :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)"
                >
                   <a class="table-name">
-                     <i class="material-icons md-18 mr-1">grid_on</i>
-                     <span>{{ table.TABLE_NAME }}</span>
+                     <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 class="pie" :style="piePercentage(table.size)" />
+                  </div>
                </li>
             </ul>
          </div>
@@ -32,6 +37,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { formatBytes } from 'common/libs/formatBytes';
 
 export default {
    name: 'WorkspaceExploreBarDatabase',
@@ -45,46 +51,121 @@ export default {
       }),
       breadcrumbs () {
          return this.getWorkspace(this.connection.uid).breadcrumbs;
+      },
+      maxSize () {
+         return this.database.tables.reduce((acc, curr) => {
+            if (curr.size > acc) acc = curr.size;
+            return acc;
+         }, 0);
+      },
+      totalSize () {
+         return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
       }
    },
    methods: {
       ...mapActions({
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      })
+      }),
+      formatBytes,
+      showDatabaseContext (event, database) {
+         this.$emit('show-database-context', { event, database });
+      },
+      showTableContext (event, table) {
+         this.$emit('show-table-context', { event, table });
+      },
+      piePercentage (val) {
+         const perc = val / this.maxSize * 100;
+         return { background: `conic-gradient(lime ${perc}%, white 0)` };
+      },
+      setBreadcrumbs (payload) {
+         if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
+         this.changeBreadcrumbs(payload);
+      }
    }
 };
 </script>
 
 <style lang="scss">
-  .workspace-explorebar-database {
-    .database-name,
-    a.table-name {
-      display: flex;
-      align-items: center;
-      padding: 0.1rem;
-      cursor: pointer;
-      font-size: 0.7rem;
+.workspace-explorebar-database {
+  .database-name,
+  a.table-name {
+    display: flex;
+    align-items: center;
+    padding: 0.1rem 1rem 0.1rem 0.1rem;
+    cursor: pointer;
+    font-size: 0.7rem;
 
-      > span {
-        overflow: hidden;
-        white-space: nowrap;
-        display: block;
-        text-overflow: ellipsis;
-      }
-
-      &:hover {
-        color: $body-font-color;
-        background: rgba($color: #fff, $alpha: 0.05);
-        border-radius: 2px;
-      }
+    > span {
+      overflow: hidden;
+      white-space: nowrap;
+      display: block;
+      text-overflow: ellipsis;
     }
 
-    .menu-item {
-      line-height: 1.2;
-    }
-
-    .database-tables {
-      margin-left: 1.2rem;
+    .database-icon,
+    .table-icon {
+      opacity: 0.7;
     }
   }
+
+  .database-name {
+    &:hover {
+      color: $body-font-color;
+      background: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 2px;
+    }
+  }
+
+  a.table-name {
+    &:hover {
+      color: inherit;
+      background: inherit;
+    }
+  }
+
+  .menu-item {
+    line-height: 1.2;
+    position: relative;
+
+    &:hover {
+      color: $body-font-color;
+      background: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 2px;
+    }
+  }
+
+  .database-tables {
+    margin-left: 1.2rem;
+  }
+
+  .table-size {
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    opacity: 0.2;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &::after {
+      font-weight: 400;
+      font-size: 0.5rem;
+    }
+
+    .pie {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
 </style>

src/renderer/components/WorkspaceExploreBarDatabaseContext.vue

@@ -0,0 +1,126 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div class="context-element">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ $t('word.add') }}</span>
+         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <div class="context-submenu">
+            <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>
+      </div>
+      <div class="context-element" @click="showEditModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-edit text-light pr-1" /> {{ $t('word.edit') }}</span>
+      </div>
+      <div class="context-element" @click="showDeleteModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-database-remove text-light pr-1" /> {{ $t('word.delete') }}</span>
+      </div>
+
+      <ConfirmModal
+         v-if="isDeleteModal"
+         @confirm="deleteDatabase"
+         @hide="hideDeleteModal"
+      >
+         <template slot="header">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-database-remove mr-1" /> {{ $t('message.deleteDatabase') }}
+            </div>
+         </template>
+         <div slot="body">
+            <div class="mb-2">
+               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedDatabase }}</b>"?
+            </div>
+         </div>
+      </ConfirmModal>
+      <ModalEditDatabase
+         v-if="isEditModal"
+         :selected-database="selectedDatabase"
+         @close="hideEditModal"
+      />
+   </BaseContextMenu>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import ModalEditDatabase from '@/components/ModalEditDatabase';
+import Database from '@/ipc-api/Database';
+
+export default {
+   name: 'WorkspaceExploreBarDatabaseContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal,
+      ModalEditDatabase
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedDatabase: String
+   },
+   data () {
+      return {
+         isDeleteModal: false,
+         isEditModal: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      showCreateTableModal () {
+         this.$emit('show-create-table-modal');
+      },
+      showDeleteModal () {
+         this.isDeleteModal = true;
+      },
+      hideDeleteModal () {
+         this.isDeleteModal = false;
+      },
+      showEditModal () {
+         this.isEditModal = true;
+      },
+      hideEditModal () {
+         this.isEditModal = false;
+         this.closeContext();
+      },
+      closeContext () {
+         this.$emit('close-context');
+      },
+      async deleteDatabase () {
+         try {
+            const { status, response } = await Database.deleteDatabase({
+               uid: this.selectedWorkspace,
+               database: this.selectedDatabase
+            });
+
+            if (status === 'success') {
+               if (this.selectedDatabase === this.workspace.breadcrumbs.schema)
+                  this.changeBreadcrumbs({ schema: 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

@@ -0,0 +1,146 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div 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">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ $t('word.delete') }}</span>
+      </div>
+
+      <ConfirmModal
+         v-if="isEmptyModal"
+         @confirm="emptyTable"
+         @hide="hideEmptyModal"
+      >
+         <template slot="header">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-table-off mr-1" /> {{ $t('message.emptyTable') }}
+            </div>
+         </template>
+         <div slot="body">
+            <div class="mb-2">
+               {{ $t('message.emptyCorfirm') }} "<b>{{ selectedTable }}</b>"?
+            </div>
+         </div>
+      </ConfirmModal>
+      <ConfirmModal
+         v-if="isDeleteModal"
+         @confirm="deleteTable"
+         @hide="hideDeleteModal"
+      >
+         <template slot="header">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-table-remove mr-1" /> {{ $t('message.deleteTable') }}
+            </div>
+         </template>
+         <div slot="body">
+            <div class="mb-2">
+               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedTable }}</b>"?
+            </div>
+         </div>
+      </ConfirmModal>
+   </BaseContextMenu>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import Tables from '@/ipc-api/Tables';
+
+export default {
+   name: 'WorkspaceExploreBarTableContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedTable: String
+   },
+   data () {
+      return {
+         isDeleteModal: false,
+         isEmptyModal: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
+      }),
+      showCreateTableModal () {
+         this.$emit('show-create-table-modal');
+      },
+      showDeleteModal () {
+         this.isDeleteModal = true;
+      },
+      hideDeleteModal () {
+         this.isDeleteModal = false;
+      },
+      showEmptyModal () {
+         this.isEmptyModal = true;
+      },
+      hideEmptyModal () {
+         this.isEmptyModal = false;
+      },
+      closeContext () {
+         this.$emit('close-context');
+      },
+      async emptyTable () {
+         try {
+            const { status, response } = await Tables.truncateTable({
+               uid: this.selectedWorkspace,
+               table: this.selectedTable
+            });
+
+            if (status === 'success') {
+               if (this.selectedTable === this.workspace.breadcrumbs.table)
+                  this.changeBreadcrumbs({ table: null });
+
+               this.closeContext();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async deleteTable () {
+         try {
+            const { status, response } = await Tables.dropTable({
+               uid: this.selectedWorkspace,
+               table: this.selectedTable
+            });
+
+            if (status === 'success') {
+               if (this.selectedTable === this.workspace.breadcrumbs.table)
+                  this.changeBreadcrumbs({ table: 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/WorkspacePropsIndexesModal.vue

@@ -0,0 +1,263 @@
+<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-key mdi-rotate-45 mr-1" /> {{ $t('word.indexes') }} "{{ table }}"
+         </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="addIndex">
+                           <span>{{ $t('word.add') }}</span>
+                           <i class="mdi mdi-24px mdi-key-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="indexesPanel" class="panel-body p-0 pr-1">
+                     <div
+                        v-for="index in indexesProxy"
+                        :key="index._id"
+                        class="tile tile-centered c-hand mb-1 p-1"
+                        :class="{'selected-index': selectedIndexID === index._id}"
+                        @click="selectIndex($event, index._id)"
+                     >
+                        <div class="tile-icon">
+                           <div>
+                              <i class="mdi mdi-key mdi-24px column-key" :class="`key-${index.type}`" />
+                           </div>
+                        </div>
+                        <div class="tile-content">
+                           <div class="tile-title">
+                              {{ index.name }}
+                           </div>
+                           <small class="tile-subtitle text-gray">{{ index.type }} · {{ index.fields.length }} {{ $tc('word.field', index.fields.length) }}</small>
+                        </div>
+                        <div class="tile-action">
+                           <button
+                              class="btn btn-link remove-field p-0 mr-2"
+                              :title="$t('word.delete')"
+                              @click.prevent="removeIndex(index._id)"
+                           >
+                              <i class="mdi mdi-close" />
+                           </button>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+
+            <div class="column col-7 pl-2 editor-col">
+               <form v-if="selectedIndexObj" :style="{ height: modalInnerHeight + 'px'}">
+                  <div class="form-group">
+                     <label class="form-label">
+                        {{ $t('word.name') }}
+                     </label>
+                     <input
+                        v-model="selectedIndexObj.name"
+                        class="form-input"
+                        type="text"
+                     >
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label">
+                        {{ $t('word.type') }}
+                     </label>
+                     <select v-model="selectedIndexObj.type" class="form-select">
+                        <option
+                           v-for="index in indexTypes"
+                           :key="index"
+                           :value="index"
+                           :disabled="index === 'PRIMARY' && hasPrimary"
+                        >
+                           {{ index }}
+                        </option>
+                     </select>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label">
+                        {{ $tc('word.field', fields.length) }}
+                     </label>
+                     <div class="fields-list">
+                        <label
+                           v-for="(field, i) in fields"
+                           :key="`${field.name}-${i}`"
+                           class="form-checkbox m-0"
+                           @click.prevent="toggleField(field.name)"
+                        >
+                           <input type="checkbox" :checked="selectedIndexObj.fields.some(f => f === field.name)">
+                           <i class="form-icon" /> {{ field.name }}
+                        </label>
+                     </div>
+                  </div>
+               </form>
+            </div>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { uidGen } from 'common/libs/uidGen';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsIndexesModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localIndexes: Array,
+      table: String,
+      fields: Array,
+      workspace: Object,
+      indexTypes: Array
+   },
+   data () {
+      return {
+         indexesProxy: [],
+         isOptionsChanging: false,
+         selectedIndexID: '',
+         modalInnerHeight: 400
+      };
+   },
+   computed: {
+      selectedIndexObj () {
+         return this.indexesProxy.find(index => index._id === this.selectedIndexID);
+      },
+      isChanged () {
+         return JSON.stringify(this.localIndexes) !== JSON.stringify(this.indexesProxy);
+      },
+      hasPrimary () {
+         return this.indexesProxy.some(index => index.type === 'PRIMARY');
+      }
+   },
+   mounted () {
+      this.indexesProxy = JSON.parse(JSON.stringify(this.localIndexes));
+
+      if (this.indexesProxy.length)
+         this.resetSelectedID();
+
+      this.getModalInnerHeight();
+      window.addEventListener('resize', this.getModalInnerHeight);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.getModalInnerHeight);
+   },
+   methods: {
+      confirmIndexesChange () {
+         this.$emit('indexes-update', this.indexesProxy);
+      },
+      selectIndex (event, id) {
+         if (this.selectedIndexID !== id && !event.target.classList.contains('remove-field'))
+            this.selectedIndexID = id;
+      },
+      getModalInnerHeight () {
+         const modalBody = document.querySelector('.modal-body');
+         if (modalBody)
+            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+      },
+      addIndex () {
+         this.indexesProxy = [...this.indexesProxy, {
+            _id: uidGen(),
+            name: 'NEW_INDEX',
+            fields: [],
+            type: 'INDEX',
+            comment: '',
+            indexType: 'BTREE',
+            indexComment: '',
+            cardinality: 0
+         }];
+
+         if (this.indexesProxy.length === 1)
+            this.resetSelectedID();
+
+         setTimeout(() => {
+            this.$refs.indexesPanel.scrollTop = this.$refs.indexesPanel.scrollHeight + 60;
+         }, 20);
+      },
+      removeIndex (id) {
+         this.indexesProxy = this.indexesProxy.filter(index => index._id !== id);
+
+         if (this.selectedIndexID === id && this.indexesProxy.length)
+            this.resetSelectedID();
+      },
+      clearChanges () {
+         this.indexesProxy = JSON.parse(JSON.stringify(this.localIndexes));
+         if (!this.indexesProxy.some(index => index._id === this.selectedIndexID))
+            this.resetSelectedID();
+      },
+      toggleField (field) {
+         this.indexesProxy = this.indexesProxy.map(index => {
+            if (index._id === this.selectedIndexID) {
+               if (index.fields.includes(field))
+                  index.fields = index.fields.filter(f => f !== field);
+               else
+                  index.fields.push(field);
+            }
+            return index;
+         });
+      },
+      resetSelectedID () {
+         this.selectedIndexID = this.indexesProxy[0]._id;
+      }
+   }
+};
+</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-index {
+    background: $bg-color-light;
+    opacity: 1;
+  }
+}
+
+.editor-col {
+  border-left: 2px solid $bg-color-light;
+}
+
+.fields-list {
+  max-height: 200px;
+  overflow: auto;
+}
+
+.remove-field .mdi {
+  pointer-events: none;
+}
+</style>

src/renderer/components/WorkspacePropsOptionsModal.vue

@@ -0,0 +1,125 @@
+<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') }} "{{ table }}"
+         </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
+                     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.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('word.autoIncrement') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="optionsProxy.autoIncrement"
+                     class="form-input"
+                     type="number"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.collation') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.collation" class="form-select">
+                     <option
+                        v-for="collation in workspace.collations"
+                        :key="collation.id"
+                        :value="collation.collation"
+                     >
+                        {{ collation.collation }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.engine') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.engine" class="form-select">
+                     <option
+                        v-for="engine in workspace.engines"
+                        :key="engine.name"
+                        :value="engine.name"
+                     >
+                        {{ engine.name }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsOptionsModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localOptions: Object,
+      table: String,
+      workspace: Object
+   },
+   data () {
+      return {
+         optionsProxy: {},
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      isTableNameValid () {
+         return this.optionsProxy.name !== '';
+      }
+   },
+   created () {
+      this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
+   },
+   methods: {
+      confirmOptionsChange () {
+         if (!this.isTableNameValid)
+            this.optionsProxy.name = this.localOptions.name;
+
+         this.$emit('options-update', this.optionsProxy);
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTab.vue

@@ -0,0 +1,429 @@
+<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"
+                  :title="$t('message.addNewField')"
+                  @click="addField"
+               >
+                  <span>{{ $t('word.add') }}</span>
+                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
+               </button>
+               <button
+                  class="btn btn-dark btn-sm"
+                  :title="$t('message.manageIndexes')"
+                  @click="showIntdexesModal"
+               >
+                  <span>{{ $t('word.indexes') }}</span>
+                  <i class="mdi mdi-24px mdi-key mdi-rotate-45 ml-1" />
+               </button>
+               <button class="btn btn-dark btn-sm d-none">
+                  <span>{{ $t('word.foreignKeys') }}</span>
+                  <i class="mdi mdi-24px mdi-key-link 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">
+         <WorkspacePropsTable
+            v-if="localFields"
+            ref="indexTable"
+            :fields="localFields"
+            :indexes="localIndexes"
+            :tab-uid="tabUid"
+            :conn-uid="connection.uid"
+            :index-types="workspace.indexTypes"
+            :table="table"
+            :schema="schema"
+            mode="table"
+            @remove-field="removeField"
+            @add-new-index="addNewIndex"
+            @add-to-index="addToIndex"
+         />
+      </div>
+      <WorkspacePropsOptionsModal
+         v-if="isOptionsModal"
+         :local-options="localOptions"
+         :table="table"
+         :workspace="workspace"
+         @hide="hideOptionsModal"
+         @options-update="optionsUpdate"
+      />
+      <WorkspacePropsIndexesModal
+         v-if="isIndexesModal"
+         :local-indexes="localIndexes"
+         :table="table"
+         :fields="localFields"
+         :index-types="workspace.indexTypes"
+         :workspace="workspace"
+         @hide="hideIndexesModal"
+         @indexes-update="indexesUpdate"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
+import Tables from '@/ipc-api/Tables';
+import WorkspacePropsTable from '@/components/WorkspacePropsTable';
+import WorkspacePropsOptionsModal from '@/components/WorkspacePropsOptionsModal';
+import WorkspacePropsIndexesModal from '@/components/WorkspacePropsIndexesModal';
+
+export default {
+   name: 'WorkspacePropsTab',
+   components: {
+      WorkspacePropsTable,
+      WorkspacePropsOptionsModal,
+      WorkspacePropsIndexesModal
+   },
+   props: {
+      connection: Object,
+      table: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isQuering: false,
+         isSaving: false,
+         isOptionsModal: false,
+         isIndexesModal: false,
+         isOptionsChanging: false,
+         originalFields: [],
+         localFields: [],
+         originalKeyUsage: [],
+         localKeyUsage: [],
+         originalIndexes: [],
+         localIndexes: [],
+         localOptions: {},
+         lastTable: null,
+         newFieldsCounter: 0
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      tableOptions () {
+         const db = this.workspace.structure.find(db => db.name === this.schema);
+         return db && this.table ? db.tables.find(table => table.name === this.table) : {};
+      },
+      defaultEngine () {
+         return this.getDatabaseVariable(this.connection.uid, 'default_storage_engine').value || '';
+      },
+      isSelected () {
+         return this.workspace.selected_tab === 'prop';
+      },
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) ||
+            JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage) ||
+            JSON.stringify(this.originalIndexes) !== JSON.stringify(this.localIndexes) ||
+            JSON.stringify(this.tableOptions) !== JSON.stringify(this.localOptions);
+      }
+   },
+   watch: {
+      table () {
+         if (this.isSelected) {
+            this.getFieldsData();
+            this.lastTable = this.table;
+         }
+      },
+      isSelected (val) {
+         if (val && this.lastTable !== this.table) {
+            this.getFieldsData();
+            this.lastTable = this.table;
+         }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastTable === this.table && this.table !== null)
+            this.setUnsavedChanges(val);
+      }
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges'
+      }),
+      async getFieldsData () {
+         if (!this.table) return;
+         this.newFieldsCounter = 0;
+         this.isQuering = true;
+         this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            table: this.workspace.breadcrumbs.table
+         };
+
+         try { // Columns data
+            const { status, response } = await Tables.getTableColumns(params);
+            if (status === 'success') {
+               this.originalFields = response.map(field => {
+                  return { ...field, _id: uidGen() };
+               });
+               this.localFields = JSON.parse(JSON.stringify(this.originalFields));
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         try { // Indexes
+            const { status, response } = await Tables.getTableIndexes(params);
+
+            if (status === 'success') {
+               const indexesObj = response.reduce((acc, curr) => {
+                  acc[curr.name] = acc[curr.name] || [];
+                  acc[curr.name].push(curr);
+                  return acc;
+               }, {});
+
+               this.originalIndexes = Object.keys(indexesObj).map(index => {
+                  return {
+                     _id: uidGen(),
+                     name: index,
+                     fields: indexesObj[index].map(field => field.column),
+                     type: indexesObj[index][0].type,
+                     comment: indexesObj[index][0].comment,
+                     indexType: indexesObj[index][0].indexType,
+                     indexComment: indexesObj[index][0].indexComment,
+                     cardinality: indexesObj[index][0].cardinality
+                  };
+               });
+
+               this.localIndexes = JSON.parse(JSON.stringify(this.originalIndexes));
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         try { // Key usage (foreign keys)
+            const { status, response } = await Tables.getKeyUsage(params);
+
+            if (status === 'success') {
+               this.originalKeyUsage = response;
+               this.localKeyUsage = JSON.parse(JSON.stringify(response));
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isQuering = false;
+      },
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+
+         // FIELDS
+         const originalIDs = this.originalFields.reduce((acc, curr) => [...acc, curr._id], []);
+         const localIDs = this.localFields.reduce((acc, curr) => [...acc, curr._id], []);
+
+         // Fields Additions
+         const additions = this.localFields.filter((field, i) => !originalIDs.includes(field._id)).map(field => {
+            const lI = this.localFields.findIndex(localField => localField._id === field._id);
+            const after = lI > 0 ? this.localFields[lI - 1].name : false;
+            return { ...field, after };
+         });
+
+         // Fields Deletions
+         const deletions = this.originalFields.filter(field => !localIDs.includes(field._id));
+
+         // Fields Changes
+         const changes = [];
+         this.originalFields.forEach((originalField, oI) => {
+            const lI = this.localFields.findIndex(localField => localField._id === originalField._id);
+            const originalSibling = oI > 0 ? this.originalFields[oI - 1]._id : false;
+            const localSibling = lI > 0 ? this.localFields[lI - 1]._id : false;
+            const after = lI > 0 ? this.localFields[lI - 1].name : false;
+            const orgName = originalField.name;
+
+            if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
+               if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
+         });
+
+         // OPTIONS
+         const options = Object.keys(this.localOptions).reduce((acc, option) => {
+            if (this.localOptions[option] !== this.tableOptions[option])
+               acc[option] = this.localOptions[option];
+            return acc;
+         }, {});
+
+         // INDEXES
+         const indexChanges = {
+            additions: [],
+            changes: [],
+            deletions: []
+         };
+         const originalIndexIDs = this.originalIndexes.reduce((acc, curr) => [...acc, curr._id], []);
+         const localIndexIDs = this.localIndexes.reduce((acc, curr) => [...acc, curr._id], []);
+
+         // Index Additions
+         indexChanges.additions = this.localIndexes.filter(index => !originalIndexIDs.includes(index._id));
+
+         // Index Changes
+         this.originalIndexes.forEach(originalIndex => {
+            const lI = this.localIndexes.findIndex(localIndex => localIndex._id === originalIndex._id);
+            if (JSON.stringify(originalIndex) !== JSON.stringify(this.localIndexes[lI])) {
+               if (this.localIndexes[lI]) {
+                  indexChanges.changes.push({
+                     ...this.localIndexes[lI],
+                     oldName: originalIndex.name,
+                     oldType: originalIndex.type
+                  });
+               }
+            }
+         });
+
+         // Index Deletions
+         indexChanges.deletions = this.originalIndexes.filter(index => !localIndexIDs.includes(index._id));
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            table: this.workspace.breadcrumbs.table,
+            additions,
+            changes,
+            deletions,
+            indexChanges,
+            options
+         };
+
+         try { // Key usage (foreign keys)
+            const { status, response } = await Tables.alterTable(params);
+
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
+               this.getFieldsData();
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+         this.newFieldsCounter = 0;
+      },
+      clearChanges () {
+         this.localFields = JSON.parse(JSON.stringify(this.originalFields));
+         this.localIndexes = JSON.parse(JSON.stringify(this.originalIndexes));
+         this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
+         this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
+         this.newFieldsCounter = 0;
+      },
+      addField () {
+         this.localFields.push({
+            _id: uidGen(),
+            name: `${this.$tc('word.field', 1)}_${++this.newFieldsCounter}`,
+            key: '',
+            type: 'int',
+            schema: this.schema,
+            table: this.table,
+            numPrecision: null,
+            numLength: null,
+            datePrecision: null,
+            charLength: null,
+            nullable: false,
+            unsigned: false,
+            zerofill: false,
+            order: this.localFields.length + 1,
+            default: null,
+            charset: null,
+            collation: null,
+            autoIncrement: false,
+            onUpdate: '',
+            comment: ''
+         });
+
+         setTimeout(() => {
+            const scrollable = this.$refs.indexTable.$refs.tableWrapper;
+            scrollable.scrollTop = scrollable.scrollHeight + 30;
+         }, 20);
+      },
+      removeField (uid) {
+         this.localFields = this.localFields.filter(field => field._id !== uid);
+      },
+      addNewIndex (payload) {
+         this.localIndexes = [...this.localIndexes, {
+            _id: uidGen(),
+            name: payload.index === 'PRIMARY' ? 'PRIMARY' : payload.field,
+            fields: [payload.field],
+            type: payload.index,
+            comment: '',
+            indexType: 'BTREE',
+            indexComment: '',
+            cardinality: 0
+         }];
+      },
+      addToIndex (payload) {
+         this.localIndexes = this.localIndexes.map(index => {
+            if (index._id === payload.index) index.fields.push(payload.field);
+            return index;
+         });
+      },
+      showOptionsModal () {
+         this.isOptionsModal = true;
+      },
+      hideOptionsModal () {
+         this.isOptionsModal = false;
+      },
+      optionsUpdate (options) {
+         this.localOptions = options;
+      },
+      showIntdexesModal () {
+         this.isIndexesModal = true;
+      },
+      hideIndexesModal () {
+         this.isIndexesModal = false;
+      },
+      indexesUpdate (indexes) {
+         this.localIndexes = indexes;
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTable.vue

@@ -0,0 +1,234 @@
+<template>
+   <div
+      ref="tableWrapper"
+      class="vscroll"
+      :style="{'height': resultsSize+'px'}"
+   >
+      <TableContext
+         v-if="isContext"
+         :context-event="contextEvent"
+         :selected-field="selectedField"
+         :index-types="indexTypes"
+         :indexes="indexes"
+         @delete-selected="removeField"
+         @close-context="isContext = false"
+         @add-new-index="$emit('add-new-index', $event)"
+         @add-to-index="$emit('add-to-index', $event)"
+      />
+      <div ref="propTable" class="table table-hover">
+         <div class="thead">
+            <div class="tr">
+               <div class="th">
+                  <div class="text-right">
+                     {{ $t('word.order') }}
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="table-column-title">
+                     {{ $tc('word.key', 2) }}
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.name') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.type') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.length') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.unsigned') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('message.allowNull') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('message.zeroFill') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.default') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.comment') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable">
+                     <div class="table-column-title">
+                        {{ $t('word.collation') }}
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+         <draggable
+            ref="resultTable"
+            :list="fields"
+            class="tbody"
+            handle=".row-draggable"
+         >
+            <TableRow
+               v-for="row in fields"
+               :key="row._id"
+               :row="row"
+               :indexes="getIndexes(row.name)"
+               :data-types="dataTypes"
+               @contextmenu="contextMenu"
+            />
+         </draggable>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import draggable from 'vuedraggable';
+import TableRow from '@/components/WorkspacePropsTableRow';
+import TableContext from '@/components/WorkspacePropsTableContext';
+
+export default {
+   name: 'WorkspacePropsTable',
+   components: {
+      TableRow,
+      TableContext,
+      draggable
+   },
+   props: {
+      fields: Array,
+      indexes: Array,
+      indexTypes: Array,
+      tabUid: [String, Number],
+      connUid: String,
+      table: String,
+      schema: String,
+      mode: String
+   },
+   data () {
+      return {
+         resultsSize: 1000,
+         isContext: false,
+         contextEvent: null,
+         selectedField: null,
+         scrollElement: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getWorkspaceTab: 'workspaces/getWorkspaceTab',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspaceSchema () {
+         return this.getWorkspace(this.connUid).breadcrumbs.schema;
+      },
+      dataTypes () {
+         return this.getWorkspace(this.connUid).dataTypes;
+      },
+      primaryField () {
+         return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
+      },
+      tabProperties () {
+         return this.getWorkspaceTab(this.tabUid);
+      },
+      fieldsLength () {
+         return this.fields.length;
+      }
+   },
+   watch: {
+      fieldsLength () {
+         this.refreshScroller();
+      }
+   },
+   updated () {
+      if (this.$refs.propTable)
+         this.refreshScroller();
+
+      if (this.$refs.tableWrapper)
+         this.scrollElement = this.$refs.tableWrapper;
+   },
+   mounted () {
+      window.addEventListener('resize', this.resizeResults);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeResults);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      resizeResults () {
+         if (this.$refs.resultTable) {
+            const el = this.$refs.tableWrapper;
+
+            if (el) {
+               const footer = document.getElementById('footer');
+               const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
+               this.resultsSize = size;
+            }
+         }
+      },
+      refreshScroller () {
+         this.resizeResults();
+      },
+      contextMenu (event, uid) {
+         this.selectedField = this.fields.find(field => field._id === uid);
+         this.contextEvent = event;
+         this.isContext = true;
+      },
+      removeField () {
+         this.$emit('remove-field', this.selectedField._id);
+      },
+      getIndexes (field) {
+         return this.indexes.reduce((acc, curr) => {
+            acc.push(...curr.fields.map(f => ({ name: f, type: curr.type })));
+            return acc;
+         }, []).filter(f => f.name === field);
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.column-resizable {
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
+}
+
+.vscroll {
+  overflow: auto;
+}
+</style>

src/renderer/components/WorkspacePropsTableContext.vue

@@ -0,0 +1,87 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div class="context-element">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ $t('message.createNewIndex') }}</span>
+         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <div class="context-submenu">
+            <div
+               v-for="index in indexTypes"
+               :key="index"
+               class="context-element"
+               :class="{'disabled': index === 'PRIMARY' && hasPrimary}"
+               @click="addNewIndex(index)"
+            >
+               <span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index}`" /> {{ index }}</span>
+            </div>
+         </div>
+      </div>
+      <div v-if="indexes.length" class="context-element">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-key-arrow-right text-light pr-1" /> {{ $t('message.addToIndex') }}</span>
+         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <div class="context-submenu">
+            <div
+               v-for="index in indexes"
+               :key="index.name"
+               class="context-element"
+               :class="{'disabled': index.fields.includes(selectedField.name)}"
+               @click="addToIndex(index._id)"
+            >
+               <span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index.type}`" /> {{ index.name }}</span>
+            </div>
+         </div>
+      </div>
+      <div class="context-element" @click="deleteField">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('message.deleteField') }}</span>
+      </div>
+   </BaseContextMenu>
+</template>
+
+<script>
+import BaseContextMenu from '@/components/BaseContextMenu';
+
+export default {
+   name: 'WorkspaceQueryTableContext',
+   components: {
+      BaseContextMenu
+   },
+   props: {
+      contextEvent: MouseEvent,
+      indexes: Array,
+      indexTypes: Array,
+      selectedField: Object
+   },
+   computed: {
+      hasPrimary () {
+         return this.indexes.some(index => index.type === 'PRIMARY');
+      }
+   },
+   methods: {
+      closeContext () {
+         this.$emit('close-context');
+      },
+      deleteField () {
+         this.$emit('delete-selected');
+         this.closeContext();
+      },
+      addNewIndex (index) {
+         this.$emit('add-new-index', { field: this.selectedField.name, index });
+         this.closeContext();
+      },
+      addToIndex (index) {
+         this.$emit('add-to-index', { field: this.selectedField.name, index });
+         this.closeContext();
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.disabled {
+  pointer-events: none;
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+</style>

src/renderer/components/WorkspacePropsTableRow.vue

@@ -0,0 +1,520 @@
+<template>
+   <div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)">
+      <div class="td">
+         <div class="row-draggable">
+            <i class="mdi mdi-drag-horizontal row-draggable-icon" />
+            {{ localRow.order }}
+         </div>
+      </div>
+      <div class="td" tabindex="0">
+         <div class="text-center">
+            <i
+               v-for="(index, i) in indexes"
+               :key="`${index.name}-${i}`"
+               :title="index.type"
+               class="d-inline-block mdi mdi-key column-key c-help"
+               :class="`key-${index.type}`"
+            />
+         </div>
+      </div>
+      <div class="td">
+         <span
+            v-if="!isInlineEditor.name"
+            class="cell-content"
+            @dblclick="editON($event, localRow.name , 'name')"
+         >
+            {{ localRow.name }}
+         </span>
+         <input
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            type="text"
+            autofocus
+            class="editable-field px-2"
+            @blur="editOFF"
+         >
+      </div>
+      <div class="td text-uppercase text-left" :class="`type-${lowerCase(localRow.type)}`">
+         <span
+            v-if="!isInlineEditor.type"
+            class="cell-content"
+            @dblclick="editON($event, localRow.type.toUpperCase(), 'type')"
+         >
+            {{ localRow.type }}
+         </span>
+         <select
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            class="editable-field px-1 text-uppercase"
+            @blur="editOFF"
+         >
+            <optgroup
+               v-for="group in dataTypes"
+               :key="group.group"
+               :label="group.group"
+            >
+               <option
+                  v-for="type in group.types"
+                  :key="type.name"
+                  :selected="localRow.type.toUpperCase() === type.name"
+                  :value="type.name"
+               >
+                  {{ type.name }}
+               </option>
+            </optgroup>
+         </select>
+      </div>
+      <div class="td type-int">
+         <template v-if="fieldType.length">
+            <span
+               v-if="!isInlineEditor.length"
+               class="cell-content"
+               @dblclick="editON($event, localLength, 'length')"
+            >
+               {{ localLength }}
+            </span>
+            <input
+               v-else
+               ref="editField"
+               v-model="editingContent"
+               type="number"
+               autofocus
+               class="editable-field px-2"
+               @blur="editOFF"
+            >
+         </template>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.unsigned"
+               type="checkbox"
+               :disabled="!fieldType.unsigned"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.nullable"
+               type="checkbox"
+               :disabled="localRow.key === 'pri'"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.zerofill"
+               type="checkbox"
+               :disabled="!fieldType.zerofill"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
+            {{ fieldDefault }}
+         </span>
+      </div>
+      <div class="td type-varchar">
+         <span
+            v-if="!isInlineEditor.comment"
+            class="cell-content"
+            @dblclick="editON($event, localRow.comment , 'comment')"
+         >
+            {{ localRow.comment }}
+         </span>
+         <input
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            type="text"
+            autofocus
+            class="editable-field px-2"
+            @blur="editOFF"
+         >
+      </div>
+      <div class="td">
+         <template v-if="fieldType.collation">
+            <span
+               v-if="!isInlineEditor.collation"
+               class="cell-content"
+               @dblclick="editON($event, localRow.collation, 'collation')"
+            >
+               {{ localRow.collation }}
+            </span>
+            <select
+               v-else
+               ref="editField"
+               v-model="editingContent"
+               class="editable-field px-1"
+               @blur="editOFF"
+            >
+               <option
+                  v-for="collation in collations"
+                  :key="collation.collation"
+                  :selected="localRow.collation === collation.collation"
+                  :value="collation.collation"
+               >
+                  {{ collation.collation }}
+               </option>
+            </select>
+         </template>
+      </div>
+      <ConfirmModal
+         v-if="isDefaultModal"
+         :confirm-text="$t('word.confirm')"
+         size="400"
+         @confirm="editOFF"
+         @hide="hideDefaultModal"
+      >
+         <template :slot="'header'">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.default') }} "{{ row.name }}"
+            </div>
+         </template>
+         <div :slot="'body'">
+            <form class="form-horizontal">
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        type="radio"
+                        name="default"
+                        value="noval"
+                     ><i class="form-icon" /> No value
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <div class="form-group">
+                     <label class="form-radio form-inline col-4">
+                        <input
+                           v-model="defaultValue.type"
+                           value="custom"
+                           type="radio"
+                           name="default"
+                        ><i class="form-icon" /> {{ $t('message.customValue') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.custom"
+                           :disabled="defaultValue.type !== 'custom'"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        type="radio"
+                        name="default"
+                        value="null"
+                     ><i class="form-icon" /> NULL
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        :disabled="localRow.key !== 'pri'"
+                        type="radio"
+                        name="default"
+                        value="autoincrement"
+                     ><i class="form-icon" /> AUTO_INCREMENT
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <div class="form-group">
+                     <label class="form-radio form-inline col-4">
+                        <input
+                           v-model="defaultValue.type"
+                           type="radio"
+                           name="default"
+                           value="expression"
+                        ><i class="form-icon" /> {{ $t('word.expression') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.expression"
+                           :disabled="defaultValue.type !== 'expression'"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+               <div>
+                  <div class="form-group">
+                     <label class="form-label col-4">
+                        {{ $t('message.onUpdate') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.onUpdate"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+            </form>
+         </div>
+      </ConfirmModal>
+   </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsTableRow',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      row: Object,
+      dataTypes: Array,
+      indexes: Array
+   },
+   data () {
+      return {
+         localRow: {},
+         isInlineEditor: {},
+         isDefaultModal: false,
+         defaultValue: {
+            type: 'noval',
+            custom: '',
+            expression: '',
+            onUpdate: ''
+         },
+         editingContent: null,
+         editingField: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      localLength () {
+         return this.localRow.numLength || this.localRow.charLength || this.localRow.datePrecision || 0;
+      },
+      fieldType () {
+         const fieldType = this.dataTypes.reduce((acc, group) => [...acc, ...group.types], []).filter(type =>
+            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : '')
+         );
+         const group = this.dataTypes.filter(group => group.types.some(type =>
+            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : ''))
+         );
+
+         return fieldType.length ? { ...fieldType[0], group: group[0].group } : {};
+      },
+      fieldDefault () {
+         if (this.localRow.autoIncrement) return 'AUTO_INCREMENT';
+         if (this.localRow.default === 'NULL') return 'NULL';
+         return this.localRow.default;
+      },
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      }
+   },
+   watch: {
+      localRow () {
+         this.initLocalRow();
+      },
+      row () {
+         this.localRow = this.row;
+      }
+   },
+   mounted () {
+      this.localRow = this.row;
+      this.initLocalRow();
+      this.isInlineEditor.length = false;
+   },
+   methods: {
+      keyName (key) {
+         switch (key) {
+            case 'pri':
+               return 'PRIMARY';
+            case 'uni':
+               return 'UNIQUE';
+            case 'mul':
+               return 'INDEX';
+            default:
+               return 'UNKNOWN ' + key;
+         }
+      },
+      lowerCase (val) {
+         if (val)
+            return val.toLowerCase();
+         return val;
+      },
+      initLocalRow () {
+         Object.keys(this.localRow).forEach(key => {
+            this.isInlineEditor[key] = false;
+         });
+
+         this.defaultValue.onUpdate = this.localRow.onUpdate;
+
+         if (this.localRow.autoIncrement)
+            this.defaultValue.type = 'autoincrement';
+         else if (this.localRow.default === null)
+            this.defaultValue.type = 'noval';
+         else if (this.localRow.default === 'NULL')
+            this.defaultValue.type = 'null';
+         else if (this.localRow.default.match(/^'.*'$/g)) {
+            this.defaultValue.type = 'custom';
+            this.defaultValue.custom = this.localRow.default.replace(/(^')|('$)/g, '');
+         }
+         else if (!isNaN(this.localRow.default)) {
+            this.defaultValue.type = 'custom';
+            this.defaultValue.custom = this.localRow.default;
+         }
+         else {
+            this.defaultValue.type = 'expression';
+            this.defaultValue.expression = this.localRow.default;
+         }
+      },
+      updateRow () {
+         this.$emit('input', this.localRow);
+      },
+      editON (event, content, field) {
+         if (field === 'length') {
+            if (['integer', 'float', 'binary', 'spatial'].includes(this.fieldType.group)) this.editingField = 'numLength';
+            if (['string', 'other'].includes(this.fieldType.group)) this.editingField = 'charLength';
+            if (['time'].includes(this.fieldType.group)) this.editingField = 'datePrecision';
+         }
+         else
+            this.editingField = field;
+
+         this.editingContent = content;
+
+         const obj = { [field]: true };
+         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+
+         if (field === 'default')
+            this.isDefaultModal = true;
+         else {
+            this.$nextTick(() => { // Focus on input
+               event.target.blur();
+
+               this.$nextTick(() => document.querySelector('.editable-field').focus());
+            });
+         }
+      },
+      editOFF () {
+         this.localRow[this.editingField] = this.editingContent;
+
+         if (this.editingField === 'type') {
+            this.localRow.numLength = false;
+            this.localRow.charLength = false;
+            this.localRow.datePrecision = false;
+
+            if (this.fieldType.length) {
+               if (['integer', 'float', 'binary', 'spatial'].includes(this.fieldType.group)) this.localRow.numLength = 11;
+               if (['string', 'other'].includes(this.fieldType.group)) this.localRow.charLength = 15;
+               if (['time'].includes(this.fieldType.group)) this.localRow.datePrecision = 0;
+            }
+
+            if (!this.fieldType.collation)
+               this.localRow.collation = null;
+         }
+
+         if (this.editingField === 'default') {
+            switch (this.defaultValue.type) {
+               case 'autoincrement':
+                  this.localRow.autoIncrement = true;
+                  break;
+               case 'noval':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = null;
+                  break;
+               case 'null':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = 'NULL';
+                  break;
+               case 'custom':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = `'${this.defaultValue.custom}'`;
+                  break;
+               case 'expression':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = this.defaultValue.expression;
+                  break;
+            }
+
+            this.localRow.onUpdate = this.defaultValue.onUpdate;
+         }
+
+         Object.keys(this.isInlineEditor).forEach(key => {
+            this.isInlineEditor = { ...this.isInlineEditor, [key]: false };
+         });
+
+         this.editingContent = null;
+         this.editingField = null;
+      },
+      hideDefaultModal () {
+         this.isDefaultModal = false;
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.editable-field {
+  margin: 0;
+  border: none;
+  line-height: 1;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.row-draggable {
+  position: relative;
+  text-align: right;
+  padding-left: 28px;
+  cursor: grab;
+
+  .row-draggable-icon {
+    position: absolute;
+    left: 0;
+    font-size: 22px;
+  }
+}
+
+.table-column-title {
+  display: flex;
+  align-items: center;
+}
+
+.form-checkbox {
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+  min-height: auto;
+
+  .form-icon {
+    top: 0.15rem;
+    left: calc(50% - 8px);
+  }
+}
+
+.cell-content {
+  display: block;
+  min-height: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+</style>

src/renderer/components/WorkspaceQueryTab.vue

@@ -1,25 +1,33 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
-         <QueryEditor v-model="query" />
+         <QueryEditor v-if="isSelected" :value.sync="query" />
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-primary btn-sm"
                   :class="{'loading':isQuering}"
                   :disabled="!query"
+                  title="F9"
                   @click="runQuery(query)"
                >
                   <span>{{ $t('word.run') }}</span>
-                  <i class="material-icons text-success">play_arrow</i>
+                  <i class="mdi mdi-24px mdi-play" />
                </button>
             </div>
             <div class="workspace-query-info">
-               <div v-if="results.rows">
-                  {{ $t('word.results') }}: <b>{{ results.rows.length }}</b>
+               <div v-if="resultsCount">
+                  {{ $t('word.results') }}: <b>{{ resultsCount.toLocaleString() }}</b>
                </div>
-               <div v-if="workspace.breadcrumbs.schema">
-                  {{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b>
+               <div v-if="affectedCount">
+                  {{ $t('message.affectedRows') }}: <b>{{ affectedCount }}</b>
+               </div>
+               <div
+                  v-if="workspace.breadcrumbs.schema"
+                  class="d-flex"
+                  :title="$t('word.schema')"
+               >
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ workspace.breadcrumbs.schema }}</b>
                </div>
             </div>
          </div>
@@ -27,19 +35,21 @@
       <div class="workspace-query-results column col-12">
          <WorkspaceQueryTable
             v-if="results"
+            v-show="!isQuering"
             ref="queryTable"
             :results="results"
-            :fields="fields"
-            @updateField="updateField"
-            @deleteSelected="deleteSelected"
+            :tab-uid="tabUid"
+            :conn-uid="connection.uid"
+            mode="query"
+            @update-field="updateField"
+            @delete-selected="deleteSelected"
          />
       </div>
    </div>
 </template>
 
 <script>
-import Connection from '@/ipc-api/Connection';
-import Tables from '@/ipc-api/Tables';
+import Database from '@/ipc-api/Database';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
 import { mapGetters, mapActions } from 'vuex';
@@ -53,15 +63,18 @@ export default {
    },
    mixins: [tableTabs],
    props: {
-      connection: Object
+      connection: Object,
+      tabUid: String,
+      isSelected: Boolean
    },
    data () {
       return {
          query: '',
          lastQuery: '',
          isQuering: false,
-         results: {},
-         fields: []
+         results: [],
+         resultsCount: 0,
+         affectedCount: 0
       };
    },
    computed: {
@@ -70,49 +83,37 @@ export default {
       }),
       workspace () {
          return this.getWorkspace(this.connection.uid);
-      },
-      table () {
-         if (this.results.fields.length)
-            return this.results.fields[0].orgTable;
-         return '';
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification'
       }),
       async runQuery (query) {
-         if (!query) return;
+         if (!query || this.isQuering) return;
          this.isQuering = true;
-         this.results = {};
+         this.clearTabData();
 
-         try {
+         try { // Query Data
             const params = {
                uid: this.connection.uid,
-               query,
-               schema: this.workspace.breadcrumbs.schema
+               schema: this.schema,
+               query
             };
 
-            const { status, response } = await Connection.rawQuery(params);
-            if (status === 'success')
-               this.results = response;
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
+            const { status, response } = await Database.rawQuery(params);
 
-         try {
-            const params = {
-               uid: this.connection.uid,
-               schema: this.workspace.breadcrumbs.schema,
-               table: this.table
-            };
-
-            const { status, response } = await Tables.getTableColumns(params);
-            if (status === 'success')
-               this.fields = response;
+            if (status === 'success') {
+               this.results = Array.isArray(response) ? response : [response];
+               this.resultsCount += this.results.reduce((acc, curr) => acc + (curr.rows ? curr.rows.length : 0), 0);
+               this.affectedCount += this.results.reduce((acc, curr) => acc + (curr.report ? curr.report.affectedRows : 0), 0);
+            }
             else
                this.addNotification({ status: 'error', message: response });
          }
@@ -125,6 +126,18 @@ export default {
       },
       reloadTable () {
          this.runQuery(this.lastQuery);
+      },
+      clearTabData () {
+         this.results = [];
+         this.resultsCount = 0;
+         this.affectedCount = 0;
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.key === 'F9')
+               this.runQuery(this.query);
+         }
       }
    }
 };

src/renderer/components/WorkspaceQueryTable.vue

@@ -1,87 +1,103 @@
 <template>
-   <div>
+   <div
+      ref="tableWrapper"
+      class="vscroll"
+      :style="{'height': resultsSize+'px'}"
+   >
       <TableContext
          v-if="isContext"
          :context-event="contextEvent"
          :selected-rows="selectedRows"
-         @deleteSelected="deleteSelected"
-         @closeContext="isContext = false"
+         @delete-selected="deleteSelected"
+         @close-context="isContext = false"
       />
-      <BaseVirtualScroll
-         v-if="results.rows"
-         ref="resultTable"
-         :items="sortedResults"
-         :item-height="25"
-         class="vscroll"
-         :style="{'height': resultsSize+'px'}"
-      >
-         <template slot-scope="{ items }">
-            <div class="table table-hover">
-               <div class="thead">
-                  <div class="tr">
-                     <div
-                        v-for="field in fields"
-                        :key="field.name"
-                        class="th c-hand"
-                     >
-                        <div ref="columnResize" class="column-resizable">
-                           <div class="table-column-title" @click="sort(field.name)">
-                              <i
-                                 v-if="field.key"
-                                 class="material-icons column-key c-help"
-                                 :class="`key-${field.key}`"
-                                 :title="keyName(field.key)"
-                              >vpn_key</i>
-                              <span>{{ field.name }}</span>
-                              <i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
-                           </div>
-                        </div>
+      <ul v-if="resultsWithRows.length > 1" class="tab tab-block result-tabs">
+         <li
+            v-for="(result, index) in resultsWithRows"
+            :key="index"
+            class="tab-item"
+            :class="{'active': resultsetIndex === index}"
+            @click="selectResultset(index)"
+         >
+            <a>{{ result.fields ? result.fields[0].table : '' }} ({{ result.rows.length }})</a>
+         </li>
+      </ul>
+      <div ref="table" class="table table-hover">
+         <div class="thead">
+            <div class="tr">
+               <div
+                  v-for="(field, index) in fields"
+                  :key="index"
+                  class="th c-hand"
+                  :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`"
+               >
+                  <div ref="columnResize" class="column-resizable">
+                     <div class="table-column-title" @click="sort(field.name)">
+                        <i
+                           v-if="field.key"
+                           class="mdi mdi-key column-key c-help"
+                           :class="`key-${field.key}`"
+                           :title="keyName(field.key)"
+                        />
+                        <span>{{ field.alias || field.name }}</span>
+                        <i
+                           v-if="currentSort === field.name || currentSort === `${field.table}.${field.name}`"
+                           class="mdi sort-icon"
+                           :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                        />
                      </div>
                   </div>
                </div>
-               <div class="tbody">
-                  <div
-                     v-for="row in items"
-                     :key="row._id"
-                     class="tr"
-                     :class="{'selected': selectedRows.includes(row._id)}"
-                     @click="selectRow($event, row._id)"
-                  >
-                     <WorkspaceQueryTableCell
-                        v-for="(col, cKey) in row"
-                        :key="cKey"
-                        :content="col"
-                        :field="cKey"
-                        :precision="fieldPrecision(cKey)"
-                        :type="fieldType(cKey)"
-                        @updateField="updateField($event, row[primaryField.name])"
-                        @contextmenu="contextMenu($event, {id: row._id, field: cKey})"
-                     />
-                  </div>
-               </div>
             </div>
-         </template>
-      </BaseVirtualScroll>
+         </div>
+         <BaseVirtualScroll
+            v-if="resultsWithRows[resultsetIndex] && resultsWithRows[resultsetIndex].rows"
+            ref="resultTable"
+            :items="sortedResults"
+            :item-height="22"
+            class="tbody"
+            :visible-height="resultsSize"
+            :scroll-element="scrollElement"
+         >
+            <template slot-scope="{ items }">
+               <WorkspaceQueryTableRow
+                  v-for="row in items"
+                  :key="row._id"
+                  :row="row"
+                  :fields="fields"
+                  :key-usage="keyUsage"
+                  class="tr"
+                  :class="{'selected': selectedRows.includes(row._id)}"
+                  @select-row="selectRow($event, row._id)"
+                  @update-field="updateField($event, getPrimaryValue(row))"
+                  @contextmenu="contextMenu"
+               />
+            </template>
+         </BaseVirtualScroll>
+      </div>
    </div>
 </template>
 
 <script>
 import { uidGen } from 'common/libs/uidGen';
+import { LONG_TEXT, BLOB } from 'common/fieldTypes';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
-import WorkspaceQueryTableCell from '@/components/WorkspaceQueryTableCell';
+import WorkspaceQueryTableRow from '@/components/WorkspaceQueryTableRow';
 import TableContext from '@/components/WorkspaceQueryTableContext';
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
    name: 'WorkspaceQueryTable',
    components: {
       BaseVirtualScroll,
-      WorkspaceQueryTableCell,
+      WorkspaceQueryTableRow,
       TableContext
    },
    props: {
-      results: Object,
-      fields: Array
+      results: Array,
+      tabUid: [String, Number],
+      connUid: String,
+      mode: String
    },
    data () {
       return {
@@ -92,12 +108,20 @@ export default {
          selectedCell: null,
          selectedRows: [],
          currentSort: '',
-         currentSortDir: 'asc'
+         currentSortDir: 'asc',
+         resultsetIndex: 0,
+         scrollElement: null
       };
    },
    computed: {
+      ...mapGetters({
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspaceSchema () {
+         return this.getWorkspace(this.connUid).breadcrumbs.schema;
+      },
       primaryField () {
-         return this.fields.filter(field => field.key === 'pri')[0] || false;
+         return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
       },
       sortedResults () {
          if (this.currentSort) {
@@ -113,19 +137,32 @@ export default {
          }
          else
             return this.localResults;
+      },
+      resultsWithRows () {
+         return this.results.filter(result => result.rows);
+      },
+      fields () {
+         return this.resultsWithRows.length ? this.resultsWithRows[this.resultsetIndex].fields : [];
+      },
+      keyUsage () {
+         return this.resultsWithRows.length ? this.resultsWithRows[this.resultsetIndex].keys : [];
       }
    },
    watch: {
       results () {
-         this.resetSort();
-         this.localResults = this.results.rows ? this.results.rows.map(item => {
-            return { ...item, _id: uidGen() };
-         }) : [];
+         this.setLocalResults();
+         this.resultsetIndex = 0;
+      },
+      resultsetIndex () {
+         this.setLocalResults();
       }
    },
    updated () {
-      if (this.$refs.resultTable)
+      if (this.$refs.table)
          this.refreshScroller();
+
+      if (this.$refs.tableWrapper)
+         this.scrollElement = this.$refs.tableWrapper;
    },
    mounted () {
       window.addEventListener('resize', this.resizeResults);
@@ -149,10 +186,14 @@ export default {
          let length = 0;
          const field = this.fields.filter(field => field.name === cKey)[0];
          if (field)
-            length = field.precision;
+            length = field.datePrecision;
 
          return length;
       },
+      fieldLength (field) {
+         if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
+         return field.numLength || field.datePrecision || field.charLength || 0;
+      },
       keyName (key) {
          switch (key) {
             case 'pri':
@@ -165,12 +206,41 @@ export default {
                return 'UNKNOWN ' + key;
          }
       },
+      getTable (index) {
+         if (this.resultsWithRows[index] && this.resultsWithRows[index].fields && this.resultsWithRows[index].fields.length)
+            return this.resultsWithRows[index].fields[0].table;
+         return '';
+      },
+      getSchema (index) {
+         if (this.resultsWithRows[index] && this.resultsWithRows[index].fields && this.resultsWithRows[index].fields.length)
+            return this.resultsWithRows[index].fields[0].schema;
+         return this.workspaceSchema;
+      },
+      getPrimaryValue (row) {
+         const primaryFieldName = Object.keys(row).find(prop => [
+            this.primaryField.alias,
+            this.primaryField.name,
+            `${this.primaryField.table}.${this.primaryField.alias}`,
+            `${this.primaryField.table}.${this.primaryField.name}`,
+            `${this.primaryField.tableAlias}.${this.primaryField.alias}`,
+            `${this.primaryField.tableAlias}.${this.primaryField.name}`
+         ].includes(prop));
+         return row[primaryFieldName];
+      },
+      setLocalResults () {
+         this.resetSort();
+         this.localResults = this.resultsWithRows[this.resultsetIndex] && this.resultsWithRows[this.resultsetIndex].rows
+            ? this.resultsWithRows[this.resultsetIndex].rows.map(item => {
+               return { ...item, _id: uidGen() };
+            })
+            : [];
+      },
       resizeResults () {
          if (this.$refs.resultTable) {
-            const el = this.$refs.resultTable.$el;
-            const footer = document.getElementById('footer');
+            const el = this.$refs.tableWrapper;
 
             if (el) {
+               const footer = document.getElementById('footer');
                const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
                this.resultsSize = size;
             }
@@ -186,29 +256,40 @@ export default {
          else {
             const params = {
                primary: this.primaryField.name,
+               schema: this.getSchema(this.resultsetIndex),
+               table: this.getTable(this.resultsetIndex),
                id,
                ...payload
             };
-            this.$emit('updateField', params);
+            this.$emit('update-field', params);
          }
       },
       deleteSelected () {
          if (!this.primaryField)
             this.addNotification({ status: 'warning', message: this.$t('message.unableEditFieldWithoutPrimary') });
          else {
-            const rowIDs = this.localResults.filter(row => this.selectedRows.includes(row._id)).map(row => row[this.primaryField.name]);
+            const rowIDs = this.localResults.filter(row => this.selectedRows.includes(row._id)).map(row =>
+               row[this.primaryField.name] ||
+               row[`${this.primaryField.table}.${this.primaryField.name}`] ||
+               row[`${this.primaryField.tableAlias}.${this.primaryField.name}`]
+            );
             const params = {
                primary: this.primaryField.name,
+               schema: this.getSchema(this.resultsetIndex),
+               table: this.getTable(this.resultsetIndex),
                rows: rowIDs
             };
-            this.$emit('deleteSelected', params);
+            this.$emit('delete-selected', params);
          }
       },
       applyUpdate (params) {
-         const { primary, id, field, content } = params;
+         const { primary, id, field, table, content } = params;
+
          this.localResults = this.localResults.map(row => {
-            if (row[primary] === id)
+            if (row[primary] === id)// only fieldName
                row[field] = content;
+            else if (row[`${table}.${primary}`] === id)// table.fieldName
+               row[`${table}.${field}`] = content;
 
             return row;
          });
@@ -248,6 +329,9 @@ export default {
          this.isContext = true;
       },
       sort (field) {
+         if (this.mode === 'query')
+            field = `${this.getTable(this.resultsetIndex)}.${field}`;
+
          if (field === this.currentSort) {
             if (this.currentSortDir === 'asc')
                this.currentSortDir = 'desc';
@@ -262,12 +346,15 @@ export default {
       resetSort () {
          this.currentSort = '';
          this.currentSortDir = 'asc';
+      },
+      selectResultset (index) {
+         this.resultsetIndex = index;
       }
    }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vscroll {
   height: 1000px;
   overflow: auto;
@@ -293,22 +380,8 @@ export default {
   margin-left: 0.2rem;
 }
 
-.column-key {
-  transform: rotate(90deg);
-  font-size: 0.7rem;
-  line-height: 1.5;
-  margin-right: 0.2rem;
-
-  &.key-pri {
-    color: goldenrod;
-  }
-
-  &.key-uni {
-    color: deepskyblue;
-  }
-
-  &.key-mul {
-    color: palegreen;
-  }
+.result-tabs {
+  background: transparent !important;
+  margin: 0;
 }
 </style>

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -1,10 +1,10 @@
 <template>
    <BaseContextMenu
       :context-event="contextEvent"
-      @closeContext="closeContext"
+      @close-context="closeContext"
    >
       <div class="context-element" @click="showConfirmModal">
-         <i class="material-icons md-18 text-light pr-1">delete</i> {{ $tc('message.deleteRows', selectedRows.length) }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}</span>
       </div>
 
       <ConfirmModal
@@ -13,7 +13,9 @@
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
-            {{ $tc('message.deleteRows', selectedRows.length) }}
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-delete mr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
@@ -25,7 +27,6 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 
@@ -47,10 +48,6 @@ export default {
    computed: {
    },
    methods: {
-      ...mapActions({
-         deleteConnection: 'connections/deleteConnection',
-         showEditModal: 'application/showEditConnModal'
-      }),
       showConfirmModal () {
          this.isConfirmModal = true;
       },
@@ -58,10 +55,10 @@ export default {
          this.isConfirmModal = false;
       },
       closeContext () {
-         this.$emit('closeContext');
+         this.$emit('close-context');
       },
       deleteRows () {
-         this.$emit('deleteSelected');
+         this.$emit('delete-selected');
          this.closeContext();
       }
    }

src/renderer/components/WorkspaceQueryTableRow.vue

@@ -1,38 +1,50 @@
 <template>
-   <div
-      v-if="field !== '_id'"
-      ref="cell"
-      class="td p-0"
-      tabindex="0"
-      @contextmenu.prevent="$emit('contextmenu', $event)"
-   >
-      <span
-         v-if="!isInlineEditor"
-         class="cell-content px-2"
-         :class="`${isNull(content)} type-${type}`"
-         @dblclick="editON"
-      >{{ content | typeFormat(type, precision) | cutText }}</span>
-      <template v-else>
-         <input
-            v-if="inputProps.mask"
-            ref="editField"
-            v-model="localContent"
-            v-mask="inputProps.mask"
-            :type="inputProps.type"
-            autofocus
-            class="editable-field px-2"
-            @blur="editOFF"
-         >
-         <input
-            v-else
-            ref="editField"
-            v-model="localContent"
-            :type="inputProps.type"
-            autofocus
-            class="editable-field px-2"
-            @blur="editOFF"
-         >
-      </template>
+   <div class="tr" @click="selectRow($event, row._id)">
+      <div
+         v-for="(col, cKey) in row"
+         v-show="cKey !== '_id'"
+         :key="cKey"
+         class="td p-0"
+         tabindex="0"
+         @contextmenu.prevent="$emit('contextmenu', $event, {id: row._id, field: cKey})"
+      >
+         <template v-if="cKey !== '_id'">
+            <span
+               v-if="!isInlineEditor[cKey]"
+               class="cell-content px-2"
+               :class="`${isNull(col)} type-${getFieldType(cKey)}`"
+               @dblclick="editON($event, col, cKey)"
+            >{{ col | typeFormat(getFieldType(cKey), getFieldPrecision(cKey)) | cutText }}</span>
+            <ForeignKeySelect
+               v-else-if="foreignKeys.includes(cKey)"
+               class="editable-field"
+               :value.sync="editingContent"
+               :key-usage="getKeyUsage(cKey)"
+               @blur="editOFF"
+            />
+            <template v-else>
+               <input
+                  v-if="inputProps.mask"
+                  ref="editField"
+                  v-model="editingContent"
+                  v-mask="inputProps.mask"
+                  :type="inputProps.type"
+                  autofocus
+                  class="editable-field px-2"
+                  @blur="editOFF"
+               >
+               <input
+                  v-else
+                  ref="editField"
+                  v-model="editingContent"
+                  :type="inputProps.type"
+                  autofocus
+                  class="editable-field px-2"
+                  @blur="editOFF"
+               >
+            </template>
+         </template>
+      </div>
       <ConfirmModal
          v-if="isTextareaEditor"
          :confirm-text="$t('word.update')"
@@ -41,19 +53,21 @@
          @hide="hideEditorModal"
       >
          <template :slot="'header'">
-            {{ $t('word.edit') }} "{{ field }}"
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
                <div>
                   <textarea
-                     v-model="localContent"
+                     v-model="editingContent"
                      class="form-input textarea-editor"
                   />
                </div>
                <div class="editor-field-info">
-                  <div><b>{{ $t('word.size') }}</b>: {{ localContent.length }}</div>
-                  <div><b>{{ $t('word.type') }}</b>: {{ type.toUpperCase() }}</div>
+                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
                </div>
             </div>
          </div>
@@ -65,7 +79,9 @@
          @hide="hideEditorModal"
       >
          <template :slot="'header'">
-            {{ $t('word.edit') }} "{{ field }}"
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.edit') }} "{{ editingField }}"
+            </div>
          </template>
          <div :slot="'body'">
             <div class="mb-2">
@@ -73,30 +89,30 @@
                   <div v-if="contentInfo.size">
                      <img
                         v-if="isImage"
-                        :src="`data:${contentInfo.mime};base64, ${bufferToBase64(localContent)}`"
+                        :src="`data:${contentInfo.mime};base64, ${bufferToBase64(editingContent)}`"
                         class="img-responsive p-centered bg-checkered"
                      >
                      <div v-else class="text-center">
-                        <i class="material-icons md-36">insert_drive_file</i>
+                        <i class="mdi mdi-36px mdi-file" />
                      </div>
                      <div class="editor-buttons mt-2">
                         <button class="btn btn-link btn-sm" @click="downloadFile">
                            <span>{{ $t('word.download') }}</span>
-                           <i class="material-icons ml-1">file_download</i>
+                           <i class="mdi mdi-24px mdi-download ml-1" />
                         </button>
                         <button class="btn btn-link btn-sm" @click="prepareToDelete">
                            <span>{{ $t('word.delete') }}</span>
-                           <i class="material-icons ml-1">delete_forever</i>
+                           <i class="mdi mdi-24px mdi-delete-forever ml-1" />
                         </button>
                      </div>
                   </div>
                </transition>
                <div class="editor-field-info">
                   <div>
-                     <b>{{ $t('word.size') }}</b>: {{ localContent.length | formatBytes }}<br>
+                     <b>{{ $t('word.size') }}</b>: {{ editingContent.length | formatBytes }}<br>
                      <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
                   </div>
-                  <div><b>{{ $t('word.type') }}</b>: {{ type.toUpperCase() }}</div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
                </div>
                <div class="mt-3">
                   <label>{{ $t('message.uploadFile') }}</label>
@@ -121,11 +137,16 @@ import hexToBinary from 'common/libs/hexToBinary';
 import { TEXT, LONG_TEXT, NUMBER, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
 import { mask } from 'vue-the-mask';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
 
 export default {
-   name: 'WorkspaceQueryTableCell',
+   name: 'WorkspaceQueryTableRow',
    components: {
-      ConfirmModal
+      ConfirmModal,
+      ForeignKeySelect
+   },
+   directives: {
+      mask
    },
    filters: {
       formatBytes,
@@ -156,6 +177,7 @@ export default {
          }
 
          if (BIT.includes(type)) {
+            if (typeof val === 'number') val = [val];
             const hex = Buffer.from(val).toString('hex');
             return hexToBinary(hex);
          }
@@ -163,22 +185,24 @@ export default {
          return val;
       }
    },
-   directives: {
-      mask
-   },
    props: {
-      type: String,
-      field: String,
-      precision: [Number, null],
-      content: [String, Number, Object, Date, Uint8Array]
+      row: Object,
+      fields: {
+         type: Array,
+         default: () => []
+      },
+      keyUsage: Array
    },
    data () {
       return {
-         isInlineEditor: false,
+         isInlineEditor: {},
          isTextareaEditor: false,
          isBlobEditor: false,
          willBeDeleted: false,
-         localContent: null,
+         originalContent: null,
+         editingContent: null,
+         editingType: null,
+         editingField: null,
          contentInfo: {
             ext: '',
             mime: '',
@@ -189,66 +213,132 @@ export default {
    },
    computed: {
       inputProps () {
-         if ([...TEXT, ...LONG_TEXT].includes(this.type))
+         if ([...TEXT, ...LONG_TEXT].includes(this.editingType))
             return { type: 'text', mask: false };
 
-         if (NUMBER.includes(this.type))
+         if (NUMBER.includes(this.editingType))
             return { type: 'number', mask: false };
 
-         if (TIME.includes(this.type))
-            return { type: 'number', mask: false };
+         if (TIME.includes(this.editingType)) {
+            let timeMask = '##:##:##';
+            const precision = this.getFieldPrecision(this.editingField);
 
-         if (DATE.includes(this.type))
+            for (let i = 0; i < precision; i++)
+               timeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: timeMask };
+         }
+
+         if (DATE.includes(this.editingType))
             return { type: 'text', mask: '####-##-##' };
 
-         if (DATETIME.includes(this.type)) {
+         if (DATETIME.includes(this.editingType)) {
             let datetimeMask = '####-##-## ##:##:##';
-            for (let i = 0; i < this.precision; i++)
+            const precision = this.getFieldPrecision(this.editingField);
+
+            for (let i = 0; i < precision; i++)
                datetimeMask += i === 0 ? '.#' : '#';
+
             return { type: 'text', mask: datetimeMask };
          }
 
-         if (BLOB.includes(this.type))
+         if (BLOB.includes(this.editingType))
             return { type: 'file', mask: false };
 
-         if (BIT.includes(this.type))
+         if (BIT.includes(this.editingType))
             return { type: 'text', mask: false };
 
          return { type: 'text', mask: false };
       },
       isImage () {
          return ['gif', 'jpg', 'png', 'bmp', 'ico', 'tif'].includes(this.contentInfo.ext);
+      },
+      foreignKeys () {
+         return this.keyUsage.map(key => key.column);
+      },
+      isEditable () {
+         return this.fields ? !!(this.fields[0].schema && this.fields[0].table) : false;
+      }
+   },
+   watch: {
+      fields () {
+         this.fields.forEach(field => {
+            this.isInlineEditor[field.name] = false;
+         });
       }
    },
    methods: {
+      getFieldType (cKey) {
+         let type = 'unknown';
+         const field = this.getFieldObj(cKey);
+         if (field)
+            type = field.type;
+
+         return type;
+      },
+      getFieldPrecision (cKey) {
+         let length = 0;
+         const field = this.getFieldObj(cKey);
+         if (field)
+            length = field.datePrecision;
+
+         return length;
+      },
+      getFieldObj (cKey) {
+         return this.fields.filter(field => {
+            let fieldNames = [
+               field.name,
+               field.alias,
+               `${field.table}.${field.name}`,
+               `${field.table}.${field.alias}`,
+               `${field.tableAlias}.${field.name}`,
+               `${field.tableAlias}.${field.alias}`
+            ];
+
+            if (field.table)
+               fieldNames = [...fieldNames, `${field.table.toLowerCase()}.${field.name}`, `${field.table.toLowerCase()}.${field.alias}`];
+
+            if (field.tableAlias)
+               fieldNames = [...fieldNames, `${field.tableAlias.toLowerCase()}.${field.name}`, `${field.tableAlias.toLowerCase()}.${field.alias}`];
+
+            return fieldNames.includes(cKey);
+         })[0];
+      },
       isNull (value) {
          return value === null ? ' is-null' : '';
       },
       bufferToBase64 (val) {
          return bufferToBase64(val);
       },
-      editON () {
-         if (LONG_TEXT.includes(this.type)) {
+      editON (event, content, field) {
+         if (!this.isEditable) return;
+
+         const type = this.getFieldType(field);
+         this.originalContent = content;
+         this.editingType = type;
+         this.editingField = field;
+
+         if (LONG_TEXT.includes(type)) {
             this.isTextareaEditor = true;
-            this.localContent = this.$options.filters.typeFormat(this.content, this.type);
+            this.editingContent = this.$options.filters.typeFormat(this.originalContent, type);
             return;
          }
 
-         if (BLOB.includes(this.type)) {
+         if (BLOB.includes(type)) {
             this.isBlobEditor = true;
-            this.localContent = this.content ? this.content : '';
+            this.editingContent = this.originalContent || '';
             this.fileToUpload = null;
             this.willBeDeleted = false;
 
-            if (this.content !== null) {
-               const buff = Buffer.from(this.localContent);
+            if (this.originalContent !== null) {
+               const buff = Buffer.from(this.editingContent);
                if (buff.length) {
                   const hex = buff.toString('hex').substring(0, 8).toUpperCase();
                   const { ext, mime } = mimeFromHex(hex);
                   this.contentInfo = {
                      ext,
                      mime,
-                     size: this.localContent.length
+                     size: this.editingContent.length
                   };
                }
             }
@@ -256,20 +346,22 @@ export default {
          }
 
          // Inline editable fields
-         this.localContent = this.$options.filters.typeFormat(this.content, this.type);
+         this.editingContent = this.$options.filters.typeFormat(this.originalContent, type, this.getFieldPrecision(field));
          this.$nextTick(() => { // Focus on input
-            this.$refs.cell.blur();
+            event.target.blur();
 
-            this.$nextTick(() => this.$refs.editField.focus());
+            this.$nextTick(() => document.querySelector('.editable-field').focus());
          });
-         this.isInlineEditor = true;
+
+         const obj = { [field]: true };
+         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
       },
       editOFF () {
-         this.isInlineEditor = false;
+         this.isInlineEditor[this.editingField] = false;
          let content;
-         if (!['blob', 'mediumblob', 'longblob'].includes(this.type)) {
-            if (this.localContent === this.$options.filters.typeFormat(this.content, this.type)) return;// If not changed
-            content = this.localContent;
+         if (!BLOB.includes(this.editingType)) {
+            if (this.editingContent === this.$options.filters.typeFormat(this.originalContent, this.editingType)) return;// If not changed
+            content = this.editingContent;
          }
          else { // Handle file upload
             if (this.willBeDeleted) {
@@ -282,11 +374,14 @@ export default {
             }
          }
 
-         this.$emit('updateField', {
-            field: this.field,
-            type: this.type,
+         this.$emit('update-field', {
+            field: this.getFieldObj(this.editingField).name,
+            type: this.editingType,
             content
          });
+
+         this.editingType = null;
+         this.editingField = null;
       },
       hideEditorModal () {
          this.isTextareaEditor = false;
@@ -295,8 +390,8 @@ export default {
       downloadFile () {
          const downloadLink = document.createElement('a');
 
-         downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.localContent)}`;
-         downloadLink.setAttribute('download', `${this.field}.${this.contentInfo.ext}`);
+         downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
+         downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
          document.body.appendChild(downloadLink);
 
          downloadLink.click();
@@ -310,13 +405,22 @@ export default {
          this.willBeDeleted = false;
       },
       prepareToDelete () {
-         this.localContent = '';
+         this.editingContent = '';
          this.contentInfo = {
             ext: '',
             mime: '',
             size: null
          };
          this.willBeDeleted = true;
+      },
+      contextMenu (event, cell) {
+         this.$emit('update-field', event, cell);
+      },
+      selectRow (event, row) {
+         this.$emit('select-row', event, row);
+      },
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.column === keyName);
       }
    }
 };
@@ -328,6 +432,9 @@ export default {
   border: none;
   line-height: 1;
   width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
 }
 
 .cell-content {

src/renderer/components/WorkspaceTableTab.vue

@@ -1,28 +1,51 @@
 <template>
-   <div class="workspace-query-tab column col-12 columns col-gapless">
+   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
+               <div class="dropdown">
+                  <div class="btn-group">
+                     <button
+                        class="btn btn-dark btn-sm mr-0 pr-1"
+                        :class="{'loading':isQuering}"
+                        title="F5"
+                        @click="reloadTable"
+                     >
+                        <span>{{ $t('word.refresh') }}</span>
+                        <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh ml-1" />
+                        <i v-else class="mdi mdi-24px mdi-history mdi-flip-h ml-1" />
+                     </button>
+                     <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                        <i class="mdi mdi-24px mdi-menu-down" />
+                     </div>
+                     <div class="menu px-3">
+                        <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
+                        <input
+                           v-model="autorefreshTimer"
+                           class="slider no-border"
+                           type="range"
+                           min="0"
+                           max="30"
+                           step="1"
+                           @change="setRefreshInterval"
+                        >
+                     </div>
+                  </div>
+               </div>
                <button
-                  class="btn btn-link btn-sm"
-                  :class="{'loading':isQuering}"
-                  @click="reloadTable"
-               >
-                  <span>{{ $t('word.refresh') }}</span>
-                  <i class="material-icons ml-1">refresh</i>
-               </button>
-               <button
-                  class="btn btn-link btn-sm"
-                  :class="{'disabled':isQuering}"
+                  class="btn btn-dark btn-sm"
                   @click="showAddModal"
                >
                   <span>{{ $t('word.add') }}</span>
-                  <i class="material-icons ml-1">playlist_add</i>
+                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
             </div>
             <div class="workspace-query-info">
-               <div v-if="results.rows">
-                  {{ $t('word.results') }}: <b>{{ results.rows.length }}</b>
+               <div v-if="results.length && results[0].rows">
+                  {{ $t('word.results') }}: <b>{{ results[0].rows.length.toLocaleString() }}</b>
+               </div>
+               <div v-if="results.length && results[0].rows && tableInfo && results[0].rows.length < tableInfo.rows">
+                  {{ $t('word.total') }}: <b>{{ tableInfo.rows.toLocaleString() }}</b> <small>({{ $t('word.approximately') }})</small>
                </div>
                <div v-if="workspace.breadcrumbs.database">
                   {{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.database }}</b>
@@ -35,24 +58,36 @@
             v-if="results"
             ref="queryTable"
             :results="results"
-            :fields="fields"
-            @updateField="updateField"
-            @deleteSelected="deleteSelected"
+            :tab-uid="tabUid"
+            :conn-uid="connection.uid"
+            mode="table"
+            @update-field="updateField"
+            @delete-selected="deleteSelected"
          />
       </div>
+      <ModalNewTableRow
+         v-if="isAddModal"
+         :fields="fields"
+         :key-usage="keyUsage"
+         :tab-uid="tabUid"
+         @hide="hideAddModal"
+         @reload="reloadTable"
+      />
    </div>
 </template>
 
 <script>
 import Tables from '@/ipc-api/Tables';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
+import ModalNewTableRow from '@/components/ModalNewTableRow';
 import { mapGetters, mapActions } from 'vuex';
 import tableTabs from '@/mixins/tableTabs';
 
 export default {
    name: 'WorkspaceTableTab',
    components: {
-      WorkspaceQueryTable
+      WorkspaceQueryTable,
+      ModalNewTableRow
    },
    mixins: [tableTabs],
    props: {
@@ -61,10 +96,13 @@ export default {
    },
    data () {
       return {
+         tabUid: 'data',
          isQuering: false,
-         results: {},
-         fields: [],
-         lastTable: null
+         results: [],
+         lastTable: null,
+         isAddModal: false,
+         autorefreshTimer: 0,
+         refreshInterval: null
       };
    },
    computed: {
@@ -75,7 +113,21 @@ export default {
          return this.getWorkspace(this.connection.uid);
       },
       isSelected () {
-         return this.workspace.selected_tab === 1;
+         return this.workspace.selected_tab === 'data';
+      },
+      fields () {
+         return this.results.length ? this.results[0].fields : [];
+      },
+      keyUsage () {
+         return this.results.length ? this.results[0].keys : [];
+      },
+      tableInfo () {
+         try {
+            return this.workspace.structure.find(db => db.name === this.schema).tables.find(table => table.name === this.table);
+         }
+         catch (err) {
+            return { rows: 0 };
+         }
       }
    },
    watch: {
@@ -94,6 +146,11 @@ export default {
    },
    created () {
       this.getTableData();
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+      clearInterval(this.refreshInterval);
    },
    methods: {
       ...mapActions({
@@ -102,30 +159,22 @@ export default {
       async getTableData () {
          if (!this.table) return;
          this.isQuering = true;
-         this.results = {};
+
+         // if table changes clear cached values
+         if (this.lastTable !== this.table)
+            this.results = [];
 
          const params = {
             uid: this.connection.uid,
-            schema: this.workspace.breadcrumbs.schema,
+            schema: this.schema,
             table: this.workspace.breadcrumbs.table
          };
 
-         try {
-            const { status, response } = await Tables.getTableColumns(params);
-            if (status === 'success')
-               this.fields = response;
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         try {
+         try { // Table data
             const { status, response } = await Tables.getTableData(params);
 
             if (status === 'success')
-               this.results = response;
+               this.results = [response];
             else
                this.addNotification({ status: 'error', message: response });
          }
@@ -135,45 +184,36 @@ export default {
 
          this.isQuering = false;
       },
+      getTable () {
+         return this.table;
+      },
       reloadTable () {
          this.getTableData();
       },
-      showAddModal () {}
+      showAddModal () {
+         this.isAddModal = true;
+      },
+      hideAddModal () {
+         this.isAddModal = false;
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.key === 'F5')
+               this.reloadTable();
+         }
+      },
+      setRefreshInterval () {
+         if (this.refreshInterval)
+            clearInterval(this.refreshInterval);
+
+         if (+this.autorefreshTimer) {
+            this.refreshInterval = setInterval(() => {
+               if (!this.isQuering)
+                  this.reloadTable();
+            }, this.autorefreshTimer * 1000);
+         }
+      }
    }
 };
 </script>
-
-<style lang="scss">
-.workspace-tabs {
-  align-content: baseline;
-
-  .workspace-query-runner {
-    .workspace-query-runner-footer {
-      display: flex;
-      justify-content: space-between;
-      padding: 0.3rem 0.6rem 0.4rem;
-      align-items: center;
-
-      .workspace-query-buttons {
-        display: flex;
-
-        .btn {
-          display: flex;
-          align-self: center;
-          color: $body-font-color;
-          margin-right: 0.4rem;
-        }
-      }
-
-      .workspace-query-info {
-        display: flex;
-
-        > div + div {
-          padding-left: 0.6rem;
-        }
-      }
-    }
-  }
-}
-
-</style>

src/renderer/i18n/ar-SA.js

@@ -0,0 +1,87 @@
+module.exports = {
+   word: {
+      edit: 'تعديل',
+      save: 'حفظ',
+      close: 'إغلاق',
+      delete: 'حفظ',
+      confirm: 'تأكيد',
+      cancel: 'إلغاء',
+      send: 'إرسال',
+      connectionName: 'إسم الإتصال',
+      client: 'العميل',
+      hostName: 'إسم المستضيف',
+      port: 'المنفذ',
+      user: 'المستخدم',
+      password: 'الرقم السري',
+      credentials: 'بيانات الدخول',
+      connect: 'إتصال',
+      connected: 'متصل',
+      disconnect: 'إلغاء الإتصال',
+      disconnected: 'غير متصل',
+      refresh: 'تحديث',
+      settings: 'الإعدادات',
+      general: 'عام',
+      themes: 'الأنماط',
+      update: 'تحديث',
+      about: 'حول',
+      language: 'اللغة',
+      version: 'النسخة',
+      donate: 'إدعم',
+      run: 'شغل',
+      schema: 'Schema',
+      results: 'النتائج',
+      size: 'الحجم',
+      seconds: 'ثواني',
+      type: 'نوع',
+      mimeType: 'نوع الميديا',
+      download: 'تحميل',
+      add: 'أضف',
+      data: 'بيانات',
+      properties: 'خصائص',
+      insert: 'أدرج'
+   },
+   message: {
+      appWelcome: 'مرحبا بك في عميل الSQL انتاريس!',
+      appFirstStep: 'خطوتك الأولى قم بإنشاء إتصال جديد بقاعدة بيانات.',
+      addConnection: 'إضافة إتصال',
+      createConnection: 'إنشاء إتصال',
+      createNewConnection: 'إنشاء إتصال جديد',
+      askCredentials: 'إطلب بيانات الدخول',
+      testConnection: 'إختبر الإتصال',
+      editConnection: 'عدل الإتصال',
+      deleteConnection: 'إحذف الإتصال',
+      deleteCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
+      connectionSuccessfullyMade: 'تم الإتصال بنجاح!',
+      madeWithJS: 'بني بـ  💛 و جافاسكربت!',
+      checkForUpdates: 'تأكد من التحديثات',
+      noUpdatesAvailable: 'لا توجد تحديثات',
+      checkingForUpdate: 'البحث عن تحديثات',
+      checkFailure: 'فشل البحث, نرجوا المحاولة في وقت لاحق',
+      updateAvailable: 'تحديث جديد متوفر',
+      downloadingUpdate: 'جاري تحميل التحديث',
+      updateDownloaded: 'تم تحميل التحديث',
+      restartToInstall: 'قم بإعادة تشغيل انتاريس للتحديث',
+      unableEditFieldWithoutPrimary: 'لا يمكن تعديل الخانة بدون وجود مفتاح رئيسي في النتائج',
+      editCell: 'تعديل الخلية',
+      deleteRows: 'حذف صف | حذف {count} صفوف',
+      confirmToDeleteRows: 'هل أنت متأكد من حذف صف واحد؟? | هل أنت متأكد من حذف {count} صف?',
+      notificationsTimeout: 'إنتهاء التنبيهات',
+      uploadFile: 'رفع ملف',
+      addNewRow: 'إضافة صف جديد',
+      numberOfInserts: 'عدد الإدراجات'
+   },
+   // Date and Time
+   short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+   },
+   long: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric'
+   }
+};

src/renderer/i18n/en-US.js

@@ -35,7 +35,33 @@ module.exports = {
       type: 'Type',
       mimeType: 'Mime-Type',
       download: 'Download',
-      add: 'Add'
+      add: 'Add',
+      data: 'Data',
+      properties: 'Properties',
+      insert: 'Insert',
+      connecting: 'Connecting',
+      name: 'Name',
+      collation: 'Collation',
+      clear: 'Clear',
+      options: 'Options',
+      autoRefresh: 'Auto-refresh',
+      indexes: 'Indexes',
+      foreignKeys: 'Foreign keys',
+      length: 'Length',
+      unsigned: 'Unsigned',
+      default: 'Default',
+      comment: 'Comment',
+      key: 'Key | Keys',
+      order: 'Order',
+      expression: 'Expression',
+      autoIncrement: 'Auto Increment',
+      engine: 'Engine',
+      field: 'Field | Fields',
+      approximately: 'Approximately',
+      total: 'Total',
+      table: 'Table',
+      discard: 'Discard',
+      stay: 'Stay'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -47,7 +73,7 @@ module.exports = {
       testConnection: 'Test connection',
       editConnection: 'Edit connection',
       deleteConnection: 'Delete connection',
-      deleteConnectionCorfirm: 'Do you confirm the cancellation of',
+      deleteCorfirm: 'Do you confirm the cancellation of',
       connectionSuccessfullyMade: 'Connection successfully made!',
       madeWithJS: 'Made with 💛 and JavaScript!',
       checkForUpdates: 'Check for updates',
@@ -63,7 +89,33 @@ module.exports = {
       deleteRows: 'Delete row | Delete {count} rows',
       confirmToDeleteRows: 'Do you confirm to delete one row? | Do you confirm to delete {count} rows?',
       notificationsTimeout: 'Notifications timeout',
-      uploadFile: 'Upload file'
+      uploadFile: 'Upload file',
+      addNewRow: 'Add new row',
+      numberOfInserts: 'Number of inserts',
+      openNewTab: 'Open a new tab',
+      affectedRows: 'Affected rows',
+      createNewDatabase: 'Create new Database',
+      databaseName: 'Database name',
+      serverDefault: 'Server default',
+      deleteDatabase: 'Delete database',
+      editDatabase: 'Edit database',
+      clearChanges: 'Clear changes',
+      addNewField: 'Add new field',
+      manageIndexes: 'Manage indexes',
+      manageForeignKeys: 'Manage foreign keys',
+      allowNull: 'Allow NULL',
+      zeroFill: 'Zero fill',
+      customValue: 'Custom value',
+      onUpdate: 'On update',
+      deleteField: 'Delete field',
+      createNewIndex: 'Create new index',
+      addToIndex: 'Add to index',
+      createNewTable: 'Create new table',
+      emptyTable: 'Empty table',
+      deleteTable: 'Delete table',
+      emptyCorfirm: 'Do you confirm to empty',
+      unsavedChanges: 'Unsaved changes',
+      discardUnsavedChanges: 'You have some unsaved changes. By leaving this tab these changes will be discarded.'
    },
    // Date and Time
    short: {

src/renderer/i18n/es-ES.js

@@ -0,0 +1,90 @@
+module.exports = {
+   word: {
+      edit: 'Editar',
+      save: 'Guardar',
+      close: 'Cerrar',
+      delete: 'Eliminar',
+      confirm: 'Confirmar',
+      cancel: 'Cancelar',
+      send: 'Enviar',
+      connectionName: 'Nombre de la conexión',
+      client: 'Cliente',
+      hostName: 'Servidor',
+      port: 'Puerto',
+      user: 'Usuario',
+      password: 'Contraseña',
+      credentials: 'Credenciales',
+      connect: 'Connectar',
+      connected: 'Conectado',
+      disconnect: 'Desconectar',
+      disconnected: 'Desconectado',
+      refresh: 'Refrescar',
+      settings: 'Configuración',
+      general: 'General',
+      themes: 'Temas',
+      update: 'Actualizar',
+      about: 'Sobre',
+      language: 'Idioma',
+      version: 'Versión',
+      donate: 'Donar',
+      run: 'Ejecutar',
+      schema: 'Esquema',
+      results: 'Resultados',
+      size: 'Tamaño',
+      seconds: 'Segundos',
+      type: 'Tipo',
+      mimeType: 'Mime-Type',
+      download: 'Descargar',
+      add: 'Añadir',
+      data: 'Datos',
+      properties: 'Propiedades',
+      insert: 'Insertar',
+      connecting: 'Conectando'
+   },
+   message: {
+      appWelcome: 'Bienvenido a Antares Cliente SQL!',
+      appFirstStep: 'Primer paso: Crear una conexión a una Base de Datos.',
+      addConnection: 'Añadir conexión',
+      createConnection: 'Crear conexión',
+      createNewConnection: 'Crear nueva conexión',
+      askCredentials: 'Preguntar credenciales',
+      testConnection: 'Comprobar conexión',
+      editConnection: 'Editar conexión',
+      deleteConnection: 'Eliminar conexión',
+      deleteCorfirm: 'Confirmas la cancelación de',
+      connectionSuccessfullyMade: 'Conexión realizada correctamente!',
+      madeWithJS: 'Hecho con 💛 y JavaScript!',
+      checkForUpdates: 'Comprobar actualizaciones',
+      noUpdatesAvailable: 'No hay actualizaciones',
+      checkingForUpdate: 'Comprobando actualizaciones',
+      checkFailure: 'Error en la comprobación, por favor pruebe más tarde',
+      updateAvailable: 'Actualización disponible',
+      downloadingUpdate: 'Descargando actualización',
+      updateDownloaded: 'Descargada actualización',
+      restartToInstall: 'Reiniciar Antares para instalar',
+      unableEditFieldWithoutPrimary: 'No se puede editar una campo sin Llave Primaria en el registro',
+      editCell: 'Editar celda',
+      deleteRows: 'Eliminar fila | Eliminar {count} filas',
+      confirmToDeleteRows: '¿Quiere realmente eliminar una fila? | ¿Quiere realmente eliminar {count} filas?',
+      notificationsTimeout: 'Tiempo de espera',
+      uploadFile: 'Cargar fichero',
+      addNewRow: 'Añadir nueva fila',
+      numberOfInserts: 'Numero de inserciones',
+      openNewTab: 'Abrir nueva pestaña',
+      affectedRows: 'Filas afectadas'
+   },
+   // Date and Time
+   short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+   },
+   long: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric'
+   }
+};

src/renderer/i18n/index.js

@@ -6,7 +6,9 @@ Vue.use(VueI18n);
 const i18n = new VueI18n({
    messages: {
       'en-US': require('./en-US'),
-      'it-IT': require('./it-IT')
+      'it-IT': require('./it-IT'),
+      'ar-SA': require('./ar-SA'),
+      'es-ES': require('./es-ES')
    }
 });
 export default i18n;

src/renderer/i18n/it-IT.js

@@ -29,7 +29,17 @@ module.exports = {
       donate: 'Dona',
       run: 'Esegui',
       schema: 'Schema',
-      results: 'Results'
+      results: 'Risultati',
+      size: 'Dimensioni',
+      seconds: 'Secondi',
+      type: 'Tipo',
+      mimeType: 'Mime-Type',
+      download: 'Scarica',
+      add: 'Aggiungi',
+      data: 'Dati',
+      properties: 'Proprietà',
+      insert: 'Inserisci',
+      connecting: 'Connessione in corso'
    },
    message: {
       appWelcome: 'Benvenuto in Antares SQL Client!',
@@ -41,7 +51,7 @@ module.exports = {
       testConnection: 'Testa connessione',
       editConnection: 'Modifica connessione',
       deleteConnection: 'Elimina connessione',
-      deleteConnectionCorfirm: 'Confermi l\'eliminazione di',
+      deleteCorfirm: 'Confermi l\'eliminazione di',
       connectionSuccessfullyMade: 'Connessione avvenuta con successo!',
       madeWithJS: 'Fatto con 💛 e JavaScript!',
       checkForUpdates: 'Cerca aggiornamenti',
@@ -55,7 +65,13 @@ module.exports = {
       unableEditFieldWithoutPrimary: 'Impossibile modificare il campo senza una primary key nel resultset',
       editCell: 'Modifica cella',
       deleteRows: 'Elimina riga | Elimina {count} righe',
-      confirmToDeleteRows: 'Confermi di voler cancellare una riga? | Confermi di voler cancellare {count} righe?'
+      confirmToDeleteRows: 'Confermi di voler cancellare una riga? | Confermi di voler cancellare {count} righe?',
+      notificationsTimeout: 'Timeout Notifiche',
+      uploadFile: 'Carica file',
+      addNewRow: 'Aggiungi nuova riga',
+      numberOfInserts: 'Numero di insert',
+      openNewTab: 'Apri nuova scheda',
+      affectedRows: 'Righe interessate'
    },
    // Date and Time
    short: {

src/renderer/i18n/supported-locales.js

@@ -1,4 +1,6 @@
 export default {
    'en-US': 'English',
-   'it-IT': 'Italiano'
+   'it-IT': 'Italiano',
+   'ar-SA': 'العربية',
+   'es-ES': 'Español'
 };

src/renderer/images/logo.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" height="210mm" width="210mm"><path d="M180.088 107.51a72.967 69.474 0 01-72.858 69.473 72.967 69.474 0 01-73.075-69.266 72.967 69.474 0 0172.639-69.68 72.967 69.474 0 0173.292 69.056" fill="#e36929"/><path d="M82.985 102.48a17.02 21.735 21.455 01-23.767 14.012 17.02 21.735 21.455 01-7.938-26.403 17.02 21.735 21.455 0123.744-14.091 17.02 21.735 21.455 018.009 26.36M157.83 118.562a17.472 11.51-52.488 01-1.695 20.917 17.472 11.51-52.488 01-19.742 6.678 17.472 11.51-52.488 011.635-20.897 17.472 11.51-52.488 0119.747-6.74" fill="#f8d163"/><path d="M72.979 98.717a9.143 10.562 0 01-9.13 10.562 9.143 10.562 0 01-9.156-10.53 9.143 10.562 0 019.102-10.594 9.143 10.562 0 019.184 10.499M155.659 130.732a6.21 6.986 0 01-6.2 6.987 6.21 6.986 0 01-6.22-6.966 6.21 6.986 0 016.182-7.007 6.21 6.986 0 016.238 6.945" fill="#fbfcf7"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210">
+  <defs/>
+  <path fill="#e36929" d="M180.088 107.51a72.967 69.474 0 01-72.858 69.473 72.967 69.474 0 01-73.075-69.266 72.967 69.474 0 0172.639-69.68 72.967 69.474 0 0173.292 69.056"/>
+  <path fill="#f8d163" d="M82.985 102.48a17.02 21.735 21.455 01-23.767 14.012 17.02 21.735 21.455 01-7.938-26.403 17.02 21.735 21.455 0123.744-14.091 17.02 21.735 21.455 018.009 26.36m74.797 16.204a17.472 11.51-52.488 01-1.695 20.917 17.472 11.51-52.488 01-19.742 6.678 17.472 11.51-52.488 011.635-20.897 17.472 11.51-52.488 0119.747-6.74"/>
+  <path fill="#fbfcf7" d="M72.979 98.717a9.143 10.562 0 01-9.13 10.562 9.143 10.562 0 01-9.156-10.53 9.143 10.562 0 019.102-10.594 9.143 10.562 0 019.184 10.499m82.68 32.078a6.21 6.986 0 01-6.2 6.987 6.21 6.986 0 01-6.22-6.966 6.21 6.986 0 016.182-7.007 6.21 6.986 0 016.238 6.945"/>
+</svg>

src/renderer/images/svg/sqllite.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34 32"><path fill="#444" d="M21.576 3.59c-1.115-.994-2.465-.595-3.798.588a9.407 9.407 0 00-.591.579c-2.279 2.418-4.395 6.897-5.053 10.318.256.519.456 1.182.588 1.688.034.13.064.252.089.355.058.245.089.405.089.405s-.02-.077-.104-.321l-.055-.158a1.44 1.44 0 00-.035-.087c-.149-.346-.56-1.075-.741-1.393-.155.457-.292.884-.406 1.271.523.956.841 2.595.841 2.595s-.028-.106-.159-.477c-.117-.328-.697-1.345-.835-1.583-.235.869-.329 1.455-.244 1.598.164.277.32.754.457 1.282.309 1.189.524 2.637.524 2.637l.019.244c-.043.999-.017 2.034.06 2.97.103 1.239.295 2.303.541 2.873l.167-.091c-.361-1.122-.508-2.593-.444-4.289.097-2.593.694-5.719 1.796-8.978 1.863-4.919 4.447-8.866 6.811-10.751-2.155 1.947-5.073 8.248-5.946 10.581-.978 2.613-1.671 5.065-2.088 7.414.721-2.202 3.05-3.149 3.05-3.149s1.143-1.409 2.478-3.422c-.8.182-2.113.495-2.553.68-.649.272-.824.365-.824.365s2.102-1.28 3.905-1.86c2.48-3.906 5.182-9.456 2.461-11.884z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34 32"><path fill="#fff" d="M21.576 3.59c-1.115-.994-2.465-.595-3.798.588a9.407 9.407 0 00-.591.579c-2.279 2.418-4.395 6.897-5.053 10.318.256.519.456 1.182.588 1.688.034.13.064.252.089.355.058.245.089.405.089.405s-.02-.077-.104-.321l-.055-.158a1.44 1.44 0 00-.035-.087c-.149-.346-.56-1.075-.741-1.393-.155.457-.292.884-.406 1.271.523.956.841 2.595.841 2.595s-.028-.106-.159-.477c-.117-.328-.697-1.345-.835-1.583-.235.869-.329 1.455-.244 1.598.164.277.32.754.457 1.282.309 1.189.524 2.637.524 2.637l.019.244c-.043.999-.017 2.034.06 2.97.103 1.239.295 2.303.541 2.873l.167-.091c-.361-1.122-.508-2.593-.444-4.289.097-2.593.694-5.719 1.796-8.978 1.863-4.919 4.447-8.866 6.811-10.751-2.155 1.947-5.073 8.248-5.946 10.581-.978 2.613-1.671 5.065-2.088 7.414.721-2.202 3.05-3.149 3.05-3.149s1.143-1.409 2.478-3.422c-.8.182-2.113.495-2.553.68-.649.272-.824.365-.824.365s2.102-1.28 3.905-1.86c2.48-3.906 5.182-9.456 2.461-11.884z"/></svg>

src/renderer/ipc-api/Connection.js

@@ -3,11 +3,11 @@ import { ipcRenderer } from 'electron';
 
 export default class {
    static makeTest (params) {
-      return ipcRenderer.invoke('testConnection', params);
+      return ipcRenderer.invoke('test-connection', params);
    }
 
    static checkConnection (params) {
-      return ipcRenderer.invoke('checkConnection', params);
+      return ipcRenderer.invoke('check-connection', params);
    }
 
    static connect (params) {
@@ -17,12 +17,4 @@ export default class {
    static disconnect (uid) {
       return ipcRenderer.invoke('disconnect', uid);
    }
-
-   static refresh (uid) {
-      return ipcRenderer.invoke('refresh', uid);
-   }
-
-   static rawQuery (params) {
-      return ipcRenderer.invoke('rawQuery', params);
-   }
 }

src/renderer/ipc-api/Database.js

@@ -0,0 +1,44 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static createDatabase (params) {
+      return ipcRenderer.invoke('create-database', params);
+   }
+
+   static updateDatabase (params) {
+      return ipcRenderer.invoke('update-database', params);
+   }
+
+   static getDatabaseCollation (params) {
+      return ipcRenderer.invoke('get-database-collation', params);
+   }
+
+   static deleteDatabase (params) {
+      return ipcRenderer.invoke('delete-database', params);
+   }
+
+   static getStructure (uid) {
+      return ipcRenderer.invoke('get-structure', uid);
+   }
+
+   static getCollations (uid) {
+      return ipcRenderer.invoke('get-collations', uid);
+   }
+
+   static getVariables (uid) {
+      return ipcRenderer.invoke('get-variables', uid);
+   }
+
+   static getEngines (uid) {
+      return ipcRenderer.invoke('get-engines', uid);
+   }
+
+   static useSchema (params) {
+      return ipcRenderer.invoke('use-schema', params);
+   }
+
+   static rawQuery (params) {
+      return ipcRenderer.invoke('raw-query', params);
+   }
+}

src/renderer/ipc-api/Tables.js

@@ -3,18 +3,50 @@ import { ipcRenderer } from 'electron';
 
 export default class {
    static getTableColumns (params) {
-      return ipcRenderer.invoke('getTableColumns', params);
+      return ipcRenderer.invoke('get-table-columns', params);
    }
 
    static getTableData (params) {
-      return ipcRenderer.invoke('getTableData', params);
+      return ipcRenderer.invoke('get-table-data', params);
+   }
+
+   static getTableIndexes (params) {
+      return ipcRenderer.invoke('get-table-indexes', params);
+   }
+
+   static getKeyUsage (params) {
+      return ipcRenderer.invoke('get-key-usage', params);
    }
 
    static updateTableCell (params) {
-      return ipcRenderer.invoke('updateTableCell', params);
+      return ipcRenderer.invoke('update-table-cell', params);
    }
 
    static deleteTableRows (params) {
-      return ipcRenderer.invoke('deleteTableRows', params);
+      return ipcRenderer.invoke('delete-table-rows', params);
+   }
+
+   static insertTableRows (params) {
+      return ipcRenderer.invoke('insert-table-rows', params);
+   }
+
+   static getForeignList (params) {
+      return ipcRenderer.invoke('get-foreign-list', params);
+   }
+
+   static createTable (params) {
+      return ipcRenderer.invoke('create-table', params);
+   }
+
+   static alterTable (params) {
+      return ipcRenderer.invoke('alter-table', params);
+   }
+
+   static truncateTable (params) {
+      return ipcRenderer.invoke('truncate-table', params);
+   }
+
+   static dropTable (params) {
+      return ipcRenderer.invoke('drop-table', params);
    }
 }

src/renderer/main.js

@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 
-import 'material-design-icons/iconfont/material-icons.css';
+import '@mdi/font/css/materialdesignicons.css';
 import '@/scss/main.scss';
 
 import App from '@/App.vue';

src/renderer/mixins/tableTabs.js

@@ -1,14 +1,17 @@
 import Tables from '@/ipc-api/Tables';
 
 export default {
+   computed: {
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      }
+   },
    methods: {
       async updateField (payload) {
          this.isQuering = true;
 
          const params = {
             uid: this.connection.uid,
-            schema: this.workspace.breadcrumbs.schema,
-            table: this.table,
             ...payload
          };
 
@@ -34,18 +37,14 @@ export default {
 
          const params = {
             uid: this.connection.uid,
-            schema: this.workspace.breadcrumbs.schema,
-            table: this.workspace.breadcrumbs.table,
             ...payload
          };
 
          try {
             const { status, response } = await Tables.deleteTableRows(params);
-            if (status === 'success') {
-               const { primary, rows } = params;
-               this.results = { ...this.results, rows: this.results.rows.filter(row => !rows.includes(row[primary])) };
-               this.$refs.queryTable.refreshScroller();// Necessary to re-render virtual scroller
-            }
+
+            if (status === 'success')
+               this.reloadTable();
             else
                this.addNotification({ status: 'error', message: response });
          }

src/renderer/scss/_data-types.scss

@@ -1,9 +1,12 @@
+
 @mixin type-colors($types) {
+  $numbers: ('int','tinyint','smallint','mediumint','float','double','decimal');
+
   @each $type, $color in $types {
     .type-#{$type} {
       color: $color;
 
-      @if $type == "number" {
+      @if index($numbers, $type) {
         text-align: right;
       }
     }
@@ -12,33 +15,41 @@
 
 @include type-colors(
   (
-    "char": seagreen,
-    "varchar": seagreen,
-    "text": seagreen,
-    "mediumtext": seagreen,
-    "longtext": seagreen,
-    "int": cornflowerblue,
-    "tinyint": cornflowerblue,
-    "smallint": cornflowerblue,
-    "mediumint": cornflowerblue,
-    "float": cornflowerblue,
-    "double": cornflowerblue,
-    "decimal": cornflowerblue,
-    "bigint": cornflowerblue,
-    "datetime": coral,
-    "date": coral,
-    "time": coral,
-    "timestamp": coral,
-    "bit": lightskyblue,
-    "blob": darkorchid,
-    "mediumblob": darkorchid,
-    "longblob": darkorchid,
-    "unknown": gray,
+    "char": $string-color,
+    "varchar": $string-color,
+    "text": $string-color,
+    "tinytext": $string-color,
+    "mediumtext": $string-color,
+    "longtext": $string-color,
+    "json": $string-color,
+    "int": $number-color,
+    "tinyint": $number-color,
+    "smallint": $number-color,
+    "mediumint": $number-color,
+    "float": $number-color,
+    "double": $number-color,
+    "decimal": $number-color,
+    "bigint": $number-color,
+    "datetime": $date-color,
+    "date": $date-color,
+    "time": $date-color,
+    "year": $date-color,
+    "timestamp": $date-color,
+    "bit": $bit-color,
+    "binary": $blob-color,
+    "varbinary": $blob-color,
+    "blob": $blob-color,
+    "tinyblob": $blob-color,
+    "mediumblob": $blob-color,
+    "longblob": $blob-color,
+    "enum": $enum-color,
+    "set": $enum-color,
+    "unknown": $unknown-color,
   )
 );
 
 .is-null {
-  color: gray;
+  color: $unknown-color;
 
   &::after {
     content: "NULL";

src/renderer/scss/_mdi-additions.scss

@@ -1,38 +1,9 @@
-.material-icons {
-  // TODO: rewrite with rem
+.mdi {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  /* Rules for sizing the icon. */
-  &.md-18 {
-    font-size: 18px;
-  }
-
-  &.md-24 {
-    font-size: 24px;
-  }
-
-  &.md-36 {
-    font-size: 36px;
-  }
-
-  &.md-48 {
-    font-size: 48px;
-  }
-
-  /* Rules for using icons as black on a light background. */
-  &.md-dark {
-    color: rgba(0, 0, 0, 0.54);
-  }
-
-  &.md-dark.md-inactive {
-    color: rgba(0, 0, 0, 0.26);
-  }
-
-  /* Rules for using icons as white on a dark background. */
-  &.md-light {
-    color: rgba(255, 255, 255, 1);
-  }
-
-  &.md-light.md-inactive {
-    color: rgba(255, 255, 255, 0.3);
+  &::before {
+    line-height: 1;
   }
 }

src/renderer/scss/_table-keys.scss

@@ -0,0 +1,25 @@
+.column-key {
+  transform: rotate(45deg);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  margin-right: 0.2rem;
+
+  &.key-pri,
+  &.key-PRIMARY {
+    color: goldenrod;
+  }
+
+  &.key-uni,
+  &.key-UNIQUE {
+    color: deepskyblue;
+  }
+
+  &.key-mul,
+  &.key-INDEX {
+    color: palegreen;
+  }
+
+  &.key-FULLTEXT {
+    color: mediumvioletred;
+  }
+}

src/renderer/scss/_variables.scss

@@ -9,6 +9,14 @@ $success-color: #32b643;
 $error-color: #de3b28;
 $warning-color: #e0a40c;
 
+$string-color: seagreen;
+$number-color: cornflowerblue;
+$date-color: coral;
+$bit-color: lightskyblue;
+$blob-color: darkorchid;
+$enum-color: gold;
+$unknown-color: gray;
+
 /* Sizes */
 $titlebar-height: 1.5rem;
 $settingbar-width: 3rem;

src/renderer/scss/main.scss

@@ -2,6 +2,7 @@
 @import "variables";
 @import "transitions";
 @import "data-types";
+@import "table-keys";
 @import "fake-tables";
 @import "mdi-additions";
 @import "db-icons";
@@ -18,12 +19,24 @@ body {
 @include padding-variant(3, $unit-3);
 @include padding-variant(4, $unit-4);
 
-.btn.btn-gray {
-  color: #fff;
-  background: $bg-color-gray;
+.btn {
+  &.btn-gray {
+    color: #fff;
+    background: $bg-color-gray;
 
-  &:hover {
-    background: $bg-color;
+    &:hover {
+      background: $bg-color;
+    }
+  }
+
+  &.btn-dark {
+    color: #fff;
+    background: $bg-color-light;
+    border-color: $bg-color-light;
+
+    &:hover {
+      background: $bg-color-gray;
+    }
   }
 }
 
@@ -36,6 +49,12 @@ body {
   cursor: help;
 }
 
+.no-border {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
 .bg-checkered {
   background-image:
     linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
@@ -45,6 +64,38 @@ body {
   background-size: 2em 2em;
 }
 
+.workspace-tabs {
+  align-content: baseline;
+
+  .workspace-query-runner {
+    .workspace-query-runner-footer {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.3rem 0.6rem 0.4rem;
+      align-items: center;
+
+      .workspace-query-buttons {
+        display: flex;
+
+        .btn {
+          display: flex;
+          align-self: center;
+          color: $body-font-color;
+          margin-right: 0.4rem;
+        }
+      }
+
+      .workspace-query-info {
+        display: flex;
+
+        > div + div {
+          padding-left: 0.6rem;
+        }
+      }
+    }
+  }
+}
+
 // Scrollbars
 ::-webkit-scrollbar {
   width: 10px;
@@ -105,6 +156,13 @@ body {
 
 .tab {
   border-color: #272727;
+
+  .tab-item {
+    .btn-clear {
+      margin-top: -0.1rem;
+      font-size: 0.6rem;
+    }
+  }
 }
 
 .panel {
@@ -125,11 +183,20 @@ body {
 }
 
 .form-select,
-.form-select:not([multiple]):not([size]),
 .form-input,
+.form-select:not([multiple]):not([size]),
 .form-checkbox .form-icon,
 .form-radio .form-icon {
   border-color: $bg-color-light;
+  background-color: $bg-color-gray;
+}
+
+.form-input.is-error,
+.form-select.is-error {
+  background-color: $bg-color-gray;
+}
+
+.form-input:not(:placeholder-shown):invalid:focus {
   background: $bg-color-gray;
 }
 
@@ -156,7 +223,7 @@ body {
 }
 
 .btn.loading {
-  > .material-icons,
+  > .mdi,
   > span {
     visibility: hidden;
   }

src/renderer/store/modules/application.store.js

@@ -3,11 +3,10 @@ export default {
    namespaced: true,
    strict: true,
    state: {
-      app_name: 'Antares - Database Client',
+      app_name: 'Antares - SQL Client',
       app_version: process.env.PACKAGE_VERSION || 0,
       is_loading: false,
       is_new_modal: false,
-      is_edit_modal: false,
       is_setting_modal: false,
       selected_setting_tab: 'general',
       selected_conection: {},
@@ -20,7 +19,6 @@ export default {
       appVersion: state => state.app_version,
       getSelectedConnection: state => state.selected_conection,
       isNewModal: state => state.is_new_modal,
-      isEditModal: state => state.is_edit_modal,
       isSettingModal: state => state.is_setting_modal,
       selectedSettingTab: state => state.selected_setting_tab,
       getUpdateStatus: state => state.update_status,
@@ -36,13 +34,6 @@ export default {
       HIDE_NEW_CONNECTION_MODAL (state) {
          state.is_new_modal = false;
       },
-      SHOW_EDIT_CONNECTION_MODAL (state, connection) {
-         state.is_edit_modal = true;
-         state.selected_conection = connection;
-      },
-      HIDE_EDIT_CONNECTION_MODAL (state) {
-         state.is_edit_modal = false;
-      },
       SHOW_SETTING_MODAL (state, tab) {
          state.selected_setting_tab = tab;
          state.is_setting_modal = true;
@@ -68,12 +59,6 @@ export default {
       hideNewConnModal ({ commit }) {
          commit('HIDE_NEW_CONNECTION_MODAL');
       },
-      showEditConnModal ({ commit }, connection) {
-         commit('SHOW_EDIT_CONNECTION_MODAL', connection);
-      },
-      hideEditConnModal ({ commit }) {
-         commit('HIDE_EDIT_CONNECTION_MODAL');
-      },
       showSettingModal ({ commit }, tab) {
          commit('SHOW_SETTING_MODAL', tab);
       },

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

@@ -13,7 +13,7 @@ export default {
          return connection.name
             ? connection.name
             : connection.ask
-               ? ''
+               ? `${connection.host}:${connection.port}`
                : `${connection.user + '@'}${connection.host}:${connection.port}`;
       }
    },

src/renderer/store/modules/notifications.store.js

@@ -20,7 +20,7 @@ export default {
    },
    actions: {
       addNotification ({ commit }, payload) {
-         payload.uid = uidGen();
+         payload.uid = uidGen('N');
          commit('ADD_NOTIFICATION', payload);
       },
       removeNotification ({ commit }, uid) {

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

@@ -7,7 +7,7 @@ export default {
    state: {
       locale: 'en-US',
       explorebar_size: null,
-      notifications_timeout: 10
+      notifications_timeout: 5
    },
    getters: {
       getLocale: state => state.locale,

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

@@ -1,25 +1,19 @@
 'use strict';
 import Connection from '@/ipc-api/Connection';
+import Database from '@/ipc-api/Database';
 import { uidGen } from 'common/libs/uidGen';
-
-function remapStructure (structure) {
-   const databases = structure.map(table => table.TABLE_SCHEMA)
-      .filter((value, index, self) => self.indexOf(value) === index);
-
-   return databases.map(db => {
-      return {
-         name: db,
-         tables: structure.filter(table => table.TABLE_SCHEMA === db)
-      };
-   });
-}
+const tabIndex = [];
+let lastBreadcrumbs = {};
 
 export default {
    namespaced: true,
    strict: true,
    state: {
       workspaces: [],
-      selected_workspace: null
+      selected_workspace: null,
+      has_unsaved_changes: false,
+      is_unsaved_discard_modal: false,
+      pending_breadcrumbs: {}
    },
    getters: {
       getSelected: state => {
@@ -28,39 +22,105 @@ export default {
          return null;
       },
       getWorkspace: state => uid => {
-         const workspace = state.workspaces.filter(workspace => workspace.uid === uid);
-         return workspace.length ? workspace[0] : {};
+         return state.workspaces.find(workspace => workspace.uid === uid);
+      },
+      getDatabaseVariable: state => (uid, name) => {
+         return state.workspaces.find(workspace => workspace.uid === uid).variables.find(variable => variable.name === name);
+      },
+      getWorkspaceTab: (state, getters) => tUid => {
+         if (!getters.getSelected) return;
+         const workspace = state.workspaces.find(workspace => workspace.uid === getters.getSelected);
+         if ('tabs' in workspace)
+            return workspace.tabs.find(tab => tab.uid === tUid);
+         return {};
       },
       getConnected: state => {
          return state.workspaces
             .filter(workspace => workspace.connected)
             .map(workspace => workspace.uid);
+      },
+      isUnsavedDiscardModal: state => {
+         return state.is_unsaved_discard_modal;
       }
    },
    mutations: {
       SELECT_WORKSPACE (state, uid) {
          state.selected_workspace = uid;
       },
-      ADD_CONNECTED (state, { uid, structure }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure, connected: true } : workspace);
+      ADD_CONNECTED (state, { uid, client, dataTypes, indexTypes, structure }) {
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               client,
+               dataTypes,
+               indexTypes,
+               structure,
+               connected: true
+            }
+            : workspace);
       },
       REMOVE_CONNECTED (state, uid) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure: {}, connected: false } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               structure: {},
+               connected: false
+            }
+            : workspace);
       },
       REFRESH_STRUCTURE (state, { uid, structure }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               structure
+            }
+            : workspace);
+      },
+      REFRESH_COLLATIONS (state, { uid, collations }) {
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               collations
+            }
+            : workspace);
+      },
+      REFRESH_VARIABLES (state, { uid, variables }) {
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               variables
+            }
+            : workspace);
+      },
+      REFRESH_ENGINES (state, { uid, engines }) {
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               engines
+            }
+            : workspace);
       },
       ADD_WORKSPACE (state, workspace) {
          state.workspaces.push(workspace);
       },
       CHANGE_BREADCRUMBS (state, { uid, breadcrumbs }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               breadcrumbs
+            }
+            : workspace);
       },
       NEW_TAB (state, uid) {
+         tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
+
          const newTab = {
-            uid: uidGen(),
+            uid: uidGen('T'),
+            index: tabIndex[uid],
             selected: false,
-            type: 'query'
+            type: 'query',
+            fields: [],
+            keyUsage: []
          };
          state.workspaces = state.workspaces.map(workspace => {
             if (workspace.uid === uid) {
@@ -73,8 +133,63 @@ export default {
                return workspace;
          });
       },
+      REMOVE_TAB (state, { uid, tab: tUid }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.filter(tab => tab.uid !== tUid)
+               };
+            }
+            else
+               return workspace;
+         });
+      },
       SELECT_TAB (state, { uid, tab }) {
          state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace);
+      },
+      SET_TAB_FIELDS (state, { cUid, tUid, fields }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, fields };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+      },
+      SET_TAB_KEY_USAGE (state, { cUid, tUid, keyUsage }) {
+         state.workspaces = state.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, keyUsage };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+      },
+      SET_UNSAVED_CHANGES (state, val) {
+         state.has_unsaved_changes = !!val;
+      },
+      SET_UNSAVED_DISCARD_MODAL (state, val) {
+         state.is_unsaved_discard_modal = !!val;
+      },
+      SET_PENDING_BREADCRUMBS (state, payload) {
+         state.pending_breadcrumbs = payload;
       }
    },
    actions: {
@@ -86,8 +201,28 @@ export default {
             const { status, response } = await Connection.connect(connection);
             if (status === 'error')
                dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('ADD_CONNECTED', { uid: connection.uid, structure: remapStructure(response) });
+            else {
+               let dataTypes = [];
+               let indexTypes = [];
+
+               switch (connection.client) {
+                  case 'mysql':
+                  case 'maria':
+                     dataTypes = require('common/data-types/mysql');
+                     indexTypes = require('common/index-types/mysql');
+                     break;
+               }
+               commit('ADD_CONNECTED', {
+                  uid: connection.uid,
+                  client: connection.client,
+                  dataTypes,
+                  indexTypes,
+                  structure: response
+               });
+               dispatch('refreshCollations', connection.uid);
+               dispatch('refreshVariables', connection.uid);
+               dispatch('refreshEngines', connection.uid);
+            }
          }
          catch (err) {
             dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
@@ -95,11 +230,47 @@ export default {
       },
       async refreshStructure ({ dispatch, commit }, uid) {
          try {
-            const { status, response } = await Connection.refresh(uid);
+            const { status, response } = await Database.getStructure(uid);
             if (status === 'error')
                dispatch('notifications/addNotification', { status, message: response }, { root: true });
             else
-               commit('REFRESH_STRUCTURE', { uid, structure: remapStructure(response) });
+               commit('REFRESH_STRUCTURE', { uid, structure: response });
+         }
+         catch (err) {
+            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
+         }
+      },
+      async refreshCollations ({ dispatch, commit }, uid) {
+         try {
+            const { status, response } = await Database.getCollations(uid);
+            if (status === 'error')
+               dispatch('notifications/addNotification', { status, message: response }, { root: true });
+            else
+               commit('REFRESH_COLLATIONS', { uid, collations: response });
+         }
+         catch (err) {
+            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
+         }
+      },
+      async refreshVariables ({ dispatch, commit }, uid) {
+         try {
+            const { status, response } = await Database.getVariables(uid);
+            if (status === 'error')
+               dispatch('notifications/addNotification', { status, message: response }, { root: true });
+            else
+               commit('REFRESH_VARIABLES', { uid, variables: response });
+         }
+         catch (err) {
+            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
+         }
+      },
+      async refreshEngines ({ dispatch, commit }, uid) {
+         try {
+            const { status, response } = await Database.getEngines(uid);
+            if (status === 'error')
+               dispatch('notifications/addNotification', { status, message: response }, { root: true });
+            else
+               commit('REFRESH_ENGINES', { uid, engines: response });
          }
          catch (err) {
             dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
@@ -115,24 +286,83 @@ export default {
             uid,
             connected: false,
             selected_tab: 0,
-            tabs: [{ uid: 1, type: 'table' }],
+            tabs: [{
+               uid: 'data',
+               type: 'table',
+               fields: [],
+               keyUsage: []
+            },
+            {
+               uid: 'prop',
+               type: 'table',
+               fields: [],
+               keyUsage: []
+            }],
             structure: {},
+            variables: [],
+            collations: [],
             breadcrumbs: {}
          };
 
          commit('ADD_WORKSPACE', workspace);
 
-         if (getters.getWorkspace(uid).tabs.length < 2)
+         if (getters.getWorkspace(uid).tabs.length < 3)
             dispatch('newTab', uid);
+
+         dispatch('setUnsavedChanges', false);
       },
-      changeBreadcrumbs ({ commit, getters }, payload) {
-         commit('CHANGE_BREADCRUMBS', { uid: getters.getSelected, breadcrumbs: payload });
+      changeBreadcrumbs ({ state, commit, getters }, payload) {
+         if (state.has_unsaved_changes) {
+            commit('SET_UNSAVED_DISCARD_MODAL', true);
+            commit('SET_PENDING_BREADCRUMBS', payload);
+            return;
+         }
+
+         const breadcrumbsObj = {
+            schema: null,
+            table: null,
+            trigger: null,
+            procedure: null,
+            scheduler: null
+         };
+
+         const hasLastChildren = Object.keys(lastBreadcrumbs).filter(b => b !== 'schema').some(b => lastBreadcrumbs[b]);
+         const hasChildren = Object.keys(payload).filter(b => b !== 'schema').some(b => payload[b]);
+
+         if (lastBreadcrumbs.schema === payload.schema && hasLastChildren && !hasChildren) return;
+
+         if (lastBreadcrumbs.schema !== payload.schema)
+            Database.useSchema({ uid: getters.getSelected, schema: payload.schema });
+
+         commit('CHANGE_BREADCRUMBS', { uid: getters.getSelected, breadcrumbs: { ...breadcrumbsObj, ...payload } });
+         lastBreadcrumbs = { ...breadcrumbsObj, ...payload };
       },
       newTab ({ commit }, uid) {
          commit('NEW_TAB', uid);
       },
+      removeTab ({ commit }, payload) {
+         commit('REMOVE_TAB', payload);
+      },
       selectTab ({ commit }, payload) {
          commit('SELECT_TAB', payload);
+      },
+      setTabFields ({ commit }, payload) {
+         commit('SET_TAB_FIELDS', payload);
+      },
+      setTabKeyUsage ({ commit }, payload) {
+         commit('SET_TAB_KEY_USAGE', payload);
+      },
+      setUnsavedChanges ({ commit }, val) {
+         commit('SET_UNSAVED_CHANGES', val);
+      },
+      discardUnsavedChanges ({ state, commit, dispatch }) {
+         dispatch('setUnsavedChanges', false);
+         dispatch('changeBreadcrumbs', state.pending_breadcrumbs);
+         commit('SET_UNSAVED_DISCARD_MODAL', false);
+         commit('SET_PENDING_BREADCRUMBS', {});
+      },
+      closeUnsavedChangesModal ({ commit }) {
+         commit('SET_UNSAVED_DISCARD_MODAL', false);
       }
    }
 };