feat(render): field type and length on table header mouse hover

src/main/libs/clients/MySQLClient.js

@@ -171,6 +171,9 @@ export class MySQLClient extends AntaresCore {
          .run();
 
       return rows.map(field => {
+         let numLength = field.COLUMN_TYPE.match(/int\(([^)]+)\)/);
+         numLength = numLength ? +numLength.pop() : null;
+
          return {
             name: field.COLUMN_NAME,
             key: field.COLUMN_KEY.toLowerCase(),
@@ -178,9 +181,13 @@ export class MySQLClient extends AntaresCore {
             schema: field.TABLE_SCHEMA,
             table: field.TABLE_NAME,
             numPrecision: field.NUMERIC_PRECISION,
+            numLength,
             datePrecision: field.DATETIME_PRECISION,
             charLength: field.CHARACTER_MAXIMUM_LENGTH,
-            isNullable: field.IS_NULLABLE,
+            nullable: field.IS_NULLABLE.includes('YES'),
+            unsigned: field.COLUMN_TYPE.includes('unsigned'),
+            zerofill: field.COLUMN_TYPE.includes('zerofill'),
+            order: field.ORDINAL_POSITION,
             default: field.COLUMN_DEFAULT,
             charset: field.CHARACTER_SET_NAME,
             collation: field.COLLATION_NAME,

src/renderer/components/ModalNewTableRow.vue

@@ -248,7 +248,7 @@ export default {
       },
       fieldLength (field) {
          if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
-         return field.numPrecision || field.datePrecision || field.charLength || 0;
+         return field.numLength || field.datePrecision || field.charLength || 0;
       },
       inputProps (field) {
          if ([...TEXT, ...LONG_TEXT].includes(field.type))

src/renderer/components/Workspace.vue

@@ -33,7 +33,8 @@
                @click="selectTab({uid: workspace.uid, tab: tab.uid})"
                @mousedown.middle="closeTab(tab.uid)"
             >
-               <a>
+               <a class="tab-link">
+                  <i class="mdi mdi-18px mdi-code-tags mr-1" />
                   <span>
                      Query #{{ tab.index }}
                      <span

src/renderer/components/WorkspaceQueryTab.vue

@@ -22,8 +22,12 @@
                <div v-if="affectedCount !== false">
                   {{ $t('message.affectedRows') }}: <b>{{ affectedCount }}</b>
                </div>
-               <div v-if="workspace.breadcrumbs.schema">
+               <div
-                  {{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b>
+                  v-if="workspace.breadcrumbs.schema"
+                  class="d-flex"
+                  :title="$t('word.schema')"
+               >
+                  <i class="mdi mdi-18px mdi-database mr-1" /><b>{{ workspace.breadcrumbs.schema }}</b>
                </div>
             </div>
          </div>

src/renderer/components/WorkspaceQueryTable.vue

@@ -39,7 +39,7 @@
                            :class="`key-${field.key}`"
                            :title="keyName(field.key)"
                         />
-                        <span>{{ field.alias || field.name }}</span>
+                        <span :title="`${field.type} ${fieldLength(field) ? `(${fieldLength(field)})` : ''}`">{{ field.alias || field.name }}</span>
                         <i
                            v-if="currentSort === field.name || currentSort === `${field.table}.${field.name}`"
                            class="mdi sort-icon"
@@ -80,6 +80,7 @@
 
 <script>
 import { uidGen } from 'common/libs/uidGen';
+import { LONG_TEXT, BLOB } from 'common/fieldTypes';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
 import WorkspaceQueryTableRow from '@/components/WorkspaceQueryTableRow';
 import TableContext from '@/components/WorkspaceQueryTableContext';
@@ -92,6 +93,12 @@ export default {
       WorkspaceQueryTableRow,
       TableContext
    },
+   filters: {
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
+      }
+   },
    props: {
       results: Array,
       tabUid: [String, Number],
@@ -193,6 +200,10 @@ export default {
 
          return length;
       },
+      fieldLength (field) {
+         if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
+         return field.numLength || field.datePrecision || field.charLength || 0;
+      },
       keyName (key) {
          switch (key) {
             case 'pri':