Improvements

src/main/ipc-handlers/structure.js

@@ -2,6 +2,8 @@ import { ipcMain } from 'electron';
 import InformationSchema from '../models/InformationSchema';
 import Generic from '../models/Generic';
 
+// TODO: remap objects based on client
+
 export default (connections) => {
    ipcMain.handle('getTableColumns', async (event, { uid, schema, table }) => {
       try {

src/main/libs/AntaresConnector.js

@@ -1,6 +1,7 @@
 'use strict';
-import mysql from 'mysql2';
+import mysql from 'mysql';
 import mssql from 'mssql';
+// import pg from 'pg'; TODO: PostgreSQL
 
 /**
  * As Simple As Possible Query Builder
@@ -56,6 +57,11 @@ export class AntaresConnector {
       }
    }
 
+   /**
+    * Resets the query object after a query
+    *
+    * @memberof AntaresConnector
+    */
    _resetQuery () {
       this._query = Object.assign({}, this._queryDefaults);
    }
@@ -71,10 +77,10 @@ export class AntaresConnector {
                const connection = mysql.createConnection(this._params);
                this._connection = connection.promise();
             }
-            else {
-               const pool = mysql.createPool({ ...this._params, connectionLimit: this._poolSize });
-               this._connection = pool.promise();
-            }
+            else
+               this._connection = mysql.createPool({ ...this._params, connectionLimit: this._poolSize });
+               // this._connection = pool.promise();
+
             break;
          case 'mssql': {
             const mssqlParams = {
@@ -125,11 +131,30 @@ export class AntaresConnector {
       return this;
    }
 
+   use (schema) {
+      let sql;
+
+      switch (this._client) {
+         case 'maria':
+         case 'mysql':
+            sql = `USE \`${schema}\``;
+            break;
+         case 'mssql':
+            sql = `USE "${schema}"`;
+            break;
+         default:
+            break;
+      }
+
+      return this.raw(sql);
+   }
+
    /**
     * @returns {string} SQL string
     * @memberof AntaresConnector
     */
    getSQL () {
+      // SELECT
       const selectArray = this._query.select.reduce(this._reducer, []);
       let selectRaw;
       switch (this._client) {
@@ -146,6 +171,7 @@ export class AntaresConnector {
             break;
       }
 
+      // FROM
       let fromRaw;
       switch (this._client) {
          case 'maria':
@@ -166,6 +192,7 @@ export class AntaresConnector {
       const orderByArray = this._query.orderBy.reduce(this._reducer, []);
       const orderByRaw = orderByArray.length ? `ORDER BY ${orderByArray.join(', ')} ` : '';
 
+      // LIMIT
       let limitRaw;
       switch (this._client) {
          case 'maria':
@@ -188,7 +215,6 @@ export class AntaresConnector {
     */
    async run () {
       const rawQuery = this.getSQL();
-      if (process.env.NODE_ENV === 'development') console.log(rawQuery);
       this._resetQuery();
       return this.raw(rawQuery);
    }
@@ -199,15 +225,24 @@ export class AntaresConnector {
     * @memberof AntaresConnector
     */
    async raw (sql) {
+      if (process.env.NODE_ENV === 'development') console.log(sql);
+
       switch (this._client) {
          case 'maria':
          case 'mysql': {
-            const [rows, fields] = await this._connection.query(sql);
+            const { rows, fields } = await new Promise((resolve, reject) => {
+               this._connection.query(sql, (err, rows, fields) => {
+                  if (err)
+                     reject(err);
+                  else
+                     resolve({ rows, fields });
+               });
+            });
             return { rows, fields };
          }
          case 'mssql': {
             const results = await this._connection.request().query(sql);
-            return { rows: results.recordsets[0] };
+            return { rows: results.recordsets[0] };// TODO: fields
          }
          default:
             break;

src/main/models/Generic.js

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

src/renderer/components/Workspace.vue

@@ -145,10 +145,6 @@ export default {
          width: auto;
          border-collapse: separate;
 
-         .tr:focus{
-            background: rgba($color: #000000, $alpha: .3);
-         }
-
          .th{
             position: sticky;
             top: 0;
@@ -171,6 +167,12 @@ export default {
             white-space: nowrap;
             overflow: hidden;
             font-size: .7rem;
+
+            &:focus{
+               box-shadow:inset 0px 0px 0px 1px $body-font-color;
+               background: rgba($color: #000000, $alpha: .3);
+               outline: none;
+            }
          }
       }
    }

src/renderer/components/WorkspaceQueryTab.vue

@@ -13,10 +13,10 @@
                   <span>{{ $t('word.run') }}</span>
                   <i class="material-icons text-success">play_arrow</i>
                </button>
-               <button class="btn btn-link btn-sm">
+               <!-- <button class="btn btn-link btn-sm">
                   <span>{{ $t('word.save') }}</span>
                   <i class="material-icons ml-1">save</i>
-               </button>
+               </button> -->
             </div>
             <div class="workspace-query-info">
                <div v-if="results.rows">
@@ -29,7 +29,11 @@
          </div>
       </div>
       <div class="workspace-query-results column col-12">
-         <WorkspaceQueryTable v-if="results" :results="results" />
+         <WorkspaceQueryTable
+            v-if="results"
+            :results="results"
+            :fields="resultsFields"
+         />
       </div>
    </div>
 </template>
@@ -62,6 +66,11 @@ export default {
       }),
       workspace () {
          return this.getWorkspace(this.connection.uid);
+      },
+      resultsFields () {
+         return this.results.rows && this.results.rows.length ? Object.keys(this.results.rows[0]).map(field => {
+            return { name: field, key: '', type: '' }; // TODO: extract getting table name from query
+         }) : [];
       }
    },
    methods: {
@@ -73,13 +82,13 @@ export default {
          this.isQuering = true;
          this.results = {};
 
-         const params = {
-            uid: this.connection.uid,
-            query: this.query,
-            schema: this.workspace.breadcrumbs.schema
-         };
-
          try {
+            const params = {
+               uid: this.connection.uid,
+               query: this.query,
+               schema: this.workspace.breadcrumbs.schema
+            };
+
             const { status, response } = await Connection.rawQuery(params);
             if (status === 'success')
                this.results = response;

src/renderer/components/WorkspaceQueryTable.vue

@@ -2,7 +2,7 @@
    <BaseVirtualScroll
       v-if="results.rows"
       ref="resultTable"
-      :items="rows"
+      :items="localResults"
       :item-height="25"
       class="vscroll"
       :style="{'height': resultsSize+'px'}"
@@ -12,11 +12,19 @@
             <div class="thead">
                <div class="tr">
                   <div
-                     v-for="field in results.fields"
+                     v-for="field in fields"
                      :key="field.name"
                      class="th"
                   >
-                     {{ field.name }}
+                     <div class="table-column-title">
+                        <i
+                           v-if="field.key"
+                           class="material-icons column-key c-help"
+                           :class="`key-${field.key}`"
+                           :title="keyName(field.key)"
+                        >vpn_key</i>
+                        <span>{{ field.name }}</span>
+                     </div>
                   </div>
                </div>
             </div>
@@ -25,7 +33,6 @@
                   v-for="row in items"
                   :key="row._id"
                   class="tr"
-                  tabindex="0"
                >
                   <div
                      v-for="(col, cKey) in row"
@@ -33,6 +40,7 @@
                      class="td"
                      :class="fieldType(col)"
                      :style="{'display': cKey === '_id'? 'none' : ''}"
+                     tabindex="0"
                   >
                      {{ col }}
                   </div>
@@ -53,16 +61,18 @@ export default {
       BaseVirtualScroll
    },
    props: {
-      results: Object
+      results: Object,
+      fields: Array
    },
    data () {
       return {
-         resultsSize: 1000
+         resultsSize: 1000,
+         localResults: []
       };
    },
-   computed: {
-      rows () { // Adds uid to rows
-         return this.results.rows ? this.results.rows.map(item => {
+   watch: {
+      results () {
+         this.localResults = this.results.rows ? this.results.rows.map(item => {
             return { ...item, _id: uidGen() };
          }) : [];
       }
@@ -78,7 +88,7 @@ export default {
       window.removeEventListener('resize', this.resizeResults);
    },
    methods: {
-      fieldType (col) {
+      fieldType (col) { // TODO: get from fields
          let type = typeof col;
          if (type === 'object')
             if (col instanceof Date) type = 'date';
@@ -87,6 +97,18 @@ export default {
 
          return `type-${type}`;
       },
+      keyName (key) {
+         switch (key) {
+            case 'pri':
+               return 'PRIMARY';
+            case 'uni':
+               return 'UNIQUE';
+            case 'mul':
+               return 'INDEX';
+            default:
+               return 'UNKNOWN ' + key;
+         }
+      },
       resizeResults (e) {
          if (this.$refs.resultTable) {
             const el = this.$refs.resultTable.$el;
@@ -102,10 +124,34 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .vscroll {
    height: 1000px;
    overflow: auto;
    overflow-anchor: none;
 }
+
+.table-column-title{
+   display: flex;
+   align-items: center;
+}
+
+.column-key{
+   transform: rotate(90deg);
+   font-size: .7rem;
+   line-height: 1.5;
+   margin-right: .2rem;
+
+   &.key-pri{
+      color: goldenrod;
+   }
+
+   &.key-uni{
+      color: deepskyblue;
+   }
+
+   &.key-mul{
+      color: palegreen;
+   }
+}
 </style>

src/renderer/components/WorkspaceTableTab.vue

@@ -11,10 +11,10 @@
                   <span>{{ $t('word.refresh') }}</span>
                   <i class="material-icons ml-1">refresh</i>
                </button>
-               <button class="btn btn-link btn-sm">
+               <!-- <button class="btn btn-link btn-sm">
                   <span>{{ $t('word.save') }}</span>
                   <i class="material-icons ml-1">save</i>
-               </button>
+               </button> -->
             </div>
             <div class="workspace-query-info">
                <div v-if="results.rows">
@@ -27,7 +27,11 @@
          </div>
       </div>
       <div class="workspace-query-results column col-12">
-         <WorkspaceQueryTable v-if="results" :results="results" />
+         <WorkspaceQueryTable
+            v-if="results"
+            :results="results"
+            :fields="resultsFields"
+         />
       </div>
    </div>
 </template>
@@ -50,7 +54,7 @@ export default {
       return {
          isQuering: false,
          results: {},
-         fields: {},
+         fields: [],
          lastTable: null
       };
    },
@@ -63,6 +67,15 @@ export default {
       },
       isSelected () {
          return this.workspace.selected_tab === 1;
+      },
+      resultsFields () {
+         return this.fields.map(field => { // TODO: move to main process
+            return {
+               name: field.COLUMN_NAME,
+               key: field.COLUMN_KEY.toLowerCase(),
+               type: field.DATA_TYPE
+            };
+         });
       }
    },
    watch: {
@@ -110,7 +123,7 @@ export default {
 
          try {
             const { status, response } = await Structure.getTableData(params);
-            console.log(status, response);
+
             if (status === 'success')
                this.results = response;
             else

src/renderer/scss/main.scss

@@ -32,6 +32,10 @@ body{
    align-items: center;
 }
 
+.c-help{
+   cursor: help;
+}
+
 // Scrollbars
 ::-webkit-scrollbar {
    width: 10px;