chore(release): 0.2.0

feat: added translation for de-DE

.eslintrc

@@ -9,19 +9,22 @@
         "plugin:vue/recommended"
     ],
     "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
         "ecmaVersion": 9,
-        "sourceType": "module"
+        "sourceType": "module",
+        "requireConfigFile": false
     },
     "rules": {
         "indent": [
             "error",
             3,
-            { "SwitchCase": 1 }
+            {
+                "SwitchCase": 1
+            }
         ],
         "linebreak-style": [
             "error",
-            "windows"
+            "unix"
         ],
         "brace-style": [
             "error",
@@ -44,18 +47,25 @@
         "vue/no-side-effects-in-computed-properties": "off",
         "vue/require-default-prop": "off",
         "vue/no-v-html": "off",
-        "vue/html-indent": ["error", 3, {
+        "vue/html-indent": [
+            "error",
+            3,
+            {
                 "attribute": 1,
                 "baseIndent": 1,
                 "closeBracket": 0,
                 "ignores": []
-        }],
-        "vue/max-attributes-per-line": ["error", {
+            }
+        ],
+        "vue/max-attributes-per-line": [
+            "error",
+            {
                 "singleline": 2,
                 "multiline": {
                     "max": 1,
                     "allowFirstLine": false
                 }
-        }]
+            }
+        ]
     }
 }

.gitattributes

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

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: fabio286
+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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: Fabio286
+
+---
+
+**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.
+
+**Application (please complete the following information):**
+
+- Version [e.g. 0.14.0]
+- Distribution: [e.g. exe, Linux Store, AppImage, dmg]
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- 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: Fabio286
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

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

.github/workflows/build-linux.yml

@@ -0,0 +1,26 @@
+name: Build/release [linux]
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          github_token: ${{ secrets.github_token }}
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/build-mac.yml

@@ -0,0 +1,26 @@
+name: Build/release [mac]
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          github_token: ${{ secrets.github_token }}
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/build-win.yml

@@ -0,0 +1,26 @@
+name: Build/release [windows]
+
+on: push
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          github_token: ${{ secrets.github_token }}
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,57 @@
+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
+
+    # 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,15 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "fix": true,
+  "formatter": "verbose",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "no-descending-specificity": null
+  },
+  "syntax": "scss"
+}

.versionrc.json

@@ -0,0 +1,7 @@
+{
+  "types": [
+    {"type":"feat","section":"Features"},
+    {"type":"perf","section":"Improvements"},
+    {"type":"fix","section":"Bug Fixes"}
+  ]
+}

CHANGELOG.md

@@ -1,18 +1,617 @@
 # Changelog
 
-## [0.0.2-alpha](https://github.com/Fabio286/antares/releases/tag/v0.0.2-alpha) - 2020-06-26
+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.
 
-### Added
+## [0.2.0](https://github.com/Fabio286/antares/compare/v0.1.13...v0.2.0) (2021-07-03)
 
-- **Edit table fields:** You can edit fields from tables by double click. For now is available only on numeric and textual values.  
-- Various improvements under the hood.
-
-### Fixed
-
-- Connection test.
-
-## [0.0.1-alpha](https://github.com/Fabio286/antares/releases/tag/v0.0.1-alpha) - 2020-06-19
 
 ### Features
 
-- **Initial release:**
+* contextual option to duplicate tables ([08d5b1b](https://github.com/Fabio286/antares/commit/08d5b1b3299adc5c53419f50892aee3b58e6fe72))
+* **PostgreSQL:** trigger functions support ([75bbd5f](https://github.com/Fabio286/antares/commit/75bbd5f66e38a971482acff9dde636cf89858c8e))
+* **PostgreSQL:** triggers creation ([7df0cf8](https://github.com/Fabio286/antares/commit/7df0cf83895ba784e30efa7814433cf329175364))
+* **UI:** active tab animation ([978a7c5](https://github.com/Fabio286/antares/commit/978a7c5f5b314f2ba4067c86471755fdcc341b3f))
+* **UI:** context option to copy cell or row value ([d868c77](https://github.com/Fabio286/antares/commit/d868c772b9e7c70e173d1f80ad8de51aa40991ef))
+* **UI:** resizer border mouse hover animation ([a69bdeb](https://github.com/Fabio286/antares/commit/a69bdeb20db7d67613dace554ae37a0c5e112ec2))
+
+
+### Bug Fixes
+
+* **PostgreSQL:** error opening setting tab for some stored routines ([d96907c](https://github.com/Fabio286/antares/commit/d96907ca2de344114e3edae52843f6258468934b))
+* **UI:** contextual sub-menu alignment when close to the lower edge of the window ([61a42d5](https://github.com/Fabio286/antares/commit/61a42d51f55ec3010c4ee67bad2f699ff14c9f7c))
+* fields default not correctly set in table filler ([faa07a0](https://github.com/Fabio286/antares/commit/faa07a077c899af5c71124e0c20869876e57fd9a))
+* rows loses internal id after export ([2d278aa](https://github.com/Fabio286/antares/commit/2d278aa14e0e5080725196538b7265ec00a7aebb))
+* **UI:** editor blinking on first connection with a dark theme ([0110756](https://github.com/Fabio286/antares/commit/0110756204b79388535a74017b303e1ba41e8fd8))
+* unhandled exception in connection test ([a975df3](https://github.com/Fabio286/antares/commit/a975df38dd471ab0ac8645a1021470a4600e6598))
+* vulnerability in server error toast messages ([3aef7e9](https://github.com/Fabio286/antares/commit/3aef7e953ea82a9105d470cc62c68aacfc97f9d9))
+
+
+### Improvements
+
+* improved contextual menu appearance ([f74bca7](https://github.com/Fabio286/antares/commit/f74bca7bb4fc6802143446a44663fbf12319bf29))
+* **UI:** increased application border-radius ([a0a025e](https://github.com/Fabio286/antares/commit/a0a025e4502141e95394ca9717b1ec65df2728c1))
+
+### [0.1.13](https://github.com/Fabio286/antares/compare/v0.1.12...v0.1.13) (2021-06-19)
+
+
+### Features
+
+* **PostgreSQL:** alter trigger support ([5c8ee66](https://github.com/Fabio286/antares/commit/5c8ee66f432585db7bd72103fa814558bf406bcc))
+* **UI:** ability to manually insert page number in DATA tabs, closes [#65](https://github.com/Fabio286/antares/issues/65) ([e2ebb04](https://github.com/Fabio286/antares/commit/e2ebb04a9047d25187889644aa625fe675de808b))
+* **UI:** option to change query editors font size, closes [#77](https://github.com/Fabio286/antares/issues/77) ([e579f37](https://github.com/Fabio286/antares/commit/e579f374381b329422b646b8f7ab5acf298db981))
+
+
+### Bug Fixes
+
+* **MySQL:** pool connections not released after MySQL errors, causing endless load animation ([4133fc4](https://github.com/Fabio286/antares/commit/4133fc452fc2e961eb587590e010f4968675db7e))
+* **UI:** various fixes in displaying content with small window size ([8a20bef](https://github.com/Fabio286/antares/commit/8a20befd0941cb2e6d5e29552606454bd871b092))
+
+
+### Improvements
+
+* remove comments from queries before execution ([690a454](https://github.com/Fabio286/antares/commit/690a4541f96eaf831dea07b777a421729173b654))
+
+### [0.1.12](https://github.com/Fabio286/antares/compare/v0.1.11...v0.1.12) (2021-06-09)
+
+
+### Features
+
+* **PostgreSQL:** trigger rename and delete ([cce5adb](https://github.com/Fabio286/antares/commit/cce5adbac75170186956211b54f4db5be25aba07))
+
+
+### Bug Fixes
+
+* internal exceptions ([8742fa1](https://github.com/Fabio286/antares/commit/8742fa10f08c92a98325df50be9a7df8e36b0f2c))
+* page offset not reset when selected table changes ([5562e73](https://github.com/Fabio286/antares/commit/5562e73e75c659051a49d61041d1eee9d66ff6e2))
+* **MySQL:** view's data tab doesn't work with some views, closes [#71](https://github.com/Fabio286/antares/issues/71) ([9ca059d](https://github.com/Fabio286/antares/commit/9ca059d979161c0132f64db372b4ed7ecc844b2d))
+* **UI:** unable to browse view's result pages ([8a7cc2a](https://github.com/Fabio286/antares/commit/8a7cc2a14fa289c2f3d9e9eb1a5435ffbbaab006))
+
+### [0.1.11](https://github.com/Fabio286/antares/compare/v0.1.10...v0.1.11) (2021-06-02)
+
+
+### Bug Fixes
+
+* **UI:** prevent canc key to trigger delete modal when editing a row ([5e9c88a](https://github.com/Fabio286/antares/commit/5e9c88a7fd656dd69b92ba4384ca81f4e8cdd422))
+* table row loses internal id after cell update ([6622756](https://github.com/Fabio286/antares/commit/66227569f4c032298e20d44c253d30109ffde0b2))
+* **MySQL:** missing schema altering tables in some conditions ([faa799c](https://github.com/Fabio286/antares/commit/faa799c8ea2329e7ca1b54c9414a060bc8a2a840))
+* empty offset in cell update queries ([acc1eeb](https://github.com/Fabio286/antares/commit/acc1eeb0948db35f2c9a4d85d70fb654b41b15e5))
+
+### [0.1.10](https://github.com/Fabio286/antares/compare/v0.1.9...v0.1.10) (2021-05-29)
+
+
+### Features
+
+* key shortcuts to change DATA tab page ([f61d7ee](https://github.com/Fabio286/antares/commit/f61d7eeaf42406eb88b3285ac4606794f56e88d3))
+* option to set DATA tab page size ([e71c756](https://github.com/Fabio286/antares/commit/e71c7568c09bf8ad184753d3d0f14046f1e386d0))
+* prev/next buttons to browse the results pages of data tab ([79f033e](https://github.com/Fabio286/antares/commit/79f033e5245e0e744c35540d25a30b1eadc4d603))
+
+
+### Bug Fixes
+
+* **MySQL:** wrong schema in view data tab select, closes [#71](https://github.com/Fabio286/antares/issues/71) ([310cfaa](https://github.com/Fabio286/antares/commit/310cfaa3c2324b1159a46be566b6af2555dc9732))
+* wrong detection of field default expressions in some cases ([04bdd08](https://github.com/Fabio286/antares/commit/04bdd085a56240273133586d23196e52341d5f27))
+
+### [0.1.9](https://github.com/Fabio286/antares/compare/v0.1.8...v0.1.9) (2021-05-23)
+
+
+### Bug Fixes
+
+* **MySQL:** can't access tables having UNIQUE KEY, closes [#69](https://github.com/Fabio286/antares/issues/69) ([f1636f1](https://github.com/Fabio286/antares/commit/f1636f1528b5765423535f84027fdc853c58ce80))
+
+### [0.1.8](https://github.com/Fabio286/antares/compare/v0.1.7...v0.1.8) (2021-05-22)
+
+
+### Bug Fixes
+
+* internal id not removed before row update ([0f10c9e](https://github.com/Fabio286/antares/commit/0f10c9e824b679cfebd8a31085236da3d38a7953))
+* unable to add new ENUM fields ([1e37f2a](https://github.com/Fabio286/antares/commit/1e37f2a96f660a36f2739fea57ca298059e9c31a))
+* unable to delete table rows ([0d61371](https://github.com/Fabio286/antares/commit/0d6137195da9e0e9afe68f6d3ebcd50e913a888e))
+
+
+### Improvements
+
+* improved the way how field default value are handled ([7a766f0](https://github.com/Fabio286/antares/commit/7a766f04e668868e8844aac1d7d445bc2da21558))
+
+### [0.1.7](https://github.com/Fabio286/antares/compare/v0.1.6...v0.1.7) (2021-05-16)
+
+
+### Bug Fixes
+
+* row loses internal id after cell update ([854472c](https://github.com/Fabio286/antares/commit/854472c7a3d8442b1eede12f978cad5aa684094e))
+* **MySQL:** connection loses schema in some conditions ([6b0b8b1](https://github.com/Fabio286/antares/commit/6b0b8b19d7176ef8647d6f401a33315f8732fdf3))
+* issue with ENUM and SET fields on table filler modal ([475397c](https://github.com/Fabio286/antares/commit/475397ca34c5b7d8925e2d97d32216d5b80d8211))
+* issue with ENUM and SET length when creating a new field ([7a62131](https://github.com/Fabio286/antares/commit/7a62131cc707aa1c98bb12513de76229472b7c38))
+* multiple row select on sorted tables not work properly ([c7663be](https://github.com/Fabio286/antares/commit/c7663be338ccb5ff31e241e824593531ad95bd32))
+
+
+### Improvements
+
+* **core:** increased connection pool size to improve performance ([ae103e5](https://github.com/Fabio286/antares/commit/ae103e5477ad190c541d0f29e277c41de6947063))
+* **MySQL:** improved connections pool handling ([434711a](https://github.com/Fabio286/antares/commit/434711a360bd7539d2ec3adec92e7ccc96fa828e))
+
+### [0.1.6](https://github.com/Fabio286/antares/compare/v0.1.5...v0.1.6) (2021-05-08)
+
+
+### Features
+
+* **MySQL:** ENUM and SET fields support, closes [#61](https://github.com/Fabio286/antares/issues/61) ([bebba64](https://github.com/Fabio286/antares/commit/bebba64d06532990405763284e27cb768dc050f7))
+
+
+### Bug Fixes
+
+* better detection and handling of field default type ([3baf6fa](https://github.com/Fabio286/antares/commit/3baf6fa1736a405c95fb02d17c11514861ca9e04))
+* no quotes around strings in field default custom value ([29e2d92](https://github.com/Fabio286/antares/commit/29e2d92b5bf66ff9e80bb1fee1274967c4418601))
+* **UI:** data type figure twice on type select ([9dfe7cc](https://github.com/Fabio286/antares/commit/9dfe7cca2234ce6de512bb4c21205c2217e7f765))
+* support to mDNS/zeroconf in snap build, closes [#58](https://github.com/Fabio286/antares/issues/58) ([35ef070](https://github.com/Fabio286/antares/commit/35ef070725f5779923bf3ad428b44accddf22dbe))
+
+
+### Improvements
+
+* italian translation updated ([5dc0b0b](https://github.com/Fabio286/antares/commit/5dc0b0bea40f9d5a5944af2f1c5dc6ff3e60c396))
+
+### [0.1.5](https://github.com/Fabio286/antares/compare/v0.1.4...v0.1.5) (2021-04-30)
+
+
+### Bug Fixes
+
+* **MySQL:** multiple queries non properly split in some cases ([5208ec1](https://github.com/Fabio286/antares/commit/5208ec171b44da0e6bfa93f15bfedd03ef2aa868))
+* % character not properly escaped, closes [#60](https://github.com/Fabio286/antares/issues/60) ([ecfb732](https://github.com/Fabio286/antares/commit/ecfb732c265a5485e131e75f3d20ff07d9409753))
+* semicolon inside strings breaks queries, closes [#59](https://github.com/Fabio286/antares/issues/59) ([1b09909](https://github.com/Fabio286/antares/commit/1b0990912627a3a4a4e8d62b4593f8a7aa3a7fe5))
+
+
+### Improvements
+
+* **UI:** new application icon ([5822b3d](https://github.com/Fabio286/antares/commit/5822b3df432e0a2b305d0ff37a20dc466c3a3992))
+
+### [0.1.4](https://github.com/Fabio286/antares/compare/v0.1.3...v0.1.4) (2021-04-22)
+
+
+### Features
+
+* query results export ([1d363f7](https://github.com/Fabio286/antares/commit/1d363f755e025d0fc6fec61cbd47ff87a8f25728))
+* **UI:** canc press to delete selected rows ([20cba6e](https://github.com/Fabio286/antares/commit/20cba6ee9bc1daa902b04d6e2ddcb31d04fbf805))
+* **UI:** ctrl+s shortcut to save changes ([16e17b3](https://github.com/Fabio286/antares/commit/16e17b39b6c8b561cc018d02afee2276190ce304))
+* **UI:** format and clear queries ([9ffd443](https://github.com/Fabio286/antares/commit/9ffd443a66303f88fc4529896f6d1d7917454f7a))
+
+
+### Bug Fixes
+
+* launch from shortcut of procedures or functions with parameters without name dont works ([f82dbd2](https://github.com/Fabio286/antares/commit/f82dbd24dcef7b4d8d127a604e256b3f79a6c617))
+* wrong changelog in some cases ([a41cf1a](https://github.com/Fabio286/antares/commit/a41cf1ab5662f5f5fdedff4a9e1c626c23071377))
+* **UI:** data type not listed in selection if not present in global types ([6eb2977](https://github.com/Fabio286/antares/commit/6eb2977568987b9440b62ae7dbd7183338bfcc9b))
+
+
+### Improvements
+
+* **UI:** improved connection status indicator ([5ceddb8](https://github.com/Fabio286/antares/commit/5ceddb8e00f3bc1984b8e47de270dc39b367903f))
+
+### [0.1.3](https://github.com/Fabio286/antares/compare/v0.1.2...v0.1.3) (2021-04-17)
+
+
+### Features
+
+* **PostgreSQL:** functions management ([cd31413](https://github.com/Fabio286/antares/commit/cd3141325681ea572c06b8998dd7bd334ceb3236))
+* **PostgreSQL:** procedure language select ([b33199e](https://github.com/Fabio286/antares/commit/b33199ea59c60b467601f333857494aa40adf4e8))
+
+
+### Bug Fixes
+
+* **MySQL:** invalid JavaScript datetime values not shown ([dcccb54](https://github.com/Fabio286/antares/commit/dcccb544f9ec24ad693c9e81fb4bcfbdbb7cc4e1))
+* approximate row count shown for results less than 1000 ([a6b75ad](https://github.com/Fabio286/antares/commit/a6b75ad0dc0d884332464c277e8542b2698630b9))
+* field apparently loses index or foreign key on rename in table editor ([7d2ace9](https://github.com/Fabio286/antares/commit/7d2ace94562f8da307b15b83c89d919727d800c8))
+
+
+### Improvements
+
+* **MySQL:** improved the way to get routine and functions parameters ([90fd9db](https://github.com/Fabio286/antares/commit/90fd9db917c40262f2bc2501ab86f5feba3d8db4))
+* **UI:** improved table fields suggestion in query editor ([c22187c](https://github.com/Fabio286/antares/commit/c22187c3053aef368a351cc35e2f1d407ecde209))
+
+### [0.1.2](https://github.com/Fabio286/antares/compare/v0.1.1...v0.1.2) (2021-04-11)
+
+
+### Features
+
+* in-app last release changelog ([1e938ad](https://github.com/Fabio286/antares/commit/1e938adc5d8eb5ad16ab16342375eecd88f68d20))
+* **PostgreSQL:** edit timezone in cell editor ([8735a0c](https://github.com/Fabio286/antares/commit/8735a0c5f9e5b6b3bcaadf37ce158aa7beae2c48))
+* **PostgreSQL:** procedures management ([3dde1c1](https://github.com/Fabio286/antares/commit/3dde1c109e23342d94362626ef7350dc123ea859))
+* **PostgreSQL:** support of arrays in table settings ([d0b3e1b](https://github.com/Fabio286/antares/commit/d0b3e1b1b8be9d2c038d70e16d4478671315de8f))
+
+
+### Bug Fixes
+
+* cell edit doesn't properly use primary or unique index to update if both present, closes [#51](https://github.com/Fabio286/antares/issues/51) ([55932fe](https://github.com/Fabio286/antares/commit/55932fe11583bd5ff48f82b8408965adba4f5071))
+* deletion of rows from query results ([c20bff7](https://github.com/Fabio286/antares/commit/c20bff7bcbe340ac99ebcacaba3359edd61c068a))
+* no foreign key select when cell value is NULL, closes [#50](https://github.com/Fabio286/antares/issues/50) ([9f5ec02](https://github.com/Fabio286/antares/commit/9f5ec0276c92904975fdaea34b4c845c92bfe8d4))
+* wrong datetime conversion when updating a row without an unique key ([d374372](https://github.com/Fabio286/antares/commit/d374372e208318d7e50b258a8041145bdf7992c5))
+* **PostgreSQL:** issue with selected schema different than public ([49a4e1c](https://github.com/Fabio286/antares/commit/49a4e1cb7b24642641265d5830d3fee370cceeb4))
+* **UI:** white readonly inputs with dark theme ([bb5f446](https://github.com/Fabio286/antares/commit/bb5f44681f87aacf2cd2f60a6d958c5732289790))
+
+
+### Improvements
+
+* **UI:** improved setting modal rendering ([be816e8](https://github.com/Fabio286/antares/commit/be816e85888b4f3d26cbb9caac0adbc4dde0ea94))
+
+### [0.1.1](https://github.com/Fabio286/antares/compare/v0.1.0...v0.1.1) (2021-04-03)
+
+
+### Features
+
+* scratchpad to save persistent notes ([e349dd5](https://github.com/Fabio286/antares/commit/e349dd5eaba608591257f2799b830805e4936c27))
+* **PostgreSQL:** foreign keys management ([fe4c8e1](https://github.com/Fabio286/antares/commit/fe4c8e12b39dd3cdfc233f07e3fe2ff0676252b0))
+* **PostgreSQL:** indexes management ([9ca03f4](https://github.com/Fabio286/antares/commit/9ca03f462560b634970a19d3d97b878d60509acc))
+* **PostgreSQL:** table fields edit ([e3f259c](https://github.com/Fabio286/antares/commit/e3f259c6e8327d71bd7dd0a9c33d957dc6ca1fb8))
+* **PostgreSQL:** tables addition ([feef5e3](https://github.com/Fabio286/antares/commit/feef5e30eec915cbb219223cc428bd4e98d2e9c5))
+* **PostgreSQL:** unique keys management ([614e0d3](https://github.com/Fabio286/antares/commit/614e0d32758c13b59139d349d4682a5bafc3ca88))
+* **PostgreSQL:** views management ([99f7511](https://github.com/Fabio286/antares/commit/99f7511c4d5fab4030b30d5134cd03248167faea))
+* **UI:** light theme ([2806976](https://github.com/Fabio286/antares/commit/280697698ea5fae6d54326970c823878888c196c))
+
+
+### Bug Fixes
+
+* **UI:** editor theme preview not properly loaded in some cases ([c981244](https://github.com/Fabio286/antares/commit/c981244d7aa93ca18ca2de44bf8df06f253b9d20))
+* fields of ref. table not automatically loaded in foreign keys modal ([e7401cc](https://github.com/Fabio286/antares/commit/e7401cc96e76e00100a88eea9f40541fd8027adb))
+* hide update tab for Windows Store distributions ([dcb135d](https://github.com/Fabio286/antares/commit/dcb135dd015b8f8c6cfb44021211bb8cf3089192))
+
+## [0.1.0](https://github.com/Fabio286/antares/compare/v0.0.20...v0.1.0) (2021-03-21)
+
+
+### Features
+
+* **PostgreSQL:** database in connection parameters ([9645702](https://github.com/Fabio286/antares/commit/964570247ff5b7b8317419730eec5bed4f0f0580))
+* **PostgreSQL:** edit array and text search fields ([fc65114](https://github.com/Fabio286/antares/commit/fc651149b95399c52d2d63e946731e9c1b0303a9))
+* **PostgreSQL:** insert and edit blob fields ([1f80a64](https://github.com/Fabio286/antares/commit/1f80a64fe1400baacca26f1a762c5aeb4ef6350d))
+* **PostgreSQL:** partial postgre implementation ([d892fa6](https://github.com/Fabio286/antares/commit/d892fa6fb3e86fbb96887d8eb67319ae855260a1))
+* **PostgreSQL:** support to microseconds ([d465e18](https://github.com/Fabio286/antares/commit/d465e18dba8ea3aa00726e33f9b1f70ca4c0683c))
+* **UI:** support to boolean fields ([ffb1712](https://github.com/Fabio286/antares/commit/ffb1712a593d1421793011e48a17369b884ea3c0))
+
+
+### Bug Fixes
+
+* update or delete rows with more than one primary key ([22a8c25](https://github.com/Fabio286/antares/commit/22a8c25717a4d4b285855426098a3a2846ce7448))
+* **MySQL:** handle NEWDECIMAL data type ([a1c6be3](https://github.com/Fabio286/antares/commit/a1c6be372b570cf13e89ef7ecf9b7a7c033a9293))
+* **PostgreSQL:** issue getting foreign keys informations ([db47b40](https://github.com/Fabio286/antares/commit/db47b4040a5282a6ac0711b1926c4c2ac867999e))
+* remove last char from datetime and time if is a dot ([e89911b](https://github.com/Fabio286/antares/commit/e89911b1851c19813d4acf2c79adfbc2ac7c1112))
+* **PostgreSQL:** single quote escape ([9f6a183](https://github.com/Fabio286/antares/commit/9f6a183d9b293dfe9ad9f3759f2375f05f37db8e))
+* **PostgreSQL:** various issues in query results ([fccfe92](https://github.com/Fabio286/antares/commit/fccfe92453325cd54c0331cc5670af0a56822c5b))
+* schema content not loaded if selected with right click ([8a6c59f](https://github.com/Fabio286/antares/commit/8a6c59f7ce7d051315b04cea38a96e4739b5b9d3))
+
+### [0.0.20](https://github.com/Fabio286/antares/compare/v0.0.19...v0.0.20) (2021-03-13)
+
+
+### Features
+
+* **UI:** loader layers on query and data tabs ([b232a3b](https://github.com/Fabio286/antares/commit/b232a3bb5ff7e38c83aa33e8b96ec7202bc4881e))
+* **UI:** row markers in sql editors ([ddfb713](https://github.com/Fabio286/antares/commit/ddfb7131248a47fa2055ccfb72e223986a17f986))
+
+
+### Bug Fixes
+
+* **UI:** avoid unnecessary updates when cell content not change ([e9a26c1](https://github.com/Fabio286/antares/commit/e9a26c1bc0641b7087d8143cc948405850d7552f))
+* **UI:** row mark not applied on first click ([25d72e3](https://github.com/Fabio286/antares/commit/25d72e39529884c09cf1286ff64ba00c8a5c7b24))
+* **UI:** table rows lose internal id after an update ([76c5c0c](https://github.com/Fabio286/antares/commit/76c5c0c680521b4a20de1f12bab25314ac084d5c))
+
+### [0.0.19](https://github.com/Fabio286/antares/compare/v0.0.18...v0.0.19) (2021-03-05)
+
+
+### Features
+
+* **UI:** modal that shows process query ([07f60c3](https://github.com/Fabio286/antares/commit/07f60c39173e9db452909d74573c3aecf4b6466b))
+* processes list tool ([049143d](https://github.com/Fabio286/antares/commit/049143d143d8187bfcb6377f2bf374c471c28046))
+* **MySQL:** support to new mysql8 authentication, closes [#45](https://github.com/Fabio286/antares/issues/45) ([db44306](https://github.com/Fabio286/antares/commit/db4430609e22816f4a3a8ecdbf61e9b51cde2579))
+* context menu shortcut to set NULL a table cell ([71b4310](https://github.com/Fabio286/antares/commit/71b43101172c27d810d533c936534bcf089dbca2))
+* **UI:** esc key to cancel cell edit ([45351fa](https://github.com/Fabio286/antares/commit/45351faeaea6ad4af8280da6c0ec1b4ded0f86fe))
+* setting to enable beta updates (future use) ([b1ea32b](https://github.com/Fabio286/antares/commit/b1ea32b68024593481120e2ef67642e127554888))
+* **UI:** query duration calc ([777b73f](https://github.com/Fabio286/antares/commit/777b73fa6f9d6f7806e0d3d07589dfaee0c40786))
+
+
+### Bug Fixes
+
+* **MySQL:** wrong TIMESTAMP fields length ([201fad9](https://github.com/Fabio286/antares/commit/201fad9265e01e19ae4c8dc16bff84ee9dc9c894))
+* **UI:** modal processes list does not regain size on window resize ([5d7efa7](https://github.com/Fabio286/antares/commit/5d7efa75b76f59b85654603b4df8035a36af0576))
+* **UI:** wrong height in scrolling tables in some cases ([4862d51](https://github.com/Fabio286/antares/commit/4862d51fba863e055ca6735586b0abe4894037eb))
+
+
+### Improvements
+
+* **UI:** big performance improvement in tables rendering ([39ca197](https://github.com/Fabio286/antares/commit/39ca1974bcea84c9047779893ed3f458300474e3))
+* **UI:** improvements of date time inputs ([b4ead69](https://github.com/Fabio286/antares/commit/b4ead6992c8ddc172380a97e7aa125e0dd078f1e))
+
+### [0.0.18](https://github.com/Fabio286/antares/compare/v0.0.17...v0.0.18) (2021-02-25)
+
+
+### Features
+
+* **UI:** context menu for input and textarea tags ([b54fefb](https://github.com/Fabio286/antares/commit/b54fefbf255c91f3cdd0c52b917b239ea40dae16))
+* **UI:** html, xml, json, svg and yaml editor modes in long text fields edit ([9a1bf32](https://github.com/Fabio286/antares/commit/9a1bf3212850d3783ac6382f8a980eb25c4f4226))
+* **UI:** run procedures/functions from sidebar context menu ([219da0a](https://github.com/Fabio286/antares/commit/219da0aba46839295807a01056199d42584e0af9))
+* **UI:** run routines/functions from settings tab ([7e81671](https://github.com/Fabio286/antares/commit/7e8167154ffd64e46d78a50cd13cf90cee61370c))
+* **UI:** search filter in explore bar ([2f58007](https://github.com/Fabio286/antares/commit/2f58007af4f32207fe4be9fc15bb43916e8e0abc))
+* **UI:** sticky schema names in explore bar ([110b0b4](https://github.com/Fabio286/antares/commit/110b0b414cef25395ae28493032c2048307e4783))
+
+
+### Bug Fixes
+
+* **MySQL:** issue obtaining routine/function parameters ([3aa2159](https://github.com/Fabio286/antares/commit/3aa2159a1ae3b6785646fc7ac1e866cb0277d087))
+* issue managing function/routine parameters ([76d92cd](https://github.com/Fabio286/antares/commit/76d92cd106b0409e8752c43d7d587d09dd3e1e32))
+* **UI:** data tab opened when non-table element is selected ([dbab06f](https://github.com/Fabio286/antares/commit/dbab06fcb80ccdae85215ceae9ba24af3e7ff263))
+* **UI:** elements from previous selected schemas in query suggestions ([c8545a2](https://github.com/Fabio286/antares/commit/c8545a250bc696c339e418a69a2942d5bac10cbf))
+* disabled sort for fields without a name property ([3b37b74](https://github.com/Fabio286/antares/commit/3b37b7432e969e6315ebd6ed74905ec3980a049c))
+* prevents F5 shortcut to run in non-selected workspaces ([7c4ca99](https://github.com/Fabio286/antares/commit/7c4ca999ce64af8077d29e419f430d5beaaead93))
+* support of bit fields in table filler ([94c4952](https://github.com/Fabio286/antares/commit/94c49523197284510361ebbb6984816a3bb1b243))
+
+### [0.0.17](https://github.com/Fabio286/antares/compare/v0.0.16...v0.0.17) (2021-02-17)
+
+
+### Features
+
+* Added french language ([18a93ef](https://github.com/Fabio286/antares/commit/18a93ef1aae530e69c9062bbeb08a3beec206eda))
+* fake table data generator ([a176174](https://github.com/Fabio286/antares/commit/a176174b8d7dc232920f4cd7c5e3f8e4c58d51a0))
+* min and max option for random floats and numbers ([6c62052](https://github.com/Fabio286/antares/commit/6c62052b4764731c774fef90784342447b36deb7))
+* support to fake data locales ([970de49](https://github.com/Fabio286/antares/commit/970de4962b3bffec271bfa6d4747e6fb9d408ba6))
+
+
+### Bug Fixes
+
+* **UI:** file uploader in table filler ([b5a8283](https://github.com/Fabio286/antares/commit/b5a828309f067636eae2120032f07e01233706e2))
+* **UI:** no foreign key select editing query results ([5b21d17](https://github.com/Fabio286/antares/commit/5b21d17f3a8f2482c3aafe85f26c34cd3c0a1fcf))
+* cut faker text based on field length ([288ff4c](https://github.com/Fabio286/antares/commit/288ff4c1a1c77f4b8b86b24649d805836366fdd3))
+* wrong date or time detection in field default ([9d5ebef](https://github.com/Fabio286/antares/commit/9d5ebefdced999af595f3d8dc2fac2b18fa8258b))
+* **UI:** better text on ssl file selectors ([9a19085](https://github.com/Fabio286/antares/commit/9a190854fe3c73ed4e7f89545ff259e15ee9f947))
+* **UI:** wrong length for char fields on table header ([0f69d1d](https://github.com/Fabio286/antares/commit/0f69d1dbb7958e45059b6b738c845abea1ad3225))
+
+
+### Improvements
+
+* **core:** bulk inserts support ([b0576ac](https://github.com/Fabio286/antares/commit/b0576acdf65d41c1c8e0b0bca6cf6522dcb372be))
+
+### [0.0.16](https://github.com/Fabio286/antares/compare/v0.0.15...v0.0.16) (2021-02-06)
+
+
+### Features
+
+* MySQL and MariaDB auto detection ([02c03e3](https://github.com/Fabio286/antares/commit/02c03e3d266052872ac8edeb159ec8182f41c6a5))
+* **UI:** enanched file upload input ([a0d8552](https://github.com/Fabio286/antares/commit/a0d85520fb0669d5eec4475f5e255adb1e2a0159))
+* support to ssl connections ([4e72bb1](https://github.com/Fabio286/antares/commit/4e72bb15874324214aa0f5b89057cdd565744468))
+* **UI:** database version in app footer ([15417e8](https://github.com/Fabio286/antares/commit/15417e8a776c6aa9f90762d198d70b26163bb2df))
+* **UI:** resize query editor area ([88ab7c5](https://github.com/Fabio286/antares/commit/88ab7c5a62654c6a6026b63464224226d33b1950))
+* delete rows from tables without a primary key ([574d493](https://github.com/Fabio286/antares/commit/574d4939083577ffcb8e7c65f572c364eb8415fb))
+* edit rows from tables without a primary key ([5940b0b](https://github.com/Fabio286/antares/commit/5940b0b84207093da141b5c617c41e0a18fcb1d7))
+
+
+### Bug Fixes
+
+* compatibility with electron-store 7 ([bacf458](https://github.com/Fabio286/antares/commit/bacf45893676cb0744907703f6534ffd472bd1dd))
+* edit bit fields ([ede6fe8](https://github.com/Fabio286/antares/commit/ede6fe81cefc91cdce2bbb0cd7cd6f85bbca99b8))
+
+### [0.0.15](https://github.com/Fabio286/antares/compare/v0.0.14...v0.0.15) (2021-01-23)
+
+
+### Features
+
+* functions and schedulers in query suggestions ([8ff6e70](https://github.com/Fabio286/antares/commit/8ff6e70145ed2a207ae8b23a2c688258382a5d74))
+* loading animation in properties tabs ([1cf6485](https://github.com/Fabio286/antares/commit/1cf64858964f4894913db42f7c268013bb06e40b))
+
+
+### Bug Fixes
+
+* error retriving dato of some schedulers ([b9ed8dd](https://github.com/Fabio286/antares/commit/b9ed8dd610e3be1489e01cf53f7d632cb1bd6ac5))
+* unable to call stored routines from query tabs ([4923128](https://github.com/Fabio286/antares/commit/4923128236131482ca948ae8052c294bd9269ed0))
+
+
+### Improvements
+
+* better fields type detection ([4bc9bbf](https://github.com/Fabio286/antares/commit/4bc9bbfb34ebdc51061f718cdf9cbca8507fa0f4))
+* big performance improvement in database structure loading ([a11bac5](https://github.com/Fabio286/antares/commit/a11bac504cd4ee865ea6c614a15ee809dc38202e))
+
+### [0.0.14](https://github.com/Fabio286/antares/compare/v0.0.13...v0.0.14) (2021-01-16)
+
+
+### Features
+
+* export data tables to json or csv file ([0cbea9d](https://github.com/Fabio286/antares/commit/0cbea9d1007304a5b9cf893d165b4b4104266651))
+* functions creation ([49d7172](https://github.com/Fabio286/antares/commit/49d71722e26172232f7b54c6568e1e588ce0d049))
+* functions delete ([59a50bc](https://github.com/Fabio286/antares/commit/59a50bc014facc9643f9153cff61dc9d5a8605a9))
+* functions edit ([41d75b1](https://github.com/Fabio286/antares/commit/41d75b127cbcf1481fd259a14e6e7688638e18a4))
+* scheduler edit ([ceab4ef](https://github.com/Fabio286/antares/commit/ceab4ef243881ba64517fb95320844a21fce4849))
+* schedulers creation ([dbe7b9d](https://github.com/Fabio286/antares/commit/dbe7b9dd239248e806377ae6236b477456f175a3))
+* schedulers delete ([1e7d4ca](https://github.com/Fabio286/antares/commit/1e7d4ca347f4b9337ff266ec78bb4bbc6dd20d4d))
+* triggers and stored routines in sql suggestions ([e351c90](https://github.com/Fabio286/antares/commit/e351c903a8a8d7e908d6a7d54c0491438ac6f024))
+
+
+### Bug Fixes
+
+* error with empty functions/procedures ([f150508](https://github.com/Fabio286/antares/commit/f1505085477a760a768a7d245c9517a858c1379c))
+* removed internal row _id from exported files ([c0a32c0](https://github.com/Fabio286/antares/commit/c0a32c040e653729ef80d580d6dd1796d1b2adcd))
+
+### [0.0.13](https://github.com/Fabio286/antares/compare/v0.0.12...v0.0.13) (2021-01-06)
+
+
+### Features
+
+* option to toggle line wrap mode ([d94b49f](https://github.com/Fabio286/antares/commit/d94b49febf54b0200127859f2a8ed7ef591e56ab))
+* select definer in view creation/edit ([ab307f8](https://github.com/Fabio286/antares/commit/ab307f82b1d78c5f9571233090b6678a964bd674))
+* stored routines creation ([3bcd02f](https://github.com/Fabio286/antares/commit/3bcd02fc4ea9a4b780305212f906d6d78c7a8dae))
+* stored routines delete ([aa33850](https://github.com/Fabio286/antares/commit/aa3385028685417860b3ce985cc7a74f9da377ad))
+* stored routines edit ([82fdc0b](https://github.com/Fabio286/antares/commit/82fdc0bcd7514b321c1c9852a773adacf81baf87))
+* triggers creation ([d695c9f](https://github.com/Fabio286/antares/commit/d695c9f8d2418a6a4523a7a242fa1a8cba80e035))
+* triggers delete ([b32132a](https://github.com/Fabio286/antares/commit/b32132ad84d5798555b80eec3c624b681c37c339))
+* triggers edit ([3126625](https://github.com/Fabio286/antares/commit/3126625461f4b6d68d641b6b0eda8fcd390bb636))
+* views creation ([8c4aaec](https://github.com/Fabio286/antares/commit/8c4aaec167f58333a343b52927205b68137ad408))
+* views deletion ([dcf469e](https://github.com/Fabio286/antares/commit/dcf469ebed6252b4a496800206e0c34cd83b1f5e))
+* views edit ([56f2a27](https://github.com/Fabio286/antares/commit/56f2a27f0059cc10316204210db078a97408973c))
+
+
+### Bug Fixes
+
+* breadcrumb not change after table rename ([b6b7be0](https://github.com/Fabio286/antares/commit/b6b7be098ad5ab4d55bfe05a7f862f045c1f54da))
+* unable to rename views ([b7053bd](https://github.com/Fabio286/antares/commit/b7053bdf8036d027e1685d6b5080d6b927a80e08))
+* wrong new stored routine modal icon ([0ec2710](https://github.com/Fabio286/antares/commit/0ec2710872c692b3feac076a3250d3b760af4009))
+* wrong or duplicate fields in some queries ([0df2b83](https://github.com/Fabio286/antares/commit/0df2b836b15436a2397d6a2202bd049b5cd53de4))
+
+### [0.0.12](https://github.com/Fabio286/antares/compare/v0.0.11...v0.0.12) (2020-12-24)
+
+
+### Features
+
+* better security connections credentials storage ([fc35f27](https://github.com/Fabio286/antares/commit/fc35f271d7fe384cd786ce33547c0ef17135ddd8))
+* option to change editor theme ([a95b8d1](https://github.com/Fabio286/antares/commit/a95b8d188cfcc8f563ad73b4f0b676d068775d36))
+* option to toggle editor auto completion ([155154b](https://github.com/Fabio286/antares/commit/155154b43d0cd02ae875ded3ce865a37a999da5c))
+* query editor auto-completer for tables and columns ([cb1fce6](https://github.com/Fabio286/antares/commit/cb1fce6f998ea7332886820910e245ab19416a9d))
+
+### [0.0.11](https://github.com/Fabio286/antares/compare/v0.0.10...v0.0.11) (2020-12-15)
+
+
+### Features
+
+* 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,29 +1,102 @@
 <p align="center">
-    <img width="800" src="https://raw.githubusercontent.com/Fabio286/antares/master/docs/screen-alpha.png">
+    <img width="800" src="https://raw.githubusercontent.com/Fabio286/antares/master/docs/gh-logo.png">
 </p>
 
 # Antares SQL Client
 
-Antares is an SQL client based on Electron.js and Vue.js that aims to become a useful tool, especially for developers.  
+![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Ffabio286%2Fantares%2Fbadge&style=flat)](https://actions-badge.atrox.dev/fabio286/antares/goto) ![GitHub All Releases](https://img.shields.io/github/downloads/fabio286/antares/total) ![GitHub](https://img.shields.io/github/license/fabio286/antares) [![antares](https://snapcraft.io/antares/badge.svg)](https://snapcraft.io/antares) [![antares](https://snapcraft.io/antares/trending.svg?name=0)](https://snapcraft.io/antares) [![Twitter Follow](https://img.shields.io/twitter/follow/AntaresSQL?style=social)](https://twitter.com/AntaresSQL) [![Plant a Tree](https://raw.githubusercontent.com/Fabio286/treedom-badge/master/svg/plant-a-tree.svg)](https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet)
+
+Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers.  
 My target is to support as many databases as possible, and all major operating systems, including the ARM versions.  
 
-At the moment this application is in a development state, it lacks many features, and is'nt ready as a main SQL client. However i'm actively working on it, hoping to provide all all minimum features as soon as possible.
+**At the moment this application is in development state, many features will come in future updates**, and supports only MySQL/MariaDB and PostgreSQL (partially).  
+Many of its current features are enough to have a pleasant user experience with MySQL/MariaDB, and basic functionalites with PostgreSQL, so give it a chance and send me your feedback, I would really appreciate it.  
+I'm actively working on it, 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/EStarium/antares/releases), and stay tuned for updates. At moment is only available for Windows.
+🔗 If you are curious to try Antares you can download and install the [latest release](https://github.com/Fabio286/antares/releases/latest).  
+👁 To stay tuned for new releases [follow Antares SQL](https://twitter.com/AntaresSQL) on Twitter.  
+🌟 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.  
+A modern application created with minimalism and semplicity in mind, with features in the right places, not hundreds of tiny buttons, tabs or submenu.  
+
+## Download
+
+[![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-black.svg)](https://snapcraft.io/antares) [![Get it from AUR](https://raw.githubusercontent.com/Fabio286/antares/3e00c4bae6e036300c752c1a40c5a038fea9c169/docs/aur-badge.svg)](https://aur.archlinux.org/packages/antares-sql/) [![Get it from Microsoft Store](https://raw.githubusercontent.com/Fabio286/antares/gh-pages/src/assets/ms-store.png)](https://www.microsoft.com/p/antares-sql-client/9nhtb9sq51r1?cid=storebadge&ocid=badge&rtc=1&activetab=pivot:overviewtab)  
+🚀 **[Other Downloads](https://github.com/Fabio286/antares/releases/latest)**
+
+## How to contribute
+
+- 🌍 [Translate Antares](https://github.com/Fabio286/antares/wiki/Translate-Antares)
+- 📖 [Contributors Guide](https://github.com/Fabio286/antares/wiki/Contributors-Guide)
+- 🚧 [Project Board](https://github.com/users/Fabio286/projects/1)
+
+## Current main features
+
+- Multiple database connections at same time.
+- Database management (add/edit/delete).
+- Full tables management, including indexes and foreign keys.
+- Views, triggers, stored routines, functions and schedulers management (add/edit/delete).
+- Fake table data filler.
+- Run queries on multiple tabs.
+- Query suggestions and auto complete.
+- Dark and light theme.
+- Scratchpad.
+- Multi language.
+- Secure password storage.
+
+## Coming soon
+
+This is a roadmap with major features will come in near future.
+
+- Support for other databases.
+- Database tools.
+- SSH tunnel support.
+- Users management (add/edit/delete).
+- UI/UX improvements.
+- Query history.
+- More context menu shortcuts.
+- More keyboard shortcuts.
+- Query logs console.
+- Import/export and migration.
 
 ## Currently supported
 
 ### Databases
 
 - [x] MySQL/MariaDB
-- [ ] PostrgreSQL
-- [ ] MSSQL
+- [x] PostgreSQL (partially, work in progress)
 - [ ] SQLite
+- [ ] MSSQL
 - [ ] OracleDB
 - [ ] More...
 
 ### Operating Systems
 
+#### • x64
+
 - [x] Windows
-- [ ] Linux
+- [x] Linux
+- [x] MacOS (not tested due lack of hardware)
+
+#### • ARM
+
+- [ ] Windows
+- [x] Linux
 - [ ] MacOS
+
+## Translations
+
+**Italian Translation** / [Giuseppe Gigliotti](https://github.com/ReverbOD) [[#20](https://github.com/Fabio286/antares/pull/20)]  
+**Arabic Translation** / [Mohd-PH](https://github.com/Mohd-PH) [[#29](https://github.com/Fabio286/antares/pull/29)]  
+**Spanish Translation** / [hongkfui](https://github.com/hongkfui) [[#32](https://github.com/Fabio286/antares/pull/32)]  
+**French Translation** / [MrAnyx](https://github.com/MrAnyx) [[#44](https://github.com/Fabio286/antares/pull/44)]  
+**Portugues (Brasil)** / [Daniel Eduardo](https://github.com/daeleduardo) [[#54](https://github.com/Fabio286/antares/pull/54)]  
+**Deutsch (Deutschland)** / [Christian Ratz](https://github.com/digitalgopnik) [[#74](https://github.com/Fabio286/antares/pull/74)]
+
+## Reviews
+
+<a target="_blank" href="https://www.softx64.com/windows/antares-sql-client.html" title="Antares SQL Client review"><img src="https://www.softx64.com/softx64-review.png" alt="Antares SQL Client review" /></a>

docs/aur-badge.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+   style="isolation:isolate" viewBox="0 0 182 56" width="182px" height="56px">
+   <defs>
+      <clipPath id="_clipPath_tR1uglJ1Zei76xP861DY1TsjAiQWS9qF">
+         <rect width="182" height="56" />
+      </clipPath>
+   </defs>
+   <g clip-path="url(#_clipPath_tR1uglJ1Zei76xP861DY1TsjAiQWS9qF)">
+      <path
+         d="M 2.5 0.5 L 180.5 0.5 C 181.604 0.5 182.5 1.396 182.5 2.5 L 182.5 54.5 C 182.5 55.604 181.604 56.5 180.5 56.5 L 2.5 56.5 C 1.396 56.5 0.5 55.604 0.5 54.5 L 0.5 2.5 C 0.5 1.396 1.396 0.5 2.5 0.5 Z"
+         style="stroke:none;fill:#252525;stroke-miterlimit:10;" />
+      <path
+         d="M 2.5 0.5 L 180.5 0.5 C 181.604 0.5 182.5 1.396 182.5 2.5 L 182.5 54.5 C 182.5 55.604 181.604 56.5 180.5 56.5 L 2.5 56.5 C 1.396 56.5 0.5 55.604 0.5 54.5 L 0.5 2.5 C 0.5 1.396 1.396 0.5 2.5 0.5 Z"
+         style="fill:none;stroke:#CDCDCD;stroke-width:1;stroke-miterlimit:2;" />
+      <g>
+         <g>
+            <path
+               d=" M 60.898 13.777 C 58.555 13.774 56.61 14.254 55.858 14.516 L 55.083 18.697 C 55.081 18.712 58.937 17.669 60.635 17.73 C 63.447 17.831 63.706 18.805 63.656 20.119 C 63.704 20.196 62.931 18.931 60.498 18.889 C 57.43 18.836 53.098 19.976 53.104 24.608 C 53.022 29.818 56.997 31.351 59.704 31.379 C 62.138 31.335 63.279 30.458 63.904 29.988 C 64.726 29.129 65.665 28.265 66.561 27.229 C 65.714 28.77 64.978 29.835 64.213 30.651 L 64.213 31.339 L 67.913 30.716 L 67.938 20.66 C 67.901 19.237 68.754 13.791 60.898 13.777 Z  M 60.367 22.533 C 61.9 22.554 63.659 23.31 63.662 25.129 C 63.669 26.784 61.589 27.674 60.235 27.66 C 58.881 27.646 57.085 26.596 57.077 24.982 C 57.103 23.54 58.771 22.496 60.367 22.533 Z "
+               fill-rule="evenodd" fill="rgb(255,255,255)" />
+            <path
+               d=" M 70.378 14.707 L 70.352 31.36 L 74.662 30.529 L 74.67 21.087 C 74.671 19.681 76.679 18.039 79.198 18.065 C 79.733 17.097 80.738 14.625 80.983 14.062 C 75.354 14.049 75.282 15.68 74.303 16.483 C 74.293 14.952 74.3 14.033 74.3 14.033 L 70.378 14.707 L 70.378 14.707 Z "
+               fill-rule="evenodd" fill="rgb(255,255,255)" />
+            <path
+               d=" M 94.632 16.893 C 94.591 16.873 92.385 14.312 87.949 14.292 C 83.795 14.223 79.135 15.834 79.061 22.8 C 79.097 28.925 83.537 31.318 87.973 31.365 C 92.72 31.414 94.609 28.396 94.722 28.322 C 94.156 27.83 92.034 25.728 92.034 25.728 C 92.034 25.728 90.709 27.615 88.138 27.639 C 85.566 27.664 83.331 25.651 83.299 22.844 C 83.266 20.036 85.354 18.515 88.157 18.392 C 90.584 18.392 91.984 19.959 91.984 19.959 L 94.632 16.893 L 94.632 16.893 Z "
+               fill-rule="evenodd" fill="rgb(255,255,255)" />
+            <path
+               d=" M 100.065 8.879 L 95.996 9.835 L 96.026 31.526 L 100.034 30.802 L 100.08 20.595 C 100.089 19.524 101.628 17.88 104.2 17.933 C 106.658 17.958 107.207 19.571 107.201 19.775 L 107.272 31.592 L 111.224 30.894 L 111.239 18.363 C 111.265 17.157 108.598 14.61 104.311 14.592 C 102.273 14.596 101.145 15.057 100.571 15.397 C 99.588 16.156 98.466 16.883 97.362 17.811 C 98.382 16.501 99.239 15.595 100.075 14.921 L 100.065 8.879 L 100.065 8.879 Z "
+               fill-rule="evenodd" fill="rgb(255,255,255)" />
+         </g>
+         <g>
+            <path
+               d=" M 114.673 9.441 L 116.508 8.982 L 116.595 30.85 L 114.73 31.168 L 114.673 9.441 L 114.673 9.441 Z "
+               fill-rule="evenodd" fill="rgb(23,147,209)" />
+            <path
+               d=" M 119.663 15.968 L 121.271 15.252 L 121.285 30.932 L 119.731 31.253 L 119.663 15.968 L 119.663 15.968 Z  M 119.28 10.314 L 120.577 9.255 L 121.655 10.454 L 120.357 11.54 L 119.28 10.314 L 119.28 10.314 Z "
+               fill-rule="evenodd" fill="rgb(23,147,209)" />
+            <path
+               d=" M 124.296 15.682 L 126.131 15.308 L 126.14 18.586 C 126.14 18.727 127.148 14.924 132.008 15.009 C 136.727 15.035 137.499 18.688 137.473 19.507 L 137.531 31.034 L 135.922 31.384 L 135.913 19.998 C 135.932 19.665 135.178 16.853 131.843 16.843 C 128.509 16.833 126.199 19.265 126.203 20.818 L 126.229 30.848 L 124.365 31.335 L 124.296 15.682 L 124.296 15.682 Z "
+               fill-rule="evenodd" fill="rgb(23,147,209)" />
+            <path
+               d=" M 153.547 31.117 L 151.711 31.492 L 151.703 28.214 C 151.703 28.073 150.694 31.876 145.835 31.791 C 141.116 31.765 140.344 28.112 140.37 27.293 L 140.311 15.765 L 142.261 15.372 L 142.292 26.758 C 142.292 27.069 142.665 29.947 145.999 29.957 C 149.334 29.967 151.669 27.949 151.686 24.911 L 151.662 15.928 L 153.477 15.464 L 153.547 31.117 L 153.547 31.117 Z "
+               fill-rule="evenodd" fill="rgb(23,147,209)" />
+            <path
+               d=" M 157.144 15.553 L 155.857 16.56 L 160.792 23.018 L 155.529 30.478 L 156.894 31.492 L 161.841 24.563 L 166.948 31.656 L 168.211 30.649 L 162.738 23.065 L 167.104 16.933 L 165.762 15.797 L 161.785 21.472 L 157.144 15.553 L 157.144 15.553 Z "
+               fill-rule="evenodd" fill="rgb(23,147,209)" />
+         </g>
+         <path
+            d=" M 33.112 3.879 C 30.965 9.143 29.67 12.587 27.279 17.695 C 28.745 19.248 30.544 21.058 33.466 23.101 C 30.325 21.809 28.182 20.511 26.581 19.164 C 23.521 25.549 18.728 34.643 9 52.121 C 16.645 47.707 22.572 44.986 28.095 43.948 C 27.858 42.928 27.723 41.824 27.733 40.673 L 27.742 40.428 C 27.863 35.53 30.411 31.763 33.43 32.019 C 36.448 32.274 38.794 36.455 38.673 41.353 C 38.65 42.275 38.546 43.162 38.364 43.984 C 43.828 45.053 49.691 47.767 57.233 52.121 C 55.746 49.383 54.419 46.915 53.151 44.565 C 51.154 43.017 49.072 41.003 44.823 38.822 C 47.743 39.581 49.834 40.456 51.464 41.435 C 38.575 17.439 37.532 14.251 33.112 3.879 Z "
+            fill-rule="evenodd" fill="rgb(23,147,209)" />
+         <g>
+            <path
+               d=" M 170.614 30.156 L 170.614 28.802 L 170.109 28.802 L 170.109 28.621 L 171.325 28.621 L 171.325 28.802 L 170.817 28.802 L 170.817 30.156 L 170.614 30.156 Z "
+               fill="rgb(23,147,209)" />
+            <path
+               d=" M 171.536 30.156 L 171.536 28.621 L 171.842 28.621 L 172.205 29.708 C 172.238 29.809 172.263 29.884 172.278 29.935 C 172.295 29.879 172.323 29.797 172.36 29.689 L 172.727 28.621 L 173 28.621 L 173 30.156 L 172.804 30.156 L 172.804 28.871 L 172.358 30.156 L 172.175 30.156 L 171.732 28.849 L 171.732 30.156 L 171.536 30.156 Z "
+               fill="rgb(23,147,209)" />
+         </g>
+         <g>
+            <path
+               d=" M 57.471 47.815 L 57.471 46.493 L 56.977 46.493 L 56.977 46.316 L 58.166 46.316 L 58.166 46.493 L 57.67 46.493 L 57.67 47.815 L 57.471 47.815 Z "
+               fill="rgb(23,147,209)" />
+            <path
+               d=" M 58.372 47.815 L 58.372 46.316 L 58.671 46.316 L 59.026 47.377 C 59.059 47.476 59.083 47.55 59.098 47.599 C 59.115 47.545 59.141 47.465 59.177 47.359 L 59.536 46.316 L 59.803 46.316 L 59.803 47.815 L 59.612 47.815 L 59.612 46.56 L 59.176 47.815 L 58.997 47.815 L 58.564 46.539 L 58.564 47.815 L 58.372 47.815"
+               fill="rgb(23,147,209)" />
+         </g>
+      </g>
+      <g clip-path="url(#_clipPath_NvFIpNfWUS6M4fZAtfyVzggsKR3URDoi)"><text transform="matrix(1,0,0,1,87.023,43.899)"
+            style="font-family:'Open Sans';font-weight:700;font-size:11px;font-style:normal;fill:#ffffff;stroke:none;">user
+            repository</text></g>
+      <defs>
+         <clipPath id="_clipPath_NvFIpNfWUS6M4fZAtfyVzggsKR3URDoi">
+            <rect x="0" y="0" width="86" height="14.98" transform="matrix(1,0,0,1,87,32.142)" />
+         </clipPath>
+      </defs>
+   </g>
+</svg>

jsconfig.json

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

package.json

@@ -1,70 +1,134 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.0.2-alpha",
+  "version": "0.2.0",
   "description": "A cross-platform easy to use SQL client.",
   "license": "MIT",
-  "repository": "https://github.com/EStarium/antares.git",
+  "repository": "https://github.com/Fabio286/antares.git",
   "scripts": {
     "dev": "cross-env NODE_ENV=development electron-webpack dev",
     "compile": "electron-webpack",
-    "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": "electron-builder -p always"
+    "build": "cross-env NODE_ENV=production npm run compile",
+    "build:local": "npm run build && electron-builder",
+    "build:appx": "npm run build:local -- --win appx",
+    "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",
+    "postinstall": "electron-builder install-app-deps"
   },
   "author": "Fabio Di Stasio <fabio286@gmail.com>",
   "build": {
-    "appId": "com.estarium.antares",
+    "appId": "com.fabio286.antares",
     "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
-    "files": [
-      "static/*"
+    "win": {
+      "target": [
+        "nsis",
+        "portable"
       ]
     },
-  "electronWebpack": {
-    "whiteListedModules": [
-      "codemirror"
+    "mac": {
+      "target": {
+        "target": "default",
+        "arch": [
+          "x64"
+        ]
+      }
+    },
+    "linux": {
+      "target": [
+        {
+          "target": "deb",
+          "arch": "x64"
+        },
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "armv7l",
+            "arm64"
+          ]
+        }
       ],
+      "category": "Development"
+    },
+    "appImage": {
+      "license": "./LICENSE",
+      "category": "Development"
+    },
+    "portable": {
+      "artifactName": "${productName}-${version}-portable.exe"
+    },
+    "appx": {
+      "displayName": "Antares SQL Client",
+      "identityName": "62514FabioDiStasio.AntaresSQLClient",
+      "publisher": "CN=1A2729ED-865C-41D2-9038-39AE2A63AA52",
+      "applicationId": "FabioDiStasio.AntaresSQLClient"
+    },
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ]
+    }
+  },
+  "electronWebpack": {
     "renderer": {
       "webpackConfig": "webpack.config.js"
     }
   },
   "dependencies": {
-    "codemirror": "^5.56.0",
-    "electron-log": "^4.2.2",
-    "electron-updater": "^4.3.1",
-    "lodash": "^4.17.19",
-    "material-design-icons": "^3.0.1",
-    "moment": "^2.27.0",
-    "mssql": "^6.2.1",
-    "mysql": "^2.18.1",
-    "pg": "^8.3.0",
+    "@electron/remote": "^1.2.0",
+    "@mdi/font": "^5.9.55",
+    "ace-builds": "^1.4.12",
+    "electron-log": "^4.3.5",
+    "electron-store": "^8.0.0",
+    "electron-updater": "^4.3.9",
+    "faker": "^5.5.3",
+    "marked": "^2.1.1",
+    "moment": "^2.29.1",
+    "mysql2": "^2.2.5",
+    "pg": "^8.5.1",
+    "pgsql-ast-parser": "^7.2.1",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.9",
-    "vue-click-outside": "^1.1.0",
-    "vue-i18n": "^8.18.2",
-    "vue-the-mask": "^0.11.1",
-    "vuedraggable": "^2.24.0",
-    "vuex": "^3.5.1",
-    "vuex-persist": "^2.2.0"
+    "sql-formatter": "^4.0.2",
+    "v-mask": "^2.2.4",
+    "vue-i18n": "^8.24.4",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
+    "@babel/eslint-parser": "^7.14.5",
     "cross-env": "^7.0.2",
-    "electron": "^8.4.0",
-    "electron-builder": "^22.7.0",
-    "electron-devtools-installer": "^3.1.1",
+    "electron": "^13.1.2",
+    "electron-builder": "^22.11.7",
+    "electron-devtools-installer": "^3.2.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-vue": "^2.4.0",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint": "^7.29.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^9.0.2",
-    "vue": "^2.6.11",
-    "webpack": "^4.43.0"
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^7.11.1",
+    "sass": "^1.35.1",
+    "sass-loader": "^10.2.0",
+    "standard-version": "^9.3.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-scss": "^3.19.0",
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^4.46.0"
   }
 }

snap/snapcraft.yaml

@@ -0,0 +1,116 @@
+name: antares
+adopt-info: antares
+summary: Open source SQL client made to be simple and complete.
+description: |
+  Antares is an SQL client that aims to become an useful and complete tool, especially for developers.
+  The 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 and supports only MySQL and x86 architecture.
+  Most of its current features might be enough for MySQL management, so give it a chance and send us your feedback, we would really appreciate it.
+base: core18
+
+grade: stable
+confinement: strict
+
+architectures:
+  - build-on: amd64
+compression: lzo
+layout:
+  /etc/nsswitch.conf:
+    bind-file: $SNAP/etc/nsswitch.conf
+
+parts:
+  antares:
+    plugin: dump
+    source: .
+    override-build: |
+      snapcraftctl build
+      ARCHITECTURE=$(dpkg --print-architecture)
+      if [ "${ARCHITECTURE}" = "amd64" ]; then
+        FILTER="amd64.deb"
+      else
+        echo "ERROR! Antares only produces debs for amd64. Failing the build here."
+        exit 1
+      fi
+      # Get the latest releases json
+      echo "Get GitHub releases..."
+      wget --quiet https://api.github.com/repos/fabio286/antares/releases/latest -O releases.json
+      # Get the version from the tag_name and the download URL.
+      VERSION=$(jq . releases.json | grep tag_name | cut -d'"' -f4 | sed s'/release-//')
+      DEB_URL=$(cat releases.json | jq -r ".assets[] | select(.name | test(\"${FILTER}\")) | .browser_download_url")
+      DEB=$(basename "${DEB_URL}")
+      echo "Downloading ${DEB_URL}..."
+      wget --quiet "${DEB_URL}" -O "${SNAPCRAFT_PART_INSTALL}/${DEB}"
+      echo "Unpacking ${DEB}..."
+      dpkg -x "${SNAPCRAFT_PART_INSTALL}/${DEB}" ${SNAPCRAFT_PART_INSTALL}
+      rm -f releases.json 2>/dev/null
+      rm -f "${SNAPCRAFT_PART_INSTALL}/${DEB}" 2>/dev/null
+      echo $VERSION > $SNAPCRAFT_STAGE/version
+      # Correct path to icon.
+      sed -i 's|Icon=antares|Icon=/usr/share/icons/hicolor/256x256/apps/antares\.png|g' ${SNAPCRAFT_PART_INSTALL}/usr/share/applications/antares.desktop
+      # Delete usr/bin/antares, it's a broken symlink pointing outside the snap.
+      rm -f ${SNAPCRAFT_PART_INSTALL}/usr/bin/antares
+      chmod -s ${SNAPCRAFT_PART_INSTALL}/opt/Antares/chrome-sandbox
+      snapcraftctl set-version "$(echo $VERSION)"
+    build-packages:
+      - dpkg
+      - jq
+      - sed
+      - wget
+    stage-packages:
+      - fcitx-frontend-gtk3
+      - libappindicator3-1
+      - libasound2
+      - libgconf-2-4
+      - libgtk-3-0
+      - libnotify4
+      - libnspr4
+      - libnss3
+      - libpcre3
+      - libpulse0
+      - libxss1
+      - libsecret-1-0
+      - libxtst6
+      - libxkbfile1
+  cleanup:
+    after: [antares]
+    plugin: nil
+    build-snaps: [gnome-3-28-1804]
+    override-prime: |
+      set -eux
+      cd /snap/gnome-3-28-1804/current
+      find . -type f,l -exec rm -f $SNAPCRAFT_PRIME/{} \;
+
+  mdns-lookup:
+    # Make resolution of ".local" host names (Zero-Conf/mDNS/DNS-SD)
+    # working: Take the original nsswitch.conf file from the base
+    # Snap and add "mdns4_minimal [NOTFOUND=return]" to its "hosts:" line
+    # Also install corresponding mdns4_minimal plug-in
+    # See: https://forum.snapcraft.io/t/no-mdns-support-in-snaps-should-core-have-a-modified-nsswitch-conf/
+    plugin: nil
+    stage-packages:
+      - libnss-mdns
+    override-prime: |
+      set -eux
+      sed -Ee 's/^\s*hosts:(\s+)files/hosts:\1files mdns4_minimal \[NOTFOUND=return\]/' /snap/core18/current/etc/nsswitch.conf > $SNAPCRAFT_STAGE/etc/nsswitch.conf
+      snapcraftctl prime
+    prime:
+      - lib/$SNAPCRAFT_ARCH_TRIPLET/libnss_mdns4_minimal*
+      - etc/nsswitch.conf
+
+apps:
+  antares:
+    command: opt/Antares/antares --no-sandbox
+    desktop: usr/share/applications/antares.desktop
+    extensions: [gnome-3-28]
+    environment:
+      # Fallback to XWayland if running in a Wayland session.
+      DISABLE_WAYLAND: 1
+    plugs:
+      - browser-support
+      - cups-control
+      - home
+      - network
+      - opengl
+      - pulseaudio
+      - removable-media
+      - unity7

src/common/FakerMethods.js

@@ -0,0 +1,217 @@
+export default class {
+   static get _methods () {
+      return [
+         { name: 'zipCode', group: 'address', types: ['string'] },
+         { name: 'zipCodeByState', group: 'address', types: ['string'] },
+         { name: 'city', group: 'address', types: ['string'] },
+         { name: 'cityPrefix', group: 'address', types: ['string'] },
+         { name: 'citySuffix', group: 'address', types: ['string'] },
+         { name: 'streetName', group: 'address', types: ['string'] },
+         { name: 'streetAddress', group: 'address', types: ['string'] },
+         { name: 'streetSuffix', group: 'address', types: ['string'] },
+         { name: 'streetPrefix', group: 'address', types: ['string'] },
+         { name: 'secondaryAddress', group: 'address', types: ['string'] },
+         { name: 'county', group: 'address', types: ['string'] },
+         { name: 'country', group: 'address', types: ['string'] },
+         { name: 'countryCode', group: 'address', types: ['string'] },
+         { name: 'state', group: 'address', types: ['string'] },
+         { name: 'stateAbbr', group: 'address', types: ['string'] },
+         { name: 'latitude', group: 'address', types: ['string'] },
+         { name: 'longitude', group: 'address', types: ['string'] },
+         { name: 'direction', group: 'address', types: ['string'] },
+         { name: 'cardinalDirection', group: 'address', types: ['string'] },
+         { name: 'ordinalDirection', group: 'address', types: ['string'] },
+         // { name: 'nearbyGPSCoordinate', group: 'address', types: ['string'] },
+         { name: 'timeZone', group: 'address', types: ['string'] },
+
+         { name: 'color', group: 'commerce', types: ['string'] },
+         { name: 'department', group: 'commerce', types: ['string'] },
+         { name: 'productName', group: 'commerce', types: ['string'] },
+         { name: 'price', group: 'commerce', types: ['string', 'float'] },
+         { name: 'productAdjective', group: 'commerce', types: ['string'] },
+         { name: 'productMaterial', group: 'commerce', types: ['string'] },
+         { name: 'product', group: 'commerce', types: ['string'] },
+         { name: 'productDescription', group: 'commerce', types: ['string'] },
+
+         { name: 'suffixes', group: 'company', types: ['string'] },
+         { name: 'companyName', group: 'company', types: ['string'] },
+         { name: 'companySuffix', group: 'company', types: ['string'] },
+         { name: 'catchPhrase', group: 'company', types: ['string'] },
+         { name: 'bs', group: 'company', types: ['string'] },
+         { name: 'catchPhraseAdjective', group: 'company', types: ['string'] },
+         { name: 'catchPhraseDescriptor', group: 'company', types: ['string'] },
+         { name: 'catchPhraseNoun', group: 'company', types: ['string'] },
+         { name: 'bsAdjective', group: 'company', types: ['string'] },
+         { name: 'bsBuzz', group: 'company', types: ['string'] },
+         { name: 'bsNoun', group: 'company', types: ['string'] },
+
+         { name: 'column', group: 'database', types: ['string'] },
+         { name: 'type', group: 'database', types: ['string'] },
+         { name: 'collation', group: 'database', types: ['string'] },
+         { name: 'engine', group: 'database', types: ['string'] },
+
+         { name: 'past', group: 'date', types: ['string', 'datetime'] },
+         { name: 'future', group: 'date', types: ['string', 'datetime'] },
+         // { name: 'between', group: 'date', types: ['string'] },
+         { name: 'recent', group: 'date', types: ['string', 'datetime'] },
+         { name: 'soon', group: 'date', types: ['string', 'datetime'] },
+         { name: 'month', group: 'date', types: ['string'] },
+         { name: 'weekday', group: 'date', types: ['string'] },
+
+         { name: 'account', group: 'finance', types: ['string', 'number'] },
+         { name: 'accountName', group: 'finance', types: ['string'] },
+         { name: 'routingNumber', group: 'finance', types: ['string', 'number'] },
+         { name: 'mask', group: 'finance', types: ['string', 'number'] },
+         { name: 'amount', group: 'finance', types: ['string', 'float'] },
+         { name: 'transactionType', group: 'finance', types: ['string'] },
+         { name: 'currencyCode', group: 'finance', types: ['string'] },
+         { name: 'currencyName', group: 'finance', types: ['string'] },
+         { name: 'currencySymbol', group: 'finance', types: ['string'] },
+         { name: 'bitcoinAddress', group: 'finance', types: ['string'] },
+         { name: 'litecoinAddress', group: 'finance', types: ['string'] },
+         { name: 'creditCardNumber', group: 'finance', types: ['string'] },
+         { name: 'creditCardCVV', group: 'finance', types: ['string', 'number'] },
+         { name: 'ethereumAddress', group: 'finance', types: ['string'] },
+         { name: 'iban', group: 'finance', types: ['string'] },
+         { name: 'bic', group: 'finance', types: ['string'] },
+         { name: 'transactionDescription', group: 'finance', types: ['string'] },
+
+         { name: 'branch', group: 'git', types: ['string'] },
+         { name: 'commitEntry', group: 'git', types: ['string'] },
+         { name: 'commitMessage', group: 'git', types: ['string'] },
+         { name: 'commitSha', group: 'git', types: ['string'] },
+         { name: 'shortSha', group: 'git', types: ['string'] },
+
+         { name: 'abbreviation', group: 'hacker', types: ['string'] },
+         { name: 'adjective', group: 'hacker', types: ['string'] },
+         { name: 'noun', group: 'hacker', types: ['string'] },
+         { name: 'verb', group: 'hacker', types: ['string'] },
+         { name: 'ingverb', group: 'hacker', types: ['string'] },
+         { name: 'phrase', group: 'hacker', types: ['string'] },
+
+         // { name: 'avatar', group: 'internet', types: ['string'] },
+         { name: 'email', group: 'internet', types: ['string'] },
+         { name: 'exampleEmail', group: 'internet', types: ['string'] },
+         { name: 'userName', group: 'internet', types: ['string'] },
+         { name: 'protocol', group: 'internet', types: ['string'] },
+         { name: 'url', group: 'internet', types: ['string'] },
+         { name: 'domainName', group: 'internet', types: ['string'] },
+         { name: 'domainSuffix', group: 'internet', types: ['string'] },
+         { name: 'domainWord', group: 'internet', types: ['string'] },
+         { name: 'ip', group: 'internet', types: ['string'] },
+         { name: 'ipv6', group: 'internet', types: ['string'] },
+         { name: 'userAgent', group: 'internet', types: ['string'] },
+         { name: 'color', group: 'internet', types: ['string'] },
+         { name: 'mac', group: 'internet', types: ['string'] },
+         { name: 'password', group: 'internet', types: ['string'] },
+
+         { name: 'word', group: 'lorem', types: ['string'] },
+         { name: 'words', group: 'lorem', types: ['string'] },
+         { name: 'sentence', group: 'lorem', types: ['string'] },
+         { name: 'slug', group: 'lorem', types: ['string'] },
+         { name: 'sentences', group: 'lorem', types: ['string'] },
+         { name: 'paragraph', group: 'lorem', types: ['string'] },
+         { name: 'paragraphs', group: 'lorem', types: ['string'] },
+         { name: 'text', group: 'lorem', types: ['string'] },
+         { name: 'lines', group: 'lorem', types: ['string'] },
+
+         { name: 'genre', group: 'music', types: ['string'] },
+
+         { name: 'firstName', group: 'name', types: ['string'] },
+         { name: 'lastName', group: 'name', types: ['string'] },
+         { name: 'middleName', group: 'name', types: ['string'] },
+         { name: 'findName', group: 'name', types: ['string'] },
+         { name: 'jobTitle', group: 'name', types: ['string'] },
+         { name: 'gender', group: 'name', types: ['string'] },
+         { name: 'prefix', group: 'name', types: ['string'] },
+         { name: 'suffix', group: 'name', types: ['string'] },
+         { name: 'title', group: 'name', types: ['string'] },
+         { name: 'jobDescriptor', group: 'name', types: ['string'] },
+         { name: 'jobArea', group: 'name', types: ['string'] },
+         { name: 'jobType', group: 'name', types: ['string'] },
+
+         { name: 'phoneNumber', group: 'phone', types: ['string'] },
+         { name: 'phoneNumberFormat', group: 'phone', types: ['string'] },
+         { name: 'phoneFormats', group: 'phone', types: ['string'] },
+
+         { name: 'number', group: 'random', types: ['string', 'number'], params: ['min', 'max'] },
+         { name: 'float', group: 'random', types: ['string', 'float'], params: ['min', 'max'] },
+         { name: 'arrayElement', group: 'random', types: ['string'] },
+         { name: 'arrayElements', group: 'random', types: ['string'] },
+         { name: 'objectElement', group: 'random', types: ['string'] },
+         { name: 'uuid', group: 'random', types: ['string'] },
+         { name: 'boolean', group: 'random', types: ['string'] },
+         { name: 'word', group: 'random', types: ['string'] },
+         { name: 'words', group: 'random', types: ['string'] },
+         // { name: 'image', group: 'random', types: ['string'] },
+         { name: 'locale', group: 'random', types: ['string'] },
+         { name: 'alpha', group: 'random', types: ['string'] },
+         { name: 'alphaNumeric', group: 'random', types: ['string'] },
+         { name: 'hexaDecimal', group: 'random', types: ['string'] },
+
+         { name: 'fileName', group: 'system', types: ['string'] },
+         { name: 'commonFileName', group: 'system', types: ['string'] },
+         { name: 'mimeType', group: 'system', types: ['string'] },
+         { name: 'commonFileType', group: 'system', types: ['string'] },
+         { name: 'commonFileExt', group: 'system', types: ['string'] },
+         { name: 'fileType', group: 'system', types: ['string'] },
+         { name: 'fileExt', group: 'system', types: ['string'] },
+         { name: 'directoryPath', group: 'system', types: ['string'] },
+         { name: 'filePath', group: 'system', types: ['string'] },
+         { name: 'semver', group: 'system', types: ['string'] },
+
+         { name: 'recent', group: 'time', types: ['string', 'time'] },
+
+         { name: 'vehicle', group: 'vehicle', types: ['string'] },
+         { name: 'manufacturer', group: 'vehicle', types: ['string'] },
+         { name: 'model', group: 'vehicle', types: ['string'] },
+         { name: 'type', group: 'vehicle', types: ['string'] },
+         { name: 'fuel', group: 'vehicle', types: ['string'] },
+         { name: 'vin', group: 'vehicle', types: ['string'] },
+         { name: 'color', group: 'vehicle', types: ['string'] }
+      ];
+   }
+
+   static getGroups () {
+      const groupsObj = this._methods.reduce((acc, curr) => {
+         if (curr.group in acc)
+            curr.types.forEach(type => acc[curr.group].add(type));
+         else
+            acc[curr.group] = new Set(curr.types);
+
+         return acc;
+      }, {});
+
+      const groupsArr = [];
+
+      for (const key in groupsObj)
+         groupsArr.push({ name: key, types: [...groupsObj[key]] });
+
+      return groupsArr.sort((a, b) => {
+         if (a.name < b.name)
+            return -1;
+
+         if (b.name > a.name)
+            return 1;
+
+         return 0;
+      }); ;
+   }
+
+   static getGroupsByType (type) {
+      if (!type) return [];
+      return this.getGroups().filter(group => group.types.includes(type));
+   }
+
+   static getMethods ({ type, group }) {
+      return this._methods.filter(method => method.group === group && method.types.includes(type)).sort((a, b) => {
+         if (a.name < b.name)
+            return -1;
+
+         if (b.name > a.name)
+            return 1;
+
+         return 0;
+      });
+   }
+}

src/common/customizations/defaults.js

@@ -0,0 +1,75 @@
+module.exports = {
+   // Defaults
+   defaultPort: null,
+   defaultUser: null,
+   defaultDatabase: null,
+   // Core
+   database: false,
+   collations: false,
+   engines: false,
+   // Tools
+   processesList: false,
+   usersManagement: false,
+   variables: false,
+   // Structure
+   schemas: false,
+   tables: false,
+   views: false,
+   triggers: false,
+   triggerFunctions: false,
+   routines: false,
+   functions: false,
+   schedulers: false,
+   // Settings
+   tableAdd: false,
+   viewAdd: false,
+   triggerAdd: false,
+   triggerFunctionAdd: false,
+   routineAdd: false,
+   functionAdd: false,
+   schedulerAdd: false,
+   databaseEdit: false,
+   schemaEdit: false,
+   tableSettings: false,
+   viewSettings: false,
+   triggerSettings: false,
+   triggerFunctionSettings: false,
+   routineSettings: false,
+   functionSettings: false,
+   schedulerSettings: false,
+   indexes: false,
+   foreigns: false,
+   sortableFields: false,
+   unsigned: false,
+   nullable: false,
+   zerofill: false,
+   autoIncrement: false,
+   comment: false,
+   collation: false,
+   definer: false,
+   onUpdate: false,
+   tableArray: false,
+   viewAlgorithm: false,
+   viewSqlSecurity: false,
+   viewUpdateOption: false,
+   procedureDeterministic: false,
+   procedureDataAccess: false,
+   procedureSql: false,
+   procedureContext: false,
+   procedureLanguage: false,
+   functionDeterministic: false,
+   functionDataAccess: false,
+   functionSql: false,
+   functionContext: false,
+   functionLanguage: false,
+   triggerSql: false,
+   triggerStatementInCreation: false,
+   triggerMultipleEvents: false,
+   triggerTableInName: false,
+   triggerUpdateColumns: false,
+   triggerOnlyRename: false,
+   triggerFunctionSql: false,
+   triggerFunctionlanguages: false,
+   parametersLength: false,
+   languages: false
+};

src/common/customizations/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+   maria: require('./mysql'),
+   mysql: require('./mysql'),
+   pg: require('./postgresql')
+};

src/common/customizations/mysql.js

@@ -0,0 +1,59 @@
+const defaults = require('./defaults');
+
+module.exports = {
+   ...defaults,
+   // Defaults
+   defaultPort: 3306,
+   defaultUser: 'root',
+   defaultDatabase: null,
+   // Core
+   collations: true,
+   engines: true,
+   // Tools
+   processesList: true,
+   // Structure
+   schemas: true,
+   tables: true,
+   views: true,
+   triggers: true,
+   routines: true,
+   functions: true,
+   schedulers: true,
+   // Settings
+   tableAdd: true,
+   viewAdd: true,
+   triggerAdd: true,
+   routineAdd: true,
+   functionAdd: true,
+   schedulerAdd: true,
+   schemaEdit: true,
+   tableSettings: true,
+   viewSettings: true,
+   triggerSettings: true,
+   routineSettings: true,
+   functionSettings: true,
+   schedulerSettings: true,
+   indexes: true,
+   foreigns: true,
+   sortableFields: true,
+   unsigned: true,
+   nullable: true,
+   zerofill: true,
+   autoIncrement: true,
+   comment: true,
+   collation: true,
+   definer: true,
+   onUpdate: true,
+   viewAlgorithm: true,
+   viewSqlSecurity: true,
+   viewUpdateOption: true,
+   procedureDeterministic: true,
+   procedureDataAccess: true,
+   procedureSql: 'BEGIN\r\n\r\nEND',
+   procedureContext: true,
+   triggerSql: 'BEGIN\r\n\r\nEND',
+   functionDeterministic: true,
+   functionDataAccess: true,
+   functionSql: 'BEGIN\r\n\r\nEND',
+   parametersLength: true
+};

src/common/customizations/postgresql.js

@@ -0,0 +1,52 @@
+const defaults = require('./defaults');
+
+module.exports = {
+   ...defaults,
+   // Defaults
+   defaultPort: 5432,
+   defaultUser: 'postgres',
+   defaultDatabase: 'postgres',
+   // Core
+   database: true,
+   // Tools
+   processesList: true,
+   // Structure
+   tables: true,
+   views: true,
+   triggers: true,
+   triggerFunctions: true,
+   routines: true,
+   functions: true,
+   // Settings
+   tableAdd: true,
+   viewAdd: true,
+   triggerAdd: true,
+   triggerFunctionAdd: true,
+   routineAdd: true,
+   functionAdd: true,
+   databaseEdit: false,
+   tableSettings: true,
+   viewSettings: true,
+   triggerSettings: true,
+   triggerFunctionSettings: true,
+   routineSettings: true,
+   functionSettings: true,
+   indexes: true,
+   foreigns: true,
+   nullable: true,
+   tableArray: true,
+   procedureSql: '$procedure$\r\n\r\n$procedure$',
+   procedureContext: true,
+   procedureLanguage: true,
+   functionSql: '$function$\r\n\r\n$function$',
+   triggerFunctionSql: '$function$\r\nBEGIN\r\n\r\nEND\r\n$function$',
+   triggerFunctionlanguages: ['plpgsql'],
+   functionContext: true,
+   functionLanguage: true,
+   triggerSql: 'EXECUTE PROCEDURE ',
+   triggerStatementInCreation: true,
+   triggerMultipleEvents: true,
+   triggerTableInName: true,
+   triggerOnlyRename: false,
+   languages: ['sql', 'plpgsql', 'c', 'internal']
+};

src/common/data-types/mysql.js

@@ -0,0 +1,308 @@
+module.exports = [
+   {
+      group: 'integer',
+      types: [
+         {
+            name: 'TINYINT',
+            length: 4,
+            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: false,
+            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: false,
+            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: 'ENUM',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'SET',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'unknown',
+      types: [
+         {
+            name: 'UNKNOWN',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   }
+];

src/common/data-types/postgresql.js

@@ -0,0 +1,292 @@
+module.exports = [
+   {
+      group: 'integer',
+      types: [
+         {
+            name: 'SMALLINT',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'INTEGER',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'BIGINT',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'DECIMAL',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'NUMERIC',
+            length: true,
+            unsigned: true
+         },
+         {
+            name: 'SMALLSERIAL',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'SERIAL',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'BIGSERIAL',
+            length: false,
+            unsigned: true
+         }
+      ]
+   },
+   {
+      group: 'float',
+      types: [
+         {
+            name: 'REAL',
+            length: false,
+            unsigned: true
+         },
+         {
+            name: 'DOUBLE PRECISION',
+            length: false,
+            unsigned: true
+         }
+      ]
+   },
+   {
+      group: 'monetary',
+      types: [
+         {
+            name: 'money',
+            length: false,
+            unsigned: true
+         }
+      ]
+   },
+   {
+      group: 'string',
+      types: [
+         {
+            name: 'CHARACTER VARYING',
+            length: true,
+            unsigned: false
+         },
+         {
+            name: 'CHARACTER',
+            length: true,
+            unsigned: false
+         },
+         {
+            name: 'TEXT',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: '"CHAR"',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'NAME',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'binary',
+      types: [
+         {
+            name: 'BYTEA',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'time',
+      types: [
+         {
+            name: 'TIMESTAMP WITHOUT TIME ZONE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'TIMESTAMP WITH TIME ZONE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'DATE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'TIME WITHOUT TIME ZONE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'TIME WITH TIME ZONE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'INTERVAL',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'boolean',
+      types: [
+         {
+            name: 'BOOLEAN',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'geometric',
+      types: [
+         {
+            name: 'POINT',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'LINE',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'LSEG',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'BOX',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'PATH',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'POLYGON',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'CIRCLE',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'network',
+      types: [
+         {
+            name: 'CIDR',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'INET',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'MACADDR',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'MACADDR8',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'bit',
+      types: [
+         {
+            name: 'BIT',
+            length: true,
+            unsigned: false
+         },
+         {
+            name: 'BIT VARYING',
+            length: true,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'text search',
+      types: [
+         {
+            name: 'TSVECTOR',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'TSQUERY',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'uuid',
+      types: [
+         {
+            name: 'UUID',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'xml',
+      types: [
+         {
+            name: 'XML',
+            length: false,
+            unsigned: false
+         }
+      ]
+   },
+   {
+      group: 'json',
+      types: [
+         {
+            name: 'JSON',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'JSONB',
+            length: false,
+            unsigned: false
+         },
+         {
+            name: 'JSONPATH',
+            length: false,
+            unsigned: false
+         }
+      ]
+   }
+];

src/common/fieldTypes.js

@@ -0,0 +1,82 @@
+export const TEXT = [
+   'CHAR',
+   'VARCHAR',
+   'CHARACTER',
+   'CHARACTER VARYING'
+];
+export const LONG_TEXT = [
+   'TEXT',
+   'MEDIUMTEXT',
+   'LONGTEXT'
+];
+
+export const ARRAY = [
+   'ARRAY',
+   'ANYARRAY'
+];
+
+export const TEXT_SEARCH = [
+   'TSVECTOR',
+   'TSQUERY'
+];
+
+export const NUMBER = [
+   'INT',
+   'TINYINT',
+   'SMALLINT',
+   'MEDIUMINT',
+   'BIGINT',
+   'DECIMAL',
+   'NUMERIC',
+   'INTEGER',
+   'SMALLSERIAL',
+   'SERIAL',
+   'BIGSERIAL',
+   'OID',
+   'XID'
+];
+
+export const FLOAT = [
+   'FLOAT',
+   'DOUBLE',
+   'REAL',
+   'DOUBLE PRECISION',
+   'MONEY'
+];
+
+export const BOOLEAN = [
+   'BOOL',
+   'BOOLEAN'
+];
+
+export const DATE = ['DATE'];
+export const TIME = [
+   'TIME',
+   'TIME WITH TIME ZONE'
+];
+
+export const DATETIME = [
+   'DATETIME',
+   'TIMESTAMP',
+   'TIMESTAMP WITHOUT TIME ZONE',
+   'TIMESTAMP WITH TIME ZONE'
+];
+
+// Used to check datetime fields only
+export const HAS_TIMEZONE = [
+   'TIMESTAMP WITH TIME ZONE',
+   'TIME WITH TIME ZONE'
+];
+
+export const BLOB = [
+   'BLOB',
+   'TINYBLOB',
+   'MEDIUMBLOB',
+   'LONGBLOB',
+   'BYTEA'
+];
+
+export const BIT = [
+   'BIT',
+   'BIT VARYING'
+];

src/common/index-types/mysql.js

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

src/common/index-types/postgresql.js

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

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

@@ -1,56 +1,58 @@
 'use strict';
 
-import { app, BrowserWindow, nativeImage } from 'electron';
+import { app, BrowserWindow, /* session, */ nativeImage } from 'electron';
 import * as path from 'path';
-import { format as formatUrl } from 'url';
+import Store from 'electron-store';
 
 import ipcHandlers from './ipc-handlers';
 
+Store.initRenderer();
+
 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
+         contextIsolation: 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
-      }));
+   try {
+      if (isDevelopment) { //
+         await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
+
+         // const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer');
+
+         // const oldDevToolsID = session.defaultSession.getAllExtensions().find(ext => ext.name === 'Vue.js devtools').id;
+         // session.defaultSession.removeExtension(oldDevToolsID);
+         // const toolName = await installExtension(VUEJS3_DEVTOOLS);
+         // console.log(toolName, 'installed');
       }
-
-   if (isDevelopment) {
-      const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
-      window.webContents.openDevTools();
-
-      installExtension(VUEJS_DEVTOOLS)
-         .then(name => {
-            console.log(name, 'installed');
-         })
-         .catch(err => {
+      else
+         await window.loadURL(new URL(`file:///${path.join(__dirname, 'index.html')}`).href);
+   }
+   catch (err) {
       console.log(err);
-         });
    }
 
    window.on('closed', () => {
@@ -64,12 +66,17 @@ function createMainWindow () {
       });
    });
 
-   // Initialize ipcHandlers
-   ipcHandlers();
-
    return window;
 };
 
+if (!gotTheLock)
+   app.quit();
+else {
+   require('@electron/remote/main').initialize();
+
+   // 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
@@ -77,13 +84,19 @@ app.on('window-all-closed', () => {
          app.quit();
    });
 
-app.on('activate', () => {
+   app.on('activate', async () => {
       // on macOS it is common to re-create a window even after all windows have been closed
-   if (mainWindow === null)
-      mainWindow = createMainWindow();
+      if (mainWindow === null) {
+         mainWindow = await createMainWindow();
+         if (isDevelopment)
+            mainWindow.webContents.openDevTools();
+      }
    });
 
    // create main BrowserWindow when electron is ready
-app.on('ready', () => {
-   mainWindow = createMainWindow();
+   app.on('ready', async () => {
+      mainWindow = await createMainWindow();
+      if (isDevelopment)
+         mainWindow.webContents.openDevTools();
    });
+}

src/main/ipc-handlers/application.js

@@ -0,0 +1,12 @@
+import { app, ipcMain } from 'electron';
+
+export default () => {
+   ipcMain.on('close-app', () => {
+      app.exit();
+   });
+
+   ipcMain.on('get-key', async event => {
+      const key = false;
+      event.returnValue = key;
+   });
+};

src/main/ipc-handlers/connection.js

@@ -1,25 +1,38 @@
-
+import fs from 'fs';
 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({
-         client: conn.client,
-         params: {
+export default connections => {
+   ipcMain.handle('test-connection', async (event, conn) => {
+      const params = {
          host: conn.host,
          port: +conn.port,
          user: conn.user,
-            password: conn.password
+         password: conn.password,
+         application_name: 'Antares SQL'
+      };
+
+      if (conn.database)
+         params.database = conn.database;
+
+      if (conn.ssl) {
+         params.ssl = {
+            key: conn.key ? fs.readFileSync(conn.key) : null,
+            cert: conn.cert ? fs.readFileSync(conn.cert) : null,
+            ca: conn.ca ? fs.readFileSync(conn.ca) : null,
+            ciphers: conn.ciphers
+         };
       }
+
+      const connection = ClientsFactory.getConnection({
+         client: conn.client,
+         params
       });
 
-      await Connection.connect();
-
       try {
-         await InformationSchema.testConnection(Connection);
+         await connection.connect();
+         await connection.select('1+1').run();
+         connection.destroy();
 
          return { status: 'success' };
       }
@@ -28,27 +41,44 @@ 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({
-         client: conn.client,
-         params: {
+      const params = {
          host: conn.host,
          port: +conn.port,
          user: conn.user,
-            password: conn.password
-         },
-         poolSize: 3
-      });
+         password: conn.password,
+         application_name: 'Antares SQL'
+      };
+
+      if (conn.database)
+         params.database = conn.database;
+
+      if (conn.ssl) {
+         params.ssl = {
+            key: conn.key ? fs.readFileSync(conn.key) : null,
+            cert: conn.cert ? fs.readFileSync(conn.cert) : null,
+            ca: conn.ca ? fs.readFileSync(conn.ca) : null,
+            ciphers: conn.ciphers
+         };
+      }
 
       try {
-         await Connection.connect();
+         const connection = ClientsFactory.getConnection({
+            client: conn.client,
+            params,
+            poolSize: 5
+         });
+
+         await connection.connect();
+
+         const structure = await connection.getStructure(new Set());
+
+         connections[conn.uid] = connection;
 
-         const { rows: structure } = await InformationSchema.getStructure(Connection);
-         connections[conn.uid] = Connection;
          return { status: 'success', response: structure };
       }
       catch (err) {
@@ -60,25 +90,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/functions.js

@@ -0,0 +1,63 @@
+import { ipcMain } from 'electron';
+
+export default (connections) => {
+   ipcMain.handle('get-function-informations', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getFunctionInformations(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('drop-function', async (event, params) => {
+      try {
+         await connections[params.uid].dropFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-function', async (event, params) => {
+      try {
+         await connections[params.uid].alterFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('alter-trigger-function', async (event, params) => {
+      try {
+         await connections[params.uid].alterTriggerFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-function', async (event, params) => {
+      try {
+         await connections[params.uid].createFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('create-trigger-function', async (event, params) => {
+      try {
+         await connections[params.uid].createTriggerFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/index.js

@@ -1,11 +1,27 @@
 import connection from './connection';
 import tables from './tables';
+import views from './views';
+import triggers from './triggers';
+import routines from './routines';
+import functions from './functions';
+import schedulers from './schedulers';
 import updates from './updates';
+import application from './application';
+import schema from './schema';
+import users from './users';
 
 const connections = {};
 
 export default () => {
    connection(connections);
    tables(connections);
+   views(connections);
+   triggers(connections);
+   routines(connections);
+   functions(connections);
+   schedulers(connections);
+   schema(connections);
+   users(connections);
    updates();
+   application();
 };

src/main/ipc-handlers/routines.js

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

src/main/ipc-handlers/schedulers.js

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

src/main/ipc-handlers/schema.js

@@ -0,0 +1,139 @@
+
+import { ipcMain } from 'electron';
+
+export default connections => {
+   ipcMain.handle('create-schema', async (event, params) => {
+      try {
+         await connections[params.uid].createSchema(params);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('update-schema', async (event, params) => {
+      try {
+         await connections[params.uid].alterSchema(params);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('delete-schema', async (event, params) => {
+      try {
+         await connections[params.uid].dropSchema(params);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-schema-collation', async (event, params) => {
+      try {
+         const collation = await connections[params.uid].getDatabaseCollation(params);
+
+         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, params) => {
+      try {
+         const structure = await connections[params.uid].getStructure(params.schemas);
+
+         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('get-version', async (event, uid) => {
+      try {
+         const result = await connections[uid].getVersion();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-processes', async (event, uid) => {
+      try {
+         const result = await connections[uid].getProcesses();
+
+         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, schema });
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/tables.js

@@ -1,13 +1,14 @@
 import { ipcMain } from 'electron';
-import InformationSchema from '../models/InformationSchema';
-import Tables from '../models/Tables';
-
-// TODO: remap objects based on client
+import faker from 'faker';
+import moment from 'moment';
+import { sqlEscaper } from 'common/libs/sqlEscaper';
+import { TEXT, LONG_TEXT, ARRAY, TEXT_SEARCH, NUMBER, FLOAT, BLOB, BIT, DATE, DATETIME } from 'common/fieldTypes';
+import fs from 'fs';
 
 export default (connections) => {
-   ipcMain.handle('getTableColumns', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-columns', async (event, params) => {
       try {
-         const result = await InformationSchema.getTableColumns(connections[uid], schema, table);// TODO: uniform column properties
+         const result = await connections[params.uid].getTableColumns(params);
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -15,9 +16,21 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('getTableData', async (event, { uid, schema, table }) => {
+   ipcMain.handle('get-table-data', async (event, { uid, schema, table, limit, page, sortParams }) => {
       try {
-         const result = await Tables.getTableData(connections[uid], schema, table);
+         const offset = (page - 1) * limit;
+         const query = connections[uid]
+            .select('*')
+            .schema(schema)
+            .from(table)
+            .limit(limit)
+            .offset(offset);
+
+         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) {
@@ -25,9 +38,10 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('updateTableCell', async (event, params) => {
+   ipcMain.handle('get-table-indexes', async (event, params) => {
       try {
-         const result = await Tables.updateTableCell(connections[params.uid], params);
+         const result = await connections[params.uid].getTableIndexes(params);
+
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -35,13 +49,408 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('deleteTableRows', async (event, params) => {
+   ipcMain.handle('get-key-usage', async (event, params) => {
       try {
-         const result = await Tables.deleteTableRows(connections[params.uid], params);
+         const result = await connections[params.uid].getKeyUsage(params);
+
          return { status: 'success', response: result };
       }
       catch (err) {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('update-table-cell', async (event, params) => {
+      delete params.row._id;
+
+      try { // TODO: move to client classes
+         let escapedParam;
+         let reload = false;
+         const id = typeof params.id === 'number' ? params.id : `"${params.id}"`;
+
+         if ([...NUMBER, ...FLOAT].includes(params.type))
+            escapedParam = params.content;
+         else if ([...TEXT, ...LONG_TEXT].includes(params.type)) {
+            switch (connections[params.uid]._client) {
+               case 'mysql':
+               case 'maria':
+                  escapedParam = `"${sqlEscaper(params.content)}"`;
+                  break;
+               case 'pg':
+                  escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
+                  break;
+            }
+         }
+         else if (ARRAY.includes(params.type))
+            escapedParam = `'${params.content}'`;
+         else if (TEXT_SEARCH.includes(params.type))
+            escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
+         else if (BLOB.includes(params.type)) {
+            if (params.content) {
+               let fileBlob;
+
+               switch (connections[params.uid]._client) {
+                  case 'mysql':
+                  case 'maria':
+                     fileBlob = fs.readFileSync(params.content);
+                     escapedParam = `0x${fileBlob.toString('hex')}`;
+                     break;
+                  case 'pg':
+                     fileBlob = fs.readFileSync(params.content);
+                     escapedParam = `decode('${fileBlob.toString('hex')}', 'hex')`;
+                     break;
+               }
+               reload = true;
+            }
+            else {
+               switch (connections[params.uid]._client) {
+                  case 'mysql':
+                  case 'maria':
+                     escapedParam = '\'\'';
+                     break;
+                  case 'pg':
+                     escapedParam = 'decode(\'\', \'hex\')';
+                     break;
+               }
+            }
+         }
+         else if ([...BIT].includes(params.type)) {
+            escapedParam = `b'${sqlEscaper(params.content)}'`;
+            reload = true;
+         }
+         else if (params.content === null)
+            escapedParam = 'NULL';
+         else
+            escapedParam = `'${sqlEscaper(params.content)}'`;
+
+         if (params.primary) { // TODO: handle multiple primary
+            await connections[params.uid]
+               .update({ [params.field]: `= ${escapedParam}` })
+               .schema(params.schema)
+               .from(params.table)
+               .where({ [params.primary]: `= ${id}` })
+               .limit(1)
+               .run();
+         }
+         else {
+            const { orgRow } = params;
+            reload = true;
+
+            for (const key in orgRow) {
+               if (typeof orgRow[key] === 'string')
+                  orgRow[key] = `'${orgRow[key]}'`;
+
+               orgRow[key] = `= ${orgRow[key]}`;
+            }
+
+            await connections[params.uid]
+               .schema(params.schema)
+               .update({ [params.field]: `= ${escapedParam}` })
+               .from(params.table)
+               .where(orgRow)
+               .limit(1)
+               .run();
+         }
+
+         return { status: 'success', response: { reload } };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('delete-table-rows', async (event, params) => {
+      if (params.primary) {
+         const idString = params.rows.map(row => {
+            const fieldName = Object.keys(row)[0].includes('.') ? `${params.table}.${params.primary}` : params.primary;
+
+            return typeof row[fieldName] === 'string'
+               ? `"${row[fieldName]}"`
+               : row[fieldName];
+         }).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() };
+         }
+      }
+      else {
+         try {
+            for (const row of params.rows) {
+               for (const key in row) {
+                  if (typeof row[key] === 'string')
+                     row[key] = `'${row[key]}'`;
+
+                  row[key] = `= ${row[key]}`;
+               }
+
+               await connections[params.uid]
+                  .schema(params.schema)
+                  .delete(params.table)
+                  .where(row)
+                  .limit(1)
+                  .run();
+            }
+
+            return { status: 'success', response: [] };
+         }
+         catch (err) {
+            return { status: 'error', response: err.toString() };
+         }
+      }
+   });
+
+   ipcMain.handle('insert-table-rows', async (event, params) => {
+      try { // TODO: move to client classes
+         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, ...FLOAT].includes(type))
+               escapedParam = +params.row[key];
+            else if ([...TEXT, ...LONG_TEXT].includes(type)) {
+               switch (connections[params.uid]._client) {
+                  case 'mysql':
+                  case 'maria':
+                     escapedParam = `"${sqlEscaper(params.row[key].value)}"`;
+                     break;
+                  case 'pg':
+                     escapedParam = `'${params.row[key].value.replaceAll('\'', '\'\'')}'`;
+                     break;
+               }
+            }
+            else if (BLOB.includes(type)) {
+               if (params.row[key].value) {
+                  let fileBlob;
+
+                  switch (connections[params.uid]._client) {
+                     case 'mysql':
+                     case 'maria':
+                        fileBlob = fs.readFileSync(params.row[key].value);
+                        escapedParam = `0x${fileBlob.toString('hex')}`;
+                        break;
+                     case 'pg':
+                        fileBlob = fs.readFileSync(params.row[key].value);
+                        escapedParam = `decode('${fileBlob.toString('hex')}', 'hex')`;
+                        break;
+                  }
+               }
+               else {
+                  switch (connections[params.uid]._client) {
+                     case 'mysql':
+                     case 'maria':
+                        escapedParam = '""';
+                        break;
+                     case 'pg':
+                        escapedParam = 'decode(\'\', \'hex\')';
+                        break;
+                  }
+               }
+            }
+
+            insertObj[key] = escapedParam;
+         }
+
+         const rows = new Array(+params.repeat).fill(insertObj);
+
+         await connections[params.uid]
+            .schema(params.schema)
+            .into(params.table)
+            .insert(rows)
+            .run();
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('insert-table-fake-rows', async (event, params) => {
+      try { // TODO: move to client classes
+         const rows = [];
+
+         for (let i = 0; i < +params.repeat; i++) {
+            const insertObj = {};
+
+            for (const key in params.row) {
+               const type = params.fields[key];
+               let escapedParam;
+
+               if (!('group' in params.row[key]) || params.row[key].group === 'manual') { // Manual value
+                  if (params.row[key].value === null || params.row[key].value === undefined)
+                     escapedParam = 'NULL';
+                  else if ([...NUMBER, ...FLOAT].includes(type))
+                     escapedParam = params.row[key].value;
+                  else if ([...TEXT, ...LONG_TEXT].includes(type)) {
+                     switch (connections[params.uid]._client) {
+                        case 'mysql':
+                        case 'maria':
+                           escapedParam = `"${sqlEscaper(params.row[key].value)}"`;
+                           break;
+                        case 'pg':
+                           escapedParam = `'${params.row[key].value.replaceAll('\'', '\'\'')}'`;
+                           break;
+                     }
+                  }
+                  else if (BLOB.includes(type)) {
+                     if (params.row[key].value) {
+                        let fileBlob;
+
+                        switch (connections[params.uid]._client) {
+                           case 'mysql':
+                           case 'maria':
+                              fileBlob = fs.readFileSync(params.row[key].value);
+                              escapedParam = `0x${fileBlob.toString('hex')}`;
+                              break;
+                           case 'pg':
+                              fileBlob = fs.readFileSync(params.row[key].value);
+                              escapedParam = `decode('${fileBlob.toString('hex')}', 'hex')`;
+                              break;
+                        }
+                     }
+                     else {
+                        switch (connections[params.uid]._client) {
+                           case 'mysql':
+                           case 'maria':
+                              escapedParam = '""';
+                              break;
+                           case 'pg':
+                              escapedParam = 'decode(\'\', \'hex\')';
+                              break;
+                        }
+                     }
+                  }
+                  else if (BIT.includes(type))
+                     escapedParam = `b'${sqlEscaper(params.row[key].value)}'`;
+                  else
+                     escapedParam = `'${sqlEscaper(params.row[key].value)}'`;
+
+                  insertObj[key] = escapedParam;
+               }
+               else { // Faker value
+                  const parsedParams = {};
+                  let fakeValue;
+
+                  if (params.locale)
+                     faker.locale = params.locale;
+
+                  if (Object.keys(params.row[key].params).length) {
+                     Object.keys(params.row[key].params).forEach(param => {
+                        if (!isNaN(params.row[key].params[param]))
+                           parsedParams[param] = +params.row[key].params[param];
+                     });
+                     fakeValue = faker[params.row[key].group][params.row[key].method](parsedParams);
+                  }
+                  else
+                     fakeValue = faker[params.row[key].group][params.row[key].method]();
+
+                  if (typeof fakeValue === 'string') {
+                     if (params.row[key].length)
+                        fakeValue = fakeValue.substr(0, params.row[key].length);
+                     fakeValue = `'${sqlEscaper(fakeValue)}'`;
+                  }
+                  else if ([...DATE, ...DATETIME].includes(type))
+                     fakeValue = `'${moment(fakeValue).format('YYYY-MM-DD HH:mm:ss.SSSSSS')}'`;
+
+                  insertObj[key] = fakeValue;
+               }
+            }
+
+            rows.push(insertObj);
+         }
+
+         await connections[params.uid]
+            .schema(params.schema)
+            .into(params.table)
+            .insert(rows)
+            .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 foreign_column`)
+            .schema(schema)
+            .from(table)
+            .orderBy('foreign_column ASC');
+
+         if (description)
+            query.select(`LEFT(${description}, 20) AS foreign_description`);
+
+         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('duplicate-table', async (event, params) => {
+      try {
+         await connections[params.uid].duplicateTable(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/triggers.js

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

src/main/ipc-handlers/updates.js

@@ -1,40 +1,46 @@
 import { ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
+import Store from 'electron-store';
+const persistentStore = new Store({ name: 'settings' });
 
 let mainWindow;
+autoUpdater.allowPrerelease = persistentStore.get('allow_prerelease', true);
 
 export default () => {
-   ipcMain.on('checkForUpdates', event => {
+   ipcMain.on('check-for-updates', event => {
       mainWindow = event;
-
+      if (process.windowsStore)
+         mainWindow.reply('no-auto-update');
+      else {
          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/ipc-handlers/users.js

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

src/main/ipc-handlers/views.js

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

src/main/libs/AntaresConnector.js

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

src/main/libs/AntaresCore.js

@@ -0,0 +1,148 @@
+'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: [],
+         offset: [],
+         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;
+   }
+
+   offset (...args) {
+      this._query.offset = args;
+      return this;
+   }
+
+   /**
+    * @param {String | Array} args field = value
+    * @returns
+    * @memberof AntaresCore
+    */
+   update (...args) {
+      this._query.update = [...this._query.update, ...args];
+      return this;
+   }
+
+   /**
+    * @param {Array} arr Array of row objects
+    * @returns
+    * @memberof AntaresCore
+    */
+   insert (arr) {
+      this._query.insert = [...this._query.insert, ...arr];
+      return this;
+   }
+
+   /**
+    * @param {Object} args
+    * @returns {Promise}
+    * @memberof AntaresCore
+    */
+   run (args) {
+      const rawQuery = this.getSQL();
+      this._resetQuery();
+      return this.raw(rawQuery, args);
+   }
+}

src/main/libs/ClientsFactory.js

@@ -0,0 +1,30 @@
+'use strict';
+import { MySQLClient } from './clients/MySQLClient';
+import { PostgreSQLClient } from './clients/PostgreSQLClient';
+
+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);
+         case 'pg':
+            return new PostgreSQLClient(args);
+         default:
+            throw new Error(`Unknown database client: ${args.client}`);
+      }
+   }
+}

src/main/models/Generic.js

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

src/main/models/InformationSchema.js

@@ -1,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/main/models/Tables.js

@@ -1,28 +0,0 @@
-'use strict';
-export default class {
-   static async getTableData (connection, schema, table) {
-      return connection
-         .select('*')
-         .schema(schema)
-         .from(table)
-         .limit(1000)
-         .run();
-   }
-
-   static async updateTableCell (connection, params) { // TODO: Handle different field types
-      return connection
-         .update({ [params.field]: `= "${params.content}"` })
-         .schema(params.schema)
-         .from(params.table)
-         .where({ [params.primary]: `= ${params.id}` })
-         .run();
-   }
-
-   static async deleteTableRows (connection, params) {
-      return connection
-         .schema(params.schema)
-         .delete(params.table)
-         .where({ [params.primary]: `IN (${params.rows.join(',')})` })
-         .run();
-   }
-}

src/renderer/App.vue

@@ -1,10 +1,10 @@
 <template>
-   <div id="wrapper">
+   <div id="wrapper" :class="`theme-${applicationTheme}`">
       <TheTitleBar />
       <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,10 @@
          <TheFooter />
          <TheNotificationsBoard />
          <ModalNewConnection v-if="isNewConnModal" />
-         <ModalEditConnection v-if="isEditModal" />
+         <TheScratchpad v-if="isScratchpad" />
          <ModalSettings v-if="isSettingModal" />
+         <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
+         <BaseTextEditor class="d-none" value="" />
       </div>
    </div>
 </template>
@@ -25,6 +27,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { ipcRenderer } from 'electron';
+import { Menu, getCurrentWindow } from '@electron/remote';
 
 export default {
    name: 'App',
@@ -36,12 +39,13 @@ 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'),
+      TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
+      ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
+      BaseTextEditor: () => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor')
    },
    data () {
-      return {
-      };
+      return {};
    },
    computed: {
       ...mapGetters({
@@ -49,15 +53,57 @@ export default {
          isNewConnModal: 'application/isNewModal',
          isEditModal: 'application/isEditModal',
          isSettingModal: 'application/isSettingModal',
-         connections: 'connections/getConnections'
+         isScratchpad: 'application/isScratchpad',
+         connections: 'connections/getConnections',
+         applicationTheme: 'settings/getApplicationTheme',
+         isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
       })
    },
    mounted () {
-      ipcRenderer.send('checkForUpdates');
+      ipcRenderer.send('check-for-updates');
+      this.checkVersionUpdate();
+
+      const InputMenu = Menu.buildFromTemplate([
+         {
+            label: this.$t('word.cut'),
+            role: 'cut'
+         },
+         {
+            label: this.$t('word.copy'),
+            role: 'copy'
+         },
+         {
+            label: this.$t('word.paste'),
+            role: 'paste'
+         },
+         {
+            type: 'separator'
+         },
+         {
+            label: this.$t('message.selectAll'),
+            role: 'selectall'
+         }
+      ]);
+
+      document.body.addEventListener('contextmenu', (e) => {
+         e.preventDefault();
+         e.stopPropagation();
+
+         let node = e.target;
+
+         while (node) {
+            if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
+               InputMenu.popup(getCurrentWindow());
+               break;
+            }
+            node = node.parentNode;
+         }
+      });
    },
    methods: {
       ...mapActions({
-         showNewConnModal: 'application/showNewConnModal'
+         showNewConnModal: 'application/showNewConnModal',
+         checkVersionUpdate: 'application/checkVersionUpdate'
       })
    }
 };

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>
@@ -24,18 +24,18 @@
                <slot name="body" />
             </div>
          </div>
-         <div class="modal-footer">
+         <div v-if="!hideFooter" 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,19 @@
 <script>
 export default {
    name: 'BaseConfirmModal',
+   props: {
+      size: {
+         type: String,
+         validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
+         default: 'small'
+      },
+      hideFooter: {
+         type: Boolean,
+         default: false
+      },
+      confirmText: String,
+      cancelText: String
+   },
    computed: {
       hasHeader () {
          return !!this.$slots.header;
@@ -54,8 +67,23 @@ 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 '';
       }
    },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       confirmModal () {
          this.$emit('confirm');
@@ -64,13 +92,23 @@ export default {
 
       hideModal () {
          this.$emit('hide');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.hideModal();
       }
    }
 };
 </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">
+   <div class="context" :class="{'bottom': isBottom}">
+      <a
+         class="context-overlay"
+         @click="close"
+         @contextmenu="close"
+      />
       <div
-         v-click-outside="close"
+         ref="contextContent"
          class="context-container"
          :style="position"
       >
@@ -11,27 +16,56 @@
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside';
-
 export default {
    name: 'BaseContextMenu',
-   directives: {
-      ClickOutside
-   },
    props: {
       contextEvent: MouseEvent
    },
+   data () {
+      return {
+         contextSize: null,
+         isBottom: false
+      };
+   },
    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 + 2}px`;
+         let leftCord = `${clientX + 5}px`;
+
+         if (this.contextSize) {
+            if (clientY + (this.contextSize.height < 200 ? 200 : this.contextSize.height) + 5 >= window.innerHeight) {
+               topCord = `${clientY + 3 - this.contextSize.height}px`;
+               this.isBottom = true;
+            }
+
+            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,29 +74,33 @@ 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;
+
+  &:not(.bottom) .context-submenu {
+    top: -0.2rem;
+  }
+
+  &.bottom .context-submenu {
+    bottom: -0.2rem;
+  }
 
   .context-container {
     min-width: 100px;
-         max-width: 150px;
-         z-index: 1;
-         box-shadow: 0px 0px 1px 0px #000;
+    z-index: 10;
     padding: 0;
     background: #1d1d1d;
-         border-radius: 0.1rem;
+    border-radius: $border-radius;
+    border: 1px solid $bg-color-light-dark;
     display: flex;
     flex-direction: column;
     position: absolute;
@@ -71,11 +109,32 @@ export default {
     .context-element {
       display: flex;
       align-items: center;
-            padding: .1rem .3rem;
+      margin: 0.2rem;
+      padding: 0.1rem 0.3rem;
+      border-radius: $border-radius;
       cursor: pointer;
+      justify-content: space-between;
+      position: relative;
+      white-space: nowrap;
+
+      .context-submenu {
+        border-radius: $border-radius;
+        border: 1px solid $bg-color-light-dark;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s;
+        position: absolute;
+        left: 100%;
+        min-width: 100px;
+        background: #1d1d1d;
+      }
 
       &:hover {
-               background: $primary-color;
+        .context-submenu {
+          display: block;
+          visibility: visible;
+          opacity: 1;
+        }
       }
     }
   }
@@ -92,4 +151,10 @@ export default {
   }
 }
 
+.disabled {
+  pointer-events: none;
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+
 </style>

src/renderer/components/BaseLoader.vue

@@ -0,0 +1,22 @@
+<template>
+   <div class="empty">
+      <div class="loading loading-lg" />
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'BaseLoader'
+};
+</script>
+<style scoped>
+.empty {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  left: 0;
+  justify-content: center;
+  right: 0;
+}
+</style>

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/BaseTextEditor.vue

@@ -0,0 +1,131 @@
+<template>
+   <div class="editor-wrapper">
+      <div
+         :id="`editor-${id}`"
+         class="editor"
+         :class="editorClass"
+         :style="{height: `${height}px`}"
+      />
+   </div>
+</template>
+
+<script>
+import * as ace from 'ace-builds';
+import 'ace-builds/webpack-resolver';
+import { mapGetters } from 'vuex';
+
+export default {
+   name: 'BaseTextEditor',
+   props: {
+      value: String,
+      mode: { type: String, default: 'text' },
+      editorClass: { type: String, default: '' },
+      autoFocus: { type: Boolean, default: false },
+      readOnly: { type: Boolean, default: false },
+      showLineNumbers: { type: Boolean, default: true },
+      height: { type: Number, default: 200 }
+   },
+   data () {
+      return {
+         editor: null,
+         id: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         editorTheme: 'settings/getEditorTheme',
+         editorFontSize: 'settings/getEditorFontSize',
+         autoComplete: 'settings/getAutoComplete',
+         lineWrap: 'settings/getLineWrap'
+      })
+   },
+   watch: {
+      mode () {
+         if (this.editor)
+            this.editor.session.setMode(`ace/mode/${this.mode}`);
+      },
+      editorTheme () {
+         if (this.editor)
+            this.editor.setTheme(`ace/theme/${this.editorTheme}`);
+      },
+      editorFontSize () {
+         const sizes = {
+            small: '12px',
+            medium: '14px',
+            large: '16px'
+         };
+
+         if (this.editor) {
+            this.editor.setOptions({
+               fontSize: sizes[this.editorFontSize]
+            });
+         }
+      },
+      autoComplete () {
+         if (this.editor) {
+            this.editor.setOptions({
+               enableLiveAutocompletion: this.autoComplete
+            });
+         }
+      },
+      lineWrap () {
+         if (this.editor) {
+            this.editor.setOptions({
+               wrap: this.lineWrap
+            });
+         }
+      }
+   },
+   created () {
+      this.id = this._uid;
+   },
+   mounted () {
+      this.editor = ace.edit(`editor-${this.id}`, {
+         mode: `ace/mode/${this.mode}`,
+         theme: `ace/theme/${this.editorTheme}`,
+         value: this.value || '',
+         fontSize: '14px',
+         printMargin: false,
+         readOnly: this.readOnly,
+         showLineNumbers: this.showLineNumbers,
+         showGutter: this.showLineNumbers
+      });
+
+      this.editor.setOptions({
+         enableBasicAutocompletion: false,
+         wrap: this.lineWrap,
+         enableSnippets: false,
+         enableLiveAutocompletion: false
+      });
+
+      this.editor.session.on('change', () => {
+         const content = this.editor.getValue();
+         this.$emit('update:value', content);
+      });
+
+      if (this.autoFocus) {
+         setTimeout(() => {
+            this.editor.focus();
+            this.editor.resize();
+         }, 20);
+      }
+
+      setTimeout(() => {
+         this.editor.resize();
+      }, 20);
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.editor-wrapper {
+  .editor {
+    width: 100%;
+  }
+}
+
+.ace_.mdi {
+  display: inline-block;
+  width: 17px;
+}
+</style>

src/renderer/components/BaseToast.vue

@@ -4,7 +4,7 @@
       class="toast mt-2"
       :class="toastStatus.className"
    >
-      <span class="p-vcentered text-left" v-html="`${toastStatus.iconTag} ${message}`" />
+      <span class="p-vcentered text-left"><i class="mdi mdi-24px mr-1" :class="toastStatus.iconName" /> {{ message }}</span>
       <button class="btn btn-clear" @click="hideToast" />
    </div>
 </template>
@@ -30,27 +30,27 @@ export default {
    computed: {
       toastStatus () {
          let className = '';
-         let iconTag = '';
+         let iconName = '';
          switch (this.status) {
             case 'success':
                className = 'toast-success';
-               iconTag = '<i class="material-icons mr-1">done</i>';
+               iconName = 'mdi-check';
                break;
             case 'error':
                className = 'toast-error';
-               iconTag = '<i class="material-icons mr-1">error</i>';
+               iconName = 'mdi-alert-rhombus';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconTag = '<i class="material-icons mr-1">warning</i>';
+               iconName = 'mdi-alert';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconTag = '<i class="material-icons mr-1">info_outline</i>';
+               iconName = 'mdi-information-outline';
                break;
          }
 
-         return { className, iconTag };
+         return { className, iconName };
       }
    },
    watch: {

src/renderer/components/BaseUploadInput.vue

@@ -0,0 +1,107 @@
+<template>
+   <label :for="`id_${id}`" class="file-uploader">
+      <span class="file-uploader-message">
+         <i class="mdi mdi-folder-open mr-1" />{{ message }}
+      </span>
+      <span class="text-ellipsis file-uploader-value">
+         {{ value | lastPart }}
+      </span>
+      <i
+         v-if="value.length"
+         class="file-uploader-reset mdi mdi-close"
+         @click.prevent="clear"
+      />
+      <form :ref="`form_${id}`">
+         <input
+            :id="`id_${id}`"
+            class="file-uploader-input"
+            type="file"
+            @change="$emit('change', $event)"
+         >
+      </form>
+   </label>
+</template>
+
+<script>
+export default {
+   name: 'BaseUploadInput',
+   filters: {
+      lastPart (string) {
+         if (!string) return '';
+
+         string = string.split(/[/\\]+/).pop();
+         if (string.length >= 19)
+            string = `...${string.slice(-19)}`;
+         return string;
+      }
+   },
+   props: {
+      message: {
+         default: 'Browse',
+         type: String
+      },
+      value: {
+         default: '',
+         type: String
+      }
+   },
+   data () {
+      return {
+         id: null
+      };
+   },
+   mounted () {
+      this.id = this._uid;
+   },
+   methods: {
+      clear () {
+         this.$emit('clear');
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.file-uploader {
+  border-radius: $border-radius;
+  height: 1.8rem;
+  line-height: 1.2rem;
+  display: flex;
+  cursor: pointer;
+  transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
+  position: relative;
+  flex: 1 1 auto;
+
+  > span {
+    padding: 0.25rem 0.4rem;
+  }
+
+  .file-uploader-message {
+    display: flex;
+  }
+
+  .file-uploader-input {
+    display: none;
+  }
+
+  .file-uploader-value {
+    display: block;
+    width: 100%;
+    padding-right: 1rem;
+  }
+
+  .file-uploader-reset {
+    z-index: 1;
+    position: absolute;
+    right: 5px;
+    top: calc(50% - 8px);
+  }
+}
+
+:disabled {
+  .file-uploader {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+</style>

src/renderer/components/BaseVirtualScroll.vue

@@ -21,47 +21,52 @@
 </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
       };
    },
+   watch: {
+      scrollElement () {
+         this.setScrollElement();
+      }
+   },
    mounted () {
-      this._checkScrollPosition = this.checkScrollPosition.bind(this);
-      this.checkScrollPosition();
-      this.$el.addEventListener('scroll', this._checkScrollPosition);
-      this.$el.addEventListener('wheel', this._checkScrollPosition);
+      this.setScrollElement();
    },
    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);
+      updateWindow () {
+         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);
@@ -71,6 +76,14 @@ export default {
 
          this.topHeight = firstCutIndex * this.itemHeight;
          this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
+      },
+      setScrollElement () {
+         if (this.localScrollElement)
+            this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
+
+         this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
+         this.updateWindow();
+         this.localScrollElement.addEventListener('scroll', this.checkScrollPosition);
       }
    }
 };

src/renderer/components/FakerSelect.vue

@@ -0,0 +1,257 @@
+<template>
+   <fieldset class="input-group mb-0">
+      <select
+         v-model="selectedGroup"
+         class="form-select"
+         :disabled="!isChecked"
+         style="flex-grow: 0;"
+         @change="onChange"
+      >
+         <option value="manual">
+            {{ $t('message.manualValue') }}
+         </option>
+         <option
+            v-for="group in fakerGroups"
+            :key="group.name"
+            :value="group.name"
+         >
+            {{ $t(`faker.${group.name}`) }}
+         </option>
+      </select>
+      <select
+         v-if="selectedGroup !== 'manual'"
+         v-model="selectedMethod"
+         class="form-select"
+         :disabled="!isChecked"
+         @change="onChange"
+      >
+         <option
+            v-for="method in fakerMethods"
+            :key="method.name"
+            :value="method.name"
+         >
+            {{ $t(`faker.${method.name}`) }}
+         </option>
+      </select>
+      <ForeignKeySelect
+         v-else-if="foreignKeys.includes(field.name)"
+         ref="formInput"
+         class="form-select"
+         :value.sync="selectedValue"
+         :key-usage="getKeyUsage(field.name)"
+         :disabled="!isChecked"
+      />
+      <input
+         v-else-if="inputProps().mask"
+         ref="formInput"
+         v-model="selectedValue"
+         v-mask="inputProps().mask"
+         class="form-input"
+         :type="inputProps().type"
+         :disabled="!isChecked"
+      >
+      <BaseUploadInput
+         v-else-if="inputProps().type === 'file'"
+         :value="selectedValue"
+         :message="$t('word.browse')"
+         @clear="clearValue"
+         @change="filesChange($event)"
+      />
+      <input
+         v-else-if="inputProps().type === 'number'"
+         ref="formInput"
+         v-model="selectedValue"
+         class="form-input"
+         step="any"
+         :type="inputProps().type"
+         :disabled="!isChecked"
+      >
+      <select
+         v-else-if="enumArray"
+         v-model="selectedValue"
+         class="form-select"
+         :disabled="!isChecked"
+         @change="onChange"
+      >
+         <option
+            v-for="val in enumArray"
+            :key="val"
+            :value="val"
+         >
+            {{ val }}
+         </option>
+      </select>
+      <input
+         v-else
+         ref="formInput"
+         v-model="selectedValue"
+         class="form-input"
+         :type="inputProps().type"
+         :disabled="!isChecked"
+      >
+      <template v-if="methodData && 'params' in methodData" class="columns">
+         <input
+            v-for="(option, key) in methodData.params"
+            :key="key"
+            v-model="methodParams[option]"
+            class="form-input column"
+            :type="inputProps().type"
+            :disabled="!isChecked"
+            :placeholder="option"
+         >
+      </template>
+      <slot />
+   </fieldset>
+</template>
+
+<script>
+import { VueMaskDirective } from 'v-mask';
+import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import BaseUploadInput from '@/components/BaseUploadInput';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
+import FakerMethods from 'common/FakerMethods';
+
+export default {
+   name: 'FakerSelect',
+   components: {
+      ForeignKeySelect,
+      BaseUploadInput
+   },
+   directives: {
+      mask: VueMaskDirective
+   },
+   props: {
+      type: String,
+      field: Object,
+      isChecked: Boolean,
+      foreignKeys: Array,
+      keyUsage: Array,
+      fieldLength: Number,
+      fieldObj: Object
+   },
+   data () {
+      return {
+         localType: null,
+         selectedGroup: 'manual',
+         selectedMethod: '',
+         selectedValue: '',
+         debounceTimeout: null,
+         methodParams: {},
+         enumArray: null
+      };
+   },
+   computed: {
+      fakerGroups () {
+         if ([...TEXT, ...LONG_TEXT].includes(this.type))
+            this.localType = 'string';
+         else if (NUMBER.includes(this.type))
+            this.localType = 'number';
+         else if (FLOAT.includes(this.type))
+            this.localType = 'float';
+         else if ([...DATE, ...DATETIME].includes(this.type))
+            this.localType = 'datetime';
+         else if (TIME.includes(this.type))
+            this.localType = 'time';
+         else
+            this.localType = 'none';
+
+         return FakerMethods.getGroupsByType(this.localType);
+      },
+      fakerMethods () {
+         return FakerMethods.getMethods({ type: this.localType, group: this.selectedGroup });
+      },
+      methodData () {
+         return this.fakerMethods.find(method => method.name === this.selectedMethod);
+      }
+   },
+   watch: {
+      fieldObj () {
+         if (this.fieldObj) {
+            if (Array.isArray(this.fieldObj.value)) {
+               this.enumArray = this.fieldObj.value;
+               this.selectedValue = this.fieldObj.value[0];
+            }
+            else
+               this.selectedValue = this.fieldObj.value;
+         }
+      },
+      selectedGroup () {
+         if (this.fakerMethods.length)
+            this.selectedMethod = this.fakerMethods[0].name;
+         else
+            this.selectedMethod = '';
+      },
+      selectedMethod () {
+         this.onChange();
+      },
+      selectedValue () {
+         clearTimeout(this.debounceTimeout);
+         this.debounceTimeout = null;
+         this.debounceTimeout = setTimeout(() => {
+            this.onChange();
+         }, 200);
+      }
+   },
+   methods: {
+      inputProps () {
+         if ([...TEXT, ...LONG_TEXT].includes(this.type))
+            return { type: 'text', mask: false };
+
+         if ([...NUMBER, ...FLOAT].includes(this.type))
+            return { type: 'number', mask: false };
+
+         if (TIME.includes(this.type)) {
+            let timeMask = '##:##:##';
+            const precision = this.fieldLength;
+
+            for (let i = 0; i < precision; i++)
+               timeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: timeMask };
+         }
+
+         if (DATE.includes(this.type))
+            return { type: 'text', mask: '####-##-##' };
+
+         if (DATETIME.includes(this.type)) {
+            let datetimeMask = '####-##-## ##:##:##';
+            const precision = this.fieldLength;
+
+            for (let i = 0; i < precision; i++)
+               datetimeMask += i === 0 ? '.#' : '#';
+
+            return { type: 'text', mask: datetimeMask };
+         }
+
+         if (BLOB.includes(this.type))
+            return { type: 'file', mask: false };
+
+         if (BIT.includes(this.type))
+            return { type: 'text', mask: false };
+
+         return { type: 'text', mask: false };
+      },
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.field === keyName);
+      },
+      filesChange (event) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.selectedValue = files[0].path;
+      },
+      clearValue () {
+         this.selectedValue = '';
+      },
+      onChange () {
+         this.$emit('update:value', {
+            group: this.selectedGroup,
+            method: this.selectedMethod,
+            params: this.methodParams,
+            value: this.selectedValue,
+            length: this.fieldLength
+         });
+      }
+   }
+};
+</script>

src/renderer/components/ForeignKeySelect.vue

@@ -0,0 +1,104 @@
+<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.foreign_column"
+         :value="row.foreign_column"
+         :selected="row.foreign_column === value"
+      >
+         {{ row.foreign_column }} {{ 'foreign_description' in row ? ` - ${row.foreign_description}` : '' | 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 () {
+         if (!this.foreignList.length) return true;
+         if (this.value === null) return false;
+         return this.foreignList.some(foreign => foreign.foreign_column.toString() === this.value.toString());
+      }
+   },
+   async created () {
+      let foreignDesc;
+      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') {
+            const textField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type) && field.name !== this.keyUsage.refField);
+            foreignDesc = textField ? textField.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: foreignDesc
+         });
+
+         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,21 +2,24 @@
    <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">
                      <div class="col-3">
-                        <label class="form-label">{{ $t('word.user') }}:</label>
+                        <label class="form-label">{{ $t('word.user') }}</label>
                      </div>
                      <div class="col-9">
                         <input
+                           ref="firstInput"
                            v-model="credentials.user"
                            class="form-input"
                            type="text"
@@ -25,7 +28,7 @@
                   </div>
                   <div class="form-group">
                      <div class="col-3">
-                        <label class="form-label">{{ $t('word.password') }}:</label>
+                        <label class="form-label">{{ $t('word.password') }}</label>
                      </div>
                      <div class="col-9">
                         <input
@@ -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/ModalAskParameters.vue

@@ -0,0 +1,130 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.run')"
+      :cancel-text="$t('word.cancel')"
+      size="400"
+      @confirm="runRoutine"
+      @hide="closeModal"
+   >
+      <template slot="header">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-play mr-1" />
+            <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
+         </div>
+      </template>
+      <div slot="body">
+         <div class="content">
+            <form class="form-horizontal">
+               <div
+                  v-for="(parameter, i) in inParameters"
+                  :key="parameter._id"
+                  class="form-group"
+               >
+                  <div class="col-4">
+                     <label class="form-label">{{ parameter.name }}</label>
+                  </div>
+                  <div class="col-8">
+                     <div class="input-group">
+                        <input
+                           :ref="i === 0 ? 'firstInput' : ''"
+                           v-model="values[`${i}-${parameter.name}`]"
+                           class="form-input"
+                           type="text"
+                        >
+                        <span class="input-group-addon field-type" :class="typeClass(parameter.type)">
+                           {{ parameter.type }} {{ parameter.length | wrapNumber }}
+                        </span>
+                     </div>
+                  </div>
+               </div>
+            </form>
+         </div>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import { NUMBER, FLOAT } from 'common/fieldTypes';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalAskParameters',
+   components: {
+      ConfirmModal
+   },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
+   props: {
+      localRoutine: Object,
+      client: String
+   },
+   data () {
+      return {
+         values: {}
+      };
+   },
+   computed: {
+      inParameters () {
+         return this.localRoutine.parameters.filter(param => param.context === 'IN');
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput[0].focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      typeClass (type) {
+         if (type)
+            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+         return '';
+      },
+      runRoutine () {
+         const valArr = Object.keys(this.values).reduce((acc, curr, i) => {
+            let qc;
+            switch (this.client) {
+               case 'maria':
+               case 'mysql':
+                  qc = '"';
+                  break;
+               case 'pg':
+                  qc = '\'';
+                  break;
+               default:
+                  qc = '"';
+            }
+
+            const param = this.localRoutine.parameters.find(param => `${i}-${param.name}` === curr);
+
+            const value = [...NUMBER, ...FLOAT].includes(param.type) ? this.values[curr] : `${qc}${this.values[curr]}${qc}`;
+            acc.push(value);
+            return acc;
+         }, []);
+         this.$emit('confirm', valArr);
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .field-type {
+    font-size: 0.6rem;
+  }
+</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,22 +2,45 @@
    <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="content">
+         <div class="modal-body p-0">
+            <div class="panel">
+               <div class="panel-nav">
+                  <ul class="tab tab-block">
+                     <li
+                        class="tab-item c-hand"
+                        :class="{'active': selectedTab === 'general'}"
+                        @click="selectTab('general')"
+                     >
+                        <a class="tab-link">{{ $t('word.general') }}</a>
+                     </li>
+                     <li
+                        class="tab-item c-hand"
+                        :class="{'active': selectedTab === 'ssl'}"
+                        @click="selectTab('ssl')"
+                     >
+                        <a class="tab-link">{{ $t('word.ssl') }}</a>
+                     </li>
+                  </ul>
+               </div>
+               <div v-if="selectedTab === 'general'" class="panel-body py-0">
+                  <div class="container">
                      <form class="form-horizontal">
                         <fieldset class="m-0" :disabled="isTesting">
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.connectionName') }}:</label>
+                                 <label class="form-label">{{ $t('word.connectionName') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
+                                    ref="firstInput"
                                     v-model="localConnection.name"
                                     class="form-input"
                                     type="text"
@@ -26,7 +49,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.client') }}:</label>
+                                 <label class="form-label">{{ $t('word.client') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <select v-model="localConnection.client" class="form-select">
@@ -36,21 +59,21 @@
                                     <option value="maria">
                                        MariaDB
                                     </option>
-                              <option value="mssql">
-                                 Microsoft SQL
-                              </option>
                                     <option value="pg">
                                        PostgreSQL
                                     </option>
+                                    <!-- <option value="mssql">
+                                       Microsoft SQL
+                                    </option>
                                     <option value="oracledb">
                                        Oracle DB
-                              </option>
+                                    </option> -->
                                  </select>
                               </div>
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.hostName') }}/IP:</label>
+                                 <label class="form-label">{{ $t('word.hostName') }}/IP</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -62,7 +85,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.port') }}:</label>
+                                 <label class="form-label">{{ $t('word.port') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -74,9 +97,21 @@
                                  >
                               </div>
                            </div>
+                           <div v-if="customizations.database" class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.database') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <input
+                                    v-model="localConnection.database"
+                                    class="form-input"
+                                    type="text"
+                                 >
+                              </div>
+                           </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.user') }}:</label>
+                                 <label class="form-label">{{ $t('word.user') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -89,7 +124,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.password') }}:</label>
+                                 <label class="form-label">{{ $t('word.password') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -111,13 +146,92 @@
                         </fieldset>
                      </form>
                   </div>
-         </div>
-         <div class="modal-footer text-light">
                   <BaseToast
                      class="mb-2"
                      :message="toast.message"
                      :status="toast.status"
                   />
+               </div>
+               <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+                  <div class="container">
+                     <form class="form-horizontal">
+                        <div class="form-group">
+                           <div class="col-4 col-sm-12">
+                              <label class="form-label">
+                                 {{ $t('message.enableSsl') }}
+                              </label>
+                           </div>
+                           <div class="col-8 col-sm-12">
+                              <label class="form-switch d-inline-block" @click.prevent="toggleSsl">
+                                 <input type="checkbox" :checked="localConnection.ssl">
+                                 <i class="form-icon" />
+                              </label>
+                           </div>
+                        </div>
+                        <fieldset class="m-0" :disabled="isTesting || !localConnection.ssl">
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.privateKey') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="localConnection.key"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('key')"
+                                    @change="pathSelection($event, 'key')"
+                                 />
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.certificate') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="localConnection.cert"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('cert')"
+                                    @change="pathSelection($event, 'cert')"
+                                 />
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="localConnection.ca"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('ca')"
+                                    @change="pathSelection($event, 'ca')"
+                                 />
+                              </div>
+                           </div>
+
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.ciphers') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <input
+                                    ref="firstInput"
+                                    v-model="localConnection.ciphers"
+                                    class="form-input"
+                                    type="text"
+                                 >
+                              </div>
+                           </div>
+                        </fieldset>
+                     </form>
+                  </div>
+                  <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,23 +249,31 @@
             </div>
             <ModalAskCredentials
                v-if="isAsking"
-         @closeAsking="closeAsking"
+               @close-asking="closeAsking"
                @credentials="continueTest"
             />
          </div>
+      </div>
+   </div>
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
+import BaseUploadInput from '@/components/BaseUploadInput';
 
 export default {
    name: 'ModalEditConnection',
    components: {
       ModalAskCredentials,
-      BaseToast
+      BaseToast,
+      BaseUploadInput
+   },
+   props: {
+      connection: Object
    },
    data () {
       return {
@@ -161,20 +283,28 @@ export default {
          },
          isTesting: false,
          isAsking: false,
-         localConnection: null
+         localConnection: null,
+         selectedTab: 'general'
       };
    },
    computed: {
-      ...mapGetters({
-         connection: 'application/getSelectedConnection'
-      })
+      customizations () {
+         return customizations[this.connection.client];
+      }
    },
    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 +354,29 @@ export default {
       closeAsking () {
          this.isTesting = false;
          this.isAsking = false;
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.localConnection.ssl = !this.localConnection.ssl;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localConnection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.localConnection[name] = '';
       }
    }
 };
@@ -231,6 +384,8 @@ export default {
 
 <style scoped>
   .modal-container {
+    position: absolute;
     max-width: 450px;
+    top: 17.5vh;
   }
 </style>

src/renderer/components/ModalEditSchema.vue

@@ -0,0 +1,170 @@
+<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" />
+                  <span class="cut-text">{{ $t('message.editSchema') }}</span>
+               </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.schemaName')"
+                           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="updateSchema">
+               {{ $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 Schema from '@/ipc-api/Schema';
+
+export default {
+   name: 'ModalEditSchema',
+   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 Schema.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 updateSchema () {
+         if (this.database.collation !== this.database.prevCollation) {
+            try {
+               const { status, response } = await Schema.updateSchema({
+                  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/ModalFakerRows.vue

@@ -0,0 +1,400 @@
+<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" />
+                  <span class="cut-text">{{ $t('message.tableFiller') }}</span>
+               </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 in fields"
+                        :key="field.name"
+                        class="form-group"
+                     >
+                        <div class="col-3 col-sm-12">
+                           <label class="form-label" :title="field.name">{{ field.name }}</label>
+                        </div>
+                        <div class="column columns col-sm-12">
+                           <FakerSelect
+                              :type="field.type"
+                              class="column columns pr-0"
+                              :is-checked="!fieldsToExclude.includes(field.name)"
+                              :foreign-keys="foreignKeys"
+                              :key-usage="keyUsage"
+                              :field="field"
+                              :field-length="fieldLength(field)"
+                              :field-obj="localRow[field.name]"
+                              :value.sync="localRow[field.name]"
+                           >
+                              <span class="input-group-addon field-type" :class="typeClass(field.type)">
+                                 {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                              </span>
+                              <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                                 <input
+                                    type="checkbox"
+                                    :checked="!field.autoIncrement"
+                                    @change.prevent="toggleFields($event, field)"
+                                 ><i class="form-icon" />
+                              </label>
+                           </FakerSelect>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light columns">
+            <div class="column d-flex" :class="hasFakes ? 'col-4' : 'col-2'">
+               <div class="input-group 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
+                  v-if="hasFakes"
+                  class="tooltip tooltip-right ml-2"
+                  :data-tooltip="$t('message.fakeDataLanguage')"
+               >
+                  <select v-model="fakerLocale" class="form-select">
+                     <option value="ar">
+                        Arabic
+                     </option><option value="az">
+                        Azerbaijani
+                     </option><option value="zh_CN">
+                        Chinese
+                     </option><option value="zh_TW">
+                        Chinese (Taiwan)
+                     </option><option value="cz">
+                        Czech
+                     </option><option value="nl">
+                        Dutch
+                     </option><option value="nl_BE">
+                        Dutch (Belgium)
+                     </option><option value="en">
+                        English
+                     </option><option value="en_AU_ocker">
+                        English (Australia Ocker)
+                     </option><option value="en_AU">
+                        English (Australia)
+                     </option><option value="en_BORK">
+                        English (Bork)
+                     </option><option value="en_CA">
+                        English (Canada)
+                     </option><option value="en_GB">
+                        English (Great Britain)
+                     </option><option value="en_IND">
+                        English (India)
+                     </option><option value="en_IE">
+                        English (Ireland)
+                     </option><option value="en_ZA">
+                        English (South Africa)
+                     </option><option value="en_US">
+                        English (United States)
+                     </option><option value="fa">
+                        Farsi
+                     </option><option value="fi">
+                        Finnish
+                     </option><option value="fr">
+                        French
+                     </option><option value="fr_CA">
+                        French (Canada)
+                     </option><option value="fr_CH">
+                        French (Switzerland)
+                     </option><option value="ge">
+                        Georgian
+                     </option><option value="de">
+                        German
+                     </option><option value="de_AT">
+                        German (Austria)
+                     </option><option value="de_CH">
+                        German (Switzerland)
+                     </option><option value="hr">
+                        Hrvatski
+                     </option><option value="id_ID">
+                        Indonesia
+                     </option><option value="it">
+                        Italian
+                     </option><option value="ja">
+                        Japanese
+                     </option><option value="ko">
+                        Korean
+                     </option><option value="nep">
+                        Nepalese
+                     </option><option value="nb_NO">
+                        Norwegian
+                     </option><option value="pl">
+                        Polish
+                     </option><option value="pt_BR">
+                        Portuguese (Brazil)
+                     </option><option value="pt_PT">
+                        Portuguese (Portugal)
+                     </option><option value="ro">
+                        Romanian
+                     </option><option value="ru">
+                        Russian
+                     </option><option value="sk">
+                        Slovakian
+                     </option><option value="es">
+                        Spanish
+                     </option><option value="es_MX">
+                        Spanish (Mexico)
+                     </option><option value="sv">
+                        Swedish
+                     </option><option value="tr">
+                        Turkish
+                     </option><option value="uk">
+                        Ukrainian
+                     </option><option value="vi">
+                        Vietnamese
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div class="column col-auto">
+               <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, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { mapGetters, mapActions } from 'vuex';
+import Tables from '@/ipc-api/Tables';
+import FakerSelect from '@/components/FakerSelect';
+
+export default {
+   name: 'ModalFakerRows',
+   components: {
+      FakerSelect
+   },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
+   props: {
+      tabUid: [String, Number],
+      fields: Array,
+      keyUsage: Array
+   },
+   data () {
+      return {
+         localRow: {},
+         fieldsToExclude: [],
+         nInserts: 1,
+         isInserting: false,
+         fakerLocale: 'en'
+      };
+   },
+   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);
+      },
+      hasFakes () {
+         return Object.keys(this.localRow).some(field => 'group' in this.localRow[field] && this.localRow[field].group !== 'manual');
+      }
+   },
+   watch: {
+      nInserts (val) {
+         if (!val || val < 1)
+            this.nInserts = 1;
+         else if (val > 1000)
+            this.nInserts = 1000;
+      }
+   },
+   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, ...FLOAT].includes(field.type))
+               fieldDefault = Number.isNaN(+field.default) ? null : +field.default;
+            else if ([...TEXT, ...LONG_TEXT].includes(field.type)) {
+               fieldDefault = field.default
+                  ? field.default.includes('\'')
+                     ? field.default.split('\'')[1]
+                     : field.default
+                  : '';
+            }
+            else if ([...TIME, ...DATE].includes(field.type))
+               fieldDefault = field.default;
+            else if (BIT.includes(field.type))
+               fieldDefault = field.default.replaceAll('\'', '').replaceAll('b', '');
+            else if (DATETIME.includes(field.type)) {
+               if (field.default && ['current_timestamp', 'now()'].includes(field.default.toLowerCase())) {
+                  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}`);
+               }
+               else
+                  fieldDefault = field.default;
+            }
+            else if (field.enumValues)
+               fieldDefault = field.enumValues.replaceAll('\'', '').split(',');
+            else
+               fieldDefault = field.default;
+         }
+
+         rowObj[field.name] = { value: fieldDefault };
+
+         if (field.autoIncrement)// Disable by default auto increment fields
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      }
+
+      this.localRow = { ...rowObj };
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      typeClass (type) {
+         if (type)
+            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+         return '';
+      },
+      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.insertTableFakeRows({
+               uid: this.selectedWorkspace,
+               schema: this.workspace.breadcrumbs.schema,
+               table: this.workspace.breadcrumbs.table,
+               row: rowToInsert,
+               repeat: this.nInserts,
+               fields: fieldTypes,
+               locale: this.fakerLocale
+            });
+
+            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;
+         else if (TEXT.includes(field.type)) return field.charLength;
+         return field.length;
+      },
+      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: 800px;
+  }
+
+  .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;
+  }
+
+  .field-type {
+    font-size: 0.6rem;
+  }
+</style>

src/renderer/components/ModalNewConnection.vue

@@ -2,22 +2,46 @@
    <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" />
+                  <span class="cut-text">{{ $t('message.createNewConnection') }}</span>
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
-         <div class="modal-body">
-            <div class="content">
+         <div class="modal-body p-0">
+            <div class="panel">
+               <div class="panel-nav">
+                  <ul class="tab tab-block">
+                     <li
+                        class="tab-item c-hand"
+                        :class="{'active': selectedTab === 'general'}"
+                        @click="selectTab('general')"
+                     >
+                        <a class="tab-link">{{ $t('word.general') }}</a>
+                     </li>
+                     <li
+                        class="tab-item c-hand"
+                        :class="{'active': selectedTab === 'ssl'}"
+                        @click="selectTab('ssl')"
+                     >
+                        <a class="tab-link">{{ $t('word.ssl') }}</a>
+                     </li>
+                  </ul>
+               </div>
+               <div v-if="selectedTab === 'general'" class="panel-body py-0">
+                  <div class="container">
                      <form class="form-horizontal">
                         <fieldset class="m-0" :disabled="isTesting">
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.connectionName') }}:</label>
+                                 <label class="form-label">{{ $t('word.connectionName') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
+                                    ref="firstInput"
                                     v-model="connection.name"
                                     class="form-input"
                                     type="text"
@@ -26,7 +50,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.client') }}:</label>
+                                 <label class="form-label">{{ $t('word.client') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <select
@@ -40,21 +64,21 @@
                                     <option value="maria">
                                        MariaDB
                                     </option>
-                              <option value="mssql">
-                                 Microsoft SQL
-                              </option>
                                     <option value="pg">
                                        PostgreSQL
                                     </option>
+                                 <!-- <option value="mssql">
+                                    Microsoft SQL
+                                 </option>
                                  <option value="oracledb">
                                     Oracle DB
-                              </option>
+                                 </option> -->
                                  </select>
                               </div>
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.hostName') }}/IP:</label>
+                                 <label class="form-label">{{ $t('word.hostName') }}/IP</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -66,7 +90,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.port') }}:</label>
+                                 <label class="form-label">{{ $t('word.port') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -78,9 +102,21 @@
                                  >
                               </div>
                            </div>
+                           <div v-if="customizations.database" class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.database') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <input
+                                    v-model="connection.database"
+                                    class="form-input"
+                                    type="text"
+                                 >
+                              </div>
+                           </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.user') }}:</label>
+                                 <label class="form-label">{{ $t('word.user') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -93,7 +129,7 @@
                            </div>
                            <div class="form-group">
                               <div class="col-4 col-sm-12">
-                           <label class="form-label">{{ $t('word.password') }}:</label>
+                                 <label class="form-label">{{ $t('word.password') }}</label>
                               </div>
                               <div class="col-8 col-sm-12">
                                  <input
@@ -115,13 +151,94 @@
                         </fieldset>
                      </form>
                   </div>
-         </div>
-         <div class="modal-footer text-light">
                   <BaseToast
                      class="mb-2"
                      :message="toast.message"
                      :status="toast.status"
                   />
+               </div>
+               <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+                  <div class="container">
+                     <form class="form-horizontal">
+                        <div class="form-group">
+                           <div class="col-4 col-sm-12">
+                              <label class="form-label">
+                                 {{ $t('message.enableSsl') }}
+                              </label>
+                           </div>
+                           <div class="col-8 col-sm-12">
+                              <label class="form-switch d-inline-block" @click.prevent="toggleSsl">
+                                 <input type="checkbox" :checked="connection.ssl">
+                                 <i class="form-icon" />
+                              </label>
+                           </div>
+                        </div>
+                        <fieldset class="m-0" :disabled="isTesting || !connection.ssl">
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.privateKey') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="connection.key"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('key')"
+                                    @change="pathSelection($event, 'key')"
+                                 />
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.certificate') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="connection.cert"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('cert')"
+                                    @change="pathSelection($event, 'cert')"
+                                 />
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <BaseUploadInput
+                                    :value="connection.ca"
+                                    :message="$t('word.browse')"
+                                    @clear="pathClear('ca')"
+                                    @change="pathSelection($event, 'ca')"
+                                 />
+                              </div>
+                           </div>
+
+                           <div class="form-group">
+                              <div class="col-4 col-sm-12">
+                                 <label class="form-label">{{ $t('word.ciphers') }}</label>
+                              </div>
+                              <div class="col-8 col-sm-12">
+                                 <input
+                                    ref="firstInput"
+                                    v-model="connection.ciphers"
+                                    class="form-input"
+                                    type="text"
+                                 >
+                              </div>
+                           </div>
+                        </fieldset>
+                     </form>
+                  </div>
+                  <BaseToast
+                     class="mb-2"
+                     :message="toast.message"
+                     :status="toast.status"
+                  />
+               </div>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
             <button
                class="btn btn-gray mr-2"
                :class="{'loading': isTesting}"
@@ -139,7 +256,7 @@
       </div>
       <ModalAskCredentials
          v-if="isAsking"
-         @closeAsking="closeAsking"
+         @close-asking="closeAsking"
          @credentials="continueTest"
       />
    </div>
@@ -147,16 +264,19 @@
 
 <script>
 import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
 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';
+import BaseUploadInput from '@/components/BaseUploadInput';
 
 export default {
    name: 'ModalNewConnection',
    components: {
       ModalAskCredentials,
-      BaseToast
+      BaseToast,
+      BaseUploadInput
    },
    data () {
       return {
@@ -164,40 +284,53 @@ export default {
             name: '',
             client: 'mysql',
             host: '127.0.0.1',
-            port: '3306',
-            user: 'root',
+            database: null,
+            port: null,
+            user: null,
             password: '',
             ask: false,
-            uid: uidGen()
+            uid: uidGen('C'),
+            ssl: false,
+            cert: '',
+            key: '',
+            ca: '',
+            ciphers: ''
+
          },
          toast: {
             status: '',
             message: ''
          },
          isTesting: false,
-         isAsking: false
+         isAsking: false,
+         selectedTab: 'general'
       };
    },
+   computed: {
+      customizations () {
+         return customizations[this.connection.client];
+      }
+   },
+   created () {
+      this.setDefaults();
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       ...mapActions({
          closeModal: 'application/hideNewConnModal',
          addConnection: 'connections/addConnection'
       }),
       setDefaults () {
-         switch (this.connection.client) {
-            case 'mysql':
-               this.connection.port = '3306';
-               break;
-            case 'mssql':
-               this.connection.port = '1433';
-               break;
-            case 'pg':
-               this.connection.port = '5432';
-               break;
-            case 'oracledb':
-               this.connection.port = '1521';
-               break;
-         }
+         this.connection.user = this.customizations.defaultUser;
+         this.connection.port = this.customizations.defaultPort;
+         this.connection.database = this.customizations.defaultDatabase;
       },
       async startTest () {
          this.isTesting = true;
@@ -211,6 +344,7 @@ export default {
          else {
             try {
                const res = await Connection.makeTest(this.connection);
+               console.log(res.response);
                if (res.status === 'error')
                   this.toast = { status: 'error', message: res.response.message };
                else
@@ -247,6 +381,26 @@ export default {
       closeAsking () {
          this.isAsking = false;
          this.isTesting = false;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.connection.ssl = !this.connection.ssl;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.connection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.connection[name] = '';
       }
    }
 };
@@ -254,6 +408,8 @@ export default {
 
 <style scoped>
   .modal-container {
+    position: absolute;
     max-width: 450px;
+    top: 17.5vh;
   }
 </style>

src/renderer/components/ModalNewFunction.vue

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

src/renderer/components/ModalNewRoutine.vue

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

src/renderer/components/ModalNewScheduler.vue

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

src/renderer/components/ModalNewSchema.vue

@@ -0,0 +1,149 @@
+<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" />
+                  <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
+               </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.schemaName')"
+                        >
+                     </div>
+                  </div>
+                  <div v-if="customizations.collations" 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"
+               :class="{'loading': isLoading}"
+               @click.stop="createSchema"
+            >
+               {{ $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 Schema from '@/ipc-api/Schema';
+
+export default {
+   name: 'ModalNewSchema',
+   data () {
+      return {
+         isLoading: false,
+         database: {
+            name: '',
+            collation: ''
+         }
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      },
+      customizations () {
+         return this.getWorkspace(this.selectedWorkspace).customizations;
+      },
+      defaultCollation () {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server') ? 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 createSchema () {
+         this.isLoading = true;
+         try {
+            const { status, response } = await Schema.createSchema({
+               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 });
+         }
+         this.isLoading = false;
+      },
+      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,130 @@
+<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 v-if="workspace.customizations.comment" 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 v-if="workspace.customizations.collations" 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 v-if="workspace.customizations.engines" 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: {
+      workspace: Object
+   },
+   data () {
+      return {
+         localOptions: {
+            name: '',
+            comment: '',
+            collation: '',
+            engine: ''
+         },
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      defaultCollation () {
+         if (this.workspace.customizations.collations)
+            return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+         return '';
+      },
+      defaultEngine () {
+         if (this.workspace.customizations.engines)
+            return this.workspace.engines.find(engine => engine.isDefault).name;
+         return '';
+      }
+   },
+   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,360 @@
+<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" />
+                  <span class="cut-text">{{ $t('message.addNewRow') }}</span>
+               </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-if="inputProps(field).type === 'number'"
+                              ref="formInput"
+                              v-model="localRow[field.name]"
+                              class="form-input"
+                              step="any"
+                              :type="inputProps(field).type"
+                              :disabled="fieldsToExclude.includes(field.name)"
+                              :tabindex="key+1"
+                           >
+                           <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="typeCLass(field.type)">
+                              {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                           </span>
+                           <label class="form-checkbox ml-3" :title="$t('word.insert')">
+                              <input
+                                 type="checkbox"
+                                 :checked="!field.autoIncrement"
+                                 @change.prevent="toggleFields($event, field)"
+                              ><i class="form-icon" />
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
+               <input
+                  v-model="nInserts"
+                  type="number"
+                  class="form-input"
+                  min="1"
+                  :disabled="isInserting"
+               >
+               <span class="input-group-addon">
+                  <i class="mdi mdi-24px mdi-repeat" />
+               </span>
+            </div>
+            <div>
+               <button
+                  class="btn btn-primary mr-2"
+                  :class="{'loading': isInserting}"
+                  @click.stop="insertRows"
+               >
+                  {{ $t('word.insert') }}
+               </button>
+               <button class="btn btn-link" @click.stop="closeModal">
+                  {{ $t('word.close') }}
+               </button>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import { VueMaskDirective } from 'v-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: VueMaskDirective
+   },
+   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;
+         else if (val > 1000)
+            this.nInserts = 1000;
+      }
+   },
+   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, ...FLOAT].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'
+      }),
+      typeClass (type) {
+         if (type)
+            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+         return '';
+      },
+      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;
+         else if (TEXT.includes(field.type)) return field.charLength;
+         return field.length;
+      },
+      inputProps (field) {
+         if ([...TEXT, ...LONG_TEXT].includes(field.type))
+            return { type: 'text', mask: false };
+
+         if ([...NUMBER, ...FLOAT].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/ModalNewTrigger.vue

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

src/renderer/components/ModalNewTriggerFunction.vue

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

src/renderer/components/ModalNewView.vue

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

src/renderer/components/ModalProcessesList.vue

@@ -0,0 +1,311 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0 pb-4">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-memory mr-1" />
+                  <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="processes-toolbar py-2 px-4">
+            <div class="dropdown">
+               <div class="btn-group">
+                  <button
+                     class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
+                     :class="{'loading':isQuering}"
+                     title="F5"
+                     @click="getProcessesList"
+                  >
+                     <span>{{ $t('word.refresh') }}</span>
+                     <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh ml-1" />
+                     <i v-else class="mdi mdi-24px mdi-history mdi-flip-h ml-1" />
+                  </button>
+                  <div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
+                     <i class="mdi mdi-24px mdi-menu-down" />
+                  </div>
+                  <div class="menu px-3">
+                     <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
+                     <input
+                        v-model="autorefreshTimer"
+                        class="slider no-border"
+                        type="range"
+                        min="0"
+                        max="15"
+                        step="0.5"
+                        @change="setRefreshInterval"
+                     >
+                  </div>
+               </div>
+            </div>
+            <div class="workspace-query-info">
+               <div v-if="sortedResults.length">
+                  {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
+               </div>
+            </div>
+         </div>
+         <div class="modal-body py-0 workspace-query-results">
+            <div
+               ref="tableWrapper"
+               class="vscroll"
+               :style="{'height': resultsSize+'px'}"
+            >
+               <div ref="table" class="table table-hover">
+                  <div class="thead">
+                     <div class="tr">
+                        <div
+                           v-for="(field, index) in fields"
+                           :key="index"
+                           class="th c-hand"
+                        >
+                           <div ref="columnResize" class="column-resizable">
+                              <div class="table-column-title" @click="sort(field)">
+                                 <span>{{ field.toUpperCase() }}</span>
+                                 <i
+                                    v-if="currentSort === field"
+                                    class="mdi sort-icon"
+                                    :class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
+                                 />
+                              </div>
+                           </div>
+                        </div>
+                     </div>
+                  </div>
+                  <BaseVirtualScroll
+                     ref="resultTable"
+                     :items="sortedResults"
+                     :item-height="22"
+                     class="tbody"
+                     :visible-height="resultsSize"
+                     :scroll-element="scrollElement"
+                  >
+                     <template slot-scope="{ items }">
+                        <ProcessesListRow
+                           v-for="row in items"
+                           :key="row._id"
+                           class="process-row"
+                           :row="row"
+                           @contextmenu="contextMenu"
+                           @stop-refresh="stopRefresh"
+                        />
+                     </template>
+                  </BaseVirtualScroll>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Schema from '@/ipc-api/Schema';
+import BaseVirtualScroll from '@/components/BaseVirtualScroll';
+import ProcessesListRow from '@/components/ProcessesListRow';
+
+export default {
+   name: 'ModalProcessesList',
+   components: {
+      BaseVirtualScroll,
+      ProcessesListRow
+   },
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         resultsSize: 1000,
+         isQuering: false,
+         autorefreshTimer: 0,
+         refreshInterval: null,
+         results: [],
+         fields: [],
+         currentSort: '',
+         currentSortDir: 'asc',
+         scrollElement: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         getConnectionName: 'connections/getConnectionName'
+      }),
+      connectionName () {
+         return this.getConnectionName(this.connection.uid);
+      },
+      sortedResults () {
+         if (this.currentSort) {
+            return [...this.results].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.results;
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey, { capture: true });
+   },
+   updated () {
+      if (this.$refs.table)
+         this.refreshScroller();
+
+      if (this.$refs.tableWrapper)
+         this.scrollElement = this.$refs.tableWrapper;
+   },
+   mounted () {
+      this.getProcessesList();
+      window.addEventListener('resize', this.resizeResults);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey, { capture: true });
+      window.removeEventListener('resize', this.resizeResults);
+      clearInterval(this.refreshInterval);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async getProcessesList () {
+         this.isQuering = true;
+
+         // if table changes clear cached values
+         if (this.lastTable !== this.table)
+            this.results = [];
+
+         try { // Table data
+            const { status, response } = await Schema.getProcesses(this.connection.uid);
+
+            if (status === 'success') {
+               this.results = response;
+               this.fields = response.length ? Object.keys(response[0]) : [];
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isQuering = false;
+      },
+      setRefreshInterval () {
+         this.clearRefresh();
+
+         if (+this.autorefreshTimer) {
+            this.refreshInterval = setInterval(() => {
+               if (!this.isQuering)
+                  this.getProcessesList();
+            }, this.autorefreshTimer * 1000);
+         }
+      },
+      clearRefresh () {
+         if (this.refreshInterval)
+            clearInterval(this.refreshInterval);
+      },
+      resizeResults () {
+         if (this.$refs.resultTable) {
+            const el = this.$refs.tableWrapper.parentElement;
+
+            if (el) {
+               const size = el.offsetHeight;
+               this.resultsSize = size;
+            }
+            this.$refs.resultTable.updateWindow();
+         }
+      },
+      refreshScroller () {
+         this.resizeResults();
+      },
+      sort (field) {
+         if (field === this.currentSort) {
+            if (this.currentSortDir === 'asc')
+               this.currentSortDir = 'desc';
+            else
+               this.resetSort();
+         }
+         else {
+            this.currentSortDir = 'asc';
+            this.currentSort = field;
+         }
+      },
+      resetSort () {
+         this.currentSort = '';
+         this.currentSortDir = 'asc';
+      },
+      stopRefresh () {
+         this.autorefreshTimer = 0;
+         this.clearRefresh();
+      },
+      contextMenu () {},
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+         if (e.key === 'F5')
+            this.getProcessesList();
+      }
+   }
+};
+</script>
+
+<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;
+}
+
+.sort-icon {
+  font-size: 0.7rem;
+  line-height: 1;
+  margin-left: 0.2rem;
+}
+
+.result-tabs {
+  background: transparent !important;
+  margin: 0;
+}
+
+.modal {
+  align-items: flex-start;
+
+  .modal-container {
+    max-width: 75vw;
+    margin-top: 10vh;
+
+    .modal-body {
+      height: 80vh;
+    }
+  }
+}
+
+.processes-toolbar {
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/renderer/components/ModalSettings.vue

@@ -2,9 +2,12 @@
    <div id="settings" class="modal active">
       <a class="modal-overlay c-hand" @click="closeModal" />
       <div class="modal-container">
-         <div class="modal-header">
-            <div class="modal-title h5">
-               {{ $t('word.settings') }}
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-cog mr-1" />
+                  <span class="cut-text">{{ $t('word.settings') }}</span>
+               </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
@@ -13,44 +16,55 @@
                <div class="panel-nav">
                   <ul class="tab tab-block">
                      <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                         :class="{'active': selectedTab === 'general'}"
                         @click="selectTab('general')"
                      >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
+                        <a class="tab-link">{{ $t('word.general') }}</a>
                      </li>
                      <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                         :class="{'active': selectedTab === 'themes'}"
                         @click="selectTab('themes')"
                      >
-                        <a class="c-hand">{{ $t('word.themes') }}</a>
+                        <a class="tab-link">{{ $t('word.themes') }}</a>
                      </li>
                      <li
-                        class="tab-item"
+                        v-if="updateStatus !== 'disabled'"
+                        class="tab-item c-hand"
                         :class="{'active': selectedTab === 'update'}"
                         @click="selectTab('update')"
                      >
-                        <a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
+                        <a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                      </li>
                      <li
-                        class="tab-item"
+                        class="tab-item c-hand"
+                        :class="{'active': selectedTab === 'changelog'}"
+                        @click="selectTab('changelog')"
+                     >
+                        <a class="tab-link">{{ $t('word.changelog') }}</a>
+                     </li>
+                     <li
+                        class="tab-item c-hand"
                         :class="{'active': selectedTab === 'about'}"
                         @click="selectTab('about')"
                      >
-                        <a class="c-hand">{{ $t('word.about') }}</a>
+                        <a class="tab-link">{{ $t('word.about') }}</a>
                      </li>
                   </ul>
                </div>
-
-               <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 v-show="selectedTab === 'general'" class="panel-body py-4">
+                  <div class="container">
+                     <form class="form-horizontal columns">
+                        <div class="column col-12 h6 text-uppercase mb-1">
+                           {{ $t('word.application') }}
+                        </div>
+                        <div class="column col-8 col-sm-12 mb-2">
+                           <div class="form-group mb-4">
                               <div class="col-6 col-sm-12">
                                  <label class="form-label">
-                                 <i class="material-icons md-18 mr-1">translate</i>
-                                 {{ $t('word.language') }}:
+                                    <i class="mdi mdi-18px mdi-translate mr-1" />
+                                    {{ $t('word.language') }}
                                  </label>
                               </div>
                               <div class="col-6 col-sm-12">
@@ -69,27 +83,198 @@
                                  </select>
                               </div>
                            </div>
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.dataTabPageSize') }}
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <select
+                                    v-model="localPageSize"
+                                    class="form-select"
+                                    @change="changePageSize(+localPageSize)"
+                                 >
+                                    <option
+                                       v-for="size in pageSizes"
+                                       :key="size"
+                                    >
+                                       {{ size }}
+                                    </option>
+                                 </select>
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.notificationsTimeout') }}
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <div class="input-group">
+                                    <input
+                                       v-model="localTimeout"
+                                       class="form-input"
+                                       type="number"
+                                       min="1"
+                                       @focusout="checkNotificationsTimeout"
+                                    >
+                                    <span class="input-group-addon">{{ $t('word.seconds') }}</span>
+                                 </div>
+                              </div>
+                           </div>
+                        </div>
+
+                        <div class="column col-12 h6 mt-4 text-uppercase mb-1">
+                           {{ $t('word.editor') }}
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('word.autoCompletion') }}
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
+                                    <input type="checkbox" :checked="selectedAutoComplete">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <div class="form-group">
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.wrapLongLines') }}
+                                 </label>
+                              </div>
+                              <div class="col-6 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
+                                    <input type="checkbox" :checked="selectedLineWrap">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
                         </div>
                      </form>
                   </div>
+               </div>
 
-               <div v-if="selectedTab === 'themes'" class="panel-body py-4">
-                  <div class="text-center">
-                     <p>In future releases</p>
+               <div v-show="selectedTab === 'themes'" class="panel-body py-4">
+                  <div class="container">
+                     <div class="columns">
+                        <div class="column col-12 h6 text-uppercase mb-2">
+                           {{ $t('message.applicationTheme') }}
+                        </div>
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'dark'}"
+                           @click="changeApplicationTheme('dark')"
+                        >
+                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <div class="theme-name text-light">
+                              <i class="mdi mdi-moon-waning-crescent mdi-48px" />
+                              <div class="h6 mt-4">
+                                 {{ $t('word.dark') }}
+                              </div>
+                           </div>
+                        </div>
+                        <div
+                           class="column col-6 c-hand theme-block"
+                           :class="{'selected': applicationTheme === 'light'}"
+                           @click="changeApplicationTheme('light')"
+                        >
+                           <img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <div class="theme-name text-dark">
+                              <i class="mdi mdi-white-balance-sunny mdi-48px" />
+                              <div class="h6 mt-4">
+                                 {{ $t('word.light') }}
+                              </div>
+                           </div>
                         </div>
                      </div>
 
-               <div v-if="selectedTab === 'update'" class="panel-body py-4">
+                     <div class="columns mt-4">
+                        <div class="column col-12 h6 text-uppercase mb-2 mt-4">
+                           {{ $t('message.editorTheme') }}
+                        </div>
+                        <div class="column col-6 h5 mb-4">
+                           <select
+                              v-model="localEditorTheme"
+                              class="form-select"
+                              @change="changeEditorTheme(localEditorTheme)"
+                           >
+                              <optgroup
+                                 v-for="group in editorThemes"
+                                 :key="group.group"
+                                 :label="group.group"
+                              >
+                                 <option
+                                    v-for="theme in group.themes"
+                                    :key="theme.name"
+                                    :value="theme.code"
+                                    :selected="editorTheme === theme.code"
+                                 >
+                                    {{ theme.name }}
+                                 </option>
+                              </optgroup>
+                           </select>
+                        </div>
+                        <div class="column col-6 mb-4">
+                           <div class="btn-group btn-group-block">
+                              <button
+                                 class="btn btn-dark cut-text"
+                                 :class="{'active': editorFontSize === 'small'}"
+                                 @click="changeEditorFontSize('small')"
+                              >
+                                 {{ $t('word.small') }}
+                              </button>
+                              <button
+                                 class="btn btn-dark cut-text"
+                                 :class="{'active': editorFontSize === 'medium'}"
+                                 @click="changeEditorFontSize('medium')"
+                              >
+                                 {{ $t('word.medium') }}
+                              </button>
+                              <button
+                                 class="btn btn-dark cut-text"
+                                 :class="{'active': editorFontSize === 'large'}"
+                                 @click="changeEditorFontSize('large')"
+                              >
+                                 {{ $t('word.large') }}
+                              </button>
+                           </div>
+                        </div>
+                        <div class="column col-12">
+                           <BaseTextEditor
+                              :value="exampleQuery"
+                              mode="sql"
+                              :workspace="workspace"
+                              :read-only="true"
+                              :height="270"
+                           />
+                        </div>
+                     </div>
+                  </div>
+               </div>
+
+               <div v-show="selectedTab === 'update'" class="panel-body py-4">
                   <ModalSettingsUpdate />
                </div>
+               <div v-show="selectedTab === 'changelog'" class="panel-body py-4">
+                  <ModalSettingsChangelog />
+               </div>
 
-               <div v-if="selectedTab === 'about'" class="panel-body py-4">
+               <div v-show="selectedTab === 'about'" class="panel-body py-4">
                   <div class="text-center">
                      <img :src="require('@/images/logo.svg').default" width="128">
                      <h4>{{ appName }}</h4>
                      <p>
-                        {{ $t('word.version') }}: {{ appVersion }}<br>
-                        <a class="c-hand" @click="openOutside('https://github.com/EStarium/antares')">GitHub</a><br>
+                        {{ $t('word.version') }} {{ appVersion }}<br>
+                        <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</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>
@@ -104,18 +289,74 @@
 import { mapActions, mapGetters } from 'vuex';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
+import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
+import BaseTextEditor from '@/components/BaseTextEditor';
 const { shell } = require('electron');
 
 export default {
    name: 'ModalSettings',
    components: {
-      ModalSettingsUpdate
+      ModalSettingsUpdate,
+      ModalSettingsChangelog,
+      BaseTextEditor
    },
    data () {
       return {
-         isUpdate: false,
          localLocale: null,
-         selectedTab: 'general'
+         localPageSize: null,
+         localTimeout: null,
+         localEditorTheme: null,
+         selectedTab: 'general',
+         pageSizes: [40, 100, 250, 500, 1000],
+         editorThemes: [
+            {
+               group: this.$t('word.light'),
+               themes: [
+                  { code: 'chrome', name: 'Chrome' },
+                  { code: 'clouds', name: 'Clouds' },
+                  { code: 'crimson_editor', name: 'Crimson Editor' },
+                  { code: 'dawn', name: 'Dawn' },
+                  { code: 'dreamweaver', name: 'Dreamweaver' },
+                  { code: 'eclupse', name: 'Eclipse' },
+                  { code: 'github', name: 'GitHub' },
+                  { code: 'iplastic', name: 'IPlastic' },
+                  { code: 'solarized_light', name: 'Solarized Light' },
+                  { code: 'textmate', name: 'TextMate' },
+                  { code: 'tomorrow', name: 'Tomorrow' },
+                  { code: 'xcode', name: 'Xcode' },
+                  { code: 'kuroir', name: 'Kuroir' },
+                  { code: 'katzenmilch', name: 'KatzenMilch' },
+                  { code: 'sqlserver', name: 'SQL Server' }
+               ]
+            },
+            {
+               group: this.$t('word.dark'),
+               themes: [
+                  { code: 'ambiance', name: 'Ambiance' },
+                  { code: 'chaos', name: 'Chaos' },
+                  { code: 'clouds_midnight', name: 'Clouds Midnight' },
+                  { code: 'dracula', name: 'Dracula' },
+                  { code: 'cobalt', name: 'Cobalt' },
+                  { code: 'gruvbox', name: 'Gruvbox' },
+                  { code: 'gob', name: 'Green on Black' },
+                  { code: 'idle_fingers', name: 'Idle Fingers' },
+                  { code: 'kr_theme', name: 'krTheme' },
+                  { code: 'merbivore', name: 'Merbivore' },
+                  { code: 'mono_industrial', name: 'Mono Industrial' },
+                  { code: 'monokai', name: 'Monokai' },
+                  { code: 'nord_dark', name: 'Nord Dark' },
+                  { code: 'pastel_on_dark', name: 'Pastel on Dark' },
+                  { code: 'solarized_dark', name: 'Solarized Dark' },
+                  { code: 'terminal', name: 'Terminal' },
+                  { code: 'tomorrow_night', name: 'Tomorrow Night' },
+                  { code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
+                  { code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
+                  { code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
+                  { code: 'twilight', name: 'Twilight' },
+                  { code: 'vibrant_ink', name: 'Vibrant Ink' }
+               ]
+            }
+         ]
       };
    },
    computed: {
@@ -123,7 +364,17 @@ export default {
          appName: 'application/appName',
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
-         selectedLocale: 'settings/getLocale'
+         selectedLocale: 'settings/getLocale',
+         pageSize: 'settings/getDataTabLimit',
+         selectedAutoComplete: 'settings/getAutoComplete',
+         selectedLineWrap: 'settings/getLineWrap',
+         notificationsTimeout: 'settings/getNotificationsTimeout',
+         applicationTheme: 'settings/getApplicationTheme',
+         editorTheme: 'settings/getEditorTheme',
+         editorFontSize: 'settings/getEditorFontSize',
+         updateStatus: 'application/getUpdateStatus',
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
       }),
       locales () {
          const locales = [];
@@ -131,22 +382,76 @@ export default {
             locales.push({ code: locale, name: localesNames[locale] });
 
          return locales;
+      },
+      hasUpdates () {
+         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
+      },
+      workspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      exampleQuery () {
+         return `-- This is an example
+SELECT 
+    employee.id,
+    employee.first_name,
+    employee.last_name,
+    SUM(DATEDIFF("SECOND", call.start, call.end)) AS call_duration
+FROM call
+INNER JOIN employee ON call.employee_id = employee.id
+GROUP BY
+    employee.id,
+    employee.first_name,
+    employee.last_name
+ORDER BY
+    employee.id ASC;
+`;
       }
    },
    created () {
       this.localLocale = this.selectedLocale;
+      this.localPageSize = this.pageSize;
+      this.localTimeout = this.notificationsTimeout;
+      this.localEditorTheme = this.editorTheme;
       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',
+         changePageSize: 'settings/changePageSize',
+         changeAutoComplete: 'settings/changeAutoComplete',
+         changeLineWrap: 'settings/changeLineWrap',
+         changeApplicationTheme: 'settings/changeApplicationTheme',
+         changeEditorTheme: 'settings/changeEditorTheme',
+         changeEditorFontSize: 'settings/changeEditorFontSize',
+         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();
+      },
+      toggleAutoComplete () {
+         this.changeAutoComplete(!this.selectedAutoComplete);
+      },
+      toggleLineWrap () {
+         this.changeLineWrap(!this.selectedLineWrap);
       }
    }
 };
@@ -154,23 +459,60 @@ export default {
 
 <style lang="scss">
 #settings {
+  .modal-container {
+    position: absolute;
+    top: 17.5vh;
+
     .modal-body {
       overflow: hidden;
 
       .panel-body {
-         height: calc(70vh - 70px);
+        min-height: calc(25vh - 70px);
+        max-height: 65vh;
         overflow: auto;
+
+        .theme-block {
+          position: relative;
+          text-align: center;
+
+          &.selected {
+            img {
+              box-shadow: 0 0 0 3px $primary-color;
+            }
+          }
+
+          &.disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+
+          .theme-name {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            top: 0;
+            height: 100%;
+            width: 100%;
+          }
+        }
       }
 
       .badge::after {
         background: #32b643;
       }
 
+      .badge-update::after {
+        bottom: initial;
+        background: $primary-color;
+      }
+
       .form-label {
         display: flex;
         align-items: center;
       }
     }
-
+  }
 }
 </style>

src/renderer/components/ModalSettingsChangelog.vue

@@ -0,0 +1,82 @@
+<template>
+   <div class="p-relative">
+      <BaseLoader v-if="isLoading" />
+      <div
+         id="changelog"
+         class="container"
+         v-html="changelog"
+      />
+      <div v-if="isError" class="empty">
+         <div class="empty-icon">
+            <i class="mdi mdi-48px mdi-alert-outline" />
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import marked from 'marked';
+import BaseLoader from '@/components/BaseLoader';
+
+export default {
+   name: 'ModalSettingsChangelog',
+   components: {
+      BaseLoader
+   },
+   data () {
+      return {
+         changelog: '',
+         isLoading: true,
+         error: '',
+         isError: false
+      };
+   },
+   computed: {
+      ...mapGetters({ appVersion: 'application/appVersion' })
+   },
+   created () {
+      this.getChangelog();
+   },
+   methods: {
+      async getChangelog () {
+         try {
+            const apiRes = await fetch(`https://api.github.com/repos/Fabio286/antares/releases/tags/v${this.appVersion}`, {
+               method: 'GET'
+            });
+
+            const { body } = await apiRes.json();
+            const markdown = body.substr(0, body.indexOf('### Download'));
+            const renderer = {
+               link (href, title, text) {
+                  return text;
+               },
+               listitem (text) {
+                  return `<li>${text.replace(/ *\([^)]*\) */g, '')}</li>`;
+               }
+            };
+
+            marked.use({ renderer });
+
+            this.changelog = marked(markdown);
+         }
+         catch (err) {
+            this.error = err.message;
+            this.isError = true;
+         }
+         this.isLoading = false;
+      }
+   }
+};
+</script>
+<style lang="scss">
+#changelog {
+  h3 {
+    font-size: 1rem;
+  }
+
+  li {
+    margin-top: 0;
+  }
+}
+</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)"
@@ -33,11 +36,17 @@
             {{ $t('message.restartToInstall') }}
          </button>
       </div>
+      <div class="form-group mt-4">
+         <label class="form-switch d-inline-block disabled" @click.prevent="toggleAllowPrerelease">
+            <input type="checkbox" :checked="allowPrerelease">
+            <i class="form-icon" /> {{ $t('message.includeBetaUpdates') }}
+         </label>
+      </div>
    </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { ipcRenderer } from 'electron';
 
 export default {
@@ -45,7 +54,8 @@ export default {
    computed: {
       ...mapGetters({
          updateStatus: 'application/getUpdateStatus',
-         downloadPercentage: 'application/getDownloadProgress'
+         downloadPercentage: 'application/getDownloadProgress',
+         allowPrerelease: 'settings/getAllowPrerelease'
       }),
       updateMessage () {
          switch (this.updateStatus) {
@@ -67,18 +77,18 @@ export default {
       }
    },
    methods: {
+      ...mapActions({
+         changeAllowPrerelease: 'settings/changeAllowPrerelease'
+      }),
       checkForUpdates () {
-         ipcRenderer.send('checkForUpdates');
+         ipcRenderer.send('check-for-updates');
       },
       restartToUpdate () {
-         ipcRenderer.send('restartToUpdate');
+         ipcRenderer.send('restart-to-update');
+      },
+      toggleAllowPrerelease () {
+         this.changeAllowPrerelease(!this.allowPrerelease);
       }
    }
 };
 </script>
-
-<style lang="scss">
-.empty{
-   color: $body-font-color;
-}
-</style>