Improvements

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