chore(release): 0.5.5

.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 assets
 out
-dist
+dist
-build

.github/dependabot.yml

@@ -6,8 +6,6 @@
 version: 2
 updates:
   - package-ecosystem: "npm"
-    allow:
-      - dependency-type: "production"
     directory: "/"
     schedule:
-      interval: "monthly" 
+      interval: "weekly" 

.github/workflows/build-linux.yml

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

.github/workflows/build-mac.yml

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

.github/workflows/build-win.yml

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

.github/workflows/build.yml

@@ -1,37 +0,0 @@
-name: Build & release
-
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      
-      - name: Install dependencies
-        run: npm i
-        
-      - name: "Build"
-        run: npm run build
-
-      - name: Release
-        uses: ncipollo/release-action@v1
-        with:
-          artifacts: "build/*.AppImage,build/*.yml,build/*.deb,build/*.dmg,build/*.blockmap,build/*.zip,build/*.exe"
-          allowUpdates: true
-          draft: true
-          generateReleaseNotes: true

.github/workflows/create-artifact-linux.yml

@@ -1,31 +0,0 @@
-name: Create artifact [LINUX]
-
-on: 
-  workflow_dispatch: {}
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: npm install & build
-        run: |
-          npm install
-          npm run build
-
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: linux-build
-          retention-days: 3
-          path: |
-            build
-            !build/*-unpacked
-            !build/.icon-ico

.github/workflows/test-e2e-linux.yml

@@ -1,4 +1,4 @@
-name: Test end-to-end [LINUX]
+name: Test end-to-end [linux]
 
 on: push
 
@@ -12,12 +12,12 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
-      - name: Install Node.js
+      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 14
       
       - name: Install dependencies
         run: npm i

.gitignore

@@ -7,4 +7,5 @@ node_modules
 thumbs.db
 NOTES.md
 *.txt
+package-lock.json
 *.heapsnapshot

.nvmrc

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

.stylelintrc

@@ -1,7 +1,6 @@
 {
   "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard"
-    "stylelint-config-recommended-vue"
   ],
   "fix": true,
   "formatter": "verbose",
@@ -11,7 +10,6 @@
   "rules": {
     "at-rule-no-unknown": null,
     "no-descending-specificity": null,
-    "font-family-no-missing-generic-family-keyword": null,
     "declaration-colon-newline-after": "always-multi-line"
   },
   "syntax": "scss"

.vscode/settings.json

@@ -6,8 +6,7 @@
       "PostgreSQL",
       "SQLite",
       "Windows",
-      "translation",
+      "translation"
-      "Linux"
    ],
    "svg.preview.background": "transparent"
 }

CHANGELOG.md

@@ -2,233 +2,6 @@
 
 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.5.16](https://github.com/antares-sql/antares/compare/v0.5.15...v0.5.16) (2022-08-26)
-
-
-### Bug Fixes
-
-* CTRL+Right/Left not working on text editor, closes [#427](https://github.com/antares-sql/antares/issues/427) ([ffc645b](https://github.com/antares-sql/antares/commit/ffc645ba5efb1c52670096e4f8c7f992b7335dae))
-* issue updating datetime cells with null value, closes [#423](https://github.com/antares-sql/antares/issues/423) ([ebc325a](https://github.com/antares-sql/antares/commit/ebc325ae0c656dca2eb8f7544ab271beaee9b47e))
-* ts exceptions ([df68114](https://github.com/antares-sql/antares/commit/df681147aaf0bfca69f3ffdc474cc1846541b1d8))
-* **UI:** editor themes group not visible in select element ([9dc700e](https://github.com/antares-sql/antares/commit/9dc700e13ea65bb8c6feac4ff4ffeadd32053614))
-* **UI:** wrong position of fields resizable area ([c90ab0e](https://github.com/antares-sql/antares/commit/c90ab0e8807ff30a9ab58e9aa3515cf427dd6e86))
-* unable to set null or delete rows without primary key ([39326eb](https://github.com/antares-sql/antares/commit/39326eb52e038728b5419d4a8de8024c7ead3002))
-
-### [0.5.15](https://github.com/antares-sql/antares/compare/v0.5.14...v0.5.15) (2022-08-17)
-
-
-### Features
-
-* ability to add new shortcuts ([d044a02](https://github.com/antares-sql/antares/commit/d044a02cb79a9d06aadc34cdbf6e81da84360559))
-* ability to edit shortcuts ([8eb127e](https://github.com/antares-sql/antares/commit/8eb127e45838bc01ba12f0740fec077fcd975532))
-* added more events in shortcuts setting ([5043faf](https://github.com/antares-sql/antares/commit/5043fafa934844ebc2f59cabcec830c6a4d5ca8e))
-* delete shortcuts and restore defaults ([c22413f](https://github.com/antares-sql/antares/commit/c22413fde9dfe5501a5f220070cfe552a318c70b))
-* dynamic shortcut suggestions on empty query tabs ([4df14c3](https://github.com/antares-sql/antares/commit/4df14c3693955bd7801b4b99103fca85f00f3e8c))
-* list of available shortcuts in settings window ([44bb75b](https://github.com/antares-sql/antares/commit/44bb75bc60d7d31bbd99a9ba57f30fd354f7581c))
-* **UI:** connection name on left bar, closes [#382](https://github.com/antares-sql/antares/issues/382) [#414](https://github.com/antares-sql/antares/issues/414) ([4887753](https://github.com/antares-sql/antares/commit/48877534d1a41d351b267c0dab925046ca984179))
-* **UI:** shortcuts setting UI improved ([49b63bc](https://github.com/antares-sql/antares/commit/49b63bc6f28fc6031e6a892d0a48cd35ae2f26cd))
-
-
-### Bug Fixes
-
-* startup exception ([c50d17e](https://github.com/antares-sql/antares/commit/c50d17e82b7fd337d4037ddf646cd1a8fc765bae))
-
-
-### Improvements
-
-* improved keypress detector ([0f219cf](https://github.com/antares-sql/antares/commit/0f219cf9b796b4369c609fb0e8e3b84346a30b07))
-* **translation:** updated italian translation ([c05be83](https://github.com/antares-sql/antares/commit/c05be8304f3cf299cf338f67c00184305e022919))
-
-### [0.5.14](https://github.com/antares-sql/antares/compare/v0.5.13...v0.5.14) (2022-08-09)
-
-
-### Bug Fixes
-
-* unable to open settingbar context menu ([44eb507](https://github.com/antares-sql/antares/commit/44eb507a12bad028a4fa8a8bb0f6442a3e8dde91))
-
-### [0.5.13](https://github.com/antares-sql/antares/compare/v0.5.12...v0.5.13) (2022-08-09)
-
-
-### Features
-
-* copy row as CSV, closes [#394](https://github.com/antares-sql/antares/issues/394) ([1c3d7aa](https://github.com/antares-sql/antares/commit/1c3d7aa30bb9c2bd900a764ee6b97960729e9263))
-* new macos icon ([0bfa14e](https://github.com/antares-sql/antares/commit/0bfa14e1c90320578597df030941530b670a4131))
-
-
-### Bug Fixes
-
-* **MySQL:** error with ANSI sql_mode ([f64a12a](https://github.com/antares-sql/antares/commit/f64a12a8e9c5f764c3a692f1a032736e008058b5))
-* set legacy: false ([104b7c9](https://github.com/antares-sql/antares/commit/104b7c928b9c2abfc056880f16c606a0b1fa7c67))
-
-### [0.5.12](https://github.com/antares-sql/antares/compare/v0.5.11...v0.5.12) (2022-07-26)
-
-
-### Features
-
-* ability to copy multiple selected rows ([9551afb](https://github.com/antares-sql/antares/commit/9551afbd2d7e525c81f28e98e788b92609ce9de4))
-* context menu option to duplicate a table row ([985e5d3](https://github.com/antares-sql/antares/commit/985e5d352793d1b3e1981d004b6f494bfbb049bf))
-* copy row as SQL INSERT ([d3da15a](https://github.com/antares-sql/antares/commit/d3da15aa1377dcba73927047563f1d0c2d1284ca))
-* execute selected query ([7890263](https://github.com/antares-sql/antares/commit/78902639ebb29a8c53f8aa0d2045c74e0646febc))
-* export table content as SQL INSERT ([f3b5de3](https://github.com/antares-sql/antares/commit/f3b5de38c4abfd2c1d738e179fc22e6c8b6f9080))
-
-
-### Bug Fixes
-
-* disable ctrl+alt+(left/right) shortcut on linux ([8ecaedb](https://github.com/antares-sql/antares/commit/8ecaedbf6c2fc0dc56ff2177a87dd6ede74bdd22))
-* error on schema export ([1d151e9](https://github.com/antares-sql/antares/commit/1d151e9349fd97576ccd8ef7f88ca789a1f28b65))
-* issue with logger on import/export ([cb038b3](https://github.com/antares-sql/antares/commit/cb038b374a4fe85ad569e42eee7af123c925e775))
-* missing defaults on insert row window ([1ead76c](https://github.com/antares-sql/antares/commit/1ead76c02889f48bd91cae702820b082ca2ff54b))
-* missing table on insert new records on session restored tabs ([8c83b3f](https://github.com/antares-sql/antares/commit/8c83b3f1447354ec63b2a308db05ad4d54659aa7))
-* **MySQL:** missing quoted identifier for column names in table filter, closes [#380](https://github.com/antares-sql/antares/issues/380) ([eb60899](https://github.com/antares-sql/antares/commit/eb60899e6e17879c79a7ee7108061e9aca8596f7))
-* prevent ctrl+a in console ([a00c19d](https://github.com/antares-sql/antares/commit/a00c19d3003cd43d3ee6e3132728122bb2b24c97))
-
-### [0.5.11](https://github.com/antares-sql/antares/compare/v0.5.10...v0.5.11) (2022-07-19)
-
-
-### Bug Fixes
-
-* console events disabled in production ([0b1aa3d](https://github.com/antares-sql/antares/commit/0b1aa3dd299db641df3d4c56c7ee56a187fc3ab3))
-* filter persists switching temporary table tabs ([bf768c3](https://github.com/antares-sql/antares/commit/bf768c380087b65604b5b571a9858a7f07bd681d))
-* unable to edit table fields content on tables with datetime fields ([91e0630](https://github.com/antares-sql/antares/commit/91e06305133c97ea02dcfdc4e739a4b0a7e7049d))
-
-### [0.5.10](https://github.com/antares-sql/antares/compare/v0.5.9...v0.5.10) (2022-07-18)
-
-
-### Features
-
-* context menu to copy queries from console ([c21bd60](https://github.com/antares-sql/antares/commit/c21bd6075c1203607c05e45b76233d57e3008190))
-* Ctrl+PgUp & Ctrl+PgDn to navigate between tabs ([abf8298](https://github.com/antares-sql/antares/commit/abf829867e567354e534cff3e02a6d43f4c7a262))
-* field names suggestion for tables in the query ([b71f04e](https://github.com/antares-sql/antares/commit/b71f04e5aa3c37eaa160dfbc76d1b84789e3543e))
-* initial console implementation ([6a6f43a](https://github.com/antares-sql/antares/commit/6a6f43a718561e0abd2cb89048b7fe45d08736ae))
-* ipc event channel to send logs to renderer ([f12a04b](https://github.com/antares-sql/antares/commit/f12a04b0524f1172334c89afeb27675c19ff68d2))
-* open/close console on single connection ([44647f5](https://github.com/antares-sql/antares/commit/44647f5b5508965bf5a7264add89e175c725e877))
-
-
-### Bug Fixes
-
-* exception on QueryEditor with null modelValue ([9bc9adb](https://github.com/antares-sql/antares/commit/9bc9adb7cff19b86a99491d968485a4cd7b47b99))
-* fields content language detection not working properly ([a91fa8f](https://github.com/antares-sql/antares/commit/a91fa8ff54bbf1f8475666efd3a268a3a4f07f0c))
-* **Linux:** ctrl+space shortcut not working ([ed3d35f](https://github.com/antares-sql/antares/commit/ed3d35f1319a1e2edcb8104f2045a71b9e9754a2))
-* unable to delete by select all in left bar search, closes [#368](https://github.com/antares-sql/antares/issues/368) ([7725faf](https://github.com/antares-sql/antares/commit/7725fafe852479720fa619ced0970f2fa0099191))
-* unable to update data on tables missing primary or unique key ([e0946f0](https://github.com/antares-sql/antares/commit/e0946f04f792d25c187ea56d4714bdacc016ada3))
-
-
-### Improvements
-
-* improved resize of text editor resizing console height ([3f9e6d8](https://github.com/antares-sql/antares/commit/3f9e6d85ca445eea1028effa32418eee4980f87d))
-* **UI:** improved visibility of explore bar tooltips ([f312cf5](https://github.com/antares-sql/antares/commit/f312cf5f855deddd562c26d1835f78d16499b93b))
-
-### [0.5.9](https://github.com/antares-sql/antares/compare/v0.5.8...v0.5.9) (2022-07-06)
-
-
-### Features
-
-* ability to pin/unpin and delete connections from the "all connections" modal ([8e70570](https://github.com/antares-sql/antares/commit/8e705706aecc5c9790329e63e61a1c02fa5d0342))
-* connections sorted by last usage by default and option to pin them ([36e98e0](https://github.com/antares-sql/antares/commit/36e98e0742657e25df7768aa5b3b7cb350df5509))
-* ctrl/cmd+space to open all connections modal ([a9a4344](https://github.com/antares-sql/antares/commit/a9a4344a71cc0f8f156b839733f6ddc200a26268))
-* modal with all connections ([a703dcc](https://github.com/antares-sql/antares/commit/a703dcc53eb920117bc346a3c21f0c729c0ad96d))
-* option to disable scratchpad ([56b0a48](https://github.com/antares-sql/antares/commit/56b0a4815c6f54eef164d849f6ca25af1e142b16))
-* search form in all connections modal ([ec5ab73](https://github.com/antares-sql/antares/commit/ec5ab73b19d99e9971ae87e5f0a8d1bd1c34ef00))
-
-
-### Bug Fixes
-
-* error on export schema ([cf9c7c6](https://github.com/antares-sql/antares/commit/cf9c7c600aa915cef1ec3777866badb7ab1312ee))
-* missing option for untrusted ssl connection on connections edit panel ([71a5b5c](https://github.com/antares-sql/antares/commit/71a5b5c8285fb777c43e7f6516006bfe9f52591c))
-
-
-### Improvements
-
-* **UI:** improved focus visibility for buttons ([d2eb31a](https://github.com/antares-sql/antares/commit/d2eb31a63d612323f8738eded1e1ce7b23554001))
-
-### [0.5.8](https://github.com/antares-sql/antares/compare/v0.5.7...v0.5.8) (2022-07-02)
-
-
-### Features
-
-* add max visible options prop ([067a6f3](https://github.com/antares-sql/antares/commit/067a6f350757c1e6b4df51f801ae832b47bd3484))
-* context shortcut to disconnect from left bar ([e97da37](https://github.com/antares-sql/antares/commit/e97da3710385690b85391938e40145a1591bc2e8))
-* **MySQL:** option to disable foreign key checks when empty a table ([902c29f](https://github.com/antares-sql/antares/commit/902c29ffa551bc3489fa1d9136ee926d135ea14f))
-
-
-### Bug Fixes
-
-* connection string field doesn't appear switching to postgre when editing a connection ([6573fe6](https://github.com/antares-sql/antares/commit/6573fe69aca2b99c7a700879fb0d0930e864cbe6))
-* ctrl+a on results doesn't work properly ([5f57a9f](https://github.com/antares-sql/antares/commit/5f57a9f60d281e24e5bee4330c081fa5d8651b36))
-* double context menu on table settings rows ([91d0735](https://github.com/antares-sql/antares/commit/91d0735a5f4861bc6ad13b9285ea7a9bd7be9538))
-* editor gutter pin not working ([cfd82c8](https://github.com/antares-sql/antares/commit/cfd82c8f419952879b386187eb146847098263fe))
-* error on modals missing focusable elements ([7702ca0](https://github.com/antares-sql/antares/commit/7702ca025fcae6209ae3851d0ccd25579f93e243))
-* exception on new scheduler tab ([a45d76e](https://github.com/antares-sql/antares/commit/a45d76e8b4ecdecf53438fe174f61ea32f4e10ac))
-* focus goes outside modals with tab key navigation ([e42c424](https://github.com/antares-sql/antares/commit/e42c424a13a6901414a1a1c4e2f68cb4ddef7d59))
-* reactivity problem on BaseVirtualScroll component ([45b2eb2](https://github.com/antares-sql/antares/commit/45b2eb2934b9f7a08f379ad4d7a44b1c89585449))
-* result table cells/rows not loses focus clicking outside ([0a3a482](https://github.com/antares-sql/antares/commit/0a3a4827dd75539666fa2c827415af3bfa224543))
-* **UI:** wrong tables scrollable height after switching tabs ([8f01740](https://github.com/antares-sql/antares/commit/8f01740475ea6d5d9b5eefabdbf27099df76f2cf))
-* **Windows:** white window buttons with dark theme ([a80d227](https://github.com/antares-sql/antares/commit/a80d22740045a61fd14fd5da401c0d123d54f4de))
-* **Windows:** Windows 7 style window frame at startup ([93ce619](https://github.com/antares-sql/antares/commit/93ce619782d58cfb8fb1ecce2ca2137a61ec6181))
-
-### [0.5.7](https://github.com/antares-sql/antares/compare/v0.5.4...v0.5.7) (2022-06-19)
-
-
-### Features
-
-* added dropdown animation ([5398964](https://github.com/antares-sql/antares/commit/539896419064db9127f6a72acdbb11af2c4aa60a))
-* dynamic app window title ([0024269](https://github.com/antares-sql/antares/commit/00242697a102f82dd0c731a3529c984fbdf83b3e))
-* hotkeys to navigate forward or backward between tabs ([d3b9e08](https://github.com/antares-sql/antares/commit/d3b9e08446708654b3c6fad565b734d93effe683))
-* hotkeys to navigate inside a table resultset ([49abd1e](https://github.com/antares-sql/antares/commit/49abd1ea7f5ec368e9a9201f8fd5b6520c4bd0a8))
-* **translation:** russian translation, closes [#266](https://github.com/antares-sql/antares/issues/266) ([9082960](https://github.com/antares-sql/antares/commit/9082960310573a6e4d14bfbe82ed2eb1489f308d))
-* **UI:** BaseSelect disabled state ([2b436d8](https://github.com/antares-sql/antares/commit/2b436d8613a1e3dff55d73adbddf5d2cd2452f27))
-* **UI:** BaseSelect in table filters ([a037d0c](https://github.com/antares-sql/antares/commit/a037d0cc0148444e8e6c5b87c79f6ba9c2a6f0fe))
-* **UI:** BaseSelect option list scrolls automatically using up/down keys ([0043d07](https://github.com/antares-sql/antares/commit/0043d077081fc49724722a5d5a74986d990c539d))
-* **UI:** BaseSelect small variant ([5582a12](https://github.com/antares-sql/antares/commit/5582a12bbfade75dbcc7f9d71ada7190ed08d3c2))
-* **UI:** BaseSelect supports disabled options ([f7e04d6](https://github.com/antares-sql/antares/commit/f7e04d633340a53420ce1c434e906c9434620e6e))
-* **UI:** BaseSelect supports option groups ([1869e6a](https://github.com/antares-sql/antares/commit/1869e6a1482daf9381d9ac2244bf0aeffa758edc))
-* **UI:** ForeignKeySelect implements BaseSelect component ([302c664](https://github.com/antares-sql/antares/commit/302c66457deeb50facf4735291640fcf48b78f66))
-* **UI:** initial BaseSelect integration ([22622df](https://github.com/antares-sql/antares/commit/22622df2cfcb71054c6f6110b7ad9d4f635553dc))
-* **UI:** new BaseSelect component ([745d551](https://github.com/antares-sql/antares/commit/745d551cc9253eae4e39e5d3406ceee051a7d6c1))
-* **UI:** select tab replace with BaseSelect component ([42bc919](https://github.com/antares-sql/antares/commit/42bc9196ffc2f64b77f9cb42136255fc74815034))
-
-
-### Bug Fixes
-
-* empty query tab schema select if no schema selected ([31b7999](https://github.com/antares-sql/antares/commit/31b7999bba5d115913d42087614b9888bc761068))
-* exception on app start setting window title ([5b33419](https://github.com/antares-sql/antares/commit/5b33419b6421d7d198a978e79e22d0a76306cdb4))
-* fields sorting in table setting tabs ([77d9cac](https://github.com/antares-sql/antares/commit/77d9cac092fbb806810c3463ca066395fcab5307))
-* inline field update not working with tables missing primary key ([caf776b](https://github.com/antares-sql/antares/commit/caf776bd55606c793c9763c204aa9f05d1feb27f))
-* **Linux:** setting bar tooltip position ([6bad032](https://github.com/antares-sql/antares/commit/6bad032f0d1094736f651b6c06a60d2a0df36c98))
-* main process not closed after window close on some conditions ([23acf00](https://github.com/antares-sql/antares/commit/23acf00def77b5662e48b84591a31760737774a7))
-* **PostgreSQL:** idle timeout disabled ([a082514](https://github.com/antares-sql/antares/commit/a082514f88040c7e0ffdf4e8357bab45370a4c39))
-* query tab content disappears reordering or closing other tabs, closes [#261](https://github.com/antares-sql/antares/issues/261) ([c5baf2b](https://github.com/antares-sql/antares/commit/c5baf2b0d379fdd28ee8cb907628bbfca940e2f6))
-* reload tab content on tab sort ([d214c1f](https://github.com/antares-sql/antares/commit/d214c1f35ba231a8a01dbe8c0faad07d4b337752))
-* selected foreign key value not visible in the insert row modal ([cba2ce2](https://github.com/antares-sql/antares/commit/cba2ce2e37cedbf0b242cc474b37bf052009ae62))
-* **SQLite:** unable to insert rows with TEXT fields ([a7d5e19](https://github.com/antares-sql/antares/commit/a7d5e1973cd59d7d0ef1e74bdcf44d87fba43559))
-* SSH tunnel connection error with private key, closes [#260](https://github.com/antares-sql/antares/issues/260) ([c826888](https://github.com/antares-sql/antares/commit/c826888b0dd0908958a4f727ddfa642e846269cf))
-* **UI:** BaseSelect keyboard navigation ([7c45203](https://github.com/antares-sql/antares/commit/7c452036368fa0db6b9cde7c35e60a8e57bfece7))
-* **UI:** BaseSelect style ([71b0736](https://github.com/antares-sql/antares/commit/71b0736d0ddbd599ab41cde0a6b0823e2bb7da2f))
-* **UI:** select closes clicking on scrollbar ([8870304](https://github.com/antares-sql/antares/commit/8870304c15346257a90193807b9ae07c1393e3e2))
-* unable to add new table fields ([ee623b0](https://github.com/antares-sql/antares/commit/ee623b0a0f121df0ac53d49d8be437c76ddb8539))
-
-
-### Improvements
-
-* improved precision of MariaDB or MySQL auto detection ([26aad51](https://github.com/antares-sql/antares/commit/26aad519df6ea1bbc7dffbf540193a7b2ed9ae2a))
-* **Linux:** title bar improvements ([85cec05](https://github.com/antares-sql/antares/commit/85cec05f7037a1339ee223554cf127693a527aa1))
-* **UI:** max height for query text area increased ([5d5f1da](https://github.com/antares-sql/antares/commit/5d5f1da97b9adfa743197d8fa0bbb6addd565a7a))
-* **Windows:** title bar improvements ([5fa8bf3](https://github.com/antares-sql/antares/commit/5fa8bf38e433ef2fb31bcb893cd9e75549bd6a49))
-
-### [0.5.6](https://github.com/antares-sql/antares/compare/v0.5.4...v0.5.6) (2022-06-02)
-
-### Bug Fixes
-
-* empty query tab schema select if no schema selected ([31b7999](https://github.com/antares-sql/antares/commit/31b7999bba5d115913d42087614b9888bc761068))
-* inline field update not working with tables missing primary key ([caf776b](https://github.com/antares-sql/antares/commit/caf776bd55606c793c9763c204aa9f05d1feb27f))
-* **SQLite:** unable to insert rows with TEXT fields ([a7d5e19](https://github.com/antares-sql/antares/commit/a7d5e1973cd59d7d0ef1e74bdcf44d87fba43559))
-* **UI:** select closes clicking on scrollbar ([8870304](https://github.com/antares-sql/antares/commit/8870304c15346257a90193807b9ae07c1393e3e2))
-
-
-### Improvements
-
-* improved precision of MariaDB or MySQL auto detection ([26aad51](https://github.com/antares-sql/antares/commit/26aad519df6ea1bbc7dffbf540193a7b2ed9ae2a))
-
 ### [0.5.5](https://github.com/antares-sql/antares/compare/v0.5.4...v0.5.5) (2022-05-24)
 
 

CONTRIBUTING.md

@@ -44,7 +44,8 @@ In this folder is located the structure of Vue frontend application.
 
 ## Build
 
-The command to build Antares SQL locally is `npm run 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
 

README.md

@@ -13,13 +13,12 @@ Antares is an SQL client based on [Electron.js](https://github.com/electron/elec
 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, PostgreSQL and SQLite.  
-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.  
+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 [follow Antares SQL](https://twitter.com/AntaresSQL) on Twitter.  
-🌟 Don't forget to **leave a star** if you appreciate this project.  
+🌟 Don't forget to **leave a star** if you appreciate this project.
-🗳️ Poll: **[Which is the main OS you use Antares on?](https://github.com/antares-sql/antares/discussions/379)**
 
 ## Current key features
 
@@ -34,7 +33,6 @@ We are actively working on it, hoping to provide new cool features, improvements
 - SSH tunnel support.
 - Manual commit mode.
 - Import and export database dumps.
-- Customizable keyboard shortcuts.
 - Dark and light theme.
 - Editor themes.
 
@@ -42,20 +40,20 @@ We are actively working on it, hoping to provide new cool features, improvements
 
 Why are we developing an SQL client when there are a lot of them on the market?  
 The main goal is to develop a **forever 100% free (without paid premium feature)**, full featured, as possible community driven, cross platform and open source alternative, empowered by JavaScript ecosystem.  
-A modern application created with minimalism and simplicity in mind, with features in the right places, not hundreds of tiny buttons, nested tabs or submenues; productivity comes first.  
+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 don't have a budget to spend on annual licenses or certificates. This can result that on some platforms you might need to put in some additional work to install this app.
+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 the `.AppImage` distribution, install from Snap Store, from AUR or from our [PPA repository](https://github.com/antares-sql/antares-ppa).
+On Linux you can simply download and run `.AppImage` distributions, install from Snap Store or from AUR.
 
 ### Windows
 
-On Windows you can choose between downloading the app from Microsoft Store or downloading the `.exe` from our [website](https://antares-sql.app/downloads) or [this github repo](https://github.com/Fabio286/antares/releases/latest). Distributions that are not from Microsoft Store are not signed with a certificate, so to install you need to click on "More info" and then "Run anyway" on SmartScreen prompt.
+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
 
@@ -63,7 +61,7 @@ On macOS you can run `.dmg` distribution following [this guide](https://support.
 
 ## 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/) [<img src="https://developer.microsoft.com/store/badges/images/English_get-it-from-MS.png" style="height: 56px">](https://www.microsoft.com/p/antares-sql-client/9nhtb9sq51r1?cid=storebadge&ocid=badge&rtc=1&activetab=pivot:overviewtab)  
+[![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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.5.16",
+  "version": "0.5.5",
   "description": "A modern, fast and productivity driven SQL client with a focus in UX.",
   "license": "MIT",
   "repository": "https://github.com/antares-sql/antares.git",
@@ -12,17 +12,18 @@
     "compile:main": "webpack --mode=production --config webpack.main.config.js",
     "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
     "compile:renderer": "webpack --mode=production --config webpack.renderer.config.js",
-    "build": "cross-env NODE_ENV=production npm run compile && electron-builder --publish never",
+    "build": "cross-env NODE_ENV=production npm run compile",
-    "build:appx": "npm run build -- --win appx",
+    "build:local": "npm run build && electron-builder",
-    "rebuild:electron": "rimraf ./dist &&  npm run postinstall && npm run devtools:install",
+    "build:appx": "npm run build:local -- --win appx",
+    "rebuild:electron": "rimraf ./dist &&  npm run postinstall",
     "release": "standard-version",
     "release:pre": "npm run release -- --prerelease alpha",
     "devtools:install": "node scripts/devtoolsInstaller",
-    "postinstall": "electron-builder install-app-deps",
+    "postinstall": "electron-builder install-app-deps && npm run devtools:install",
     "test:e2e": "npm run compile && npm run test:e2e-dry",
     "test:e2e-dry": "xvfb-maybe -- playwright test",
-    "lint": "eslint . --ext .js,.ts,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
+    "lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
-    "lint:fix": "eslint . --ext .js,.ts,.vue --fix && stylelint \"./src/**/*.{css,scss,sass,vue}\" --fix",
+    "lint:fix": "eslint . --ext .js,.vue --fix && stylelint \"./src/**/*.{css,scss,sass,vue}\" --fix",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
@@ -64,11 +65,7 @@
       "target": [
         {
           "target": "deb",
-          "arch": [
+          "arch": "x64"
-            "x64",
-            "armv7l",
-            "arm64"
-          ]
         },
         {
           "target": "AppImage",
@@ -79,19 +76,12 @@
           ]
         }
       ],
-      "icon": "assets/linux",
       "category": "Development"
     },
     "appImage": {
       "license": "./LICENSE",
       "category": "Development"
     },
-    "nsis": {
-      "license": "./LICENSE",
-      "installerIcon": "assets/icon.ico",
-      "uninstallerIcon": "assets/icon.ico",
-      "installerHeader": "assets/icon.ico"
-    },
     "portable": {
       "artifactName": "${productName}-${version}-portable.exe"
     },
@@ -121,11 +111,11 @@
   "dependencies": {
     "@electron/remote": "~2.0.1",
     "@faker-js/faker": "~6.1.2",
-    "@mdi/font": "~7.0.96",
+    "@mdi/font": "~6.1.95",
     "@turf/helpers": "~6.5.0",
-    "@vueuse/core": "~8.7.5",
+    "@vscode/vscode-languagedetection": "~1.0.21",
-    "ace-builds": "~1.8.1",
+    "ace-builds": "~1.4.13",
-    "better-sqlite3": "~7.5.1",
+    "better-sqlite3": "~7.5.0",
     "electron-log": "~4.4.1",
     "electron-store": "~8.0.1",
     "electron-updater": "~4.6.5",
@@ -133,20 +123,19 @@
     "encoding": "~0.1.13",
     "leaflet": "~1.7.1",
     "marked": "~4.0.0",
-    "moment": "~2.29.4",
+    "moment": "~2.29.1",
     "mysql2": "~2.3.2",
     "pg": "~8.7.1",
-    "pg-connection-string": "~2.5.0",
     "pg-query-stream": "~4.2.3",
     "pgsql-ast-parser": "~7.2.1",
     "pinia": "~2.0.13",
     "source-map-support": "~0.5.20",
     "spectre.css": "~0.5.9",
-    "sql-formatter": "~8.2.0",
+    "sql-formatter": "~4.0.2",
     "ssh2-promise": "~1.0.2",
     "v-mask": "~2.3.0",
-    "vue": "~3.2.37",
+    "vue": "~3.2.33",
-    "vue-i18n": "~9.2.0",
+    "vue-i18n": "~9.1.9",
     "vuedraggable": "~4.1.0"
   },
   "devDependencies": {
@@ -155,8 +144,6 @@
     "@babel/preset-typescript": "~7.16.7",
     "@playwright/test": "~1.21.1",
     "@types/better-sqlite3": "~7.5.0",
-    "@types/leaflet": "~1.7.9",
-    "@types/marked": "~4.0.3",
     "@types/node": "~17.0.23",
     "@types/pg": "~8.6.5",
     "@typescript-eslint/eslint-plugin": "~5.18.0",
@@ -167,7 +154,7 @@
     "chalk": "~4.1.2",
     "cross-env": "~7.0.2",
     "css-loader": "~6.5.0",
-    "electron": "~19.0.5",
+    "electron": "~17.4.3",
     "electron-builder": "~23.0.3",
     "eslint": "~7.32.0",
     "eslint-config-standard": "~16.0.3",
@@ -181,24 +168,22 @@
     "node-loader": "~2.0.0",
     "playwright": "~1.21.1",
     "playwright-core": "~1.21.1",
-    "postcss-html": "~1.5.0",
     "progress-webpack-plugin": "~1.0.12",
     "rimraf": "~3.0.2",
     "sass": "~1.42.1",
     "sass-loader": "~12.3.0",
     "standard-version": "~9.3.1",
     "style-loader": "~3.3.1",
-    "stylelint": "~14.9.1",
+    "stylelint": "~13.13.1",
-    "stylelint-config-recommended-vue": "~1.4.0",
+    "stylelint-config-standard": "~22.0.0",
-    "stylelint-config-standard": "~26.0.0",
+    "stylelint-scss": "~3.21.0",
-    "stylelint-scss": "~4.3.0",
     "tree-kill": "~1.2.2",
     "ts-loader": "~9.2.8",
     "typescript": "~4.6.3",
     "unzip-crx-3": "~0.2.0",
     "vue-eslint-parser": "~8.3.0",
     "vue-loader": "~16.8.3",
-    "webpack": "~5.72.0",
+    "webpack": "~5.60.0",
     "webpack-cli": "~4.9.1",
     "webpack-dev-server": "~4.4.0",
     "xvfb-maybe": "~0.2.1"

scripts/devRunner.js

@@ -59,7 +59,7 @@ async function restartElectron () {
       console.error(chalk.red(data.toString()));
    });
 
-   electronProcess.on('exit', () => {
+   electronProcess.on('exit', (code, signal) => {
       if (!manualRestart) process.exit(0);
    });
 }
@@ -114,6 +114,7 @@ function startRenderer (callback) {
    });
 
    const server = new WebpackDevServer(compiler, {
+      hot: true,
       port: 9080,
       client: {
          overlay: true,

scripts/devtoolsInstaller.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-check
-// @ts-nocheck
 const fs = require('fs');
 const path = require('path');
 const https = require('https');

src/common/FakerMethods.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export default class {
    static get _methods () {
       return [
@@ -181,7 +180,7 @@ export default class {
             acc[curr.group] = new Set(curr.types);
 
          return acc;
-      }, {} as any);
+      }, {});
 
       const groupsArr = [];
 
@@ -199,12 +198,12 @@ export default class {
       });
    }
 
-   static getGroupsByType (type: string) {
+   static getGroupsByType (type) {
       if (!type) return [];
       return this.getGroups().filter(group => group.types.includes(type));
    }
 
-   static getMethods ({ type, group }: {type: string; group: string}) {
+   static getMethods ({ type, group }) {
       return this._methods.filter(method => method.group === group && method.types.includes(type)).sort((a, b) => {
          if (a.name < b.name)
             return -1;

src/common/customizations/defaults.js

@@ -1,6 +1,4 @@
-import { Customizations } from '../interfaces/customizations';
+module.exports = {
-
-export const defaults: Customizations = {
    // Defaults
    defaultPort: null,
    defaultUser: null,
@@ -31,7 +29,6 @@ export const defaults: Customizations = {
    elementsWrapper: '',
    stringsWrapper: '"',
    tableAdd: false,
-   tableTruncateDisableFKCheck: false,
    viewAdd: false,
    triggerAdd: false,
    triggerFunctionAdd: false,
@@ -71,24 +68,24 @@ export const defaults: Customizations = {
    viewUpdateOption: false,
    procedureDeterministic: false,
    procedureDataAccess: false,
-   procedureSql: null,
+   procedureSql: false,
    procedureContext: false,
    procedureLanguage: false,
    functionDeterministic: false,
    functionDataAccess: false,
-   functionSql: null,
+   functionSql: false,
    functionContext: false,
    functionLanguage: false,
-   triggerSql: null,
+   triggerSql: false,
    triggerStatementInCreation: false,
    triggerMultipleEvents: false,
    triggerTableInName: false,
    triggerUpdateColumns: false,
    triggerOnlyRename: false,
    triggerEnableDisable: false,
-   triggerFunctionSql: null,
+   triggerFunctionSql: false,
-   triggerFunctionlanguages: null,
+   triggerFunctionlanguages: false,
    parametersLength: false,
-   languages: null,
+   languages: false,
    readOnlyMode: false
 };

src/common/customizations/index.js

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

src/common/customizations/index.ts

@@ -1,16 +0,0 @@
-import * as mysql from 'common/customizations/mysql';
-import * as postgresql from 'common/customizations/postgresql';
-import * as sqlite from 'common/customizations/sqlite';
-import { Customizations } from 'common/interfaces/customizations';
-
-export default {
-   maria: mysql.customizations,
-   mysql: mysql.customizations,
-   pg: postgresql.customizations,
-   sqlite: sqlite.customizations
-} as {
-   maria: Customizations;
-   mysql: Customizations;
-   pg: Customizations;
-   sqlite: Customizations;
-};

src/common/customizations/mysql.js

@@ -1,7 +1,6 @@
-import { Customizations } from '../interfaces/customizations';
+const defaults = require('./defaults');
-import { defaults } from './defaults';
 
-export const customizations: Customizations = {
+module.exports = {
    ...defaults,
    // Defaults
    defaultPort: 3306,
@@ -25,10 +24,9 @@ export const customizations: Customizations = {
    functions: true,
    schedulers: true,
    // Settings
-   elementsWrapper: '`',
+   elementsWrapper: '',
    stringsWrapper: '"',
    tableAdd: true,
-   tableTruncateDisableFKCheck: true,
    viewAdd: true,
    triggerAdd: true,
    routineAdd: true,

src/common/customizations/postgresql.js

@@ -1,7 +1,6 @@
-import { Customizations } from '../interfaces/customizations';
+const defaults = require('./defaults');
-import { defaults } from './defaults';
 
-export const customizations: Customizations = {
+module.exports = {
    ...defaults,
    // Defaults
    defaultPort: 5432,

src/common/customizations/sqlite.js

@@ -1,8 +1,4 @@
-import { Customizations } from '../interfaces/customizations';
+module.exports = {
-import { defaults } from './defaults';
-
-export const customizations: Customizations = {
-   ...defaults,
    // Core
    fileConnection: true,
    // Structure

src/common/data-types/mysql.js

@@ -1,6 +1,4 @@
-import { TypesGroup } from 'common/interfaces/antares';
+module.exports = [
-
-export default [
    {
       group: 'integer',
       types: [
@@ -308,4 +306,4 @@ export default [
          }
       ]
    }
-] as TypesGroup[];
+];

src/common/data-types/postgresql.js

@@ -1,6 +1,4 @@
-import { TypesGroup } from 'common/interfaces/antares';
+module.exports = [
-
-export default [
    {
       group: 'integer',
       types: [
@@ -292,4 +290,4 @@ export default [
          }
       ]
    }
-] as TypesGroup[];
+];

src/common/data-types/sqlite.js

@@ -1,6 +1,4 @@
-import { TypesGroup } from 'common/interfaces/antares';
+module.exports = [
-
-export default [
    {
       group: 'integer',
       types: [
@@ -136,4 +134,4 @@ export default [
          }
       ]
    }
-] as TypesGroup[];
+];

src/common/index-types/mysql.js

@@ -1,4 +1,4 @@
-export default [
+module.exports = [
    'PRIMARY',
    'INDEX',
    'UNIQUE',

src/common/index-types/postgresql.js

@@ -1,4 +1,4 @@
-export default [
+module.exports = [
    'PRIMARY',
    'INDEX',
    'UNIQUE'

src/common/index-types/sqlite.js

@@ -1,4 +1,4 @@
-export default [
+module.exports = [
    'PRIMARY',
    'INDEX',
    'UNIQUE'

src/common/interfaces/antares.ts

@@ -14,18 +14,11 @@ export type ClientCode = 'mysql' | 'maria' | 'pg' | 'sqlite'
 export type Exporter = MysqlExporter | PostgreSQLExporter
 export type Importer = MySQLImporter | PostgreSQLImporter
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface IpcResponse<T = any> {
-   status: 'success' | 'error';
-   response?: T;
-}
-
 /**
  * Pasameters needed to create a new Antares connection to a database
  */
 export interface ClientParams {
    client: ClientCode;
-   uid?: string;
    params:
       mysql.ConnectionOptions & {schema: string; ssl?: mysql.SslOptions; ssh?: SSHConfig; readonly: boolean}
       | pg.ClientConfig & {schema: string; ssl?: mysql.SslOptions; ssh?: SSHConfig; readonly: boolean}
@@ -74,34 +67,12 @@ export interface TypeInformations {
    zerofill: boolean;
 }
 
-export interface TypesGroup {
-   group: string;
-   types: TypeInformations[];
-}
-
 // Tables
-export interface TableInfos {
-   name: string;
-   type: string;
-   rows: number;
-   created: Date;
-   updated: Date;
-   engine: string;
-   comment: string;
-   size: number | false;
-   autoIncrement: number;
-   collation: string;
-}
-
-export type TableOptions = Partial<TableInfos>;
-
 export interface TableField {
-   // eslint-disable-next-line camelcase
-   _antares_id?: string;
    name: string;
+   key: string;
    type: string;
    schema: string;
-   table?: string;
    numPrecision?: number;
    numLength?: number;
    datePrecision?: number;
@@ -111,8 +82,7 @@ export interface TableField {
    unsigned?: boolean;
    zerofill?: boolean;
    order?: number;
-   default?: string;
+   default?: number | string;
-   defaultType?: string;
    enumValues?: string;
    charset?: string;
    collation?: string;
@@ -122,16 +92,9 @@ export interface TableField {
    comment?: string;
    after?: string;
    orgName?: string;
-   length?: number | false;
-   alias: string;
-   tableAlias: string;
-   orgTable: string;
-   key?: 'pri' | 'uni' | '';
 }
 
 export interface TableIndex {
-   // eslint-disable-next-line camelcase
-   _antares_id?: string;
    name: string;
    fields: string[];
    type: string;
@@ -144,8 +107,6 @@ export interface TableIndex {
 }
 
 export interface TableForeign {
-   // eslint-disable-next-line camelcase
-   _antares_id?: string;
    constraintName: string;
    refSchema: string;
    table: string;
@@ -157,6 +118,15 @@ export interface TableForeign {
    oldName?: string;
 }
 
+export interface TableOptions {
+   name: string;
+   type?: 'table' | 'view';
+   engine?: string;
+   comment?: string;
+   collation?: string;
+   autoIncrement?: number;
+}
+
 export interface CreateTableParams {
    /** Connection UID */
    uid?: string;
@@ -195,7 +165,6 @@ export interface AlterTableParams {
 }
 
 // Views
-export type ViewInfos = TableInfos
 export interface CreateViewParams {
    schema: string;
    name: string;
@@ -211,19 +180,6 @@ export interface AlterViewParams extends CreateViewParams {
 }
 
 // Triggers
-export interface TriggerInfos {
-   name: string;
-   statement: string;
-   timing: string;
-   definer: string;
-   event: string;
-   table: string;
-   sqlMode: string;
-   created: Date;
-   charset: string;
-   enabled?: boolean;
-}
-
 export interface CreateTriggerParams {
    definer?: string;
    schema: string;
@@ -239,38 +195,13 @@ export interface AlterTriggerParams extends CreateTriggerParams {
 }
 
 // Routines & Functions
-
 export interface FunctionParam {
-   // eslint-disable-next-line camelcase
-   _antares_id: string;
    context: string;
    name: string;
    type: string;
    length: number;
 }
 
-export interface RoutineInfos {
-   name: string;
-   type?: string;
-   definer: string;
-   created?: string;
-   sql?: string;
-   updated?: string;
-   comment?: string;
-   charset?: string;
-   security?: string;
-   language?: string;
-   dataAccess?: string;
-   deterministic?: boolean;
-   parameters?: FunctionParam[];
-   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-   returns?: any;
-   returnsLength?: number;
-}
-
-export type FunctionInfos = RoutineInfos
-export type TriggerFunctionInfos = FunctionInfos
-
 export interface CreateRoutineParams {
    name: string;
    parameters?: FunctionParam[];
@@ -308,7 +239,7 @@ export interface AlterFunctionParams extends CreateFunctionParams {
 }
 
 // Events
-export interface EventInfos {
+export interface CreateEventParams {
    definer?: string;
    schema: string;
    name: string;
@@ -317,39 +248,16 @@ export interface EventInfos {
    starts: string;
    ends: string;
    at: string;
-   preserve: boolean;
+   preserve: string;
    state: string;
    comment: string;
-   enabled?: boolean;
    sql: string;
 }
 
-export type CreateEventParams = EventInfos;
-
 export interface AlterEventParams extends CreateEventParams {
    oldName?: string;
 }
 
-// Schema
-export interface SchemaInfos {
-   name: string;
-   size: number;
-   tables: TableInfos[];
-   functions: FunctionInfos[];
-   procedures: RoutineInfos[];
-   triggers: TriggerInfos[];
-   schedulers: EventInfos[];
-}
-
-export interface CollationInfos {
-   charset: string;
-   collation: string;
-   compiled: boolean;
-   default: boolean;
-   id: string | number;
-   sortLen: number;
-}
-
 // Query
 export interface QueryBuilderObject {
    schema: string;
@@ -377,10 +285,17 @@ export interface QueryParams {
    tabUid?: string;
 }
 
-/**
+export interface QueryField {
- * @deprecated Use TableFIeld
+   name: string;
- */
+   alias: string;
-export type QueryField = TableField
+   orgName: string;
+   schema: string;
+   table: string;
+   tableAlias: string;
+   orgTable: string;
+   type: string;
+   length: number;
+}
 
 export interface QueryForeign {
    schema: string;

src/common/interfaces/customizations.ts

@@ -1,92 +0,0 @@
-export interface Customizations {
-   // Defaults
-   defaultPort?: number;
-   defaultUser?: string;
-   defaultDatabase?: string;
-   // Core
-   database?: boolean;
-   collations?: boolean;
-   engines?: boolean;
-   connectionSchema?: boolean;
-   sslConnection?: boolean;
-   sshConnection?: boolean;
-   fileConnection?: boolean;
-   cancelQueries?: boolean;
-   // Tools
-   processesList?: boolean;
-   usersManagement?: boolean;
-   variables?: boolean;
-   // Structure
-   schemas?: boolean;
-   tables?: boolean;
-   views?: boolean;
-   triggers?: boolean;
-   triggerFunctions?: boolean;
-   routines?: boolean;
-   functions?: boolean;
-   schedulers?: boolean;
-   // Settings
-   elementsWrapper: string;
-   stringsWrapper: string;
-   tableAdd?: boolean;
-   tableSettings?: boolean;
-   tableOptions?: boolean;
-   tableArray?: boolean;
-   tableRealCount?: boolean;
-   tableTruncateDisableFKCheck?: boolean;
-   viewAdd?: boolean;
-   viewSettings?: boolean;
-   triggerAdd?: boolean;
-   triggerFunctionAdd?: boolean;
-   routineAdd?: boolean;
-   functionAdd?: boolean;
-   schedulerAdd?: boolean;
-   databaseEdit?: boolean;
-   schemaEdit?: boolean;
-   schemaDrop?: boolean;
-   schemaExport?: boolean;
-   exportByChunks?: boolean;
-   schemaImport?: boolean;
-   triggerSettings?: boolean;
-   triggerFunctionSettings?: boolean;
-   routineSettings?: boolean;
-   functionSettings?: boolean;
-   schedulerSettings?: boolean;
-   indexes?: boolean;
-   foreigns?: boolean;
-   sortableFields?: boolean;
-   unsigned?: boolean;
-   nullable?: boolean;
-   nullablePrimary?: boolean;
-   zerofill?: boolean;
-   autoIncrement?: boolean;
-   comment?: boolean;
-   collation?: boolean;
-   definer?: boolean;
-   onUpdate?: boolean;
-   viewAlgorithm?: boolean;
-   viewSqlSecurity?: boolean;
-   viewUpdateOption?: boolean;
-   procedureDeterministic?: boolean;
-   procedureDataAccess?: boolean;
-   procedureSql?: string;
-   procedureContext?: boolean;
-   procedureLanguage?: boolean;
-   functionDeterministic?: boolean;
-   functionDataAccess?: boolean;
-   functionSql?: string;
-   functionContext?: boolean;
-   functionLanguage?: boolean;
-   triggerSql?: string;
-   triggerStatementInCreation?: boolean;
-   triggerMultipleEvents?: boolean;
-   triggerTableInName?: boolean;
-   triggerUpdateColumns?: boolean;
-   triggerOnlyRename?: boolean;
-   triggerEnableDisable?: boolean;
-   triggerFunctionSql?: string;
-   triggerFunctionlanguages?: string[];
-   parametersLength?: boolean;
-   languages?: string[];
-   readOnlyMode?: boolean;
-}

src/common/interfaces/exporter.ts

@@ -7,13 +7,13 @@ export interface TableParams {
 
 export interface ExportOptions {
    schema: string;
-   tables: {
+   includes: {
-      table: string;
+      functions: boolean;
-      includeStructure: boolean;
+      views: boolean;
-      includeContent: boolean;
+      triggers: boolean;
-      includeDropStatement: boolean;
+      routines: boolean;
-   }[];
+      schedulers: boolean;
-   includes: {[key: string]: boolean};
+   };
    outputFormat: 'sql' | 'sql.zip';
    outputFile: string;
    sqlInsertAfter: number;

src/common/interfaces/tableApis.ts

@@ -1,34 +1,5 @@
 import { UsableLocale } from '@faker-js/faker';
 
-export interface TableUpdateParams {
-   uid: string;
-   schema: string;
-   table: string;
-   primary?: string;
-   id: number | string;
-   content: number | string | boolean | Date | Blob | null;
-   type: string;
-   field: string;
-}
-
-export interface TableDeleteParams {
-   uid: string;
-   schema: string;
-   table: string;
-   primary?: string;
-   field: string;
-   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-   rows: {[key: string]: any};
-}
-
-export interface TableFilterClausole {
-   active: boolean;
-   field: string;
-   op: '=' | '!=' | '>' | '<' | '>=' | '<=' | 'IN' | 'NOT IN' | 'LIKE' | 'BETWEEN' | 'IS NULL' | 'IS NOT NULL';
-   value: '';
-   value2: '';
-}
-
 export interface InsertRowsParams {
    uid: string;
    schema: string;

src/common/libs/bufferToBase64.js

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

src/common/libs/bufferToBase64.ts

@@ -1,6 +0,0 @@
-export function bufferToBase64 (buf: Buffer) {
-   const binstr = Array.prototype.map.call(buf, (ch: number) => {
-      return String.fromCharCode(ch);
-   }).join('');
-   return Buffer.from(binstr, 'binary').toString('base64');
-}

src/common/libs/formatBytes.js

@@ -1,4 +1,5 @@
-export function formatBytes (bytes: number, decimals = 2) {
+'use strict';
+export function formatBytes (bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
 
    const k = 1024;

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/common/libs/getArrayDepth.ts

@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export function getArrayDepth (array: any[]): number {
-   return Array.isArray(array)
-      ? 1 + Math.max(0, ...array.map(getArrayDepth))
-      : 0;
-}

src/common/libs/hexToBinary.js

@@ -1,3 +1,5 @@
+'use strict';
+
 const lookup = {
    0: '0000',
    1: '0001',
@@ -21,11 +23,15 @@ const lookup = {
    D: '1101',
    E: '1110',
    F: '1111'
-} as const;
+};
 
-export type HexChar = keyof typeof lookup
+/**
-
+ * Converts hexadecimal string to binary string
-export default function hexToBinary (hex: HexChar[]) {
+ *
+ * @param {string} hex Hexadecimal string
+ * @returns {string} Binary string
+ */
+export default function hexToBinary (hex) {
    let binary = '';
    for (let i = 0; i < hex.length; i++)
       binary += lookup[hex[i]];

src/common/libs/langDetector.ts

@@ -1,192 +0,0 @@
-function isJSON (str: string) {
-   try {
-      if (!['{', '['].includes(str.trim()[0]))
-         return false;
-
-      JSON.parse(str);
-      return true;
-   }
-   catch (_) {
-      return false;
-   }
-}
-
-function isHTML (str: string) {
-   const tags = [
-      'a',
-      'abbr',
-      'address',
-      'area',
-      'article',
-      'aside',
-      'audio',
-      'b',
-      'base',
-      'bdi',
-      'bdo',
-      'blockquote',
-      'body',
-      'br',
-      'button',
-      'canvas',
-      'caption',
-      'cite',
-      'code',
-      'col',
-      'colgroup',
-      'data',
-      'datalist',
-      'dd',
-      'del',
-      'details',
-      'dfn',
-      'dialog',
-      'div',
-      'dl',
-      'dt',
-      'em',
-      'embed',
-      'fieldset',
-      'figcaption',
-      'figure',
-      'footer',
-      'form',
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'head',
-      'header',
-      'hgroup',
-      'hr',
-      'html',
-      'i',
-      'iframe',
-      'img',
-      'input',
-      'ins',
-      'kbd',
-      'label',
-      'legend',
-      'li',
-      'link',
-      'main',
-      'map',
-      'mark',
-      'math',
-      'menu',
-      'menuitem',
-      'meta',
-      'meter',
-      'nav',
-      'noscript',
-      'object',
-      'ol',
-      'optgroup',
-      'option',
-      'output',
-      'p',
-      'param',
-      'picture',
-      'pre',
-      'progress',
-      'q',
-      'rb',
-      'rp',
-      'rt',
-      'rtc',
-      'ruby',
-      's',
-      'samp',
-      'script',
-      'section',
-      'select',
-      'slot',
-      'small',
-      'source',
-      'span',
-      'strong',
-      'style',
-      'sub',
-      'summary',
-      'sup',
-      'svg',
-      'table',
-      'tbody',
-      'td',
-      'template',
-      'textarea',
-      'tfoot',
-      'th',
-      'thead',
-      'time',
-      'title',
-      'tr',
-      'track',
-      'u',
-      'ul',
-      'var',
-      'video',
-      'wbr'
-   ];
-   const doc = new DOMParser().parseFromString(str, 'text/html');
-   const lowerStr = str.toLowerCase();
-   if (Array.from(doc.body.childNodes).some(node => node.nodeType === 1))
-      return tags.some((tag) => lowerStr.includes(`<${tag}>`));
-
-   return false;
-}
-
-function isSVG (str: string) {
-   const doc = new DOMParser().parseFromString(str, 'text/xml');
-   const lowerStr = str.toLowerCase();
-   const errorNode = doc.querySelector('parsererror');
-   if (!errorNode)
-      return lowerStr.includes('<svg');
-   return false;
-}
-
-function isXML (str: string) {
-   const doc = new DOMParser().parseFromString(str, 'text/xml');
-   const errorNode = doc.querySelector('parsererror');
-   return !errorNode;
-}
-
-function isMD (str: string) {
-   const mdChecks = [
-      '# ',
-      '`',
-      '- ',
-      '+ ',
-      '* ',
-      '1. ',
-      '**',
-      '__',
-      '~~',
-      '>> ',
-      '](http',
-      '![',
-      '[ ]',
-      '[x]'
-   ];
-
-   return mdChecks.some((tag) => str.includes(tag));
-}
-
-export function langDetector (str: string) {
-   if (!str.trim().length)
-      return 'text';
-   if (isJSON(str))
-      return 'json';
-   if (isHTML(str))
-      return 'html';
-   if (isSVG(str))
-      return 'svg';
-   if (isXML(str))
-      return 'xml';
-   if (isMD(str))
-      return 'markdown';
-   return 'text';
-}

src/common/libs/mimeFromHex.js

@@ -1,4 +1,5 @@
-export function mimeFromHex (hex: string) {
+'use strict';
+export function mimeFromHex (hex) {
    switch (hex.substring(0, 4)) { // 2 bytes
       case '424D':
          return { ext: 'bmp', mime: 'image/bmp' };
@@ -22,7 +23,7 @@ export function mimeFromHex (hex: string) {
             case '425A68':
                return { ext: 'bz2', mime: 'application/x-bzip2' };
             default:
-               switch (hex) { // 4 bites
+               switch (hex) { // 4 bytes
                   case '89504E47':
                      return { ext: 'png', mime: 'image/png' };
                   case '47494638':

src/common/libs/sqlEscaper.js

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

src/common/libs/sqlUtils.ts

@@ -1,162 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-useless-escape */
-import * as moment from 'moment';
-import { lineString, point, polygon } from '@turf/helpers';
-import customizations from '../customizations';
-import { ClientCode } from '../interfaces/antares';
-import { BLOB, BIT, DATE, DATETIME, FLOAT, SPATIAL, IS_MULTI_SPATIAL, NUMBER, TEXT_SEARCH } from 'common/fieldTypes';
-import hexToBinary, { HexChar } from './hexToBinary';
-import { getArrayDepth } from './getArrayDepth';
-
-/**
- * Escapes a string fo SQL use
- *
- * @param { String } string
- * @returns { String } Escaped string
- */
-export const sqlEscaper = (string: string): string => {
-   // eslint-disable-next-line no-control-regex
-   const pattern = /[\0\x08\x09\x1a\n\r"'\\\%]/gm;
-   const regex = new RegExp(pattern);
-   return string.replace(regex, char => {
-      const m = ['\\0', '\\x08', '\\x09', '\\x1a', '\\n', '\\r', '\'', '\"', '\\', '\\\\', '%'];
-      const r = ['\\\\0', '\\\\b', '\\\\t', '\\\\z', '\\\\n', '\\\\r', '\\\'', '\\\"', '\\\\', '\\\\\\\\', '\%'];
-      return r[m.indexOf(char)] || char;
-   });
-};
-
-export const objectToGeoJSON = (val: any) => {
-   if (Array.isArray(val)) {
-      if (getArrayDepth(val) === 1)
-         return lineString(val.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
-      else
-         return polygon(val.map(arr => arr.reduce((acc: any, curr: any) => [...acc, [curr.x, curr.y]], [])));
-   }
-   else
-      return point([val.x, val.y]);
-};
-
-export const escapeAndQuote = (val: string, client: ClientCode) => {
-   const { stringsWrapper: sw } = customizations[client];
-   // eslint-disable-next-line no-control-regex
-   const CHARS_TO_ESCAPE = /[\0\b\t\n\r\x1a"'\\]/g;
-   const CHARS_ESCAPE_MAP: {[key: string]: string} = {
-      '\0': '\\0',
-      '\b': '\\b',
-      '\t': '\\t',
-      '\n': '\\n',
-      '\r': '\\r',
-      '\x1a': '\\Z',
-      '"': '\\"',
-      '\'': '\\\'',
-      '\\': '\\\\'
-   };
-   let chunkIndex = CHARS_TO_ESCAPE.lastIndex = 0;
-   let escapedVal = '';
-   let match;
-
-   while ((match = CHARS_TO_ESCAPE.exec(val))) {
-      escapedVal += val.slice(chunkIndex, match.index) + CHARS_ESCAPE_MAP[match[0]];
-      chunkIndex = CHARS_TO_ESCAPE.lastIndex;
-   }
-
-   if (chunkIndex === 0)
-      return `${sw}${val}${sw}`;
-
-   if (chunkIndex < val.length)
-      return `${sw}${escapedVal + val.slice(chunkIndex)}${sw}`;
-
-   return `${sw}${escapedVal}${sw}`;
-};
-
-export const valueToSqlString = (args: {
-      val: any;
-      client: ClientCode;
-      field: {type: string; datePrecision: number};
-   }): string => {
-   let parsedValue;
-   const { val, client, field } = args;
-   const { stringsWrapper: sw } = customizations[client];
-
-   if (val === null)
-      parsedValue = 'NULL';
-   else if (DATE.includes(field.type)) {
-      parsedValue = moment(val).isValid()
-         ? escapeAndQuote(moment(val).format('YYYY-MM-DD'), client)
-         : val;
-   }
-   else if (DATETIME.includes(field.type)) {
-      let datePrecision = '';
-      for (let i = 0; i < field.datePrecision; i++)
-         datePrecision += i === 0 ? '.S' : 'S';
-
-      parsedValue = moment(val).isValid()
-         ? escapeAndQuote(moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`), client)
-         : escapeAndQuote(val, client);
-   }
-   else if ('isArray' in field) {
-      let localVal;
-      if (Array.isArray(val))
-         localVal = JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
-      else
-         localVal = typeof val === 'string' ? val.replaceAll('[', '{').replaceAll(']', '}') : '';
-      parsedValue = `'${localVal}'`;
-   }
-   else if (TEXT_SEARCH.includes(field.type))
-      parsedValue = `'${val.replaceAll('\'', '\'\'')}'`;
-   else if (BIT.includes(field.type))
-      parsedValue = `b'${hexToBinary(Buffer.from(val).toString('hex') as undefined as HexChar[])}'`;
-   else if (BLOB.includes(field.type)) {
-      if (['mysql', 'maria'].includes(client))
-         parsedValue = `X'${val.toString('hex').toUpperCase()}'`;
-      else if (client === 'pg')
-         parsedValue = `decode('${val.toString('hex').toUpperCase()}', 'hex')`;
-   }
-   else if (NUMBER.includes(field.type))
-      parsedValue = val;
-   else if (FLOAT.includes(field.type))
-      parsedValue = parseFloat(val);
-   else if (SPATIAL.includes(field.type)) {
-      let geoJson;
-      if (IS_MULTI_SPATIAL.includes(field.type)) {
-         const features = [];
-         for (const element of val)
-            features.push(objectToGeoJSON(element));
-
-         geoJson = {
-            type: 'FeatureCollection',
-            features
-         };
-      }
-      else
-         geoJson = objectToGeoJSON(val);
-
-      parsedValue = `ST_GeomFromGeoJSON('${JSON.stringify(geoJson)}')`;
-   }
-   else if (val === '') parsedValue = `${sw}${sw}`;
-   else {
-      parsedValue = typeof val === 'string'
-         ? escapeAndQuote(val, client)
-         : typeof val === 'object'
-            ? escapeAndQuote(JSON.stringify(val), client)
-            : val;
-   }
-
-   return parsedValue;
-};
-
-export const jsonToSqlInsert = (args: {
-      json: { [key: string]: any};
-      client: ClientCode;
-      fields: { [key: string]: {type: string; datePrecision: number}};
-      table: string;
-   }) => {
-   const { client, json, fields, table } = args;
-   const { elementsWrapper: ew } = customizations[client];
-   const fieldNames = Object.keys(json).map(key => `${ew}${key}${ew}`);
-   const values = Object.keys(json).map(key => (
-      valueToSqlString({ val: json[key], client, field: fields[key] })
-   ));
-
-   return `INSERT INTO ${ew}${table}${ew} (${fieldNames.join(', ')}) VALUES (${values.join(', ')});`;
-};

src/common/libs/uidGen.js

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

src/common/libs/uidGen.ts

@@ -1,3 +0,0 @@
-export function uidGen (prefix?: string) {
-   return (prefix ? `${prefix}:` : '') + Math.random().toString(36).substr(2, 9).toUpperCase();
-}

src/common/shortcuts.ts

@@ -1,138 +0,0 @@
-export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string | number; context?: 'tab' }} = {
-   'run-or-reload': { l18n: 'message.runOrReload', context: 'tab' },
-   'open-new-tab': { l18n: 'message.openNewTab', context: 'tab' },
-   'close-tab': { l18n: 'message.closeTab', context: 'tab' },
-   'format-query': { l18n: 'message.formatQuery', context: 'tab' },
-   'kill-query': { l18n: 'message.killQuery', context: 'tab' },
-   'query-history': { l18n: 'message.queryHistory', context: 'tab' },
-   'clear-query': { l18n: 'message.clearQuery', context: 'tab' },
-   'next-tab': { l18n: 'message.nextTab' },
-   'prev-tab': { l18n: 'message.previousTab' },
-   'open-all-connections': { l18n: 'message.openAllConnections' },
-   'open-filter': { l18n: 'message.openFilter' },
-   'next-page': { l18n: 'message.nextResultsPage' },
-   'prev-page': { l18n: 'message.previousResultsPage' },
-   'toggle-console': { l18n: 'message.toggleConsole' },
-   'save-content': { l18n: 'message.saveContent' },
-   'create-connection': { l18n: 'message.createNewConnection' },
-   'open-settings': { l18n: 'message.openSettings' },
-   'open-scratchpad': { l18n: 'message.openScratchpad' }
-};
-
-interface ShortcutRecord {
-   event: string;
-   keys: Electron.Accelerator[] | string[];
-   /** Needed for default shortcuts */
-   os: NodeJS.Platform[];
-}
-
-/**
- * Default shortcuts
- */
-const shortcuts: ShortcutRecord[] = [
-   {
-      event: 'run-or-reload',
-      keys: ['F5'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'save-content',
-      keys: ['CommandOrControl+S'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'kill-query',
-      keys: ['CommandOrControl+K'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'format-query',
-      keys: ['CommandOrControl+B'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'clear-query',
-      keys: ['CommandOrControl+Alt+W'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'query-history',
-      keys: ['CommandOrControl+G'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'open-new-tab',
-      keys: ['CommandOrControl+T'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'close-tab',
-      keys: ['CommandOrControl+W'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'next-tab',
-      keys: ['Alt+CommandOrControl+Right'],
-      os: ['darwin', 'win32']
-   },
-   {
-      event: 'prev-tab',
-      keys: ['Alt+CommandOrControl+Left'],
-      os: ['darwin', 'win32']
-   },
-   {
-      event: 'next-tab',
-      keys: ['CommandOrControl+PageDown'],
-      os: ['linux', 'win32']
-   },
-   {
-      event: 'prev-tab',
-      keys: ['CommandOrControl+PageUp'],
-      os: ['linux', 'win32']
-   },
-   {
-      event: 'open-filter',
-      keys: ['CommandOrControl+F'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'next-page',
-      keys: ['CommandOrControl+Right'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'prev-page',
-      keys: ['CommandOrControl+Left'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'open-all-connections',
-      keys: ['Shift+CommandOrControl+Space'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'toggle-console',
-      keys: ['CommandOrControl+F12'],
-      os: ['darwin', 'linux', 'win32']
-   },
-   {
-      event: 'toggle-console',
-      keys: ['CommandOrControl+`'],
-      os: ['darwin', 'linux', 'win32']
-   }
-];
-
-for (let i = 1; i <= 9; i++) {
-   shortcutEvents[`select-tab-${i}`] = {
-      l18n: 'message.selectTabNumber',
-      l18nParam: i
-   };
-
-   shortcuts.push({
-      event: `select-tab-${i}`,
-      keys: [`CommandOrControl+${i}`],
-      os: ['darwin', 'linux', 'win32']
-   });
-}
-
-export { shortcuts, ShortcutRecord };

src/main/ipc-handlers/application.ts

@@ -1,11 +1,15 @@
 import { app, ipcMain, dialog } from 'electron';
-import { ShortcutRegister } from '../libs/ShortcutRegister';
 
 export default () => {
    ipcMain.on('close-app', () => {
       app.exit();
    });
 
+   ipcMain.on('get-key', async event => {
+      const key = false;
+      event.returnValue = key;
+   });
+
    ipcMain.handle('show-open-dialog', (event, options) => {
       return dialog.showOpenDialog(options);
    });
@@ -13,24 +17,4 @@ export default () => {
    ipcMain.handle('get-download-dir-path', () => {
       return app.getPath('downloads');
    });
-
-   ipcMain.handle('resotre-default-shortcuts', () => {
-      const shortCutRegister = ShortcutRegister.getInstance();
-      shortCutRegister.restoreDefaults();
-   });
-
-   ipcMain.handle('reload-shortcuts', () => {
-      const shortCutRegister = ShortcutRegister.getInstance();
-      shortCutRegister.reload();
-   });
-
-   ipcMain.handle('update-shortcuts', (event, shortcuts) => {
-      const shortCutRegister = ShortcutRegister.getInstance();
-      shortCutRegister.updateShortcuts(shortcuts);
-   });
-
-   ipcMain.handle('unregister-shortcuts', () => {
-      const shortCutRegister = ShortcutRegister.getInstance();
-      shortCutRegister.unregister();
-   });
 };

src/main/ipc-handlers/connection.ts

@@ -55,7 +55,6 @@ export default (connections: {[key: string]: antares.Client}) => {
 
       try {
          const connection = await ClientsFactory.getClient({
-            uid: conn.uid,
             client: conn.client,
             params
          });
@@ -129,7 +128,6 @@ export default (connections: {[key: string]: antares.Client}) => {
 
       try {
          const connection = ClientsFactory.getClient({
-            uid: conn.uid,
             client: conn.client,
             params,
             poolSize: 5

src/main/ipc-handlers/schema.ts

@@ -172,10 +172,7 @@ export default (connections: {[key: string]: antares.Client}) => {
    });
 
    ipcMain.handle('export', (event, { uid, type, tables, ...rest }) => {
-      if (exporter !== null) {
+      if (exporter !== null) return;
-         exporter.kill();
-         return;
-      }
 
       return new Promise((resolve/*, reject */) => {
          (async () => {
@@ -268,10 +265,7 @@ export default (connections: {[key: string]: antares.Client}) => {
    });
 
    ipcMain.handle('import-sql', async (event, options) => {
-      if (importer !== null) {
+      if (importer !== null) return;
-         importer.kill();
-         return;
-      }
 
       return new Promise((resolve/*, reject */) => {
          (async () => {

src/main/ipc-handlers/tables.ts

@@ -1,12 +1,12 @@
-import * as fs from 'fs';
 import * as antares from 'common/interfaces/antares';
 import { InsertRowsParams } from 'common/interfaces/tableApis';
 import { ipcMain } from 'electron';
 import { faker } from '@faker-js/faker';
 import * as moment from 'moment';
-import { sqlEscaper } from 'common/libs/sqlUtils';
+import { sqlEscaper } from 'common/libs/sqlEscaper';
 import { TEXT, LONG_TEXT, ARRAY, TEXT_SEARCH, NUMBER, FLOAT, BLOB, BIT, DATE, DATETIME } from 'common/fieldTypes';
-import customizations from 'common/customizations';
+import * as customizations from 'common/customizations';
+import fs from 'fs';
 
 export default (connections: {[key: string]: antares.Client}) => {
    ipcMain.handle('get-table-columns', async (event, params) => {
@@ -104,6 +104,8 @@ export default (connections: {[key: string]: antares.Client}) => {
                   escapedParam = `"${sqlEscaper(params.content)}"`;
                   break;
                case 'pg':
+                  escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
+                  break;
                case 'sqlite':
                   escapedParam = `'${params.content.replaceAll('\'', '\'\'')}'`;
                   break;
@@ -169,18 +171,13 @@ export default (connections: {[key: string]: antares.Client}) => {
          }
          else {
             const { orgRow } = params;
-            delete orgRow._antares_id;
-
             reload = true;
 
             for (const key in orgRow) {
                if (typeof orgRow[key] === 'string')
                   orgRow[key] = `'${orgRow[key]}'`;
 
-               if (orgRow[key] === null)
+               orgRow[key] = `= ${orgRow[key]}`;
-                  orgRow[key] = `IS ${orgRow[key]}`;
-               else
-                  orgRow[key] = `= ${orgRow[key]}`;
             }
 
             await connections[params.uid]
@@ -249,12 +246,84 @@ export default (connections: {[key: string]: antares.Client}) => {
       }
    });
 
+   ipcMain.handle('insert-table-rows', async (event, params) => {
+      try { // TODO: move to client classes
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         const insertObj: {[key: string]: any} = {};
+         for (const key in params.row) {
+            const type = params.fields[key];
+            let escapedParam;
+
+            if (params.row[key] === null)
+               escapedParam = 'NULL';
+            else if ([...NUMBER, ...FLOAT].includes(type))
+               escapedParam = +params.row[key];
+            else if ([...TEXT, ...LONG_TEXT].includes(type)) {
+               switch (connections[params.uid]._client) {
+                  case 'mysql':
+                  case 'maria':
+                     escapedParam = `"${sqlEscaper(params.row[key].value)}"`;
+                     break;
+                  case 'pg':
+                     escapedParam = `'${params.row[key].value.replaceAll('\'', '\'\'')}'`;
+                     break;
+               }
+            }
+            else if (BLOB.includes(type)) {
+               if (params.row[key].value) {
+                  let fileBlob;
+
+                  switch (connections[params.uid]._client) {
+                     case 'mysql':
+                     case 'maria':
+                        fileBlob = fs.readFileSync(params.row[key].value);
+                        escapedParam = `0x${fileBlob.toString('hex')}`;
+                        break;
+                     case 'pg':
+                        fileBlob = fs.readFileSync(params.row[key].value);
+                        escapedParam = `decode('${fileBlob.toString('hex')}', 'hex')`;
+                        break;
+                  }
+               }
+               else {
+                  switch (connections[params.uid]._client) {
+                     case 'mysql':
+                     case 'maria':
+                        escapedParam = '""';
+                        break;
+                     case 'pg':
+                        escapedParam = 'decode(\'\', \'hex\')';
+                        break;
+                  }
+               }
+            }
+
+            insertObj[key] = escapedParam;
+         }
+
+         const rows = new Array(+params.repeat).fill(insertObj);
+
+         await connections[params.uid]
+            .schema(params.schema)
+            .into(params.table)
+            .insert(rows)
+            .run();
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
    ipcMain.handle('insert-table-fake-rows', async (event, params: InsertRowsParams) => {
       try { // TODO: move to client classes
-         const rows: {[key: string]: string | number | boolean | Date | Buffer}[] = [];
+         // eslint-disable-next-line @typescript-eslint/no-explicit-any
+         const rows: {[key: string]: any}[] = [];
 
          for (let i = 0; i < +params.repeat; i++) {
-            const insertObj: {[key: string]: string | number | boolean | Date | Buffer} = {};
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const insertObj: {[key: string]: any} = {};
 
             for (const key in params.row) {
                const type = params.fields[key];
@@ -272,7 +341,6 @@ export default (connections: {[key: string]: antares.Client}) => {
                            escapedParam = `"${sqlEscaper(params.row[key].value)}"`;
                            break;
                         case 'pg':
-                        case 'sqlite':
                            escapedParam = `'${params.row[key].value.replaceAll('\'', '\'\'')}'`;
                            break;
                      }
@@ -313,7 +381,8 @@ export default (connections: {[key: string]: antares.Client}) => {
                   insertObj[key] = escapedParam;
                }
                else { // Faker value
-                  const parsedParams: {[key: string]: string | number | boolean | Date | Buffer} = {};
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  const parsedParams: {[key: string]: any} = {};
                   let fakeValue;
 
                   if (params.locale)
@@ -333,7 +402,7 @@ export default (connections: {[key: string]: antares.Client}) => {
 
                   if (typeof fakeValue === 'string') {
                      if (params.row[key].length)
-                        fakeValue = fakeValue.substring(0, params.row[key].length);
+                        fakeValue = fakeValue.substr(0, params.row[key].length);
                      fakeValue = `'${sqlEscaper(fakeValue)}'`;
                   }
                   else if ([...DATE, ...DATETIME].includes(type))

src/main/ipc-handlers/updates.ts

@@ -1,7 +1,7 @@
 import { ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
-import * as Store from 'electron-store';
+import Store from 'electron-store';
-const persistentStore = new Store({ name: 'settings', clearInvalidConfig: true });
+const persistentStore = new Store({ name: 'settings' });
 const isMacOS = process.platform === 'darwin';
 
 let mainWindow: Electron.IpcMainEvent;

src/main/libs/AntaresCore.ts

@@ -3,14 +3,10 @@ import mysql from 'mysql2/promise';
 import * as pg from 'pg';
 import SSH2Promise from 'ssh2-promise';
 
-const queryLogger = ({ sql, cUid }: {sql: string; cUid: string}) => {
+const queryLogger = (sql: string) => {
    // Remove comments, newlines and multiple spaces
    const escapedSql = sql.replace(/(\/\*(.|[\r\n])*?\*\/)|(--(.*|[\r\n]))/gm, '').replace(/\s\s+/g, ' ');
-   if (process.type !== undefined) {
+   console.log(escapedSql);
-      const mainWindow = require('electron').webContents.fromId(1);
-      mainWindow.send('query-log', { cUid, sql: escapedSql, date: new Date() });
-   }
-   if (process.env.NODE_ENV === 'development') console.log(escapedSql);
 };
 
 /**
@@ -18,17 +14,15 @@ const queryLogger = ({ sql, cUid }: {sql: string; cUid: string}) => {
  */
 export class AntaresCore {
    _client: antares.ClientCode;
-   protected _cUid: string
    protected _params: mysql.ConnectionOptions | pg.ClientConfig | { databasePath: string; readonly: boolean};
    protected _poolSize: number;
    protected _ssh?: SSH2Promise;
-   protected _logger: (args: {sql: string; cUid: string}) => void;
+   protected _logger: (sql: string) => void;
    protected _queryDefaults: antares.QueryBuilderObject;
    protected _query: antares.QueryBuilderObject;
 
    constructor (args: antares.ClientParams) {
       this._client = args.client;
-      this._cUid = args.uid;
       this._params = args.params;
       this._poolSize = args.poolSize || undefined;
       this._logger = args.logger || queryLogger;

src/main/libs/ShortcutRegister.ts

@@ -1,138 +0,0 @@
-import { BrowserWindow, globalShortcut, Menu, MenuItem, MenuItemConstructorOptions } from 'electron';
-import * as Store from 'electron-store';
-import { ShortcutRecord, shortcuts } from 'common/shortcuts';
-
-const shortcutsStore = new Store({ name: 'shortcuts' });
-const isDevelopment = process.env.NODE_ENV !== 'production';
-const defaultShortcuts = shortcuts.filter(s => s.os.includes(process.platform));
-
-export type ShortcutMode = 'local' | 'global'
-export type OsMenu = {
-   [key in NodeJS.Platform]?: MenuItemConstructorOptions[];
-};
-
-export class ShortcutRegister {
-   private _shortcuts: ShortcutRecord[];
-   private _mainWindow: BrowserWindow;
-   private _menu: Menu;
-   private _menuTemplate: OsMenu;
-   private _mode: ShortcutMode;
-   private static _instance: ShortcutRegister;
-
-   private constructor (args: { mainWindow: BrowserWindow; menuTemplate?: OsMenu; mode: ShortcutMode }) {
-      this._mainWindow = args.mainWindow;
-      this._menuTemplate = args.menuTemplate || {};
-      this._mode = args.mode;
-      this.shortcuts = shortcutsStore.get('shortcuts', defaultShortcuts) as ShortcutRecord[];
-   }
-
-   public static getInstance (args?: { mainWindow?: BrowserWindow; menuTemplate?: OsMenu; mode?: ShortcutMode }) {
-      if (!ShortcutRegister._instance && args.menuTemplate !== undefined && args.mode !== undefined) {
-         ShortcutRegister._instance = new ShortcutRegister({
-            mainWindow: args.mainWindow,
-            menuTemplate: args.menuTemplate,
-            mode: args.mode
-         });
-      }
-
-      return ShortcutRegister._instance;
-   }
-
-   get shortcuts () {
-      return this._shortcuts;
-   }
-
-   private set shortcuts (value: ShortcutRecord[]) {
-      this._shortcuts = value;
-      shortcutsStore.set('shortcuts', value);
-   }
-
-   init () {
-      this._mainWindow.webContents.send('update-shortcuts', this.shortcuts);
-
-      this.buildBaseMenu();
-
-      if (this._mode === 'global')
-         this.setGlobalShortcuts();
-      else if (this._mode === 'local')
-         this.setLocalShortcuts();
-      else
-         throw new Error(`Unknown mode "${this._mode}"`);
-
-      Menu.setApplicationMenu(this._menu);
-   }
-
-   private buildBaseMenu () {
-      if (Object.keys(this._menuTemplate).includes(process.platform))
-         this._menu = Menu.buildFromTemplate(this._menuTemplate[process.platform]);
-      else
-         this._menu = new Menu();
-   }
-
-   private setLocalShortcuts () {
-      for (const shortcut of this.shortcuts) {
-         if (shortcut.os.includes(process.platform)) {
-            for (const key of shortcut.keys) {
-               try {
-                  this._menu.append(new MenuItem({
-                     label: 'Shortcuts',
-                     submenu: [{
-                        label: String(key),
-                        accelerator: key,
-                        visible: false,
-                        click: () => {
-                           this._mainWindow.webContents.send(shortcut.event);
-                           if (isDevelopment) console.log('LOCAL EVENT:', shortcut);
-                        }
-                     }]
-                  }));
-               }
-               catch (error) {
-                  if (isDevelopment) console.log(error);
-                  this.restoreDefaults();
-                  throw error;
-               }
-            }
-         }
-      }
-   }
-
-   private setGlobalShortcuts () {
-      for (const shortcut of this.shortcuts) {
-         if (shortcut.os.includes(process.platform)) {
-            for (const key of shortcut.keys) {
-               try {
-                  globalShortcut.register(key, () => {
-                     this._mainWindow.webContents.send(shortcut.event);
-                     if (isDevelopment) console.log('GLOBAL EVENT:', shortcut);
-                  });
-               }
-               catch (error) {
-                  if (isDevelopment) console.log(error);
-                  this.restoreDefaults();
-                  throw error;
-               }
-            }
-         }
-      }
-   }
-
-   reload () {
-      this.unregister();
-      this.init();
-   }
-
-   updateShortcuts (shortcuts: ShortcutRecord[]) {
-      this.shortcuts = shortcuts;
-      this.reload();
-   }
-
-   restoreDefaults () {
-      this.shortcuts = defaultShortcuts;
-      this.reload();
-   }
-
-   unregister () {
-      if (this._mode === 'global') globalShortcut.unregisterAll();
-   }
-}

src/main/libs/clients/MySQLClient.ts

@@ -1,7 +1,7 @@
 import * as antares from 'common/interfaces/antares';
 import * as mysql from 'mysql2/promise';
 import { AntaresCore } from '../AntaresCore';
-import dataTypes from 'common/data-types/mysql';
+import * as dataTypes from 'common/data-types/mysql';
 import SSH2Promise = require('ssh2-promise');
 import SSHConfig from 'ssh2-promise/lib/sshConfig';
 
@@ -192,14 +192,14 @@ export class MySQLClient extends AntaresCore {
 
       // ANSI_QUOTES check
       const [response] = await connection.query<mysql.RowDataPacket[]>('SHOW GLOBAL VARIABLES LIKE \'%sql_mode%\'');
-      const sqlMode: string[] = response[0]?.Value?.split(',');
+      const sqlMode = response[0]?.Value?.split(',');
-      const hasAnsiQuotes = sqlMode.includes('ANSI') || sqlMode.includes('ANSI_QUOTES');
+      const hasAnsiQuotes = sqlMode.includes('ANSI_QUOTES');
 
       if (this._params.readonly)
          await connection.query('SET SESSION TRANSACTION READ ONLY');
 
       if (hasAnsiQuotes)
-         await connection.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
+         await connection.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
 
       return connection;
    }
@@ -219,18 +219,18 @@ export class MySQLClient extends AntaresCore {
 
       // ANSI_QUOTES check
       const [res] = await connection.query<mysql.RowDataPacket[]>('SHOW GLOBAL VARIABLES LIKE \'%sql_mode%\'');
-      const sqlMode: string[] = res[0]?.Value?.split(',');
+      const sqlMode = res[0]?.Value?.split(',');
-      const hasAnsiQuotes = sqlMode.includes('ANSI') || sqlMode.includes('ANSI_QUOTES');
+      const hasAnsiQuotes = sqlMode.includes('ANSI_QUOTES');
 
       if (hasAnsiQuotes)
-         await connection.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
+         await connection.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
 
       connection.on('connection', conn => {
          if (this._params.readonly)
             conn.query('SET SESSION TRANSACTION READ ONLY');
 
          if (hasAnsiQuotes)
-            conn.query(`SET SESSION sql_mode = '${sqlMode.filter((m: string) => !['ANSI', 'ANSI_QUOTES'].includes(m)).join(',')}'`);
+            conn.query(`SET SESSION sql_mode = "${sqlMode.filter((m: string) => m !== 'ANSI_QUOTES').join(',')}"`);
       });
 
       return connection;
@@ -321,7 +321,7 @@ export class MySQLClient extends AntaresCore {
       return filteredDatabases.map(db => {
          if (schemas.has(db.Database)) {
             // TABLES
-            const remappedTables: antares.TableInfos[] = tablesArr.filter(table => table.Db === db.Database).map(table => {
+            const remappedTables = tablesArr.filter(table => table.Db === db.Database).map(table => {
                let tableType;
                switch (table.Comment) {
                   case 'VIEW':
@@ -350,7 +350,7 @@ export class MySQLClient extends AntaresCore {
             });
 
             // PROCEDURES
-            const remappedProcedures: antares.RoutineInfos[] = procedures.filter(procedure => procedure.Db === db.Database).map(procedure => {
+            const remappedProcedures = procedures.filter(procedure => procedure.Db === db.Database).map(procedure => {
                return {
                   name: procedure.Name,
                   type: procedure.Type,
@@ -364,7 +364,7 @@ export class MySQLClient extends AntaresCore {
             });
 
             // FUNCTIONS
-            const remappedFunctions: antares.FunctionInfos[] = functions.filter(func => func.Db === db.Database).map(func => {
+            const remappedFunctions = functions.filter(func => func.Db === db.Database).map(func => {
                return {
                   name: func.Name,
                   type: func.Type,
@@ -378,26 +378,33 @@ export class MySQLClient extends AntaresCore {
             });
 
             // SCHEDULERS
-            const remappedSchedulers: antares.EventInfos[] = schedulers.filter(scheduler => scheduler.Db === db.Database).map(scheduler => {
+            const remappedSchedulers = schedulers.filter(scheduler => scheduler.Db === db.Database).map(scheduler => {
                return {
                   name: scheduler.EVENT_NAME,
-                  schema: scheduler.Db,
+                  definition: scheduler.EVENT_DEFINITION,
-                  sql: scheduler.EVENT_DEFINITION,
+                  type: scheduler.EVENT_TYPE,
-                  execution: scheduler.EVENT_TYPE === 'RECURRING' ? 'EVERY' : 'ONCE',
                   definer: scheduler.DEFINER,
+                  body: scheduler.EVENT_BODY,
                   starts: scheduler.STARTS,
                   ends: scheduler.ENDS,
-                  state: scheduler.STATUS === 'ENABLED' ? 'ENABLE' : scheduler.STATE === 'DISABLED' ? 'DISABLE' : 'DISABLE ON SLAVE',
                   enabled: scheduler.STATUS === 'ENABLED',
-                  at: scheduler.EXECUTE_AT,
+                  executeAt: scheduler.EXECUTE_AT,
-                  every: [scheduler.INTERVAL_FIELD, scheduler.INTERVAL_VALUE],
+                  intervalField: scheduler.INTERVAL_FIELD,
-                  preserve: scheduler.ON_COMPLETION.includes('PRESERVE'),
+                  intervalValue: scheduler.INTERVAL_VALUE,
-                  comment: scheduler.EVENT_COMMENT
+                  onCompletion: scheduler.ON_COMPLETION,
+                  originator: scheduler.ORIGINATOR,
+                  sqlMode: scheduler.SQL_MODE,
+                  created: scheduler.CREATED,
+                  updated: scheduler.LAST_ALTERED,
+                  lastExecuted: scheduler.LAST_EXECUTED,
+                  comment: scheduler.EVENT_COMMENT,
+                  charset: scheduler.CHARACTER_SET_CLIENT,
+                  timezone: scheduler.TIME_ZONE
                };
             });
 
             // TRIGGERS
-            const remappedTriggers: antares.TriggerInfos[] = triggersArr.filter(trigger => trigger.Db === db.Database).map(trigger => {
+            const remappedTriggers = triggersArr.filter(trigger => trigger.Db === db.Database).map(trigger => {
                return {
                   name: trigger.Trigger,
                   statement: trigger.Statement,
@@ -912,15 +919,8 @@ export class MySQLClient extends AntaresCore {
       return await this.raw(sql);
    }
 
-   async truncateTable (params: { schema: string; table: string; force: boolean }) {
+   async truncateTable (params: { schema: string; table: string }) {
-      let sql = `TRUNCATE TABLE \`${params.schema}\`.\`${params.table}\`;`;
+      const sql = `TRUNCATE TABLE \`${params.schema}\`.\`${params.table}\``;
-      if (params.force) {
-         sql = `
-            SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
-            ${sql}
-            SET FOREIGN_KEY_CHECKS=IFNULL(@OLD_FOREIGN_KEY_CHECKS, 1);
-         `;
-      }
       return await this.raw(sql);
    }
 
@@ -930,22 +930,19 @@ export class MySQLClient extends AntaresCore {
    }
 
    async getViewInformations ({ schema, view }: { schema: string; view: string }) {
-      const { rows: algorithm } = await this.raw(`SHOW CREATE VIEW \`${schema}\`.\`${view}\``);
+      const sql = `SHOW CREATE VIEW \`${schema}\`.\`${view}\``;
-      const { rows: viewInfo } = await this.raw(`
+      const results = await this.raw(sql);
-          SELECT * 
-          FROM INFORMATION_SCHEMA.VIEWS
-          WHERE TABLE_SCHEMA = '${schema}' 
-          AND TABLE_NAME = '${view}'
-       `);
 
-      return {
+      return results.rows.map(row => {
-         algorithm: algorithm[0]['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
+         return {
-         definer: viewInfo[0].DEFINER,
+            algorithm: row['Create View'].match(/(?<=CREATE ALGORITHM=).*?(?=\s)/gs)[0],
-         security: viewInfo[0].SECURITY_TYPE,
+            definer: row['Create View'].match(/(?<=DEFINER=).*?(?=\s)/gs)[0],
-         updateOption: viewInfo[0].CHECK_OPTION === 'NONE' ? '' : viewInfo[0].CHECK_OPTION,
+            security: row['Create View'].match(/(?<=SQL SECURITY ).*?(?=\s)/gs)[0],
-         sql: viewInfo[0].VIEW_DEFINITION,
+            updateOption: row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs) ? row['Create View'].match(/(?<=WITH ).*?(?=\s)/gs)[0] : '',
-         name: viewInfo[0].TABLE_NAME
+            sql: row['Create View'].match(/(?<=AS ).*?$/gs)[0],
-      };
+            name: row.View
+         };
+      })[0];
    }
 
    async dropView (params: { schema: string; view: string }) {
@@ -958,7 +955,7 @@ export class MySQLClient extends AntaresCore {
          USE \`${view.schema}\`; 
          ALTER ALGORITHM = ${view.algorithm}${view.definer ? ` DEFINER=${view.definer}` : ''} 
          SQL SECURITY ${view.security} 
-         VIEW \`${view.schema}\`.\`${view.oldName}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}
+         params \`${view.schema}\`.\`${view.oldName}\` AS ${view.sql} ${view.updateOption ? `WITH ${view.updateOption} CHECK OPTION` : ''}
       `;
 
       if (view.name !== view.oldName)
@@ -1384,20 +1381,12 @@ export class MySQLClient extends AntaresCore {
             xa: row.XA,
             savepoints: row.Savepoints,
             isDefault: row.Support.includes('DEFAULT')
-         } as {
-            name: string;
-            support: string;
-            comment: string;
-            transactions: string;
-            xa: string;
-            savepoints: string;
-            isDefault: boolean;
          };
       });
    }
 
    async getVersion () {
-      const sql = 'SHOW VARIABLES LIKE \'%vers%\'';
+      const sql = 'SHOW VARIABLES LIKE "%vers%"';
       const { rows } = await this.raw(sql);
 
       return rows.reduce((acc, curr) => {
@@ -1416,12 +1405,7 @@ export class MySQLClient extends AntaresCore {
                break;
          }
          return acc;
-      }, {}) as {
+      }, {});
-         number: string;
-         name: string;
-         arch: string;
-         os: string;
-      };
    }
 
    async getProcesses () {
@@ -1439,15 +1423,6 @@ export class MySQLClient extends AntaresCore {
             time: row.TIME,
             state: row.STATE,
             info: row.INFO
-         } as {
-            id: number;
-            user: string;
-            host: string;
-            db: string;
-            command: string;
-            time: number;
-            state: string;
-            info: string;
          };
       });
    }
@@ -1536,7 +1511,7 @@ export class MySQLClient extends AntaresCore {
    }
 
    async raw<T = antares.QueryResult> (sql: string, args?: antares.QueryParams) {
-      this._logger({ cUid: this._cUid, sql });
+      if (process.env.NODE_ENV === 'development') this._logger(sql);
 
       args = {
          nest: false,

src/main/libs/clients/PostgreSQLClient.ts

@@ -1,9 +1,10 @@
 import * as antares from 'common/interfaces/antares';
 import * as mysql from 'mysql2';
+import { builtinsTypes } from 'pg-types';
 import * as pg from 'pg';
 import * as pgAst from 'pgsql-ast-parser';
 import { AntaresCore } from '../AntaresCore';
-import dataTypes from 'common/data-types/postgresql';
+import * as dataTypes from 'common/data-types/postgresql';
 import SSH2Promise = require('ssh2-promise');
 import SSHConfig from 'ssh2-promise/lib/sshConfig';
 
@@ -18,68 +19,6 @@ pg.types.setTypeParser(1114, pgToString); // timestamp
 pg.types.setTypeParser(1184, pgToString); // timestamptz
 pg.types.setTypeParser(1266, pgToString); // timetz
 
-// from pg-types
-type builtinsTypes =
-   'BOOL' |
-   'BYTEA' |
-   'CHAR' |
-   'INT8' |
-   'INT2' |
-   'INT4' |
-   'REGPROC' |
-   'TEXT' |
-   'OID' |
-   'TID' |
-   'XID' |
-   'CID' |
-   'JSON' |
-   'XML' |
-   'PG_NODE_TREE' |
-   'SMGR' |
-   'PATH' |
-   'POLYGON' |
-   'CIDR' |
-   'FLOAT4' |
-   'FLOAT8' |
-   'ABSTIME' |
-   'RELTIME' |
-   'TINTERVAL' |
-   'CIRCLE' |
-   'MACADDR8' |
-   'MONEY' |
-   'MACADDR' |
-   'INET' |
-   'ACLITEM' |
-   'BPCHAR' |
-   'VARCHAR' |
-   'DATE' |
-   'TIME' |
-   'TIMESTAMP' |
-   'TIMESTAMPTZ' |
-   'INTERVAL' |
-   'TIMETZ' |
-   'BIT' |
-   'VARBIT' |
-   'NUMERIC' |
-   'REFCURSOR' |
-   'REGPROCEDURE' |
-   'REGOPER' |
-   'REGOPERATOR' |
-   'REGCLASS' |
-   'REGTYPE' |
-   'UUID' |
-   'TXID_SNAPSHOT' |
-   'PG_LSN' |
-   'PG_NDISTINCT' |
-   'PG_DEPENDENCIES' |
-   'TSVECTOR' |
-   'TSQUERY' |
-   'GTSVECTOR' |
-   'REGCONFIG' |
-   'REGDICTIONARY' |
-   'JSONB' |
-   'REGNAMESPACE' |
-   'REGROLE';
 export class PostgreSQLClient extends AntaresCore {
    private _schema?: string;
    private _runningConnections: Map<string, number>;
@@ -1375,7 +1314,7 @@ export class PostgreSQLClient extends AntaresCore {
    }
 
    async raw<T = antares.QueryResult> (sql: string, args?: antares.QueryParams) {
-      this._logger({ cUid: this._cUid, sql });
+      if (process.env.NODE_ENV === 'development') this._logger(sql);
 
       args = {
          nest: false,

src/main/libs/clients/SQLiteClient.ts

@@ -1,7 +1,7 @@
 import * as antares from 'common/interfaces/antares';
 import * as sqlite from 'better-sqlite3';
 import { AntaresCore } from '../AntaresCore';
-import dataTypes from 'common/data-types/sqlite';
+import * as dataTypes from 'common/data-types/sqlite';
 import { NUMBER, FLOAT, TIME, DATETIME } from 'common/fieldTypes';
 
 export class SQLiteClient extends AntaresCore {
@@ -586,7 +586,7 @@ export class SQLiteClient extends AntaresCore {
    }
 
    async raw<T = antares.QueryResult> (sql: string, args?: antares.QueryParams) {
-      this._logger({ cUid: this._cUid, sql });// TODO: replace BLOB content with a placeholder
+      if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
 
       args = {
          nest: false,

src/main/libs/exporters/sql/MysqlExporter.ts

@@ -1,8 +1,12 @@
 import * as exporter from 'common/interfaces/exporter';
 import * as mysql from 'mysql2/promise';
 import { SqlExporter } from './SqlExporter';
+import { BLOB, BIT, DATE, DATETIME, FLOAT, SPATIAL, IS_MULTI_SPATIAL, NUMBER } from 'common/fieldTypes';
+import hexToBinary from 'common/libs/hexToBinary';
+import { getArrayDepth } from 'common/libs/getArrayDepth';
+import * as moment from 'moment';
+import { lineString, point, polygon } from '@turf/helpers';
 import { MySQLClient } from '../../clients/MySQLClient';
-import { valueToSqlString } from 'common/libs/sqlUtils';
 
 export default class MysqlExporter extends SqlExporter {
    protected _client: MySQLClient;
@@ -118,7 +122,54 @@ ${footer}
                const column = notGeneratedColumns[i];
                const val = row[column.name];
 
-               sqlInsertString += valueToSqlString({ val, client: 'mysql', field: column });
+               if (val === null) sqlInsertString += 'NULL';
+               else if (DATE.includes(column.type)) {
+                  sqlInsertString += moment(val).isValid()
+                     ? this.escapeAndQuote(moment(val).format('YYYY-MM-DD'))
+                     : val;
+               }
+               else if (DATETIME.includes(column.type)) {
+                  let datePrecision = '';
+                  for (let i = 0; i < column.datePrecision; i++)
+                     datePrecision += i === 0 ? '.S' : 'S';
+
+                  sqlInsertString += moment(val).isValid()
+                     ? this.escapeAndQuote(moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`))
+                     : this.escapeAndQuote(val);
+               }
+               else if (BIT.includes(column.type))
+                  sqlInsertString += `b'${hexToBinary(Buffer.from(val).toString('hex'))}'`;
+               else if (BLOB.includes(column.type))
+                  sqlInsertString += `X'${val.toString('hex').toUpperCase()}'`;
+               else if (NUMBER.includes(column.type))
+                  sqlInsertString += val;
+               else if (FLOAT.includes(column.type))
+                  sqlInsertString += parseFloat(val);
+               else if (SPATIAL.includes(column.type)) {
+                  let geoJson;
+                  if (IS_MULTI_SPATIAL.includes(column.type)) {
+                     const features = [];
+                     for (const element of val)
+                        features.push(this._getGeoJSON(element));
+
+                     geoJson = {
+                        type: 'FeatureCollection',
+                        features
+                     };
+                  }
+                  else
+                     geoJson = this._getGeoJSON(val);
+
+                  sqlInsertString += `ST_GeomFromGeoJSON('${JSON.stringify(geoJson)}')`;
+               }
+               else if (val === '') sqlInsertString += '\'\'';
+               else {
+                  sqlInsertString += typeof val === 'string'
+                     ? this.escapeAndQuote(val)
+                     : typeof val === 'object'
+                        ? this.escapeAndQuote(JSON.stringify(val))
+                        : val;
+               }
 
                if (parseInt(i) !== notGeneratedColumns.length - 1)
                   sqlInsertString += ', ';
@@ -384,4 +435,17 @@ CREATE TABLE \`${view.Name}\`(
 
       return `'${escapedVal}'`;
    }
+
+   /* eslint-disable @typescript-eslint/no-explicit-any */
+   _getGeoJSON (val: any) {
+      if (Array.isArray(val)) {
+         if (getArrayDepth(val) === 1)
+            return lineString(val.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+         else
+            return polygon(val.map(arr => arr.reduce((acc: any, curr: any) => [...acc, [curr.x, curr.y]], [])));
+      }
+      else
+         return point([val.x, val.y]);
+   }
+   /* eslint-enable @typescript-eslint/no-explicit-any */
 }

src/main/libs/exporters/sql/PostgreSQLExporter.ts

@@ -1,11 +1,13 @@
 import * as antares from 'common/interfaces/antares';
 import * as exporter from 'common/interfaces/exporter';
 import { SqlExporter } from './SqlExporter';
+import { BLOB, BIT, DATE, DATETIME, FLOAT, NUMBER, TEXT_SEARCH } from 'common/fieldTypes';
+import hexToBinary from 'common/libs/hexToBinary';
+import * as moment from 'moment';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import * as QueryStream from 'pg-query-stream';
 import { PostgreSQLClient } from '../../clients/PostgreSQLClient';
-import { valueToSqlString } from 'common/libs/sqlUtils';
 
 export default class PostgreSQLExporter extends SqlExporter {
    constructor (client: PostgreSQLClient, tables: exporter.TableParams[], options: exporter.ExportOptions) {
@@ -221,7 +223,47 @@ SET row_security = off;\n\n\n`;
                const column = columns[i];
                const val = row[column.name];
 
-               sqlInsertString += valueToSqlString({ val, client: 'pg', field: column });
+               if (val === null) sqlInsertString += 'NULL';
+               else if (DATE.includes(column.type)) {
+                  sqlInsertString += moment(val).isValid()
+                     ? this.escapeAndQuote(moment(val).format('YYYY-MM-DD'))
+                     : val;
+               }
+               else if (DATETIME.includes(column.type)) {
+                  let datePrecision = '';
+                  for (let i = 0; i < column.datePrecision; i++)
+                     datePrecision += i === 0 ? '.S' : 'S';
+
+                  sqlInsertString += moment(val).isValid()
+                     ? this.escapeAndQuote(moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`))
+                     : this.escapeAndQuote(val);
+               }
+               else if ('isArray' in column) {
+                  let parsedVal;
+                  if (Array.isArray(val))
+                     parsedVal = JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
+                  else
+                     parsedVal = typeof val === 'string' ? val.replaceAll('[', '{').replaceAll(']', '}') : '';
+                  sqlInsertString += `'${parsedVal}'`;
+               }
+               else if (TEXT_SEARCH.includes(column.type))
+                  sqlInsertString += `'${val.replaceAll('\'', '\'\'')}'`;
+               else if (BIT.includes(column.type))
+                  sqlInsertString += `b'${hexToBinary(Buffer.from(val).toString('hex'))}'`;
+               else if (BLOB.includes(column.type))
+                  sqlInsertString += `decode('${val.toString('hex').toUpperCase()}', 'hex')`;
+               else if (NUMBER.includes(column.type))
+                  sqlInsertString += val;
+               else if (FLOAT.includes(column.type))
+                  sqlInsertString += parseFloat(val);
+               else if (val === '') sqlInsertString += '\'\'';
+               else {
+                  sqlInsertString += typeof val === 'string'
+                     ? this.escapeAndQuote(val)
+                     : typeof val === 'object'
+                        ? this.escapeAndQuote(JSON.stringify(val))
+                        : val;
+               }
 
                if (parseInt(i) !== columns.length - 1)
                   sqlInsertString += ', ';

src/main/libs/importers/sql/PostgreSQLImporter.ts

@@ -1,6 +1,6 @@
 import * as pg from 'pg';
 import * as importer from 'common/interfaces/importer';
-import * as fs from 'fs/promises';
+import fs from 'fs/promises';
 import PostgreSQLParser from '../../parsers/PostgreSQLParser';
 import { BaseImporter } from '../BaseImporter';
 

src/main/main.ts

@@ -1,19 +1,15 @@
-import { app, BrowserWindow, nativeImage, ipcMain } from 'electron';
+import { app, BrowserWindow, /* session, */ nativeImage, Menu } from 'electron';
 import * as path from 'path';
 import * as Store from 'electron-store';
 import * as windowStateKeeper from 'electron-window-state';
 import * as remoteMain from '@electron/remote/main';
 
 import ipcHandlers from './ipc-handlers';
-import { OsMenu, ShortcutRegister } from './libs/ShortcutRegister';
 
 Store.initRenderer();
-const settingsStore = new Store({ name: 'settings' });
+
-const appTheme = settingsStore.get('application_theme');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMacOS = process.platform === 'darwin';
-const isLinux = process.platform === 'linux';
-const isWindows = process.platform === 'win32';
 const gotTheLock = app.requestSingleInstanceLock();
 
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@@ -23,7 +19,7 @@ let mainWindow: BrowserWindow;
 let mainWindowState: windowStateKeeper.State;
 
 async function createMainWindow () {
-   const icon = require('../renderer/images/logo-64.png');
+   const icon = require('../renderer/images/logo-32.png');
    const window = new BrowserWindow({
       width: mainWindowState.width,
       height: mainWindowState.height,
@@ -31,23 +27,16 @@ async function createMainWindow () {
       y: mainWindowState.y,
       minWidth: 900,
       minHeight: 550,
-      show: !isWindows,
       title: 'Antares SQL',
+      autoHideMenuBar: true,
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
          spellcheck: false
       },
-      autoHideMenuBar: true,
+      frame: false,
-      titleBarStyle: isLinux ? 'default' :'hidden',
+      titleBarStyle: isMacOS ? 'hidden' : 'default',
-      titleBarOverlay: isWindows
-         ? {
-            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
-            symbolColor: appTheme === 'dark' ? '#fff' : '#000',
-            height: 30
-         }
-         : false,
       trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
@@ -84,24 +73,10 @@ else {
    // Initialize ipcHandlers
    ipcHandlers();
 
-   ipcMain.on('refresh-theme-settings', () => {
-      const appTheme = settingsStore.get('application_theme');
-      if (isWindows && mainWindow) {
-         mainWindow.setTitleBarOverlay({
-            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
-            symbolColor: appTheme === 'dark' ? '#fff' : '#000'
-         });
-      }
-   });
-
-   ipcMain.on('change-window-title', (_, title: string) => {
-      if (mainWindow) mainWindow.setTitle(title);
-   });
-
    // 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();
+      if (isMacOS) app.quit();
    });
 
    app.on('activate', async () => {
@@ -120,9 +95,6 @@ else {
       mainWindow = await createMainWindow();
       createAppMenu();
 
-      if (isWindows)
-         mainWindow.show();
-
       if (isDevelopment)
          mainWindow.webContents.openDevTools();
 
@@ -145,8 +117,10 @@ else {
 }
 
 function createAppMenu () {
-   const menuTemplate: OsMenu = {
+   let menu: Electron.Menu = null;
-      darwin: [
+
+   if (isMacOS) {
+      menu = Menu.buildFromTemplate([
          {
             label: app.name,
             submenu: [
@@ -177,11 +151,10 @@ function createAppMenu () {
          {
             role: 'windowMenu'
          }
-      ]
+      ]);
-   };
+   }
 
-   const shortCutRegister = ShortcutRegister.getInstance({ mainWindow, menuTemplate, mode: 'local' });
+   Menu.setApplicationMenu(menu);
-   shortCutRegister.init();
 }
 
 function saveWindowState () {

src/renderer/App.vue

@@ -2,7 +2,7 @@
    <div id="wrapper" :class="[`theme-${applicationTheme}`, !disableBlur || 'no-blur']">
       <TheTitleBar />
       <div id="window-content">
-         <TheSettingBar @show-connections-modal="isAllConnectionsModal = true" />
+         <TheSettingBar />
          <div id="main-content" class="container">
             <div class="columns col-gapless">
                <Workspace
@@ -10,7 +10,7 @@
                   :key="connection.uid"
                   :connection="connection"
                />
-               <div class="connection-panel-wrapper p-relative">
+               <div class="connection-panel-wrapper">
                   <WorkspaceAddConnectionPanel v-if="selectedWorkspace === 'NEW'" />
                </div>
             </div>
@@ -21,116 +21,103 @@
             <BaseTextEditor class="d-none" value="" />
          </div>
       </div>
-      <ModalAllConnections v-if="isAllConnectionsModal" @close="isAllConnectionsModal = false" />
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { defineAsyncComponent, onMounted, Ref, ref } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
-import { useI18n } from 'vue-i18n';
 import { Menu, getCurrentWindow } from '@electron/remote';
 import { useApplicationStore } from '@/stores/application';
 import { useConnectionsStore } from '@/stores/connections';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import TheSettingBar from '@/components/TheSettingBar.vue';
+import TheSettingBar from '@/components/TheSettingBar';
 
-const { t } = useI18n();
+export default {
+   name: 'App',
+   components: {
+      TheTitleBar: defineAsyncComponent(() => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar')),
+      TheSettingBar,
+      TheFooter: defineAsyncComponent(() => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter')),
+      TheNotificationsBoard: defineAsyncComponent(() => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard')),
+      Workspace: defineAsyncComponent(() => import(/* webpackChunkName: "Workspace" */'@/components/Workspace')),
+      WorkspaceAddConnectionPanel: defineAsyncComponent(() => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel')),
+      ModalSettings: defineAsyncComponent(() => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings')),
+      TheScratchpad: defineAsyncComponent(() => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad')),
+      BaseTextEditor: defineAsyncComponent(() => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor'))
+   },
+   setup () {
+      const applicationStore = useApplicationStore();
+      const connectionsStore = useConnectionsStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const TheTitleBar = defineAsyncComponent(() => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar.vue'));
+      const {
-const TheFooter = defineAsyncComponent(() => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter.vue'));
+         isLoading,
-const TheNotificationsBoard = defineAsyncComponent(() => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard.vue'));
+         isSettingModal,
-const Workspace = defineAsyncComponent(() => import(/* webpackChunkName: "Workspace" */'@/components/Workspace.vue'));
+         isScratchpad
-const WorkspaceAddConnectionPanel = defineAsyncComponent(() => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel.vue'));
+      } = storeToRefs(applicationStore);
-const ModalSettings = defineAsyncComponent(() => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings.vue'));
+      const { connections } = storeToRefs(connectionsStore);
-const ModalAllConnections = defineAsyncComponent(() => import(/* webpackChunkName: "ModalAllConnections" */'@/components/ModalAllConnections.vue'));
+      const { applicationTheme, disableBlur } = storeToRefs(settingsStore);
-const TheScratchpad = defineAsyncComponent(() => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad.vue'));
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-const BaseTextEditor = defineAsyncComponent(() => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor.vue'));
 
-const applicationStore = useApplicationStore();
+      const { checkVersionUpdate } = applicationStore;
-const connectionsStore = useConnectionsStore();
-const settingsStore = useSettingsStore();
-const workspacesStore = useWorkspacesStore();
 
-const {
+      return {
-   isSettingModal,
+         isLoading,
-   isScratchpad
+         isSettingModal,
-} = storeToRefs(applicationStore);
+         isScratchpad,
-const { connections } = storeToRefs(connectionsStore);
+         checkVersionUpdate,
-const { applicationTheme, disableBlur } = storeToRefs(settingsStore);
+         connections,
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+         applicationTheme,
+         disableBlur,
+         selectedWorkspace
+      };
+   },
+   mounted () {
+      ipcRenderer.send('check-for-updates');
+      this.checkVersionUpdate();
 
-const { checkVersionUpdate } = applicationStore;
+      const InputMenu = Menu.buildFromTemplate([
-const { changeApplicationTheme } = settingsStore;
+         {
-
+            label: this.$t('word.cut'),
-const isAllConnectionsModal: Ref<boolean> = ref(false);
+            role: 'cut'
-
+         },
-document.addEventListener('DOMContentLoaded', () => {
+         {
-   setTimeout(() => {
+            label: this.$t('word.copy'),
-      changeApplicationTheme(applicationTheme.value);// Forces persistentStore to save on file and mail process
+            role: 'copy'
-   }, 1000);
+         },
-});
+         {
-
+            label: this.$t('word.paste'),
-onMounted(() => {
+            role: 'paste'
-   ipcRenderer.on('open-all-connections', () => {
+         },
-      isAllConnectionsModal.value = true;
+         {
-   });
+            type: 'separator'
-
+         },
-   ipcRenderer.on('open-scratchpad', () => {
+         {
-      isScratchpad.value = true;
+            label: this.$t('message.selectAll'),
-   });
+            role: 'selectall'
-
-   ipcRenderer.on('open-settings', () => {
-      isSettingModal.value = true;
-   });
-
-   ipcRenderer.on('create-connection', () => {
-      workspacesStore.selectWorkspace('NEW');
-   });
-
-   ipcRenderer.send('check-for-updates');
-   checkVersionUpdate();
-
-   const InputMenu = Menu.buildFromTemplate([
-      {
-         label: t('word.cut'),
-         role: 'cut'
-      },
-      {
-         label: t('word.copy'),
-         role: 'copy'
-      },
-      {
-         label: t('word.paste'),
-         role: 'paste'
-      },
-      {
-         type: 'separator'
-      },
-      {
-         label: t('message.selectAll'),
-         role: 'selectAll'
-      }
-   ]);
-
-   document.body.addEventListener('contextmenu', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let node: any = e.target;
-
-      while (node) {
-         if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
-            InputMenu.popup({ window: getCurrentWindow() });
-            break;
          }
-         node = node.parentNode;
+      ]);
-      }
+
-   });
+      document.body.addEventListener('contextmenu', (e) => {
-});
+         e.preventDefault();
+         e.stopPropagation();
+
+         let node = e.target;
+
+         while (node) {
+            if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
+               InputMenu.popup(getCurrentWindow());
+               break;
+            }
+            node = node.parentNode;
+         }
+      });
+   }
+};
 </script>
 
 <style lang="scss">
@@ -160,14 +147,14 @@ onMounted(() => {
       height: calc(100vh - #{$footer-height});
     }
 
-    .connection-panel-wrapper {
+   .connection-panel-wrapper{
       height: calc(100vh - #{$excluding-size});
       width: 100%;
-      padding-top: 10vh;
+      padding-top: 15vh;
       display: flex;
       justify-content: center;
       align-items: flex-start;
       overflow: auto;
-    }
+   }
   }
 </style>

src/renderer/components/BaseConfirmModal.vue

@@ -3,7 +3,7 @@
       <Teleport to="#window-content">
          <div class="modal active" :class="modalSizeClass">
             <a class="modal-overlay" @click="hideModal" />
-            <div ref="trapRef" class="modal-container">
+            <div class="modal-container">
                <div v-if="hasHeader" class="modal-header pl-2">
                   <div class="modal-title h6">
                      <slot name="header" />
@@ -31,13 +31,13 @@
                      class="btn btn-primary mr-2"
                      @click.stop="confirmModal"
                   >
-                     {{ confirmText || t('word.confirm') }}
+                     {{ confirmText || $t('word.confirm') }}
                   </button>
                   <button
                      class="btn btn-link"
                      @click="hideModal"
                   >
-                     {{ cancelText || t('word.cancel') }}
+                     {{ cancelText || $t('word.cancel') }}
                   </button>
                </div>
             </div>
@@ -46,72 +46,65 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { useFocusTrap } from '@/composables/useFocusTrap';
+export default {
-import { computed, onBeforeUnmount, PropType, useSlots } from 'vue';
+   name: 'BaseConfirmModal',
-import { useI18n } from 'vue-i18n';
+   props: {
+      size: {
+         type: String,
+         validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
+         default: 'small'
+      },
+      hideFooter: {
+         type: Boolean,
+         default: false
+      },
+      confirmText: String,
+      cancelText: String
+   },
+   emits: ['confirm', 'hide'],
+   computed: {
+      hasHeader () {
+         return !!this.$slots.header;
+      },
+      hasBody () {
+         return !!this.$slots.body;
+      },
+      hasDefault () {
+         return !!this.$slots.default;
+      },
+      modalSizeClass () {
+         if (this.size === 'small')
+            return 'modal-sm';
+         if (this.size === '400')
+            return 'modal-400';
+         else if (this.size === 'large')
+            return 'modal-lg';
+         else return '';
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      confirmModal () {
+         this.$emit('confirm');
+         this.hideModal();
+      },
 
-const { t } = useI18n();
+      hideModal () {
-
+         this.$emit('hide');
-const props = defineProps({
+      },
-   size: {
+      onKey (e) {
-      type: String as PropType<'small' | 'medium' | '400' | 'large'>,
+         e.stopPropagation();
-      validator: (prop: string) => ['small', 'medium', '400', 'large'].includes(prop),
+         if (e.key === 'Escape')
-      default: 'small'
+            this.hideModal();
-   },
+      }
-   hideFooter: {
-      type: Boolean,
-      default: false
-   },
-   confirmText: String,
-   cancelText: String,
-   disableAutofocus: {
-      type: Boolean,
-      default: false
-   },
-   closeOnConfirm: {
-      type: Boolean,
-      default: true
    }
-});
-const emit = defineEmits(['confirm', 'hide']);
-const slots = useSlots();
-
-const { trapRef } = useFocusTrap({ disableAutofocus: props.disableAutofocus });
-
-const hasHeader = computed(() => !!slots.header);
-const hasBody = computed(() => !!slots.body);
-const hasDefault = computed(() => !!slots.default);
-const modalSizeClass = computed(() => {
-   if (props.size === 'small')
-      return 'modal-sm';
-   if (props.size === '400')
-      return 'modal-400';
-   else if (props.size === 'large')
-      return 'modal-lg';
-   else return '';
-});
-
-const confirmModal = () => {
-   emit('confirm');
-   if (props.closeOnConfirm) hideModal();
 };
-
-const hideModal = () => {
-   emit('hide');
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      hideModal();
-};
-
-window.addEventListener('keydown', onKey);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style scoped>

src/renderer/components/BaseContextMenu.vue

@@ -15,60 +15,67 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeUnmount, onMounted, Ref, ref } from 'vue';
+export default {
+   name: 'BaseContextMenu',
+   props: {
+      contextEvent: MouseEvent
+   },
+   emits: ['close-context'],
+   data () {
+      return {
+         contextSize: null,
+         isBottom: false
+      };
+   },
+   computed: {
+      position () {
+         let topCord = 0;
+         let leftCord = 0;
 
-const contextContent: Ref<HTMLDivElement> = ref(null);
+         if (this.contextEvent) {
-const contextSize: Ref<DOMRect> = ref(null);
+            const { clientY, clientX } = this.contextEvent;
-const isBottom: Ref<boolean> = ref(false);
+            topCord = `${clientY + 2}px`;
-const props = defineProps<{contextEvent: MouseEvent}>();
+            leftCord = `${clientX + 5}px`;
-const emit = defineEmits(['close-context']);
 
-const position = computed(() => {
+            if (this.contextSize) {
-   let topCord = '0px';
+               if (clientY + (this.contextSize.height < 200 ? 200 : this.contextSize.height) + 5 >= window.innerHeight) {
-   let leftCord = '0px';
+                  topCord = `${clientY + 3 - this.contextSize.height}px`;
+                  this.isBottom = true;
+               }
 
-   if (props.contextEvent) {
+               if (clientX + this.contextSize.width + 5 >= window.innerWidth)
-      const { clientY, clientX } = props.contextEvent;
+                  leftCord = `${clientX - this.contextSize.width}px`;
-      topCord = `${clientY + 2}px`;
+            }
-      leftCord = `${clientX + 5}px`;
-
-      if (contextSize.value) {
-         if (clientY + (contextSize.value.height < 200 ? 200 : contextSize.value.height) + 5 >= window.innerHeight) {
-            topCord = `${clientY + 3 - contextSize.value.height}px`;
-            isBottom.value = true;
          }
 
-         if (clientX + contextSize.value.width + 5 >= window.innerWidth)
+         return {
-            leftCord = `${clientX - contextSize.value.width}px`;
+            top: topCord,
+            left: leftCord
+         };
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      if (this.$refs.contextContent)
+         this.contextSize = this.$refs.contextContent.getBoundingClientRect();
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      close () {
+         this.$emit('close-context');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.close();
       }
    }
-
-   return {
-      top: topCord,
-      left: leftCord
-   };
-});
-
-const close = () => {
-   emit('close-context');
 };
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      close();
-};
-
-window.addEventListener('keydown', onKey);
-
-onMounted(() => {
-   if (contextContent.value)
-      contextSize.value = contextContent.value.getBoundingClientRect();
-});
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style lang="scss">

src/renderer/components/BaseLoader.vue

@@ -4,6 +4,11 @@
    </div>
 </template>
 
+<script>
+export default {
+   name: 'BaseLoader'
+};
+</script>
 <style scoped>
 .empty {
   position: absolute;

src/renderer/components/BaseMap.vue

@@ -1,93 +1,95 @@
 <template>
    <div id="map" class="map" />
 </template>
-
+<script>
-<script setup lang="ts">
+import L from 'leaflet';
-import { onMounted, PropType, Ref, ref } from 'vue';
-import * as L from 'leaflet';
 import {
    point,
    lineString,
    polygon
 } from '@turf/helpers';
-import { GeoJsonObject } from 'geojson';
 import { getArrayDepth } from 'common/libs/getArrayDepth';
 
-interface Coordinates { x: number; y: number }
+export default {
-
+   name: 'BaseMap',
-const props = defineProps({
+   props: {
-   points: [Object, Array] as PropType<Coordinates | Coordinates[]>,
+      points: [Object, Array],
-   isMultiSpatial: Boolean
+      isMultiSpatial: Boolean
-});
+   },
-const map: Ref<L.Map> = ref(null);
+   data () {
-const markers: Ref<GeoJsonObject | GeoJsonObject[]> = ref(null);
+      return {
-const center: Ref<[number, number]> = ref(null);
+         map: null,
-
+         markers: [],
-const getMarkers = (points: Coordinates) => {
+         center: null
-   if (Array.isArray(points)) {
+      };
-      if (getArrayDepth(points) === 1)
+   },
-         return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+   mounted () {
-      else
+      if (this.isMultiSpatial) {
-         return polygon(points.map(arr => arr.reduce((acc: Coordinates[], curr: Coordinates) => [...acc, [curr.x, curr.y]], [])));
+         for (const element of this.points)
-   }
+            this.markers.push(this.getMarkers(element));
-   else
-      return point([points.x, points.y]);
-};
-
-onMounted(() => {
-   if (props.isMultiSpatial) {
-      for (const element of props.points as Coordinates[])
-         (markers.value as GeoJsonObject[]).push(getMarkers(element));
-   }
-   else {
-      markers.value = getMarkers(props.points as Coordinates);
-
-      if (!Array.isArray(props.points))
-         center.value = [props.points.y, props.points.x];
-   }
-
-   map.value = L.map('map', {
-      center: center.value || [0, 0],
-      zoom: 15,
-      minZoom: 1,
-      attributionControl: false
-   });
-
-   L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(map.value);
-
-   const geoJsonObj = L.geoJSON((markers.value as GeoJsonObject), {
-      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(map.value);
+      else {
+         this.markers = this.getMarkers(this.points);
 
-   const southWest = L.latLng(-90, -180);
+         if (!Array.isArray(this.points))
-   const northEast = L.latLng(90, 180);
+            this.center = [this.points.y, this.points.x];
-   const bounds = L.latLngBounds(southWest, northEast);
+      }
-   map.value.setMaxBounds(bounds);
 
-   if (!center.value) map.value.fitBounds(geoJsonObj.getBounds());
+      this.map = L.map('map', {
+         center: this.center || [0, 0],
+         zoom: 15,
+         minZoom: 1,
+         attributionControl: false
+      });
 
-   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
-      attribution: '&copy; <b>OpenStreetMap</b>'
+
-   }).addTo(map.value);
+      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">

src/renderer/components/BaseNotification.vue

@@ -14,58 +14,64 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, ref } from 'vue';
+export default {
-
+   name: 'BaseNotification',
-const props = defineProps({
+   props: {
-   message: {
+      message: {
-      type: String,
+         type: String,
-      default: ''
+         default: ''
+      },
+      status: {
+         type: String,
+         default: ''
+      }
    },
-   status: {
+   emits: ['close'],
-      type: String,
+   data () {
-      default: ''
+      return {
+         isExpanded: false
+      };
+   },
+   computed: {
+      notificationStatus () {
+         let className = '';
+         let iconName = '';
+         switch (this.status) {
+            case 'success':
+               className = 'toast-success';
+               iconName = 'mdi-check';
+               break;
+            case 'error':
+               className = 'toast-error';
+               iconName = 'mdi-alert-rhombus';
+               break;
+            case 'warning':
+               className = 'toast-warning';
+               iconName = 'mdi-alert';
+               break;
+            case 'primary':
+               className = 'toast-primary';
+               iconName = 'mdi-information-outline';
+               break;
+         }
+
+         return { className, iconName };
+      },
+      isExpandable () {
+         return this.message.length > 80;
+      }
+   },
+   methods: {
+      hideToast () {
+         this.$emit('close');
+      },
+      toggleExpand () {
+         this.isExpanded = !this.isExpanded;
+      }
    }
-});
-const isExpanded = ref(false);
-const emit = defineEmits(['close']);
-
-const notificationStatus = computed(() => {
-   let className = '';
-   let iconName = '';
-   switch (props.status) {
-      case 'success':
-         className = 'toast-success';
-         iconName = 'mdi-check';
-         break;
-      case 'error':
-         className = 'toast-error';
-         iconName = 'mdi-alert-rhombus';
-         break;
-      case 'warning':
-         className = 'toast-warning';
-         iconName = 'mdi-alert';
-         break;
-      case 'primary':
-         className = 'toast-primary';
-         iconName = 'mdi-information-outline';
-         break;
-   }
-
-   return { className, iconName };
-});
-
-const isExpandable = computed(() => props.message.length > 80);
-
-const hideToast = () => {
-   emit('close');
-};
-
-const toggleExpand = () => {
-   isExpanded.value = !isExpanded.value;
 };
 </script>
-
 <style scoped>
   .toast {
     display: flex;

src/renderer/components/BaseSelect.vue

@@ -37,8 +37,6 @@
             v-if="isOpen"
             ref="optionList"
             :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
-            @mousedown="isMouseDown = true"
-            @mouseup="handleMouseUpEvent()"
          >
             <ul class="select__list" @mousedown.prevent>
                <li
@@ -132,18 +130,13 @@ export default defineComponent({
       disabled: {
          type: Boolean,
          default: false
-      },
-      maxVisibleOptions: {
-         type: Number,
-         default: 100
       }
    },
    emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'],
    setup (props, { emit }) {
       const hightlightedIndex = ref(0);
       const isOpen = ref(false);
-      const isMouseDown = ref(false);
+      const internalValue = ref(props.modelValue || props.value);
-      const internalValue = ref(props.modelValue !== false ? props.modelValue : props.value);
       const el = ref(null);
       const searchInput = ref(null);
       const optionList = ref(null);
@@ -151,14 +144,14 @@ export default defineComponent({
       const searchText = ref('');
 
       const getOptionValue = (opt) => _guess('optionTrackBy', opt);
-      const getOptionLabel = (opt) => _guess('optionLabel', opt) + '';
+      const getOptionLabel = (opt) => _guess('optionLabel', opt);
       const getOptionDisabled = (opt) => _guess('optionDisabled', opt);
       const _guess = (name, item) => {
          const prop = props[name];
          if (typeof prop === 'function')
             return prop(item);
 
-         return item[prop] !== undefined ? item[prop] : item;
+         return item[prop] || item;
       };
 
       const flattenOptions = computed(() => {
@@ -204,30 +197,11 @@ export default defineComponent({
       });
 
       const filteredOptions = computed(() => {
-         const searchTerms = (searchText.value || '').toLowerCase().trim();
+         const normalizedSearch = (searchText.value || '').toLowerCase().trim();
 
-         let options = searchTerms
+         return normalizedSearch
-            ? flattenOptions.value.filter(opt => opt.$type === 'group' || opt.label.trim().toLowerCase().indexOf(searchTerms) !== -1)
+            ? flattenOptions.value.filter(opt => opt.$type === 'group' || opt.label.trim().toLowerCase().indexOf(normalizedSearch) !== -1)
             : flattenOptions.value;
-
-         if (options.length > props.maxVisibleOptions) {
-            let sliceStart = 0;
-            let sliceEnd = sliceStart + props.maxVisibleOptions;
-
-            // if no search active try to open the dropdown showing options around the selected one
-            if (searchTerms === '') {
-               const index = internalValue.value ? flattenOptions.value.findIndex(el => el.value === internalValue.value) : -1;
-
-               if (index < options.length -1) {
-                  sliceStart = Math.max(0, index - Math.floor(props.maxVisibleOptions / 2));
-                  sliceEnd = Math.min(sliceStart + sliceEnd, options.length -1);
-               }
-            }
-
-            options = options.slice(sliceStart, sliceEnd);
-         }
-
-         return options;
       });
 
       const searchInputStyle = computed(() => {
@@ -245,16 +219,8 @@ export default defineComponent({
             hightlightedIndex.value = 0;
       });
 
-      watch(() => props.modelValue, (val) => {
-         internalValue.value = val;
-      });
-
-      watch(() => props.value, (val) => {
-         internalValue.value = val;
-      });
-
       const currentOptionLabel = computed(() =>
-         flattenOptions.value.find(d => d.value === internalValue.value)?.label
+         flattenOptions.value.find(d => d.value === props.modelValue)?.label
       );
 
       const select = (opt) => {
@@ -276,7 +242,7 @@ export default defineComponent({
       const activate = () => {
          if (isOpen.value || props.disabled) return;
          isOpen.value = true;
-         hightlightedIndex.value = filteredOptions.value.findIndex(el => el.value === internalValue.value) || 0;
+         hightlightedIndex.value = flattenOptions.value.findIndex(el => el.value === internalValue.value) || 0;
 
          if (props.searchable)
             searchInput.value.focus();
@@ -308,8 +274,6 @@ export default defineComponent({
       };
 
       const adjustListPosition = () => {
-         if (!optionList.value) return;
-
          const element = el.value;
          let { left, top } = element.getBoundingClientRect();
          const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
@@ -355,24 +319,12 @@ export default defineComponent({
       };
 
       const handleBlurEvent = () => {
-         if (isMouseDown.value) return;
          deactivate();
          emit('blur');
       };
 
-      const handleMouseUpEvent = () => {
-         isMouseDown.value = false;
-         searchInput.value.focus();
-      };
-
-      const handleWheelEvent = (e) => {
-         if (!e.target.className.includes('select__')) deactivate();
-      };
-
       onMounted(() => {
          window.addEventListener('resize', adjustListPosition);
-         window.addEventListener('wheel', handleWheelEvent);
-
          nextTick(() => {
             // fix position when the component is created and opened at the same time
             if (isOpen.value) {
@@ -384,7 +336,6 @@ export default defineComponent({
       });
       onUnmounted(() => {
          window.removeEventListener('resize', adjustListPosition);
-         window.removeEventListener('wheel', handleWheelEvent);
       });
 
       return {
@@ -400,13 +351,10 @@ export default defineComponent({
          isSelected,
          keyArrows,
          isOpen,
-         isMouseDown,
          hightlightedIndex,
          optionList,
          optionRefs,
-         handleBlurEvent,
+         handleBlurEvent
-         handleMouseUpEvent,
-         internalValue
       };
    }
 });
@@ -414,55 +362,48 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .select {
-  display: block;
+   display: block;
 
-  &:focus,
+   &:focus, &--open {
-  &--open {
+      z-index: 10;
-    z-index: 10;
+   }
-  }
 
-  &__search-input {
+   &__search-input {
-    appearance: none;
+      appearance: none;
-    border: none;
+      border: none;
-    background: transparent;
+      background: transparent;
-    outline: none;
+      outline: none;
-    color: currentColor;
+      color: currentColor;
-    max-width: 100%;
+      max-width: 100%;
-    width: 100%;
+      width: 100%;
-  }
+   }
 
-  &__item-text {
+   &__list-wrapper {
-    overflow: hidden;
+      cursor: pointer;
-    white-space: nowrap;
+      position: fixed;
-    text-overflow: ellipsis;
+      display: block;
-  }
+      z-index: 5;
+      -webkit-overflow-scrolling: touch;
+      max-height: 240px;
+      overflow: auto;
+      left: 0;
+      top: 40px;
+   }
 
-  &__list-wrapper {
+   &__list {
-    cursor: pointer;
+      list-style: none;
-    position: fixed;
+   }
-    display: block;
-    z-index: 5;
-    -webkit-overflow-scrolling: touch;
-    max-height: 240px;
-    overflow: auto;
-    left: 0;
-    top: 40px;
-  }
 
-  &__list {
+   &__option {
-    list-style: none;
+      &--disabled {
-  }
+         opacity: 0.6;
+         cursor: not-allowed;
+      }
+   }
 
-  &__option {
+   &--disabled {
-    &--disabled {
       opacity: 0.6;
       cursor: not-allowed;
-    }
+   }
-  }
-
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 }
 </style>

src/renderer/components/BaseTextEditor.vue

@@ -9,111 +9,121 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { onMounted, watch } from 'vue';
 import * as ace from 'ace-builds';
-import 'ace-builds/webpack-resolver';
 import { storeToRefs } from 'pinia';
+import 'ace-builds/webpack-resolver';
 import { useSettingsStore } from '@/stores/settings';
 import { uidGen } from 'common/libs/uidGen';
 
-const props = defineProps({
+export default {
-   modelValue: String,
+   name: 'BaseTextEditor',
-   mode: { type: String, default: 'text' },
+   props: {
-   editorClass: { type: String, default: '' },
+      modelValue: String,
-   autoFocus: { type: Boolean, default: false },
+      mode: { type: String, default: 'text' },
-   readOnly: { type: Boolean, default: false },
+      editorClass: { type: String, default: '' },
-   showLineNumbers: { type: Boolean, default: true },
+      autoFocus: { type: Boolean, default: false },
-   height: { type: Number, default: 200 }
+      readOnly: { type: Boolean, default: false },
-});
+      showLineNumbers: { type: Boolean, default: true },
-const emit = defineEmits(['update:modelValue']);
+      height: { type: Number, default: 200 }
-const settingsStore = useSettingsStore();
+   },
+   emits: ['update:modelValue'],
+   setup () {
+      const settingsStore = useSettingsStore();
 
-const {
+      const {
-   editorTheme,
+         editorTheme,
-   editorFontSize,
+         editorFontSize,
-   autoComplete,
+         autoComplete,
-   lineWrap
+         lineWrap
-} = storeToRefs(settingsStore);
+      } = storeToRefs(settingsStore);
 
-let editor: ace.Ace.Editor;
+      return {
-const id = uidGen();
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      };
+   },
+   data () {
+      return {
+         editor: null,
+         id: uidGen()
+      };
+   },
+   watch: {
+      mode () {
+         if (this.editor)
+            this.editor.session.setMode(`ace/mode/${this.mode}`);
+      },
+      editorTheme () {
+         if (this.editor)
+            this.editor.setTheme(`ace/theme/${this.editorTheme}`);
+      },
+      editorFontSize () {
+         const sizes = {
+            small: '12px',
+            medium: '14px',
+            large: '16px'
+         };
 
-watch(() => props.mode, () => {
+         if (this.editor) {
-   if (editor)
+            this.editor.setOptions({
-      editor.session.setMode(`ace/mode/${props.mode}`);
+               fontSize: sizes[this.editorFontSize]
-});
+            });
-
+         }
-watch(editorTheme, () => {
+      },
-   if (editor)
+      autoComplete () {
-      editor.setTheme(`ace/theme/${editorTheme.value}`);
+         if (this.editor) {
-});
+            this.editor.setOptions({
-
+               enableLiveAutocompletion: this.autoComplete
-watch(editorFontSize, () => {
+            });
-   const sizes = {
+         }
-      small: 12,
+      },
-      medium: 14,
+      lineWrap () {
-      large: 16
+         if (this.editor) {
-   };
+            this.editor.setOptions({
-
+               wrap: this.lineWrap
-   if (editor) {
+            });
-      editor.setOptions({
+         }
-         fontSize: sizes[editorFontSize.value as undefined as 'small' | 'medium' | 'large']
+      }
+   },
+   mounted () {
+      this.editor = ace.edit(`editor-${this.id}`, {
+         mode: `ace/mode/${this.mode}`,
+         theme: `ace/theme/${this.editorTheme}`,
+         value: this.modelValue || '',
+         fontSize: '14px',
+         printMargin: false,
+         readOnly: this.readOnly,
+         showLineNumbers: this.showLineNumbers,
+         showGutter: this.showLineNumbers
       });
-   }
-});
 
-watch(autoComplete, () => {
+      this.editor.setOptions({
-   if (editor) {
+         enableBasicAutocompletion: false,
-      editor.setOptions({
+         wrap: this.lineWrap,
-         enableLiveAutocompletion: autoComplete.value
+         enableSnippets: false,
+         enableLiveAutocompletion: false
       });
-   }
-});
 
-watch(lineWrap, () => {
+      this.editor.session.on('change', () => {
-   if (editor) {
+         const content = this.editor.getValue();
-      editor.setOptions({
+         this.$emit('update:modelValue', content);
-         wrap: lineWrap.value
       });
-   }
-});
 
-onMounted(() => {
+      if (this.autoFocus) {
-   editor = ace.edit(`editor-${id}`, {
+         setTimeout(() => {
-      mode: `ace/mode/${props.mode}`,
+            this.editor.focus();
-      theme: `ace/theme/${editorTheme.value}`,
+            this.editor.resize();
-      value: props.modelValue || '',
+         }, 20);
-      fontSize: 14,
+      }
-      printMargin: false,
-      readOnly: props.readOnly,
-      showLineNumbers: props.showLineNumbers,
-      showGutter: props.showLineNumbers
-   });
 
-   editor.setOptions({
-      enableBasicAutocompletion: false,
-      wrap: lineWrap,
-      enableSnippets: false,
-      enableLiveAutocompletion: false
-   });
-
-   (editor.session as unknown as ace.Ace.Editor).on('change', () => {
-      const content = editor.getValue();
-      emit('update:modelValue', content);
-   });
-
-   if (props.autoFocus) {
       setTimeout(() => {
-         editor.focus();
+         this.editor.resize();
-         editor.resize();
       }, 20);
    }
-
+};
-   setTimeout(() => {
-      editor.resize();
-   }, 20);
-});
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/BaseToast.vue

@@ -9,63 +9,67 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, ref, watch } from 'vue';
+export default {
-
+   name: 'BaseToast',
-const props = defineProps({
+   props: {
-   message: {
+      message: {
-      type: String,
+         type: String,
-      default: ''
+         default: ''
+      },
+      status: {
+         type: String,
+         default: ''
+      }
    },
-   status: {
+   emits: ['close'],
-      type: String,
+   data () {
-      default: ''
+      return {
+         isVisible: false
+      };
+   },
+   computed: {
+      toastStatus () {
+         let className = '';
+         let iconName = '';
+         switch (this.status) {
+            case 'success':
+               className = 'toast-success';
+               iconName = 'mdi-check';
+               break;
+            case 'error':
+               className = 'toast-error';
+               iconName = 'mdi-alert-rhombus';
+               break;
+            case 'warning':
+               className = 'toast-warning';
+               iconName = 'mdi-alert';
+               break;
+            case 'primary':
+               className = 'toast-primary';
+               iconName = 'mdi-information-outline';
+               break;
+         }
+
+         return { className, iconName };
+      }
+   },
+   watch: {
+      message: function () {
+         if (this.message)
+            this.isVisible = true;
+         else
+            this.isVisible = false;
+      }
+   },
+   methods: {
+      hideToast () {
+         this.isVisible = false;
+         this.$emit('close');
+      }
    }
-});
-
-const isVisible = ref(false);
-const message = ref(props.message);
-
-const emit = defineEmits(['close']);
-
-const toastStatus = computed(() => {
-   let className = '';
-   let iconName = '';
-   switch (props.status) {
-      case 'success':
-         className = 'toast-success';
-         iconName = 'mdi-check';
-         break;
-      case 'error':
-         className = 'toast-error';
-         iconName = 'mdi-alert-rhombus';
-         break;
-      case 'warning':
-         className = 'toast-warning';
-         iconName = 'mdi-alert';
-         break;
-      case 'primary':
-         className = 'toast-primary';
-         iconName = 'mdi-information-outline';
-         break;
-   }
-
-   return { className, iconName };
-});
-
-watch(message, () => {
-   if (message.value)
-      isVisible.value = true;
-   else
-      isVisible.value = false;
-});
-
-const hideToast = () => {
-   isVisible.value = false;
-   emit('close');
 };
 </script>
-
 <style scoped>
   .toast {
     display: flex;

src/renderer/components/BaseUploadInput.vue

@@ -4,10 +4,10 @@
          <i class="mdi mdi-folder-open mr-1" />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
-         {{ lastPart(modelValue, 19) }}
+         {{ lastPart(modelValue) }}
       </span>
       <i
-         v-if="modelValue"
+         v-if="modelValue.length"
          class="file-uploader-reset mdi mdi-close"
          @click.prevent="clear"
       />
@@ -22,29 +22,40 @@
    </label>
 </template>
 
-<script setup lang="ts">
+<script>
 import { uidGen } from 'common/libs/uidGen';
-import { useFilters } from '@/composables/useFilters';
 
-const { lastPart } = useFilters();
+export default {
-
+   name: 'BaseUploadInput',
-defineProps({
+   props: {
-   message: {
+      message: {
-      default: 'Browse',
+         default: 'Browse',
-      type: String
+         type: String
+      },
+      modelValue: {
+         default: '',
+         type: String
+      }
    },
-   modelValue: {
+   emits: ['change', 'clear'],
-      default: '',
+   data () {
-      type: String
+      return {
+         id: uidGen()
+      };
+   },
+   methods: {
+      clear () {
+         this.$emit('clear');
+      },
+      lastPart (string) {
+         if (!string) return '';
+
+         string = string.split(/[/\\]+/).pop();
+         if (string.length >= 19)
+            string = `...${string.slice(-19)}`;
+         return string;
+      }
    }
-});
-
-const emit = defineEmits(['change', 'clear']);
-
-const id = uidGen();
-
-const clear = () => {
-   emit('clear');
 };
 </script>
 

src/renderer/components/BaseVirtualScroll.vue

@@ -1,5 +1,5 @@
 <template>
-   <div ref="root" class="vscroll-holder">
+   <div class="vscroll-holder">
       <div
          class="vscroll-spacer"
          :style="{
@@ -20,76 +20,71 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
+export default {
+   name: 'BaseVirtualScroll',
+   props: {
+      items: Array,
+      itemHeight: Number,
+      visibleHeight: Number,
+      scrollElement: {
+         type: HTMLDivElement,
+         default: null
+      }
+   },
+   data () {
+      return {
+         topHeight: 0,
+         bottomHeight: 0,
+         visibleItems: [],
+         renderTimeout: null,
+         localScrollElement: null
+      };
+   },
+   watch: {
+      scrollElement () {
+         this.setScrollElement();
+      }
+   },
+   mounted () {
+      this.setScrollElement();
+   },
+   beforeUnmount () {
+      this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
+   },
+   methods: {
+      checkScrollPosition (e) {
+         clearTimeout(this.renderTimeout);
 
-const props = defineProps({
+         this.renderTimeout = setTimeout(() => {
-   items: Array,
+            this.updateWindow(e);
-   itemHeight: Number,
+         }, 200);
-   visibleHeight: Number,
+      },
-   scrollElement: {
+      updateWindow () {
-      type: HTMLDivElement,
+         const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
-      default: null
+         const totalScrollHeight = this.items.length * this.itemHeight;
+         const offset = 50;
+
+         const scrollTop = this.localScrollElement.scrollTop;
+
+         const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
+         const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
+         const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
+         const lastCutIndex = lastVisibleIndex + offset;
+
+         this.visibleItems = this.items.slice(firstCutIndex, lastCutIndex);
+
+         this.topHeight = firstCutIndex * this.itemHeight;
+         this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
+      },
+      setScrollElement () {
+         if (this.localScrollElement)
+            this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
+
+         this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
+         this.updateWindow();
+         this.localScrollElement.addEventListener('scroll', this.checkScrollPosition);
+      }
    }
-});
-
-const root = ref(null);
-const topHeight: Ref<number> = ref(0);
-const bottomHeight: Ref<number> = ref(0);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const visibleItems: Ref<any[]> = ref([]);
-const renderTimeout: Ref<NodeJS.Timeout> = ref(null);
-const localScrollElement: Ref<HTMLDivElement> = ref(null);
-
-const checkScrollPosition = () => {
-   clearTimeout(renderTimeout.value);
-
-   renderTimeout.value = setTimeout(() => {
-      updateWindow();
-   }, 200);
 };
-
-const updateWindow = () => {
-   const visibleItemsCount = Math.ceil(props.visibleHeight / props.itemHeight);
-   const totalScrollHeight = props.items.length * props.itemHeight;
-   const offset = 50;
-
-   const scrollTop = localScrollElement.value.scrollTop;
-
-   const firstVisibleIndex = Math.floor(scrollTop / props.itemHeight);
-   const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
-   const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
-   const lastCutIndex = lastVisibleIndex + offset;
-
-   visibleItems.value = props.items.slice(firstCutIndex, lastCutIndex);
-
-   topHeight.value = firstCutIndex * props.itemHeight;
-   bottomHeight.value = totalScrollHeight - visibleItems.value.length * props.itemHeight - topHeight.value;
-};
-
-const setScrollElement = () => {
-   if (localScrollElement.value)
-      localScrollElement.value.removeEventListener('scroll', checkScrollPosition);
-
-   localScrollElement.value = props.scrollElement ? props.scrollElement : root.value;
-   updateWindow();
-   localScrollElement.value.addEventListener('scroll', checkScrollPosition);
-};
-
-watch(() => props.scrollElement, () => {
-   setScrollElement();
-});
-
-onMounted(() => {
-   setScrollElement();
-});
-
-onBeforeUnmount(() => {
-   localScrollElement.value.removeEventListener('scroll', checkScrollPosition);
-});
-
-defineExpose({
-   updateWindow
-});
-
 </script>

src/renderer/components/FakerSelect.vue

@@ -4,7 +4,7 @@
          v-model="selectedGroup"
          class="form-select"
          :options="[{name: 'manual'}, ...fakerGroups]"
-         :option-label="(opt: any) => opt.name === 'manual' ? t('message.manualValue') : t(`faker.${opt.name}`)"
+         :option-label="(opt) => opt.name === 'manual' ? $t('message.manualValue') : $t(`faker.${opt.name}`)"
          option-track-by="name"
          :disabled="!isChecked"
          style="flex-grow: 0;"
@@ -15,7 +15,7 @@
          v-if="selectedGroup !== 'manual'"
          v-model="selectedMethod"
          :options="fakerMethods"
-         :option-label="(opt: any) => t(`faker.${opt.name}`)"
+         :option-label="(opt) => $t(`faker.${opt.name}`)"
          option-track-by="name"
          class="form-select"
          :disabled="!isChecked"
@@ -41,7 +41,7 @@
       <BaseUploadInput
          v-else-if="inputProps().type === 'file'"
          :model-value="selectedValue"
-         :message="t('word.browse')"
+         :message="$t('word.browse')"
          @clear="clearValue"
          @change="filesChange($event)"
       />
@@ -85,152 +85,153 @@
    </fieldset>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, PropType, Ref, ref, watch } from 'vue';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
-import BaseUploadInput from '@/components/BaseUploadInput.vue';
+import BaseUploadInput from '@/components/BaseUploadInput';
-import ForeignKeySelect from '@/components/ForeignKeySelect.vue';
+import ForeignKeySelect from '@/components/ForeignKeySelect';
 import FakerMethods from 'common/FakerMethods';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'FakerSelect',
+   components: {
+      ForeignKeySelect,
+      BaseUploadInput,
+      BaseSelect
+   },
+   props: {
+      type: String,
+      field: Object,
+      isChecked: Boolean,
+      foreignKeys: Array,
+      keyUsage: Array,
+      fieldLength: Number,
+      fieldObj: Object
+   },
+   emits: ['update:modelValue'],
+   data () {
+      return {
+         localType: null,
+         selectedGroup: 'manual',
+         selectedMethod: '',
+         selectedValue: '',
+         debounceTimeout: null,
+         methodParams: {},
+         enumArray: null
+      };
+   },
+   computed: {
+      fakerGroups () {
+         if ([...TEXT, ...LONG_TEXT].includes(this.type))
+            this.localType = 'string';
+         else if (NUMBER.includes(this.type))
+            this.localType = 'number';
+         else if (FLOAT.includes(this.type))
+            this.localType = 'float';
+         else if ([...DATE, ...DATETIME].includes(this.type))
+            this.localType = 'datetime';
+         else if (TIME.includes(this.type))
+            this.localType = 'time';
+         else
+            this.localType = 'none';
 
-const props = defineProps({
+         return FakerMethods.getGroupsByType(this.localType);
-   type: String,
+      },
-   field: Object,
+      fakerMethods () {
-   isChecked: Boolean,
+         return FakerMethods.getMethods({ type: this.localType, group: this.selectedGroup });
-   foreignKeys: Array,
+      },
-   keyUsage: Array as PropType<{field: string}[]>,
+      methodData () {
-   fieldLength: Number,
+         return this.fakerMethods.find(method => method.name === this.selectedMethod);
-   fieldObj: Object
+      }
-});
+   },
-const emit = defineEmits(['update:modelValue']);
+   watch: {
-
+      fieldObj () {
-const localType: Ref<string> = ref(null);
+         if (this.fieldObj) {
-const selectedGroup: Ref<string> = ref('manual');
+            if (Array.isArray(this.fieldObj.value)) {
-const selectedMethod: Ref<string> = ref('');
+               this.enumArray = this.fieldObj.value;
-const selectedValue: Ref<string> = ref('');
+               this.selectedValue = this.fieldObj.value[0];
-const debounceTimeout: Ref<NodeJS.Timeout> = ref(null);
+            }
-const methodParams: Ref<{[key: string]: string}> = ref({});
+            else
-const enumArray: Ref<string[]> = ref(null);
+               this.selectedValue = this.fieldObj.value;
-
+         }
-const fakerGroups = computed(() => {
+      },
-   if ([...TEXT, ...LONG_TEXT].includes(props.type))
+      selectedGroup () {
-      localType.value = 'string';
+         if (this.fakerMethods.length)
-   else if (NUMBER.includes(props.type))
+            this.selectedMethod = this.fakerMethods[0].name;
-      localType.value = 'number';
+         else
-   else if (FLOAT.includes(props.type))
+            this.selectedMethod = '';
-      localType.value = 'float';
+      },
-   else if ([...DATE, ...DATETIME].includes(props.type))
+      selectedMethod () {
-      localType.value = 'datetime';
+         this.onChange();
-   else if (TIME.includes(props.type))
+      },
-      localType.value = 'time';
+      selectedValue () {
-   else
+         clearTimeout(this.debounceTimeout);
-      localType.value = 'none';
+         this.debounceTimeout = null;
-
+         this.debounceTimeout = setTimeout(() => {
-   return FakerMethods.getGroupsByType(localType.value);
+            this.onChange();
-});
+         }, 200);
-
+      }
-const fakerMethods = computed(() => {
+   },
-   return FakerMethods.getMethods({ type: localType.value, group: selectedGroup.value });
+   methods: {
-});
+      inputProps () {
-
+         if ([...TEXT, ...LONG_TEXT].includes(this.type))
-const methodData = computed(() => {
+            return { type: 'text', mask: false };
-   return fakerMethods.value.find(method => method.name === selectedMethod.value);
+
-});
+         if ([...NUMBER, ...FLOAT].includes(this.type))
-
+            return { type: 'number', mask: false };
-const inputProps = () => {
+
-   if ([...TEXT, ...LONG_TEXT].includes(props.type))
+         if (TIME.includes(this.type)) {
-      return { type: 'text', mask: false };
+            let timeMask = '##:##:##';
-
+            const precision = this.fieldLength;
-   if ([...NUMBER, ...FLOAT].includes(props.type))
+
-      return { type: 'number', mask: false };
+            for (let i = 0; i < precision; i++)
-
+               timeMask += i === 0 ? '.#' : '#';
-   if (TIME.includes(props.type)) {
+
-      let timeMask = '##:##:##';
+            return { type: 'text', mask: timeMask };
-      const precision = props.fieldLength;
+         }
-
+
-      for (let i = 0; i < precision; i++)
+         if (DATE.includes(this.type))
-         timeMask += i === 0 ? '.#' : '#';
+            return { type: 'text', mask: '####-##-##' };
-
+
-      return { type: 'text', mask: timeMask };
+         if (DATETIME.includes(this.type)) {
-   }
+            let datetimeMask = '####-##-## ##:##:##';
-
+            const precision = this.fieldLength;
-   if (DATE.includes(props.type))
+
-      return { type: 'text', mask: '####-##-##' };
+            for (let i = 0; i < precision; i++)
-
+               datetimeMask += i === 0 ? '.#' : '#';
-   if (DATETIME.includes(props.type)) {
+
-      let datetimeMask = '####-##-## ##:##:##';
+            return { type: 'text', mask: datetimeMask };
-      const precision = props.fieldLength;
+         }
-
+
-      for (let i = 0; i < precision; i++)
+         if (BLOB.includes(this.type))
-         datetimeMask += i === 0 ? '.#' : '#';
+            return { type: 'file', mask: false };
-
+
-      return { type: 'text', mask: datetimeMask };
+         if (BIT.includes(this.type))
-   }
+            return { type: 'text', mask: false };
-
+
-   if (BLOB.includes(props.type))
+         return { type: 'text', mask: false };
-      return { type: 'file', mask: false };
+      },
-
+      getKeyUsage (keyName) {
-   if (BIT.includes(props.type))
+         return this.keyUsage.find(key => key.field === keyName);
-      return { type: 'text', mask: false };
+      },
-
+      filesChange (event) {
-   return { type: 'text', mask: false };
+         const { files } = event.target;
-};
+         if (!files.length) return;
-
+
-const getKeyUsage = (keyName: string) => {
+         this.selectedValue = files[0].path;
-   return props.keyUsage.find(key => key.field === keyName);
+      },
-};
+      clearValue () {
-
+         this.selectedValue = '';
-const filesChange = ({ target } : {target: HTMLInputElement }) => {
+      },
-   const { files } = target;
+      onChange () {
-   if (!files.length) return;
+         this.$emit('update:modelValue', {
-
+            group: this.selectedGroup,
-   selectedValue.value = files[0].path;
+            method: this.selectedMethod,
-};
+            params: this.methodParams,
-
+            value: this.selectedValue,
-const clearValue = () => {
+            length: this.fieldLength
-   selectedValue.value = '';
+         });
-};
-
-const onChange = () => {
-   emit('update:modelValue', {
-      group: selectedGroup.value,
-      method: selectedMethod.value,
-      params: methodParams.value,
-      value: selectedValue.value,
-      length: props.fieldLength
-   });
-};
-
-watch(() => props.fieldObj, () => {
-   if (props.fieldObj) {
-      if (Array.isArray(props.fieldObj.value)) {
-         enumArray.value = props.fieldObj.value;
-         selectedValue.value = props.fieldObj.value[0];
       }
-      else
-         selectedValue.value = props.fieldObj.value;
    }
-});
+};
-
-watch(selectedGroup, () => {
-   if (fakerMethods.value.length)
-      selectedMethod.value = fakerMethods.value[0].name;
-   else
-      selectedMethod.value = '';
-});
-
-watch(selectedMethod, () => {
-   onChange();
-});
-
-watch(selectedValue, () => {
-   clearTimeout(debounceTimeout.value);
-   debounceTimeout.value = null;
-   debounceTimeout.value = setTimeout(() => {
-      onChange();
-   }, 200);
-});
 </script>

src/renderer/components/ForeignKeySelect.vue

@@ -8,101 +8,107 @@
       dropdown-class="select-sm"
       dropdown-container=".workspace-query-results > .vscroll"
       @change="onChange"
-      @blur="emit('blur')"
+      @blur="$emit('blur')"
    />
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, Ref, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import Tables from '@/ipc-api/Tables';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { TableField } from 'common/interfaces/antares';
-import { useFilters } from '@/composables/useFilters';
 
-const props = defineProps({
+export default {
-   modelValue: [String, Number],
+   name: 'ForeignKeySelect',
-   keyUsage: Object,
+   components: { BaseSelect },
-   size: {
+   props: {
-      type: String,
+      modelValue: [String, Number],
-      default: ''
+      keyUsage: Object,
-   }
+      size: {
-});
+         type: String,
-
+         default: ''
-const emit = defineEmits(['update:modelValue', 'blur']);
-
-const { addNotification } = useNotificationsStore();
-const workspacesStore = useWorkspacesStore();
-const { cutText } = useFilters();
-
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-
-const editField: Ref<HTMLSelectElement> = ref(null);
-const foreignList = ref([]);
-const currentValue = ref(null);
-
-const isValidDefault = computed(() => {
-   if (!foreignList.value.length) return true;
-   if (props.modelValue === null) return false;
-   return foreignList.value.some(foreign => foreign.foreign_column.toString() === props.modelValue?.toString());
-});
-
-const foreigns = computed(() => {
-   const list = [];
-   if (!isValidDefault.value)
-      list.push({ value: props.modelValue, label: props.modelValue === null ? 'NULL' : props.modelValue });
-   for (const row of foreignList.value)
-      list.push({ value: row.foreign_column, label: `${row.foreign_column} ${cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '', 15)}` });
-   return list;
-});
-
-const onChange = (opt: HTMLSelectElement) => {
-   emit('update:modelValue', opt.value);
-};
-
-watch(() => props.modelValue, () => {
-   currentValue.value = props.modelValue;
-});
-
-let foreignDesc: string | false;
-const params = {
-   uid: selectedWorkspace.value,
-   schema: props.keyUsage.refSchema,
-   table: props.keyUsage.refTable
-};
-
-(async () => {
-   try { // Field data
-      const { status, response } = await Tables.getTableColumns(params);
-
-      if (status === 'success') {
-         const textField = (response as TableField[]).find((field: {type: string; name: string}) => [...TEXT, ...LONG_TEXT].includes(field.type) && field.name !== props.keyUsage.refField);
-         foreignDesc = textField ? textField.name : false;
       }
-      else
+   },
-         addNotification({ status: 'error', message: response });
+   emits: ['update:modelValue', 'blur'],
-   }
+   setup () {
-   catch (err) {
+      const { addNotification } = useNotificationsStore();
-      addNotification({ status: 'error', message: err.stack });
+      const workspacesStore = useWorkspacesStore();
-   }
 
-   try { // Foregn list
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-      const { status, response } = await Tables.getForeignList({
-         ...params,
-         column: props.keyUsage.refField,
-         description: foreignDesc
-      });
 
-      if (status === 'success')
+      return { addNotification, selectedWorkspace };
-         foreignList.value = response.rows;
+   },
-      else
+   data () {
-         addNotification({ status: 'error', message: response });
+      return {
+         foreignList: [],
+         currentValue: this.modelValue
+      };
+   },
+   computed: {
+      isValidDefault () {
+         if (!this.foreignList.length) return true;
+         if (this.modelValue === null) return false;
+         return this.foreignList.some(foreign => foreign.foreign_column.toString() === this.modelValue.toString());
+      },
+      foreigns () {
+         const list = [];
+
+         if (!this.isValidDefault)
+            list.push({ value: this.modelValue, label: this.modelValue === null ? 'NULL' : this.modelValue });
+
+         for (const row of this.foreignList)
+            list.push({ value: row.foreign_column, label: `${row.foreign_column} ${this.cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '')}` });
+
+         return list;
+      }
+   },
+   async created () {
+      let foreignDesc;
+      const params = {
+         uid: this.selectedWorkspace,
+         schema: this.keyUsage.refSchema,
+         table: this.keyUsage.refTable
+      };
+
+      try { // Field data
+         const { status, response } = await Tables.getTableColumns(params);
+         if (status === 'success') {
+            const textField = response.find(field => [...TEXT, ...LONG_TEXT].includes(field.type) && field.name !== this.keyUsage.refField);
+            foreignDesc = textField ? textField.name : false;
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+
+      try { // Foregn list
+         const { status, response } = await Tables.getForeignList({
+            ...params,
+            column: this.keyUsage.refField,
+            description: foreignDesc
+         });
+
+         if (status === 'success')
+            this.foreignList = response.rows;
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+   },
+   methods: {
+      onChange (opt) {
+         this.$emit('update:modelValue', opt.value);
+      },
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 15 ? `${val.substring(0, 15)}...` : val;
+      }
    }
-   catch (err) {
+};
-      addNotification({ status: 'error', message: err.stack });
-   }
-})();
 </script>

src/renderer/components/KeyPressDetector.vue

@@ -1,122 +0,0 @@
-<template>
-   <div class="form-group has-icon-right m-0">
-      <input
-         class="form-input"
-         type="text"
-         :value="pressedKeys"
-         :placeholder="t('message.registerAShortcut')"
-         @focus="isFocus = true"
-         @blur="isFocus = false"
-         @keydown.prevent.stop="onKey"
-      >
-      <i class="form-icon mdi mdi-keyboard-outline mdi-24px" />
-   </div>
-</template>
-<script setup lang="ts">
-import { computed, PropType, Ref, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Application from '@/ipc-api/Application';
-
-const { t } = useI18n();
-
-const emit = defineEmits(['update:modelValue']);
-
-const isMacOS = process.platform === 'darwin';
-
-const props = defineProps({
-   modelValue: String as PropType<string | Electron.Accelerator>
-});
-
-const isFocus = ref(false);
-const keyboardEvent: Ref<KeyboardEvent> = ref(null);
-
-const pressedKeys = computed(() => {
-   const keys: string[] = [];
-   const singleKeysToIgnore = ['Dead', 'Backspace', 'ArrotLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-   const specialKeys = ['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu', 'Escape'];
-   const keysFromCode = ['Space', 'Minus', 'Equal', 'Slash', 'Quote', 'Semicolon', 'Comma', 'Period', 'Backslash', 'BracketLeft', 'BracketRight'];
-
-   if (props.modelValue && !keyboardEvent.value)
-      return props.modelValue;
-   else if (keyboardEvent.value) {
-      if (keyboardEvent.value.altKey)
-         keys.push('Alt');
-      if (keyboardEvent.value.ctrlKey)
-         keys.push('Control');
-      if (keyboardEvent.value.metaKey && isMacOS)
-         keys.push('Command');
-      if (keyboardEvent.value.shiftKey && keys.length)
-         keys.push('Shift');
-      if (keyboardEvent.value.code) {
-         if (keys.length === 0 && (keyboardEvent.value.key.length === 1 || singleKeysToIgnore.includes(keyboardEvent.value.key)))
-            return t('message.invalidShortcutMessage');
-         else if (!specialKeys.includes(keyboardEvent.value.key)) {
-            if (keyboardEvent.value.key === 'Dead') {
-               keys.push(keyboardEvent.value.code
-                  .replace('Digit', '')
-                  .replace('Key', '')
-                  .replace('Quote', '\'')
-                  .replace('Backquote', '`'));
-            }
-            else if (keysFromCode.includes(keyboardEvent.value.code) || keyboardEvent.value.code.includes('Digit')) {
-               keys.push(keyboardEvent.value.code
-                  .replace('Quote', '\'')
-                  .replace('Semicolon', ';')
-                  .replace('Slash', '/')
-                  .replace('Backslash', '\\')
-                  .replace('BracketLeft', '[')
-                  .replace('BracketRight', ']')
-                  .replace('Comma', ',')
-                  .replace('Period', '.')
-                  .replace('Minus', '-')
-                  .replace('Equal', '=')
-                  .replace('Digit', '')
-                  .replace('Key', ''));
-            }
-            else {
-               keys.push(keyboardEvent.value.key.length === 1
-                  ? keyboardEvent.value.key.toUpperCase()
-                  : keyboardEvent.value.key
-                     .replace('Arrow', '')
-               );
-            }
-         }
-         else
-            return t('message.invalidShortcutMessage');
-      }
-   }
-
-   return keys.join('+');
-});
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   e.preventDefault();
-   keyboardEvent.value = e;
-};
-
-watch(pressedKeys, (value) => {
-   if (value !== t('message.invalidShortcutMessage'))
-      emit('update:modelValue', pressedKeys.value);
-});
-
-watch(isFocus, (val) => {
-   if (val)
-      Application.unregisterShortcuts();
-   else
-      Application.reloadShortcuts();
-});
-</script>
-<style lang="scss" scoped>
-.has-icon-right {
-   .form-input {
-      padding-right: 1.8rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      caret-color: transparent;
-   }
-   .form-icon {
-      right: 0.4rem;
-   }
-}
-</style>

src/renderer/components/ModalAllConnections.vue

@@ -1,356 +0,0 @@
-<template>
-   <Teleport to="#window-content">
-      <div class="modal active">
-         <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" 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-apps mr-1" />
-                     <span class="cut-text">{{ t('message.allConnections') }}</span>
-                  </div>
-               </div>
-               <a class="btn btn-clear c-hand" @click.stop="closeModal" />
-            </div>
-            <div class="modal-body py-0">
-               <div class="columns">
-                  <div class="connections-search column col-12 columns col-gapless">
-                     <div class="column col-12 mt-2">
-                        <div ref="searchForm" class="form-group has-icon-right p-2 m-0">
-                           <input
-                              v-model="searchTerm"
-                              class="form-input"
-                              type="text"
-                              :placeholder="t('message.searchForConnections')"
-                              @keypress.esc="searchTerm = ''"
-                           >
-                           <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>
-                  </div>
-                  <TransitionGroup name="fade" :duration="{ enter: 200, leave: 200 }">
-                     <div
-                        v-for="connection in filteredConnections"
-                        :key="connection.uid"
-                        class="connection-block column col-md-6 col-lg-4 col-3 p-3"
-                        tabindex="0"
-                        @click.stop="selectConnection(connection.uid)"
-                        @keypress.stop.enter="selectConnection(connection.uid)"
-                        @mouseover="connectionHover = connection.uid"
-                        @mouseleave="connectionHover = null"
-                     >
-                        <div class="panel">
-                           <div class="panel-header p-2 text-center p-relative">
-                              <figure class="avatar avatar-lg pt-1 mb-1">
-                                 <i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`]" />
-                              </figure>
-                              <div class="panel-title h6 text-ellipsis">
-                                 {{ getConnectionName(connection.uid) }}
-                              </div>
-                              <div class="panel-subtitle">
-                                 {{ clients.get(connection.client) || connection.client }}
-                              </div>
-                              <div class="all-connections-buttons p-absolute d-flex" style="top: 0; right: 0;">
-                                 <i
-                                    v-if="connection.isPinned"
-                                    class="all-connections-pinned mdi mdi-18px"
-                                    :class="connectionHover === connection.uid ? 'mdi-pin-off' : 'mdi-pin'"
-                                    :title="t('word.unpin')"
-                                    @click.stop="unpinConnection(connection.uid)"
-                                 />
-                                 <i
-                                    v-else
-                                    class="all-connections-pin mdi mdi-18px mdi-pin mdi-rotate-45"
-                                    :title="t('word.pin')"
-                                    @click.stop="pinConnection(connection.uid)"
-                                 />
-                                 <i
-                                    class="all-connections-delete mdi mdi-delete mdi-18px ml-2"
-                                    :title="t('word.delete')"
-                                    @click.stop="askToDelete(connection)"
-                                 />
-                              </div>
-                           </div>
-                           <div class="panel-body text-center">
-                              <div v-if="connection.databasePath">
-                                 <div class="text-ellipsis" :title="connection.databasePath">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
-                                       connection.databasePath
-                                    }}</span>
-                                 </div>
-                              </div>
-                              <div v-else>
-                                 <div class="text-ellipsis" :title="`${connection.host}:${connection.port}`">
-                                    <i class="mdi mdi-server d-inline" /> <span class="text-bold">{{ connection.host
-                                    }}:{{ connection.port }}</span>
-                                 </div>
-                              </div>
-                              <div v-if="connection.user">
-                                 <div class="text-ellipsis">
-                                    <i class="mdi mdi-account d-inline" /> <span class="text-bold">{{ connection.user
-                                    }}</span>
-                                 </div>
-                              </div>
-                              <div v-if="connection.schema">
-                                 <div class="text-ellipsis">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.schema
-                                    }}</span>
-                                 </div>
-                              </div>
-                              <div v-if="connection.database">
-                                 <div class="text-ellipsis">
-                                    <i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
-                                       connection.database
-                                    }}</span>
-                                 </div>
-                              </div>
-                           </div>
-                           <div class="panel-footer text-center py-0">
-                              <div v-if="connection.ssl" class="chip bg-success mt-2">
-                                 <i class="mdi mdi-lock mdi-18px mr-1" />
-                                 SSL
-                              </div>
-                              <div v-if="connection.ssh" class="chip bg-success mt-2">
-                                 <i class="mdi mdi-console-network mdi-18px mr-1" />
-                                 SSH
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-                     <input
-                        key="trick"
-                        readonly
-                        class="p-absolute"
-                        style="width: 1px; height: 1px; opacity: 0;"
-                        type="text"
-                     >
-                     <!-- workaround for useFocusTrap $lastFocusable -->
-                  </TransitionGroup>
-               </div>
-            </div>
-         </div>
-      </div>
-
-      <ConfirmModal
-         v-if="isConfirmModal"
-         @confirm="confirmDeleteConnection"
-         @hide="isConfirmModal = false"
-      >
-         <template #header>
-            <div class="d-flex">
-               <i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('message.deleteConnection') }}
-            </div>
-         </template>
-         <template #body>
-            <div class="mb-2">
-               {{ t('message.deleteCorfirm') }} <b>{{ selectedConnectionName }}</b>?
-            </div>
-         </template>
-      </ConfirmModal>
-   </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, Ref, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-import { useFocusTrap } from '@/composables/useFocusTrap';
-import { useConnectionsStore } from '@/stores/connections';
-import { useWorkspacesStore } from '@/stores/workspaces';
-import ConfirmModal from '@/components/BaseConfirmModal.vue';
-import { ConnectionParams } from 'common/interfaces/antares';
-
-const { t } = useI18n();
-
-const connectionsStore = useConnectionsStore();
-const workspacesStore = useWorkspacesStore();
-
-const { connections,
-   pinnedConnections,
-   lastConnections
-} = storeToRefs(connectionsStore);
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-
-const {
-   getConnectionName,
-   pinConnection,
-   unpinConnection,
-   deleteConnection
-} = connectionsStore;
-const { selectWorkspace } = workspacesStore;
-
-const { trapRef } = useFocusTrap();
-
-const emit = defineEmits(['close']);
-
-const clients = new Map([
-   ['mysql', 'MySQL'],
-   ['maria', 'MariaDB'],
-   ['pg', 'PostgreSQL'],
-   ['sqlite', 'SQLite']
-]);
-
-const searchTerm = ref('');
-const isConfirmModal = ref(false);
-const connectionHover: Ref<string> = ref(null);
-const selectedConnection: Ref<ConnectionParams> = ref(null);
-
-const sortedConnections = computed(() => {
-   return connections.value
-      .map(c => {
-         const connTime = lastConnections.value.find((lc) => lc.uid === c.uid)?.time || 0;
-         return {
-            ...c,
-            time: connTime,
-            isPinned: pinnedConnections.value.has(c.uid)
-         };
-      })
-      .sort((a, b) => {
-         if (a.isPinned < b.isPinned) return 1;
-         if (a.isPinned > b.isPinned) return -1;
-         if (a.time < b.time) return 1;
-         if (a.time > b.time) return -1;
-         return 0;
-      });
-});
-
-const filteredConnections = computed(() => {
-   return sortedConnections.value.filter(connection => {
-      return connection.name?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         connection.host?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         connection.database?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         connection.databasePath?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         connection.schema?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         connection.user?.toLocaleLowerCase().includes(searchTerm.value.toLocaleLowerCase()) ||
-         String(connection.port)?.includes(searchTerm.value);
-   });
-});
-
-const selectedConnectionName = computed(() => getConnectionName(selectedConnection.value?.uid));
-
-const closeModal = () => emit('close');
-
-const selectConnection = (uid: string) => {
-   selectWorkspace(uid);
-   closeModal();
-};
-
-const askToDelete = (connection: ConnectionParams) => {
-   selectedConnection.value = connection;
-   isConfirmModal.value = true;
-};
-
-const confirmDeleteConnection = () => {
-   if (selectedWorkspace.value === selectedConnection.value.uid)
-      selectWorkspace(null);
-   deleteConnection(selectedConnection.value);
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape') {
-      if ((e.target as HTMLInputElement).tagName === 'INPUT' && searchTerm.value.length > 0)
-         searchTerm.value = '';
-      else
-         closeModal();
-   }
-};
-
-window.addEventListener('keydown', onKey);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
-</script>
-
-<style lang="scss" scoped>
-.vscroll {
-  height: 1000px;
-  overflow: auto;
-  overflow-anchor: none;
-}
-
-.column-resizable {
-  &:hover,
-  &:active {
-    resize: horizontal;
-    overflow: hidden;
-  }
-}
-
-.table-column-title {
-  display: flex;
-  align-items: center;
-}
-
-.sort-icon {
-  font-size: 0.7rem;
-  line-height: 1;
-  margin-left: 0.2rem;
-}
-
-.modal {
-  align-items: flex-start;
-
-  .modal-container {
-    max-width: 75vw;
-    margin-top: 10vh;
-
-    .modal-body {
-      height: 80vh;
-    }
-  }
-}
-
-.connections-search {
-  display: flex;
-  justify-content: space-around;
-}
-
-.connection-block {
-  cursor: pointer;
-  transition: all 0.2s;
-  border-radius: $border-radius;
-  outline: none;
-
-  &:focus {
-    box-shadow: 0 0 3px 0.1rem rgba($primary-color, 80%);
-  }
-
-  &:hover {
-    .all-connections-buttons {
-      .all-connections-delete,
-      .all-connections-pinned,
-      .all-connections-pin {
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .all-connections-buttons {
-    .all-connections-pinned {
-      opacity: 0.3;
-      transition: opacity 0.2s;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .all-connections-delete,
-    .all-connections-pin {
-      opacity: 0;
-      transition: opacity 0.2s;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>

src/renderer/components/ModalAskCredentials.vue

@@ -2,11 +2,11 @@
    <Teleport to="#window-content">
       <div class="modal active modal-sm">
          <a class="modal-overlay" />
-         <div ref="trapRef" class="modal-container p-0">
+         <div class="modal-container p-0">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
-                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ t('word.credentials') }}
+                     <i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ $t('word.credentials') }}
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -16,7 +16,7 @@
                   <form class="form-horizontal">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.user') }}</label>
+                           <label class="form-label">{{ $t('word.user') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -29,7 +29,7 @@
                      </div>
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.password') }}</label>
+                           <label class="form-label">{{ $t('word.password') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -44,10 +44,10 @@
             </div>
             <div class="modal-footer">
                <button class="btn btn-primary mr-2" @click.stop="sendCredentials">
-                  {{ t('word.send') }}
+                  {{ $t('word.send') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ t('word.close') }}
+                  {{ $t('word.close') }}
                </button>
             </div>
          </div>
@@ -55,31 +55,30 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { Ref, ref } from 'vue';
+export default {
-import { useFocusTrap } from '@/composables/useFocusTrap';
+   name: 'ModalAskCredentials',
-import { useI18n } from 'vue-i18n';
+   emits: ['close-asking', 'credentials'],
-
+   data () {
-const { t } = useI18n();
+      return {
-
+         credentials: {
-const { trapRef } = useFocusTrap();
+            user: '',
-
+            password: ''
-const credentials = ref({
+         }
-   user: '',
+      };
-   password: ''
+   },
-});
+   created () {
-const firstInput: Ref<HTMLInputElement> = ref(null);
+      setTimeout(() => {
-const emit = defineEmits(['close-asking', 'credentials']);
+         this.$refs.firstInput.focus();
-
+      }, 20);
-const closeModal = () => {
+   },
-   emit('close-asking');
+   methods: {
+      closeModal () {
+         this.$emit('close-asking');
+      },
+      sendCredentials () {
+         this.$emit('credentials', this.credentials);
+      }
+   }
 };
-
-const sendCredentials = () => {
-   emit('credentials', credentials.value);
-};
-
-setTimeout(() => {
-   firstInput.value.focus();
-}, 20);
 </script>

src/renderer/components/ModalAskParameters.vue

@@ -1,7 +1,7 @@
 <template>
    <ConfirmModal
-      :confirm-text="t('word.run')"
+      :confirm-text="$t('word.run')"
-      :cancel-text="t('word.cancel')"
+      :cancel-text="$t('word.cancel')"
       size="400"
       @confirm="runRoutine"
       @hide="closeModal"
@@ -9,7 +9,7 @@
       <template #header>
          <div class="d-flex">
             <i class="mdi mdi-24px mdi-play mr-1" />
-            <span class="cut-text">{{ t('word.parameters') }}: {{ localRoutine.name }}</span>
+            <span class="cut-text">{{ $t('word.parameters') }}: {{ localRoutine.name }}</span>
          </div>
       </template>
       <template #body>
@@ -47,76 +47,83 @@
    </ConfirmModal>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, PropType, Ref, ref } from 'vue';
 import { NUMBER, FLOAT } from 'common/fieldTypes';
-import { FunctionInfos, RoutineInfos } from 'common/interfaces/antares';
+import ConfirmModal from '@/components/BaseConfirmModal';
-import ConfirmModal from '@/components/BaseConfirmModal.vue';
-import { useFilters } from '@/composables/useFilters';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
-
+   name: 'ModalAskParameters',
-const { wrapNumber } = useFilters();
+   components: {
-
+      ConfirmModal
-const props = defineProps({
+   },
-   localRoutine: Object as PropType<RoutineInfos | FunctionInfos>,
+   props: {
-   client: String
+      localRoutine: Object,
-});
+      client: String
-
+   },
-const emit = defineEmits(['confirm', 'close']);
+   emits: ['confirm', 'close'],
-
+   data () {
-const firstInput: Ref<HTMLInputElement[]> = ref(null);
+      return {
-const values: Ref<{[key: string]: string}> = ref({});
+         values: {}
-
+      };
-const inParameters = computed(() => {
+   },
-   return props.localRoutine.parameters.filter(param => param.context === 'IN');
+   computed: {
-});
+      inParameters () {
-
+         return this.localRoutine.parameters.filter(param => param.context === 'IN');
-const typeClass = (type: string) => {
-   if (type)
-      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-   return '';
-};
-
-const runRoutine = () => {
-   const valArr = Object.keys(values.value).reduce((acc, curr, i) => {
-      let qc;
-      switch (props.client) {
-         case 'maria':
-         case 'mysql':
-            qc = '"';
-            break;
-         case 'pg':
-            qc = '\'';
-            break;
-         default:
-            qc = '"';
       }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
 
-      const param = props.localRoutine.parameters.find(param => `${i}-${param.name}` === curr);
+      setTimeout(() => {
+         this.$refs.firstInput[0].focus();
+      }, 20);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      typeClass (type) {
+         if (type)
+            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+         return '';
+      },
+      runRoutine () {
+         const valArr = Object.keys(this.values).reduce((acc, curr, i) => {
+            let qc;
+            switch (this.client) {
+               case 'maria':
+               case 'mysql':
+                  qc = '"';
+                  break;
+               case 'pg':
+                  qc = '\'';
+                  break;
+               default:
+                  qc = '"';
+            }
 
-      const value = [...NUMBER, ...FLOAT].includes(param.type) ? values.value[curr] : `${qc}${values.value[curr]}${qc}`;
+            const param = this.localRoutine.parameters.find(param => `${i}-${param.name}` === curr);
-      acc.push(value);
-      return acc;
-   }, []);
 
-   emit('confirm', valArr);
+            const value = [...NUMBER, ...FLOAT].includes(param.type) ? this.values[curr] : `${qc}${this.values[curr]}${qc}`;
+            acc.push(value);
+            return acc;
+         }, []);
+         this.$emit('confirm', valArr);
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   }
 };
-
-const closeModal = () => emit('close');
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-window.addEventListener('keydown', onKey);
-
-setTimeout(() => {
-   firstInput.value[0].focus();
-}, 20);
 </script>
 
 <style scoped>

src/renderer/components/ModalDiscardChanges.vue

@@ -1,43 +1,46 @@
 <template>
    <ConfirmModal
-      :confirm-text="t('word.discard')"
+      :confirm-text="$t('word.discard')"
-      :cancel-text="t('word.stay')"
+      :cancel-text="$t('word.stay')"
-      @confirm="emit('confirm')"
+      @confirm="$emit('confirm')"
-      @hide="emit('close')"
+      @hide="$emit('close')"
    >
       <template #header>
          <div class="d-flex">
-            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ t('message.unsavedChanges') }}
+            <i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ $t('message.unsavedChanges') }}
          </div>
       </template>
       <template #body>
          <div>
-            {{ t('message.discardUnsavedChanges') }}
+            {{ $t('message.discardUnsavedChanges') }}
          </div>
       </template>
    </ConfirmModal>
 </template>
 
-<script setup lang="ts">
+<script>
-import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import ConfirmModal from '@/components/BaseConfirmModal';
-import { onBeforeUnmount } from 'vue';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
-
+   name: 'ModalDiscardChanges',
-const emit = defineEmits(['confirm', 'close']);
+   components: {
-
+      ConfirmModal
-const onKey = (e: KeyboardEvent) => {
+   },
-   e.stopPropagation();
+   emits: ['confirm', 'close'],
-   if (e.key === 'Escape')
+   created () {
-      emit('close');
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      }
+   }
 };
-
-window.addEventListener('keydown', onKey);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style scoped>

src/renderer/components/ModalEditSchema.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0">
+         <div class="modal-container p-0">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-edit mr-1" />
-                     <span class="cut-text">{{ t('message.editSchema') }}</span>
+                     <span class="cut-text">{{ $t('message.editSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -17,7 +17,7 @@
                   <form class="form-horizontal">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.name') }}</label>
+                           <label class="form-label">{{ $t('word.name') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -26,14 +26,14 @@
                               class="form-input"
                               type="text"
                               required
-                              :placeholder="t('message.schemaName')"
+                              :placeholder="$t('message.schemaName')"
                               readonly
                            >
                         </div>
                      </div>
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.collation') }}</label>
+                           <label class="form-label">{{ $t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
                            <BaseSelect
@@ -43,7 +43,7 @@
                               option-label="collation"
                               option-track-by="collation"
                            />
-                           <small>{{ t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
                   </form>
@@ -51,10 +51,10 @@
             </div>
             <div class="modal-footer">
                <button class="btn btn-primary mr-2" @click.stop="updateSchema">
-                  {{ t('word.update') }}
+                  {{ $t('word.update') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ t('word.close') }}
+                  {{ $t('word.close') }}
                </button>
             </div>
          </div>
@@ -62,105 +62,116 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalEditSchema',
+   components: {
+      BaseSelect
+   },
+   props: {
+      selectedSchema: String
+   },
+   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const props = defineProps({
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-   selectedSchema: String
-});
 
-const emit = defineEmits(['close']);
+      const { getWorkspace, getDatabaseVariable } = workspacesStore;
 
-const { addNotification } = useNotificationsStore();
+      return {
-const workspacesStore = useWorkspacesStore();
+         addNotification,
-
+         selectedWorkspace,
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+         getWorkspace,
-
+         getDatabaseVariable
-const { getWorkspace, getDatabaseVariable } = workspacesStore;
+      };
-
+   },
-const { trapRef } = useFocusTrap();
+   data () {
-
+      return {
-const firstInput: Ref<HTMLInputElement> = ref(null);
+         database: {
-const database = ref({
+            name: '',
-   name: '',
+            prevName: '',
-   prevName: '',
+            collation: ''
-   collation: '',
+         }
-   prevCollation: null
+      };
-});
+   },
-
+   computed: {
-const collations = computed(() => getWorkspace(selectedWorkspace.value).collations);
+      collations () {
-const defaultCollation = computed(() => (getDatabaseVariable(selectedWorkspace.value, 'collation_server').value || ''));
+         return this.getWorkspace(this.selectedWorkspace).collations;
-
+      },
-const updateSchema = async () => {
+      defaultCollation () {
-   if (database.value.collation !== database.value.prevCollation) {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+      }
+   },
+   async created () {
+      let actualCollation;
       try {
-         const { status, response } = await Schema.updateSchema({
+         const { status, response } = await Schema.getDatabaseCollation({ uid: this.selectedWorkspace, database: this.selectedSchema });
-            uid: selectedWorkspace.value,
-            ...database.value
-         });
 
          if (status === 'success')
-            closeModal();
+            actualCollation = response;
+
          else
-            addNotification({ status: 'error', message: response });
+            this.addNotification({ status: 'error', message: response });
       }
       catch (err) {
-         addNotification({ status: 'error', message: err.stack });
+         this.addNotification({ status: 'error', message: err.stack });
+      }
+
+      this.database = {
+         name: this.selectedSchema,
+         prevName: this.selectedSchema,
+         collation: actualCollation || this.defaultCollation,
+         prevCollation: actualCollation || this.defaultCollation
+      };
+
+      window.addEventListener('keydown', this.onKey);
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      async updateSchema () {
+         if (this.database.collation !== this.database.prevCollation) {
+            try {
+               const { status, response } = await Schema.updateSchema({
+                  uid: this.selectedWorkspace,
+                  ...this.database
+               });
+
+               if (status === 'success')
+                  this.closeModal();
+               else
+                  this.addNotification({ status: 'error', message: response });
+            }
+            catch (err) {
+               this.addNotification({ status: 'error', message: err.stack });
+            }
+         }
+         else
+            this.closeModal();
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
    }
-   else closeModal();
 };
-
-const closeModal = () => emit('close');
-
-const onKey =(e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-(async () => {
-   let actualCollation;
-   try {
-      const { status, response } = await Schema.getDatabaseCollation({ uid: selectedWorkspace.value, database: props.selectedSchema });
-
-      if (status === 'success')
-         actualCollation = response;
-
-      else
-         addNotification({ status: 'error', message: response });
-   }
-   catch (err) {
-      addNotification({ status: 'error', message: err.stack });
-   }
-
-   database.value = {
-      name: props.selectedSchema,
-      prevName: props.selectedSchema,
-      collation: actualCollation || defaultCollation.value,
-      prevCollation: actualCollation || defaultCollation.value
-   };
-
-   window.addEventListener('keydown', onKey);
-
-   setTimeout(() => {
-      firstInput.value.focus();
-   }, 20);
-})();
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
-
 </script>
 
 <style scoped>

src/renderer/components/ModalExportSchema.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0">
+         <div class="modal-container p-0">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-arrow-down mr-1" />
-                     <span class="cut-text">{{ t('message.exportSchema') }}</span>
+                     <span class="cut-text">{{ $t('message.exportSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -16,7 +16,7 @@
                <div class="container">
                   <div class="columns">
                      <div class="col-3">
-                        <label class="form-label">{{ t('message.directoryPath') }}</label>
+                        <label class="form-label">{{ $t('message.directoryPath') }}</label>
                      </div>
                      <div class="col-9">
                         <fieldset class="input-group">
@@ -26,14 +26,14 @@
                               type="text"
                               required
                               readonly
-                              :placeholder="t('message.schemaName')"
+                              :placeholder="$t('message.schemaName')"
                            >
                            <button
                               type="button"
                               class="btn btn-primary input-group-btn"
                               @click.prevent="openPathDialog"
                            >
-                              {{ t('word.change') }}
+                              {{ $t('word.change') }}
                            </button>
                         </fieldset>
                      </div>
@@ -51,14 +51,14 @@
                         <div class="column col-auto col-ml-auto ">
                            <button
                               class="btn btn-dark btn-sm"
-                              :title="t('word.refresh')"
+                              :title="$t('word.refresh')"
                               @click="refresh"
                            >
                               <i class="mdi mdi-database-refresh" />
                            </button>
                            <button
                               class="btn btn-dark btn-sm mx-1"
-                              :title="t('message.uncheckAllTables')"
+                              :title="$t('message.uncheckAllTables')"
                               :disabled="isRefreshing"
                               @click="uncheckAllTables"
                            >
@@ -66,7 +66,7 @@
                            </button>
                            <button
                               class="btn btn-dark btn-sm"
-                              :title="t('message.checkAllTables')"
+                              :title="$t('message.checkAllTables')"
                               :disabled="isRefreshing"
                               @click="checkAllTables"
                            >
@@ -122,22 +122,22 @@
                               <div class="tr">
                                  <div class="th" style="width: 50%;">
                                     <div class="table-column-title">
-                                       <span>{{ t('word.table') }}</span>
+                                       <span>{{ $t('word.table') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ t('word.structure') }}</span>
+                                       <span>{{ $t('word.structure') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ t('word.content') }}</span>
+                                       <span>{{ $t('word.content') }}</span>
                                     </div>
                                  </div>
                                  <div class="th text-center">
                                     <div class="table-column-title">
-                                       <span>{{ t('word.drop') }}</span>
+                                       <span>{{ $t('word.drop') }}</span>
                                     </div>
                                  </div>
                               </div>
@@ -146,7 +146,7 @@
                            <div class="tbody">
                               <div
                                  v-for="item in tables"
-                                 :key="item.table"
+                                 :key="item.name"
                                  class="tr"
                               >
                                  <div class="td">
@@ -183,19 +183,19 @@
                   </div>
                   <div class="column col-4">
                      <h5 class="h5">
-                        {{ t('word.options') }}
+                        {{ $t('word.options') }}
                      </h5>
-                     <span class="h6">{{ t('word.includes') }}:</span>
+                     <span class="h6">{{ $t('word.includes') }}:</span>
                      <label
                         v-for="(_, key) in options.includes"
                         :key="key"
                         class="form-checkbox"
                      >
-                        <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ t(`word.${key}`, 2) }}
+                        <input v-model="options.includes[key]" type="checkbox"><i class="form-icon" /> {{ $tc(`word.${key}`, 2) }}
                      </label>
-                     <div v-if="clientCustoms.exportByChunks">
+                     <div v-if="customizations.exportByChunks">
                         <div class="h6 mt-4 mb-2">
-                           {{ t('message.newInserStmtEvery') }}:
+                           {{ $t('message.newInserStmtEvery') }}:
                         </div>
                         <div class="columns">
                            <div class="column col-6">
@@ -209,21 +209,21 @@
                               <BaseSelect
                                  v-model="options.sqlInsertDivider"
                                  class="form-select"
-                                 :options="[{value: 'bytes', label: 'KiB'}, {value: 'rows', label: t('word.row', 2)}]"
+                                 :options="[{value: 'bytes', label: 'KiB'}, {value: 'rows', label: $tc('word.row', 2)}]"
                               />
                            </div>
                         </div>
                      </div>
 
                      <div class="h6 mb-2 mt-4">
-                        {{ t('message.ourputFormat') }}:
+                        {{ $t('message.ourputFormat') }}:
                      </div>
                      <div class="columns">
                         <div class="column h5 mb-4">
                            <BaseSelect
                               v-model="options.outputFormat"
                               class="form-select"
-                              :options="[{value: 'sql', label: t('message.singleFile', {ext: '.sql'})}, {value: 'sql.zip', label: t('message.zipCompressedFile', {ext: '.sql'})}]"
+                              :options="[{value: 'sql', label: $t('message.singleFile', {ext: '.sql'})}, {value: 'sql.zip', label: $t('message.zipCompressedFile', {ext: '.sql'})}]"
                            />
                         </div>
                      </div>
@@ -245,7 +245,7 @@
                </div>
                <div class="column col-auto px-0">
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ t('word.close') }}
+                     {{ $t('word.close') }}
                   </button>
                   <button
                      class="btn btn-primary mr-2"
@@ -254,7 +254,7 @@
                      autofocus
                      @click.prevent="startExport"
                   >
-                     {{ t('word.export') }}
+                     {{ $t('word.export') }}
                   </button>
                </div>
             </div>
@@ -263,213 +263,211 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeUnmount, Ref, ref } from 'vue';
+import moment from 'moment';
-import * as moment from 'moment';
 import { ipcRenderer } from 'electron';
 import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-import { ClientCode, SchemaInfos } from 'common/interfaces/antares';
-import { ExportOptions, ExportState } from 'common/interfaces/exporter';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { useFocusTrap } from '@/composables/useFocusTrap';
+import customizations from 'common/customizations';
 import Application from '@/ipc-api/Application';
 import Schema from '@/ipc-api/Schema';
-import { Customizations } from 'common/interfaces/customizations';
 import BaseSelect from '@/components/BaseSelect.vue';
 
-const props = defineProps({
+export default {
-   selectedSchema: String
+   name: 'ModalExportSchema',
-});
+   components: {
+      BaseSelect
+   },
+   props: {
+      selectedSchema: String
+   },
+   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const emit = defineEmits(['close']);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-const { t } = useI18n();
 
-const { addNotification } = useNotificationsStore();
+      const {
-const workspacesStore = useWorkspacesStore();
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      } = workspacesStore;
 
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      };
+   },
+   data () {
+      return {
+         isExporting: false,
+         isRefreshing: false,
+         progressPercentage: 0,
+         progressStatus: '',
+         tables: [],
+         options: {
+            includes: {},
+            outputFormat: 'sql',
+            sqlInsertAfter: 250,
+            sqlInsertDivider: 'bytes'
+         },
+         basePath: ''
+      };
+   },
+   computed: {
+      currentWorkspace () {
+         return this.getWorkspace(this.selectedWorkspace);
+      },
+      customizations () {
+         return this.currentWorkspace.customizations;
+      },
+      schemaItems () {
+         const db = this.currentWorkspace.structure.find(db => db.name === this.selectedSchema);
+         if (db)
+            return db.tables.filter(table => table.type === 'table');
 
-const { trapRef } = useFocusTrap();
+         return [];
+      },
+      filename () {
+         const date = moment().format('YYYY-MM-DD');
+         return `${this.selectedSchema}_${date}.${this.options.outputFormat}`;
+      },
+      dumpFilePath () {
+         return `${this.basePath}/${this.filename}`;
+      },
+      includeStructureStatus () {
+         if (this.tables.every(item => item.includeStructure)) return 1;
+         else if (this.tables.some(item => item.includeStructure)) return 2;
+         else return 0;
+      },
+      includeContentStatus () {
+         if (this.tables.every(item => item.includeContent)) return 1;
+         else if (this.tables.some(item => item.includeContent)) return 2;
+         else return 0;
+      },
+      includeDropStatementStatus () {
+         if (this.tables.every(item => item.includeDropStatement)) return 1;
+         else if (this.tables.some(item => item.includeDropStatement)) return 2;
+         else return 0;
+      }
+   },
+   async created () {
+      if (!this.schemaItems.length) await this.refresh();
 
-const {
+      window.addEventListener('keydown', this.onKey);
-   getWorkspace,
-   refreshSchema
-} = workspacesStore;
 
-const isExporting = ref(false);
+      this.basePath = await Application.getDownloadPathDirectory();
-const isRefreshing = ref(false);
+      this.tables = this.schemaItems.map(item => ({
-const progressPercentage = ref(0);
+         table: item.name,
-const progressStatus = ref('');
+         includeStructure: true,
-const tables: Ref<{
+         includeContent: true,
-   table: string;
+         includeDropStatement: true
-   includeStructure: boolean;
+      }));
-   includeContent: boolean;
-   includeDropStatement: boolean;
-}[]> = ref([]);
-const options: Ref<Partial<ExportOptions>> = ref({
-   schema: props.selectedSchema,
-   includes: {} as {[key: string]: boolean},
-   outputFormat: 'sql' as 'sql' | 'sql.zip',
-   sqlInsertAfter: 250,
-   sqlInsertDivider: 'bytes' as 'bytes' | 'rows'
-});
-const basePath = ref('');
 
-const currentWorkspace = computed(() => getWorkspace(selectedWorkspace.value));
+      const structure = ['functions', 'views', 'triggers', 'routines', 'schedulers'];
-const clientCustoms: Ref<Customizations> = computed(() => currentWorkspace.value.customizations);
-const schemaItems = computed(() => {
-   const db: SchemaInfos = currentWorkspace.value.structure.find((db: SchemaInfos) => db.name === props.selectedSchema);
-   if (db)
-      return db.tables.filter(table => table.type === 'table');
 
-   return [];
+      structure.forEach(feat => {
-});
+         const val = customizations[this.currentWorkspace.client][feat];
-const filename = computed(() => {
+         if (val)
-   const date = moment().format('YYYY-MM-DD');
+            this.options.includes[feat] = true;
-   return `${props.selectedSchema}_${date}.${options.value.outputFormat}`;
+      });
-});
-const dumpFilePath = computed(() => `${basePath.value}/${filename.value}`);
-const includeStructureStatus = computed(() => {
-   if (tables.value.every(item => item.includeStructure)) return 1;
-   else if (tables.value.some(item => item.includeStructure)) return 2;
-   else return 0;
-});
-const includeContentStatus = computed(() => {
-   if (tables.value.every(item => item.includeContent)) return 1;
-   else if (tables.value.some(item => item.includeContent)) return 2;
-   else return 0;
-});
-const includeDropStatementStatus = computed(() => {
-   if (tables.value.every(item => item.includeDropStatement)) return 1;
-   else if (tables.value.some(item => item.includeDropStatement)) return 2;
-   else return 0;
-});
 
-const startExport = async () => {
+      ipcRenderer.on('export-progress', this.updateProgress);
-   isExporting.value = true;
+   },
-   const { uid, client } = currentWorkspace.value;
+   beforeUnmount () {
-   const params = {
+      window.removeEventListener('keydown', this.onKey);
-      uid,
+      ipcRenderer.off('export-progress', this.updateProgress);
-      type: client,
+   },
-      schema: props.selectedSchema,
+   methods: {
-      outputFile: dumpFilePath.value,
+      async startExport () {
-      tables: [...tables.value],
+         this.isExporting = true;
-      ...options.value
+         const { uid, client } = this.currentWorkspace;
-   } as ExportOptions & { uid: string; type: ClientCode };
+         const params = {
+            uid,
+            type: client,
+            schema: this.selectedSchema,
+            outputFile: this.dumpFilePath,
+            tables: [...this.tables],
+            ...this.options
+         };
 
-   try {
+         try {
-      const { status, response } = await Schema.export(params);
+            const { status, response } = await Schema.export(params);
-      if (status === 'success')
+            if (status === 'success')
-         progressStatus.value = response.cancelled ? t('word.aborted') : t('word.completed');
+               this.progressStatus = response.cancelled ? this.$t('word.aborted') : this.$t('word.completed');
-      else {
+            else {
-         progressStatus.value = response;
+               this.progressStatus = response;
-         addNotification({ status: 'error', message: response });
+               this.addNotification({ status: 'error', message: response });
+            }
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isExporting = false;
+      },
+      updateProgress (event, state) {
+         this.progressPercentage = Number((state.currentItemIndex / state.totalItems * 100).toFixed(1));
+         switch (state.op) {
+            case 'PROCESSING':
+               this.progressStatus = this.$t('message.processingTableExport', { table: state.currentItem });
+               break;
+            case 'FETCH':
+               this.progressStatus = this.$t('message.fechingTableExport', { table: state.currentItem });
+               break;
+            case 'WRITE':
+               this.progressStatus = this.$t('message.writingTableExport', { table: state.currentItem });
+               break;
+         }
+      },
+      async closeModal () {
+         let willClose = true;
+         if (this.isExporting) {
+            willClose = false;
+            const { response } = await Schema.abortExport();
+            willClose = response.willAbort;
+         }
+
+         if (willClose)
+            this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      checkAllTables () {
+         this.tables = this.tables.map(item => ({ ...item, includeStructure: true, includeContent: true, includeDropStatement: true }));
+      },
+      uncheckAllTables () {
+         this.tables = this.tables.map(item => ({ ...item, includeStructure: false, includeContent: false, includeDropStatement: false }));
+      },
+      toggleAllTablesOption (option) {
+         const options = ['includeStructure', 'includeContent', 'includeDropStatement'];
+         if (!options.includes(option)) return;
+
+         if (this[`${option}Status`] !== 1)
+            this.tables = this.tables.map(item => ({ ...item, [option]: true }));
+         else
+            this.tables = this.tables.map(item => ({ ...item, [option]: false }));
+      },
+      async refresh () {
+         this.isRefreshing = true;
+         await this.refreshSchema({ uid: this.currentWorkspace.uid, schema: this.selectedSchema });
+         this.isRefreshing = false;
+      },
+      async openPathDialog () {
+         const result = await Application.showOpenDialog({ properties: ['openDirectory'] });
+         if (result && !result.canceled)
+            this.basePath = result.filePaths[0];
       }
    }
-   catch (err) {
-      addNotification({ status: 'error', message: err.stack });
-   }
-
-   isExporting.value = false;
 };
-
-const updateProgress = (event: Event, state: ExportState) => {
-   progressPercentage.value = Number((state.currentItemIndex / state.totalItems * 100).toFixed(1));
-   switch (state.op) {
-      case 'PROCESSING':
-         progressStatus.value = t('message.processingTableExport', { table: state.currentItem });
-         break;
-      case 'FETCH':
-         progressStatus.value = t('message.fechingTableExport', { table: state.currentItem });
-         break;
-      case 'WRITE':
-         progressStatus.value = t('message.writingTableExport', { table: state.currentItem });
-         break;
-   }
-};
-
-const closeModal = async () => {
-   let willClose = true;
-   if (isExporting.value) {
-      willClose = false;
-      const { response } = await Schema.abortExport();
-      willClose = response.willAbort;
-   }
-
-   if (willClose)
-      emit('close');
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-const checkAllTables = () => {
-   tables.value = tables.value.map(item => ({ ...item, includeStructure: true, includeContent: true, includeDropStatement: true }));
-};
-
-const uncheckAllTables = () => {
-   tables.value = tables.value.map(item => ({ ...item, includeStructure: false, includeContent: false, includeDropStatement: false }));
-};
-
-const toggleAllTablesOption = (option: 'includeStructure' | 'includeContent' |'includeDropStatement') => {
-   const options = {
-      includeStructure: includeStructureStatus.value,
-      includeContent: includeContentStatus.value,
-      includeDropStatement: includeDropStatementStatus.value
-   };
-
-   if (options[option] !== 1)
-      tables.value = tables.value.map(item => ({ ...item, [option]: true }));
-   else
-      tables.value = tables.value.map(item => ({ ...item, [option]: false }));
-};
-
-const refresh = async () => {
-   isRefreshing.value = true;
-   await refreshSchema({ uid: currentWorkspace.value.uid, schema: props.selectedSchema });
-   isRefreshing.value = false;
-};
-
-const openPathDialog = async () => {
-   const result = await Application.showOpenDialog({ properties: ['openDirectory'] });
-   if (result && !result.canceled)
-      basePath.value = result.filePaths[0];
-};
-
-(async () => {
-   if (!schemaItems.value.length) await refresh();
-
-   window.addEventListener('keydown', onKey);
-
-   basePath.value = await Application.getDownloadPathDirectory();
-   tables.value = schemaItems.value.map(item => ({
-      table: item.name,
-      includeStructure: true,
-      includeContent: true,
-      includeDropStatement: true
-   }));
-
-   const structure = ['functions', 'views', 'triggers', 'routines', 'schedulers'];
-
-   structure.forEach((feat: keyof Customizations) => {
-      const val = clientCustoms.value[feat];
-      if (val)
-         options.value.includes[feat] = true;
-   });
-
-   ipcRenderer.on('export-progress', updateProgress);
-})();
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-   ipcRenderer.off('export-progress', updateProgress);
-});
-
 </script>
 
 <style lang="scss" scoped>
@@ -478,15 +476,14 @@ onBeforeUnmount(() => {
   overflow: hidden;
 
   .left {
-    display: flex;
+     display: flex;
-    flex-direction: column;
+     flex-direction: column;
-    flex: 1;
+     flex: 1;
   }
 }
 
 .workspace-query-results {
-  flex: 1 0 1px;
+   flex: 1 0 1px;
-
   .table {
     width: 100% !important;
   }
@@ -502,24 +499,25 @@ onBeforeUnmount(() => {
 }
 
 .modal {
+
   .modal-container {
     max-width: 800px;
   }
 
-  .modal-body {
+    .modal-body {
-    max-height: 60vh;
+      max-height: 60vh;
-    display: flex;
+      display: flex;
-    flex-direction: column;
+      flex-direction: column;
-  }
+    }
 
-  .modal-footer {
+    .modal-footer {
-    display: flex;
+       display: flex;
-  }
+    }
 }
 
 .progress-status {
-  font-style: italic;
+   font-style: italic;
-  font-size: 80%;
+   font-size: 80%;
 }
 
 </style>

src/renderer/components/ModalFakerRows.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0">
+         <div class="modal-container p-0">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-playlist-plus mr-1" />
-                     <span class="cut-text">{{ t('message.insertRow', 2) }}</span>
+                     <span class="cut-text">{{ $tc('message.insertRow', 2) }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -39,7 +39,7 @@
                                  <span class="input-group-addon field-type" :class="typeClass(field.type)">
                                     {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
                                  </span>
-                                 <label class="form-checkbox ml-3" :title="t('word.insert')">
+                                 <label class="form-checkbox ml-3" :title="$t('word.insert')">
                                     <input
                                        type="checkbox"
                                        :checked="!fieldsToExclude.includes(field.name)"
@@ -55,7 +55,7 @@
             </div>
             <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')">
+                  <div class="input-group tooltip tooltip-right" :data-tooltip="$t('message.numberOfInserts')">
                      <input
                         v-model="nInserts"
                         type="number"
@@ -70,7 +70,7 @@
                   <div
                      v-if="hasFakes"
                      class="tooltip tooltip-right ml-2"
-                     :data-tooltip="t('message.fakeDataLanguage')"
+                     :data-tooltip="$t('message.fakeDataLanguage')"
                   >
                      <BaseSelect
                         v-model="fakerLocale"
@@ -85,10 +85,10 @@
                      :class="{'loading': isInserting}"
                      @click.stop="insertRows"
                   >
-                     {{ t('word.insert') }}
+                     {{ $t('word.insert') }}
                   </button>
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ t('word.close') }}
+                     {{ $t('word.close') }}
                   </button>
                </div>
             </div>
@@ -97,198 +97,126 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeMount, onMounted, Prop, Ref, ref, watch } from 'vue';
+import moment from 'moment';
-import * as moment from 'moment';
-import { TableField, TableForeign } from 'common/interfaces/antares';
 import { storeToRefs } from 'pinia';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { useFocusTrap } from '@/composables/useFocusTrap';
 import Tables from '@/ipc-api/Tables';
-import FakerSelect from '@/components/FakerSelect.vue';
+import FakerSelect from '@/components/FakerSelect';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { useFilters } from '@/composables/useFilters';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalFakerRows',
+   components: {
+      FakerSelect,
+      BaseSelect
+   },
+   props: {
+      tabUid: [String, Number],
+      fields: Array,
+      keyUsage: Array
+   },
+   emits: ['reload', 'hide'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const { wrapNumber } = useFilters();
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+      const { getWorkspace, getWorkspaceTab } = workspacesStore;
+      const locales = [
+         { value: 'ar', label: 'Arabic' },
+         { value: 'az', label: 'Azerbaijani' },
+         { value: 'zh_CN', label: 'Chinese' },
+         { value: 'zh_TW', label: 'Chinese (Taiwan)' },
+         { value: 'cz', label: 'Czech' },
+         { value: 'nl', label: 'Dutch' },
+         { value: 'nl_BE', label: 'Dutch (Belgium)' },
+         { value: 'en', label: 'English' },
+         { value: 'en_AU_ocker', label: 'English (Australia Ocker)' },
+         { value: 'en_AU', label: 'English (Australia)' },
+         { value: 'en_BORK', label: 'English (Bork)' },
+         { value: 'en_CA', label: 'English (Canada)' },
+         { value: 'en_GB', label: 'English (Great Britain)' },
+         { value: 'en_IND', label: 'English (India)' },
+         { value: 'en_IE', label: 'English (Ireland)' },
+         { value: 'en_ZA', label: 'English (South Africa)' },
+         { value: 'en_US', label: 'English (United States)' },
+         { value: 'fa', label: 'Farsi' },
+         { value: 'fi', label: 'Finnish' },
+         { value: 'fr', label: 'French' },
+         { value: 'fr_CA', label: 'French (Canada)' },
+         { value: 'fr_CH', label: 'French (Switzerland)' },
+         { value: 'ge', label: 'Georgian' },
+         { value: 'de', label: 'German' },
+         { value: 'de_AT', label: 'German (Austria)' },
+         { value: 'de_CH', label: 'German (Switzerland)' },
+         { value: 'hr', label: 'Hrvatski' },
+         { value: 'id_ID', label: 'Indonesia' },
+         { value: 'it', label: 'Italian' },
+         { value: 'ja', label: 'Japanese' },
+         { value: 'ko', label: 'Korean' },
+         { value: 'nep', label: 'Nepalese' },
+         { value: 'nb_NO', label: 'Norwegian' },
+         { value: 'pl', label: 'Polish' },
+         { value: 'pt_BR', label: 'Portuguese (Brazil)' },
+         { value: 'pt_PT', label: 'Portuguese (Portugal)' },
+         { value: 'ro', label: 'Romanian' },
+         { value: 'ru', label: 'Russian' },
+         { value: 'sk', label: 'Slovakian' },
+         { value: 'es', label: 'Spanish' },
+         { value: 'es_MX', label: 'Spanish (Mexico)' },
+         { value: 'sv', label: 'Swedish' },
+         { value: 'tr', label: 'Turkish' },
+         { value: 'uk', label: 'Ukrainian' },
+         { value: 'vi', label: 'Vietnamese' }
 
-const props = defineProps({
+      ];
-   tabUid: [String, Number],
-   schema: String,
-   table: String,
-   fields: Array as Prop<TableField[]>,
-   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-   rowToDuplicate: Object as Prop<any>,
-   keyUsage: Array as Prop<TableForeign[]>
-});
 
-const emit = defineEmits(['reload', 'hide']);
+      return {
-
+         addNotification,
-const { addNotification } = useNotificationsStore();
+         selectedWorkspace,
-const workspacesStore = useWorkspacesStore();
+         getWorkspace,
-
+         getWorkspaceTab,
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+         locales
-
+      };
-const { trapRef } = useFocusTrap({ disableAutofocus: true });
+   },
-
+   data () {
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return {
-const localRow: Ref<{[key: string]: any}> = ref({});
+         localRow: {},
-const fieldsToExclude = ref([]);
+         fieldsToExclude: [],
-const nInserts = ref(1);
+         nInserts: 1,
-const isInserting = ref(false);
+         isInserting: false,
-const fakerLocale = ref('en');
+         fakerLocale: 'en'
-
+      };
-const foreignKeys = computed(() => props.keyUsage.map(key => key.field));
+   },
-const hasFakes = computed(() => Object.keys(localRow.value).some(field => 'group' in localRow.value[field] && localRow.value[field].group !== 'manual'));
+   computed: {
-
+      workspace () {
-const locales = [
+         return this.getWorkspace(this.selectedWorkspace);
-   { value: 'ar', label: 'Arabic' },
+      },
-   { value: 'az', label: 'Azerbaijani' },
+      foreignKeys () {
-   { value: 'zh_CN', label: 'Chinese' },
+         return this.keyUsage.map(key => key.field);
-   { value: 'zh_TW', label: 'Chinese (Taiwan)' },
+      },
-   { value: 'cz', label: 'Czech' },
+      hasFakes () {
-   { value: 'nl', label: 'Dutch' },
+         return Object.keys(this.localRow).some(field => 'group' in this.localRow[field] && this.localRow[field].group !== 'manual');
-   { value: 'nl_BE', label: 'Dutch (Belgium)' },
-   { value: 'en', label: 'English' },
-   { value: 'en_AU_ocker', label: 'English (Australia Ocker)' },
-   { value: 'en_AU', label: 'English (Australia)' },
-   { value: 'en_BORK', label: 'English (Bork)' },
-   { value: 'en_CA', label: 'English (Canada)' },
-   { value: 'en_GB', label: 'English (Great Britain)' },
-   { value: 'en_IND', label: 'English (India)' },
-   { value: 'en_IE', label: 'English (Ireland)' },
-   { value: 'en_ZA', label: 'English (South Africa)' },
-   { value: 'en_US', label: 'English (United States)' },
-   { value: 'fa', label: 'Farsi' },
-   { value: 'fi', label: 'Finnish' },
-   { value: 'fr', label: 'French' },
-   { value: 'fr_CA', label: 'French (Canada)' },
-   { value: 'fr_CH', label: 'French (Switzerland)' },
-   { value: 'ge', label: 'Georgian' },
-   { value: 'de', label: 'German' },
-   { value: 'de_AT', label: 'German (Austria)' },
-   { value: 'de_CH', label: 'German (Switzerland)' },
-   { value: 'hr', label: 'Hrvatski' },
-   { value: 'id_ID', label: 'Indonesia' },
-   { value: 'it', label: 'Italian' },
-   { value: 'ja', label: 'Japanese' },
-   { value: 'ko', label: 'Korean' },
-   { value: 'nep', label: 'Nepalese' },
-   { value: 'nb_NO', label: 'Norwegian' },
-   { value: 'pl', label: 'Polish' },
-   { value: 'pt_BR', label: 'Portuguese (Brazil)' },
-   { value: 'pt_PT', label: 'Portuguese (Portugal)' },
-   { value: 'ro', label: 'Romanian' },
-   { value: 'ru', label: 'Russian' },
-   { value: 'sk', label: 'Slovakian' },
-   { value: 'es', label: 'Spanish' },
-   { value: 'es_MX', label: 'Spanish (Mexico)' },
-   { value: 'sv', label: 'Swedish' },
-   { value: 'tr', label: 'Turkish' },
-   { value: 'uk', label: 'Ukrainian' },
-   { value: 'vi', label: 'Vietnamese' }
-
-];
-
-watch(nInserts, (val) => {
-   if (!val || val < 1)
-      nInserts.value = 1;
-   else if (val > 1000)
-      nInserts.value = 1000;
-});
-
-const typeClass = (type: string) => {
-   if (type)
-      return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
-   return '';
-};
-
-const insertRows = async () => {
-   isInserting.value = true;
-   const rowToInsert = localRow.value;
-
-   Object.keys(rowToInsert).forEach(key => {
-      if (fieldsToExclude.value.includes(key))
-         delete rowToInsert[key];
-
-      if (typeof rowToInsert[key] === 'undefined')
-         delete rowToInsert[key];
-   });
-
-   const fieldTypes: {[key: string]: string} = {};
-   props.fields.forEach(field => {
-      fieldTypes[field.name] = field.type;
-   });
-
-   try {
-      const { status, response } = await Tables.insertTableFakeRows({
-         uid: selectedWorkspace.value,
-         schema: props.schema,
-         table: props.table,
-         row: rowToInsert,
-         repeat: nInserts.value,
-         fields: fieldTypes,
-         locale: fakerLocale.value
-      });
-
-      if (status === 'success') {
-         closeModal();
-         emit('reload');
       }
-      else
+   },
-         addNotification({ status: 'error', message: response });
+   watch: {
-   }
+      nInserts (val) {
-   catch (err) {
+         if (!val || val < 1)
-      addNotification({ status: 'error', message: err.stack });
+            this.nInserts = 1;
-   }
+         else if (val > 1000)
-
+            this.nInserts = 1000;
-   isInserting.value = false;
-};
-
-const closeModal = () => {
-   emit('hide');
-};
-
-const fieldLength = (field: TableField) => {
-   if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
-   else if (TEXT.includes(field.type)) return Number(field.charLength);
-   return Number(field.length);
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const toggleFields = (event: any, field: TableField) => {
-   if (event.target.checked)
-      fieldsToExclude.value = fieldsToExclude.value.filter(f => f !== field.name);
-   else
-      fieldsToExclude.value = [...fieldsToExclude.value, field.name];
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-window.addEventListener('keydown', onKey);
-
-onMounted(() => {
-   setTimeout(() => {
-      const inputs = Array.from(document.querySelectorAll<HTMLInputElement>('.modal-container .form-input'));
-      if (inputs?.length) {
-         const firstEnabledInput = inputs.find((el) => !el.disabled);
-         firstEnabledInput?.focus();
       }
-   }, 50);
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   mounted () {
+      const rowObj = {};
 
-   const rowObj: {[key: string]: unknown} = {};
+      for (const field of this.fields) {
-
-   if (!props.rowToDuplicate) {
-      // Set default values
-      for (const field of props.fields) {
          let fieldDefault;
 
          if (field.default === 'NULL') fieldDefault = null;
@@ -325,26 +253,95 @@ onMounted(() => {
          rowObj[field.name] = { value: fieldDefault };
 
          if (field.autoIncrement || !!field.onUpdate)// Disable by default auto increment or "on update" fields
-            fieldsToExclude.value = [...fieldsToExclude.value, field.name];
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      }
+
+      this.localRow = { ...rowObj };
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      typeClass (type) {
+         if (type)
+            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
+         return '';
+      },
+      async insertRows () {
+         this.isInserting = true;
+         const rowToInsert = this.localRow;
+
+         Object.keys(rowToInsert).forEach(key => {
+            if (this.fieldsToExclude.includes(key))
+               delete rowToInsert[key];
+
+            if (typeof rowToInsert[key] === 'undefined')
+               delete rowToInsert[key];
+         });
+
+         const fieldTypes = {};
+         this.fields.forEach(field => {
+            fieldTypes[field.name] = field.type;
+         });
+
+         try {
+            const { status, response } = await Tables.insertTableFakeRows({
+               uid: this.selectedWorkspace,
+               schema: this.workspace.breadcrumbs.schema,
+               table: this.workspace.breadcrumbs.table,
+               row: rowToInsert,
+               repeat: this.nInserts,
+               fields: fieldTypes,
+               locale: this.fakerLocale
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isInserting = false;
+      },
+      closeModal () {
+         this.$emit('hide');
+      },
+      fieldLength (field) {
+         if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
+         else if (TEXT.includes(field.type)) return Number(field.charLength);
+         return Number(field.length);
+      },
+      toggleFields (event, field) {
+         if (event.target.checked)
+            this.fieldsToExclude = this.fieldsToExclude.filter(f => f !== field.name);
+         else
+            this.fieldsToExclude = [...this.fieldsToExclude, field.name];
+      },
+      filesChange (event, field) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.localRow[field] = files[0].path;
+      },
+      getKeyUsage (keyName) {
+         return this.keyUsage.find(key => key.field === keyName);
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
       }
    }
-   else {
+};
-      // Set values to duplicate
-      for (const field of props.fields) {
-         if (typeof props.rowToDuplicate[field.name] !== 'object')
-            rowObj[field.name] = { value: props.rowToDuplicate[field.name] };
-
-         if (field.autoIncrement || !!field.onUpdate)// Disable by default auto increment or "on update" fields
-            fieldsToExclude.value = [...fieldsToExclude.value, field.name];
-      }
-   }
-
-   localRow.value = { ...rowObj };
-});
-
-onBeforeMount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style scoped>

src/renderer/components/ModalHistory.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0 pb-4">
+         <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>
+                     <span class="cut-text">{{ $t('word.history') }}: {{ connectionName }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -22,7 +22,7 @@
                      v-model="searchTerm"
                      class="form-input"
                      type="text"
-                     :placeholder="t('message.searchForQueries')"
+                     :placeholder="$t('message.searchForQueries')"
                   >
                   <i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
                   <i
@@ -67,13 +67,13 @@
                                     <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') }}
+                                          <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') }}
+                                          <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') }}
+                                          <i class="mdi mdi-delete-forever pr-1" /> {{ $t('word.delete') }}
                                        </button>
                                     </div>
                                  </div>
@@ -88,7 +88,7 @@
                      <i class="mdi mdi-history mdi-48px" />
                   </div>
                   <p class="empty-title h5">
-                     {{ t('message.thereIsNoQueriesYet') }}
+                     {{ $t('message.thereIsNoQueriesYet') }}
                   </p>
                </div>
             </div>
@@ -97,114 +97,129 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
+import moment from 'moment';
-import { useI18n } from 'vue-i18n';
+import { useHistoryStore } from '@/stores/history';
-import { ConnectionParams } from 'common/interfaces/antares';
-import { HistoryRecord, useHistoryStore } from '@/stores/history';
 import { useConnectionsStore } from '@/stores/connections';
-import { useFocusTrap } from '@/composables/useFocusTrap';
+import { useNotificationsStore } from '@/stores/notifications';
-import { useFilters } from '@/composables/useFilters';
+import BaseVirtualScroll from '@/components/BaseVirtualScroll';
-import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
 
-const { t } = useI18n();
+export default {
-const { formatDate } = useFilters();
+   name: 'ModalHistory',
+   components: {
+      BaseVirtualScroll
+   },
+   props: {
+      connection: Object
+   },
+   emits: ['select-query', 'close'],
+   setup () {
+      const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
+      const { getConnectionName } = useConnectionsStore();
+      const { addNotification } = useNotificationsStore();
 
-const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
+      return {
-const { getConnectionName } = useConnectionsStore();
+         getHistoryByWorkspace,
+         deleteQueryFromHistory,
+         getConnectionName,
+         addNotification
+      };
+   },
+   data () {
+      return {
+         resultsSize: 1000,
+         isQuering: false,
+         scrollElement: null,
+         searchTermInterval: null,
+         searchTerm: '',
+         localSearchTerm: ''
+      };
+   },
+   computed: {
+      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);
 
-const { trapRef } = useFocusTrap();
+         this.searchTermInterval = setTimeout(() => {
+            this.localSearchTerm = this.searchTerm;
+         }, 200);
+      }
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey, { capture: true });
+   },
+   updated () {
+      if (this.$refs.table)
+         this.refreshScroller();
 
-const props = defineProps({
+      if (this.$refs.tableWrapper)
-   connection: Object as Prop<ConnectionParams>
+         this.scrollElement = this.$refs.tableWrapper;
-});
+   },
+   mounted () {
+      this.resizeResults();
+      window.addEventListener('resize', this.resizeResults);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey, { capture: true });
+      window.removeEventListener('resize', this.resizeResults);
+      clearInterval(this.refreshInterval);
+   },
+   methods: {
+      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;
 
-const emit = defineEmits(['select-query', 'close']);
+            if (el)
+               this.resultsSize = el.offsetHeight - this.$refs.searchForm.offsetHeight;
 
-const table: Ref<HTMLDivElement> = ref(null);
+            this.$refs.resultTable.updateWindow();
-const resultTable: Ref<Component & { updateWindow: () => void }> = ref(null);
+         }
-const tableWrapper: Ref<HTMLDivElement> = ref(null);
+      },
-const searchForm: Ref<HTMLInputElement> = ref(null);
+      formatDate (date) {
-const resultsSize = ref(1000);
+         return moment(date).isValid() ? moment(date).format('HH:mm:ss - YYYY/MM/DD') : date;
-const scrollElement: Ref<HTMLDivElement> = ref(null);
+      },
-const searchTermInterval: Ref<NodeJS.Timeout> = ref(null);
+      refreshScroller () {
-const searchTerm = ref('');
+         this.resizeResults();
-const localSearchTerm = ref('');
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      highlightWord (string) {
+         string = string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
 
-const connectionName = computed(() => getConnectionName(props.connection.uid));
+         if (this.searchTerm) {
-const history: ComputedRef<HistoryRecord[]> = computed(() => (getHistoryByWorkspace(props.connection.uid) || []));
+            const regexp = new RegExp(`(${this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
-const filteredHistory = computed(() => history.value.filter(q => q.sql.toLowerCase().search(searchTerm.value.toLowerCase()) >= 0));
+            return string.replace(regexp, '<span class="text-primary text-bold">$1</span>');
-
+         }
-watch(searchTerm, () => {
+         else
-   clearTimeout(searchTermInterval.value);
+            return string;
-
+      },
-   searchTermInterval.value = setTimeout(() => {
+      onKey (e) {
-      localSearchTerm.value = searchTerm.value;
+         e.stopPropagation();
-   }, 200);
+         if (e.key === 'Escape')
-});
+            this.closeModal();
-
+      }
-const copyQuery = (sql: string) => {
-   navigator.clipboard.writeText(sql);
-};
-
-const deleteQuery = (query: HistoryRecord[]) => {
-   deleteQueryFromHistory({
-      workspace: props.connection.uid,
-      ...query
-   });
-};
-
-const resizeResults = () => {
-   if (resultTable.value) {
-      const el = tableWrapper.value.parentElement;
-
-      if (el)
-         resultsSize.value = el.offsetHeight - searchForm.value.offsetHeight;
-
-      resultTable.value.updateWindow();
    }
 };
-
-const refreshScroller = () => resizeResults();
-const closeModal = () => emit('close');
-
-const highlightWord = (string: string) => {
-   string = string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-
-   if (searchTerm.value) {
-      const regexp = new RegExp(`(${searchTerm.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
-      return string.replace(regexp, '<span class="text-primary text-bold">$1</span>');
-   }
-   else
-      return string;
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-window.addEventListener('keydown', onKey, { capture: true });
-
-onUpdated(() => {
-   if (table.value)
-      refreshScroller();
-
-   if (tableWrapper.value)
-      scrollElement.value = tableWrapper.value;
-});
-
-onMounted(() => {
-   resizeResults();
-   window.addEventListener('resize', resizeResults);
-});
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey, { capture: true });
-   window.removeEventListener('resize', resizeResults);
-   clearInterval(searchTermInterval.value);
-});
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/ModalImportSchema.vue

@@ -7,7 +7,7 @@
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-arrow-up mr-1" />
-                     <span class="cut-text">{{ t('message.importSchema') }}</span>
+                     <span class="cut-text">{{ $t('message.importSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -15,7 +15,7 @@
             <div class="modal-body pb-0">
                {{ sqlFile }}
                <div v-if="queryErrors.length > 0" class="mt-2">
-                  <label>{{ t('message.importQueryErrors', queryErrors.length) }}</label>
+                  <label>{{ $tc('message.importQueryErrors', queryErrors.length) }}</label>
                   <textarea
                      v-model="formattedQueryErrors"
                      class="form-input"
@@ -28,7 +28,7 @@
                <div class="column col modal-progress-wrapper text-left">
                   <div class="import-progress">
                      <span class="progress-status">
-                        {{ progressPercentage }}% - {{ progressStatus }} - {{ t('message.executedQueries', queryCount) }}
+                        {{ progressPercentage }}% - {{ progressStatus }} - {{ $tc('message.executedQueries', queryCount) }}
                      </span>
                      <progress
                         class="progress d-block"
@@ -39,7 +39,7 @@
                </div>
                <div class="column col-auto px-0">
                   <button class="btn btn-link" @click.stop="closeModal">
-                     {{ completed ? t('word.close') : t('word.cancel') }}
+                     {{ completed ? $t('word.close') : $t('word.cancel') }}
                   </button>
                </div>
             </div>
@@ -49,140 +49,146 @@
    </teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeUnmount, Ref, ref } from 'vue';
 import { ipcRenderer } from 'electron';
-import * as moment from 'moment';
-import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
+import moment from 'moment';
 import Schema from '@/ipc-api/Schema';
-import { ImportState } from 'common/interfaces/importer';
+import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalImportSchema',
 
-const { addNotification } = useNotificationsStore();
+   props: {
-const workspacesStore = useWorkspacesStore();
+      selectedSchema: String
+   },
+   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
-const { getWorkspace, refreshSchema } = workspacesStore;
+      const { getWorkspace, refreshSchema } = workspacesStore;
 
-const props = defineProps({
+      return {
-   selectedSchema: String
+         addNotification,
-});
+         selectedWorkspace,
-
+         getWorkspace,
-const emit = defineEmits(['close']);
+         refreshSchema
-
+      };
-const sqlFile = ref('');
+   },
-const isImporting = ref(false);
+   data () {
-const progressPercentage = ref(0);
+      return {
-const queryCount = ref(0);
+         sqlFile: '',
-const completed = ref(false);
+         isImporting: false,
-const progressStatus = ref('Reading');
+         progressPercentage: 0,
-const queryErrors: Ref<{time: string; message: string}[]> = ref([]);
+         queryCount: 0,
-
+         completed: false,
-const currentWorkspace = computed(() => getWorkspace(selectedWorkspace.value));
+         progressStatus: 'Reading',
-
+         queryErrors: []
-const formattedQueryErrors = computed(() => {
+      };
-   return queryErrors.value.map(err =>
+   },
-      `Time: ${moment(err.time).format('HH:mm:ss.S')} (${err.time})\nError: ${err.message}`
+   computed: {
-   ).join('\n\n');
+      currentWorkspace () {
-});
+         return this.getWorkspace(this.selectedWorkspace);
-
+      },
-const startImport = async (file: string) => {
+      formattedQueryErrors () {
-   isImporting.value = true;
+         return this.queryErrors.map(err =>
-   sqlFile.value = file;
+            `Time: ${moment(err.time).format('HH:mm:ss.S')} (${err.time})\nError: ${err.message}`
-
+         ).join('\n\n');
-   const { uid, client } = currentWorkspace.value;
+      }
-   const params = {
+   },
-      uid,
+   async created () {
-      type: client,
+      window.addEventListener('keydown', this.onKey);
-      schema: props.selectedSchema,
+
-      file: sqlFile.value
+      ipcRenderer.on('import-progress', this.updateProgress);
-   };
+      ipcRenderer.on('query-error', this.handleQueryError);
-
+   },
-   try {
+   beforeUnmount () {
-      completed.value = false;
+      window.removeEventListener('keydown', this.onKey);
-      const { status, response } = await Schema.import(params);
+      ipcRenderer.off('import-progress', this.updateProgress);
-
+      ipcRenderer.off('query-error', this.handleQueryError);
-      if (status === 'success')
+   },
-         progressStatus.value = response.cancelled ? t('word.aborted') : t('word.completed');
+   methods: {
-      else {
+      async startImport (sqlFile) {
-         progressStatus.value = response;
+         this.isImporting = true;
-         addNotification({ status: 'error', message: response });
+         this.sqlFile = sqlFile;
+
+         const { uid, client } = this.currentWorkspace;
+         const params = {
+            uid,
+            type: client,
+            schema: this.selectedSchema,
+            file: sqlFile
+         };
+
+         try {
+            this.completed = false;
+            const { status, response } = await Schema.import(params);
+            if (status === 'success')
+               this.progressStatus = response.cancelled ? this.$t('word.aborted') : this.$t('word.completed');
+            else {
+               this.progressStatus = response;
+               this.addNotification({ status: 'error', message: response });
+            }
+            this.refreshSchema({ uid, schema: this.selectedSchema });
+            this.completed = true;
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isImporting = false;
+      },
+      updateProgress (event, state) {
+         this.progressPercentage = Number(state.percentage).toFixed(1);
+         this.queryCount = Number(state.queryCount);
+      },
+      handleQueryError (event, err) {
+         this.queryErrors.push(err);
+      },
+      async closeModal () {
+         let willClose = true;
+         if (this.isImporting) {
+            willClose = false;
+            const { response } = await Schema.abortImport();
+            willClose = response.willAbort;
+         }
+
+         if (willClose)
+            this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
-      refreshSchema({ uid, schema: props.selectedSchema });
-      completed.value = true;
    }
-   catch (err) {
-      addNotification({ status: 'error', message: err.stack });
-   }
-
-   isImporting.value = false;
 };
-
-const updateProgress = (event: Event, state: ImportState) => {
-   progressPercentage.value = parseFloat(Number(state.percentage).toFixed(1));
-   queryCount.value = Number(state.queryCount);
-};
-
-const handleQueryError = (event: Event, err: { time: string; message: string }) => {
-   queryErrors.value.push(err);
-};
-
-const closeModal = async () => {
-   let willClose = true;
-   if (isImporting.value) {
-      willClose = false;
-      const { response } = await Schema.abortImport();
-      willClose = response.willAbort;
-   }
-
-   if (willClose)
-      emit('close');
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-window.addEventListener('keydown', onKey);
-
-ipcRenderer.on('import-progress', updateProgress);
-ipcRenderer.on('query-error', handleQueryError);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-   ipcRenderer.off('import-progress', updateProgress);
-   ipcRenderer.off('query-error', handleQueryError);
-});
-
-defineExpose({ startImport });
 </script>
 
 <style lang="scss" scoped>
 .modal {
-  .modal-container {
-    max-width: 800px;
-  }
 
-  .modal-body {
+   .modal-container {
-    max-height: 60vh;
+      max-width: 800px;
-    display: flex;
+   }
-    flex-direction: column;
-  }
 
-  .modal-footer {
+   .modal-body {
-    display: flex;
+      max-height: 60vh;
-  }
+      display: flex;
+      flex-direction: column;
+   }
+
+   .modal-footer {
+      display: flex;
+   }
 }
 
 .progress-status {
-  font-style: italic;
+   font-style: italic;
-  font-size: 80%;
+   font-size: 80%;
 }
 </style>

src/renderer/components/ModalNewSchema.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0">
+         <div class="modal-container p-0">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-database-plus mr-1" />
-                     <span class="cut-text">{{ t('message.createNewSchema') }}</span>
+                     <span class="cut-text">{{ $t('message.createNewSchema') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -17,7 +17,7 @@
                   <form class="form-horizontal" @submit.prevent="createSchema">
                      <div class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.name') }}</label>
+                           <label class="form-label">{{ $t('word.name') }}</label>
                         </div>
                         <div class="col-9">
                            <input
@@ -26,13 +26,13 @@
                               class="form-input"
                               type="text"
                               required
-                              :placeholder="t('message.schemaName')"
+                              :placeholder="$t('message.schemaName')"
                            >
                         </div>
                      </div>
                      <div v-if="customizations.collations" class="form-group">
                         <div class="col-3">
-                           <label class="form-label">{{ t('word.collation') }}</label>
+                           <label class="form-label">{{ $t('word.collation') }}</label>
                         </div>
                         <div class="col-9">
                            <BaseSelect
@@ -42,7 +42,7 @@
                               option-label="collation"
                               option-track-by="collation"
                            />
-                           <small>{{ t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                           <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
                         </div>
                      </div>
                   </form>
@@ -54,10 +54,10 @@
                   :class="{'loading': isLoading}"
                   @click.stop="createSchema"
                >
-                  {{ t('word.add') }}
+                  {{ $t('word.add') }}
                </button>
                <button class="btn btn-link" @click.stop="closeModal">
-                  {{ t('word.close') }}
+                  {{ $t('word.close') }}
                </button>
             </div>
          </div>
@@ -65,81 +65,93 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { computed, onBeforeUnmount, Ref, ref } from 'vue';
-import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
+import { storeToRefs } from 'pinia';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalNewSchema',
+   components: { BaseSelect },
+   emits: ['reload', 'close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const { addNotification } = useNotificationsStore();
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
-const workspacesStore = useWorkspacesStore();
 
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+      const { getWorkspace, getDatabaseVariable } = workspacesStore;
 
-const { getWorkspace, getDatabaseVariable } = workspacesStore;
+      return {
-
+         addNotification,
-const { trapRef } = useFocusTrap();
+         selectedWorkspace,
-
+         getWorkspace,
-const emit = defineEmits(['reload', 'close']);
+         getDatabaseVariable
-
+      };
-const firstInput: Ref<HTMLInputElement> = ref(null);
+   },
-const isLoading = ref(false);
+   data () {
-const database = ref({
+      return {
-   name: '',
+         isLoading: false,
-   collation: ''
+         database: {
-});
+            name: '',
-
+            collation: ''
-const collations = computed(() => getWorkspace(selectedWorkspace.value).collations);
+         }
-const customizations = computed(() => getWorkspace(selectedWorkspace.value).customizations);
+      };
-const defaultCollation = computed(() => getDatabaseVariable(selectedWorkspace.value, 'collation_server') ? getDatabaseVariable(selectedWorkspace.value, 'collation_server').value : '');
+   },
-
+   computed: {
-database.value = { ...database.value, collation: defaultCollation.value };
+      collations () {
-
+         return this.getWorkspace(this.selectedWorkspace).collations;
-const createSchema = async () => {
+      },
-   isLoading.value = true;
+      customizations () {
-   try {
+         return this.getWorkspace(this.selectedWorkspace).customizations;
-      const { status, response } = await Schema.createSchema({
+      },
-         uid: selectedWorkspace.value,
+      defaultCollation () {
-         ...database.value
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server') ? this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value : '';
-      });
+      }
-
+   },
-      if (status === 'success') {
+   created () {
-         closeModal();
+      this.database = { ...this.database, collation: this.defaultCollation };
-         emit('reload');
+      window.addEventListener('keydown', this.onKey);
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      async createSchema () {
+         this.isLoading = true;
+         try {
+            const { status, response } = await Schema.createSchema({
+               uid: this.selectedWorkspace,
+               ...this.database
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+         this.isLoading = false;
+      },
+      closeModal () {
+         this.$emit('close');
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
       }
-      else
-         addNotification({ status: 'error', message: response });
    }
-   catch (err) {
-      addNotification({ status: 'error', message: err.stack });
-   }
-   isLoading.value = false;
 };
-
-const closeModal = () => {
-   emit('close');
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-window.addEventListener('keydown', onKey);
-setTimeout(() => {
-   firstInput.value.focus();
-}, 20);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style scoped>

src/renderer/components/ModalNewTableRow.vue

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

src/renderer/components/ModalProcessesList.vue

@@ -12,12 +12,12 @@
             @close-context="closeContext"
          />
          <a class="modal-overlay" @click.stop="closeModal" />
-         <div ref="trapRef" class="modal-container p-0 pb-4">
+         <div class="modal-container p-0 pb-4">
             <div class="modal-header pl-2">
                <div class="modal-title h6">
                   <div class="d-flex">
                      <i class="mdi mdi-24px mdi-memory mr-1" />
-                     <span class="cut-text">{{ t('message.processesList') }}: {{ connectionName }}</span>
+                     <span class="cut-text">{{ $t('message.processesList') }}: {{ connectionName }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@@ -29,7 +29,7 @@
                         <button
                            class="btn btn-dark btn-sm mr-0 pr-1 d-flex"
                            :class="{'loading':isQuering}"
-                           :title="`${t('word.refresh')}`"
+                           :title="`${$t('word.refresh')} (F5)`"
                            @click="getProcessesList"
                         >
                            <i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
@@ -39,7 +39,7 @@
                            <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>
+                           <span>{{ $t('word.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
                            <input
                               v-model="autorefreshTimer"
                               class="slider no-border"
@@ -59,7 +59,7 @@
                         tabindex="0"
                      >
                         <i class="mdi mdi-24px mdi-file-export mr-1" />
-                        <span>{{ t('word.export') }}</span>
+                        <span>{{ $t('word.export') }}</span>
                         <i class="mdi mdi-24px mdi-menu-down" />
                      </button>
                      <ul class="menu text-left">
@@ -74,7 +74,7 @@
                </div>
                <div class="workspace-query-info">
                   <div v-if="sortedResults.length">
-                     {{ t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
+                     {{ $t('word.processes') }}: <b>{{ sortedResults.length.toLocaleString() }}</b>
                   </div>
                </div>
             </div>
@@ -133,227 +133,218 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue';
+import arrayToFile from '../libs/arrayToFile';
-import { ipcRenderer } from 'electron';
-import { ConnectionParams } from 'common/interfaces/antares';
-import { exportRows } from '../libs/exportRows';
 import { useNotificationsStore } from '@/stores/notifications';
-import { useFocusTrap } from '@/composables/useFocusTrap';
 import Schema from '@/ipc-api/Schema';
 import { useConnectionsStore } from '@/stores/connections';
-import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
+import BaseVirtualScroll from '@/components/BaseVirtualScroll';
-import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue';
+import ModalProcessesListRow from '@/components/ModalProcessesListRow';
-import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue';
+import ModalProcessesListContext from '@/components/ModalProcessesListContext';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalProcessesList',
+   components: {
+      BaseVirtualScroll,
+      ModalProcessesListRow,
+      ModalProcessesListContext
+   },
+   props: {
+      connection: Object
+   },
+   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const { getConnectionName } = useConnectionsStore();
 
-const { addNotification } = useNotificationsStore();
+      return { addNotification, getConnectionName };
-const { getConnectionName } = useConnectionsStore();
+   },
-
+   data () {
-const { trapRef } = useFocusTrap();
+      return {
-
+         resultsSize: 1000,
-const props = defineProps({
+         isQuering: false,
-   connection: Object as Prop<ConnectionParams>
+         isContext: false,
-});
+         autorefreshTimer: 0,
-
+         refreshInterval: null,
-const emit = defineEmits(['close']);
+         contextEvent: null,
-
+         selectedCell: null,
-const tableWrapper: Ref<HTMLDivElement> = ref(null);
+         selectedRow: null,
-const table: Ref<HTMLDivElement> = ref(null);
+         results: [],
-const resultTable: Ref<Component & {updateWindow: () => void}> = ref(null);
+         fields: [],
-const resultsSize = ref(1000);
+         currentSort: '',
-const isQuering = ref(false);
+         currentSortDir: 'asc',
-const isContext = ref(false);
+         scrollElement: null
-const autorefreshTimer = ref(0);
+      };
-const refreshInterval: Ref<NodeJS.Timeout> = ref(null);
+   },
-const contextEvent = ref(null);
+   computed: {
-const selectedCell = ref(null);
+      connectionName () {
-const selectedRow: Ref<number> = ref(null);
+         return this.getConnectionName(this.connection.uid);
-const results = ref([]);
+      },
-const fields = ref([]);
+      sortedResults () {
-const currentSort = ref('');
+         if (this.currentSort) {
-const currentSortDir = ref('asc');
+            return [...this.results].sort((a, b) => {
-const scrollElement = ref(null);
+               let modifier = 1;
-
+               const valA = typeof a[this.currentSort] === 'string' ? a[this.currentSort].toLowerCase() : a[this.currentSort];
-const connectionName = computed(() => getConnectionName(props.connection.uid));
+               const valB = typeof b[this.currentSort] === 'string' ? b[this.currentSort].toLowerCase() : b[this.currentSort];
-
+               if (this.currentSortDir === 'desc') modifier = -1;
-const sortedResults = computed(() => {
+               if (valA < valB) return -1 * modifier;
-   if (currentSort.value) {
+               if (valA > valB) return 1 * modifier;
-      return [...results.value].sort((a, b) => {
+               return 0;
-         let modifier = 1;
+            });
-         const valA = typeof a[currentSort.value] === 'string' ? a[currentSort.value].toLowerCase() : a[currentSort.value];
+         }
-         const valB = typeof b[currentSort.value] === 'string' ? b[currentSort.value].toLowerCase() : b[currentSort.value];
+         else
-         if (currentSortDir.value === 'desc') modifier = -1;
+            return this.results;
-         if (valA < valB) return -1 * modifier;
-         if (valA > valB) return 1 * modifier;
-         return 0;
-      });
-   }
-   else
-      return results.value;
-});
-
-const getProcessesList = async () => {
-   isQuering.value = true;
-
-   try { // Table data
-      const { status, response } = await Schema.getProcesses(props.connection.uid);
-
-      if (status === 'success') {
-         results.value = response;
-         fields.value = response.length ? Object.keys(response[0]) : [];
       }
-      else
+   },
-         addNotification({ status: 'error', message: response });
+   created () {
-   }
+      window.addEventListener('keydown', this.onKey, { capture: true });
-   catch (err) {
+   },
-      addNotification({ status: 'error', message: err.stack });
+   updated () {
-   }
+      if (this.$refs.table)
+         this.refreshScroller();
 
-   isQuering.value = false;
+      if (this.$refs.tableWrapper)
-};
+         this.scrollElement = this.$refs.tableWrapper;
+   },
+   mounted () {
+      this.getProcessesList();
+      window.addEventListener('resize', this.resizeResults);
+   },
+   beforeUnmount () {
+      window.removeEventListener('keydown', this.onKey, { capture: true });
+      window.removeEventListener('resize', this.resizeResults);
+      clearInterval(this.refreshInterval);
+   },
+   methods: {
+      async getProcessesList () {
+         this.isQuering = true;
 
-const setRefreshInterval = () => {
+         // if table changes clear cached values
-   clearRefresh();
+         if (this.lastTable !== this.table)
+            this.results = [];
 
-   if (+autorefreshTimer.value) {
+         try { // Table data
-      refreshInterval.value = setInterval(() => {
+            const { status, response } = await Schema.getProcesses(this.connection.uid);
-         if (!isQuering.value)
-            getProcessesList();
-      }, autorefreshTimer.value * 1000);
-   }
-};
 
-const clearRefresh = () => {
+            if (status === 'success') {
-   if (refreshInterval.value)
+               this.results = response;
-      clearInterval(refreshInterval.value);
+               this.fields = response.length ? Object.keys(response[0]) : [];
-};
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
 
-const resizeResults = () => {
+         this.isQuering = false;
-   if (resultTable.value) {
+      },
-      const el = tableWrapper.value.parentElement;
+      setRefreshInterval () {
+         this.clearRefresh();
 
-      if (el) {
+         if (+this.autorefreshTimer) {
-         const size = el.offsetHeight;
+            this.refreshInterval = setInterval(() => {
-         resultsSize.value = size;
+               if (!this.isQuering)
+                  this.getProcessesList();
+            }, this.autorefreshTimer * 1000);
+         }
+      },
+      clearRefresh () {
+         if (this.refreshInterval)
+            clearInterval(this.refreshInterval);
+      },
+      resizeResults () {
+         if (this.$refs.resultTable) {
+            const el = this.$refs.tableWrapper.parentElement;
+
+            if (el) {
+               const size = el.offsetHeight;
+               this.resultsSize = size;
+            }
+            this.$refs.resultTable.updateWindow();
+         }
+      },
+      refreshScroller () {
+         this.resizeResults();
+      },
+      sort (field) {
+         if (field === this.currentSort) {
+            if (this.currentSortDir === 'asc')
+               this.currentSortDir = 'desc';
+            else
+               this.resetSort();
+         }
+         else {
+            this.currentSortDir = 'asc';
+            this.currentSort = field;
+         }
+      },
+      resetSort () {
+         this.currentSort = '';
+         this.currentSortDir = 'asc';
+      },
+      stopRefresh () {
+         this.autorefreshTimer = 0;
+         this.clearRefresh();
+      },
+      selectRow (row) {
+         this.selectedRow = Number(row);
+      },
+      contextMenu (event, cell) {
+         if (event.target.localName === 'input') return;
+         this.stopRefresh();
+
+         this.selectedCell = cell;
+         this.selectedRow = Number(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')
+            this.closeModal();
+         if (e.key === 'F5')
+            this.getProcessesList();
       }
-      resultTable.value.updateWindow();
    }
 };
-
-const refreshScroller = () => resizeResults();
-
-const sort = (field: string) => {
-   if (field === currentSort.value) {
-      if (currentSortDir.value === 'asc')
-         currentSortDir.value = 'desc';
-      else
-         resetSort();
-   }
-   else {
-      currentSortDir.value = 'asc';
-      currentSort.value = field;
-   }
-};
-
-const resetSort = () => {
-   currentSort.value = '';
-   currentSortDir.value = 'asc';
-};
-
-const stopRefresh = () => {
-   autorefreshTimer.value = 0;
-   clearRefresh();
-};
-
-const selectRow = (row: number) => {
-   selectedRow.value = Number(row);
-};
-
-const contextMenu = (event: MouseEvent, cell: { id: number; field: string }) => {
-   if ((event.target as HTMLElement).localName === 'input') return;
-   stopRefresh();
-
-   selectedCell.value = cell;
-   selectedRow.value = Number(cell.id);
-   contextEvent.value = event;
-   isContext.value = true;
-};
-
-const killProcess = async () => {
-   try { // Table data
-      const { status, response } = await Schema.killProcess({ uid: props.connection.uid, pid: selectedRow.value });
-
-      if (status === 'success')
-         getProcessesList();
-      else
-         addNotification({ status: 'error', message: response });
-   }
-   catch (err) {
-      addNotification({ status: 'error', message: err.stack });
-   }
-};
-
-const closeContext = () => {
-   isContext.value = false;
-};
-
-const copyCell = () => {
-   const row = results.value.find(row => Number(row.id) === selectedRow.value);
-   const valueToCopy = row[selectedCell.value.field];
-   navigator.clipboard.writeText(valueToCopy);
-};
-
-const copyRow = () => {
-   const row = results.value.find(row => Number(row.id) === selectedRow.value);
-   const rowToCopy = JSON.parse(JSON.stringify(row));
-   navigator.clipboard.writeText(JSON.stringify(rowToCopy));
-};
-
-const closeModal = () => emit('close');
-
-const downloadTable = (format: 'csv' | 'json') => {
-   if (!sortedResults.value) return;
-   exportRows({
-      type: format,
-      content: sortedResults.value,
-      table: 'processes'
-   });
-};
-
-const onKey = (e:KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-ipcRenderer.on('run-or-reload', getProcessesList);
-
-window.addEventListener('keydown', onKey, { capture: true });
-
-onMounted(() => {
-   getProcessesList();
-   window.addEventListener('resize', resizeResults);
-});
-
-onUpdated(() => {
-   if (table.value)
-      refreshScroller();
-   if (tableWrapper.value)
-      scrollElement.value = tableWrapper.value;
-});
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey, { capture: true });
-   window.removeEventListener('resize', resizeResults);
-   clearInterval(refreshInterval.value);
-
-   ipcRenderer.removeListener('run-or-reload', getProcessesList);
-});
-
-defineExpose({ refreshScroller });
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/ModalProcessesListContext.vue

@@ -1,74 +1,76 @@
 <template>
    <BaseContextMenu
-      :context-event="props.contextEvent"
+      :context-event="contextEvent"
       @close-context="closeContext"
    >
-      <div v-if="props.selectedRow" class="context-element">
+      <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>
+         <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="props.selectedRow"
+               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" /> {{ t('word.cell', 1) }}
+                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ $tc('word.cell', 1) }}
                </span>
             </div>
             <div
-               v-if="props.selectedRow"
+               v-if="selectedRow"
                class="context-element"
                @click="copyRow"
             >
                <span class="d-flex">
-                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', 1) }}
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ $tc('word.row', 1) }}
                </span>
             </div>
          </div>
       </div>
       <div
-         v-if="props.selectedRow"
+         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') }}
+            <i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ $t('message.killProcess') }}
          </span>
       </div>
    </BaseContextMenu>
 </template>
 
-<script setup lang="ts">
+<script>
-import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import BaseContextMenu from '@/components/BaseContextMenu';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
-
+   name: 'ModalProcessesListContext',
-const props = defineProps({
+   components: {
-   contextEvent: MouseEvent,
+      BaseContextMenu
-   selectedRow: Number,
+   },
-   selectedCell: Object
+   props: {
-});
+      contextEvent: MouseEvent,
-
+      selectedRow: Number,
-const emit = defineEmits(['close-context', 'copy-cell', 'copy-row', 'kill-process']);
+      selectedCell: Object
-
+   },
-const closeContext = () => {
+   emits: ['close-context', 'copy-cell', 'copy-row', 'kill-process'],
-   emit('close-context');
+   computed: {
-};
+   },
-
+   methods: {
-const copyCell = () => {
+      closeContext () {
-   emit('copy-cell');
+         this.$emit('close-context');
-   closeContext();
+      },
-};
+      copyCell () {
-
+         this.$emit('copy-cell');
-const copyRow = () => {
+         this.closeContext();
-   emit('copy-row');
+      },
-   closeContext();
+      copyRow () {
-};
+         this.$emit('copy-row');
-
+         this.closeContext();
-const killProcess = () => {
+      },
-   emit('kill-process');
+      killProcess () {
-   closeContext();
+         this.$emit('kill-process');
+         this.closeContext();
+      }
+   }
 };
 </script>

src/renderer/components/ModalProcessesListRow.vue

@@ -12,31 +12,30 @@
             class="cell-content"
             :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
             @dblclick="dblClick(cKey)"
-         >{{ cutText(col, 250) }}</span>
+         >{{ cutText(col) }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
-         :confirm-text="t('word.update')"
+         :confirm-text="$t('word.update')"
-         :cancel-text="t('word.close')"
+         :cancel-text="$t('word.close')"
          size="medium"
          :hide-footer="true"
          @hide="hideInfoModal"
       >
          <template #header>
             <div class="d-flex">
-               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ t('message.processInfo') }}
+               <i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ $t('message.processInfo') }}
             </div>
          </template>
          <template #body>
             <div>
                <div>
                   <TextEditor
-                     :model-value="props.row.info || ''"
+                     :value="row.info || ''"
                      editor-class="textarea-editor"
                      :mode="editorMode"
                      :read-only="true"
                   />
-                  <div class="mb-4" />
                </div>
             </div>
          </template>
@@ -44,47 +43,60 @@
    </div>
 </template>
 
-<script setup lang="ts">
+<script>
-import { Ref, ref } from 'vue';
+import ConfirmModal from '@/components/BaseConfirmModal';
-import ConfirmModal from '@/components/BaseConfirmModal.vue';
+import TextEditor from '@/components/BaseTextEditor';
-import TextEditor from '@/components/BaseTextEditor.vue';
-import { useFilters } from '@/composables/useFilters';
-import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+export default {
-
+   name: 'ModalProcessesListRow',
-const { cutText } = useFilters();
+   components: {
-
+      ConfirmModal,
-const props = defineProps({
+      TextEditor
-   row: Object
+   },
-});
+   props: {
-
+      row: Object
-const emit = defineEmits(['select-row', 'contextmenu', 'stop-refresh']);
+   },
-
+   emits: ['select-row', 'contextmenu', 'stop-refresh'],
-const isInlineEditor: Ref<{[key: string]: boolean}> = ref({});
+   data () {
-const isInfoModal = ref(false);
+      return {
-const editorMode = ref('sql');
+         isInlineEditor: {},
-
+         isInfoModal: false,
-const isNull = (value: string | number) => value === null ? ' is-null' : '';
+         editorMode: 'sql'
-
+      };
-const selectRow = () => {
+   },
-   emit('select-row');
+   computed: {},
+   methods: {
+      isNull (value) {
+         return value === null ? ' is-null' : '';
+      },
+      selectRow () {
+         this.$emit('select-row');
+      },
+      openContext (event, payload) {
+         this.$emit('contextmenu', event, payload);
+      },
+      hideInfoModal () {
+         this.isInfoModal = false;
+      },
+      dblClick (col) {
+         if (col !== 'info') return;
+         this.$emit('stop-refresh');
+         this.isInfoModal = true;
+      },
+      onKey (e) {
+         e.stopPropagation();
+         if (e.key === 'Escape') {
+            this.isInlineEditor[this.editingField] = false;
+            this.editingField = null;
+            window.removeEventListener('keydown', this.onKey);
+         }
+      },
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
+      }
+   }
 };
-
-const openContext = (event: MouseEvent, payload: { id: number; field: string }) => {
-   emit('contextmenu', event, payload);
-};
-
-const hideInfoModal = () => {
-   isInfoModal.value = false;
-};
-
-const dblClick = (col: string) => {
-   if (col !== 'info') return;
-   emit('stop-refresh');
-   isInfoModal.value = true;
-};
-
 </script>
 
 <style lang="scss">

src/renderer/components/ModalSettings.vue

@@ -2,12 +2,12 @@
    <Teleport to="#window-content">
       <div id="settings" class="modal active">
          <a class="modal-overlay c-hand" @click="closeModal" />
-         <div ref="trapRef" class="modal-container">
+         <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-cog mr-1" />
-                     <span class="cut-text">{{ t('word.settings') }}</span>
+                     <span class="cut-text">{{ $t('word.settings') }}</span>
                   </div>
                </div>
                <a class="btn btn-clear c-hand" @click="closeModal" />
@@ -21,21 +21,14 @@
                            :class="{'active': selectedTab === 'general'}"
                            @click="selectTab('general')"
                         >
-                           <a class="tab-link">{{ t('word.general') }}</a>
+                           <a class="tab-link">{{ $t('word.general') }}</a>
                         </li>
                         <li
                            class="tab-item c-hand"
                            :class="{'active': selectedTab === 'themes'}"
                            @click="selectTab('themes')"
                         >
-                           <a class="tab-link">{{ t('word.themes') }}</a>
+                           <a class="tab-link">{{ $t('word.themes') }}</a>
-                        </li>
-                        <li
-                           class="tab-item c-hand"
-                           :class="{'active': selectedTab === 'shortcuts'}"
-                           @click="selectTab('shortcuts')"
-                        >
-                           <a class="tab-link">{{ t('word.shortcuts') }}</a>
                         </li>
                         <li
                            v-if="updateStatus !== 'disabled'"
@@ -43,21 +36,21 @@
                            :class="{'active': selectedTab === 'update'}"
                            @click="selectTab('update')"
                         >
-                           <a class="tab-link" :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 c-hand"
                            :class="{'active': selectedTab === 'changelog'}"
                            @click="selectTab('changelog')"
                         >
-                           <a class="tab-link">{{ t('word.changelog') }}</a>
+                           <a class="tab-link">{{ $t('word.changelog') }}</a>
                         </li>
                         <li
                            class="tab-item c-hand"
                            :class="{'active': selectedTab === 'about'}"
                            @click="selectTab('about')"
                         >
-                           <a class="tab-link">{{ t('word.about') }}</a>
+                           <a class="tab-link">{{ $t('word.about') }}</a>
                         </li>
                      </ul>
                   </div>
@@ -65,14 +58,14 @@
                      <div class="container">
                         <form class="form-horizontal columns">
                            <div class="column col-12 h6 text-uppercase mb-1">
-                              {{ t('word.application') }}
+                              {{ $t('word.application') }}
                            </div>
                            <div class="column col-12 col-sm-12 mb-2 columns">
                               <div class="form-group column col-12">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
                                        <i class="mdi mdi-18px mdi-translate mr-1" />
-                                       {{ t('word.language') }}
+                                       {{ $t('word.language') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -86,16 +79,16 @@
                                     />
                                  </div>
                                  <div class="col-4 col-sm-12 px-2 p-vcentered">
-                                    <small class="d-block" style="line-height: 1.1; font-size: 70%;">
+                                    <small class="d-block" style="line-height:1.1; font-size:70%;">
-                                       {{ t('message.missingOrIncompleteTranslation') }}<br>
+                                       {{ $t('message.missingOrIncompleteTranslation') }}<br>
-                                       <a class="text-bold c-hand" @click="openOutside('https://github.com/antares-sql/antares/wiki/Translate-Antares')">{{ t('message.findOutHowToContribute') }}</a>
+                                       <a class="text-bold c-hand" @click="openOutside('https://github.com/antares-sql/antares/wiki/Translate-Antares')">{{ $t('message.findOutHowToContribute') }}</a>
                                     </small>
                                  </div>
                               </div>
                               <div class="form-group column col-12">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('message.dataTabPageSize') }}
+                                       {{ $t('message.dataTabPageSize') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -110,7 +103,7 @@
                               <div class="form-group column col-12 mb-0">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('message.restorePreviourSession') }}
+                                       {{ $t('message.restorePreviourSession') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -123,7 +116,7 @@
                               <div class="form-group column col-12 mb-0">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('message.disableBlur') }}
+                                       {{ $t('message.disableBlur') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -133,23 +126,10 @@
                                     </label>
                                  </div>
                               </div>
-                              <div class="form-group column col-12 mb-0">
-                                 <div class="col-5 col-sm-12">
-                                    <label class="form-label">
-                                       {{ t('message.disableScratchpad') }}
-                                    </label>
-                                 </div>
-                                 <div class="col-3 col-sm-12">
-                                    <label class="form-switch d-inline-block" @click.prevent="toggleDisableScratchpad">
-                                       <input type="checkbox" :checked="disableScratchpad">
-                                       <i class="form-icon" />
-                                    </label>
-                                 </div>
-                              </div>
                               <div class="form-group column col-12">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('message.notificationsTimeout') }}
+                                       {{ $t('message.notificationsTimeout') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -161,19 +141,19 @@
                                           min="1"
                                           @focusout="checkNotificationsTimeout"
                                        >
-                                       <span class="input-group-addon">{{ t('word.seconds') }}</span>
+                                       <span class="input-group-addon">{{ $t('word.seconds') }}</span>
                                     </div>
                                  </div>
                               </div>
                            </div>
                            <div class="column col-12 h6 mt-4 text-uppercase mb-1">
-                              {{ t('word.editor') }}
+                              {{ $t('word.editor') }}
                            </div>
                            <div class="column col-12 col-sm-12 columns">
                               <div class="form-group column col-12 mb-0">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('word.autoCompletion') }}
+                                       {{ $t('word.autoCompletion') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -186,7 +166,7 @@
                               <div class="form-group column col-12 mb-0">
                                  <div class="col-5 col-sm-12">
                                     <label class="form-label">
-                                       {{ t('message.wrapLongLines') }}
+                                       {{ $t('message.wrapLongLines') }}
                                     </label>
                                  </div>
                                  <div class="col-3 col-sm-12">
@@ -205,18 +185,18 @@
                      <div class="container">
                         <div class="columns">
                            <div class="column col-12 h6 text-uppercase mb-2">
-                              {{ t('message.applicationTheme') }}
+                              {{ $t('message.applicationTheme') }}
                            </div>
                            <div
                               class="column col-6 c-hand theme-block"
                               :class="{'selected': applicationTheme === 'dark'}"
                               @click="changeApplicationTheme('dark')"
                            >
-                              <img :src="darkPreview" 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">
-                                    {{ t('word.dark') }}
+                                    {{ $t('word.dark') }}
                                  </div>
                               </div>
                            </div>
@@ -225,11 +205,11 @@
                               :class="{'selected': applicationTheme === 'light'}"
                               @click="changeApplicationTheme('light')"
                            >
-                              <img :src="lightPreview" 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">
-                                    {{ t('word.light') }}
+                                    {{ $t('word.light') }}
                                  </div>
                               </div>
                            </div>
@@ -237,7 +217,7 @@
 
                         <div class="columns mt-4">
                            <div class="column col-12 h6 text-uppercase mb-2 mt-4">
-                              {{ t('message.editorTheme') }}
+                              {{ $t('message.editorTheme') }}
                            </div>
                            <div class="column col-6 h5 mb-4">
                               <BaseSelect
@@ -258,21 +238,21 @@
                                     :class="{'active': editorFontSize === 'small'}"
                                     @click="changeEditorFontSize('small')"
                                  >
-                                    {{ t('word.small') }}
+                                    {{ $t('word.small') }}
                                  </button>
                                  <button
                                     class="btn btn-dark cut-text"
                                     :class="{'active': editorFontSize === 'medium'}"
                                     @click="changeEditorFontSize('medium')"
                                  >
-                                    {{ t('word.medium') }}
+                                    {{ $t('word.medium') }}
                                  </button>
                                  <button
                                     class="btn btn-dark cut-text"
                                     :class="{'active': editorFontSize === 'large'}"
                                     @click="changeEditorFontSize('large')"
                                  >
-                                    {{ t('word.large') }}
+                                    {{ $t('word.large') }}
                                  </button>
                               </div>
                            </div>
@@ -289,9 +269,6 @@
                      </div>
                   </div>
 
-                  <div v-show="selectedTab === 'shortcuts'" class="panel-body py-4">
-                     <ModalSettingsShortcuts />
-                  </div>
                   <div v-show="selectedTab === 'update'" class="panel-body py-4">
                      <ModalSettingsUpdate />
                   </div>
@@ -301,19 +278,19 @@
 
                   <div v-show="selectedTab === 'about'" class="panel-body py-4">
                      <div class="text-center">
-                        <img :src="appLogo" width="128">
+                        <img src="../images/logo.svg" width="128">
                         <h4>{{ appName }}</h4>
                         <p class="mb-2">
-                           {{ t('word.version') }} {{ appVersion }}<br>
+                           {{ $t('word.version') }} {{ appVersion }}<br>
                            <a class="c-hand" @click="openOutside('https://github.com/antares-sql/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')">{{ appAuthor }}</a></small><br>
+                           <small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
                         </p>
                         <div class="mb-2">
-                           <small class="d-block text-uppercase">{{ t('word.contributors') }}:</small>
+                           <small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
                            <div class="d-block py-1">
                               <small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
                            </div>
-                           <small>{{ t('message.madeWithJS') }}</small>
+                           <small>{{ $t('message.madeWithJS') }}</small>
                         </div>
                      </div>
                   </div>
@@ -324,78 +301,176 @@
    </Teleport>
 </template>
 
-<script setup lang="ts">
+<script>
-import { onBeforeUnmount, Ref, ref, computed } from 'vue';
 import { shell } from 'electron';
 import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
 import { useApplicationStore } from '@/stores/application';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import { useFocusTrap } from '@/composables/useFocusTrap';
+import localesNames from '@/i18n/supported-locales';
-import { localesNames } from '@/i18n/supported-locales';
+import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
-import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
+import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
-import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
+import BaseTextEditor from '@/components/BaseTextEditor';
-import ModalSettingsShortcuts from '@/components/ModalSettingsShortcuts.vue';
-import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
-import { AvailableLocale } from '@/i18n';
 
-const { t } = useI18n();
+export default {
+   name: 'ModalSettings',
+   components: {
+      ModalSettingsUpdate,
+      ModalSettingsChangelog,
+      BaseTextEditor,
+      BaseSelect
+   },
+   setup () {
+      const applicationStore = useApplicationStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
 
-const applicationStore = useApplicationStore();
+      const {
-const settingsStore = useSettingsStore();
+         selectedSettingTab,
-const workspacesStore = useWorkspacesStore();
+         updateStatus
+      } = storeToRefs(applicationStore);
+      const {
+         locale: selectedLocale,
+         dataTabLimit: pageSize,
+         autoComplete: selectedAutoComplete,
+         lineWrap: selectedLineWrap,
+         notificationsTimeout,
+         restoreTabs,
+         disableBlur,
+         applicationTheme,
+         editorTheme,
+         editorFontSize
+      } = storeToRefs(settingsStore);
 
-const { trapRef } = useFocusTrap({ disableAutofocus: true });
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
-const {
+      const {
-   selectedSettingTab,
+         changeLocale,
-   updateStatus
+         changePageSize,
-} = storeToRefs(applicationStore);
+         changeRestoreTabs,
-const {
+         changeDisableBlur,
-   locale: selectedLocale,
+         changeAutoComplete,
-   dataTabLimit: pageSize,
+         changeLineWrap,
-   autoComplete: selectedAutoComplete,
+         changeApplicationTheme,
-   lineWrap: selectedLineWrap,
+         changeEditorTheme,
-   notificationsTimeout,
+         changeEditorFontSize,
-   restoreTabs,
+         updateNotificationsTimeout
-   disableBlur,
+      } = settingsStore;
-   disableScratchpad,
+      const {
-   applicationTheme,
+         hideSettingModal,
-   editorTheme,
+         appName,
-   editorFontSize
+         appVersion
-} = storeToRefs(settingsStore);
+      } = applicationStore;
+      const { getWorkspace } = workspacesStore;
 
-const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+      return {
+         appName,
+         appVersion,
+         selectedSettingTab,
+         updateStatus,
+         closeModal: hideSettingModal,
+         selectedLocale,
+         pageSize,
+         selectedAutoComplete,
+         selectedLineWrap,
+         notificationsTimeout,
+         restoreTabs,
+         disableBlur,
+         applicationTheme,
+         editorTheme,
+         editorFontSize,
+         changeLocale,
+         changePageSize,
+         changeRestoreTabs,
+         changeDisableBlur,
+         changeAutoComplete,
+         changeLineWrap,
+         changeApplicationTheme,
+         changeEditorTheme,
+         changeEditorFontSize,
+         updateNotificationsTimeout,
+         selectedWorkspace,
+         getWorkspace
+      };
+   },
+   data () {
+      return {
+         appAuthor: 'Fabio Di Stasio',
+         localLocale: null,
+         localPageSize: null,
+         localTimeout: null,
+         localEditorTheme: null,
+         selectedTab: 'general',
+         pageSizes: [30, 40, 100, 250, 500, 1000],
+         editorThemes: [
+            {
+               group: this.$t('word.light'),
+               themes: [
+                  { code: 'chrome', name: 'Chrome' },
+                  { code: 'clouds', name: 'Clouds' },
+                  { code: 'crimson_editor', name: 'Crimson Editor' },
+                  { code: 'dawn', name: 'Dawn' },
+                  { code: 'dreamweaver', name: 'Dreamweaver' },
+                  { code: 'eclupse', name: 'Eclipse' },
+                  { code: 'github', name: 'GitHub' },
+                  { code: 'iplastic', name: 'IPlastic' },
+                  { code: 'solarized_light', name: 'Solarized Light' },
+                  { code: 'textmate', name: 'TextMate' },
+                  { code: 'tomorrow', name: 'Tomorrow' },
+                  { code: 'xcode', name: 'Xcode' },
+                  { code: 'kuroir', name: 'Kuroir' },
+                  { code: 'katzenmilch', name: 'KatzenMilch' },
+                  { code: 'sqlserver', name: 'SQL Server' }
+               ]
+            },
+            {
+               group: this.$t('word.dark'),
+               themes: [
+                  { code: 'ambiance', name: 'Ambiance' },
+                  { code: 'chaos', name: 'Chaos' },
+                  { code: 'clouds_midnight', name: 'Clouds Midnight' },
+                  { code: 'dracula', name: 'Dracula' },
+                  { code: 'cobalt', name: 'Cobalt' },
+                  { code: 'gruvbox', name: 'Gruvbox' },
+                  { code: 'gob', name: 'Green on Black' },
+                  { code: 'idle_fingers', name: 'Idle Fingers' },
+                  { code: 'kr_theme', name: 'krTheme' },
+                  { code: 'merbivore', name: 'Merbivore' },
+                  { code: 'mono_industrial', name: 'Mono Industrial' },
+                  { code: 'monokai', name: 'Monokai' },
+                  { code: 'nord_dark', name: 'Nord Dark' },
+                  { code: 'pastel_on_dark', name: 'Pastel on Dark' },
+                  { code: 'solarized_dark', name: 'Solarized Dark' },
+                  { code: 'terminal', name: 'Terminal' },
+                  { code: 'tomorrow_night', name: 'Tomorrow Night' },
+                  { code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
+                  { code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
+                  { code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
+                  { code: 'twilight', name: 'Twilight' },
+                  { code: 'vibrant_ink', name: 'Vibrant Ink' }
+               ]
+            }
+         ],
+         contributors: process.env.APP_CONTRIBUTORS
+      };
+   },
+   computed: {
+      locales () {
+         const locales = [];
+         for (const locale of this.$i18n.availableLocales)
+            locales.push({ code: locale, name: localesNames[locale] });
 
-const {
+         return locales;
-   changeLocale,
+      },
-   changePageSize,
+      hasUpdates () {
-   changeRestoreTabs,
+         return ['available', 'downloading', 'downloaded', 'link'].includes(this.updateStatus);
-   changeDisableBlur,
+      },
-   changeDisableScratchpad,
+      workspace () {
-   changeAutoComplete,
+         return this.getWorkspace(this.selectedWorkspace);
-   changeLineWrap,
+      },
-   changeApplicationTheme,
+      exampleQuery () {
-   changeEditorTheme,
+         return `-- This is an example
-   changeEditorFontSize,
-   updateNotificationsTimeout
-} = settingsStore;
-const {
-   hideSettingModal: closeModal,
-   appName,
-   appVersion
-} = applicationStore;
-const { getWorkspace } = workspacesStore;
-
-const appAuthor = 'Fabio Di Stasio';
-const pageSizes = [30, 40, 100, 250, 500, 1000];
-const contributors = process.env.APP_CONTRIBUTORS;
-const appLogo = require('../images/logo.svg');
-const darkPreview = require('../images/dark.png');
-const lightPreview = require('../images/light.png');
-const exampleQuery = `-- This is an example
 SELECT 
     employee.id,
     employee.first_name,
@@ -410,135 +485,57 @@ GROUP BY
 ORDER BY
     employee.id ASC;
 `;
-
+      },
-const localLocale: Ref<AvailableLocale> = ref(null);
+      otherContributors () {
-const localPageSize: Ref<number> = ref(null);
+         return this.contributors
-const localTimeout: Ref<number> = ref(null);
+            .split(',')
-const localEditorTheme: Ref<string> = ref(null);
+            .filter(c => !c.includes(this.appAuthor))
-const selectedTab: Ref<string> = ref('general');
+            .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-
+      }
-const editorThemes = computed(() => [
-   {
-      group: t('word.light'),
-      themes: [
-         { code: 'chrome', name: 'Chrome' },
-         { code: 'clouds', name: 'Clouds' },
-         { code: 'crimson_editor', name: 'Crimson Editor' },
-         { code: 'dawn', name: 'Dawn' },
-         { code: 'dreamweaver', name: 'Dreamweaver' },
-         { code: 'eclupse', name: 'Eclipse' },
-         { code: 'github', name: 'GitHub' },
-         { code: 'iplastic', name: 'IPlastic' },
-         { code: 'solarized_light', name: 'Solarized Light' },
-         { code: 'textmate', name: 'TextMate' },
-         { code: 'tomorrow', name: 'Tomorrow' },
-         { code: 'xcode', name: 'Xcode' },
-         { code: 'kuroir', name: 'Kuroir' },
-         { code: 'katzenmilch', name: 'KatzenMilch' },
-         { code: 'sqlserver', name: 'SQL Server' }
-      ]
    },
-   {
+   created () {
-      group: t('word.dark'),
+      this.localLocale = this.selectedLocale;
-      themes: [
+      this.localPageSize = this.pageSize;
-         { code: 'ambiance', name: 'Ambiance' },
+      this.localTimeout = this.notificationsTimeout;
-         { code: 'chaos', name: 'Chaos' },
+      this.localEditorTheme = this.editorTheme;
-         { code: 'clouds_midnight', name: 'Clouds Midnight' },
+      this.selectedTab = this.selectedSettingTab;
-         { code: 'dracula', name: 'Dracula' },
+      window.addEventListener('keydown', this.onKey);
-         { code: 'cobalt', name: 'Cobalt' },
+   },
-         { code: 'gruvbox', name: 'Gruvbox' },
+   beforeUnmount () {
-         { code: 'gob', name: 'Green on Black' },
+      window.removeEventListener('keydown', this.onKey);
-         { code: 'idle_fingers', name: 'Idle Fingers' },
+   },
-         { code: 'kr_theme', name: 'krTheme' },
+   methods: {
-         { code: 'merbivore', name: 'Merbivore' },
+      selectTab (tab) {
-         { code: 'mono_industrial', name: 'Mono Industrial' },
+         this.selectedTab = tab;
-         { code: 'monokai', name: 'Monokai' },
+      },
-         { code: 'nord_dark', name: 'Nord Dark' },
+      openOutside (link) {
-         { code: 'pastel_on_dark', name: 'Pastel on Dark' },
+         shell.openExternal(link);
-         { code: 'solarized_dark', name: 'Solarized Dark' },
+      },
-         { code: 'terminal', name: 'Terminal' },
+      checkNotificationsTimeout () {
-         { code: 'tomorrow_night', name: 'Tomorrow Night' },
+         if (!this.localTimeout)
-         { code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
+            this.localTimeout = 10;
-         { code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
+
-         { code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
+         this.updateNotificationsTimeout(+this.localTimeout);
-         { code: 'twilight', name: 'Twilight' },
+      },
-         { code: 'vibrant_ink', name: 'Vibrant Ink' }
+      onKey (e) {
-      ]
+         e.stopPropagation();
+         if (e.key === 'Escape')
+            this.closeModal();
+      },
+      toggleRestoreSession () {
+         this.changeRestoreTabs(!this.restoreTabs);
+      },
+      toggleDisableBlur () {
+         this.changeDisableBlur(!this.disableBlur);
+      },
+      toggleAutoComplete () {
+         this.changeAutoComplete(!this.selectedAutoComplete);
+      },
+      toggleLineWrap () {
+         this.changeLineWrap(!this.selectedLineWrap);
+      }
    }
-]);
-
-const locales = computed(() => {
-   const locales = [];
-   for (const locale of Object.keys(localesNames))
-      locales.push({ code: locale, name: localesNames[locale] });
-
-   return locales;
-});
-
-const hasUpdates = computed(() => ['available', 'downloading', 'downloaded', 'link'].includes(updateStatus.value));
-
-const workspace = computed(() => {
-   return getWorkspace(selectedWorkspace.value);
-});
-
-const otherContributors = computed(() => {
-   return contributors
-      .split(',')
-      .filter(c => !c.includes(appAuthor))
-      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-});
-
-const selectTab = (tab: string) => {
-   selectedTab.value = tab;
 };
-
-const openOutside = (link: string) => {
-   shell.openExternal(link);
-};
-
-const checkNotificationsTimeout = () => {
-   if (!localTimeout.value)
-      localTimeout.value = 10;
-
-   updateNotificationsTimeout(+localTimeout.value);
-};
-
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-   if (e.key === 'Escape')
-      closeModal();
-};
-
-const toggleRestoreSession = () => {
-   changeRestoreTabs(!restoreTabs.value);
-};
-
-const toggleDisableBlur = () => {
-   changeDisableBlur(!disableBlur.value);
-};
-
-const toggleDisableScratchpad = () => {
-   changeDisableScratchpad(!disableScratchpad.value);
-};
-
-const toggleAutoComplete = () => {
-   changeAutoComplete(!selectedAutoComplete.value);
-};
-
-const toggleLineWrap = () => {
-   changeLineWrap(!selectedLineWrap.value);
-};
-
-localLocale.value = selectedLocale.value;
-localPageSize.value = pageSize.value as number;
-localTimeout.value = notificationsTimeout.value as number;
-localEditorTheme.value = editorTheme.value as string;
-selectedTab.value = selectedSettingTab.value;
-window.addEventListener('keydown', onKey);
-
-onBeforeUnmount(() => {
-   window.removeEventListener('keydown', onKey);
-});
 </script>
 
 <style lang="scss">
@@ -550,12 +547,6 @@ onBeforeUnmount(() => {
     .modal-body {
       overflow: hidden;
 
-      .tab-link {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
       .panel-body {
         min-height: calc(25vh - 70px);
         max-height: 65vh;