chore(release): 0.0.11

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

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [fabio286]
+patreon: fabio286
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ['https://paypal.me/fabiodistasio']

.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

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      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

.gitignore

@@ -6,4 +6,4 @@ thumbs.db
 .vscode
 TODO.md
 *.txt
-dev-app-update.yml
+package-lock.json

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "fix": true,
+  "formatter": "verbose",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null
+  },
+  "syntax": "scss"
+}

.travis.yml

@@ -0,0 +1,47 @@
+language: node_js
+node_js: 12
+
+before_install:
+  - npm install
+
+cache:
+  directories:
+    - node_modules
+    - app/node_modules
+    - $HOME/.cache/electron
+    - $HOME/.cache/electron-builder
+    - $HOME/.npm/_prebuilds
+
+env:
+  global:
+    - ELECTRON_CACHE=$HOME/.cache/electron
+    - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
+
+jobs:
+  include:
+    - stage: Test
+      script:
+        - npm test
+
+    - stage: Deploy Linux & Windows
+      if: tag IS present
+      os: linux
+      services: docker
+      script:
+        - docker run --rm --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') -v ${PWD}:/project -v ~/.cache/electron:/root/.cache/electron -v ~/.cache/electron-builder:/root/.cache/electron-builder electronuserland/builder:wine /bin/bash -c "npm run build -- --linux --win -p always"
+      before_cache:
+        - 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
+    
+    # - stage: Deploy ARM Linux
+    #   if: tag IS present
+    #   os: linux
+    #   arch: arm64
+    #   script:
+    #     - npm run build -- --linux AppImage -p always

CHANGELOG.md

@@ -1,7 +1,161 @@
 # Changelog
 
-## [0.0.1-alpha]() - Coming Soon
+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.11](https://github.com/Fabio286/antares/compare/v0.0.10...v0.0.11) (2020-12-15)
+
 
 ### Features
 
-- **Initial release:**
+* auto focus on first input in modals ([1476e89](https://github.com/Fabio286/antares/commit/1476e899d164562f12342ced8c76903b9bdcfa55))
+* foreign keys management ([206597e](https://github.com/Fabio286/antares/commit/206597e5b891e13e6f7635075bd11599355ab778))
+* improved data table sorts ([5712b80](https://github.com/Fabio286/antares/commit/5712b8002203b32027f0e820f98a61e2ec965e79))
+* query tabs auto focus ([f81312a](https://github.com/Fabio286/antares/commit/f81312aeb02ef55affd2ae9e81a9b4cb4c2e6da2))
+
+
+### Bug Fixes
+
+* data tab sort not maintained at refresh ([15b08d7](https://github.com/Fabio286/antares/commit/15b08d7ea858cb28111c7b548af9a13b1bf0da91))
+* deletion of rows with non-numeric ID ([d385832](https://github.com/Fabio286/antares/commit/d38583262e672a2b47c5ad0aca0f13c129830a7b))
+* file field editor not show ([9291a7a](https://github.com/Fabio286/antares/commit/9291a7a7b41e7aeb9b65c7f32e496f523e482272))
+* improved changes dedection in props tab ([acebe43](https://github.com/Fabio286/antares/commit/acebe435ff6fa1581692fbf7ee1bc23b334e3947))
+* some properties do not reset after fields changes ([3ed5ea0](https://github.com/Fabio286/antares/commit/3ed5ea023e1852d724b2b59ab156f8722876f85b))
+* unable to switch tabs when no table selected ([c545815](https://github.com/Fabio286/antares/commit/c5458159d1e30cecf6615086c074d98b4b599637))
+* wrong field type detection ([5cfdc9b](https://github.com/Fabio286/antares/commit/5cfdc9b92d4b778a7863b02fd64e6445236c89bc))
+
+### [0.0.10](https://github.com/Fabio286/antares/compare/v0.0.9...v0.0.10) (2020-12-04)
+
+
+### Features
+
+* 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))

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015-2017 Jakub Szwacz
+Copyright (c) 2020 Fabio Di Stasio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,7 +1,91 @@
 <p align="center">
-    <img width="256" src="https://raw.githubusercontent.com/Fabio286/antares/master/docs/logo.png">
+    <img width="800" src="https://raw.githubusercontent.com/Fabio286/antares/master/docs/screen-alpha.png">
 </p>
 
-# Antares
+# Antares SQL Client
 
-🚧 Work in progress! 🚧
+![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](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 an alpha, it lacks many features** and supports only MySQL.  
+Most of its current features might be enough for basic MySQL use, so give it a chance and send me your feedback, I would really appreciate it.  
+I'm actively working on it (yes, i'm a lone dev), hoping to provide cool features and fixes 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/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).
+- Full tables management, including indexes and foreign keys.
+- 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.
+
+- Stored procedures, views, schedulers and triggers support.
+- Users management (add/edit/delete).
+- More secure password storage.
+- Database tools (variables, process list...).
+- SSL and SSH tunnel support.
+- Support for other databases.
+- UI/UX improvements.
+- Improvements of query editor area.
+- Improvements of query suggestions.
+- Query history.
+- More context menu shortcuts.
+- More keyboard shortcuts.
+- Query logs console.
+- Fake data filler.
+- Import/export and migration.
+- Themes.
+
+## Currently supported
+
+### Databases
+
+- [x] MySQL/MariaDB
+- [ ] PostgreSQL
+- [ ] MSSQL
+- [ ] SQLite
+- [ ] OracleDB
+- [ ] More...
+
+### 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/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)

jsconfig.json

@@ -0,0 +1,5 @@
+{
+   "include": [
+     "./src/renderer/**/*"
+   ]
+ }

package.json

@@ -1,69 +1,92 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.0.1-alpha",
+  "version": "0.0.11",
   "description": "A cross-platform easy to use SQL client.",
   "license": "MIT",
   "repository": "https://github.com/Fabio286/antares.git",
   "scripts": {
     "dev": "cross-env NODE_ENV=development electron-webpack dev",
     "compile": "electron-webpack",
-    "dist": "cross-env NODE_ENV=production npm run compile && electron-builder",
-    "dist:dir": "cross-env NODE_ENV=production npm run dist --dir -c.compression=store -c.mac.identity=null",
-    "publish": "build -p always"
+    "build": "cross-env NODE_ENV=production npm run compile && electron-builder",
+    "release": "standard-version",
+    "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": {
-    "appId": "com.estarium.antares",
+    "appId": "com.fabio286.antares",
     "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
-    "files": [
-      "static/*"
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
       ]
     },
-  "electronWebpack": {
-    "whiteListedModules": [
-      "codemirror"
+    "linux": {
+      "target": [
+        "deb",
+        "AppImage"
       ],
+      "category": "Development"
+    }
+  },
+  "electronWebpack": {
     "renderer": {
       "webpackConfig": "webpack.config.js"
     }
   },
   "dependencies": {
-    "codemirror": "^5.54.0",
-    "electron-log": "^4.2.1",
-    "electron-updater": "^4.3.1",
-    "lodash": "^4.17.15",
-    "material-design-icons": "^3.0.1",
-    "moment": "^2.26.0",
-    "mssql": "^6.2.0",
+    "@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.2.1",
+    "pg": "^8.5.1",
     "source-map-support": "^0.5.16",
-    "spectre.css": "^0.5.8",
-    "vue-click-outside": "^1.1.0",
-    "vue-i18n": "^8.18.2",
-    "vuedraggable": "^2.23.2",
-    "vuex": "^3.4.0",
-    "vuex-persist": "^2.2.0"
+    "spectre.css": "^0.5.9",
+    "vue-i18n": "^8.22.2",
+    "vue-the-mask": "^0.11.1",
+    "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": "^8.3.0",
-    "electron-builder": "^22.7.0",
-    "electron-devtools-installer": "^3.0.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.21.1",
+    "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": "^8.0.2",
-    "vue": "^2.6.11",
-    "webpack": "^4.43.0"
+    "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.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: false,
+            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

@@ -0,0 +1,12 @@
+export const TEXT = ['CHAR', 'VARCHAR'];
+export const LONG_TEXT = ['TEXT', 'MEDIUMTEXT', 'longtext'];
+
+export const NUMBER = ['INT', 'TINYINT', 'SMALLINT', 'MEDIUMINT', 'BIGINT', 'FLOAT', 'DOUBLE', 'DECIMAL', 'BOOL'];
+
+export const DATE = ['DATE'];
+export const TIME = ['TIME'];
+export const DATETIME = ['DATETIME', 'TIMESTAMP'];
+
+export const BLOB = ['BLOB', 'MEDIUMBLOB', 'LONGBLOB'];
+
+export const BIT = ['BIT'];

src/common/index-types/mysql.js

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

src/common/libs/bufferToBase64.js

@@ -0,0 +1,7 @@
+'use strict';
+export function bufferToBase64 (buf) {
+   const binstr = Array.prototype.map.call(buf, ch => {
+      return String.fromCharCode(ch);
+   }).join('');
+   return btoa(binstr);
+}

src/common/libs/formatBytes.js

@@ -0,0 +1,12 @@
+'use strict';
+export function formatBytes (bytes, decimals = 2) {
+   if (bytes === 0) return '0 Bytes';
+
+   const k = 1024;
+   const dm = decimals < 0 ? 0 : decimals;
+   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+   const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}

src/common/libs/mimeFromHex.js

@@ -1,13 +1,10 @@
-export function uidGen () {
-   return Math.random().toString(36).substr(2, 9).toUpperCase();
-};
-
+'use strict';
 export function mimeFromHex (hex) {
    switch (hex.substring(0, 4)) { // 2 bytes
       case '424D':
          return { ext: 'bmp', mime: 'image/bmp' };
       case '1F8B':
-         return { ext: 'gz', mime: 'application/gzip' };
+         return { ext: 'tar.gz', mime: 'application/gzip' };
       case '0B77':
          return { ext: 'ac3', mime: 'audio/vnd.dolby.dd-raw' };
       case '7801':
@@ -20,7 +17,7 @@ export function mimeFromHex (hex) {
       default:
          switch (hex.substring(0, 6)) { // 3 bytes
             case 'FFD8FF':
-               return { ext: 'jpj', mime: 'image/jpeg' };
+               return { ext: 'jpg', mime: 'image/jpeg' };
             case '4949BC':
                return { ext: 'jxr', mime: 'image/vnd.ms-photo' };
             case '425A68':
@@ -39,21 +36,11 @@ export function mimeFromHex (hex) {
                      return { ext: 'bpg', mime: 'image/bpg' };
                   case '4D4D002A':
                      return { ext: 'tif', mime: 'image/tiff' };
+                  case '00000100':
+                     return { ext: 'ico', mime: 'image/x-icon' };
                   default:
-                     return { ext: '???', mime: 'unknown ' + hex };
+                     return { ext: '', mime: 'unknown ' + hex };
                }
          }
    }
 };
-
-export function formatBytes (bytes, decimals = 2) {
-   if (bytes === 0) return '0 Bytes';
-
-   const k = 1024;
-   const dm = decimals < 0 ? 0 : decimals;
-   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-   const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}

src/common/libs/sqlEscaper.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-useless-escape */
+// eslint-disable-next-line no-control-regex
+const pattern = /[\0\x08\x09\x1a\n\r"'\\\%]/gm;
+const regex = new RegExp(pattern);
+
+/**
+ * Escapes a string
+ *
+ * @param {String} string
+ * @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)] || char;
+   });
+}
+
+export { sqlEscaper };

src/common/libs/uidGen.js

@@ -0,0 +1,8 @@
+/**
+ * @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,44 +3,39 @@
 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)
 let mainWindow;
 
-function createMainWindow () {
+async function createMainWindow () {
    const icon = require('../renderer/images/logo-32.png');
    const window = new BrowserWindow({
-      width: 1600,
-      height: 1000,
-      minHeight: 550,
+      width: 1024,
+      height: 800,
       minWidth: 900,
+      minHeight: 550,
       title: 'Antares',
       autoHideMenuBar: true,
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
-         'web-security': false
+         'web-security': false,
+         enableRemoteModule: true,
+         spellcheck: false
       },
       frame: false,
       backgroundColor: '#1d1d1d'
    });
 
-   if (isDevelopment)
-      window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
-   else {
-      window.loadURL(formatUrl({
-         pathname: path.join(__dirname, 'index.html'),
-         protocol: 'file',
-         slashes: true
-      }));
-   }
-
    if (isDevelopment) {
+      await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
+
       const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
       window.webContents.openDevTools();
 
@@ -52,6 +47,13 @@ function createMainWindow () {
             console.log(err);
          });
    }
+   else {
+      await window.loadURL(formatUrl({
+         pathname: path.join(__dirname, 'index.html'),
+         protocol: 'file',
+         slashes: true
+      }));
+   }
 
    window.on('closed', () => {
       mainWindow = null;
@@ -64,12 +66,15 @@ function createMainWindow () {
       });
    });
 
-   // Initialize ipcHandlers
-   ipcHandlers();
-
    return window;
 };
 
+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
@@ -87,3 +92,4 @@ app.on('activate', () => {
    app.on('ready', () => {
       mainWindow = createMainWindow();
    });
+}

src/main/ipc-handlers/application.js

@@ -0,0 +1,7 @@
+import { app, ipcMain } from 'electron';
+
+export default () => {
+   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

@@ -1,11 +1,15 @@
 import connection from './connection';
-import structure from './structure';
+import tables from './tables';
 import updates from './updates';
+import application from './application';
+import database from './database';
 
 const connections = {};
 
 export default () => {
    connection(connections);
-   structure(connections);
+   tables(connections);
+   database(connections);
    updates();
+   application();
 };

src/main/ipc-handlers/structure.js

@@ -1,27 +0,0 @@
-import { ipcMain } from 'electron';
-import InformationSchema from '../models/InformationSchema';
-import Generic from '../models/Generic';
-
-// TODO: remap objects based on client
-
-export default (connections) => {
-   ipcMain.handle('getTableColumns', async (event, { uid, schema, table }) => {
-      try {
-         const result = await InformationSchema.getTableColumns(connections[uid], schema, table);
-         return { status: 'success', response: result };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
-
-   ipcMain.handle('getTableData', async (event, { uid, schema, table }) => {
-      try {
-         const result = await Generic.getTableData(connections[uid], schema, table);
-         return { status: 'success', response: result };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
-};

src/main/ipc-handlers/tables.js

@@ -0,0 +1,218 @@
+import { ipcMain } from 'electron';
+import { sqlEscaper } from 'common/libs/sqlEscaper';
+import { TEXT, LONG_TEXT, NUMBER, BLOB } from 'common/fieldTypes';
+import fs from 'fs';
+
+export default (connections) => {
+   ipcMain.handle('get-table-columns', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getTableColumns(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-table-data', async (event, { uid, schema, table, sortParams }) => {
+      try {
+         const query = connections[uid]
+            .select('*')
+            .schema(schema)
+            .from(table)
+            .limit(1000);
+
+         if (sortParams && sortParams.field && sortParams.dir)
+            query.orderBy({ [sortParams.field]: sortParams.dir.toUpperCase() });
+
+         const result = await query.run({ details: true });
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-table-indexes', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getTableIndexes(params);
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-key-usage', async (event, params) => {
+      try {
+         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) => {
+      let idString;
+
+      if (typeof params.rows[0] === 'string')
+         idString = params.rows.map(row => `"${row}"`).join(',');
+      else
+         idString = params.rows.join(',');
+
+      try {
+         const result = await connections[params.uid]
+            .schema(params.schema)
+            .delete(params.table)
+            .where({ [params.primary]: `IN (${idString})` })
+            .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,268 +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._queryDefaults = {
-         schema: '',
-         select: [],
-         from: '',
-         where: [],
-         groupBy: [],
-         orderBy: [],
-         limit: [],
-         join: [],
-         update: [],
-         insert: [],
-         delete: []
-      };
-      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) {
-               const connection = mysql.createConnection(this._params);
-               this._connection = connection.promise();
-            }
-            else
-               this._connection = mysql.createPool({ ...this._params, connectionLimit: this._poolSize });
-               // this._connection = pool.promise();
-
-            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;
-   }
-
-   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);
-   }
-
-   /**
-    * @returns {string} SQL string
-    * @memberof AntaresConnector
-    */
-   getSQL () {
-      // SELECT
-      const selectArray = this._query.select.reduce(this._reducer, []);
-      let selectRaw;
-      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;
-      switch (this._client) {
-         case 'maria':
-         case 'mysql':
-            fromRaw = this._query.from ? `FROM ${this._query.schema ? `\`${this._query.schema}\`.` : ''}\`${this._query.from}\` ` : '';
-            break;
-         case 'mssql':
-            fromRaw = this._query.from ? `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 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}${fromRaw}${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') console.log(sql);
-
-      switch (this._client) {
-         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,690 @@
+'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.toUpperCase(),
+            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();
+
+      const { rows: extras } = await this
+         .select('*')
+         .schema('information_schema')
+         .from('REFERENTIAL_CONSTRAINTS')
+         .where({ CONSTRAINT_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'`, REFERENCED_TABLE_NAME: 'IS NOT NULL' })
+         .run();
+
+      return rows.map(field => {
+         const extra = extras.find(x => x.CONSTRAINT_NAME === field.CONSTRAINT_NAME);
+         return {
+            schema: field.TABLE_SCHEMA,
+            table: field.TABLE_NAME,
+            field: 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,
+            refField: field.REFERENCED_COLUMN_NAME,
+            onUpdate: extra.UPDATE_RULE,
+            onDelete: extra.DELETE_RULE
+         };
+      });
+   }
+
+   /**
+    * 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,
+         foreignChanges,
+         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})`);
+         }
+      });
+
+      // ADD FOREIGN KEYS
+      foreignChanges.additions.forEach(addition => {
+         alterColumns.push(`ADD CONSTRAINT \`${addition.constraintName}\` FOREIGN KEY (\`${addition.field}\`) REFERENCES \`${addition.refTable}\` (\`${addition.refField}\`) ON UPDATE ${addition.onUpdate} ON DELETE ${addition.onDelete}`);
+      });
+
+      // 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})`);
+         }
+      });
+
+      // CHANGE FOREIGN KEYS
+      foreignChanges.changes.forEach(change => {
+         alterColumns.push(`DROP FOREIGN KEY \`${change.oldName}\``);
+         alterColumns.push(`ADD CONSTRAINT \`${change.constraintName}\` FOREIGN KEY (\`${change.field}\`) REFERENCES \`${change.refTable}\` (\`${change.refField}\`) ON UPDATE ${change.onUpdate} ON DELETE ${change.onDelete}`);
+      });
+
+      // 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}\``);
+      });
+
+      // DROP FOREIGN KEYS
+      foreignChanges.deletions.forEach(deletion => {
+         alterColumns.push(`DROP FOREIGN KEY \`${deletion.constraintName}\``);
+      });
+
+      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,23 +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);
-   }
-
-   static async getTableData (connection, schema, table) {
-      return connection
-         .select('*')
-         .schema(schema)
-         .from(table)
-         .limit(1000)
-         .run();
-   }
-}

src/main/models/InformationSchema.js

@@ -1,25 +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 getTableColumns (connection, schema, table) {
-      return connection
-         .select('*')
-         .schema('information_schema')
-         .from('COLUMNS')
-         .where({ TABLE_SCHEMA: `= '${schema}'`, TABLE_NAME: `= '${table}'` })
-         .orderBy({ ORDINAL_POSITION: 'ASC' })
-         .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,12 +36,11 @@ 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 {
-      };
+      return {};
    },
    computed: {
       ...mapGetters({
@@ -49,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

@@ -1,8 +1,8 @@
 <template>
-   <div class="modal modal-sm active">
+   <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,15 +27,15 @@
          <div class="modal-footer">
             <button
                class="btn btn-primary mr-2"
-               @click="confirmModal"
+               @click.stop="confirmModal"
             >
-               {{ $t('word.confirm') }}
+               {{ confirmText || $t('word.confirm') }}
             </button>
             <button
                class="btn btn-link"
                @click="hideModal"
             >
-               {{ $t('word.cancel') }}
+               {{ cancelText || $t('word.cancel') }}
             </button>
          </div>
       </div>
@@ -45,6 +45,15 @@
 <script>
 export default {
    name: 'BaseConfirmModal',
+   props: {
+      size: {
+         type: String,
+         validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
+         default: 'small'
+      },
+      confirmText: String,
+      cancelText: String
+   },
    computed: {
       hasHeader () {
          return !!this.$slots.header;
@@ -54,6 +63,15 @@ export default {
       },
       hasDefault () {
          return !!this.$slots.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 '';
       }
    },
    methods: {
@@ -70,7 +88,12 @@ export default {
 </script>
 
 <style scoped>
+.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();
       }
    }
 };
@@ -40,24 +71,23 @@ export default {
 <style lang="scss">
   .context {
     display: flex;
-      position: absolute;
+    color: $body-font-color;
+    font-size: 16px;
     z-index: 400;
     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: 0px 0px 1px 0px #000;
+      z-index: 10;
+      box-shadow: 0 0 2px 0 #000;
       padding: 0;
       background: #1d1d1d;
       border-radius: 0.1rem;
@@ -69,11 +99,31 @@ export default {
       .context-element {
         display: flex;
         align-items: center;
-            padding: .1rem .3rem;
+        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;
          }
 
@@ -86,7 +87,10 @@ export default {
     text-overflow: ellipsis;
     display: inline-block;
     max-width: 30rem;
-      user-select: none;
+  }
+
+  .expand-btn {
+    align-items: initial;
   }
 
   .expanded .notification-message {

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;
-
-         // prevent parent scroll
-         if ((el.scrollTop === 0 && e.deltaY < 0) || (Math.abs(el.scrollTop - (el.scrollHeight - el.clientHeight)) <= 1 && e.deltaY > 0))
-            e.preventDefault();
+      checkScrollPosition (e) {
+         clearTimeout(this.renderTimeout);
 
+         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,100 @@
+<template>
+   <select
+      ref="editField"
+      class="form-select pl-1 pr-4"
+      :class="{'small-select': size === 'small'}"
+      @change="onChange"
+      @blur="$emit('blur')"
+   >
+      <option v-if="!isValidDefault" :value="value">
+         {{ value }} - {{ $t('message.invalidDefault') }}
+      </option>
+      <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,
+      size: {
+         type: String,
+         default: ''
+      }
+   },
+   data () {
+      return {
+         foreignList: []
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected'
+      }),
+      isValidDefault () {
+         return this.foreignList.some(foreign => foreign.foreignColumn.toString() === this.value.toString());
+      }
+   },
+   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.refField,
+            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">
@@ -17,6 +19,7 @@
                      </div>
                      <div class="col-9">
                         <input
+                           ref="firstInput"
                            v-model="credentials.user"
                            class="form-input"
                            type="text"
@@ -61,9 +64,14 @@ export default {
          }
       };
    },
+   created () {
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
    methods: {
       closeModal () {
-         this.$emit('closeAsking');
+         this.$emit('close-asking');
       },
       sendCredentials () {
          this.$emit('credentials', this.credentials);
@@ -71,7 +79,3 @@ export default {
    }
 };
 </script>
-
-<style>
-
-</style>

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">
@@ -18,6 +20,7 @@
                         </div>
                         <div class="col-8 col-sm-12">
                            <input
+                              ref="firstInput"
                               v-model="localConnection.name"
                               class="form-input"
                               type="text"
@@ -36,7 +39,7 @@
                               <option value="maria">
                                  MariaDB
                               </option>
-                              <option value="mssql">
+                              <!-- <option value="mssql">
                                  Microsoft SQL
                               </option>
                               <option value="pg">
@@ -44,7 +47,7 @@
                               </option>
                               <option value="oracledb">
                                  Oracle DB
-                              </option>
+                              </option> -->
                            </select>
                         </div>
                      </div>
@@ -111,13 +114,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 +138,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 +156,9 @@ export default {
       ModalAskCredentials,
       BaseToast
    },
+   props: {
+      connection: Object
+   },
    data () {
       return {
          toast: {
@@ -164,17 +170,19 @@ export default {
          localConnection: null
       };
    },
-   computed: {
-      ...mapGetters({
-         connection: 'application/getSelectedConnection'
-      })
-   },
    created () {
       this.localConnection = Object.assign({}, this.connection);
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
-         closeModal: 'application/hideEditConnModal',
          editConnection: 'connections/editConnection'
       }),
       async startTest () {
@@ -224,6 +232,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,169 @@
+<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
+                           ref="firstInput"
+                           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);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   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">
@@ -18,6 +20,7 @@
                         </div>
                         <div class="col-8 col-sm-12">
                            <input
+                              ref="firstInput"
                               v-model="connection.name"
                               class="form-input"
                               type="text"
@@ -40,7 +43,7 @@
                               <option value="maria">
                                  MariaDB
                               </option>
-                              <option value="mssql">
+                              <!-- <option value="mssql">
                                  Microsoft SQL
                               </option>
                               <option value="pg">
@@ -48,7 +51,7 @@
                               </option>
                               <option value="oracledb">
                                  Oracle DB
-                              </option>
+                              </option> -->
                            </select>
                         </div>
                      </div>
@@ -115,13 +118,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 +142,7 @@
       </div>
       <ModalAskCredentials
          v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
          @credentials="continueTest"
       />
    </div>
@@ -148,7 +151,7 @@
 <script>
 import { mapActions } from 'vuex';
 import Connection from '@/ipc-api/Connection';
-import { uidGen } from 'common/libs/utilities';
+import { uidGen } from 'common/libs/uidGen';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
 
@@ -168,7 +171,7 @@ export default {
             user: 'root',
             password: '',
             ask: false,
-            uid: uidGen()
+            uid: uidGen('C')
          },
          toast: {
             status: '',
@@ -178,6 +181,16 @@ export default {
          isAsking: false
       };
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          closeModal: 'application/hideNewConnModal',
@@ -247,6 +260,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,138 @@
+<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
+                           ref="firstInput"
+                           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);
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   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,127 @@
+<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
+                     ref="firstInput"
+                     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;
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmOptionsChange () {
+         this.$emit('open-create-table-editor', this.localOptions);
+      }
+   }
+};
+</script>

src/renderer/components/ModalNewTableRow.vue

@@ -0,0 +1,341 @@
+<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)"
+                              ref="formInput"
+                              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"
+                              ref="formInput"
+                              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'"
+                              ref="formInput"
+                              class="form-input"
+                              type="file"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                              @change="filesChange($event,field.name)"
+                           >
+                           <input
+                              v-else
+                              ref="formInput"
+                              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.toLowerCase()}`">
+                              {{ 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.field);
+      }
+   },
+   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 };
+
+      // Auto focus
+      setTimeout(() => {
+         const firstSelectableInput = this.$refs.formInput.find(input => !input.disabled);
+         firstSelectableInput.focus();
+      }, 20);
+   },
+   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.field === 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,10 +2,13 @@
    <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">
+         <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>
          <div class="modal-body p-0">
@@ -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"
@@ -45,11 +48,11 @@
 
                <div v-if="selectedTab === 'general'" class="panel-body py-4">
                   <form class="form-horizontal">
-                     <div class="col-6 col-sm-12">
-                        <div class="form-group">
+                     <div class="col-8 col-sm-12">
+                        <div class="form-group mb-4">
                            <div class="col-6 col-sm-12">
                               <label class="form-label">
-                                 <i class="material-icons md-18 mr-1">translate</i>
+                                 <i class="mdi mdi-18px mdi-translate mr-1" />
                                  {{ $t('word.language') }}:
                               </label>
                            </div>
@@ -69,12 +72,33 @@
                               </select>
                            </div>
                         </div>
+                        <div class="form-group">
+                           <div class="col-6 col-sm-12">
+                              <label class="form-label">
+                                 {{ $t('message.notificationsTimeout') }}:
+                              </label>
+                           </div>
+                           <div class="col-6 col-sm-12">
+                              <div class="input-group">
+                                 <input
+                                    v-model="localTimeout"
+                                    class="form-input"
+                                    type="number"
+                                    min="1"
+                                    @focusout="checkNotificationsTimeout"
+                                 >
+                                 <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                              </div>
+                           </div>
+                        </div>
                      </div>
                   </form>
                </div>
 
                <div v-if="selectedTab === 'themes'" class="panel-body py-4">
-                  <!--  -->
+                  <div class="text-center">
+                     <p>In future releases</p>
+                  </div>
                </div>
 
                <div v-if="selectedTab === 'update'" class="panel-body py-4">
@@ -88,6 +112,7 @@
                      <p>
                         {{ $t('word.version') }}: {{ appVersion }}<br>
                         <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a><br>
+                        <small>{{ $t('word.author') }}: <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">Fabio Di Stasio</a></small><br>
                         <small>{{ $t('message.madeWithJS') }}</small>
                      </p>
                   </div>
@@ -111,8 +136,8 @@ export default {
    },
    data () {
       return {
-         isUpdate: false,
          localLocale: null,
+         localTimeout: null,
          selectedTab: 'general'
       };
    },
@@ -121,7 +146,9 @@ export default {
          appName: 'application/appName',
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
-         selectedLocale: 'settings/getLocale'
+         selectedLocale: 'settings/getLocale',
+         notificationsTimeout: 'settings/getNotificationsTimeout',
+         updateStatus: 'application/getUpdateStatus'
       }),
       locales () {
          const locales = [];
@@ -129,22 +156,42 @@ 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({
          closeModal: 'application/hideSettingModal',
-         changeLocale: 'settings/changeLocale'
+         changeLocale: 'settings/changeLocale',
+         updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
       }),
       selectTab (tab) {
          this.selectedTab = tab;
       },
       openOutside (link) {
          shell.openExternal(link);
+      },
+      checkNotificationsTimeout () {
+         if (!this.localTimeout)
+            this.localTimeout = 10;
+
+         this.updateNotificationsTimeout(+this.localTimeout);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
 };
@@ -164,11 +211,15 @@ export default {
       background: #32b643;
     }
 
+    .badge-update::after {
+      bottom: initial;
+      background: $primary-color;
+    }
+
     .form-label {
       display: flex;
       align-items: center;
     }
   }
-
 }
 </style>

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,81 +1,70 @@
 <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',
    props: {
-      value: String
+      value: String,
+      autoFocus: { type: Boolean, default: false }
    },
    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();
+      this.editor = monaco.editor.create(this.$refs.editor, {
+         value: this.value,
+         language: 'sql',
+         theme: 'vs-dark',
+         autoIndent: true,
+         minimap: {
+            enabled: false
          },
-   methods: {
-      initialize () {
-         this.cminstance = CodeMirror.fromTextArea(this.$refs.codemirror, this.cmOptions);
-         this.cminstance.setValue(this.value || this.content);
-
-         this.cminstance.on('change', cm => {
-            this.content = cm.getValue();
-            this.$emit('input', this.content);
+         contextmenu: false,
+         wordBasedSuggestions: true,
+         acceptSuggestionOnEnter: 'smart',
+         quickSuggestions: true
       });
+
+      this.editor.onDidChangeModelContent(e => {
+         const content = this.editor.getValue();
+         this.$emit('update:value', content);
+      });
+
+      if (this.autoFocus) {
+         setTimeout(() => {
+            this.editor.focus();
+         }, 20);
       }
+   },
+   beforeDestroy () {
+      this.editor && this.editor.dispose();
    }
 };
 </script>
 
 <style lang="scss">
   .editor-wrapper {
-      border-bottom: 1px solid #444444;
+    border-bottom: 1px solid #444;
+
+    .editor {
+      height: 200px;
+      width: 100%;
+    }
   }
 
   .CodeMirror {
-      height: 200px;
-
     .CodeMirror-scroll {
       max-width: 100%;
     }
@@ -83,7 +72,6 @@ export default {
     .CodeMirror-line {
       word-break: break-word !important;
       white-space: pre-wrap !important;
-         word-break: normal;
     }
   }
 </style>

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,19 +67,29 @@ 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');
       }
    }
 };
 </script>
-
-<style>
-
-</style>

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">
-               <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">
-               <i class="material-icons md-18">bug_report</i>
+            <li class="footer-element footer-link" @click="openOutside('https://github.com/Fabio286/antares/issues')">
+               <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>
@@ -28,6 +28,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+const { shell } = require('electron');
 
 export default {
    name: 'TheFooter',
@@ -40,7 +41,10 @@ export default {
    methods: {
       ...mapActions({
          showSettingModal: 'application/showSettingModal'
-      })
+      }),
+      openOutside (link) {
+         shell.openExternal(link);
+      }
    }
 };
 </script>
@@ -52,12 +56,12 @@ export default {
     justify-content: space-between;
     align-items: center;
     background: $primary-color;
-      padding: 0 .2rem;
+    padding: 0 0.2rem;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
 
     .footer-elements {
       list-style: none;
@@ -69,15 +73,15 @@ export default {
         height: $footer-height;
         display: flex;
         align-items: center;
-            padding: 0 .4rem;
+        padding: 0 0.4rem;
         margin: 0;
 
         &.footer-link {
           cursor: pointer;
-               transition: background .2s;
+          transition: background 0.2s;
 
           &:hover {
-                  background: rgba($color: #fff, $alpha: .1);
+            background: rgba($color: #fff, $alpha: 0.1);
           }
         }
       }

src/renderer/components/TheNotificationsBoard.vue

@@ -1,5 +1,9 @@
 <template>
-   <div id="notifications-board">
+   <div
+      id="notifications-board"
+      @mouseenter="clearTimeouts"
+      @mouseleave="rearmTimeouts"
+   >
       <transition-group name="slide-fade">
          <BaseNotification
             v-for="notification in latestNotifications"
@@ -21,18 +25,51 @@ export default {
    components: {
       BaseNotification
    },
+   data () {
+      return {
+         timeouts: {}
+      };
+   },
    computed: {
       ...mapGetters({
-         notifications: 'notifications/getNotifications'
+         notifications: 'notifications/getNotifications',
+         notificationsTimeout: 'settings/getNotificationsTimeout'
       }),
       latestNotifications () {
          return this.notifications.slice(0, 10);
       }
    },
+   watch: {
+      notifications: {
+         deep: true,
+         handler: function (notification) {
+            if (notification.length) {
+               this.timeouts[notification[0].uid] = setTimeout(() => {
+                  this.removeNotification(notification[0].uid);
+                  delete this.timeouts[notification.uid];
+               }, this.notificationsTimeout * 1000);
+            }
+         }
+      }
+   },
    methods: {
       ...mapActions({
          removeNotification: 'notifications/removeNotification'
-      })
+      }),
+      clearTimeouts () {
+         for (const uid in this.timeouts) {
+            clearTimeout(this.timeouts[uid]);
+            delete this.timeouts[uid];
+         }
+      },
+      rearmTimeouts () {
+         for (const notification of this.notifications) {
+            this.timeouts[notification.uid] = setTimeout(() => {
+               this.removeNotification(notification.uid);
+               delete this.timeouts[notification.uid];
+            }, this.notificationsTimeout * 1000);
+         }
+      }
    }
 };
 </script>
@@ -40,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: {
@@ -115,7 +119,7 @@ export default {
     align-items: center;
     background: $bg-color-light;
     padding: 0;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 9;
 
     .settingbar-top-elements {
@@ -129,7 +133,7 @@ export default {
     }
 
     .settingbar-bottom-elements {
-         padding-top: .5rem;
+      padding-top: 0.5rem;
       background: $bg-color-light;
       z-index: 1;
     }
@@ -146,8 +150,8 @@ export default {
         width: 100%;
         margin: 0;
         border-left: 3px solid transparent;
-            opacity: .5;
-            transition: opacity .2s;
+        opacity: 0.5;
+        transition: opacity 0.2s;
         display: flex;
         align-content: center;
         justify-content: center;
@@ -163,16 +167,19 @@ export default {
         }
 
         .settingbar-element-icon {
-
           &.badge::after {
             bottom: -10px;
             right: 0;
             position: absolute;
             background: $success-color;
           }
-            }
-         }
 
+          &.badge-update::after {
+            bottom: initial;
+            background: $primary-color;
+          }
+        }
+      }
     }
   }
 
@@ -183,19 +190,19 @@ export default {
       opacity: 0;
       display: block;
       position: absolute;
-         background-color:#feffe1;
       text-align: center;
-         margin:.0 0 0 calc(#{$settingbar-width} - 5px);
+      margin: 0 0 0 calc(#{$settingbar-width} - 5px);
       left: 0;
-         padding: .2rem .4rem;
-         font-size: .7rem;
-         background: rgba(48,55,66,.95);
-         border-radius: .1rem;
+      padding: 0.2rem 0.4rem;
+      font-size: 0.7rem;
+      background: rgba(48, 55, 66, 0.95);
+      border-radius: 0.1rem;
       color: #fff;
       max-width: 320px;
       pointer-events: none;
       text-overflow: ellipsis;
-         transition: opacity .2s;
+      overflow: hidden;
+      transition: opacity 0.2s;
     }
 
     &:hover .ex-tooltip-content {

src/renderer/components/TheTitleBar.vue

@@ -4,8 +4,8 @@
       <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">
          <div
@@ -13,31 +13,32 @@
             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>
 </template>
 
 <script>
-import { remote } from 'electron';
+import { remote, ipcRenderer } from 'electron';
+import { mapGetters } from 'vuex';
 
 export default {
    name: 'TheTitleBar',
@@ -48,6 +49,22 @@ export default {
          isDevelopment: process.env.NODE_ENV === 'development'
       };
    },
+   computed: {
+      ...mapGetters({
+         getConnectionName: 'connections/getConnectionName',
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      windowTitle () {
+         if (!this.selectedWorkspace) return '';
+
+         const connectionName = this.getConnectionName(this.selectedWorkspace);
+         const workspace = this.getWorkspace(this.selectedWorkspace);
+         const breadcrumbs = Object.values(workspace.breadcrumbs).filter(breadcrumb => breadcrumb);
+
+         return [connectionName, ...breadcrumbs].join(' • ');
+      }
+   },
    created () {
       window.addEventListener('resize', this.onResize);
    },
@@ -56,7 +73,7 @@ export default {
    },
    methods: {
       closeApp () {
-         this.w.close();
+         ipcRenderer.send('close-app');
       },
       minimizeApp () {
          this.w.minimize();
@@ -90,7 +107,7 @@ export default {
     height: $titlebar-height;
     -webkit-app-region: drag;
     user-select: none;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 9999;
 
     .titlebar-resizer {
@@ -106,9 +123,18 @@ 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 .4rem;
+        padding: 0 0.4rem;
       }
 
       .titlebar-element {
@@ -116,14 +142,14 @@ export default {
         align-items: center;
         height: $titlebar-height;
         line-height: 0;
-            padding: 0 .7rem;
-            opacity: .7;
-            transition: opacity .2s;
+        padding: 0 0.7rem;
+        opacity: 0.7;
+        transition: opacity 0.2s;
         -webkit-app-region: no-drag;
 
         &:hover {
           opacity: 1;
-               background: rgba($color: #fff, $alpha: .2);
+          background: rgba($color: #fff, $alpha: 0.2);
         }
 
         &.close-button:hover {

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})"
+         <ul
+            id="tabWrap"
+            ref="tabWrap"
+            class="tab tab-block column col-12"
          >
-               <a class="tab-link">
-                  <i class="material-icons md-18 mr-1">grid_on</i>
-                  <span :title="workspace.breadcrumbs.table">{{ workspace.breadcrumbs.table }}</span>
+            <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 && ['data', 'prop'].includes(this.workspace.selected_tab))
+            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,14 +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({
-         addNotification: 'notifications/addNotification',
          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>
@@ -98,41 +183,62 @@ 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: .2rem .8rem;
+          padding: 0.2rem 0.8rem;
           color: $body-font-color;
           cursor: pointer;
           display: flex;
           align-items: center;
-               opacity: .7;
-               transition: opacity .2s;
+          opacity: 0.7;
+          transition: opacity 0.2s;
 
           &:hover {
             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;
+        }
       }
     }
   }
@@ -153,25 +259,32 @@ export default {
         border-left: none;
         border-bottom-width: 2px;
         border-color: $bg-color-light;
-            padding: .1rem .4rem;
+        padding: 0;
         font-weight: 700;
-            font-size: .7rem;
+        font-size: 0.7rem;
+        z-index: 1;
+
+        > div {
+          padding: 0.1rem 0.4rem;
+          min-width: -webkit-fill-available;
+        }
       }
 
       .td {
         border-right: 1px solid;
         border-bottom: 1px solid;
         border-color: $bg-color-light;
-            padding: 0 .4rem;
+        padding: 0 0.4rem;
         text-overflow: ellipsis;
         max-width: 200px;
         white-space: nowrap;
         overflow: hidden;
-            font-size: .7rem;
+        font-size: 0.7rem;
+        position: relative;
 
         &:focus {
-               box-shadow:inset 0px 0px 0px 1px $body-font-color;
-               background: rgba($color: #000000, $alpha: .3);
+          box-shadow: inset 0 0 0 1px $body-font-color;
+          background: rgba($color: #000, $alpha: 0.3);
           outline: none;
         }
       }

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>
@@ -45,7 +45,6 @@ export default {
    },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification',
          connectWorkspace: 'workspaces/connectWorkspace'
       }),
       async startConnection () {

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;
       }
    }
 };
@@ -141,7 +239,7 @@ export default {
     align-items: center;
     text-align: left;
     background: $bg-color-gray;
-      box-shadow: 0 0 1px 0px #000;
+    box-shadow: 0 0 1px 0 #000;
     z-index: 8;
     flex: initial;
     position: relative;
@@ -149,10 +247,10 @@ export default {
 
     .workspace-explorebar-header {
       width: 100%;
-         padding: .3rem;
+      padding: 0.3rem;
       display: flex;
       justify-content: space-between;
-         font-size: .6rem;
+      font-size: 0.6rem;
       font-weight: 700;
       text-transform: uppercase;
 
@@ -170,8 +268,8 @@ export default {
         align-items: center;
 
         > i {
-                  opacity: .6;
-                  transition: opacity .2s;
+          opacity: 0.6;
+          transition: opacity 0.2s;
           display: flex;
           align-items: center;
 
@@ -186,7 +284,7 @@ export default {
       width: 100%;
       height: calc((100vh - 30px) - #{$excluding-size});
       overflow: overlay;
-         padding: 0 .1rem;
+      padding: 0 0.1rem;
     }
   }
 </style>

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})"
+         @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,12 +51,36 @@ 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>
@@ -61,9 +91,9 @@ export default {
   a.table-name {
     display: flex;
     align-items: center;
-         padding: .1rem;
+    padding: 0.1rem 1rem 0.1rem 0.1rem;
     cursor: pointer;
-         font-size: .7rem;
+    font-size: 0.7rem;
 
     > span {
       overflow: hidden;
@@ -72,19 +102,70 @@ export default {
       text-overflow: ellipsis;
     }
 
+    .database-icon,
+    .table-icon {
+      opacity: 0.7;
+    }
+  }
+
+  .database-name {
     &:hover {
       color: $body-font-color;
-            background: rgba($color: #FFF, $alpha: .05);
+      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/WorkspacePropsForeignModal.vue

@@ -0,0 +1,416 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="medium"
+      @confirm="confirmForeignsChange"
+      @hide="$emit('hide')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-key-link mr-1" /> {{ $t('word.foreignKeys') }} "{{ 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="addForeign">
+                           <span>{{ $t('word.add') }}</span>
+                           <i class="mdi mdi-24px mdi-link-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="foreign in foreignProxy"
+                        :key="foreign._id"
+                        class="tile tile-centered c-hand mb-1 p-1"
+                        :class="{'selected-foreign': selectedForeignID === foreign._id}"
+                        @click="selectForeign($event, foreign._id)"
+                     >
+                        <div class="tile-icon">
+                           <div>
+                              <i class="mdi mdi-key-link mdi-24px" />
+                           </div>
+                        </div>
+                        <div class="tile-content">
+                           <div class="tile-title">
+                              {{ foreign.constraintName }}
+                           </div>
+                           <small class="tile-subtitle text-gray d-flex">
+                              <i class="mdi mdi-link-variant mr-1" />
+                              <div class="fk-details-wrapper">
+                                 <span v-if="foreign.table !== ''" class="fk-details">
+                                    <i class="mdi mdi-table mr-1" />
+                                    <span>{{ foreign.table }}.{{ foreign.field }}</span>
+                                 </span>
+                                 <span v-if="foreign.refTable !== ''" class="fk-details">
+                                    <i class="mdi mdi-table mr-1" />
+                                    <span>{{ foreign.refTable }}.{{ foreign.refField }}</span>
+                                 </span>
+                              </div>
+                           </small>
+                        </div>
+                        <div class="tile-action">
+                           <button
+                              class="btn btn-link remove-field p-0 mr-2"
+                              :title="$t('word.delete')"
+                              @click.prevent="removeIndex(foreign._id)"
+                           >
+                              <i class="mdi mdi-close" />
+                           </button>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+
+            <div class="column col-7 pl-2 editor-col">
+               <form
+                  v-if="selectedForeignObj"
+                  :style="{ height: modalInnerHeight + 'px'}"
+                  class="form-horizontal"
+               >
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.name') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="selectedForeignObj.constraintName"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group mb-4">
+                     <label class="form-label col-3">
+                        {{ $tc('word.field', 1) }}
+                     </label>
+                     <div class="fields-list column pt-1">
+                        <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="selectedForeignObj.field === field.name">
+                           <i class="form-icon" /> {{ field.name }}
+                        </label>
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3 pt-0">
+                        {{ $t('message.referenceTable') }}
+                     </label>
+                     <div class="column">
+                        <select
+                           v-model="selectedForeignObj.refTable"
+                           class="form-select"
+                           @change="reloadRefFields"
+                        >
+                           <option
+                              v-for="schemaTable in schemaTables"
+                              :key="schemaTable.name"
+                              :value="schemaTable.name"
+                           >
+                              {{ schemaTable.name }}
+                           </option>
+                        </select>
+                     </div>
+                  </div>
+                  <div class="form-group mb-4">
+                     <label class="form-label col-3">
+                        {{ $t('message.referenceField') }}
+                     </label>
+                     <div class="fields-list column pt-1">
+                        <label
+                           v-for="(field, i) in refFields[selectedForeignID]"
+                           :key="`${field.name}-${i}`"
+                           class="form-checkbox m-0"
+                           @click.prevent="toggleRefField(field.name)"
+                        >
+                           <input type="checkbox" :checked="selectedForeignObj.refField === field.name && selectedForeignObj.refTable === field.table">
+                           <i class="form-icon" /> {{ field.name }}
+                        </label>
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('message.onUpdate') }}
+                     </label>
+                     <div class="column">
+                        <select v-model="selectedForeignObj.onUpdate" class="form-select">
+                           <option
+                              v-for="action in foreignActions"
+                              :key="action"
+                              :value="action"
+                           >
+                              {{ action }}
+                           </option>
+                        </select>
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('message.onDelete') }}
+                     </label>
+                     <div class="column">
+                        <select v-model="selectedForeignObj.onDelete" class="form-select">
+                           <option
+                              v-for="action in foreignActions"
+                              :key="action"
+                              :value="action"
+                           >
+                              {{ action }}
+                           </option>
+                        </select>
+                     </div>
+                  </div>
+               </form>
+
+               <div v-if="!foreignProxy.length" class="empty">
+                  <div class="empty-icon">
+                     <i class="mdi mdi-key-link mdi-48px" />
+                  </div>
+                  <p class="empty-title h5">
+                     {{ $t('message.thereAreNoForeign') }}
+                  </p>
+                  <div class="empty-action">
+                     <button class="btn btn-primary" @click="addForeign">
+                        {{ $t('message.createNewForeign') }}
+                     </button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
+import Tables from '@/ipc-api/Tables';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsForeignModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localKeyUsage: Array,
+      connection: Object,
+      table: String,
+      schema: String,
+      schemaTables: Array,
+      fields: Array,
+      workspace: Object
+   },
+   data () {
+      return {
+         foreignProxy: [],
+         isOptionsChanging: false,
+         selectedForeignID: '',
+         modalInnerHeight: 400,
+         refFields: {},
+         foreignActions: [
+            'RESTRICT',
+            'CASCADE',
+            'SET NULL',
+            'NO ACTION'
+         ]
+      };
+   },
+   computed: {
+      selectedForeignObj () {
+         return this.foreignProxy.find(foreign => foreign._id === this.selectedForeignID);
+      },
+      isChanged () {
+         return JSON.stringify(this.localKeyUsage) !== JSON.stringify(this.foreignProxy);
+      },
+      hasPrimary () {
+         return this.foreignProxy.some(foreign => foreign.type === 'PRIMARY');
+      }
+   },
+   mounted () {
+      this.foreignProxy = JSON.parse(JSON.stringify(this.localKeyUsage));
+
+      if (this.foreignProxy.length)
+         this.resetSelectedID();
+
+      if (this.selectedForeignObj)
+         this.getRefFields();
+
+      this.getModalInnerHeight();
+      window.addEventListener('resize', this.getModalInnerHeight);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.getModalInnerHeight);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      confirmForeignsChange () {
+         this.$emit('foreigns-update', this.foreignProxy);
+      },
+      selectForeign (event, id) {
+         if (this.selectedForeignID !== id && !event.target.classList.contains('remove-field'))
+            this.selectedForeignID = id;
+      },
+      getModalInnerHeight () {
+         const modalBody = document.querySelector('.modal-body');
+         if (modalBody)
+            this.modalInnerHeight = modalBody.clientHeight - (parseFloat(getComputedStyle(modalBody).paddingTop) + parseFloat(getComputedStyle(modalBody).paddingBottom));
+      },
+      addForeign () {
+         this.foreignProxy = [...this.foreignProxy, {
+            _id: uidGen(),
+            constraintName: `FK_${this.foreignProxy.length + 1}`,
+            refSchema: this.schema,
+            table: this.table,
+            refTable: '',
+            field: '',
+            refField: '',
+            onUpdate: this.foreignActions[0],
+            onDelete: this.foreignActions[0]
+         }];
+
+         if (this.foreignProxy.length === 1)
+            this.resetSelectedID();
+
+         setTimeout(() => {
+            this.$refs.indexesPanel.scrollTop = this.$refs.indexesPanel.scrollHeight + 60;
+         }, 20);
+      },
+      removeIndex (id) {
+         this.foreignProxy = this.foreignProxy.filter(foreign => foreign._id !== id);
+
+         if (this.selectedForeignID === id && this.foreignProxy.length)
+            this.resetSelectedID();
+      },
+      clearChanges () {
+         this.foreignProxy = JSON.parse(JSON.stringify(this.localKeyUsage));
+         if (!this.foreignProxy.some(foreign => foreign._id === this.selectedForeignID))
+            this.resetSelectedID();
+      },
+      toggleField (field) {
+         this.foreignProxy = this.foreignProxy.map(foreign => {
+            if (foreign._id === this.selectedForeignID)
+               foreign.field = field;
+
+            return foreign;
+         });
+      },
+      toggleRefField (field) {
+         this.foreignProxy = this.foreignProxy.map(foreign => {
+            if (foreign._id === this.selectedForeignID)
+               foreign.refField = field;
+
+            return foreign;
+         });
+      },
+      resetSelectedID () {
+         this.selectedForeignID = this.foreignProxy.length ? this.foreignProxy[0]._id : '';
+      },
+      async getRefFields () {
+         const params = {
+            uid: this.connection.uid,
+            schema: this.selectedForeignObj.refSchema,
+            table: this.selectedForeignObj.refTable
+         };
+
+         try { // Field data
+            const { status, response } = await Tables.getTableColumns(params);
+            if (status === 'success') {
+               this.refFields = {
+                  ...this.refFields,
+                  [this.selectedForeignID]: response
+               };
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      reloadRefFields () {
+         this.selectedForeignObj.refField = '';
+         this.getRefFields();
+      }
+   }
+};
+</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-foreign {
+    background: $bg-color-light;
+    opacity: 1;
+  }
+}
+
+.editor-col {
+  border-left: 2px solid $bg-color-light;
+}
+
+.fields-list {
+  max-height: 80px;
+  overflow: auto;
+}
+
+.remove-field .mdi {
+  pointer-events: none;
+}
+
+.fk-details-wrapper {
+  max-width: calc(100% - 1rem);
+
+  .fk-details {
+    display: flex;
+    line-height: 1;
+    align-items: baseline;
+
+    > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+      padding-bottom: 2px;
+    }
+  }
+}
+
+</style>

src/renderer/components/WorkspacePropsIndexesModal.vue

@@ -0,0 +1,284 @@
+<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'}"
+                  class="form-horizontal"
+               >
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.name') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="selectedIndexObj.name"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $t('word.type') }}
+                     </label>
+                     <div class="column">
+                        <select v-model="selectedIndexObj.type" class="form-select">
+                           <option
+                              v-for="index in indexTypes"
+                              :key="index"
+                              :value="index"
+                              :disabled="index === 'PRIMARY' && hasPrimary"
+                           >
+                              {{ index }}
+                           </option>
+                        </select>
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <label class="form-label col-3">
+                        {{ $tc('word.field', fields.length) }}
+                     </label>
+                     <div class="fields-list column pt-1">
+                        <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 v-if="!indexesProxy.length" class="empty">
+                  <div class="empty-icon">
+                     <i class="mdi mdi-key-outline mdi-48px" />
+                  </div>
+                  <p class="empty-title h5">
+                     {{ $t('message.thereAreNoIndexes') }}
+                  </p>
+                  <div class="empty-action">
+                     <button class="btn btn-primary" @click="addIndex">
+                        {{ $t('message.createNewIndex') }}
+                     </button>
+                  </div>
+               </div>
+            </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.length ? 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: 300px;
+  overflow: auto;
+}
+
+.remove-field .mdi {
+  pointer-events: none;
+}
+</style>

src/renderer/components/WorkspacePropsOptionsModal.vue

@@ -0,0 +1,130 @@
+<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
+                     ref="firstInput"
+                     v-model="optionsProxy.name"
+                     class="form-input"
+                     :class="{'is-error': !isTableNameValid}"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.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));
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmOptionsChange () {
+         if (!this.isTableNameValid)
+            this.optionsProxy.name = this.localOptions.name;
+
+         this.$emit('options-update', this.optionsProxy);
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTab.vue

@@ -0,0 +1,496 @@
+<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" @click="showForeignModal">
+                  <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"
+            :foreigns="localKeyUsage"
+            :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"
+      />
+      <WorkspacePropsForeignModal
+         v-if="isForeignModal"
+         :local-key-usage="localKeyUsage"
+         :connection="connection"
+         :table="table"
+         :schema="schema"
+         :schema-tables="schemaTables"
+         :fields="localFields"
+         :workspace="workspace"
+         @hide="hideForeignModal"
+         @foreigns-update="foreignsUpdate"
+      />
+   </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';
+import WorkspacePropsForeignModal from '@/components/WorkspacePropsForeignModal';
+
+export default {
+   name: 'WorkspacePropsTab',
+   components: {
+      WorkspacePropsTable,
+      WorkspacePropsOptionsModal,
+      WorkspacePropsIndexesModal,
+      WorkspacePropsForeignModal
+   },
+   props: {
+      connection: Object,
+      table: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isQuering: false,
+         isSaving: false,
+         isOptionsModal: false,
+         isIndexesModal: false,
+         isForeignModal: 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;
+      },
+      schemaTables () {
+         const schemaTables = this.workspace.structure
+            .filter(schema => schema.name === this.schema)
+            .map(schema => schema.tables);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      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.map(foreign => {
+                  return {
+                     _id: uidGen(),
+                     ...foreign
+                  };
+               });
+               this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
+            }
+            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));
+
+         // FOREIGN KEYS
+         const foreignChanges = {
+            additions: [],
+            changes: [],
+            deletions: []
+         };
+         const originalForeignIDs = this.originalKeyUsage.reduce((acc, curr) => [...acc, curr._id], []);
+         const localForeignIDs = this.localKeyUsage.reduce((acc, curr) => [...acc, curr._id], []);
+
+         // Foreigns Additions
+         foreignChanges.additions = this.localKeyUsage.filter(foreign => !originalForeignIDs.includes(foreign._id));
+
+         // Foreigns Changes
+         this.originalKeyUsage.forEach(originalForeign => {
+            const lI = this.localKeyUsage.findIndex(localForeign => localForeign._id === originalForeign._id);
+            if (JSON.stringify(originalForeign) !== JSON.stringify(this.localKeyUsage[lI])) {
+               if (this.localKeyUsage[lI]) {
+                  foreignChanges.changes.push({
+                     ...this.localKeyUsage[lI],
+                     oldName: originalForeign.constraintName
+                  });
+               }
+            }
+         });
+
+         // Foreigns Deletions
+         foreignChanges.deletions = this.originalKeyUsage.filter(foreign => !localForeignIDs.includes(foreign._id));
+
+         // ALTER
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            table: this.workspace.breadcrumbs.table,
+            additions,
+            changes,
+            deletions,
+            indexChanges,
+            foreignChanges,
+            options
+         };
+
+         try {
+            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;
+      },
+      showForeignModal () {
+         this.isForeignModal = true;
+      },
+      hideForeignModal () {
+         this.isForeignModal = false;
+      },
+      foreignsUpdate (foreigns) {
+         this.localKeyUsage = foreigns;
+      }
+   }
+};
+</script>

src/renderer/components/WorkspacePropsTable.vue

@@ -0,0 +1,247 @@
+<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 min-100">
+                     <div class="table-column-title">
+                        {{ $t('word.name') }}
+                     </div>
+                  </div>
+               </div>
+               <div class="th">
+                  <div class="column-resizable min-100">
+                     <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 min-100">
+                     <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)"
+               :foreigns="getForeigns(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,
+      foreigns: 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);
+      },
+      getForeigns (field) {
+         return this.foreigns.reduce((acc, curr) => {
+            if (curr.field === field)
+               acc.push(`${curr.refTable}.${curr.refField}`);
+            return acc;
+         }, []);
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.column-resizable {
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
+}
+
+.vscroll {
+  overflow: auto;
+}
+
+.min-100 {
+  min-width: 100px !important;
+}
+</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,553 @@
+<template>
+   <div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)">
+      <div class="td" tabindex="0">
+         <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}`"
+            />
+            <i
+               v-for="foreign in foreigns"
+               :key="foreign"
+               :title="foreign"
+               class="d-inline-block mdi mdi-key-link c-help"
+            />
+         </div>
+      </div>
+      <div class="td" tabindex="0">
+         <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"
+         tabindex="0"
+      >
+         <span
+            v-if="!isInlineEditor.type"
+            class="cell-content text-left"
+            :class="`type-${lowerCase(localRow.type)}`"
+            @click="editON($event, localRow.type.toUpperCase(), 'type')"
+         >
+            {{ localRow.type }}
+         </span>
+         <select
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            class="form-select editable-field small-select 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" tabindex="0">
+         <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" tabindex="0">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.unsigned"
+               type="checkbox"
+               :disabled="!fieldType.unsigned"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td" tabindex="0">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.nullable"
+               type="checkbox"
+               :disabled="!isNullable"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td" tabindex="0">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.zerofill"
+               type="checkbox"
+               :disabled="!fieldType.zerofill"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td" tabindex="0">
+         <span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
+            {{ fieldDefault }}
+         </span>
+      </div>
+      <div class="td type-varchar" tabindex="0">
+         <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" tabindex="0">
+         <template v-if="fieldType.collation">
+            <span
+               v-if="!isInlineEditor.collation"
+               class="cell-content"
+               @click="editON($event, localRow.collation, 'collation')"
+            >
+               {{ localRow.collation }}
+            </span>
+            <select
+               v-else
+               ref="editField"
+               v-model="editingContent"
+               class="form-select small-select editable-field"
+               @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="!canAutoincrement"
+                        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,
+      foreigns: Array
+   },
+   data () {
+      return {
+         localRow: {},
+         isInlineEditor: {},
+         isDefaultModal: false,
+         defaultValue: {
+            type: 'noval',
+            custom: '',
+            expression: '',
+            onUpdate: ''
+         },
+         editingContent: null,
+         originalContent: 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;
+      },
+      canAutoincrement () {
+         return this.indexes.some(index => ['PRIMARY', 'UNIQUE'].includes(index.type));
+      },
+      isNullable () {
+         return !this.indexes.some(index => ['PRIMARY'].includes(index.type));
+      }
+   },
+   watch: {
+      localRow () {
+         this.initLocalRow();
+      },
+      row () {
+         this.localRow = this.row;
+      },
+      indexes () {
+         if (!this.canAutoincrement)
+            this.localRow.autoIncrement = false;
+
+         if (!this.isNullable)
+            this.localRow.nullable = false;
+      }
+   },
+   mounted () {
+      this.localRow = this.row;
+      this.initLocalRow();
+      this.isInlineEditor.length = false;
+   },
+   methods: {
+      keyName (key) {
+         switch (key) {
+            case 'pri':
+               return 'PRIMARY';
+            case 'uni':
+               return 'UNIQUE';
+            case 'mul':
+               return 'INDEX';
+            default:
+               return 'UNKNOWN ' + key;
+         }
+      },
+      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;
+         this.originalContent = 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.editingContent !== this.originalContent) {
+            this.localRow.numLength = null;
+            this.localRow.charLength = null;
+            this.localRow.datePrecision = null;
+
+            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.fieldType.unsigned)
+               this.localRow.unsigned = false;
+
+            if (!this.fieldType.zerofill)
+               this.localRow.zerofill = false;
+         }
+
+         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.originalContent = 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,29 +1,37 @@
 <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"
+            :auto-focus="true"
+            :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"
-                  @click="runQuery"
+                  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>
-               <!-- <button class="btn btn-link btn-sm">
-                  <span>{{ $t('word.save') }}</span>
-                  <i class="material-icons ml-1">save</i>
-               </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>
@@ -31,18 +39,25 @@
       <div class="workspace-query-results column col-12">
          <WorkspaceQueryTable
             v-if="results"
+            v-show="!isQuering"
+            ref="queryTable"
             :results="results"
-            :fields="resultsFields"
+            :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 Database from '@/ipc-api/Database';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
 import { mapGetters, mapActions } from 'vuex';
+import tableTabs from '@/mixins/tableTabs';
 
 export default {
    name: 'WorkspaceQueryTab',
@@ -50,14 +65,20 @@ export default {
       QueryEditor,
       WorkspaceQueryTable
    },
+   mixins: [tableTabs],
    props: {
-      connection: Object
+      connection: Object,
+      tabUid: String,
+      isSelected: Boolean
    },
    data () {
       return {
          query: '',
+         lastQuery: '',
          isQuering: false,
-         results: {}
+         results: [],
+         resultsCount: 0,
+         affectedCount: 0
       };
    },
    computed: {
@@ -66,32 +87,38 @@ export default {
       }),
       workspace () {
          return this.getWorkspace(this.connection.uid);
-      },
-      resultsFields () {
-         return this.results.rows && this.results.rows.length ? Object.keys(this.results.rows[0]).map(field => {
-            return { name: field, key: '', type: '' }; // TODO: extract getting table name from query
-         }) : [];
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification'
       }),
-      async runQuery () {
-         if (!this.query) return;
+      async runQuery (query) {
+         if (!query || this.isQuering) return;
          this.isQuering = true;
-         this.results = {};
+         this.clearTabData();
+         this.$refs.queryTable.resetSort();
 
-         try {
+         try { // Query Data
             const params = {
                uid: this.connection.uid,
-               query: this.query,
-               schema: this.workspace.breadcrumbs.schema
+               schema: this.schema,
+               query
             };
 
-            const { status, response } = await Connection.rawQuery(params);
-            if (status === 'success')
-               this.results = response;
+            const { status, response } = await Database.rawQuery(params);
+
+            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 });
          }
@@ -100,6 +127,22 @@ export default {
          }
 
          this.isQuering = false;
+         this.lastQuery = query;
+      },
+      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);
+         }
       }
    }
 };
@@ -110,11 +153,10 @@ export default {
   align-content: baseline;
 
   .workspace-query-runner {
-
     .workspace-query-runner-footer {
       display: flex;
       justify-content: space-between;
-         padding: .3rem .6rem .4rem;
+      padding: 0.3rem 0.6rem 0.4rem;
       align-items: center;
 
       .workspace-query-buttons {
@@ -124,7 +166,7 @@ export default {
           display: flex;
           align-self: center;
           color: $body-font-color;
-               margin-right: .4rem;
+          margin-right: 0.4rem;
         }
       }
 
@@ -132,7 +174,7 @@ export default {
         display: flex;
 
         > div + div {
-               padding-left: .6rem;
+          padding-left: 0.6rem;
         }
       }
     }

src/renderer/components/WorkspaceQueryTable.vue

@@ -1,120 +1,171 @@
 <template>
-   <BaseVirtualScroll
-      v-if="results.rows"
-      ref="resultTable"
-      :items="localResults"
-      :item-height="25"
+   <div
+      ref="tableWrapper"
       class="vscroll"
       :style="{'height': resultsSize+'px'}"
    >
-      <template slot-scope="{ items }">
-         <div class="table table-hover">
+      <TableContext
+         v-if="isContext"
+         :context-event="contextEvent"
+         :selected-rows="selectedRows"
+         @delete-selected="deleteSelected"
+         @close-context="isContext = false"
+      />
+      <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 in fields"
-                     :key="field.name"
-                     class="th"
+                  v-for="(field, index) in fields"
+                  :key="index"
+                  class="th c-hand"
+                  :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`"
                >
-                     <div class="table-column-title">
+                  <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="mdi mdi-key column-key c-help"
                            :class="`key-${field.key}`"
                            :title="keyName(field.key)"
-                        >vpn_key</i>
-                        <span>{{ field.name }}</span>
+                        />
+                        <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>
-            <div class="tbody">
-               <div
+         </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"
-               >
-                  <div
-                     v-for="(col, cKey) in row"
-                     :key="cKey"
-                     class="td"
-                     :class="`type-${fieldType(cKey)}${isNull(col)}`"
-                     :style="{'display': cKey === '_id' ? 'none' : ''}"
-                     tabindex="0"
-                  >
-                     {{ col | typeFormat(fieldType(cKey)) }}
-                  </div>
-               </div>
-            </div>
-         </div>
+                  :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, mimeFromHex, formatBytes } from 'common/libs/utilities';
-import hexToBinary from 'common/libs/hexToBinary';
-import moment from 'moment';
+import { uidGen } from 'common/libs/uidGen';
+import { LONG_TEXT, BLOB } from 'common/fieldTypes';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
+import WorkspaceQueryTableRow from '@/components/WorkspaceQueryTableRow';
+import TableContext from '@/components/WorkspaceQueryTableContext';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
    name: 'WorkspaceQueryTable',
    components: {
-      BaseVirtualScroll
-   },
-   filters: {
-      typeFormat (val, type) {
-         if (!val) return val;
-
-         switch (type) {
-            case 'char':
-            case 'varchar':
-            case 'text':
-            case 'mediumtext':
-               return val.substring(0, 128);
-            case 'date':
-               return moment(val).format('YYYY-MM-DD');
-            case 'datetime':
-            case 'timestamp':
-               return moment(val).format('YYYY-MM-DD HH:mm:ss.SSS');
-            case 'blob':
-            case 'mediumblob':
-            case 'longblob': {
-               const buff = Buffer.from(val);
-               if (!buff.length) return '';
-
-               const hex = buff.toString('hex').substring(0, 8).toUpperCase();
-               return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
-            }
-            case 'bit': {
-               const hex = Buffer.from(val).toString('hex');
-               return hexToBinary(hex);
-            }
-            default:
-               return val;
-         }
-      }
+      BaseVirtualScroll,
+      WorkspaceQueryTableRow,
+      TableContext
    },
    props: {
-      results: Object,
-      fields: Array
+      results: Array,
+      tabUid: [String, Number],
+      connUid: String,
+      mode: String
    },
    data () {
       return {
          resultsSize: 1000,
-         localResults: []
+         localResults: [],
+         isContext: false,
+         contextEvent: null,
+         selectedCell: null,
+         selectedRows: [],
+         currentSort: '',
+         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 => ['pri', 'uni'].includes(field.key))[0] || false;
+      },
+      isHardSort () {
+         return this.mode === 'table' && this.localResults.length === 1000;
+      },
+      sortedResults () {
+         if (this.currentSort && !this.isHardSort) {
+            return [...this.localResults].sort((a, b) => {
+               let modifier = 1;
+               const valA = typeof a[this.currentSort] === 'string' ? a[this.currentSort].toLowerCase() : a[this.currentSort];
+               const valB = typeof b[this.currentSort] === 'string' ? b[this.currentSort].toLowerCase() : b[this.currentSort];
+               if (this.currentSortDir === 'desc') modifier = -1;
+               if (valA < valB) return -1 * modifier;
+               if (valA > valB) return 1 * modifier;
+               return 0;
+            });
+         }
+         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.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)
-         this.resizeResults();
+      if (this.$refs.table)
+         this.refreshScroller();
+
+      if (this.$refs.tableWrapper)
+         this.scrollElement = this.$refs.tableWrapper;
    },
    mounted () {
       window.addEventListener('resize', this.resizeResults);
@@ -123,6 +174,9 @@ export default {
       window.removeEventListener('resize', this.resizeResults);
    },
    methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
       fieldType (cKey) {
          let type = 'unknown';
          const field = this.fields.filter(field => field.name === cKey)[0];
@@ -131,8 +185,17 @@ export default {
 
          return type;
       },
-      isNull (col) {
-         return col === null ? ' is-null' : '';
+      fieldPrecision (cKey) {
+         let length = 0;
+         const field = this.fields.filter(field => field.name === cKey)[0];
+         if (field)
+            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) {
@@ -146,49 +209,184 @@ export default {
                return 'UNKNOWN ' + key;
          }
       },
-      resizeResults (e) {
+      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.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;
             }
+            this.$refs.resultTable.updateWindow();
          }
+      },
+      refreshScroller () {
+         this.resizeResults();
+      },
+      updateField (payload, id) {
+         if (!this.primaryField)
+            this.addNotification({ status: 'warning', message: this.$t('message.unableEditFieldWithoutPrimary') });
+         else {
+            const params = {
+               primary: this.primaryField.name,
+               schema: this.getSchema(this.resultsetIndex),
+               table: this.getTable(this.resultsetIndex),
+               id,
+               ...payload
+            };
+            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] ||
+               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('delete-selected', params);
+         }
+      },
+      applyUpdate (params) {
+         const { primary, id, field, table, content } = params;
+
+         this.localResults = this.localResults.map(row => {
+            if (row[primary] === id)// only fieldName
+               row[field] = content;
+            else if (row[`${table}.${primary}`] === id)// table.fieldName
+               row[`${table}.${field}`] = content;
+
+            return row;
+         });
+      },
+      selectRow (event, row) {
+         if (event.ctrlKey) {
+            if (this.selectedRows.includes(row))
+               this.selectedRows = this.selectedRows.filter(el => el !== row);
+            else
+               this.selectedRows.push(row);
+         }
+         else if (event.shiftKey) {
+            if (!this.selectedRows.length)
+               this.selectedRows.push(row);
+            else {
+               const lastID = this.selectedRows.slice(-1)[0];
+               const lastIndex = this.localResults.findIndex(el => el._id === lastID);
+               const clickedIndex = this.localResults.findIndex(el => el._id === row);
+               if (lastIndex > clickedIndex) {
+                  for (let i = clickedIndex; i < lastIndex; i++)
+                     this.selectedRows.push(this.localResults[i]._id);
+               }
+               else if (lastIndex < clickedIndex) {
+                  for (let i = clickedIndex; i > lastIndex; i--)
+                     this.selectedRows.push(this.localResults[i]._id);
+               }
+            }
+         }
+         else
+            this.selectedRows = [row];
+      },
+      contextMenu (event, cell) {
+         this.selectedCell = cell;
+         if (!this.selectedRows.includes(cell.id))
+            this.selectedRows = [cell.id];
+         this.contextEvent = event;
+         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';
+            else
+               this.resetSort();
+         }
+         else {
+            this.currentSortDir = 'asc';
+            this.currentSort = field;
+         }
+
+         if (this.isHardSort)
+            this.$emit('hard-sort', { field: this.currentSort, dir: this.currentSortDir });
+      },
+      resetSort () {
+         this.currentSort = '';
+         this.currentSortDir = 'asc';
+      },
+      selectResultset (index) {
+         this.resultsetIndex = index;
       }
    }
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .vscroll {
   height: 1000px;
   overflow: auto;
   overflow-anchor: none;
 }
 
+.column-resizable {
+  &:hover,
+  &:active {
+    resize: horizontal;
+    overflow: hidden;
+  }
+}
+
 .table-column-title {
   display: flex;
   align-items: center;
 }
 
-.column-key{
-   transform: rotate(90deg);
-   font-size: .7rem;
-   line-height: 1.5;
-   margin-right: .2rem;
-
-   &.key-pri{
-      color: goldenrod;
+.sort-icon {
+  font-size: 0.7rem;
+  line-height: 1;
+  margin-left: 0.2rem;
 }
 
-   &.key-uni{
-      color: deepskyblue;
-   }
-
-   &.key-mul{
-      color: palegreen;
-   }
+.result-tabs {
+  background: transparent !important;
+  margin: 0;
 }
 </style>

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -0,0 +1,66 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <div class="context-element" @click="showConfirmModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}</span>
+      </div>
+
+      <ConfirmModal
+         v-if="isConfirmModal"
+         @confirm="deleteRows"
+         @hide="hideConfirmModal"
+      >
+         <template :slot="'header'">
+            <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">
+               {{ $tc('message.confirmToDeleteRows', selectedRows.length) }}
+            </div>
+         </div>
+      </ConfirmModal>
+   </BaseContextMenu>
+</template>
+
+<script>
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspaceQueryTableContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedRows: Array
+   },
+   data () {
+      return {
+         isConfirmModal: false
+      };
+   },
+   computed: {
+   },
+   methods: {
+      showConfirmModal () {
+         this.isConfirmModal = true;
+      },
+      hideConfirmModal () {
+         this.isConfirmModal = false;
+      },
+      closeContext () {
+         this.$emit('close-context');
+      },
+      deleteRows () {
+         this.$emit('delete-selected');
+         this.closeContext();
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceQueryTableRow.vue

@@ -0,0 +1,471 @@
+<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)"
+               size="small"
+               @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')"
+         size="medium"
+         @confirm="editOFF"
+         @hide="hideEditorModal"
+      >
+         <template :slot="'header'">
+            <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="editingContent"
+                     class="form-input textarea-editor"
+                  />
+               </div>
+               <div class="editor-field-info">
+                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+               </div>
+            </div>
+         </div>
+      </ConfirmModal>
+      <ConfirmModal
+         v-if="isBlobEditor"
+         :confirm-text="$t('word.update')"
+         @confirm="editOFF"
+         @hide="hideEditorModal"
+      >
+         <template :slot="'header'">
+            <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">
+               <transition name="jump-down">
+                  <div v-if="contentInfo.size">
+                     <img
+                        v-if="isImage"
+                        :src="`data:${contentInfo.mime};base64, ${bufferToBase64(editingContent)}`"
+                        class="img-responsive p-centered bg-checkered"
+                     >
+                     <div v-else class="text-center">
+                        <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="mdi mdi-24px mdi-download ml-1" />
+                        </button>
+                        <button class="btn btn-link btn-sm" @click="prepareToDelete">
+                           <span>{{ $t('word.delete') }}</span>
+                           <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>: {{ editingContent.length | formatBytes }}<br>
+                     <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
+                  </div>
+                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+               </div>
+               <div class="mt-3">
+                  <label>{{ $t('message.uploadFile') }}</label>
+                  <input
+                     class="form-input"
+                     type="file"
+                     @change="filesChange($event)"
+                  >
+               </div>
+            </div>
+         </div>
+      </ConfirmModal>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { mimeFromHex } from 'common/libs/mimeFromHex';
+import { formatBytes } from 'common/libs/formatBytes';
+import { bufferToBase64 } from 'common/libs/bufferToBase64';
+import hexToBinary from 'common/libs/hexToBinary';
+import { 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: 'WorkspaceQueryTableRow',
+   components: {
+      ConfirmModal,
+      ForeignKeySelect
+   },
+   directives: {
+      mask
+   },
+   filters: {
+      formatBytes,
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
+      },
+      typeFormat (val, type, precision) {
+         if (!val) return val;
+
+         type = type.toUpperCase();
+
+         if (DATE.includes(type))
+            return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
+
+         if (DATETIME.includes(type)) {
+            let datePrecision = '';
+            for (let i = 0; i < precision; i++)
+               datePrecision += i === 0 ? '.S' : 'S';
+
+            return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
+         }
+
+         if (BLOB.includes(type)) {
+            const buff = Buffer.from(val);
+            if (!buff.length) return '';
+
+            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+            return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
+         }
+
+         if (BIT.includes(type)) {
+            if (typeof val === 'number') val = [val];
+            const hex = Buffer.from(val).toString('hex');
+            return hexToBinary(hex);
+         }
+
+         return val;
+      }
+   },
+   props: {
+      row: Object,
+      fields: {
+         type: Array,
+         default: () => []
+      },
+      keyUsage: Array
+   },
+   data () {
+      return {
+         isInlineEditor: {},
+         isTextareaEditor: false,
+         isBlobEditor: false,
+         willBeDeleted: false,
+         originalContent: null,
+         editingContent: null,
+         editingType: null,
+         editingField: null,
+         contentInfo: {
+            ext: '',
+            mime: '',
+            size: null
+         },
+         fileToUpload: null
+      };
+   },
+   computed: {
+      inputProps () {
+         if ([...TEXT, ...LONG_TEXT].includes(this.editingType))
+            return { type: 'text', mask: false };
+
+         if (NUMBER.includes(this.editingType))
+            return { type: 'number', mask: false };
+
+         if (TIME.includes(this.editingType)) {
+            let timeMask = '##:##:##';
+            const precision = this.getFieldPrecision(this.editingField);
+
+            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.editingType)) {
+            let datetimeMask = '####-##-## ##:##:##';
+            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.editingType))
+            return { type: 'file', mask: false };
+
+         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.field);
+      },
+      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.toLowerCase();
+      },
+      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 (event, content, field) {
+         if (!this.isEditable) return;
+
+         const type = this.getFieldType(field).toUpperCase(); ;
+         this.originalContent = content;
+         this.editingType = type;
+         this.editingField = field;
+
+         if (LONG_TEXT.includes(type)) {
+            this.isTextareaEditor = true;
+            this.editingContent = this.$options.filters.typeFormat(this.originalContent, type);
+            return;
+         }
+
+         if (BLOB.includes(type)) {
+            this.isBlobEditor = true;
+            this.editingContent = this.originalContent || '';
+            this.fileToUpload = null;
+            this.willBeDeleted = false;
+
+            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.editingContent.length
+                  };
+               }
+            }
+            return;
+         }
+
+         // Inline editable fields
+         this.editingContent = this.$options.filters.typeFormat(this.originalContent, type, this.getFieldPrecision(field));
+         this.$nextTick(() => { // Focus on input
+            event.target.blur();
+
+            this.$nextTick(() => document.querySelector('.editable-field').focus());
+         });
+
+         const obj = { [field]: true };
+         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+      },
+      editOFF () {
+         this.isInlineEditor[this.editingField] = false;
+         let content;
+         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) {
+               content = '';
+               this.willBeDeleted = false;
+            }
+            else {
+               if (!this.fileToUpload) return;
+               content = this.fileToUpload.file.path;
+            }
+         }
+
+         this.$emit('update-field', {
+            field: this.getFieldObj(this.editingField).name,
+            type: this.editingType,
+            content
+         });
+
+         this.editingType = null;
+         this.editingField = null;
+      },
+      hideEditorModal () {
+         this.isTextareaEditor = false;
+         this.isBlobEditor = false;
+      },
+      downloadFile () {
+         const downloadLink = document.createElement('a');
+
+         downloadLink.href = `data:${this.contentInfo.mime};base64, ${bufferToBase64(this.editingContent)}`;
+         downloadLink.setAttribute('download', `${this.editingField}.${this.contentInfo.ext}`);
+         document.body.appendChild(downloadLink);
+
+         downloadLink.click();
+         downloadLink.remove();
+      },
+      filesChange (event) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.fileToUpload = { name: files[0].name, file: files[0] };
+         this.willBeDeleted = false;
+      },
+      prepareToDelete () {
+         this.editingContent = '';
+         this.contentInfo = {
+            ext: '',
+            mime: '',
+            size: null
+         };
+         this.willBeDeleted = true;
+      },
+      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.field === keyName);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+.editable-field {
+  margin: 0;
+  border: none;
+  line-height: 1;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.cell-content {
+  display: block;
+  min-height: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.textarea-editor {
+  height: 50vh !important;
+}
+
+.editor-field-info {
+  margin-top: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  white-space: normal;
+}
+
+.editor-buttons {
+  display: flex;
+  justify-content: space-evenly;
+
+  .btn {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/renderer/components/WorkspaceTableTab.vue

@@ -1,24 +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-link btn-sm"
+                        class="btn btn-dark btn-sm mr-0 pr-1"
                         :class="{'loading':isQuering}"
-                  @click="getTableData"
+                        title="F5"
+                        @click="reloadTable"
                      >
                         <span>{{ $t('word.refresh') }}</span>
-                  <i class="material-icons ml-1">refresh</i>
+                        <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-dark btn-sm"
+                  @click="showAddModal"
+               >
+                  <span>{{ $t('word.add') }}</span>
+                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
-               <!-- <button class="btn btn-link btn-sm">
-                  <span>{{ $t('word.save') }}</span>
-                  <i class="material-icons ml-1">save</i>
-               </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>
@@ -29,33 +56,55 @@
       <div class="workspace-query-results column col-12">
          <WorkspaceQueryTable
             v-if="results"
+            ref="queryTable"
             :results="results"
-            :fields="resultsFields"
+            :tab-uid="tabUid"
+            :conn-uid="connection.uid"
+            mode="table"
+            @update-field="updateField"
+            @delete-selected="deleteSelected"
+            @hard-sort="hardSort"
          />
       </div>
+      <ModalNewTableRow
+         v-if="isAddModal"
+         :fields="fields"
+         :key-usage="keyUsage"
+         :tab-uid="tabUid"
+         @hide="hideAddModal"
+         @reload="reloadTable"
+      />
    </div>
 </template>
 
 <script>
-import Structure from '@/ipc-api/Structure';
+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: {
       connection: Object,
       table: String
    },
    data () {
       return {
+         tabUid: 'data',
          isQuering: false,
-         results: {},
-         fields: [],
-         lastTable: null
+         results: [],
+         lastTable: null,
+         isAddModal: false,
+         autorefreshTimer: 0,
+         refreshInterval: null,
+         sortParams: {}
       };
    },
    computed: {
@@ -66,26 +115,33 @@ export default {
          return this.getWorkspace(this.connection.uid);
       },
       isSelected () {
-         return this.workspace.selected_tab === 1;
+         return this.workspace.selected_tab === 'data';
       },
-      resultsFields () {
-         return this.fields.map(field => { // TODO: move to main process
-            return {
-               name: field.COLUMN_NAME,
-               key: field.COLUMN_KEY.toLowerCase(),
-               type: field.DATA_TYPE
-            };
-         });
+      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: {
-      table: function () {
+      table () {
          if (this.isSelected) {
+            this.sortParams = {};
             this.getTableData();
             this.lastTable = this.table;
+            this.$refs.queryTable.resetSort();
          }
       },
-      isSelected: function (val) {
+      isSelected (val) {
          if (val && this.lastTable !== this.table) {
             this.getTableData();
             this.lastTable = this.table;
@@ -94,38 +150,36 @@ export default {
    },
    created () {
       this.getTableData();
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+      clearInterval(this.refreshInterval);
    },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification'
       }),
-      async getTableData () {
+      async getTableData (sortParams) {
          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,
-            table: this.workspace.breadcrumbs.table
+            schema: this.schema,
+            table: this.workspace.breadcrumbs.table,
+            sortParams
          };
 
-         try {
-            const { status, response } = await Structure.getTableColumns(params);
-            if (status === 'success')
-               this.fields = response.rows;
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
-         try {
-            const { status, response } = await Structure.getTableData(params);
+         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 });
          }
@@ -134,43 +188,41 @@ export default {
          }
 
          this.isQuering = false;
+      },
+      getTable () {
+         return this.table;
+      },
+      reloadTable () {
+         this.getTableData(this.sortParams);
+      },
+      hardSort (sortParams) {
+         this.sortParams = sortParams;
+         this.getTableData(sortParams);
+      },
+      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: .3rem .6rem .4rem;
-         align-items: center;
-
-         .workspace-query-buttons{
-            display: flex;
-
-            .btn{
-               display: flex;
-               align-self: center;
-               color: $body-font-color;
-               margin-right: .4rem;
-            }
-         }
-
-         .workspace-query-info{
-            display: flex;
-
-            > div + div{
-               padding-left: .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

@@ -29,7 +29,40 @@ module.exports = {
       donate: 'Donate',
       run: 'Run',
       schema: 'Schema',
-      results: 'Results'
+      results: 'Results',
+      size: 'Size',
+      seconds: 'Seconds',
+      type: 'Type',
+      mimeType: 'Mime-Type',
+      download: 'Download',
+      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',
+      author: 'Author'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -41,7 +74,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',
@@ -51,7 +84,47 @@ module.exports = {
       updateAvailable: 'Update available',
       downloadingUpdate: 'Downloading update',
       updateDownloaded: 'Update downloaded',
-      restartToInstall: 'Restart Antares to install'
+      restartToInstall: 'Restart Antares to install',
+      unableEditFieldWithoutPrimary: 'Unable to edit a field without a primary key in resultset',
+      editCell: 'Edit cell',
+      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',
+      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.',
+      thereAreNoIndexes: 'There are no indexes',
+      thereAreNoForeign: 'There are no foreign keys',
+      createNewForeign: 'Create new foreign key',
+      referenceTable: 'Ref. table',
+      referenceField: 'Ref. field',
+      foreignFields: 'Foreign fields',
+      invalidDefault: 'Invalid default',
+      onDelete: 'On delete'
    },
    // 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

@@ -27,7 +27,19 @@ module.exports = {
       language: 'Lingua',
       version: 'Versione',
       donate: 'Dona',
-      run: 'Esegui'
+      run: 'Esegui',
+      schema: 'Schema',
+      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!',
@@ -39,9 +51,27 @@ 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!'
+      madeWithJS: 'Fatto con 💛 e JavaScript!',
+      checkForUpdates: 'Cerca aggiornamenti',
+      noUpdatesAvailable: 'Nessun aggiornamento disponibile',
+      checkingForUpdate: 'Controllo aggiornamenti in corso',
+      checkFailure: 'Controllo fallito, riprova più tardi',
+      updateAvailable: 'Aggiornamento disponibile',
+      downloadingUpdate: 'Download dell\'aggiornamento',
+      updateDownloaded: 'Aggiornamento scaricato',
+      restartToInstall: 'Riavvia Antares per installare l\'aggiornamento',
+      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?',
+      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/Structure.js

@@ -1,12 +0,0 @@
-'use strict';
-import { ipcRenderer } from 'electron';
-
-export default class {
-   static getTableColumns (params) {
-      return ipcRenderer.invoke('getTableColumns', params);
-   }
-
-   static getTableData (params) {
-      return ipcRenderer.invoke('getTableData', params);
-   }
-}

src/renderer/ipc-api/Tables.js

@@ -0,0 +1,52 @@
+'use strict';
+import { ipcRenderer } from 'electron';
+
+export default class {
+   static getTableColumns (params) {
+      return ipcRenderer.invoke('get-table-columns', params);
+   }
+
+   static 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('update-table-cell', params);
+   }
+
+   static 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

@@ -0,0 +1,58 @@
+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,
+            ...payload
+         };
+
+         try {
+            const { status, response } = await Tables.updateTableCell(params);
+            if (status === 'success') {
+               if (response.reload)// Needed for blob fields
+                  this.reloadTable();
+               else
+                  this.$refs.queryTable.applyUpdate(payload);
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isQuering = false;
+      },
+      async deleteSelected (payload) {
+         this.isQuering = true;
+
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         try {
+            const { status, response } = await Tables.deleteTableRows(params);
+
+            if (status === 'success')
+               this.reloadTable();
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isQuering = false;
+      }
+   }
+};