Improvements

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>