chore(release): 0.4.4

* feat: POINT field support

* feat(MySQL): support to LINESTRING, POLYGON and GEOMETRY fields

* refactor: removed links from map attribution

* feat(MySQL): support to MULTIPOINT, MULTILINESTRING, MULTIPOLYGON and GEOMCOLLECTION fields

* test: temporary fix on Windows tests

.all-contributorsrc

@@ -0,0 +1,145 @@
+{
+  "projectName": "antares",
+  "projectOwner": "Fabio286",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "Fabio286",
+      "name": "Fabio Di Stasio",
+      "avatar_url": "https://avatars.githubusercontent.com/u/31471771?v=4",
+      "profile": "https://fabiodistasio.it/",
+      "contributions": [
+        "code",
+        "translation",
+        "doc"
+      ]
+    },
+    {
+      "login": "toriphes",
+      "name": "Giulio Ganci",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4192159?v=4",
+      "profile": "https://www.linkedin.com/in/giulioganci/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "digitalgopnik",
+      "name": "Christian Ratz",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2630316?v=4",
+      "profile": "https://christianratz.de/",
+      "contributions": [
+        "code",
+        "translation"
+      ]
+    },
+    {
+      "login": "reverb6821",
+      "name": "Giuseppe Gigliotti",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55198803?v=4",
+      "profile": "https://reverb6821.github.io/",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "Mohd-PH",
+      "name": "Mohd-PH",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9362157?v=4",
+      "profile": "https://github.com/Mohd-PH",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "hongkfui",
+      "name": "hongkfui",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37477191?v=4",
+      "profile": "https://github.com/hongkfui",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "MrAnyx",
+      "name": "Robin",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44176707?v=4",
+      "profile": "https://github.com/MrAnyx",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "daeleduardo",
+      "name": "Daniel Eduardo",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8599078?v=4",
+      "profile": "https://github.com/daeleduardo",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "datlechin",
+      "name": "Ngô Quốc Đạt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56961917?v=4",
+      "profile": "https://ngoquocdat.com/",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "IsamuSugi",
+      "name": "Isamu Sugiura",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7746658?v=4",
+      "profile": "https://github.com/IsamuSugi",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "Occhioverde",
+      "name": "Riccardo Sacchetto",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18429412?v=4",
+      "profile": "http://rsacchetto.nexxontech.it/",
+      "contributions": [
+        "platform"
+      ]
+    },
+    {
+      "login": "kilianstallz",
+      "name": "Kilian Stallinger",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5290318?v=4",
+      "profile": "https://kilianstallinger.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "wenj91",
+      "name": "文杰",
+      "avatar_url": "https://avatars.githubusercontent.com/u/12549338?v=4",
+      "profile": "https://github.com/wenj91",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "goYou",
+      "name": "goYou",
+      "avatar_url": "https://avatars.githubusercontent.com/u/62732795?v=4",
+      "profile": "https://github.com/goYou",
+      "contributions": [
+        "translation"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true
+}

.eslintignore

@@ -1,4 +1,4 @@
-/node_modules
-/assets/vendor
-/out
-/dist
+node_modules
+assets
+out
+dist

.eslintrc

@@ -45,7 +45,9 @@
         "no-console": "off",
         "no-undef": "off",
         "vue/no-side-effects-in-computed-properties": "off",
+        "vue/multi-word-component-names": "off",
         "vue/require-default-prop": "off",
+        "vue/comment-directive": "off",
         "vue/no-v-html": "off",
         "vue/html-indent": [
             "error",
@@ -60,10 +62,11 @@
         "vue/max-attributes-per-line": [
             "error",
             {
-                "singleline": 2,
+                "singleline": {
+                    "max": 2
+                },
                 "multiline": {
-                    "max": 1,
-                    "allowFirstLine": false
+                    "max": 1
                 }
             }
         ]

.github/workflows/build-linux.yml

@@ -12,12 +12,18 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
+      
+      - name: Install dependencies
+        run: npm i
+        
+      - name: Run tests
+        run: npm run test
 
       - name: Build/release Electron app
         uses: samuelmeuli/action-electron-builder@v1

.github/workflows/build-mac.yml

@@ -12,12 +12,18 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
+          
+      - name: Install dependencies
+        run: npm i
+        
+      - name: Run tests
+        run: npm run test
 
       - name: Build/release Electron app
         uses: samuelmeuli/action-electron-builder@v1

.github/workflows/build-win.yml

@@ -8,16 +8,22 @@ jobs:
 
     strategy:
       matrix:
-        os: [windows-latest]
+        os: [windows-2019]
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v1
+        uses: actions/checkout@v2
 
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm i
+          
+      - name: Run tests
+        run: npm run test
 
       - name: Build/release Electron app
         uses: samuelmeuli/action-electron-builder@v1

.gitignore

@@ -1,9 +1,8 @@
 .DS_Store
-dist/
-node_modules/
+dist
+build
+node_modules
 thumbs.db
-.idea/
-.vscode
-TODO.md
+NOTES.md
 *.txt
 package-lock.json

.nvmrc

@@ -0,0 +1 @@
+v16.13.0

.stylelintrc

@@ -9,7 +9,8 @@
   ],
   "rules": {
     "at-rule-no-unknown": null,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "declaration-colon-newline-after": "always-multi-line"
   },
   "syntax": "scss"
 }

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "cwd": "${workspaceFolder}",
+      "name": "Electron: Main",
+      "port": 9222,
+      "protocol": "inspector",
+      "request": "attach",
+      "sourceMaps": true,
+      "type": "node",
+      "timeout": 1000000
+    },
+    {
+      "name": "Electron: Renderer",
+      "port": 9223,
+      "request": "attach",
+      "sourceMaps": true,
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}"
+    }
+  ],
+  "compounds": [
+      {
+          "name": "Electron: All",
+          "configurations": ["Electron: Main", "Electron: Renderer"]
+      }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+   "conventionalCommits.scopes": [
+      "UI",
+      "core",
+      "MySQL",
+      "PostgreSQL",
+      "SQLite",
+      "Windows"
+   ],
+   "svg.preview.background": "transparent"
+}

CHANGELOG.md

@@ -2,6 +2,457 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.4](https://github.com/Fabio286/antares/compare/v0.4.3...v0.4.4) (2022-02-27)
+
+
+### Features
+
+* execution notification for ROLLBACK and COMMIT ([76743e8](https://github.com/Fabio286/antares/commit/76743e8f7c02b824cb21540bfbcbe66ba43de8fa))
+* **MySQL:** manual commit mode ([4ed2f9a](https://github.com/Fabio286/antares/commit/4ed2f9a93937b4293436a64318b7d6ae3a0d93c2))
+* **PostgreSQL:** manual commit mode ([d81e091](https://github.com/Fabio286/antares/commit/d81e0911ab82fb75745ab11e67e867a00d8ac273))
+* reminder for uncommitted changes closing a tab ([5bfff64](https://github.com/Fabio286/antares/commit/5bfff649e92f6fe5aba4b16aa4c8d5a5a70b31b2))
+* **SQLite:** manual commit mode ([7dcd444](https://github.com/Fabio286/antares/commit/7dcd4441c49fafc0f47e12c2129708fe1092e1a4))
+
+
+### Bug Fixes
+
+* bigint support, closes [#197](https://github.com/Fabio286/antares/issues/197) ([b703955](https://github.com/Fabio286/antares/commit/b7039553ccaac4fd59e521530c4a053922854130))
+* **MySQL:** default value not displayed for DECIMAL fields ([fa3f3e1](https://github.com/Fabio286/antares/commit/fa3f3e1fd8101f19f18df71e90d60fd37cdddaee))
+* zero-padded bit fields beyond length ([265f28b](https://github.com/Fabio286/antares/commit/265f28b4d94cde4608a1d6d3d306824134808ec2))
+
+### [0.4.3](https://github.com/Fabio286/antares/compare/v0.4.2...v0.4.3) (2022-01-30)
+
+
+### Features
+
+* add Simplified Chinese translation ([6ef565c](https://github.com/Fabio286/antares/commit/6ef565cf078cb3f5b7bcdc226894cddeb6239db9))
+* **MySQL:** spatial fields support ([#165](https://github.com/Fabio286/antares/issues/165)) ([48ebf23](https://github.com/Fabio286/antares/commit/48ebf23bd1574408f429f2e1200ce878352007f6))
+
+
+### Bug Fixes
+
+* cell copy returns "undefined" in some conditions, closes [#170](https://github.com/Fabio286/antares/issues/170) ([8fb1f08](https://github.com/Fabio286/antares/commit/8fb1f0803efd9df0b66521e73bb6e1a229cf9691))
+* indexes and foreign keys not cleared after deletion of related field, closes [#182](https://github.com/Fabio286/antares/issues/182) ([9f033fb](https://github.com/Fabio286/antares/commit/9f033fb994916b4fb165e81e55e86127ca817791))
+* **PostgreSQL:** schema different than public not automatically selected, closes [#172](https://github.com/Fabio286/antares/issues/172) ([46b45c8](https://github.com/Fabio286/antares/commit/46b45c8ab64fb6837a532c4f8342167e4fd794bb))
+* scale on numeric fields that doesn't support it ([0cfd793](https://github.com/Fabio286/antares/commit/0cfd7938ee7d607dbad66ae452d0200223a6bab2))
+* **Windows:** temporary fix to Windows 7 style frame on app startup, closes [#169](https://github.com/Fabio286/antares/issues/169) ([1356011](https://github.com/Fabio286/antares/commit/1356011ba3b7dd72e12cb252a8787ce48a364fd4))
+
+
+### Improvements
+
+* support of scale in field's length setting ([eef7c1d](https://github.com/Fabio286/antares/commit/eef7c1dcecc6593ab0e69ed678187a57fe0a4fb6))
+
+### [0.4.2](https://github.com/Fabio286/antares/compare/v0.4.1...v0.4.2) (2022-01-10)
+
+
+### Features
+
+* **MySQL:** ability to cancel queries ([a59f77f](https://github.com/Fabio286/antares/commit/a59f77f618aea6156fc80fb832d3efcb9848411f))
+* **PostgreSQL:** ability to cancel queries ([0c00291](https://github.com/Fabio286/antares/commit/0c002918eb0226f6b3f21ed62117495f86396fb1))
+* save window state ([8f9385d](https://github.com/Fabio286/antares/commit/8f9385d50815635d091758ecd5d00884e3297ca0))
+* **UI:** textarea autofocus selecting a query tab, closes [#166](https://github.com/Fabio286/antares/issues/166) ([b4545b1](https://github.com/Fabio286/antares/commit/b4545b178f795712c781a3f4fc35eec31b5ad902))
+
+
+### Bug Fixes
+
+* **SQLite:** exception with some fields ([e7a1858](https://github.com/Fabio286/antares/commit/e7a18580915e7739bfa97948c6a0c4fc90a7e78a))
+
+
+### Improvements
+
+* hash for foreign key default names ([48c3e6a](https://github.com/Fabio286/antares/commit/48c3e6afc43c51f70a16703f1a71194f43da7a3e))
+* **MySQL:** support to ANSI_QUOTES sql_mode, closes [#158](https://github.com/Fabio286/antares/issues/158) ([d9a3eab](https://github.com/Fabio286/antares/commit/d9a3eab015302e9f23112f659658073ab3242191))
+
+### [0.4.1](https://github.com/Fabio286/antares/compare/v0.4.0...v0.4.1) (2021-12-11)
+
+
+### Features
+
+* language format detection for text fields ([a5fdcc1](https://github.com/Fabio286/antares/commit/a5fdcc1a85aa188ff1b9a15b1a768aced026f360))
+
+
+### Bug Fixes
+
+* cell disappear on edit in one column tables ([aaa5549](https://github.com/Fabio286/antares/commit/aaa5549609664665bd4513632d621cb249b379c1))
+* false positive with Windows Defender ([992a033](https://github.com/Fabio286/antares/commit/992a033cb2bede3d1eb52e19482d810f6692de1e))
+* **MySQL:** wrong datetime fields default in table filler in some cases ([8da0224](https://github.com/Fabio286/antares/commit/8da022487650039b7f34a9c86a7bd9045eba65e2))
+* **MySQL:** wrong value for fields "on update" in some conditions ([359e14a](https://github.com/Fabio286/antares/commit/359e14a9ebd48f86069ba7762fe00a7056f52d47))
+* select all rows with ctrl+a when editing a cell ([35cb7e1](https://github.com/Fabio286/antares/commit/35cb7e1dc48d3a74e9d106cb1a37f454c1b4a4d1))
+* **SQLite:** update rows with a text primary key ([d7f1aa9](https://github.com/Fabio286/antares/commit/d7f1aa97af32a4c51fc7022498bd47e15fa08430))
+
+
+### Improvements
+
+* **UI:** avoid columns size change when editing cells or scrolling results ([813aa32](https://github.com/Fabio286/antares/commit/813aa320d9ab799efea38a7110b7c0bdf7549123))
+* **UI:** disable save button in table creation when no fields are added ([e8af2d2](https://github.com/Fabio286/antares/commit/e8af2d24a869f7667c069936648808952d2062ab))
+
+## [0.4.0](https://github.com/Fabio286/antares/compare/v0.3.9...v0.4.0) (2021-11-24)
+
+
+### Features
+
+* **MySQL:** read-only mode ([4437d44](https://github.com/Fabio286/antares/commit/4437d44486c4f20b0bec4bf89d56016b08e36e79))
+* **PostgreSQL:** read-only mode ([5d48fe0](https://github.com/Fabio286/antares/commit/5d48fe08c77755ed18b3f7a9ea834268e317e7ef))
+* **SQLite:** cell update in data tabs ([604b371](https://github.com/Fabio286/antares/commit/604b3719204f7473ce4846624f08f8be9eec8b8f))
+* **SQLite:** connection add/edit masks ([c54438d](https://github.com/Fabio286/antares/commit/c54438d6d3bad38bc76dfcd61f58929fe30279cb))
+* **SQLite:** keys support ([fd321be](https://github.com/Fabio286/antares/commit/fd321beece075d3ad23fdd8541f9beb5727045a5))
+* **SQLite:** readonly mode ([3fc227d](https://github.com/Fabio286/antares/commit/3fc227d2de53aae115226ad3c965bfb6e9f3eca6))
+* **SQLite:** table data visualization ([f2fcc98](https://github.com/Fabio286/antares/commit/f2fcc9883972402eab4d51ef2a9796638dde2d3d))
+* **SQLite:** tables management ([3efeb45](https://github.com/Fabio286/antares/commit/3efeb45c460f178b794de72367f8d542fd8ddd56))
+* **SQLite:** triggers management ([f40e9c5](https://github.com/Fabio286/antares/commit/f40e9c592eeffd204aba21a0a0767a0c523fca49))
+* **SQLite:** views management ([7671c58](https://github.com/Fabio286/antares/commit/7671c585f5f8049bd863db190d4fc60d8f0c6c66))
+
+
+### Bug Fixes
+
+* **SQLite:** hide schema creation ([98165ca](https://github.com/Fabio286/antares/commit/98165cacaa158c85ead0490d3caf579e2a17319f))
+* **UI:** hide tools menu if no tools available ([da1947e](https://github.com/Fabio286/antares/commit/da1947e4efa7f0a26d6a231fadf750be055fbdd5))
+* **UI:** notifications timeout anomalies ([cc99491](https://github.com/Fabio286/antares/commit/cc99491fe4a15812368f6c928b8c7801d7b255aa))
+
+
+### Improvements
+
+* **SQLite:** improvements in data visualization ([94c899e](https://github.com/Fabio286/antares/commit/94c899eb8288b41a5962ac3d24365227e1f9f485))
+* **SQLite:** improvements in field length detection ([93b4a70](https://github.com/Fabio286/antares/commit/93b4a7063beeb5a7001cb06a74f05b23105212f5))
+* update italian traslation ([9fe3680](https://github.com/Fabio286/antares/commit/9fe3680bbb17c192cffa85348e68794ab49beb81))
+
+### [0.3.9](https://github.com/Fabio286/antares/compare/v0.3.8...v0.3.9) (2021-11-14)
+
+
+### Features
+
+* added macos basic shortcusts and menu ([430490a](https://github.com/Fabio286/antares/commit/430490ad93f3148962ced1f13a5330c79cd86b3b))
+* **MySQL:** enable/disable schedulers from contextual menu ([5ca3a22](https://github.com/Fabio286/antares/commit/5ca3a22dc538b27a4bf6402f1288c4b9f5bc5a90))
+* **MySQL:** scheduler status indicator in explore bar ([5c66824](https://github.com/Fabio286/antares/commit/5c668249cf102cd9d601f9f7b4943c7155775217))
+* **PostgreSQL:** enable/disable triggers from contextual menu ([534659f](https://github.com/Fabio286/antares/commit/534659f9aee12eb5ac477f91bfe5d764387dc17e))
+* schema size in explore bar ([fd25f88](https://github.com/Fabio286/antares/commit/fd25f881f95779709156cbad93a41d6b391f1a45))
+* **UI:** double click on the title bar will toggle window fullscreen size ([a35566f](https://github.com/Fabio286/antares/commit/a35566f273322602abe434b8bd30817ba8885900))
+* **UI:** improved topbar look&feel on MacOS ([7657d05](https://github.com/Fabio286/antares/commit/7657d05edfbeaed6a14eb337fc562da5126e6ba0))
+
+
+### Bug Fixes
+
+* copy&paste and basic usability on macOS ([1ddf8f0](https://github.com/Fabio286/antares/commit/1ddf8f0dbe22f94d6bffddf70636706d2d142ecf))
+* **PostgreSQL:** bigint fetched as string instead of number, closes [#134](https://github.com/Fabio286/antares/issues/134) ([39b9a59](https://github.com/Fabio286/antares/commit/39b9a59143b457a96f0711a3b8588c92dd80e28d))
+* row selection problems after a deletion fail, closes [#128](https://github.com/Fabio286/antares/issues/128) ([89fdd21](https://github.com/Fabio286/antares/commit/89fdd210ca48fc9ae399b195ea796c8523619627))
+* temporary solution on MacOS for unsigned app updates ([c00fd13](https://github.com/Fabio286/antares/commit/c00fd1381f451ba7aace7047b28b904ddcaf18f0))
+
+
+### Improvements
+
+* **UI:** improved function and routine parameters modals ([d19f475](https://github.com/Fabio286/antares/commit/d19f475fc28c0367ada569cb634769fa618b48b4))
+
+### [0.3.8](https://github.com/Fabio286/antares/compare/v0.3.7...v0.3.8) (2021-10-23)
+
+
+### Features
+
+* **UI:** CTRL+A to select all result rows ([4069ade](https://github.com/Fabio286/antares/commit/4069ade36df43e58f198dd1305778b5811824315))
+* **UI:** ctrl|cmd+t, ctrl|cmd+w shortcut to open/close workspace tabs ([9046b85](https://github.com/Fabio286/antares/commit/9046b858b1e4608af4c01bc4d69e1a49d4009c07))
+* **UI:** hide filter bar if there are no more rows in it ([9178805](https://github.com/Fabio286/antares/commit/91788054e6302e83cb4a7501ad6c3f72809cb3bb))
+* **UI:** multi column table filters ([0e15c39](https://github.com/Fabio286/antares/commit/0e15c39797fe34f7a649f85ee62204682d45c98a))
+
+
+### Bug Fixes
+
+* **PostgreSQL:** issue with uppercase characters in table field names ([aef17be](https://github.com/Fabio286/antares/commit/aef17be36cfcf3a6325a954e80f973623e250405))
+* query failure when a filter with a numeric value is used ([69cd083](https://github.com/Fabio286/antares/commit/69cd083054cae50d64475b9f1f5d7ebd39093e39))
+* regression during resize results table on filters change ([7dc33c7](https://github.com/Fabio286/antares/commit/7dc33c78aa4152264cc6833437be9af9b8621867))
+
+
+### Improvements
+
+* **UI:** resize results table on filters change ([f9ee7d0](https://github.com/Fabio286/antares/commit/f9ee7d0450a1386800223d7b96849e06ae02aece))
+
+### [0.3.7](https://github.com/Fabio286/antares/compare/v0.3.6...v0.3.7) (2021-10-08)
+
+
+### Features
+
+* support to SSH private keys with passphrase, closes [#118](https://github.com/Fabio286/antares/issues/118) ([9407a29](https://github.com/Fabio286/antares/commit/9407a29922812ab6aa3cf67569ba2f509433657c))
+* **UI:** auto detect system theme as default app theme ([7a63608](https://github.com/Fabio286/antares/commit/7a63608f54e387d45e655855666041f5602b54b1))
+
+
+### Bug Fixes
+
+* closing ask credential modal during a connection doesn't stops loading, closes [#114](https://github.com/Fabio286/antares/issues/114) ([26446fb](https://github.com/Fabio286/antares/commit/26446fb7ed04216283736072d442786350252dbb))
+* **PostgreSQL:** issue with uppercase characters in table and field names, closes [#116](https://github.com/Fabio286/antares/issues/116) ([2fcd080](https://github.com/Fabio286/antares/commit/2fcd080bd47367a21590ea5a754410a975959bdd))
+* **UI:** window reload pressing enter in schema creation modal, closes [#113](https://github.com/Fabio286/antares/issues/113) ([db1641b](https://github.com/Fabio286/antares/commit/db1641b74fcd218f1f1d24163cba70b024cc6bd7))
+
+### [0.3.6](https://github.com/Fabio286/antares/compare/v0.3.5...v0.3.6) (2021-09-26)
+
+
+### Features
+
+* copy cell/row or kill connections on context menu from processes list ([85f625d](https://github.com/Fabio286/antares/commit/85f625daf7026815dac6223a29c5a6479830edbb))
+* processes list exportation ([13aa47c](https://github.com/Fabio286/antares/commit/13aa47cd4441aa47c93038dbd91d6a0e54f6a60c))
+* workspace query history ([3959333](https://github.com/Fabio286/antares/commit/39593336626e6d9f3d3b65d2a4081388900e37d6))
+
+
+### Bug Fixes
+
+* adding a connection default values not change when switching clients, closes [#101](https://github.com/Fabio286/antares/issues/101) ([d4888ad](https://github.com/Fabio286/antares/commit/d4888ad8fba3c8e8ec2d6b6d9a78bb212d83eeed))
+
+
+### Improvements
+
+* **core:** better communication of internal exceptions ([abd46aa](https://github.com/Fabio286/antares/commit/abd46aa32256f822e52eaac2fc698da378b8163f))
+
+### [0.3.5](https://github.com/Fabio286/antares/compare/v0.3.4...v0.3.5) (2021-09-13)
+
+
+### Bug Fixes
+
+* **MySQL:** connections stuck at startup if 5 or more tabs are restored ([95b60df](https://github.com/Fabio286/antares/commit/95b60df8fc634b96a4c2c5c48dc6b10848888978))
+
+### [0.3.4](https://github.com/Fabio286/antares/compare/v0.3.3...v0.3.4) (2021-09-12)
+
+
+### Features
+
+* new create function tabs ([0203f69](https://github.com/Fabio286/antares/commit/0203f69e95093d25a7ef3e66df1c70f76edcedf2))
+* new create routine tabs ([3fd26a0](https://github.com/Fabio286/antares/commit/3fd26a05238368ae375197c79d42162a5910bb07))
+* new create scheduler tabs ([3c5a69a](https://github.com/Fabio286/antares/commit/3c5a69adc9cecdc4b8f46097676005f2a60f06cf))
+* new create trigger function tabs ([09c07ac](https://github.com/Fabio286/antares/commit/09c07acd5c2a6ed2b75640dbb83e782ed432bc30))
+* new create trigger tabs ([e217d51](https://github.com/Fabio286/antares/commit/e217d5181b37ec6304151120b4a2aba9455c6a84))
+* start search when typing with focus on the left bar ([265ed66](https://github.com/Fabio286/antares/commit/265ed66d25d35be99ed0a6b1668dab9f246ed71e))
+
+
+### Bug Fixes
+
+* **UI:** context menu of tables cut if close to bottom edge ([21e3e79](https://github.com/Fabio286/antares/commit/21e3e79ddf9e292bcfc5881b8fa76a1dc58b207c))
+
+### [0.3.3](https://github.com/Fabio286/antares/compare/v0.3.2...v0.3.3) (2021-08-22)
+
+
+### Features
+
+* new create table tabs ([c9fa941](https://github.com/Fabio286/antares/commit/c9fa9415787c3953043db5876a99b3664c69c071))
+* new create view tabs ([8b93c49](https://github.com/Fabio286/antares/commit/8b93c497784ea431f9747c5afb53f6ef075ea9d6))
+* new table empty state ([0842e00](https://github.com/Fabio286/antares/commit/0842e00098ba420412937aa52276ee33bda53693))
+
+
+### Bug Fixes
+
+* **MySQL:** editing a view causes error for missing database in some conditions ([4048df3](https://github.com/Fabio286/antares/commit/4048df3c7bc2d42a60f7a57c9a4b8b5b445fcd43))
+* table options not loaded on restored setting tabs at startup ([622b519](https://github.com/Fabio286/antares/commit/622b519cbb5fbe4e38a4baffb8eab169b21eed21))
+* **UI:** multiple temp tabs opened switching to tables from other elements ([b35fc5b](https://github.com/Fabio286/antares/commit/b35fc5b78bdbeff1422ef088441b17c8b0df663c))
+* **UI:** no round borders on left of file upload inputs ([d5b2bde](https://github.com/Fabio286/antares/commit/d5b2bde2eaf8ff3e14f49cc26acdcb201b4cb15c))
+
+
+### Improvements
+
+* **UI:** element options in setting tabs accessible directly ([71e2c91](https://github.com/Fabio286/antares/commit/71e2c911ae23e86543b2af1fa885981ff271777d))
+* **UI:** improved view setting tab ([1983686](https://github.com/Fabio286/antares/commit/198368605b084bd58fd6f7ca0b19895ba23a45e6))
+* **UI:** primary app color on selected text backgrouns ([756d49b](https://github.com/Fabio286/antares/commit/756d49b2596dea58376c6afa8e0bad0cd62b146c))
+* **UI:** visual improvements of tables ([bc82289](https://github.com/Fabio286/antares/commit/bc82289d54550a93300fe66d7a660aa70db2fd23))
+
+### [0.3.2](https://github.com/Fabio286/antares/compare/v0.3.1...v0.3.2) (2021-08-06)
+
+
+### Features
+
+* contextual menu option to duplicate table fields ([3abff36](https://github.com/Fabio286/antares/commit/3abff3613618ddc86e1d6c898f83bcb360e8e5d9))
+* **UI:** automatic scroll on selected tab ([e834fe3](https://github.com/Fabio286/antares/commit/e834fe31ac8b73f249e3ad8654e97da834b28cfe))
+* **UI:** automatic scroll to selected tab element in left bar ([04fc1bb](https://github.com/Fabio286/antares/commit/04fc1bbee0cdc3b02288ff5d3b2c402633cae1f1))
+* **UI:** button to clear sidebar search input ([1573de5](https://github.com/Fabio286/antares/commit/1573de5b1f545328523aaaaac541f5a8046617be))
+* **UI:** query tab name based on content ([065de3a](https://github.com/Fabio286/antares/commit/065de3a0a28a9e6667df4e41ac1c5fa5561d2171))
+* **UI:** shortcuts info on empty query tab ([70354aa](https://github.com/Fabio286/antares/commit/70354aa828121004f70e91d65cb9f0a4811dce57))
+
+
+### Bug Fixes
+
+* tab selected when clicking closing cross ([07ee1ae](https://github.com/Fabio286/antares/commit/07ee1ae828bb5f9971a263f2e39e73c760fed50a))
+
+
+### Improvements
+
+* approximate table total updated on table refresh ([dea3780](https://github.com/Fabio286/antares/commit/dea378014dd45bf90f51a599b4a801e0bc22059f))
+* **UI:** loading animation on tables and table context menu improvements ([372049a](https://github.com/Fabio286/antares/commit/372049ae64232e8e61a974edc8be5b319c5c0811))
+* update italian translation ([cbe0e29](https://github.com/Fabio286/antares/commit/cbe0e2980a9d4562941aec37a57cc936a46f41d8))
+
+### [0.3.1](https://github.com/Fabio286/antares/compare/v0.3.0...v0.3.1) (2021-07-27)
+
+
+### Bug Fixes
+
+* **UI:** tabs or explorebar elements selected with mouse wheel or right button ([a8a47ed](https://github.com/Fabio286/antares/commit/a8a47ed5f7d5d8cbbdd6c33ef8307d9dce5b193b))
+
+## [0.3.0](https://github.com/Fabio286/antares/compare/v0.2.1...v0.3.0) (2021-07-23)
+
+
+### Features
+
+* close tabs if element deleted ([320aa8b](https://github.com/Fabio286/antares/commit/320aa8ba04d464f628b938b812165cd1ec786492))
+* new data tabs ([ab382df](https://github.com/Fabio286/antares/commit/ab382dfbcd89f8ab38a8cbdb4d87e1705618fd0d))
+* new function, procedure and scheduler tabs ([0a9983d](https://github.com/Fabio286/antares/commit/0a9983d30d6aeb9aee1c68b31a31f8c605deea45))
+* new trigger function tabs ([58b91eb](https://github.com/Fabio286/antares/commit/58b91ebfe0ab200d76d4cfd442b9f2970ae97384))
+* new trigger setting tabs ([f6faad9](https://github.com/Fabio286/antares/commit/f6faad98f88222500dfb7265b74c1be914b894cd))
+* new unsaved change reminder ([f7a74df](https://github.com/Fabio286/antares/commit/f7a74df0097867a82a2a2d8b3c278a81897d7898))
+* new view setting tabs ([003c02b](https://github.com/Fabio286/antares/commit/003c02b1fbe5aba7f53f3faa5610b0c2f7706793))
+* option to restore session on startup ([adc5477](https://github.com/Fabio286/antares/commit/adc5477673603cd63fabf77a53db5397e3774e0e))
+* option to select schema in query tabs ([a73a2f4](https://github.com/Fabio286/antares/commit/a73a2f483ef6927def4ba635e306277c34ae4b53))
+* **UI:** empty workspace view ([e1855a2](https://github.com/Fabio286/antares/commit/e1855a262dc24363fc143a38a70154938308bd71))
+* rename tabs if element is renamed ([ef21ea7](https://github.com/Fabio286/antares/commit/ef21ea74481839ba67ca79d40d5f47e1c12aebc0))
+* **MySQL:** improved schema detection for queries ([5bb4e49](https://github.com/Fabio286/antares/commit/5bb4e496f289f3ae8a46f24d1a2fbb896d9da86e))
+* **UI:** close temp data tabs ([88c4cdc](https://github.com/Fabio286/antares/commit/88c4cdc8e2a60ffbe26b0f831184c3a6dd9a1637))
+* **UI:** display schema in data tabs ([0105733](https://github.com/Fabio286/antares/commit/01057332b090997c107bf395bb1fc3b9195e8218))
+* **UI:** new table settings tabs ([7845e3e](https://github.com/Fabio286/antares/commit/7845e3e501bb7f890d07b42d4f3eb5f9f4bc8586))
+* **UI:** sortable tabs ([d38097d](https://github.com/Fabio286/antares/commit/d38097d0567020b5265b5a0b347f5e1f38e0b1d4))
+* **UI:** temporary table data tabs ([a87079c](https://github.com/Fabio286/antares/commit/a87079cd179033cebb6fd228ad7f1b991f3b6c46))
+
+
+### Bug Fixes
+
+* clear empty indexes and foreign keys on confirm respective modals ([04fa320](https://github.com/Fabio286/antares/commit/04fa320820df1f70a4ef05e4a6e4cbcd4081d047))
+* enabled copy context on non editable rows ([525c964](https://github.com/Fabio286/antares/commit/525c964c623e7574f6abe732a2b315b8805d5eee))
+* issues with trigger temp tabs ([6b725b1](https://github.com/Fabio286/antares/commit/6b725b1d40753ad89bfad6f1df57c6fb737e5262))
+* manual page input not disabled when only one page is available ([62f7e57](https://github.com/Fabio286/antares/commit/62f7e57d0ccf6041b5469bec6a1864aa5b045609))
+* new field default value unknown instead 'noval' ([77c5d28](https://github.com/Fabio286/antares/commit/77c5d280325792e20befc845f3a6834837131e39))
+* reload twice after element rename ([1e543aa](https://github.com/Fabio286/antares/commit/1e543aa6b0b63e9134bf544682a26bd98573b794))
+* solved a vulnerability in table names ([5c855a5](https://github.com/Fabio286/antares/commit/5c855a520a6bc66cc00b0b8afc6d2c03c75c0fab))
+* sort order of tables is lost switching pages ([14577d1](https://github.com/Fabio286/antares/commit/14577d14bb337898a1fd0fdee1c3760812b9d21f))
+* wrong editor height with some conditions ([d7fdf53](https://github.com/Fabio286/antares/commit/d7fdf53932a4d0609a88641c40d451c71b12c242))
+* **UI:** multiple trigger tabs open on single click on explore bar ([e78ca24](https://github.com/Fabio286/antares/commit/e78ca2417e8f996fa0507c5a5586a75393dfe8ee))
+* **UI:** not disabled buttons during save table setting tabs ([a0105cf](https://github.com/Fabio286/antares/commit/a0105cf1c37144ea27b212029d39275918f4f95e))
+* tab won't open after table or view creation ([f7c3aa8](https://github.com/Fabio286/antares/commit/f7c3aa883dfcad0a28222c53cf22ab49d381559c))
+* wrong loaded schema change ([c41e059](https://github.com/Fabio286/antares/commit/c41e059b0ba6d8c6d545c3b86a21a9a2abb6f537))
+* **UI:** table icon in view data tabs ([f0fa7c8](https://github.com/Fabio286/antares/commit/f0fa7c81b7aa2a05833ce0b243afed39db98d66b))
+
+
+### Improvements
+
+* **UI:** improvements in setting bar connections sort ([0c29e0d](https://github.com/Fabio286/antares/commit/0c29e0d566c792ffd1b2b7045124e170b9c51985))
+
+### [0.2.1](https://github.com/Fabio286/antares/compare/v0.2.0...v0.2.1) (2021-07-09)
+
+
+### Features
+
+* **UI:** contextual menu shortcuts to create new elements on folders ([0252a06](https://github.com/Fabio286/antares/commit/0252a064d99df09b01c020c7d10c76dd43d4ede8))
+* context menu option to duplicate connections ([439356a](https://github.com/Fabio286/antares/commit/439356a01993a6a248f5a7d7df305ac5e0e63775))
+* **MySQL:** possibility to set a default schema in connection parameters ([c6897af](https://github.com/Fabio286/antares/commit/c6897af22d04ed930289a55124b3e8d080fbae3a))
+* **UI:** new connection add panel ([8cd76e7](https://github.com/Fabio286/antares/commit/8cd76e711c9328254d498b4f9afa221311f5a487))
+* **UI:** new connection edit panel ([9af71a6](https://github.com/Fabio286/antares/commit/9af71a6e343deda1bf79d8410511cf861af3c304))
+* SSH Tunnel functionality ([#81](https://github.com/Fabio286/antares/issues/81)) ([1801bef](https://github.com/Fabio286/antares/commit/1801bef019cee77a99df7e3822145ad952465abb))
+
+
+### Bug Fixes
+
+* clear corrupted configurations to avoid exceptions ([56fcc26](https://github.com/Fabio286/antares/commit/56fcc2650b93ece398118f39f027dc9520dd8a6a))
+* **UI:** connection tab indicator when scrolling ([a0ab63b](https://github.com/Fabio286/antares/commit/a0ab63bdb533aac9b2bdc2ee07a3b1f2b70ea227))
+* avoid to trigger schema loading multiple times ([7570b0a](https://github.com/Fabio286/antares/commit/7570b0add8cb9130f15cf8cb807a96dbfd2837d0))
+
+## [0.2.0](https://github.com/Fabio286/antares/compare/v0.1.13...v0.2.0) (2021-07-03)
+
+
+### Features
+
+* 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)
 
 

CONTRIBUTING.md

@@ -0,0 +1,107 @@
+# Contributors Guide
+
+Antares SQL is an application based on [Electron.js](https://www.electronjs.org/) that uses [Vue.js](https://vuejs.org/) and [Spectre.css](https://picturepan2.github.io/spectre/) as frontend frameworks.  
+For the build process it takes advantage of [electron-builder](https://www.electron.build/).  
+This application uses [Vuex](https://vuex.vuejs.org/) as application state manager and [electron-store](https://github.com/sindresorhus/electron-store) to save the various settings on disc.  
+This guide aims to provide useful information and guidelines to everyone wants to contribute with this open-source project.
+For every other question related to this project please [contact me](https://github.com/Fabio286).
+
+## Project Structure
+
+The main files of the application are located inside `src` folder and are groupped in three subfolders.
+
+### `common`
+
+This folder contains small libraries, classes and objects. The purpose of `common` folder is to group together utilities used by **renderer** and **main** processes.  
+Noteworthy is the `customizations` folder that contains clients related customizations. Those settings are merged with `default.js` that lists every option.  
+Client related customizations are stored on Vuex and can be accessed by `customizations` property of current workspace object, or importing `common/customizations`.  
+
+An use case of customizations object can be the following:
+
+```js
+computed: {
+      defaultEngine () {
+         if (this.workspace.customizations.engines)
+            return this.workspace.engines.find(engine => engine.isDefault).name;
+         return '';
+      }
+}
+```
+
+In this case the computed property `defaultEngine` returns the default engine for MySQL client, or an empty string with PostgreSQL that doesn't have engines.  
+Customization properties are also useful **if some features are ready for one client but not others**.
+
+### `main`
+
+Inside this folder are located all files required by main process.  
+`ipc-handlers` subfolder includes all IPC handlers for events sent from renderer process.  
+`libs` subfolder includes classes related to clients and **query and connection logics**.  
+**Everything above client's class level should be "client agnostic"** with a neutral and uniformed api interface
+
+### `renderer`
+
+In this folder is located the structure of Vue frontend application.
+
+## Build
+
+The command to build Antares SQL locally is `npm run build:local`.  
+`build` command (without `:local`) is used exclusively by the GitHub Action.
+
+## Conventions
+
+### Electron
+
+- **kebab-case** for IPC event names.
+
+### Vue
+
+- **PascalCase** for file names (with .vue extension) and including components inside others (`<MyComponent/>`).  
+- "**Base**" prefix for [base component names](https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended).
+- "**The**" prefix for [single-instance component names](https://vuejs.org/v2/style-guide/#Single-instance-component-names-strongly-recommended).  
+- [Tightly coupled component names](https://vuejs.org/v2/style-guide/#Tightly-coupled-component-names-strongly-recommended).
+- [Order of words in component names](https://vuejs.org/v2/style-guide/#Order-of-words-in-component-names-strongly-recommended).
+- **kebab-case** in templates for property and event names.
+
+### Vuex
+
+- **snake_case** for state names.
+- **camelCase** for getter and action names.
+- **SNAKE_CASE (all caps)** for mutation names.
+
+### Code Style
+
+The project includes [ESlint](https://eslint.org/) and [StyleLint](https://stylelint.io/) config files with style rules. I recommend to set the lint on-save option in your code editor.  
+Alternatively you can launch following commands to lint the project.  
+
+Check if all the style rules have been followed:
+
+```console
+npm run lint
+```
+
+Apply style rules globally if possible:  
+
+```console
+npm run lint:fix
+```
+
+### Other recommendations
+
+Please, use if possible **template literals** to compose strings and **avoid unnecessary dependencies**.
+
+### Commits
+
+The commit style adopted for this project is [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).  
+Basicly it's important to have **single scoped commits with a prefix** that follows this style because Antares SQL uses [standard-version](https://github.com/conventional-changelog/standard-version) to generate new releases and [CHANGELOG.md](https://github.com/Fabio286/antares/blob/master/CHANGELOG.md) file to track all notable changes.  
+For Visual Studio Code users may be useful [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits) extension.
+
+## Debug
+
+**Debug mode**:
+
+```console
+npm run debug
+```
+
+After running the debug mode Antares will listen on port 9222 (main process) for a debugger.  
+On **Visual Studio Code** just launch "*Electron: Main*" configurations after running Antares in debug mode.

README.md

@@ -1,73 +1,87 @@
+
+<!-- markdownlint-disable -->
 <p align="center">
     <img width="800" src="https://raw.githubusercontent.com/Fabio286/antares/master/docs/gh-logo.png">
 </p>
+<!-- markdownlint-restore -->
 
 # Antares SQL Client
 
-![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) ![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) [![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)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) ![GitHub](https://img.shields.io/github/license/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) [![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.  
+Our 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 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.
+**At the moment this application is in development state, many features will come in future updates**, and supports only MySQL/MariaDB, PostgreSQL and SQLite.  
+At the moment, however, there are all the features necessary to have a pleasant database management experience, so give it a chance and send us your feedback, we would really appreciate it.  
+We are actively working on it, hoping to provide new cool features, improvements and fixes as soon as possible.  
 
 🔗 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 watch this repo on **Release only** channel.  
+👁 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 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)
-
-## Current main features
+## Current key 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.
+- A modern and friendly tab system; keep open every kind of tab you need in your workspace.
+- Fake table data filler to generate tons of data for test purpose.
 - Query suggestions and auto complete.
+- Query history: search through the last 1000 queries.
+- SSH tunnel support.
+- Manual commit mode.
 - Dark and light theme.
-- Scratchpad.
-- Multi language.
-- Secure password storage.
+- Editor themes.
+
+## Philosophy
+
+Why are we 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, nested tabs or submenu; productivity comes first.  
+
+## Installation
+
+Based on your operating system you can have one or more distribution formats to choose based on your preferences.  
+Since Antares SQL is a free software we haven't a budget to spend in annual licenses or certificates. This can result that on some platforms you need some additional passages to install this app.
+
+### Linux
+
+On Linux you can simply download and run `.AppImage` distributions, install from Snap Store or from AUR.
+
+### Windows
+
+On Windows you can choose between Microsoft Store and download `.exe` distribution. The latter lacks of a certificate, so to install you need to click on "More info" and then "Run anyway" on SmartScreen prompt.
+
+### MacOS
+
+On macOS you can run `.dmg` distribution following [this guide](https://support.apple.com/guide/mac-help/mh40616/mac) to install apps from unknown developers.
+
+## 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)**
 
 ## 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.
+- Support for other databases.
+- Apple Silicon distribution
 
 ## Currently supported
 
 ### Databases
 
 - [x] MySQL/MariaDB
-- [x] PostgreSQL (partially, work in progress)
-- [ ] SQLite
+- [x] PostgreSQL
+- [x] SQLite
 - [ ] MSSQL
 - [ ] OracleDB
 - [ ] More...
@@ -78,22 +92,51 @@ This is a roadmap with major features will come in near future.
 
 - [x] Windows
 - [x] Linux
-- [x] MacOS (not tested due lack of hardware)
+- [x] MacOS
 
 #### • ARM
 
 - [ ] Windows
 - [x] Linux
-- [x] MacOS
+- [ ] MacOS
 
-## Translations
+## How to contribute
 
-**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)]
+- 🌍 [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)
 
-## Reviews
+## Contributors ✨
 
-<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>
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://fabiodistasio.it/"><img src="https://avatars.githubusercontent.com/u/31471771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fabio Di Stasio</b></sub></a><br /><a href="https://github.com/Fabio286/antares/commits?author=Fabio286" title="Code">💻</a> <a href="#translation-Fabio286" title="Translation">🌍</a> <a href="https://github.com/Fabio286/antares/commits?author=Fabio286" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/giulioganci/"><img src="https://avatars.githubusercontent.com/u/4192159?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Giulio Ganci</b></sub></a><br /><a href="https://github.com/Fabio286/antares/commits?author=toriphes" title="Code">💻</a></td>
+    <td align="center"><a href="https://christianratz.de/"><img src="https://avatars.githubusercontent.com/u/2630316?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Ratz</b></sub></a><br /><a href="https://github.com/Fabio286/antares/commits?author=digitalgopnik" title="Code">💻</a> <a href="#translation-digitalgopnik" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://reverb6821.github.io/"><img src="https://avatars.githubusercontent.com/u/55198803?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Giuseppe Gigliotti</b></sub></a><br /><a href="#translation-reverb6821" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/Mohd-PH"><img src="https://avatars.githubusercontent.com/u/9362157?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohd-PH</b></sub></a><br /><a href="#translation-Mohd-PH" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/hongkfui"><img src="https://avatars.githubusercontent.com/u/37477191?v=4?s=100" width="100px;" alt=""/><br /><sub><b>hongkfui</b></sub></a><br /><a href="#translation-hongkfui" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/MrAnyx"><img src="https://avatars.githubusercontent.com/u/44176707?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Robin</b></sub></a><br /><a href="#translation-MrAnyx" title="Translation">🌍</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/daeleduardo"><img src="https://avatars.githubusercontent.com/u/8599078?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Eduardo</b></sub></a><br /><a href="#translation-daeleduardo" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://ngoquocdat.com/"><img src="https://avatars.githubusercontent.com/u/56961917?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ngô Quốc Đạt</b></sub></a><br /><a href="#translation-datlechin" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/IsamuSugi"><img src="https://avatars.githubusercontent.com/u/7746658?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Isamu Sugiura</b></sub></a><br /><a href="#translation-IsamuSugi" title="Translation">🌍</a></td>
+    <td align="center"><a href="http://rsacchetto.nexxontech.it/"><img src="https://avatars.githubusercontent.com/u/18429412?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Riccardo Sacchetto</b></sub></a><br /><a href="#platform-Occhioverde" title="Packaging/porting to new platform">📦</a></td>
+    <td align="center"><a href="https://kilianstallinger.com"><img src="https://avatars.githubusercontent.com/u/5290318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Stallinger</b></sub></a><br /><a href="https://github.com/Fabio286/antares/commits?author=kilianstallz" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/wenj91"><img src="https://avatars.githubusercontent.com/u/12549338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>文杰</b></sub></a><br /><a href="https://github.com/Fabio286/antares/commits?author=wenj91" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/goYou"><img src="https://avatars.githubusercontent.com/u/62732795?v=4?s=100" width="100px;" alt=""/><br /><sub><b>goYou</b></sub></a><br /><a href="#translation-goYou" title="Translation">🌍</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

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

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

package.json

@@ -1,26 +1,46 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.1.7",
-  "description": "A cross-platform easy to use SQL client.",
+  "version": "0.4.4",
+  "description": "A modern, fast and productivity driven SQL client with a focus in UX.",
   "license": "MIT",
   "repository": "https://github.com/Fabio286/antares.git",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development electron-webpack dev",
-    "compile": "electron-webpack",
-    "build": "cross-env NODE_ENV=production npm run compile && electron-builder",
-    "build:appx": "npm run build -- --win appx",
+    "debug": "npm run rebuild:electron && npm run debug-runner",
+    "debug-runner": "node scripts/devRunner.js --remote-debug",
+    "compile": "npm run compile:main && npm run compile:renderer",
+    "compile:main": "webpack --mode=production --config webpack.main.config.js",
+    "compile:renderer": "webpack --mode=production --config webpack.renderer.config.js",
+    "build": "cross-env NODE_ENV=production npm run compile",
+    "build:local": "npm run build && electron-builder",
+    "build:appx": "npm run build:local -- --win appx",
+    "rebuild:electron": "npm run postinstall",
     "release": "standard-version",
     "release:pre": "npm run release -- --prerelease alpha",
-    "test": "npm run lint",
+    "postinstall": "electron-builder install-app-deps",
+    "test": "npm run compile && node tests/app.spec.js",
     "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"
+    "contributors:add": "all-contributors add",
+    "contributors:generate": "all-contributors generate"
   },
   "author": "Fabio Di Stasio <fabio286@gmail.com>",
+  "main": "./dist/main.js",
   "build": {
     "appId": "com.fabio286.antares",
     "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
+    "asar": true,
+    "buildDependenciesFromSource": true,
+    "directories": {
+      "output": "build",
+      "buildResources": "assets"
+    },
+    "asarUnpack": "**\\*.{node,dll}",
+    "files": [
+      "dist/**/*",
+      "node_modules",
+      "package.json"
+    ],
     "win": {
       "target": [
         "nsis",
@@ -46,7 +66,8 @@
           "target": "AppImage",
           "arch": [
             "x64",
-            "armv7l"
+            "armv7l",
+            "arm64"
           ]
         }
       ],
@@ -60,7 +81,9 @@
       "artifactName": "${productName}-${version}-portable.exe"
     },
     "appx": {
-      "displayName": "Antares SQL Client",
+      "displayName": "Antares SQL",
+      "backgroundColor": "transparent",
+      "showNameOnTiles": true,
       "identityName": "62514FabioDiStasio.AntaresSQLClient",
       "publisher": "CN=1A2729ED-865C-41D2-9038-39AE2A63AA52",
       "applicationId": "FabioDiStasio.AntaresSQLClient"
@@ -80,54 +103,70 @@
       ]
     }
   },
-  "electronWebpack": {
-    "renderer": {
-      "webpackConfig": "webpack.config.js"
-    }
-  },
   "dependencies": {
-    "@electron/remote": "^1.1.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.3.1",
-    "marked": "^2.0.2",
+    "@electron/remote": "^2.0.1",
+    "@mdi/font": "^6.1.95",
+    "@turf/helpers": "^6.5.0",
+    "@vscode/vscode-languagedetection": "^1.0.21",
+    "ace-builds": "^1.4.13",
+    "better-sqlite3": "^7.4.4",
+    "electron-log": "^4.4.1",
+    "electron-store": "^8.0.1",
+    "electron-updater": "^4.6.1",
+    "electron-window-state": "^5.0.3",
+    "faker": "^5.5.3",
+    "leaflet": "^1.7.1",
+    "marked": "^4.0.0",
     "moment": "^2.29.1",
-    "mysql2": "^2.2.5",
-    "pg": "^8.5.1",
+    "mysql2": "^2.3.2",
+    "pg": "^8.7.1",
     "pgsql-ast-parser": "^7.2.1",
-    "source-map-support": "^0.5.16",
+    "source-map-support": "^0.5.20",
     "spectre.css": "^0.5.9",
     "sql-formatter": "^4.0.2",
-    "v-mask": "^2.2.4",
-    "vue-i18n": "^8.24.4",
+    "ssh2-promise": "^1.0.2",
+    "v-mask": "^2.3.0",
+    "vue-i18n": "^8.26.5",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.13.14",
+    "@babel/eslint-parser": "^7.15.7",
+    "@babel/preset-env": "^7.15.8",
+    "all-contributors-cli": "^6.20.0",
+    "babel-loader": "^8.2.3",
+    "chalk": "^4.1.2",
+    "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.2",
-    "electron": "^12.0.7",
-    "electron-builder": "22.10.5",
+    "css-loader": "^6.5.0",
+    "electron": "^17.0.1",
+    "electron-builder": "^22.14.11",
     "electron-devtools-installer": "^3.2.0",
-    "electron-webpack": "^2.8.2",
-    "electron-webpack-vue": "^2.4.0",
-    "eslint": "^7.26.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "sass": "^1.32.13",
-    "sass-loader": "^10.2.0",
-    "standard-version": "^9.3.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "~2.4.5",
+    "node-loader": "^2.0.0",
+    "playwright": "^1.18.1",
+    "progress-webpack-plugin": "^1.0.12",
+    "sass": "^1.42.1",
+    "sass-loader": "^12.3.0",
+    "standard-version": "^9.3.1",
+    "style-loader": "^3.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
-    "stylelint-scss": "^3.19.0",
-    "vue": "^2.6.12",
-    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.46.0"
+    "stylelint-scss": "^3.21.0",
+    "tree-kill": "^1.2.2",
+    "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.60.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
   }
 }

scripts/devRunner.js

@@ -0,0 +1,131 @@
+process.env.NODE_ENV = 'development';
+// process.env.ELECTRON_ENABLE_LOGGING = true
+
+const chalk = require('chalk');
+const electron = require('electron');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const kill = require('tree-kill');
+
+const path = require('path');
+const { spawn } = require('child_process');
+
+const mainConfig = require('../webpack.main.config');
+const rendererConfig = require('../webpack.renderer.config');
+// const workersConfig = require('../webpack.workers.config');
+
+let electronProcess = null;
+let manualRestart = null;
+const remoteDebugging = process.argv.includes('--remote-debug');
+
+if (remoteDebugging) {
+   // disable dvtools open in electron
+   process.env.RENDERER_REMOTE_DEBUGGING = true;
+}
+
+async function killElectron (pid) {
+   return new Promise((resolve, reject) => {
+      if (pid) {
+         kill(pid, 'SIGKILL', err => {
+            if (err) reject(err);
+
+            resolve();
+         });
+      }
+      else
+         resolve();
+   });
+}
+
+async function restartElectron () {
+   console.log(chalk.gray('\nStarting electron...'));
+
+   const { pid } = electronProcess || {};
+   await killElectron(pid);
+
+   electronProcess = spawn(electron, [
+      path.join(__dirname, '../dist/main.js'),
+      // '--enable-logging', // Enable to show logs from all electron processes
+      remoteDebugging ? '--inspect=9222' : '',
+      remoteDebugging ? '--remote-debugging-port=9223' : ''
+   ]);
+
+   electronProcess.stdout.on('data', data => {
+      console.log(chalk.white(data.toString()));
+   });
+
+   electronProcess.stderr.on('data', data => {
+      console.error(chalk.red(data.toString()));
+   });
+
+   electronProcess.on('exit', (code, signal) => {
+      if (!manualRestart) process.exit(0);
+   });
+}
+
+function startMain () {
+   const webpackSetup = webpack(mainConfig);
+
+   webpackSetup.compilers.forEach((compiler) => {
+      const { name } = compiler;
+
+      switch (name) {
+         case 'workers':
+            compiler.hooks.afterEmit.tap('afterEmit', async () => {
+               console.log(chalk.gray(`\nCompiled ${name} script!`));
+               console.log(
+                  chalk.gray(`\nWatching file changes for ${name} script...`)
+               );
+            });
+            break;
+         case 'main':
+         default:
+            compiler.hooks.afterEmit.tap('afterEmit', async () => {
+               console.log(chalk.gray(`\nCompiled ${name} script!`));
+
+               manualRestart = true;
+               await restartElectron();
+
+               setTimeout(() => {
+                  manualRestart = false;
+               }, 2500);
+
+               console.log(
+                  chalk.gray(`\nWatching file changes for ${name} script...`)
+               );
+            });
+            break;
+      }
+   });
+
+   webpackSetup.watch({ aggregateTimeout: 500 }, err => {
+      if (err) console.error(chalk.red(err));
+   });
+}
+
+function startRenderer (callback) {
+   const compiler = webpack(rendererConfig);
+   const { name } = compiler;
+
+   compiler.hooks.afterEmit.tap('afterEmit', () => {
+      console.log(chalk.gray(`\nCompiled ${name} script!`));
+      console.log(chalk.gray(`\nWatching file changes for ${name} script...`));
+   });
+
+   const server = new WebpackDevServer(compiler, {
+      hot: true,
+      port: 9080,
+      client: {
+         overlay: true,
+         logging: 'warn'
+      }
+   });
+
+   server.startCallback(err => {
+      if (err) console.error(chalk.red(err));
+
+      callback();
+   });
+}
+
+startRenderer(startMain);

snap/snapcraft.yaml

@@ -4,9 +4,7 @@ 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
+base: core20
 
 grade: stable
 confinement: strict
@@ -60,6 +58,7 @@ parts:
       - fcitx-frontend-gtk3
       - libappindicator3-1
       - libasound2
+      - libcurl4
       - libgconf-2-4
       - libgtk-3-0
       - libnotify4
@@ -71,13 +70,59 @@ parts:
       - libsecret-1-0
       - libxtst6
       - libxkbfile1
+      - gcc-10-base
+      - libapparmor1
+      - libblkid1
+      - libbsd0
+      - libcom-err2
+      - libcrypt1
+      - libdb5.3
+      - libdbus-1-3
+      - libexpat1
+      - libffi7
+      - libgcc-s1
+      - libgcrypt20
+      - libglib2.0-0
+      - libgmp10
+      - libgnutls30
+      - libgpg-error0
+      - libgssapi-krb5-2
+      - libhogweed5
+      - libidn2-0
+      - libjson-c4
+      - libk5crypto3
+      - libkeyutils1
+      - libkrb5-3
+      - libkrb5support0
+      - liblz4-1
+      - liblzma5
+      - libmount1
+      - libnettle7
+      - libp11-kit0
+      - libpcre2-8-0
+      - libselinux1
+      - libsqlite3-0
+      - libssl1.1
+      - libstdc++6
+      - libsystemd0
+      - libtasn1-6
+      - libudev1
+      - libunistring2
+      - libuuid1
+      - libwrap0
+      - libzstd1
+      - zlib1g 
+      - libx11-xcb1
+      - libdrm2
+      - libgbm1
+      - libxcb-dri3-0
   cleanup:
     after: [antares]
     plugin: nil
-    build-snaps: [gnome-3-28-1804]
+    build-snaps: [gnome-3-38-2004]
     override-prime: |
       set -eux
-      cd /snap/gnome-3-28-1804/current
+      cd /snap/gnome-3-38-2004/current
       find . -type f,l -exec rm -f $SNAPCRAFT_PRIME/{} \;
 
   mdns-lookup:
@@ -91,7 +136,7 @@ parts:
       - 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
+      sed -Ee 's/^\s*hosts:(\s+)files/hosts:\1files mdns4_minimal \[NOTFOUND=return\]/' /snap/core20/current/etc/nsswitch.conf > $SNAPCRAFT_STAGE/etc/nsswitch.conf
       snapcraftctl prime
     prime:
       - lib/$SNAPCRAFT_ARCH_TRIPLET/libnss_mdns4_minimal*
@@ -101,7 +146,7 @@ apps:
   antares:
     command: opt/Antares/antares --no-sandbox
     desktop: usr/share/applications/antares.desktop
-    extensions: [gnome-3-28]
+    extensions: [gnome-3-38]
     environment:
       # Fallback to XWayland if running in a Wayland session.
       DISABLE_WAYLAND: 1

src/common/customizations/defaults.js

@@ -7,6 +7,11 @@ module.exports = {
    database: false,
    collations: false,
    engines: false,
+   connectionSchema: false,
+   sslConnection: false,
+   sshConnection: false,
+   fileConnection: false,
+   cancelQueries: false,
    // Tools
    processesList: false,
    usersManagement: false,
@@ -21,6 +26,8 @@ module.exports = {
    functions: false,
    schedulers: false,
    // Settings
+   elementsWrapper: '',
+   stringsWrapper: '"',
    tableAdd: false,
    viewAdd: false,
    triggerAdd: false,
@@ -30,7 +37,11 @@ module.exports = {
    schedulerAdd: false,
    databaseEdit: false,
    schemaEdit: false,
+   schemaDrop: false,
    tableSettings: false,
+   tableOptions: false,
+   tableArray: false,
+   tableRealCount: false,
    viewSettings: false,
    triggerSettings: false,
    triggerFunctionSettings: false,
@@ -42,13 +53,13 @@ module.exports = {
    sortableFields: false,
    unsigned: false,
    nullable: false,
+   nullablePrimary: false,
    zerofill: false,
    autoIncrement: false,
    comment: false,
    collation: false,
    definer: false,
    onUpdate: false,
-   tableArray: false,
    viewAlgorithm: false,
    viewSqlSecurity: false,
    viewUpdateOption: false,
@@ -62,8 +73,16 @@ module.exports = {
    functionSql: false,
    functionContext: false,
    functionLanguage: false,
-   triggerMiltipleEvents: false,
+   triggerSql: false,
+   triggerStatementInCreation: false,
+   triggerMultipleEvents: false,
+   triggerTableInName: false,
    triggerUpdateColumns: false,
+   triggerOnlyRename: false,
+   triggerEnableDisable: false,
+   triggerFunctionSql: false,
+   triggerFunctionlanguages: false,
    parametersLength: false,
-   languages: false
+   languages: false,
+   readOnlyMode: false
 };

src/common/customizations/index.js

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

src/common/customizations/mysql.js

@@ -7,8 +7,12 @@ module.exports = {
    defaultUser: 'root',
    defaultDatabase: null,
    // Core
+   connectionSchema: true,
    collations: true,
    engines: true,
+   sslConnection: true,
+   sshConnection: true,
+   cancelQueries: true,
    // Tools
    processesList: true,
    // Structure
@@ -20,6 +24,8 @@ module.exports = {
    functions: true,
    schedulers: true,
    // Settings
+   elementsWrapper: '',
+   stringsWrapper: '"',
    tableAdd: true,
    viewAdd: true,
    triggerAdd: true,
@@ -27,6 +33,7 @@ module.exports = {
    functionAdd: true,
    schedulerAdd: true,
    schemaEdit: true,
+   schemaDrop: true,
    tableSettings: true,
    viewSettings: true,
    triggerSettings: true,
@@ -39,6 +46,7 @@ module.exports = {
    unsigned: true,
    nullable: true,
    zerofill: true,
+   tableOptions: true,
    autoIncrement: true,
    comment: true,
    collation: true,
@@ -51,8 +59,10 @@ module.exports = {
    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
+   parametersLength: true,
+   readOnlyMode: true
 };

src/common/customizations/postgresql.js

@@ -8,35 +8,54 @@ module.exports = {
    defaultDatabase: 'postgres',
    // Core
    database: true,
+   sslConnection: true,
+   sshConnection: true,
+   cancelQueries: true,
    // Tools
    processesList: true,
    // Structure
+   schemas: true,
    tables: true,
    views: true,
-   triggers: false,
+   triggers: true,
+   triggerFunctions: true,
    routines: true,
    functions: true,
    // Settings
+   elementsWrapper: '"',
+   stringsWrapper: '\'',
    tableAdd: true,
    viewAdd: true,
-   triggerAdd: false,
+   triggerAdd: true,
+   triggerFunctionAdd: true,
    routineAdd: true,
    functionAdd: true,
+   schemaDrop: true,
    databaseEdit: false,
    tableSettings: true,
    viewSettings: true,
-   triggerSettings: false,
+   triggerSettings: true,
+   triggerFunctionSettings: true,
    routineSettings: true,
    functionSettings: true,
    indexes: true,
    foreigns: true,
    nullable: true,
    tableArray: true,
-   procedureSql: '$BODY$\r\n\r\n$BODY$',
+   procedureSql: '$procedure$\r\n\r\n$procedure$',
    procedureContext: true,
    procedureLanguage: true,
-   functionSql: '$BODY$\r\n\r\n$BODY$',
+   functionSql: '$function$\r\n\r\n$function$',
+   triggerFunctionSql: '$function$\r\nBEGIN\r\n\r\nEND\r\n$function$',
+   triggerFunctionlanguages: ['plpgsql'],
    functionContext: true,
    functionLanguage: true,
-   languages: ['sql', 'plpgsql', 'c', 'internal']
+   triggerSql: 'EXECUTE PROCEDURE ',
+   triggerStatementInCreation: true,
+   triggerMultipleEvents: true,
+   triggerTableInName: true,
+   triggerOnlyRename: false,
+   triggerEnableDisable: true,
+   languages: ['sql', 'plpgsql', 'c', 'internal'],
+   readOnlyMode: true
 };

src/common/customizations/sqlite.js

@@ -0,0 +1,27 @@
+module.exports = {
+   // Core
+   fileConnection: true,
+   // Structure
+   schemas: false,
+   tables: true,
+   views: true,
+   triggers: true,
+   // Settings
+   elementsWrapper: '"',
+   stringsWrapper: '\'',
+   tableAdd: true,
+   viewAdd: true,
+   triggerAdd: true,
+   schemaEdit: false,
+   tableSettings: true,
+   tableRealCount: true,
+   viewSettings: true,
+   triggerSettings: true,
+   indexes: true,
+   foreigns: true,
+   sortableFields: true,
+   nullable: true,
+   nullablePrimary: true,
+   triggerSql: 'BEGIN\r\n\r\nEND',
+   readOnlyMode: true
+};

src/common/data-types/mysql.js

@@ -66,6 +66,7 @@ module.exports = [
          {
             name: 'DECIMAL',
             length: true,
+            scale: true,
             collation: false,
             unsigned: false,
             zerofill: false
@@ -120,7 +121,7 @@ module.exports = [
          {
             name: 'JSON',
             length: false,
-            collation: true,
+            collation: false,
             unsigned: false,
             zerofill: false
          }
@@ -218,56 +219,56 @@ module.exports = [
       types: [
          {
             name: 'POINT',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'LINESTRING',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'POLYGON',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'GEOMETRY',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTIPOINT',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTILINESTRING',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTIPOLYGON',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
-            name: 'GEOMETRYCOLLECTION',
-            length: true,
+            name: 'GEOMCOLLECTION',
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false

src/common/data-types/postgresql.js

@@ -22,11 +22,6 @@ module.exports = [
             length: false,
             unsigned: true
          },
-         {
-            name: 'NUMERIC',
-            length: true,
-            unsigned: true
-         },
          {
             name: 'SMALLSERIAL',
             length: false,
@@ -52,6 +47,12 @@ module.exports = [
             length: false,
             unsigned: true
          },
+         {
+            name: 'NUMERIC',
+            length: true,
+            unsigned: true,
+            scale: true
+         },
          {
             name: 'DOUBLE PRECISION',
             length: false,

src/common/data-types/sqlite.js

@@ -0,0 +1,137 @@
+module.exports = [
+   {
+      group: 'integer',
+      types: [
+         {
+            name: 'INT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'INTEGER',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BIGINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'NUMERIC',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BOOLEAN',
+            length: false,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         }
+      ]
+   },
+   {
+      group: 'float',
+      types: [
+         {
+            name: 'FLOAT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'REAL',
+            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: 'TEXT',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'binary',
+      types: [
+         {
+            name: 'BLOB',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'time',
+      types: [
+         {
+            name: 'DATE',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DATETIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'other',
+      types: [
+         {
+            name: 'NONE',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   }
+];

src/common/fieldTypes.js

@@ -4,10 +4,13 @@ export const TEXT = [
    'CHARACTER',
    'CHARACTER VARYING'
 ];
+
 export const LONG_TEXT = [
    'TEXT',
    'MEDIUMTEXT',
-   'LONGTEXT'
+   'LONGTEXT',
+   'JSON',
+   'VARBINARY'
 ];
 
 export const ARRAY = [
@@ -50,6 +53,7 @@ export const BOOLEAN = [
 ];
 
 export const DATE = ['DATE'];
+
 export const TIME = [
    'TIME',
    'TIME WITH TIME ZONE'
@@ -80,3 +84,24 @@ export const BIT = [
    'BIT',
    'BIT VARYING'
 ];
+
+export const SPATIAL = [
+   'POINT',
+   'LINESTRING',
+   'POLYGON',
+   'GEOMETRY',
+   'MULTIPOINT',
+   'MULTILINESTRING',
+   'MULTIPOLYGON',
+   'GEOMCOLLECTION',
+   'GEOMETRYCOLLECTION'
+];
+
+// Used to check multi spatial fields only
+export const IS_MULTI_SPATIAL = [
+   'MULTIPOINT',
+   'MULTILINESTRING',
+   'MULTIPOLYGON',
+   'GEOMCOLLECTION',
+   'GEOMETRYCOLLECTION'
+];

src/common/index-types/sqlite.js

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

src/common/libs/getArrayDepth.js

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param {any[]} array
+ * @returns {number}
+ */
+export function getArrayDepth (array) {
+   return Array.isArray(array)
+      ? 1 + Math.max(0, ...array.map(getArrayDepth))
+      : 0;
+}

src/main/index.js

@@ -1,106 +0,0 @@
-'use strict';
-
-import { app, BrowserWindow, 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;
-
-async function createMainWindow () {
-   const icon = require('../renderer/images/logo-32.png');
-   const window = new BrowserWindow({
-      width: 1024,
-      height: 800,
-      minWidth: 900,
-      minHeight: 550,
-      title: 'Antares',
-      autoHideMenuBar: true,
-      icon: nativeImage.createFromDataURL(icon.default),
-      webPreferences: {
-         nodeIntegration: true,
-         contextIsolation: false,
-         'web-security': false,
-         enableRemoteModule: true,
-         spellcheck: false
-      },
-      frame: false,
-      backgroundColor: '#1d1d1d'
-   });
-
-   try {
-      if (isDevelopment) {
-         await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
-
-         const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
-
-         const toolName = await installExtension(VUEJS_DEVTOOLS);
-         console.log(toolName, 'installed');
-      }
-      else {
-         await window.loadURL(formatUrl({
-            pathname: path.join(__dirname, 'index.html'),
-            protocol: 'file',
-            slashes: true
-         }));
-      }
-   }
-   catch (err) {
-      console.log(err);
-   }
-
-   window.on('closed', () => {
-      mainWindow = null;
-   });
-
-   window.webContents.on('devtools-opened', () => {
-      window.focus();
-      setImmediate(() => {
-         window.focus();
-      });
-   });
-
-   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
-      if (process.platform !== 'darwin')
-         app.quit();
-   });
-
-   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 = await createMainWindow();
-         if (isDevelopment)
-            mainWindow.webContents.openDevTools();
-      }
-   });
-
-   // create main BrowserWindow when electron is ready
-   app.on('ready', async () => {
-      mainWindow = await createMainWindow();
-      if (isDevelopment)
-         mainWindow.webContents.openDevTools();
-   });
-}

src/main/ipc-handlers/connection.js

@@ -9,12 +9,16 @@ export default connections => {
          port: +conn.port,
          user: conn.user,
          password: conn.password,
-         application_name: 'Antares SQL'
+         application_name: 'Antares SQL',
+         readonly: conn.readonly
       };
 
       if (conn.database)
          params.database = conn.database;
 
+      if (conn.databasePath)
+         params.databasePath = conn.databasePath;
+
       if (conn.ssl) {
          params.ssl = {
             key: conn.key ? fs.readFileSync(conn.key) : null,
@@ -24,21 +28,31 @@ export default connections => {
          };
       }
 
-      const connection = ClientsFactory.getConnection({
-         client: conn.client,
-         params
-      });
-
-      await connection.connect();
+      if (conn.ssh) {
+         params.ssh = {
+            host: conn.sshHost,
+            username: conn.sshUser,
+            password: conn.sshPass,
+            port: conn.sshPort ? conn.sshPort : 22,
+            privateKey: conn.sshKey ? fs.readFileSync(conn.sshKey) : null,
+            passphrase: conn.sshPassphrase
+         };
+      }
 
       try {
+         const connection = await ClientsFactory.getConnection({
+            client: conn.client,
+            params
+         });
+         await connection.connect();
+
          await connection.select('1+1').run();
          connection.destroy();
 
          return { status: 'success' };
       }
       catch (err) {
-         return { status: 'error', response: err };
+         return { status: 'error', response: err.toString() };
       }
    });
 
@@ -52,12 +66,19 @@ export default connections => {
          port: +conn.port,
          user: conn.user,
          password: conn.password,
-         application_name: 'Antares SQL'
+         application_name: 'Antares SQL',
+         readonly: conn.readonly
       };
 
       if (conn.database)
          params.database = conn.database;
 
+      if (conn.databasePath)
+         params.databasePath = conn.databasePath;
+
+      if (conn.schema)
+         params.schema = conn.schema;
+
       if (conn.ssl) {
          params.ssl = {
             key: conn.key ? fs.readFileSync(conn.key) : null,
@@ -67,6 +88,17 @@ export default connections => {
          };
       }
 
+      if (conn.ssh) {
+         params.ssh = {
+            host: conn.sshHost,
+            username: conn.sshUser,
+            password: conn.sshPass,
+            port: conn.sshPort ? conn.sshPort : 22,
+            privateKey: conn.sshKey ? fs.readFileSync(conn.sshKey) : null,
+            passphrase: conn.sshPassphrase
+         };
+      }
+
       try {
          const connection = ClientsFactory.getConnection({
             client: conn.client,

src/main/ipc-handlers/functions.js

@@ -31,6 +31,16 @@ export default (connections) => {
       }
    });
 
+   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);
@@ -40,4 +50,14 @@ export default (connections) => {
          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/schedulers.js

@@ -40,4 +40,17 @@ export default (connections) => {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('toggle-scheduler', async (event, params) => {
+      try {
+         if (!params.enabled)
+            await connections[params.uid].enableEvent({ ...params });
+         else
+            await connections[params.uid].disableEvent({ ...params });
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };

src/main/ipc-handlers/schema.js

@@ -112,6 +112,17 @@ export default connections => {
       }
    });
 
+   ipcMain.handle('kill-process', async (event, { uid, pid }) => {
+      try {
+         const result = await connections[uid].killProcess(pid);
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
    ipcMain.handle('use-schema', async (event, { uid, schema }) => {
       if (!schema) return;
 
@@ -124,11 +135,18 @@ export default connections => {
       }
    });
 
-   ipcMain.handle('raw-query', async (event, { uid, query, schema }) => {
+   ipcMain.handle('raw-query', async (event, { uid, query, schema, tabUid, autocommit }) => {
       if (!query) return;
 
       try {
-         const result = await connections[uid].raw(query, { nest: true, details: true, schema });
+         const result = await connections[uid].raw(query, {
+            nest: true,
+            details: true,
+            schema,
+            tabUid,
+            autocommit,
+            comments: false
+         });
 
          return { status: 'success', response: result };
       }
@@ -136,4 +154,52 @@ export default connections => {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('kill-tab-query', async (event, { uid, tabUid }) => {
+      if (!tabUid) return;
+
+      try {
+         await connections[uid].killTabQuery(tabUid);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('commit-tab', async (event, { uid, tabUid }) => {
+      if (!tabUid) return;
+
+      try {
+         await connections[uid].commitTab(tabUid);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('rollback-tab', async (event, { uid, tabUid }) => {
+      if (!tabUid) return;
+
+      try {
+         await connections[uid].rollbackTab(tabUid);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('destroy-connection-to-commit', async (event, { uid, tabUid }) => {
+      if (!tabUid) return;
+
+      try {
+         await connections[uid].destroyConnectionToCommit(tabUid);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };

src/main/ipc-handlers/tables.js

@@ -3,6 +3,7 @@ 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 * as customizations from 'common/customizations';
 import fs from 'fs';
 
 export default (connections) => {
@@ -16,19 +17,44 @@ export default (connections) => {
       }
    });
 
-   ipcMain.handle('get-table-data', async (event, { uid, schema, table, sortParams }) => {
+   ipcMain.handle('get-table-data', async (event, { uid, schema, table, limit, page, sortParams, where }) => {
       try {
+         const offset = (page - 1) * limit;
          const query = connections[uid]
             .select('*')
             .schema(schema)
             .from(table)
-            .limit(1000);
+            .limit(limit)
+            .offset(offset);
 
          if (sortParams && sortParams.field && sortParams.dir)
             query.orderBy({ [sortParams.field]: sortParams.dir.toUpperCase() });
 
-         const result = await query.run({ details: true });
+         if (where)
+            query.where(where);
 
+         const result = await query.run({ details: true, schema });
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-table-count', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getTableApproximateCount(params);
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-table-options', async (event, params) => {
+      try {
+         const result = await connections[params.uid].getTableOptions(params);
          return { status: 'success', response: result };
       }
       catch (err) {
@@ -59,10 +85,13 @@ export default (connections) => {
    });
 
    ipcMain.handle('update-table-cell', async (event, params) => {
+      delete params.row._antares_id;
+      const { stringsWrapper: sw } = customizations[connections[params.uid]._client];
+
       try { // TODO: move to client classes
          let escapedParam;
          let reload = false;
-         const id = typeof params.id === 'number' ? params.id : `"${params.id}"`;
+         const id = typeof params.id === 'number' ? params.id : `${sw}${params.id}${sw}`;
 
          if ([...NUMBER, ...FLOAT].includes(params.type))
             escapedParam = params.content;
@@ -75,6 +104,9 @@ export default (connections) => {
                case 'pg':
                   escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
                   break;
+               case 'sqlite':
+                  escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
+                  break;
             }
          }
          else if (ARRAY.includes(params.type))
@@ -95,6 +127,10 @@ export default (connections) => {
                      fileBlob = fs.readFileSync(params.content);
                      escapedParam = `decode('${fileBlob.toString('hex')}', 'hex')`;
                      break;
+                  case 'sqlite':
+                     fileBlob = fs.readFileSync(params.content);
+                     escapedParam = `X'${fileBlob.toString('hex')}'`;
+                     break;
                }
                reload = true;
             }
@@ -107,6 +143,9 @@ export default (connections) => {
                   case 'pg':
                      escapedParam = 'decode(\'\', \'hex\')';
                      break;
+                  case 'sqlite':
+                     escapedParam = 'X\'\'';
+                     break;
                }
             }
          }
@@ -161,7 +200,7 @@ export default (connections) => {
             const fieldName = Object.keys(row)[0].includes('.') ? `${params.table}.${params.primary}` : params.primary;
 
             return typeof row[fieldName] === 'string'
-               ? `"${row[fieldName]}"`
+               ? `'${row[fieldName]}'`
                : row[fieldName];
          }).join(',');
 
@@ -420,6 +459,16 @@ export default (connections) => {
       }
    });
 
+   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);

src/main/ipc-handlers/triggers.js

@@ -40,4 +40,17 @@ export default (connections) => {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('toggle-trigger', async (event, params) => {
+      try {
+         if (!params.enabled)
+            await connections[params.uid].enableTrigger(params);
+         else
+            await connections[params.uid].disableTrigger(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };

src/main/ipc-handlers/updates.js

@@ -2,6 +2,7 @@ import { ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import Store from 'electron-store';
 const persistentStore = new Store({ name: 'settings' });
+const isMacOS = process.platform === 'darwin';
 
 let mainWindow;
 autoUpdater.allowPrerelease = persistentStore.get('allow_prerelease', true);
@@ -9,8 +10,11 @@ autoUpdater.allowPrerelease = persistentStore.get('allow_prerelease', true);
 export default () => {
    ipcMain.on('check-for-updates', event => {
       mainWindow = event;
-      if (process.windowsStore)
+      if (process.windowsStore || (process.platform === 'linux' && !process.env.APPIMAGE))
          mainWindow.reply('no-auto-update');
+      else if (isMacOS) { // Temporary solution on MacOS for unsigned app updates
+         autoUpdater.autoDownload = false;
+      }
       else {
          autoUpdater.checkForUpdatesAndNotify().catch(() => {
             mainWindow.reply('check-failed');
@@ -28,7 +32,10 @@ export default () => {
    });
 
    autoUpdater.on('update-available', () => {
-      mainWindow.reply('update-available');
+      if (isMacOS)
+         mainWindow.reply('link-to-download');
+      else
+         mainWindow.reply('update-available');
    });
 
    autoUpdater.on('update-not-available', () => {

src/main/libs/AntaresCore.js

@@ -16,6 +16,7 @@ export class AntaresCore {
       this._params = args.params;
       this._poolSize = args.poolSize || false;
       this._connection = null;
+      this._ssh = null;
       this._logger = args.logger || console.log;
 
       this._queryDefaults = {
@@ -26,6 +27,7 @@ export class AntaresCore {
          groupBy: [],
          orderBy: [],
          limit: [],
+         offset: [],
          join: [],
          update: [],
          insert: [],
@@ -109,6 +111,11 @@ export class AntaresCore {
       return this;
    }
 
+   offset (...args) {
+      this._query.offset = args;
+      return this;
+   }
+
    /**
     * @param {String | Array} args field = value
     * @returns
@@ -134,7 +141,7 @@ export class AntaresCore {
     * @returns {Promise}
     * @memberof AntaresCore
     */
-   async run (args) {
+   run (args) {
       const rawQuery = this.getSQL();
       this._resetQuery();
       return this.raw(rawQuery, args);

src/main/libs/ClientsFactory.js

@@ -1,6 +1,13 @@
 'use strict';
 import { MySQLClient } from './clients/MySQLClient';
 import { PostgreSQLClient } from './clients/PostgreSQLClient';
+import { SQLiteClient } from './clients/SQLiteClient';
+
+const queryLogger = sql => {
+   // Remove comments, newlines and multiple spaces
+   const escapedSql = sql.replace(/(\/\*(.|[\r\n])*?\*\/)|(--(.*|[\r\n]))/gm, '').replace(/\s\s+/g, ' ');
+   console.log(escapedSql);
+};
 
 export class ClientsFactory {
    /**
@@ -12,17 +19,27 @@ export class ClientsFactory {
     * @param {String} args.params.host
     * @param {Number} args.params.port
     * @param {String} args.params.password
+    * @param {String=} args.params.database
+    * @param {String=} args.params.schema
+    * @param {String} args.params.ssh.host
+    * @param {String} args.params.ssh.username
+    * @param {String} args.params.ssh.password
+    * @param {Number} args.params.ssh.port
     * @param {Number=} args.poolSize
     * @returns Database Connection
     * @memberof ClientsFactory
     */
    static getConnection (args) {
+      args.logger = queryLogger;
+
       switch (args.client) {
          case 'mysql':
          case 'maria':
             return new MySQLClient(args);
          case 'pg':
             return new PostgreSQLClient(args);
+         case 'sqlite':
+            return new SQLiteClient(args);
          default:
             throw new Error(`Unknown database client: ${args.client}`);
       }

src/main/libs/clients/SQLiteClient.js

@@ -0,0 +1,859 @@
+'use strict';
+import sqlite from 'better-sqlite3';
+import { AntaresCore } from '../AntaresCore';
+import dataTypes from 'common/data-types/sqlite';
+import { NUMBER, FLOAT, TIME, DATETIME } from 'common/fieldTypes';
+
+export class SQLiteClient extends AntaresCore {
+   constructor (args) {
+      super(args);
+
+      this._schema = null;
+      this._connectionsToCommit = new Map();
+   }
+
+   _getTypeInfo (type) {
+      return dataTypes
+         .reduce((acc, group) => [...acc, ...group.types], [])
+         .filter(_type => _type.name === type.toUpperCase())[0];
+   }
+
+   /**
+    * @memberof SQLiteClient
+    */
+   async connect () {
+      this._connection = this.getConnection();
+   }
+
+   getConnection () {
+      return sqlite(this._params.databasePath, {
+         fileMustExist: true,
+         readonly: this._params.readonly
+      });
+   }
+
+   /**
+    * @memberof SQLiteClient
+    */
+   destroy () {}
+
+   /**
+    * Executes an USE query
+    *
+    * @memberof SQLiteClient
+    */
+   use () {}
+
+   /**
+    * @param {Array} schemas list
+    * @returns {Array.<Object>} databases scructure
+    * @memberof SQLiteClient
+    */
+   async getStructure (schemas) {
+      const { rows: databases } = await this.raw('SELECT * FROM pragma_database_list');
+
+      const filteredDatabases = databases;
+
+      const tablesArr = [];
+      const triggersArr = [];
+      let schemaSize = 0;
+
+      for (const db of filteredDatabases) {
+         if (!schemas.has(db.name)) continue;
+
+         let { rows: tables } = await this.raw(`
+            SELECT * 
+            FROM "${db.name}".sqlite_master 
+            WHERE type IN ('table', 'view') 
+            AND name NOT LIKE 'sqlite_%' 
+            ORDER BY name
+         `);
+         if (tables.length) {
+            tables = tables.map(table => {
+               table.Db = db.name;
+               return table;
+            });
+            tablesArr.push(...tables);
+         }
+
+         let { rows: triggers } = await this.raw(`SELECT * FROM "${db.name}".sqlite_master WHERE type='trigger'`);
+         if (triggers.length) {
+            triggers = triggers.map(trigger => {
+               trigger.Db = db.name;
+               return trigger;
+            });
+            triggersArr.push(...triggers);
+         }
+      }
+
+      return filteredDatabases.map(db => {
+         if (schemas.has(db.name)) {
+            // TABLES
+            const remappedTables = tablesArr.filter(table => table.Db === db.name).map(table => {
+               const tableSize = 0;
+               schemaSize += tableSize;
+
+               return {
+                  name: table.name,
+                  type: table.type,
+                  rows: false,
+                  size: false
+               };
+            });
+
+            // TRIGGERS
+            const remappedTriggers = triggersArr.filter(trigger => trigger.Db === db.name).map(trigger => {
+               return {
+                  name: trigger.name,
+                  table: trigger.tbl_name
+               };
+            });
+
+            return {
+               name: db.name,
+               size: schemaSize,
+               tables: remappedTables,
+               functions: [],
+               procedures: [],
+               triggers: remappedTriggers,
+               schedulers: []
+            };
+         }
+         else {
+            return {
+               name: db.name,
+               size: 0,
+               tables: [],
+               functions: [],
+               procedures: [],
+               triggers: [],
+               schedulers: []
+            };
+         }
+      });
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table scructure
+    * @memberof SQLiteClient
+    */
+   async getTableColumns ({ schema, table }) {
+      const { rows: fields } = await this.raw(`SELECT * FROM "${schema}".pragma_table_info('${table}')`);
+
+      return fields.map(field => {
+         const [type, length] = field.type.includes('(')
+            ? field.type.replace(')', '').split('(').map(el => {
+               if (!isNaN(el)) el = +el;
+               return el;
+            })
+            : [field.type, null];
+
+         return {
+            name: field.name,
+            key: null,
+            type: type.trim(),
+            schema: schema,
+            table: table,
+            numPrecision: [...NUMBER, ...FLOAT].includes(type) ? length : null,
+            datePrecision: null,
+            charLength: ![...NUMBER, ...FLOAT].includes(type) ? length : null,
+            nullable: !field.notnull,
+            unsigned: null,
+            zerofill: null,
+            order: typeof field.cid === 'string' ? +field.cid + 1 : field.cid + 1,
+            default: field.dflt_value,
+            charset: null,
+            collation: null,
+            autoIncrement: false,
+            onUpdate: null,
+            comment: ''
+         };
+      });
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table row count
+    * @memberof SQLiteClient
+    */
+   async getTableApproximateCount ({ schema, table }) {
+      const { rows } = await this.raw(`SELECT COUNT(*) AS count FROM "${schema}"."${table}"`);
+
+      return rows.length ? rows[0].count : 0;
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table options
+    * @memberof SQLiteClient
+    */
+   async getTableOptions ({ schema, table }) {
+      return { name: table };
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table indexes
+    * @memberof SQLiteClient
+    */
+   async getTableIndexes ({ schema, table }) {
+      const remappedIndexes = [];
+      const { rows: primaryKeys } = await this.raw(`SELECT * FROM "${schema}".pragma_table_info('${table}') WHERE pk != 0`);
+
+      for (const key of primaryKeys) {
+         remappedIndexes.push({
+            name: 'PRIMARY',
+            column: key.name,
+            indexType: null,
+            type: 'PRIMARY',
+            cardinality: null,
+            comment: '',
+            indexComment: ''
+         });
+      }
+
+      const { rows: indexes } = await this.raw(`SELECT * FROM "${schema}".pragma_index_list('${table}');`);
+
+      for (const index of indexes) {
+         const { rows: details } = await this.raw(`SELECT * FROM "${schema}".pragma_index_info('${index.name}');`);
+
+         for (const detail of details) {
+            remappedIndexes.push({
+               name: index.name,
+               column: detail.name,
+               indexType: null,
+               type: index.unique === 1 ? 'UNIQUE' : 'INDEX',
+               cardinality: null,
+               comment: '',
+               indexComment: ''
+            });
+         }
+      }
+
+      return remappedIndexes;
+   }
+
+   /**
+    * @param {Object} params
+    * @param {String} params.schema
+    * @param {String} params.table
+    * @returns {Object} table key usage
+    * @memberof SQLiteClient
+    */
+   async getKeyUsage ({ schema, table }) {
+      const { rows } = await this.raw(`SELECT * FROM "${schema}".pragma_foreign_key_list('${table}');`);
+
+      return rows.map(field => {
+         return {
+            schema: schema,
+            table: table,
+            field: field.from,
+            position: field.id + 1,
+            constraintPosition: null,
+            constraintName: field.id,
+            refSchema: schema,
+            refTable: field.table,
+            refField: field.to,
+            onUpdate: field.on_update,
+            onDelete: field.on_delete
+         };
+      });
+   }
+
+   async getUsers () {}
+
+   /**
+    * SHOW CREATE VIEW
+    *
+    * @returns {Array.<Object>} view informations
+    * @memberof SQLiteClient
+    */
+   async getViewInformations ({ schema, view }) {
+      const sql = `SELECT "sql" FROM "${schema}".sqlite_master WHERE "type"='view' AND name='${view}'`;
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            sql: row.sql.match(/(?<=AS ).*?$/gs)[0],
+            name: view
+         };
+      })[0];
+   }
+
+   /**
+    * DROP VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async dropView (params) {
+      const sql = `DROP VIEW "${params.schema}"."${params.view}"`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async alterView (params) {
+      const { view } = params;
+      try {
+         await this.dropView({ schema: view.schema, view: view.oldName });
+         await this.createView(view);
+      }
+      catch (err) {
+         return Promise.reject(err);
+      }
+   }
+
+   /**
+    * CREATE VIEW
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async createView (params) {
+      const sql = `CREATE VIEW "${params.schema}"."${params.name}" AS ${params.sql}`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * SHOW CREATE TRIGGER
+    *
+    * @returns {Array.<Object>} view informations
+    * @memberof SQLiteClient
+    */
+   async getTriggerInformations ({ schema, trigger }) {
+      const sql = `SELECT "sql" FROM "${schema}".sqlite_master WHERE "type"='trigger' AND name='${trigger}'`;
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            sql: row.sql.match(/(BEGIN|begin)(.*)(END|end)/gs)[0],
+            name: trigger,
+            table: row.sql.match(/(?<=ON `).*?(?=`)/gs)[0],
+            activation: row.sql.match(/(BEFORE|AFTER)/gs)[0],
+            event: row.sql.match(/(INSERT|UPDATE|DELETE)/gs)[0]
+         };
+      })[0];
+   }
+
+   /**
+    * DROP TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async dropTrigger (params) {
+      const sql = `DROP TRIGGER \`${params.schema}\`.\`${params.trigger}\``;
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async alterTrigger (params) {
+      const { trigger } = params;
+      const tempTrigger = Object.assign({}, trigger);
+      tempTrigger.name = `Antares_${tempTrigger.name}_tmp`;
+
+      try {
+         await this.createTrigger(tempTrigger);
+         await this.dropTrigger({ schema: trigger.schema, trigger: tempTrigger.name });
+         await this.dropTrigger({ schema: trigger.schema, trigger: trigger.oldName });
+         await this.createTrigger(trigger);
+      }
+      catch (err) {
+         return Promise.reject(err);
+      }
+   }
+
+   /**
+    * CREATE TRIGGER
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof SQLiteClient
+    */
+   async createTrigger (params) {
+      const sql = `CREATE ${params.definer ? `DEFINER=${params.definer} ` : ''}TRIGGER \`${params.schema}\`.\`${params.name}\` ${params.activation} ${params.event} ON \`${params.table}\` FOR EACH ROW ${params.sql}`;
+      return await this.raw(sql, { split: false });
+   }
+
+   /**
+    * SHOW COLLATION
+    *
+    * @returns {Array.<Object>} collations list
+    * @memberof SQLiteClient
+    */
+   async getCollations () {
+      return [];
+   }
+
+   /**
+    * SHOW VARIABLES
+    *
+    * @returns {Array.<Object>} variables list
+    * @memberof SQLiteClient
+    */
+   async getVariables () {
+      return [];
+   }
+
+   /**
+    * SHOW ENGINES
+    *
+    * @returns {Array.<Object>} engines list
+    * @memberof SQLiteClient
+    */
+   async getEngines () {
+      return {
+         name: 'SQLite',
+         support: 'YES',
+         comment: '',
+         isDefault: true
+      };
+   }
+
+   /**
+    * SHOW VARIABLES LIKE '%vers%'
+    *
+    * @returns {Array.<Object>} version parameters
+    * @memberof SQLiteClient
+    */
+   async getVersion () {
+      const os = require('os');
+      const sql = 'SELECT sqlite_version() AS version';
+      const { rows } = await this.raw(sql);
+
+      return {
+         number: rows[0].version,
+         name: 'SQLite',
+         arch: process.arch,
+         os: `${os.type()} ${os.release()}`
+      };
+   }
+
+   async getProcesses () {}
+
+   async killProcess () {}
+
+   /**
+    *
+    * @param {string} tabUid
+    * @returns {Promise<null>}
+    */
+   async commitTab (tabUid) {
+      const connection = this._connectionsToCommit.get(tabUid);
+      if (connection) {
+         connection.prepare('COMMIT').run();
+         return this.destroyConnectionToCommit(tabUid);
+      }
+   }
+
+   /**
+    *
+    * @param {string} tabUid
+    * @returns {Promise<null>}
+    */
+   async rollbackTab (tabUid) {
+      const connection = this._connectionsToCommit.get(tabUid);
+      if (connection) {
+         connection.prepare('ROLLBACK').run();
+         return this.destroyConnectionToCommit(tabUid);
+      }
+   }
+
+   destroyConnectionToCommit (tabUid) {
+      const connection = this._connectionsToCommit.get(tabUid);
+      if (connection) {
+         connection.close();
+         this._connectionsToCommit.delete(tabUid);
+      }
+   }
+
+   /**
+    * CREATE TABLE
+    *
+    * @returns {Promise<null>}
+    * @memberof SQLiteClient
+    */
+   async createTable (params) {
+      const {
+         schema,
+         fields,
+         foreigns,
+         indexes,
+         options
+      } = params;
+      const newColumns = [];
+      const newIndexes = [];
+      const manageIndexes = [];
+      const newForeigns = [];
+
+      let sql = `CREATE TABLE "${schema}"."${options.name}"`;
+
+      // ADD FIELDS
+      fields.forEach(field => {
+         const typeInfo = this._getTypeInfo(field.type);
+         const length = typeInfo?.length ? field.enumValues || field.numLength || field.charLength || field.datePrecision : false;
+
+         newColumns.push(`"${field.name}" 
+            ${field.type.toUpperCase()}${length && length !== true ? `(${length})` : ''} 
+            ${field.unsigned ? 'UNSIGNED' : ''} 
+            ${field.nullable ? 'NULL' : 'NOT NULL'}
+            ${field.autoIncrement ? 'AUTO_INCREMENT' : ''}
+            ${field.default ? `DEFAULT ${field.default}` : ''}
+            ${field.onUpdate ? `ON UPDATE ${field.onUpdate}` : ''}`);
+      });
+
+      // ADD INDEX
+      indexes.forEach(index => {
+         const fields = index.fields.map(field => `"${field}"`).join(',');
+         const type = index.type;
+
+         if (type === 'PRIMARY')
+            newIndexes.push(`PRIMARY KEY (${fields})`);
+         else
+            manageIndexes.push(`CREATE ${type === 'UNIQUE' ? type : ''} INDEX "${index.name}" ON "${options.name}" (${fields})`);
+      });
+
+      // ADD FOREIGN KEYS
+      foreigns.forEach(foreign => {
+         newForeigns.push(`CONSTRAINT "${foreign.constraintName}" FOREIGN KEY ("${foreign.field}") REFERENCES "${foreign.refTable}" ("${foreign.refField}") ON UPDATE ${foreign.onUpdate} ON DELETE ${foreign.onDelete}`);
+      });
+
+      sql = `${sql} (${[...newColumns, ...newIndexes, ...newForeigns].join(', ')})`;
+      if (manageIndexes.length) sql = `${sql}; ${manageIndexes.join(';')}`;
+
+      return await this.raw(sql);
+   }
+
+   /**
+    * ALTER TABLE
+    *
+    * @returns {Promise<null>}
+    * @memberof SQLiteClient
+    */
+   async alterTable (params) {
+      try {
+         await this.raw('BEGIN TRANSACTION');
+         await this.raw('PRAGMA foreign_keys = 0');
+
+         const tmpName = `Antares_${params.table}_tmp`;
+         await this.raw(`CREATE TABLE "${tmpName}" AS SELECT * FROM "${params.table}"`);
+         await this.dropTable(params);
+
+         const createTableParams = {
+            schema: params.schema,
+            fields: params.tableStructure.fields,
+            foreigns: params.tableStructure.foreigns,
+            indexes: params.tableStructure.indexes.filter(index => !index.name.includes('sqlite_autoindex')),
+            options: { name: params.tableStructure.name }
+         };
+         await this.createTable(createTableParams);
+         const insertFields = createTableParams.fields
+            .filter(field => {
+               return (
+                  params.additions.every(add => add.name !== field.name) &&
+                  params.deletions.every(del => del.name !== field.name)
+               );
+            })
+            .reduce((acc, curr) => {
+               acc.push(`"${curr.name}"`);
+               return acc;
+            }, []);
+
+         const selectFields = insertFields.map(field => {
+            const renamedField = params.changes.find(change => `"${change.name}"` === field);
+            if (renamedField)
+               return `"${renamedField.orgName}"`;
+            return field;
+         });
+
+         await this.raw(`INSERT INTO "${createTableParams.options.name}" (${insertFields.join(',')}) SELECT ${selectFields.join(',')} FROM "${tmpName}"`);
+
+         await this.dropTable({ schema: params.schema, table: tmpName });
+         await this.raw('PRAGMA foreign_keys = 1');
+         await this.raw('COMMIT');
+      }
+      catch (err) {
+         await this.raw('ROLLBACK');
+         return Promise.reject(err);
+      }
+   }
+
+   /**
+    * DUPLICATE TABLE
+    *
+    * @returns {Promise<null>}
+    * @memberof SQLiteClient
+    */
+   async duplicateTable (params) { // TODO: retrive table informations and create a copy
+      const sql = `CREATE TABLE "${params.schema}"."${params.table}_copy" AS SELECT * FROM "${params.schema}"."${params.table}"`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * TRUNCATE TABLE
+    *
+    * @returns {Promise<null>}
+    * @memberof SQLiteClient
+    */
+   async truncateTable (params) {
+      const sql = `DELETE FROM "${params.schema}"."${params.table}"`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * DROP TABLE
+    *
+    * @returns {Promise<null>}
+    * @memberof SQLiteClient
+    */
+   async dropTable (params) {
+      const sql = `DROP TABLE "${params.schema}"."${params.table}"`;
+      return await this.raw(sql);
+   }
+
+   /**
+    * @returns {String} SQL string
+    * @memberof SQLiteClient
+    */
+   getSQL () {
+      // SELECT
+      const selectArray = this._query.select.reduce(this._reducer, []);
+      let selectRaw = '';
+
+      if (selectArray.length)
+         selectRaw = selectArray.length ? `SELECT ${selectArray.join(', ')} ` : 'SELECT * ';
+
+      // FROM
+      let fromRaw = '';
+
+      if (!this._query.update.length && !Object.keys(this._query.insert).length && !!this._query.from)
+         fromRaw = 'FROM';
+      else if (Object.keys(this._query.insert).length)
+         fromRaw = 'INTO';
+
+      fromRaw += this._query.from ? ` ${this._query.schema ? `"${this._query.schema}".` : ''}"${this._query.from}" ` : '';
+
+      // WHERE
+      const whereArray = this._query.where
+         .reduce(this._reducer, [])
+         ?.map(clausole => clausole.replace('= null', 'IS NULL'));
+      const whereRaw = whereArray.length ? `WHERE ${whereArray.join(' AND ')} ` : '';
+
+      // UPDATE
+      const updateArray = this._query.update.reduce(this._reducer, []);
+      const updateRaw = updateArray.length ? `SET ${updateArray.join(', ')} ` : '';
+
+      // INSERT
+      let insertRaw = '';
+
+      if (this._query.insert.length) {
+         const fieldsList = Object.keys(this._query.insert[0]);
+         const rowsList = this._query.insert.map(el => `(${Object.values(el).join(', ')})`);
+
+         insertRaw = `(${fieldsList.join(', ')}) VALUES ${rowsList.join(', ')} `;
+      }
+
+      // GROUP BY
+      const groupByArray = this._query.groupBy.reduce(this._reducer, []);
+      const groupByRaw = groupByArray.length ? `GROUP BY ${groupByArray.join(', ')} ` : '';
+
+      // ORDER BY
+      const orderByArray = this._query.orderBy.reduce(this._reducer, []);
+      const orderByRaw = orderByArray.length ? `ORDER BY ${orderByArray.join(', ')} ` : '';
+
+      // LIMIT
+      const limitRaw = this._query.limit.length ? `LIMIT ${this._query.limit.join(', ')} ` : '';
+
+      // OFFSET
+      const offsetRaw = this._query.offset.length ? `OFFSET ${this._query.offset.join(', ')} ` : '';
+
+      return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${offsetRaw}${insertRaw}`;
+   }
+
+   /**
+    * @param {string} sql raw SQL query
+    * @param {object} args
+    * @param {boolean} args.nest
+    * @param {boolean} args.details
+    * @param {boolean} args.split
+    * @returns {Promise}
+    * @memberof SQLiteClient
+    */
+   async raw (sql, args) {
+      if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
+
+      args = {
+         nest: false,
+         details: false,
+         split: true,
+         comments: true,
+         autocommit: true,
+         ...args
+      };
+
+      if (!args.comments)
+         sql = sql.replace(/(\/\*(.|[\r\n])*?\*\/)|(--(.*|[\r\n]))/gm, '');// Remove comments
+
+      const resultsArr = [];
+      let paramsArr = [];
+      const queries = args.split
+         ? sql.split(/((?:[^;'"]*(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*')[^;'"]*)+)|;/gm)
+            .filter(Boolean)
+            .map(q => q.trim())
+         : [sql];
+
+      let connection;
+
+      if (!args.autocommit && args.tabUid) { // autocommit OFF
+         if (this._connectionsToCommit.has(args.tabUid))
+            connection = this._connectionsToCommit.get(args.tabUid);
+         else {
+            connection = this.getConnection();
+            connection.prepare('BEGIN TRANSACTION').run();
+            this._connectionsToCommit.set(args.tabUid, connection);
+         }
+      }
+      else// autocommit ON
+         connection = this._connection;
+
+      for (const query of queries) {
+         if (!query) continue;
+         const timeStart = new Date();
+         let timeStop;
+         const keysArr = [];
+
+         const { rows, report, fields, keys, duration } = await new Promise((resolve, reject) => {
+            (async () => {
+               let queryResult;
+               let affectedRows;
+               let fields;
+               const detectedTypes = {};
+
+               try {
+                  const stmt = connection.prepare(query);
+
+                  if (stmt.reader) {
+                     queryResult = stmt.all();
+                     fields = stmt.columns();
+
+                     if (queryResult.length) {
+                        fields.forEach(field => {
+                           detectedTypes[field.name] = typeof queryResult[0][field.name];
+                        });
+                     }
+                  }
+                  else {
+                     const info = queryResult = stmt.run();
+                     affectedRows = info.changes;
+                  }
+               }
+               catch (err) {
+                  reject(err);
+               }
+
+               timeStop = new Date();
+
+               let remappedFields = fields
+                  ? fields.map(field => {
+                     let [parsedType, length] = field.type?.includes('(')
+                        ? field.type.replace(')', '').split('(').map(el => {
+                           if (!isNaN(el))
+                              el = +el;
+                           else
+                              el = el.trim();
+                           return el;
+                        })
+                        : [field.type, null];
+
+                     if ([...TIME, ...DATETIME].includes(parsedType)) {
+                        const firstNotNull = queryResult.find(res => res[field.name] !== null);
+                        if (firstNotNull && firstNotNull[field.name].includes('.'))
+                           length = firstNotNull[field.name].split('.').pop().length;
+                     }
+
+                     return {
+                        name: field.name,
+                        alias: field.name,
+                        orgName: field.column,
+                        schema: field.database,
+                        table: field.table,
+                        tableAlias: field.table,
+                        orgTable: field.table,
+                        type: field.type !== null ? parsedType : detectedTypes[field.name],
+                        length
+                     };
+                  }).filter(Boolean)
+                  : [];
+
+               if (args.details) {
+                  paramsArr = remappedFields.map(field => {
+                     return {
+                        table: field.table,
+                        schema: field.schema
+                     };
+                  }).filter((val, i, arr) => arr.findIndex(el => el.schema === val.schema && el.table === val.table) === i);
+
+                  for (const paramObj of paramsArr) {
+                     if (!paramObj.table || !paramObj.schema) continue;
+
+                     try {
+                        const indexes = await this.getTableIndexes(paramObj);
+
+                        remappedFields = remappedFields.map(field => {
+                        // const detailedField = columns.find(f => f.name === field.name);
+                           const fieldIndex = indexes.find(i => i.column === field.name);
+                           if (field.table === paramObj.table && field.schema === paramObj.schema) {
+                           // if (detailedField) {
+                           //    const length = detailedField.numPrecision || detailedField.charLength || detailedField.datePrecision || null;
+                           //    field = { ...field, ...detailedField, length };
+                           // }
+
+                              if (fieldIndex) {
+                                 const key = fieldIndex.type === 'PRIMARY' ? 'pri' : fieldIndex.type === 'UNIQUE' ? 'uni' : 'mul';
+                                 field = { ...field, key };
+                              };
+                           }
+
+                           return field;
+                        });
+                     }
+                     catch (err) {
+                        reject(err);
+                     }
+                  }
+               }
+
+               resolve({
+                  duration: timeStop - timeStart,
+                  rows: Array.isArray(queryResult) ? queryResult.some(el => Array.isArray(el)) ? [] : queryResult : false,
+                  report: affectedRows !== undefined ? { affectedRows } : null,
+                  fields: remappedFields,
+                  keys: keysArr
+               });
+            })();
+         });
+
+         resultsArr.push({ rows, report, fields, keys, duration });
+      }
+
+      return resultsArr.length === 1 ? resultsArr[0] : resultsArr;
+   }
+}

src/main/main.js

@@ -0,0 +1,172 @@
+'use strict';
+
+import { app, BrowserWindow, /* session, */ nativeImage, Menu } from 'electron';
+import * as path from 'path';
+import Store from 'electron-store';
+import * as windowStateKeeper from 'electron-window-state';
+import * as remoteMain from '@electron/remote/main';
+
+import ipcHandlers from './ipc-handlers';
+
+// remoteMain.initialize();
+Store.initRenderer();
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+const isMacOS = process.platform === 'darwin';
+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;
+let mainWindowState;
+
+async function createMainWindow () {
+   const icon = require('../renderer/images/logo-32.png');
+   const window = new BrowserWindow({
+      width: mainWindowState.width,
+      height: mainWindowState.height,
+      x: mainWindowState.x,
+      y: mainWindowState.y,
+      minWidth: 900,
+      minHeight: 550,
+      title: 'Antares SQL',
+      autoHideMenuBar: true,
+      icon: nativeImage.createFromDataURL(icon.default),
+      webPreferences: {
+         nodeIntegration: true,
+         contextIsolation: false,
+         'web-security': false,
+         spellcheck: false
+      },
+      frame: false,
+      titleBarStyle: isMacOS ? 'hidden' : 'default',
+      trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
+      backgroundColor: '#1d1d1d'
+   });
+
+   mainWindowState.manage(window);
+   window.on('moved', saveWindowState);
+
+   remoteMain.enable(window.webContents);
+
+   try {
+      if (isDevelopment) {
+         const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer');
+         const options = {
+            loadExtensionOptions: { allowFileAccess: true }
+         };
+
+         try {
+            const name = await installExtension(VUEJS3_DEVTOOLS, options);
+            console.log(`Added Extension: ${name}`);
+         }
+         catch (err) {
+            console.log('An error occurred: ', err);
+         }
+
+         await window.loadURL('http://localhost:9080');
+      }
+      else {
+         const indexPath = path.resolve(__dirname, 'index.html');
+         await window.loadFile(indexPath);
+      }
+   }
+   catch (err) {
+      console.log(err);
+   }
+
+   window.on('closed', () => {
+      window.removeListener('moved', saveWindowState);
+      mainWindow = null;
+   });
+
+   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
+      if (isMacOS) app.quit();
+   });
+
+   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 = await createMainWindow();
+   });
+
+   // create main BrowserWindow when electron is ready
+   app.on('ready', async () => {
+      mainWindowState = windowStateKeeper({
+         defaultWidth: 1024,
+         defaultHeight: 800
+      });
+
+      mainWindow = await createMainWindow();
+      createAppMenu();
+
+      // if (isDevelopment)
+      //    mainWindow.webContents.openDevTools();
+
+      process.on('uncaughtException', error => {
+         mainWindow.webContents.send('unhandled-exception', error);
+      });
+
+      process.on('unhandledRejection', error => {
+         mainWindow.webContents.send('unhandled-exception', error);
+      });
+   });
+}
+
+function createAppMenu () {
+   let menu = null;
+
+   if (isMacOS) {
+      menu = Menu.buildFromTemplate([
+         {
+            label: app.name,
+            submenu: [
+               { role: 'about' },
+               { type: 'separator' },
+               {
+                  label: 'Check for Updates...',
+                  click: (_menuItem, win) => win.webContents.send('open-updates-preferences')
+               },
+               {
+                  label: 'Preferences',
+                  click: (_menuItem, win) => win.webContents.send('toggle-preferences'),
+                  accelerator: 'CmdOrCtrl+,'
+               },
+               { type: 'separator' },
+               { role: 'hide' },
+               { role: 'hideOthers' },
+               { type: 'separator' },
+               { role: 'quit' }
+            ]
+         },
+         {
+            role: 'editMenu'
+         },
+         {
+            role: 'viewMenu'
+         },
+         {
+            role: 'windowMenu'
+         }
+      ]);
+   }
+
+   Menu.setApplicationMenu(menu);
+}
+
+function saveWindowState () {
+   mainWindowState.saveState(mainWindow);
+}

src/renderer/App.vue

@@ -4,21 +4,20 @@
       <div id="window-content">
          <TheSettingBar />
          <div id="main-content" class="container">
-            <TheAppWelcome v-if="!connections.length" @new-conn="showNewConnModal" />
-            <div v-else class="columns col-gapless">
+            <div class="columns col-gapless">
                <Workspace
                   v-for="connection in connections"
                   :key="connection.uid"
                   :connection="connection"
                />
+               <WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
             </div>
+            <TheFooter />
+            <TheNotificationsBoard />
+            <TheScratchpad v-if="isScratchpad" />
+            <ModalSettings v-if="isSettingModal" />
+            <BaseTextEditor class="d-none" value="" />
          </div>
-         <TheFooter />
-         <TheNotificationsBoard />
-         <ModalNewConnection v-if="isNewConnModal" />
-         <TheScratchpad v-if="isScratchpad" />
-         <ModalSettings v-if="isSettingModal" />
-         <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
       </div>
    </div>
 </template>
@@ -35,21 +34,19 @@ export default {
       TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
       TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
       TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
-      TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
       Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
-      ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
+      WorkspaceAddConnectionPanel: () => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel'),
       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 {};
    },
    computed: {
       ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
          isLoading: 'application/isLoading',
-         isNewConnModal: 'application/isNewModal',
-         isEditModal: 'application/isEditModal',
          isSettingModal: 'application/isSettingModal',
          isScratchpad: 'application/isScratchpad',
          connections: 'connections/getConnections',

src/renderer/components/BaseContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="context">
+   <div class="context" :class="{'bottom': isBottom}">
       <a
          class="context-overlay"
          @click="close"
@@ -23,21 +23,29 @@ export default {
    },
    data () {
       return {
-         contextSize: null
+         contextSize: null,
+         isBottom: false
       };
    },
    computed: {
       position () {
-         const { clientY, clientX } = this.contextEvent;
-         let topCord = `${clientY + 5}px`;
-         let leftCord = `${clientX + 5}px`;
+         let topCord = 0;
+         let leftCord = 0;
 
-         if (this.contextSize) {
-            if (clientY + this.contextSize.height + 5 >= window.innerHeight)
-               topCord = `${clientY - this.contextSize.height}px`;
+         if (this.contextEvent) {
+            const { clientY, clientX } = this.contextEvent;
+            topCord = `${clientY + 2}px`;
+            leftCord = `${clientX + 5}px`;
 
-            if (clientX + this.contextSize.width + 5 >= window.innerWidth)
-               leftCord = `${clientX - this.contextSize.width}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 {
@@ -50,7 +58,8 @@ export default {
       window.addEventListener('keydown', this.onKey);
    },
    mounted () {
-      this.contextSize = this.$refs.contextContent.getBoundingClientRect();
+      if (this.$refs.contextContent)
+         this.contextSize = this.$refs.contextContent.getBoundingClientRect();
    },
    beforeDestroy () {
       window.removeEventListener('keydown', this.onKey);
@@ -83,12 +92,21 @@ export default {
   left: 0;
   bottom: 0;
 
+  &:not(.bottom) .context-submenu {
+    top: -0.2rem;
+  }
+
+  &.bottom .context-submenu {
+    bottom: -0.2rem;
+  }
+
   .context-container {
     min-width: 100px;
     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;
@@ -97,19 +115,24 @@ export default {
     .context-element {
       display: flex;
       align-items: center;
+      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%;
-        top: 0;
         min-width: 100px;
+        background: #1d1d1d;
       }
 
       &:hover {

src/renderer/components/BaseMap.vue

@@ -0,0 +1,108 @@
+<template>
+   <div id="map" class="map" />
+</template>
+<script>
+import L from 'leaflet';
+import {
+   point,
+   lineString,
+   polygon
+} from '@turf/helpers';
+import { getArrayDepth } from 'common/libs/getArrayDepth';
+
+export default {
+   name: 'BaseMap',
+   props: {
+      points: [Object, Array],
+      isMultiSpatial: Boolean
+   },
+   data () {
+      return {
+         map: null,
+         markers: [],
+         center: null
+      };
+   },
+   mounted () {
+      if (this.isMultiSpatial) {
+         for (const element of this.points)
+            this.markers.push(this.getMarkers(element));
+      }
+      else {
+         this.markers = this.getMarkers(this.points);
+
+         if (!Array.isArray(this.points))
+            this.center = [this.points.y, this.points.x];
+      }
+
+      this.map = L.map('map', {
+         center: this.center || [0, 0],
+         zoom: 15,
+         minZoom: 1,
+         attributionControl: false
+      });
+
+      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
+
+      const geoJsonObj = L.geoJSON(this.markers, {
+         style: function () {
+            return {
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            };
+         },
+         pointToLayer: function (feature, latlng) {
+            return L.circleMarker(latlng, {
+               radius: 7,
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            });
+         }
+      }).addTo(this.map);
+
+      const southWest = L.latLng(-90, -180);
+      const northEast = L.latLng(90, 180);
+      const bounds = L.latLngBounds(southWest, northEast);
+      this.map.setMaxBounds(bounds);
+
+      if (!this.center) this.map.fitBounds(geoJsonObj.getBounds());
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+         attribution: '&copy; <b>OpenStreetMap</b>'
+      }).addTo(this.map);
+   },
+   methods: {
+      getMarkers (points) {
+         if (Array.isArray(points)) {
+            if (getArrayDepth(points) === 1)
+               return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+            else
+               return polygon(points.map(arr => arr.reduce((acc, curr) => [...acc, [curr.x, curr.y]], [])));
+         }
+         else
+            return point([points.x, points.y]);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+.map{
+   height: 400px;
+}
+
+.marker-icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $primary-color;
+    border-radius: 50%;
+    box-shadow: 0 0 5px 1px darken($body-font-color-dark, 40%);
+}
+</style>

src/renderer/components/BaseTextEditor.vue

@@ -34,6 +34,7 @@ export default {
    computed: {
       ...mapGetters({
          editorTheme: 'settings/getEditorTheme',
+         editorFontSize: 'settings/getEditorFontSize',
          autoComplete: 'settings/getAutoComplete',
          lineWrap: 'settings/getLineWrap'
       })
@@ -47,6 +48,19 @@ export default {
          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({

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="mdi mdi-24px mdi-check mr-1"></i>';
+               iconName = 'mdi-check';
                break;
             case 'error':
                className = 'toast-error';
-               iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
+               iconName = 'mdi-alert-rhombus';
                break;
             case 'warning':
                className = 'toast-warning';
-               iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
+               iconName = 'mdi-alert';
                break;
             case 'primary':
                className = 'toast-primary';
-               iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
+               iconName = 'mdi-information-outline';
                break;
          }
 
-         return { className, iconTag };
+         return { className, iconName };
       }
    },
    watch: {

src/renderer/components/BaseUploadInput.vue

@@ -63,7 +63,7 @@ export default {
 
 <style lang="scss" scoped>
 .file-uploader {
-  border-radius: 0.1rem;
+  border-radius: $border-radius;
   height: 1.8rem;
   line-height: 1.2rem;
   display: flex;
@@ -78,6 +78,7 @@ export default {
 
   .file-uploader-message {
     display: flex;
+    border-radius: $border-radius 0 0 $border-radius;
   }
 
   .file-uploader-input {

src/renderer/components/FakerSelect.vue

@@ -89,7 +89,7 @@
          :type="inputProps().type"
          :disabled="!isChecked"
       >
-      <template v-if="methodData && 'params' in methodData" class="columns">
+      <template v-if="methodData && 'params' in methodData">
          <input
             v-for="(option, key) in methodData.params"
             :key="key"

src/renderer/components/ForeignKeySelect.vue

@@ -7,7 +7,7 @@
       @blur="$emit('blur')"
    >
       <option v-if="!isValidDefault" :value="value">
-         {{ value }} - {{ $t('message.invalidDefault') }}
+         {{ value === null ? 'NULL' : value }}
       </option>
       <option
          v-for="row in foreignList"
@@ -51,7 +51,8 @@ export default {
       }),
       isValidDefault () {
          if (!this.foreignList.length) return true;
-         return this.value === null || this.foreignList.some(foreign => foreign.foreign_column.toString() === this.value.toString());
+         if (this.value === null) return false;
+         return this.foreignList.some(foreign => foreign.foreign_column.toString() === this.value.toString());
       }
    },
    async created () {
@@ -65,7 +66,7 @@ export default {
       try { // Field data
          const { status, response } = await Tables.getTableColumns(params);
          if (status === 'success') {
-            const textField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type));
+            const textField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type) && field.name !== this.keyUsage.refField);
             foreignDesc = textField ? textField.name : false;
          }
          else

src/renderer/components/ModalAskCredentials.vue

@@ -41,7 +41,7 @@
                </form>
             </div>
          </div>
-         <div class="modal-footer text-light">
+         <div class="modal-footer">
             <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
                {{ $t('word.send') }}
             </button>

src/renderer/components/ModalAskParameters.vue

@@ -6,23 +6,24 @@
       @confirm="runRoutine"
       @hide="closeModal"
    >
-      <template slot="header">
+      <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-play mr-1" /> {{ $t('word.parameters') }}: {{ localRoutine.name }}
+            <i class="mdi mdi-24px mdi-play mr-1" />
+            <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
-      <div slot="body">
+      <template #body>
          <div class="content">
             <form class="form-horizontal">
                <div
                   v-for="(parameter, i) in inParameters"
-                  :key="parameter._id"
+                  :key="parameter._antares_id"
                   class="form-group"
                >
-                  <div class="col-3">
+                  <div class="col-4">
                      <label class="form-label">{{ parameter.name }}</label>
                   </div>
-                  <div class="col-9">
+                  <div class="col-8">
                      <div class="input-group">
                         <input
                            :ref="i === 0 ? 'firstInput' : ''"
@@ -30,7 +31,11 @@
                            class="form-input"
                            type="text"
                         >
-                        <span class="input-group-addon field-type" :class="typeClass(parameter.type)">
+                        <span
+                           :title="`${parameter.type} ${parameter.length}`"
+                           class="input-group-addon field-type cut-text"
+                           :class="typeClass(parameter.type)"
+                        >
                            {{ parameter.type }} {{ parameter.length | wrapNumber }}
                         </span>
                      </div>
@@ -38,7 +43,7 @@
                </div>
             </form>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
@@ -126,4 +131,8 @@ export default {
   .field-type {
     font-size: 0.6rem;
   }
+
+  .input-group-addon {
+    max-width: 100px;
+  }
 </style>

src/renderer/components/ModalDiscardChanges.vue

@@ -2,24 +2,23 @@
    <ConfirmModal
       :confirm-text="$t('word.discard')"
       :cancel-text="$t('word.stay')"
-      @confirm="discardUnsavedChanges"
-      @hide="closeUnsavedChangesModal"
+      @confirm="$emit('confirm')"
+      @hide="$emit('close')"
    >
-      <template slot="header">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
          </div>
       </template>
-      <div slot="body">
+      <template #body>
          <div>
             {{ $t('message.discardUnsavedChanges') }}
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import ConfirmModal from '@/components/BaseConfirmModal';
 
 export default {
@@ -34,13 +33,6 @@ export default {
       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')

src/renderer/components/ModalEditConnection.vue

@@ -1,391 +0,0 @@
-<template>
-   <div class="modal active">
-      <a class="modal-overlay c-hand" @click="closeModal" />
-      <div class="modal-container">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <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 p-0">
-            <div class="panel">
-               <div class="panel-nav">
-                  <ul class="tab tab-block">
-                     <li
-                        class="tab-item"
-                        :class="{'active': selectedTab === 'general'}"
-                        @click="selectTab('general')"
-                     >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
-                     </li>
-                     <li
-                        class="tab-item"
-                        :class="{'active': selectedTab === 'ssl'}"
-                        @click="selectTab('ssl')"
-                     >
-                        <a class="c-hand">{{ $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>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    ref="firstInput"
-                                    v-model="localConnection.name"
-                                    class="form-input"
-                                    type="text"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.client') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <select v-model="localConnection.client" class="form-select">
-                                    <option value="mysql">
-                                       MySQL
-                                    </option>
-                                    <option value="maria">
-                                       MariaDB
-                                    </option>
-                                    <option value="pg">
-                                       PostgreSQL
-                                    </option>
-                                    <!-- <option value="mssql">
-                                       Microsoft SQL
-                                    </option>
-                                    <option value="oracledb">
-                                       Oracle DB
-                                    </option> -->
-                                 </select>
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.hostName') }}/IP</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="localConnection.host"
-                                    class="form-input"
-                                    type="text"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.port') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="localConnection.port"
-                                    class="form-input"
-                                    type="number"
-                                    min="1"
-                                    max="65535"
-                                 >
-                              </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>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="localConnection.user"
-                                    class="form-input"
-                                    type="text"
-                                    :disabled="localConnection.ask"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.password') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="localConnection.password"
-                                    class="form-input"
-                                    type="password"
-                                    :disabled="localConnection.ask"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12" />
-                              <div class="col-8 col-sm-12">
-                                 <label class="form-checkbox form-inline">
-                                    <input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
-                                 </label>
-                              </div>
-                           </div>
-                        </fieldset>
-                     </form>
-                  </div>
-                  <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}"
-                     @click="startTest"
-                  >
-                     {{ $t('message.testConnection') }}
-                  </button>
-                  <button class="btn btn-primary mr-2" @click="saveEditConnection">
-                     {{ $t('word.save') }}
-                  </button>
-                  <button class="btn btn-link" @click="closeModal">
-                     {{ $t('word.close') }}
-                  </button>
-               </div>
-            </div>
-            <ModalAskCredentials
-               v-if="isAsking"
-               @close-asking="closeAsking"
-               @credentials="continueTest"
-            />
-         </div>
-      </div>
-   </div>
-</template>
-
-<script>
-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,
-      BaseUploadInput
-   },
-   props: {
-      connection: Object
-   },
-   data () {
-      return {
-         toast: {
-            status: '',
-            message: ''
-         },
-         isTesting: false,
-         isAsking: false,
-         localConnection: null,
-         selectedTab: 'general'
-      };
-   },
-   computed: {
-      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({
-         editConnection: 'connections/editConnection'
-      }),
-      async startTest () {
-         this.isTesting = true;
-         this.toast = {
-            status: '',
-            message: ''
-         };
-
-         if (this.localConnection.ask)
-            this.isAsking = true;
-         else {
-            try {
-               const res = await Connection.makeTest(this.localConnection);
-               if (res.status === 'error')
-                  this.toast = { status: 'error', message: res.response.message };
-               else
-                  this.toast = { status: 'success', message: this.$t('message.connectionSuccessfullyMade') };
-            }
-            catch (err) {
-               this.toast = { status: 'error', message: err.stack };
-            }
-
-            this.isTesting = false;
-         }
-      },
-      async continueTest (credentials) { // if "Ask for credentials" is true
-         this.isAsking = false;
-         const params = Object.assign({}, this.localConnection, credentials);
-         try {
-            const res = await Connection.makeTest(params);
-            if (res.status === 'error')
-               this.toast = { status: 'error', message: res.response.message };
-            else
-               this.toast = { status: 'success', message: this.$t('message.connectionSuccessfullyMade') };
-         }
-         catch (err) {
-            this.toast = { status: 'error', message: err.stack };
-         }
-
-         this.isTesting = false;
-      },
-      saveEditConnection () {
-         this.editConnection(this.localConnection);
-         this.closeModal();
-      },
-      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] = '';
-      }
-   }
-};
-</script>
-
-<style scoped>
-  .modal-container {
-    position: absolute;
-    max-width: 450px;
-    top: 17.5vh;
-  }
-</style>

src/renderer/components/ModalEditSchema.vue

@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-edit mr-1" /> {{ $t('message.editSchema') }}
+                  <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" />
@@ -52,7 +53,7 @@
                </form>
             </div>
          </div>
-         <div class="modal-footer text-light">
+         <div class="modal-footer">
             <button class="btn btn-primary mr-2" @click.stop="updateSchema">
                {{ $t('word.update') }}
             </button>
@@ -71,7 +72,7 @@ import Schema from '@/ipc-api/Schema';
 export default {
    name: 'ModalEditSchema',
    props: {
-      selectedDatabase: String
+      selectedSchema: String
    },
    data () {
       return {
@@ -98,7 +99,7 @@ export default {
    async created () {
       let actualCollation;
       try {
-         const { status, response } = await Schema.getDatabaseCollation({ uid: this.selectedWorkspace, database: this.selectedDatabase });
+         const { status, response } = await Schema.getDatabaseCollation({ uid: this.selectedWorkspace, database: this.selectedSchema });
 
          if (status === 'success')
             actualCollation = response;
@@ -111,8 +112,8 @@ export default {
       }
 
       this.database = {
-         name: this.selectedDatabase,
-         prevName: this.selectedDatabase,
+         name: this.selectedSchema,
+         prevName: this.selectedSchema,
          collation: actualCollation || this.defaultCollation,
          prevCollation: actualCollation || this.defaultCollation
       };

src/renderer/components/ModalFakerRows.vue

@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.tableFiller') }}
+                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
+                  <span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -40,7 +41,7 @@
                               <label class="form-checkbox ml-3" :title="$t('word.insert')">
                                  <input
                                     type="checkbox"
-                                    :checked="!field.autoIncrement"
+                                    :checked="!fieldsToExclude.includes(field.name)"
                                     @change.prevent="toggleFields($event, field)"
                                  ><i class="form-icon" />
                               </label>
@@ -51,7 +52,7 @@
                </form>
             </div>
          </div>
-         <div class="modal-footer text-light columns">
+         <div class="modal-footer 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
@@ -250,33 +251,37 @@ export default {
          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 || Number.isNaN(+field.default.replaceAll('\'', '')) ? null : +field.default.replaceAll('\'', '');
+            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;
-
-            if (BIT.includes(field.type))
+            else if (BIT.includes(field.type))
                fieldDefault = field.default.replaceAll('\'', '').replaceAll('b', '');
-
-            if (DATETIME.includes(field.type)) {
-               if (field.default && field.default.toLowerCase().includes('current_timestamp')) {
+            else if (DATETIME.includes(field.type)) {
+               if (field.default && ['current_timestamp', 'now()'].some(term => field.default.toLowerCase().includes(term))) {
                   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;
             }
-
-            if (field.enumValues)
+            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
+         if (field.autoIncrement || !!field.onUpdate)// Disable by default auto increment or "on update" fields
             this.fieldsToExclude = [...this.fieldsToExclude, field.name];
       }
 

src/renderer/components/ModalHistory.vue

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

src/renderer/components/ModalNewConnection.vue

@@ -1,413 +0,0 @@
-<template>
-   <div class="modal active">
-      <a class="modal-overlay c-hand" @click="closeModal" />
-      <div class="modal-container">
-         <div class="modal-header pl-2">
-            <div class="modal-title h6">
-               <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-server-plus mr-1" /> {{ $t('message.createNewConnection') }}
-               </div>
-            </div>
-            <a class="btn btn-clear c-hand" @click="closeModal" />
-         </div>
-         <div class="modal-body p-0">
-            <div class="panel">
-               <div class="panel-nav">
-                  <ul class="tab tab-block">
-                     <li
-                        class="tab-item"
-                        :class="{'active': selectedTab === 'general'}"
-                        @click="selectTab('general')"
-                     >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
-                     </li>
-                     <li
-                        class="tab-item"
-                        :class="{'active': selectedTab === 'ssl'}"
-                        @click="selectTab('ssl')"
-                     >
-                        <a class="c-hand">{{ $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>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    ref="firstInput"
-                                    v-model="connection.name"
-                                    class="form-input"
-                                    type="text"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.client') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <select
-                                    v-model="connection.client"
-                                    class="form-select"
-                                    @change="setDefaults"
-                                 >
-                                    <option value="mysql">
-                                       MySQL
-                                    </option>
-                                    <option value="maria">
-                                       MariaDB
-                                    </option>
-                                    <option value="pg">
-                                       PostgreSQL
-                                    </option>
-                                 <!-- <option value="mssql">
-                                    Microsoft SQL
-                                 </option>
-                                 <option value="oracledb">
-                                    Oracle DB
-                                 </option> -->
-                                 </select>
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.hostName') }}/IP</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="connection.host"
-                                    class="form-input"
-                                    type="text"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.port') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="connection.port"
-                                    class="form-input"
-                                    type="number"
-                                    min="1"
-                                    max="65535"
-                                 >
-                              </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>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="connection.user"
-                                    class="form-input"
-                                    type="text"
-                                    :disabled="connection.ask"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12">
-                                 <label class="form-label">{{ $t('word.password') }}</label>
-                              </div>
-                              <div class="col-8 col-sm-12">
-                                 <input
-                                    v-model="connection.password"
-                                    class="form-input"
-                                    type="password"
-                                    :disabled="connection.ask"
-                                 >
-                              </div>
-                           </div>
-                           <div class="form-group">
-                              <div class="col-4 col-sm-12" />
-                              <div class="col-8 col-sm-12">
-                                 <label class="form-checkbox form-inline">
-                                    <input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
-                                 </label>
-                              </div>
-                           </div>
-                        </fieldset>
-                     </form>
-                  </div>
-                  <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}"
-               @click="startTest"
-            >
-               {{ $t('message.testConnection') }}
-            </button>
-            <button class="btn btn-primary mr-2" @click="saveNewConnection">
-               {{ $t('word.save') }}
-            </button>
-            <button class="btn btn-link" @click="closeModal">
-               {{ $t('word.close') }}
-            </button>
-         </div>
-      </div>
-      <ModalAskCredentials
-         v-if="isAsking"
-         @close-asking="closeAsking"
-         @credentials="continueTest"
-      />
-   </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex';
-import customizations from 'common/customizations';
-import Connection from '@/ipc-api/Connection';
-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,
-      BaseUploadInput
-   },
-   data () {
-      return {
-         connection: {
-            name: '',
-            client: 'mysql',
-            host: '127.0.0.1',
-            database: null,
-            port: null,
-            user: null,
-            password: '',
-            ask: false,
-            uid: uidGen('C'),
-            ssl: false,
-            cert: '',
-            key: '',
-            ca: '',
-            ciphers: ''
-
-         },
-         toast: {
-            status: '',
-            message: ''
-         },
-         isTesting: 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 () {
-         this.connection.user = this.customizations.defaultUser;
-         this.connection.port = this.customizations.defaultPort;
-         this.connection.database = this.customizations.defaultDatabase;
-      },
-      async startTest () {
-         this.isTesting = true;
-         this.toast = {
-            status: '',
-            message: ''
-         };
-
-         if (this.connection.ask)
-            this.isAsking = true;
-         else {
-            try {
-               const res = await Connection.makeTest(this.connection);
-               if (res.status === 'error')
-                  this.toast = { status: 'error', message: res.response.message };
-               else
-                  this.toast = { status: 'success', message: this.$t('message.connectionSuccessfullyMade') };
-            }
-            catch (err) {
-               this.toast = { status: 'error', message: err.stack };
-            }
-
-            this.isTesting = false;
-         }
-      },
-      async continueTest (credentials) { // if "Ask for credentials" is true
-         this.isAsking = false;
-         const params = Object.assign({}, this.connection, credentials);
-
-         try {
-            const res = await Connection.makeTest(params);
-            if (res.status === 'error')
-               this.toast = { status: 'error', message: res.response.message };
-            else
-               this.toast = { status: 'success', message: this.$t('message.connectionSuccessfullyMade') };
-         }
-         catch (err) {
-            this.toast = { status: 'error', message: err.stack };
-         }
-
-         this.isTesting = false;
-      },
-      saveNewConnection () {
-         this.addConnection(this.connection);
-         this.closeModal();
-      },
-      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] = '';
-      }
-   }
-};
-</script>
-
-<style scoped>
-  .modal-container {
-    position: absolute;
-    max-width: 450px;
-    top: 17.5vh;
-  }
-</style>

src/renderer/components/ModalNewFunction.vue

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

src/renderer/components/ModalNewRoutine.vue

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

src/renderer/components/ModalNewScheduler.vue

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

src/renderer/components/ModalNewSchema.vue

@@ -5,14 +5,15 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-database-plus mr-1" /> {{ $t('message.createNewSchema') }}
+                  <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">
+               <form class="form-horizontal" @submit.prevent="createSchema">
                   <div class="form-group">
                      <div class="col-3">
                         <label class="form-label">{{ $t('word.name') }}</label>
@@ -48,7 +49,7 @@
                </form>
             </div>
          </div>
-         <div class="modal-footer text-light">
+         <div class="modal-footer">
             <button
                class="btn btn-primary mr-2"
                :class="{'loading': isLoading}"

src/renderer/components/ModalNewTable.vue

@@ -1,130 +0,0 @@
-<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

@@ -5,7 +5,8 @@
          <div class="modal-header pl-2">
             <div class="modal-title h6">
                <div class="d-flex">
-                  <i class="mdi mdi-24px mdi-playlist-plus mr-1" /> {{ $t('message.addNewRow') }}
+                  <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" />
@@ -85,7 +86,7 @@
                </form>
             </div>
          </div>
-         <div class="modal-footer text-light">
+         <div class="modal-footer">
             <div class="input-group col-3 tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
                <input
                   v-model="nInserts"

src/renderer/components/ModalNewTrigger.vue

@@ -1,140 +0,0 @@
-<template>
-   <ConfirmModal
-      :confirm-text="$t('word.confirm')"
-      size="400"
-      @confirm="confirmNewTrigger"
-      @hide="$emit('close')"
-   >
-      <template :slot="'header'">
-         <div class="d-flex">
-            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewTrigger') }}
-         </div>
-      </template>
-      <div :slot="'body'">
-         <form class="form-horizontal">
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.name') }}
-               </label>
-               <div class="column">
-                  <input
-                     ref="firstInput"
-                     v-model="localTrigger.name"
-                     class="form-input"
-                     type="text"
-                  >
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.definer') }}
-               </label>
-               <div class="column">
-                  <select
-                     v-if="workspace.users.length"
-                     v-model="localTrigger.definer"
-                     class="form-select"
-                  >
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                     <option
-                        v-for="user in workspace.users"
-                        :key="`${user.name}@${user.host}`"
-                        :value="`\`${user.name}\`@\`${user.host}\``"
-                     >
-                        {{ user.name }}@{{ user.host }}
-                     </option>
-                  </select>
-                  <select v-if="!workspace.users.length" class="form-select">
-                     <option value="">
-                        {{ $t('message.currentUser') }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.table') }}
-               </label>
-               <div class="column">
-                  <select v-model="localTrigger.table" class="form-select">
-                     <option v-for="table in schemaTables" :key="table.name">
-                        {{ table.name }}
-                     </option>
-                  </select>
-               </div>
-            </div>
-            <div class="form-group">
-               <label class="form-label col-4">
-                  {{ $t('word.event') }}
-               </label>
-               <div class="column">
-                  <div class="input-group">
-                     <select v-model="localTrigger.event1" class="form-select">
-                        <option>BEFORE</option>
-                        <option>AFTER</option>
-                     </select>
-                     <select v-model="localTrigger.event2" class="form-select">
-                        <option>INSERT</option>
-                        <option>UPDATE</option>
-                        <option>DELETE</option>
-                     </select>
-                  </div>
-               </div>
-            </div>
-         </form>
-      </div>
-   </ConfirmModal>
-</template>
-
-<script>
-import ConfirmModal from '@/components/BaseConfirmModal';
-
-export default {
-   name: 'ModalNewTrigger',
-   components: {
-      ConfirmModal
-   },
-   props: {
-      workspace: Object
-   },
-   data () {
-      return {
-         localTrigger: {
-            definer: '',
-            sql: 'BEGIN\r\n\r\nEND',
-            name: '',
-            table: '',
-            event1: 'BEFORE',
-            event2: 'INSERT'
-         },
-         isOptionsChanging: false
-      };
-   },
-   computed: {
-      schema () {
-         return this.workspace.breadcrumbs.schema;
-      },
-      schemaTables () {
-         const schemaTables = this.workspace.structure
-            .filter(schema => schema.name === this.schema)
-            .map(schema => schema.tables);
-
-         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
-      }
-   },
-   mounted () {
-      this.localTrigger.table = this.schemaTables.length ? this.schemaTables[0].name : '';
-
-      setTimeout(() => {
-         this.$refs.firstInput.focus();
-      }, 20);
-   },
-   methods: {
-      confirmNewTrigger () {
-         this.$emit('open-create-trigger-editor', this.localTrigger);
-      }
-   }
-};
-</script>

src/renderer/components/ModalNewView.vue

@@ -1,192 +0,0 @@
-<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

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

src/renderer/components/ModalProcessesListContext.vue

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

src/renderer/components/ModalProcessesListRow.vue

@@ -1,21 +1,18 @@
 <template>
-   <div class="tr" @click="selectRow($event, row._id)">
+   <div class="tr" @click="selectRow()">
       <div
          v-for="(col, cKey) in row"
-         v-show="cKey !== '_id'"
          :key="cKey"
          class="td p-0"
          tabindex="0"
-         @contextmenu.prevent="openContext($event, { id: row._id, field: cKey })"
+         @contextmenu.prevent="openContext($event, { id: row.id, field: cKey })"
       >
-         <template v-if="cKey !== '_id'">
-            <span
-               v-if="!isInlineEditor[cKey]"
-               class="cell-content px-2"
-               :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
-               @dblclick="dblClick(cKey)"
-            >{{ col | cutText }}</span>
-         </template>
+         <span
+            v-if="!isInlineEditor[cKey]"
+            class="cell-content"
+            :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
+            @dblclick="dblClick(cKey)"
+         >{{ col | cutText }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
@@ -25,12 +22,12 @@
          :hide-footer="true"
          @hide="hideInfoModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ $t('message.processInfo') }}
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div>
                <div>
                   <TextEditor
@@ -41,7 +38,7 @@
                   />
                </div>
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </div>
 </template>
@@ -51,7 +48,7 @@ import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
 
 export default {
-   name: 'ProcessesListRow',
+   name: 'ModalProcessesListRow',
    components: {
       ConfirmModal,
       TextEditor
@@ -73,25 +70,15 @@ export default {
       };
    },
    computed: {},
-   watch: {
-      fields () {
-         Object.keys(this.fields).forEach(field => {
-            this.isInlineEditor[field.name] = false;
-         });
-      }
-   },
    methods: {
       isNull (value) {
          return value === null ? ' is-null' : '';
       },
-      selectRow (event, row) {
-         this.$emit('select-row', event, row);
+      selectRow () {
+         this.$emit('select-row');
       },
       openContext (event, payload) {
-         if (this.isEditable) {
-            payload.field = this.fields[payload.field].name;// Ensures field name only
-            this.$emit('contextmenu', event, payload);
-         }
+         this.$emit('contextmenu', event, payload);
       },
       hideInfoModal () {
          this.isInfoModal = false;
@@ -126,6 +113,7 @@ export default {
 
 .cell-content {
   display: block;
+  padding: 0 0.2rem;
   min-height: 0.8rem;
   text-overflow: ellipsis;
   white-space: nowrap;

src/renderer/components/ModalSettings.vue

@@ -6,7 +6,7 @@
             <div class="modal-title h6">
                <div class="d-flex">
                   <i class="mdi mdi-24px mdi-cog mr-1" />
-                  {{ $t('word.settings') }}
+                  <span class="cut-text">{{ $t('word.settings') }}</span>
                </div>
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
@@ -16,40 +16,40 @@
                <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
                         v-if="updateStatus !== 'disabled'"
-                        class="tab-item"
+                        class="tab-item c-hand"
                         :class="{'active': selectedTab === 'update'}"
                         @click="selectTab('update')"
                      >
-                        <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $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="c-hand">{{ $t('word.changelog') }}</a>
+                        <a class="tab-link">{{ $t('word.changelog') }}</a>
                      </li>
                      <li
-                        class="tab-item"
+                        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>
@@ -59,15 +59,15 @@
                         <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">
+                        <div class="column col-9 col-sm-12 mb-2">
+                           <div class="form-group">
+                              <div class="col-7 col-sm-12">
                                  <label class="form-label">
                                     <i class="mdi mdi-18px mdi-translate mr-1" />
                                     {{ $t('word.language') }}
                                  </label>
                               </div>
-                              <div class="col-6 col-sm-12">
+                              <div class="col-5 col-sm-12">
                                  <select
                                     v-model="localLocale"
                                     class="form-select"
@@ -84,12 +84,46 @@
                               </div>
                            </div>
                            <div class="form-group">
-                              <div class="col-6 col-sm-12">
+                              <div class="col-7 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.dataTabPageSize') }}
+                                 </label>
+                              </div>
+                              <div class="col-5 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 mb-0">
+                              <div class="col-7 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.restorePreviourSession') }}
+                                 </label>
+                              </div>
+                              <div class="col-5 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
+                                    <input type="checkbox" :checked="restoreTabs">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
+                           <div class="form-group">
+                              <div class="col-7 col-sm-12">
                                  <label class="form-label">
                                     {{ $t('message.notificationsTimeout') }}
                                  </label>
                               </div>
-                              <div class="col-6 col-sm-12">
+                              <div class="col-5 col-sm-12">
                                  <div class="input-group">
                                     <input
                                        v-model="localTimeout"
@@ -107,29 +141,27 @@
                         <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">
+                        <div class="column col-9 col-sm-12">
+                           <div class="form-group mb-0">
+                              <div class="col-7 col-sm-12">
                                  <label class="form-label">
                                     {{ $t('word.autoCompletion') }}
                                  </label>
                               </div>
-                              <div class="col-6 col-sm-12">
+                              <div class="col-5 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">
+                           <div class="form-group mb-0">
+                              <div class="col-7 col-sm-12">
                                  <label class="form-label">
                                     {{ $t('message.wrapLongLines') }}
                                  </label>
                               </div>
-                              <div class="col-6 col-sm-12">
+                              <div class="col-5 col-sm-12">
                                  <label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
                                     <input type="checkbox" :checked="selectedLineWrap">
                                     <i class="form-icon" />
@@ -152,7 +184,7 @@
                            :class="{'selected': applicationTheme === 'dark'}"
                            @click="changeApplicationTheme('dark')"
                         >
-                           <img :src="require('@/images/dark.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <img src="../images/dark.png" 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">
@@ -165,7 +197,7 @@
                            :class="{'selected': applicationTheme === 'light'}"
                            @click="changeApplicationTheme('light')"
                         >
-                           <img :src="require('@/images/light.png').default" class="img-responsive img-fit-cover s-rounded">
+                           <img src="../images/light.png" 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">
@@ -201,6 +233,31 @@
                               </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"
@@ -223,11 +280,11 @@
 
                <div v-show="selectedTab === 'about'" class="panel-body py-4">
                   <div class="text-center">
-                     <img :src="require('@/images/logo.svg').default" width="128">
+                     <img src="../images/logo.svg" width="128">
                      <h4>{{ appName }}</h4>
                      <p>
                         {{ $t('word.version') }} {{ appVersion }}<br>
-                        <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a> | <a class="c-hand" @click="openOutside('https://antares-sql.app/')">Website</a><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>
@@ -257,9 +314,11 @@ export default {
    data () {
       return {
          localLocale: null,
+         localPageSize: null,
          localTimeout: null,
          localEditorTheme: null,
          selectedTab: 'general',
+         pageSizes: [30, 40, 100, 250, 500, 1000],
          editorThemes: [
             {
                group: this.$t('word.light'),
@@ -317,11 +376,14 @@ export default {
          appVersion: 'application/appVersion',
          selectedSettingTab: 'application/selectedSettingTab',
          selectedLocale: 'settings/getLocale',
+         pageSize: 'settings/getDataTabLimit',
          selectedAutoComplete: 'settings/getAutoComplete',
          selectedLineWrap: 'settings/getLineWrap',
          notificationsTimeout: 'settings/getNotificationsTimeout',
+         restoreTabs: 'settings/getRestoreTabs',
          applicationTheme: 'settings/getApplicationTheme',
          editorTheme: 'settings/getEditorTheme',
+         editorFontSize: 'settings/getEditorFontSize',
          updateStatus: 'application/getUpdateStatus',
          selectedWorkspace: 'workspaces/getSelected',
          getWorkspace: 'workspaces/getWorkspace'
@@ -334,7 +396,7 @@ export default {
          return locales;
       },
       hasUpdates () {
-         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
+         return ['available', 'downloading', 'downloaded', 'link'].includes(this.updateStatus);
       },
       workspace () {
          return this.getWorkspace(this.selectedWorkspace);
@@ -359,6 +421,7 @@ ORDER BY
    },
    created () {
       this.localLocale = this.selectedLocale;
+      this.localPageSize = this.pageSize;
       this.localTimeout = this.notificationsTimeout;
       this.localEditorTheme = this.editorTheme;
       this.selectedTab = this.selectedSettingTab;
@@ -371,10 +434,13 @@ ORDER BY
       ...mapActions({
          closeModal: 'application/hideSettingModal',
          changeLocale: 'settings/changeLocale',
+         changePageSize: 'settings/changePageSize',
+         changeRestoreTabs: 'settings/changeRestoreTabs',
          changeAutoComplete: 'settings/changeAutoComplete',
          changeLineWrap: 'settings/changeLineWrap',
          changeApplicationTheme: 'settings/changeApplicationTheme',
          changeEditorTheme: 'settings/changeEditorTheme',
+         changeEditorFontSize: 'settings/changeEditorFontSize',
          updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
       }),
       selectTab (tab) {
@@ -394,6 +460,9 @@ ORDER BY
          if (e.key === 'Escape')
             this.closeModal();
       },
+      toggleRestoreSession () {
+         this.changeRestoreTabs(!this.restoreTabs);
+      },
       toggleAutoComplete () {
          this.changeAutoComplete(!this.selectedAutoComplete);
       },

src/renderer/components/ModalSettingsChangelog.vue

@@ -16,7 +16,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import marked from 'marked';
+import { marked } from 'marked';
 import BaseLoader from '@/components/BaseLoader';
 
 export default {

src/renderer/components/ModalSettingsUpdate.vue

@@ -29,12 +29,19 @@
             {{ $t('message.checkForUpdates') }}
          </button>
          <button
-            v-if="updateStatus === 'downloaded'"
+            v-else-if="updateStatus === 'downloaded'"
             class="btn btn-primary"
             @click="restartToUpdate"
          >
             {{ $t('message.restartToInstall') }}
          </button>
+         <button
+            v-else-if="updateStatus === 'link'"
+            class="btn btn-primary"
+            @click="openOutside('https://antares-sql.app/download.html')"
+         >
+            {{ $t('message.goToDownloadPage') }}
+         </button>
       </div>
       <div class="form-group mt-4">
          <label class="form-switch d-inline-block disabled" @click.prevent="toggleAllowPrerelease">
@@ -47,7 +54,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, shell } from 'electron';
 
 export default {
    name: 'ModalSettingsUpdate',
@@ -71,6 +78,8 @@ export default {
                return this.$t('message.downloadingUpdate');
             case 'downloaded':
                return this.$t('message.updateDownloaded');
+            case 'link':
+               return this.$t('message.updateAvailable');
             default:
                return this.updateStatus;
          }
@@ -80,6 +89,9 @@ export default {
       ...mapActions({
          changeAllowPrerelease: 'settings/changeAllowPrerelease'
       }),
+      openOutside (link) {
+         shell.openExternal(link);
+      },
       checkForUpdates () {
          ipcRenderer.send('check-for-updates');
       },

src/renderer/components/QueryEditor.vue

@@ -38,6 +38,7 @@ export default {
    computed: {
       ...mapGetters({
          editorTheme: 'settings/getEditorTheme',
+         editorFontSize: 'settings/getEditorFontSize',
          autoComplete: 'settings/getAutoComplete',
          lineWrap: 'settings/getLineWrap',
          baseCompleter: 'application/getBaseCompleter'
@@ -158,6 +159,19 @@ export default {
          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({
@@ -173,8 +187,15 @@ export default {
          }
       },
       isSelected () {
-         if (this.isSelected)
+         if (this.isSelected) {
             this.lastSchema = this.schema;
+            this.editor.resize();
+         }
+      },
+      height () {
+         setTimeout(() => {
+            this.editor.resize();
+         }, 20);
       },
       lastSchema () {
          if (this.editor) {

src/renderer/components/SettingBarContext.vue

@@ -3,48 +3,42 @@
       :context-event="contextEvent"
       @close-context="$emit('close-context')"
    >
-      <div class="context-element" @click="showEditModal(contextConnection)">
-         <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
+      <div class="context-element" @click="duplicateConnection">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ $t('word.duplicate') }}</span>
       </div>
       <div class="context-element" @click="showConfirmModal">
          <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
       </div>
 
-      <ModalEditConnection
-         v-if="isEditModal"
-         :connection="contextConnection"
-         @close="hideEditModal"
-      />
       <ConfirmModal
          v-if="isConfirmModal"
          @confirm="confirmDeleteConnection"
          @hide="hideConfirmModal"
       >
-         <template :slot="'header'">
+         <template #header>
             <div class="d-flex">
                <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ $t('message.deleteConnection') }}
             </div>
          </template>
-         <div :slot="'body'">
+         <template #body>
             <div class="mb-2">
                {{ $t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
             </div>
-         </div>
+         </template>
       </ConfirmModal>
    </BaseContextMenu>
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
-import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'SettingBarContext',
    components: {
       BaseContextMenu,
-      ModalEditConnection,
       ConfirmModal
    },
    props: {
@@ -59,7 +53,8 @@ export default {
    },
    computed: {
       ...mapGetters({
-         getConnectionName: 'connections/getConnectionName'
+         getConnectionName: 'connections/getConnectionName',
+         selectedWorkspace: 'workspaces/getSelected'
       }),
       connectionName () {
          return this.getConnectionName(this.contextConnection.uid);
@@ -67,17 +62,25 @@ export default {
    },
    methods: {
       ...mapActions({
-         deleteConnection: 'connections/deleteConnection'
+         addConnection: 'connections/addConnection',
+         deleteConnection: 'connections/deleteConnection',
+         selectWorkspace: 'workspaces/selectWorkspace'
       }),
       confirmDeleteConnection () {
+         if (this.selectedWorkspace === this.contextConnection.uid)
+            this.selectWorkspace();
          this.deleteConnection(this.contextConnection);
          this.closeContext();
       },
-      showEditModal () {
-         this.isEditModal = true;
-      },
-      hideEditModal () {
-         this.isEditModal = false;
+      duplicateConnection () {
+         let connectionCopy = Object.assign({}, this.contextConnection);
+         connectionCopy = {
+            ...connectionCopy,
+            uid: uidGen('C'),
+            name: connectionCopy.name ? `${connectionCopy.name}_copy` : ''
+         };
+
+         this.addConnection(connectionCopy);
          this.closeContext();
       },
       showConfirmModal () {

src/renderer/components/TheAppWelcome.vue

@@ -1,37 +0,0 @@
-<template>
-   <div class="columns">
-      <div class="column col-12 empty text-light">
-         <div class="empty-icon">
-            <i class="mdi mdi-48px mdi-emoticon" />
-         </div>
-         <p class="empty-title h5">
-            {{ $t('message.appWelcome') }}
-         </p>
-         <p class="empty-subtitle">
-            {{ $t('message.appFirstStep') }}
-         </p>
-         <div class="empty-action">
-            <button class="btn btn-primary" @click="$emit('new-conn')">
-               {{ $t('message.createConnection') }}
-            </button>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'TheAppWelcome'
-};
-</script>
-
-<style scoped>
-  .empty {
-    height: 100%;
-    border-radius: 0;
-    background: transparent;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-</style>

src/renderer/components/TheFooter.vue

@@ -11,9 +11,9 @@
 
       <div class="footer-right-elements">
          <ul class="footer-elements">
-            <li class="footer-element footer-link" @click="openOutside('https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet')">
-               <i class="mdi mdi-18px mdi-tree mr-1" />
-               <small>{{ $t('message.plantATree') }}</small>
+            <li class="footer-element footer-link" @click="openOutside('https://www.paypal.com/paypalme/fabiodistasio')">
+               <i class="mdi mdi-18px mdi-coffee mr-1" />
+               <small>{{ $t('word.donate') }}</small>
             </li>
             <li class="footer-element footer-link" @click="openOutside('https://github.com/Fabio286/antares/issues')">
                <i class="mdi mdi-18px mdi-bug" />

src/renderer/components/TheNotificationsBoard.vue

@@ -40,15 +40,13 @@ export default {
       }
    },
    watch: {
-      notifications: {
-         deep: true,
-         handler: function (notification) {
-            if (notification.length) {
-               this.timeouts[notification[0].uid] = setTimeout(() => {
-                  this.removeNotification(notification[0].uid);
-                  delete this.timeouts[notification.uid];
-               }, this.notificationsTimeout * 1000);
-            }
+      'notifications.length': function (val) {
+         if (val > 0) {
+            const nUid = this.notifications[0].uid;
+            this.timeouts[nUid] = setTimeout(() => {
+               this.removeNotification(nUid);
+               delete this.timeouts[nUid];
+            }, this.notificationsTimeout * 1000);
          }
       }
    },
@@ -63,11 +61,14 @@ export default {
          }
       },
       rearmTimeouts () {
+         const delay = 50;
+         let i = this.notifications.length * delay;
          for (const notification of this.notifications) {
             this.timeouts[notification.uid] = setTimeout(() => {
                this.removeNotification(notification.uid);
                delete this.timeouts[notification.uid];
-            }, this.notificationsTimeout * 1000);
+            }, (this.notificationsTimeout * 1000) + i);
+            i = i > delay ? i - delay : 0;
          }
       }
    }

src/renderer/components/TheScratchpad.vue

@@ -6,12 +6,12 @@
       :hide-footer="true"
       @hide="hideScratchpad"
    >
-      <template :slot="'header'">
+      <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ $t('word.scratchpad') }}
          </div>
       </template>
-      <div :slot="'body'">
+      <template #body>
          <div>
             <div>
                <TextEditor
@@ -24,7 +24,7 @@
             </div>
             <small class="text-gray">{{ $t('message.markdownSupported') }}</small>
          </div>
-      </div>
+      </template>
    </ConfirmModal>
 </template>
 

src/renderer/components/TheSettingBar.vue

@@ -8,24 +8,29 @@
             @close-context="isContext = false"
          />
          <ul class="settingbar-elements">
-            <draggable v-model="connections">
+            <Draggable
+               v-model="connections"
+               @start="isDragging = true"
+               @end="dragStop"
+            >
                <li
                   v-for="connection in connections"
                   :key="connection.uid"
                   draggable="true"
                   class="settingbar-element btn btn-link ex-tooltip"
                   :class="{'selected': connection.uid === selectedWorkspace}"
-                  @click="selectWorkspace(connection.uid)"
+                  @click.stop="selectWorkspace(connection.uid)"
                   @contextmenu.prevent="contextMenu($event, connection)"
                   @mouseover.self="tooltipPosition"
                >
                   <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${getStatusBadge(connection.uid)}`" />
-                  <span class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
+                  <span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
                </li>
-            </draggable>
+            </Draggable>
             <li
                class="settingbar-element btn btn-link ex-tooltip"
-               @click="showNewConnModal"
+               :class="{'selected': 'NEW' === selectedWorkspace}"
+               @click="selectWorkspace('NEW')"
                @mouseover.self="tooltipPosition"
             >
                <i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
@@ -51,19 +56,20 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import draggable from 'vuedraggable';
+import Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext';
 
 export default {
    name: 'TheSettingBar',
    components: {
-      draggable,
+      Draggable,
       SettingBarContext
    },
    data () {
       return {
          dragElement: null,
          isContext: false,
+         isDragging: false,
          contextEvent: null,
          contextConnection: {},
          scale: 0
@@ -86,13 +92,12 @@ export default {
          }
       },
       hasUpdates () {
-         return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
+         return ['available', 'downloading', 'downloaded', 'link'].includes(this.updateStatus);
       }
    },
    methods: {
       ...mapActions({
          updateConnections: 'connections/updateConnections',
-         showNewConnModal: 'application/showNewConnModal',
          showSettingModal: 'application/showSettingModal',
          showScratchpad: 'application/showScratchpad',
          selectWorkspace: 'workspaces/selectWorkspace'
@@ -106,13 +111,13 @@ export default {
          return connection.ask ? '' : `${connection.user + '@'}${connection.host}:${connection.port}`;
       },
       tooltipPosition (e) {
-         const el = e.target;
+         const el = e.target ? e.target : e;
          const fromTop = window.pageYOffset + el.getBoundingClientRect().top - (el.offsetHeight / 4);
          el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`;
       },
       getStatusBadge (uid) {
          if (this.getWorkspace(uid)) {
-            const status = this.getWorkspace(uid).connection_status;
+            const status = this.getWorkspace(uid).connectionStatus;
 
             switch (status) {
                case 'connected':
@@ -125,6 +130,13 @@ export default {
                   return '';
             }
          }
+      },
+      dragStop (e) {
+         this.isDragging = false;
+
+         setTimeout(() => {
+            this.tooltipPosition(e.originalEvent.target.parentNode);
+         }, 200);
       }
    }
 };
@@ -167,13 +179,13 @@ export default {
         height: $settingbar-width;
         width: 100%;
         margin: 0;
-        border-left: 3px solid transparent;
         opacity: 0.5;
         transition: opacity 0.2s;
         display: flex;
-        align-content: center;
-        justify-content: center;
-        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        border-radius: 0;
+        padding: 0;
 
         &:hover {
           opacity: 1;
@@ -181,9 +193,24 @@ export default {
 
         &.selected {
           opacity: 1;
+
+          &::before {
+            height: $settingbar-width;
+          }
+        }
+
+        &::before {
+          content: "";
+          height: 0;
+          width: 3px;
+          transition: height 0.2s;
+          background-color: $primary-color;
+          border-radius: $border-radius;
         }
 
         .settingbar-element-icon {
+          margin: 0 auto;
+
           &.badge::after {
             bottom: -10px;
             right: 0;
@@ -211,7 +238,7 @@ export default {
       padding: 0.2rem 0.4rem;
       font-size: 0.7rem;
       background: rgba(48, 55, 66, 0.95);
-      border-radius: 0.1rem;
+      border-radius: $border-radius;
       color: #fff;
       max-width: 320px;
       pointer-events: none;
@@ -220,7 +247,13 @@ export default {
       transition: opacity 0.2s;
     }
 
-    &:hover .ex-tooltip-content {
+    &.sortable-chosen {
+      .ex-tooltip-content {
+        opacity: 0 !important;
+      }
+    }
+
+    &:hover:not(.selected) .ex-tooltip-content {
       visibility: visible;
       opacity: 1;
     }

src/renderer/components/TheTitleBar.vue

@@ -1,8 +1,12 @@
 <template>
-   <div id="titlebar">
+   <div id="titlebar" @dblclick="toggleFullScreen">
       <div class="titlebar-resizer" />
       <div class="titlebar-elements">
-         <img class="titlebar-logo" :src="require('@/images/logo.svg').default">
+         <img
+            v-if="!isMacOS"
+            class="titlebar-logo"
+            src="@/images/logo.svg"
+         >
       </div>
       <div class="titlebar-elements titlebar-title">
          {{ windowTitle }}
@@ -22,14 +26,26 @@
          >
             <i class="mdi mdi-24px mdi-refresh" />
          </div>
-         <div class="titlebar-element" @click="minimizeApp">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element"
+            @click="minimizeApp"
+         >
             <i class="mdi mdi-24px mdi-minus" />
          </div>
-         <div class="titlebar-element" @click="toggleFullScreen">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element"
+            @click="toggleFullScreen"
+         >
             <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
             <i v-else class="mdi mdi-24px mdi-fullscreen" />
          </div>
-         <div class="titlebar-element close-button" @click="closeApp">
+         <div
+            v-if="!isMacOS"
+            class="titlebar-element close-button"
+            @click="closeApp"
+         >
             <i class="mdi mdi-24px mdi-close" />
          </div>
       </div>
@@ -47,7 +63,8 @@ export default {
       return {
          w: getCurrentWindow(),
          isMaximized: getCurrentWindow().isMaximized(),
-         isDevelopment: process.env.NODE_ENV === 'development'
+         isDevelopment: process.env.NODE_ENV === 'development',
+         isMacOS: process.platform === 'darwin'
       };
    },
    computed: {
@@ -58,6 +75,7 @@ export default {
       }),
       windowTitle () {
          if (!this.selectedWorkspace) return '';
+         if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
 
          const connectionName = this.getConnectionName(this.selectedWorkspace);
          const workspace = this.getWorkspace(this.selectedWorkspace);

src/renderer/components/Workspace.vue

@@ -1,186 +1,532 @@
 <template>
    <div v-show="isSelected" class="workspace column columns col-gapless">
-      <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
-      <div v-if="workspace.connection_status === 'connected'" class="workspace-tabs column columns col-gapless">
-         <ul
-            id="tabWrap"
+      <WorkspaceExploreBar
+         v-if="workspace.connectionStatus === 'connected'"
+         :connection="connection"
+         :is-selected="isSelected"
+      />
+      <div v-if="workspace.connectionStatus === 'connected'" class="workspace-tabs column columns col-gapless">
+         <Draggable
             ref="tabWrap"
+            v-model="draggableTabs"
+            tag="ul"
+            group="tabs"
             class="tab tab-block column col-12"
+            draggable=".tab-draggable"
+            @mouseover.native="addWheelEvent"
          >
-            <li class="tab-item dropdown tools-dropdown">
-               <a
-                  class="tab-link workspace-tools-link dropdown-toggle"
-                  tabindex="0"
-                  :title="$t('word.tools')"
-               >
-                  <i class="mdi mdi-24px mdi-tools" />
-               </a>
-               <ul class="menu text-left text-uppercase">
-                  <li v-if="workspace.customizations.processesList" class="menu-item">
-                     <a class="c-hand p-vcentered" @click="showProcessesModal">
-                        <i class="mdi mdi-memory mr-1 tool-icon" />
-                        <span>{{ $t('message.processesList') }}</span>
-                     </a>
-                  </li>
-                  <li
-                     v-if="workspace.customizations.variables"
-                     class="menu-item"
-                     title="Coming..."
-                  >
-                     <a class="c-hand p-vcentered disabled">
-                        <i class="mdi mdi-shape mr-1 tool-icon" />
-                        <span>{{ $t('word.variables') }}</span>
-                     </a>
-                  </li>
-                  <li
-                     v-if="workspace.customizations.usersManagement"
-                     class="menu-item"
-                     title="Coming..."
-                  >
-                     <a class="c-hand p-vcentered disabled">
-                        <i class="mdi mdi-account-group mr-1 tool-icon" />
-                        <span>{{ $t('message.manageUsers') }}</span>
-                     </a>
-                  </li>
-               </ul>
-            </li>
             <li
-               v-if="schemaChild && isSettingSupported"
-               class="tab-item"
-               :class="{'active': selectedTab === 'prop'}"
-               @click="selectTab({uid: workspace.uid, tab: 'prop'})"
-            >
-               <a class="tab-link">
-                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                  <span :title="schemaChild">{{ $t('word.settings').toUpperCase() }}: {{ schemaChild }}</span>
-               </a>
-            </li>
-            <li
-               v-if="workspace.breadcrumbs.table || workspace.breadcrumbs.view"
-               class="tab-item"
-               :class="{'active': selectedTab === 'data'}"
-               @click="selectTab({uid: workspace.uid, tab: 'data'})"
-            >
-               <a class="tab-link">
-                  <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
-                  <span :title="schemaChild">{{ $t('word.data').toUpperCase() }}: {{ schemaChild }}</span>
-               </a>
-            </li>
-            <li
-               v-for="tab of queryTabs"
-               :key="tab.uid"
-               class="tab-item"
+               v-for="(tab, i) of draggableTabs"
+               :key="i"
+               class="tab-item tab-draggable"
+               draggable="true"
                :class="{'active': selectedTab === tab.uid}"
-               @click="selectTab({uid: workspace.uid, tab: tab.uid})"
-               @mouseup.middle="closeTab(tab.uid)"
+               @mousedown.left="selectTab({uid: workspace.uid, tab: tab.uid})"
+               @mouseup.middle="closeTab(tab)"
             >
-               <a class="tab-link">
+               <a
+                  v-if="tab.type === 'query'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
                   <i class="mdi mdi-18px mdi-code-tags mr-1" />
                   <span>
-                     Query #{{ tab.index }}
+                     <span>{{ tab.content || 'Query' | cutText }} #{{ tab.index }}</span>
                      <span
-                        v-if="queryTabs.length > 1"
                         class="btn btn-clear"
                         :title="$t('word.close')"
-                        @click.stop="closeTab(tab.uid)"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'temp-data'"
+                  class="tab-link"
+                  @dblclick="openAsPermanentTab(tab)"
+               >
+                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                  <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     <span class=" text-italic">{{ tab.elementName | cutText }}</span>
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a v-else-if="tab.type === 'data'" class="tab-link">
+                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                  <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ tab.elementName | cutText }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-table'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newTable') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'table-props'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ tab.elementName | cutText }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'view-props'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
+                     {{ tab.elementName | cutText }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-view'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newView') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-trigger'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newTrigger') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-routine'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newRoutine') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-function'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newFunction') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-trigger-function'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newTriggerFunction') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type === 'new-scheduler'"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ $t('message.newScheduler') }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else-if="tab.type.includes('temp-')"
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+                  @dblclick="openAsPermanentTab(tab)"
+               >
+                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     <span class=" text-italic">{{ tab.elementName | cutText }}</span>
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
+                     />
+                  </span>
+               </a>
+
+               <a
+                  v-else
+                  class="tab-link"
+                  :class="{'badge': tab.isChanged}"
+               >
+                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
+                     {{ tab.elementName | cutText }}
+                     <span
+                        class="btn btn-clear"
+                        :title="$t('word.close')"
+                        @mousedown.left.stop
+                        @click.stop="closeTab(tab)"
                      />
                   </span>
                </a>
             </li>
-            <li class="tab-item">
-               <a
-                  class="tab-add"
-                  :title="$t('message.openNewTab')"
-                  @click="addTab"
+            <template #header>
+               <li
+                  v-if="workspace.customizations.processesList"
+                  class="tab-item dropdown tools-dropdown"
                >
-                  <i class="mdi mdi-24px mdi-plus" />
-               </a>
-            </li>
-         </ul>
-         <WorkspacePropsTab
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.table"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :table="workspace.breadcrumbs.table"
-         />
-         <WorkspacePropsTabView
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :view="workspace.breadcrumbs.view"
-         />
-         <WorkspacePropsTabTrigger
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.trigger"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :trigger="workspace.breadcrumbs.trigger"
-         />
-         <WorkspacePropsTabRoutine
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.procedure"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :routine="workspace.breadcrumbs.procedure"
-         />
-         <WorkspacePropsTabFunction
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.function"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :function="workspace.breadcrumbs.function"
-         />
-         <WorkspacePropsTabScheduler
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.scheduler"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :scheduler="workspace.breadcrumbs.scheduler"
-         />
-         <WorkspaceTableTab
-            v-show="selectedTab === 'data'"
-            :connection="connection"
-            :table="workspace.breadcrumbs.table || workspace.breadcrumbs.view"
-         />
-         <WorkspaceQueryTab
-            v-for="tab of queryTabs"
-            :key="tab.uid"
-            :tab="tab"
-            :is-selected="selectedTab === tab.uid"
-            :connection="connection"
-         />
+                  <a
+                     class="tab-link workspace-tools-link dropdown-toggle"
+                     tabindex="0"
+                     :title="$t('word.tools')"
+                  >
+                     <i class="mdi mdi-24px mdi-tools" />
+                  </a>
+                  <ul v-if="hasTools" class="menu text-left text-uppercase">
+                     <li class="menu-item">
+                        <a class="c-hand p-vcentered" @click="showProcessesModal">
+                           <i class="mdi mdi-memory mr-1 tool-icon" />
+                           <span>{{ $t('message.processesList') }}</span>
+                        </a>
+                     </li>
+                     <li
+                        v-if="workspace.customizations.variables"
+                        class="menu-item"
+                        title="Coming..."
+                     >
+                        <a class="c-hand p-vcentered disabled">
+                           <i class="mdi mdi-shape mr-1 tool-icon" />
+                           <span>{{ $t('word.variables') }}</span>
+                        </a>
+                     </li>
+                     <li
+                        v-if="workspace.customizations.usersManagement"
+                        class="menu-item"
+                        title="Coming..."
+                     >
+                        <a class="c-hand p-vcentered disabled">
+                           <i class="mdi mdi-account-group mr-1 tool-icon" />
+                           <span>{{ $t('message.manageUsers') }}</span>
+                        </a>
+                     </li>
+                  </ul>
+               </li>
+            </template>
+            <template #footer>
+               <li class="tab-item">
+                  <a
+                     class="tab-add"
+                     :title="$t('message.openNewTab')"
+                     @click="addQueryTab"
+                  >
+                     <i class="mdi mdi-24px mdi-plus" />
+                  </a>
+               </li>
+            </template>
+         </Draggable>
+         <WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
+         <template v-for="tab of workspace.tabs">
+            <WorkspaceTabQuery
+               v-if="tab.type==='query'"
+               :key="tab.uid"
+               :tab="tab"
+               :is-selected="selectedTab === tab.uid"
+               :connection="connection"
+            />
+            <WorkspaceTabTable
+               v-else-if="['temp-data', 'data'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :table="tab.elementName"
+               :schema="tab.schema"
+               :element-type="tab.elementType"
+            />
+            <WorkspaceTabNewTable
+               v-else-if="tab.type === 'new-table'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsTable
+               v-else-if="tab.type === 'table-props'"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :table="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewView
+               v-else-if="tab.type === 'new-view'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsView
+               v-else-if="tab.type === 'view-props'"
+               :key="tab.uid"
+               :is-selected="selectedTab === tab.uid"
+               :connection="connection"
+               :view="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewTrigger
+               v-else-if="tab.type === 'new-trigger'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsTrigger
+               v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewTriggerFunction
+               v-else-if="tab.type === 'new-trigger-function'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsTriggerFunction
+               v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :function="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewRoutine
+               v-else-if="tab.type === 'new-routine'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsRoutine
+               v-else-if="['temp-routine-props', 'routine-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :routine="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewFunction
+               v-else-if="tab.type === 'new-function'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsFunction
+               v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :function="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabNewScheduler
+               v-else-if="tab.type === 'new-scheduler'"
+               :key="tab.uid"
+               :tab="tab"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :trigger="tab.elementName"
+               :schema="tab.schema"
+            />
+            <WorkspaceTabPropsScheduler
+               v-else-if="['temp-scheduler-props', 'scheduler-props'].includes(tab.type)"
+               :key="tab.uid"
+               :connection="connection"
+               :is-selected="selectedTab === tab.uid"
+               :scheduler="tab.elementName"
+               :schema="tab.schema"
+            />
+         </template>
       </div>
+      <WorkspaceEditConnectionPanel v-else :connection="connection" />
       <ModalProcessesList
          v-if="isProcessesModal"
          :connection="connection"
          @close="hideProcessesModal"
       />
+
+      <ModalDiscardChanges
+         v-if="unsavedTab"
+         @confirm="closeTab(unsavedTab, true)"
+         @close="unsavedTab = null"
+      />
    </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import Draggable from 'vuedraggable';
 import Connection from '@/ipc-api/Connection';
+import WorkspaceEmptyState from '@/components/WorkspaceEmptyState';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
-import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
-import WorkspaceTableTab from '@/components/WorkspaceTableTab';
-import WorkspacePropsTab from '@/components/WorkspacePropsTab';
-import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
-import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
-import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
-import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
-import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler';
+import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
+import WorkspaceTabQuery from '@/components/WorkspaceTabQuery';
+import WorkspaceTabTable from '@/components/WorkspaceTabTable';
+
+import WorkspaceTabNewTable from '@/components/WorkspaceTabNewTable';
+import WorkspaceTabNewView from '@/components/WorkspaceTabNewView';
+import WorkspaceTabNewTrigger from '@/components/WorkspaceTabNewTrigger';
+import WorkspaceTabNewRoutine from '@/components/WorkspaceTabNewRoutine';
+import WorkspaceTabNewFunction from '@/components/WorkspaceTabNewFunction';
+import WorkspaceTabNewScheduler from '@/components/WorkspaceTabNewScheduler';
+import WorkspaceTabNewTriggerFunction from '@/components/WorkspaceTabNewTriggerFunction';
+
+import WorkspaceTabPropsTable from '@/components/WorkspaceTabPropsTable';
+import WorkspaceTabPropsView from '@/components/WorkspaceTabPropsView';
+import WorkspaceTabPropsTrigger from '@/components/WorkspaceTabPropsTrigger';
+import WorkspaceTabPropsTriggerFunction from '@/components/WorkspaceTabPropsTriggerFunction';
+import WorkspaceTabPropsRoutine from '@/components/WorkspaceTabPropsRoutine';
+import WorkspaceTabPropsFunction from '@/components/WorkspaceTabPropsFunction';
+import WorkspaceTabPropsScheduler from '@/components/WorkspaceTabPropsScheduler';
 import ModalProcessesList from '@/components/ModalProcessesList';
+import ModalDiscardChanges from '@/components/ModalDiscardChanges';
 
 export default {
    name: 'Workspace',
    components: {
+      Draggable,
+      WorkspaceEmptyState,
       WorkspaceExploreBar,
-      WorkspaceQueryTab,
-      WorkspaceTableTab,
-      WorkspacePropsTab,
-      WorkspacePropsTabView,
-      WorkspacePropsTabTrigger,
-      WorkspacePropsTabRoutine,
-      WorkspacePropsTabFunction,
-      WorkspacePropsTabScheduler,
-      ModalProcessesList
+      WorkspaceEditConnectionPanel,
+      WorkspaceTabQuery,
+      WorkspaceTabTable,
+      WorkspaceTabNewTable,
+      WorkspaceTabPropsTable,
+      WorkspaceTabNewView,
+      WorkspaceTabPropsView,
+      WorkspaceTabNewTrigger,
+      WorkspaceTabPropsTrigger,
+      WorkspaceTabNewTriggerFunction,
+      WorkspaceTabPropsTriggerFunction,
+      WorkspaceTabNewRoutine,
+      WorkspaceTabNewFunction,
+      WorkspaceTabPropsRoutine,
+      WorkspaceTabPropsFunction,
+      WorkspaceTabNewScheduler,
+      WorkspaceTabPropsScheduler,
+      ModalProcessesList,
+      ModalDiscardChanges
+   },
+   filters: {
+      cutText (string) {
+         const limit = 20;
+         const escapedString = string.replace(/\s{2,}/g, ' ');
+         if (escapedString.length > limit)
+            return `${escapedString.substr(0, limit)}...`;
+         return escapedString;
+      }
    },
    props: {
       connection: Object
@@ -188,7 +534,8 @@ export default {
    data () {
       return {
          hasWheelEvent: false,
-         isProcessesModal: false
+         isProcessesModal: false,
+         unsavedTab: null
       };
    },
    computed: {
@@ -199,6 +546,14 @@ export default {
       workspace () {
          return this.getWorkspace(this.connection.uid);
       },
+      draggableTabs: {
+         get () {
+            return this.workspace.tabs;
+         },
+         set (val) {
+            this.updateTabs({ uid: this.connection.uid, tabs: val });
+         }
+      },
       isSelected () {
          return this.selectedWorkspace === this.connection.uid;
       },
@@ -208,35 +563,15 @@ export default {
          if (this.workspace.breadcrumbs.trigger && this.workspace.customizations.triggerSettings) return true;
          if (this.workspace.breadcrumbs.procedure && this.workspace.customizations.routineSettings) return true;
          if (this.workspace.breadcrumbs.function && this.workspace.customizations.functionSettings) return true;
+         if (this.workspace.breadcrumbs.triggerFunction && this.workspace.customizations.functionSettings) return true;
          if (this.workspace.breadcrumbs.scheduler && this.workspace.customizations.schedulerSettings) return true;
          return false;
       },
       selectedTab () {
-         if (
-            (
-               this.workspace.breadcrumbs.table === null &&
-               this.workspace.breadcrumbs.view === null &&
-               this.workspace.breadcrumbs.trigger === null &&
-               this.workspace.breadcrumbs.procedure === null &&
-               this.workspace.breadcrumbs.function === null &&
-               this.workspace.breadcrumbs.scheduler === null &&
-               ['data', 'prop'].includes(this.workspace.selected_tab)
-            ) ||
-            (
-               this.workspace.breadcrumbs.table === null &&
-               this.workspace.breadcrumbs.view === null &&
-               this.workspace.selected_tab === 'data'
-            )
-         )
-            return this.queryTabs[0].uid;
-
-         return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) ||
-         ['data', 'prop'].includes(this.workspace.selected_tab)
-            ? this.workspace.selected_tab
-            : this.queryTabs[0].uid;
+         return this.workspace ? this.workspace.selectedTab : null;
       },
       queryTabs () {
-         return this.workspace.tabs.filter(tab => tab.type === 'query');
+         return this.workspace ? this.workspace.tabs.filter(tab => tab.type === 'query') : [];
       },
       schemaChild () {
          for (const key in this.workspace.breadcrumbs) {
@@ -244,21 +579,32 @@ export default {
             if (this.workspace.breadcrumbs[key]) return this.workspace.breadcrumbs[key];
          }
          return false;
+      },
+      hasTools () {
+         return this.workspace.customizations.processesList ||
+            this.workspace.customizations.usersManagement ||
+            this.workspace.customizations.variables;
+      }
+   },
+   watch: {
+      queryTabs: function (newVal, oldVal) {
+         if (newVal.length > oldVal.length) {
+            setTimeout(() => {
+               const scroller = this.$refs.tabWrap;
+               if (scroller) scroller.$el.scrollLeft = scroller.$el.scrollWidth;
+            }, 0);
+         }
       }
    },
    async created () {
+      window.addEventListener('keydown', this.onKey);
       await this.addWorkspace(this.connection.uid);
       const isInitiated = await Connection.checkConnection(this.connection.uid);
       if (isInitiated)
          this.connectWorkspace(this.connection);
    },
-   mounted () {
-      if (this.$refs.tabWrap) {
-         this.$refs.tabWrap.addEventListener('wheel', e => {
-            if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
-            else this.$refs.tabWrap.scrollLeft -= 50;
-         });
-      }
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       ...mapActions({
@@ -267,28 +613,74 @@ export default {
          removeConnected: 'workspaces/removeConnected',
          selectTab: 'workspaces/selectTab',
          newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab'
+         removeTab: 'workspaces/removeTab',
+         updateTabs: 'workspaces/updateTabs'
       }),
-      addTab () {
-         this.newTab({ uid: this.connection.uid });
+      addQueryTab () {
+         this.newTab({ uid: this.connection.uid, type: 'query' });
+      },
+      getSelectedTab () {
+         return this.workspace.tabs.find(tab => tab.uid === this.selectedTab);
+      },
+      onKey (e) {
+         e.stopPropagation();
 
-         if (!this.hasWheelEvent) {
-            this.$refs.tabWrap.addEventListener('wheel', e => {
-               if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
-               else this.$refs.tabWrap.scrollLeft -= 50;
-            });
-            this.hasWheelEvent = true;
+         if (!this.isSelected)
+            return;
+
+         if ((e.ctrlKey || e.metaKey) && e.keyCode === 84 && !e.altKey) { // CTRL|Command + t
+            this.addQueryTab();
+         }
+
+         if ((e.ctrlKey || e.metaKey) && e.keyCode === 87 && !e.altKey) { // CTRL|Command + w
+            const currentTab = this.getSelectedTab();
+            if (currentTab)
+               this.closeTab(currentTab);
          }
       },
-      closeTab (tUid) {
-         if (this.queryTabs.length === 1) return;
-         this.removeTab({ uid: this.connection.uid, tab: tUid });
+      openAsPermanentTab (tab) {
+         const permanentTabs = {
+            table: 'data',
+            view: 'data',
+            trigger: 'trigger-props',
+            triggerFunction: 'trigger-function-props',
+            function: 'function-props',
+            routine: 'routine-props',
+            scheduler: 'scheduler-props'
+         };
+
+         this.newTab({
+            uid: this.connection.uid,
+            schema: tab.schema,
+            elementName: tab.elementName,
+            type: permanentTabs[tab.elementType],
+            elementType: tab.elementType
+         });
+      },
+      closeTab (tab, force) {
+         this.unsavedTab = null;
+         // if (tab.type === 'query' && this.queryTabs.length === 1) return;
+         if (!force && tab.isChanged) {
+            this.unsavedTab = tab;
+            return;
+         }
+
+         this.removeTab({ uid: this.connection.uid, tab: tab.uid });
       },
       showProcessesModal () {
          this.isProcessesModal = true;
       },
       hideProcessesModal () {
          this.isProcessesModal = false;
+      },
+      addWheelEvent () {
+         if (!this.hasWheelEvent) {
+            this.$refs.tabWrap.$el.addEventListener('wheel', e => {
+               if (e.deltaY > 0) this.$refs.tabWrap.$el.scrollLeft += 50;
+               else this.$refs.tabWrap.$el.scrollLeft -= 50;
+            });
+            this.hasWheelEvent = true;
+         }
       }
    }
 };
@@ -317,20 +709,35 @@ export default {
       }
 
       .tab-item {
-        max-width: 12rem;
         width: fit-content;
         flex: initial;
 
         > a {
-          padding: 0.2rem 0.8rem;
+          padding: 0.2rem 0.6rem;
           cursor: pointer;
           display: flex;
           align-items: center;
           opacity: 0.7;
           transition: opacity 0.2s;
 
+          &.badge::after {
+            position: absolute;
+            right: 35px;
+            top: 25px;
+          }
+
+          .btn-clear {
+            margin-left: 0.5rem;
+            opacity: 0;
+            transition: opacity 0.2s;
+          }
+
           &:hover {
             opacity: 1;
+
+            .btn-clear {
+              opacity: 1;
+            }
           }
 
           &.tab-add {
@@ -349,9 +756,15 @@ export default {
 
         &.active a {
           opacity: 1;
+
+          .btn-clear {
+            opacity: 1;
+          }
         }
 
         &.tools-dropdown {
+          height: 34px;
+
           .tab-link:focus {
             opacity: 1;
             outline: 0;
@@ -362,7 +775,7 @@ export default {
             min-width: 100%;
 
             .menu-item a {
-              border-radius: 0.1rem;
+              border-radius: $border-radius;
               color: inherit;
               display: block;
               margin: 0 -0.4rem;
@@ -406,7 +819,7 @@ export default {
       .th {
         position: sticky;
         top: 0;
-        border: 1px solid;
+        border: 2px solid;
         border-left: none;
         border-bottom-width: 2px;
         padding: 0;
@@ -415,15 +828,15 @@ export default {
         z-index: 1;
 
         > div {
-          padding: 0.1rem 0.4rem;
+          padding: 0.1rem 0.2rem;
           min-width: -webkit-fill-available;
         }
       }
 
       .td {
-        border-right: 1px solid;
-        border-bottom: 1px solid;
-        padding: 0 0.4rem;
+        border-right: 2px solid;
+        border-bottom: 2px solid;
+        padding: 0 0.2rem;
         text-overflow: ellipsis;
         max-width: 200px;
         white-space: nowrap;

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -0,0 +1,561 @@
+<template>
+   <div class="connection-panel">
+      <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
+                  v-if="customizations.sslConnection"
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssl'}"
+                  @click="selectTab('ssl')"
+               >
+                  <a class="tab-link">{{ $t('word.ssl') }}</a>
+               </li>
+               <li
+                  v-if="customizations.sshConnection"
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssh'}"
+                  @click="selectTab('ssh')"
+               >
+                  <a class="tab-link">{{ $t('word.sshTunnel') }}</a>
+               </li>
+            </ul>
+         </div>
+         <div v-if="selectedTab === 'general'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <fieldset class="m-0" :disabled="isBusy">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionName') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="connection.name"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.client') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <select v-model="connection.client" class="form-select">
+                              <option
+                                 v-for="client in clients"
+                                 :key="client.slug"
+                                 :value="client.slug"
+                              >
+                                 {{ client.name }}
+                              </option>
+                           </select>
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.host"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.databasePath"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('databasePath')"
+                              @change="pathSelection($event, 'databasePath')"
+                           />
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.port"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.database" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.database"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.user"
+                              class="form-input"
+                              type="text"
+                              :disabled="connection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.password"
+                              class="form-input"
+                              type="password"
+                              :disabled="connection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.connectionSchema" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.schema') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.schema"
+                              class="form-input"
+                              type="text"
+                              :placeholder="$t('word.all')"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.readOnlyMode" class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="connection.readonly" type="checkbox"><i class="form-icon" /> {{ $t('message.readOnlyMode') }}
+                           </label>
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsl') }}
+                        </label>
+                     </div>
+                     <div class="column 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="isBusy || !connection.ssl">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.certificate') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.ciphers') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="connection.ciphers"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssh'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsh') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsh">
+                           <input type="checkbox" :checked="connection.ssh">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !connection.ssh">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshHost"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshUser"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshPass"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshPort"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="connection.sshKey"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('sshKey')"
+                              @change="pathSelection($event, 'sshKey')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.passphrase') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="connection.sshPassphrase"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="panel-footer">
+            <button
+               class="btn btn-gray mr-2 d-flex"
+               :class="{'loading': isTesting}"
+               :disabled="isBusy"
+               @click="startTest"
+            >
+               <i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
+               {{ $t('message.testConnection') }}
+            </button>
+            <button
+               class="btn btn-primary mr-2 d-flex"
+               :disabled="isBusy"
+               @click="saveConnection"
+            >
+               <i class="mdi mdi-24px mdi-content-save mr-1" />
+               {{ $t('word.save') }}
+            </button>
+         </div>
+      </div>
+      <ModalAskCredentials
+         v-if="isAsking"
+         @close-asking="closeAsking"
+         @credentials="continueTest"
+      />
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
+import Connection from '@/ipc-api/Connection';
+import { uidGen } from 'common/libs/uidGen';
+import ModalAskCredentials from '@/components/ModalAskCredentials';
+import BaseUploadInput from '@/components/BaseUploadInput';
+
+export default {
+   name: 'WorkspaceAddConnectionPanel',
+   components: {
+      ModalAskCredentials,
+      BaseUploadInput
+   },
+   data () {
+      return {
+         clients: [
+            { name: 'MySQL', slug: 'mysql' },
+            { name: 'MariaDB', slug: 'maria' },
+            { name: 'PostgreSQL', slug: 'pg' },
+            { name: 'SQLite', slug: 'sqlite' }
+         ],
+         connection: {
+            name: '',
+            client: 'mysql',
+            host: '127.0.0.1',
+            database: null,
+            databasePath: '',
+            port: null,
+            user: null,
+            password: '',
+            ask: false,
+            readonly: false,
+            uid: uidGen('C'),
+            ssl: false,
+            cert: '',
+            key: '',
+            ca: '',
+            ciphers: '',
+            ssh: false,
+            sshHost: '',
+            sshUser: '',
+            sshPass: '',
+            sshKey: '',
+            sshPort: 22
+         },
+         isConnecting: false,
+         isTesting: false,
+         isAsking: false,
+         selectedTab: 'general'
+      };
+   },
+   computed: {
+      customizations () {
+         return customizations[this.connection.client];
+      },
+      isBusy () {
+         return this.isConnecting || this.isTesting;
+      }
+   },
+   watch: {
+      'connection.client' () {
+         this.connection.user = this.customizations.defaultUser;
+         this.connection.port = this.customizations.defaultPort;
+         this.connection.database = this.customizations.defaultDatabase;
+      }
+   },
+   created () {
+      this.setDefaults();
+
+      setTimeout(() => {
+         if (this.$refs.firstInput) this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      ...mapActions({
+         addConnection: 'connections/addConnection',
+         connectWorkspace: 'workspaces/connectWorkspace',
+         addNotification: 'notifications/addNotification',
+         selectWorkspace: 'workspaces/selectWorkspace'
+      }),
+      setDefaults () {
+         this.connection.user = this.customizations.defaultUser;
+         this.connection.port = this.customizations.defaultPort;
+         this.connection.database = this.customizations.defaultDatabase;
+      },
+      async startConnection () {
+         await this.saveConnection();
+         this.isConnecting = true;
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            await this.connectWorkspace(this.connection);
+            this.isConnecting = false;
+         }
+      },
+      async startTest () {
+         this.isTesting = true;
+
+         if (this.connection.ask)
+            this.isAsking = true;
+         else {
+            try {
+               const res = await Connection.makeTest(this.connection);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+
+            this.isTesting = false;
+         }
+      },
+      async continueTest (credentials) { // if "Ask for credentials" is true
+         this.isAsking = false;
+         const params = Object.assign({}, this.connection, credentials);
+         try {
+            if (this.isConnecting) {
+               const params = Object.assign({}, this.connection, credentials);
+               await this.connectWorkspace(params);
+               this.isConnecting = false;
+            }
+            else {
+               const res = await Connection.makeTest(params);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isTesting = false;
+      },
+      saveConnection () {
+         this.selectWorkspace(this.connection.uid);
+         return this.addConnection(this.connection);
+      },
+      closeAsking () {
+         this.isTesting = false;
+         this.isAsking = false;
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.connection.ssl = !this.connection.ssl;
+      },
+      toggleSsh () {
+         this.connection.ssh = !this.connection.ssh;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.connection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.connection[name] = '';
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.connection-panel {
+  margin-top: 15vh;
+  margin-left: auto;
+  margin-right: auto;
+
+  .panel {
+    width: 450px;
+    border-radius: $border-radius;
+
+    .panel-body {
+      flex: initial;
+    }
+
+    .panel-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

src/renderer/components/WorkspaceConnectPanel.vue

@@ -1,82 +0,0 @@
-<template>
-   <div class="columns">
-      <div class="column col-12 empty">
-         <div class="empty-icon">
-            <i class="mdi mdi-48px mdi-power-plug-off" />
-         </div>
-         <p class="empty-title h5">
-            {{ isConnecting ? $t('word.connecting') : $t('word.disconnected') }}
-         </p>
-         <div class="empty-action">
-            <button
-               class="btn btn-success"
-               :class="{'loading': isConnecting}"
-               @click="startConnection"
-            >
-               {{ $t('word.connect') }}
-            </button>
-         </div>
-      </div>
-      <ModalAskCredentials
-         v-if="isAsking"
-         @close-asking="closeAsking"
-         @credentials="continueTest"
-      />
-   </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex';
-import ModalAskCredentials from '@/components/ModalAskCredentials';
-
-export default {
-   name: 'WorkspaceConnectPanel',
-   components: {
-      ModalAskCredentials
-   },
-   props: {
-      connection: Object
-   },
-   data () {
-      return {
-         isConnecting: false,
-         isAsking: false
-      };
-   },
-   methods: {
-      ...mapActions({
-         connectWorkspace: 'workspaces/connectWorkspace'
-      }),
-      async startConnection () {
-         this.isConnecting = true;
-
-         if (this.connection.ask)
-            this.isAsking = true;
-         else {
-            await this.connectWorkspace(this.connection);
-            this.isConnecting = false;
-         }
-      },
-      async continueTest (credentials) { // if "Ask for credentials" is true
-         this.isAsking = false;
-         const params = Object.assign({}, this.connection, credentials);
-         await this.connectWorkspace(params);
-         this.isConnecting = false;
-      },
-      closeAsking () {
-         this.isAsking = false;
-         this.isConnecting = false;
-      }
-   }
-};
-</script>
-
-<style scoped>
-  .empty {
-    height: 100%;
-    border-radius: 0;
-    background: transparent;
-    display: flex;
-    flex-direction: column;
-  }
-</style>

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -0,0 +1,540 @@
+<template>
+   <div class="connection-panel">
+      <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
+                  v-if="customizations.sslConnection"
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssl'}"
+                  @click="selectTab('ssl')"
+               >
+                  <a class="tab-link">{{ $t('word.ssl') }}</a>
+               </li>
+               <li
+                  v-if="customizations.sshConnection"
+                  class="tab-item c-hand"
+                  :class="{'active': selectedTab === 'ssh'}"
+                  @click="selectTab('ssh')"
+               >
+                  <a class="tab-link">{{ $t('word.sshTunnel') }}</a>
+               </li>
+            </ul>
+         </div>
+         <div v-if="selectedTab === 'general'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <fieldset class="m-0" :disabled="isBusy">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.connectionName') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="localConnection.name"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.client') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <select v-model="localConnection.client" class="form-select">
+                              <option
+                                 v-for="client in clients"
+                                 :key="client.slug"
+                                 :value="client.slug"
+                              >
+                                 {{ client.name }}
+                              </option>
+                           </select>
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.host"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.databasePath"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('databasePath')"
+                              @change="pathSelection($event, 'databasePath')"
+                           />
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.port"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.database" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.database') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.database"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.user"
+                              class="form-input"
+                              type="text"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.password"
+                              class="form-input"
+                              type="password"
+                              :disabled="localConnection.ask"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.connectionSchema" class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.schema') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.schema"
+                              class="form-input"
+                              type="text"
+                              :placeholder="$t('word.all')"
+                           >
+                        </div>
+                     </div>
+                     <div v-if="customizations.readOnlyMode" class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="localConnection.readonly" type="checkbox"><i class="form-icon" /> {{ $t('message.readOnlyMode') }}
+                           </label>
+                        </div>
+                     </div>
+                     <div v-if="!customizations.fileConnection" class="form-group columns">
+                        <div class="column col-4 col-sm-12" />
+                        <div class="column col-8 col-sm-12">
+                           <label class="form-checkbox form-inline">
+                              <input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
+                           </label>
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssl'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsl') }}
+                        </label>
+                     </div>
+                     <div class="column 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="isBusy || !localConnection.ssl">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.certificate') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.caCertificate') }}</label>
+                        </div>
+                        <div class="column 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 columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.ciphers') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              ref="firstInput"
+                              v-model="localConnection.ciphers"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div v-if="selectedTab === 'ssh'" class="panel-body py-0">
+            <div>
+               <form class="form-horizontal">
+                  <div class="form-group columns">
+                     <div class="column col-4 col-sm-12">
+                        <label class="form-label">
+                           {{ $t('message.enableSsh') }}
+                        </label>
+                     </div>
+                     <div class="column col-8 col-sm-12">
+                        <label class="form-switch d-inline-block" @click.prevent="toggleSsh">
+                           <input type="checkbox" :checked="localConnection.ssh">
+                           <i class="form-icon" />
+                        </label>
+                     </div>
+                  </div>
+                  <fieldset class="m-0" :disabled="isBusy || !localConnection.ssh">
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.hostName') }}/IP</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshHost"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.user') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshUser"
+                              class="form-input"
+                              type="text"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.password') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshPass"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.port') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshPort"
+                              class="form-input"
+                              type="number"
+                              min="1"
+                              max="65535"
+                           >
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.privateKey') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <BaseUploadInput
+                              :value="localConnection.sshKey"
+                              :message="$t('word.browse')"
+                              @clear="pathClear('sshKey')"
+                              @change="pathSelection($event, 'sshKey')"
+                           />
+                        </div>
+                     </div>
+                     <div class="form-group columns">
+                        <div class="column col-4 col-sm-12">
+                           <label class="form-label">{{ $t('word.passphrase') }}</label>
+                        </div>
+                        <div class="column col-8 col-sm-12">
+                           <input
+                              v-model="localConnection.sshPassphrase"
+                              class="form-input"
+                              type="password"
+                           >
+                        </div>
+                     </div>
+                  </fieldset>
+               </form>
+            </div>
+         </div>
+         <div class="panel-footer">
+            <button
+               class="btn btn-gray mr-2 d-flex"
+               :class="{'loading': isTesting}"
+               :disabled="isBusy"
+               @click="startTest"
+            >
+               <i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
+               {{ $t('message.testConnection') }}
+            </button>
+            <button
+               class="btn btn-primary mr-2 d-flex"
+               :disabled="isBusy || !hasChanges"
+               @click="saveConnection"
+            >
+               <i class="mdi mdi-24px mdi-content-save mr-1" />
+               {{ $t('word.save') }}
+            </button>
+            <button
+               class="btn btn-success d-flex"
+               :class="{'loading': isConnecting}"
+               :disabled="isBusy"
+               @click="startConnection"
+            >
+               <i class="mdi mdi-24px mdi-connection mr-1" />
+               {{ $t('word.connect') }}
+            </button>
+         </div>
+      </div>
+      <ModalAskCredentials
+         v-if="isAsking"
+         @close-asking="closeAsking"
+         @credentials="continueTest"
+      />
+   </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import customizations from 'common/customizations';
+import Connection from '@/ipc-api/Connection';
+import ModalAskCredentials from '@/components/ModalAskCredentials';
+import BaseUploadInput from '@/components/BaseUploadInput';
+
+export default {
+   name: 'WorkspaceEditConnectionPanel',
+   components: {
+      ModalAskCredentials,
+      BaseUploadInput
+   },
+   props: {
+      connection: Object
+   },
+   data () {
+      return {
+         clients: [
+            { name: 'MySQL', slug: 'mysql' },
+            { name: 'MariaDB', slug: 'maria' },
+            { name: 'PostgreSQL', slug: 'pg' },
+            { name: 'SQLite', slug: 'sqlite' }
+         ],
+         isConnecting: false,
+         isTesting: false,
+         isAsking: false,
+         localConnection: null,
+         selectedTab: 'general'
+      };
+   },
+   computed: {
+      customizations () {
+         return customizations[this.localConnection.client];
+      },
+      isBusy () {
+         return this.isConnecting || this.isTesting;
+      },
+      hasChanges () {
+         return JSON.stringify(this.connection) !== JSON.stringify(this.localConnection);
+      }
+   },
+   watch: {
+      connection () {
+         this.localConnection = JSON.parse(JSON.stringify(this.connection));
+      }
+   },
+   created () {
+      this.localConnection = JSON.parse(JSON.stringify(this.connection));
+   },
+   methods: {
+      ...mapActions({
+         editConnection: 'connections/editConnection',
+         connectWorkspace: 'workspaces/connectWorkspace',
+         addNotification: 'notifications/addNotification'
+      }),
+      async startConnection () {
+         await this.saveConnection();
+         this.isConnecting = true;
+
+         if (this.localConnection.ask)
+            this.isAsking = true;
+         else {
+            await this.connectWorkspace(this.localConnection);
+            this.isConnecting = false;
+         }
+      },
+      async startTest () {
+         this.isTesting = true;
+
+         if (this.localConnection.ask)
+            this.isAsking = true;
+         else {
+            try {
+               const res = await Connection.makeTest(this.localConnection);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+
+            this.isTesting = false;
+         }
+      },
+      async continueTest (credentials) { // if "Ask for credentials" is true
+         this.isAsking = false;
+         const params = Object.assign({}, this.localConnection, credentials);
+         try {
+            if (this.isConnecting) {
+               const params = Object.assign({}, this.connection, credentials);
+               await this.connectWorkspace(params);
+               this.isConnecting = false;
+            }
+            else {
+               const res = await Connection.makeTest(params);
+               if (res.status === 'error')
+                  this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
+               else
+                  this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
+            }
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isTesting = false;
+      },
+      saveConnection () {
+         return this.editConnection(this.localConnection);
+      },
+      closeAsking () {
+         this.isTesting = false;
+         this.isAsking = false;
+         this.isConnecting = false;
+      },
+      selectTab (tab) {
+         this.selectedTab = tab;
+      },
+      toggleSsl () {
+         this.localConnection.ssl = !this.localConnection.ssl;
+      },
+      toggleSsh () {
+         this.localConnection.ssh = !this.localConnection.ssh;
+      },
+      pathSelection (event, name) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localConnection[name] = files[0].path;
+      },
+      pathClear (name) {
+         this.localConnection[name] = '';
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.connection-panel {
+  margin-top: 15vh;
+  margin-left: auto;
+  margin-right: auto;
+
+  .panel {
+    width: 450px;
+    border-radius: $border-radius;
+
+    .panel-body {
+      flex: initial;
+    }
+
+    .panel-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>