feat(UI): format and clear queries

antares-sql · Apr 19, 2021 · 9ffd443 · 9ffd443
1 parent f82dbd2
commit 9ffd443
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -73,7 +73,6 @@
     "electron-store": "^7.0.0",
     "electron-updater": "^4.3.5",
     "faker": "^5.3.1",
-    "keytar": "^7.3.0",
     "marked": "^2.0.2",
     "moment": "^2.29.1",
     "mssql": "^6.2.3",
@@ -83,6 +82,7 @@
     "pgsql-ast-parser": "^7.0.2",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.9",
+    "sql-formatter": "^4.0.2",
     "v-mask": "^2.2.4",
     "vue-i18n": "^8.22.4",
     "vuedraggable": "^2.24.3",

diff --git a/src/main/index.js b/src/main/index.js
@@ -2,9 +2,7 @@
 
 import { app, BrowserWindow, nativeImage } from 'electron';
 import * as path from 'path';
-import crypto from 'crypto';
 import { format as formatUrl } from 'url';
-import keytar from 'keytar';
 import Store from 'electron-store';
 
 import ipcHandlers from './ipc-handlers';
@@ -96,18 +94,6 @@ else {
 
    // create main BrowserWindow when electron is ready
    app.on('ready', async () => {
-      try {
-         let key = await keytar.getPassword('antares', 'user');
-
-         if (!key) {
-            key = crypto.randomBytes(16).toString('hex');
-            keytar.setPassword('antares', 'user', key);
-         }
-      }
-      catch (err) {
-         console.log(err);
-      }
-
       mainWindow = createMainWindow();
    });
 }
diff --git a/src/main/ipc-handlers/application.js b/src/main/ipc-handlers/application.js
@@ -1,4 +1,3 @@
-import keytar from 'keytar';
 import { app, ipcMain } from 'electron';
 
 export default () => {
@@ -7,14 +6,7 @@ export default () => {
    });
 
    ipcMain.on('get-key', async event => {
-      let key = false;
-
-      try {
-         key = await keytar.getPassword('antares', 'user');
-      }
-      catch (err) {
-         console.log(err);
-      }
+      const key = false;
       event.returnValue = key;
    });
 };
diff --git a/src/main/libs/clients/PostgreSQLClient.js b/src/main/libs/clients/PostgreSQLClient.js
@@ -77,7 +77,8 @@ export class PostgreSQLClient extends AntaresCore {
     */
    use (schema) {
       this._schema = schema;
-      return this.raw(`SET search_path TO ${schema}`);
+      if (schema)
+         return this.raw(`SET search_path TO ${schema}`);
    }
 
    /**
@@ -274,7 +275,7 @@ export class PostgreSQLClient extends AntaresCore {
     */
    async getTableIndexes ({ schema, table }) {
       if (schema !== 'public')
-         this.use(schema);
+         await this.use(schema);
 
       const { rows } = await this.raw(`WITH ndx_list AS (
          SELECT pg_index.indexrelid, pg_class.oid
@@ -670,7 +671,7 @@ export class PostgreSQLClient extends AntaresCore {
          : '';
 
       if (this._schema !== 'public')
-         this.use(this._schema);
+         await this.use(this._schema);
 
       const sql = `CREATE PROCEDURE ${this._schema}.${routine.name}(${parameters})
          LANGUAGE ${routine.language}
@@ -799,7 +800,7 @@ export class PostgreSQLClient extends AntaresCore {
          : '';
 
       if (this._schema !== 'public')
-         this.use(this._schema);
+         await this.use(this._schema);
 
       const body = func.returns ? func.sql : '$BODY$\n$BODY$';
 
@@ -1018,7 +1019,7 @@ export class PostgreSQLClient extends AntaresCore {
       } = params;
 
       if (this._schema !== 'public')
-         this.use(this._schema);
+         await this.use(this._schema);
 
       let sql = '';
       const alterColumns = [];
@@ -1247,7 +1248,7 @@ export class PostgreSQLClient extends AntaresCore {
       };
 
       if (args.nest && this._schema !== 'public')
-         this.use(this._schema);
+         await this.use(this._schema);
 
       const resultsArr = [];
       let paramsArr = [];

diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
@@ -1,5 +1,12 @@
 <template>
-   <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
+   <div
+      v-show="isSelected"
+      class="workspace-query-tab column col-12 columns col-gapless no-outline"
+      tabindex="0"
+      @keydown.116="runQuery(query)"
+      @keydown.ctrl.87="clear"
+      @keydown.ctrl.119="beautify"
+   >
       <div class="workspace-query-runner column col-12">
          <QueryEditor
             v-show="isSelected"
@@ -24,6 +31,24 @@
                   <span>{{ $t('word.run') }}</span>
                   <i class="mdi mdi-24px mdi-play" />
                </button>
+               <button
+                  class="btn btn-dark btn-sm"
+                  :disabled="!query"
+                  title="CTRL+F8"
+                  @click="beautify()"
+               >
+                  <span>{{ $t('word.format') }}</span>
+                  <i class="mdi mdi-24px mdi-brush pl-1" />
+               </button>
+               <button
+                  class="btn btn-link btn-sm"
+                  :disabled="!query"
+                  title="CTRL+W"
+                  @click="clear()"
+               >
+                  <span>{{ $t('word.clear') }}</span>
+                  <i class="mdi mdi-24px mdi-delete-sweep pl-1" />
+               </button>
             </div>
             <div class="workspace-query-info">
                <div
@@ -68,6 +93,7 @@
 </template>
 
 <script>
+import { format } from 'sql-formatter';
 import Schema from '@/ipc-api/Schema';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
@@ -192,12 +218,33 @@ export default {
          if (this.$refs.queryEditor)
             this.$refs.queryEditor.editor.resize();
       },
-      onKey (e) {
-         if (this.isSelected && this.isWorkspaceSelected) {
-            e.stopPropagation();
-            if (e.key === 'F5')
-               this.runQuery(this.query);
+      beautify () {
+         if (this.$refs.queryEditor) {
+            let language = 'sql';
+
+            switch (this.workspace.client) {
+               case 'mysql':
+                  language = 'mysql';
+                  break;
+               case 'maria':
+                  language = 'mariadb';
+                  break;
+               case 'pg':
+                  language = 'postgresql';
+                  break;
+            }
+
+            const formattedQuery = format(this.query, {
+               language,
+               uppercase: true
+            });
+            this.$refs.queryEditor.editor.session.setValue(formattedQuery);
          }
+      },
+      clear () {
+         if (this.$refs.queryEditor)
+            this.$refs.queryEditor.editor.session.setValue('');
+         this.clearTabData();
       }
    }
 };

diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
@@ -104,7 +104,8 @@ module.exports = {
       database: 'Database',
       scratchpad: 'Scratchpad',
       array: 'Array',
-      changelog: 'Changelog'
+      changelog: 'Changelog',
+      format: 'Format'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',

diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
@@ -30,6 +30,10 @@ body {
   cursor: help;
 }
 
+.no-outline {
+  outline: none !important;
+}
+
 .no-border {
   outline: none !important;
   border: none !important;

diff --git a/src/renderer/store/modules/connections.store.js b/src/renderer/store/modules/connections.store.js
@@ -1,8 +1,7 @@
 'use strict';
 import Store from 'electron-store';
 import crypto from 'crypto';
-import Application from '../../ipc-api/Application';
-const key = Application.getKey() || localStorage.getItem('key');
+const key = localStorage.getItem('key');
 
 if (!key)
    localStorage.setItem('key', crypto.randomBytes(16).toString('hex'));