feat: ability to edit table fields

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

README.md

@@ -79,7 +79,7 @@ This is a roadmap with major features will come in near future.
 #### • ARM
 
 - [ ] Windows
-- [ ] Linux
+- [x] Linux
 - [ ] MacOS
 
 ## Translations

package.json

@@ -48,14 +48,14 @@
   },
   "dependencies": {
     "@mdi/font": "^5.8.55",
-    "electron-log": "^4.2.4",
+    "electron-log": "^4.3.0",
     "electron-updater": "^4.3.5",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "monaco-editor": "^0.20.0",
     "mssql": "^6.2.3",
     "mysql": "^2.18.1",
-    "pg": "^8.4.1",
+    "pg": "^8.4.2",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.9",
     "vue-i18n": "^8.22.1",
@@ -67,13 +67,13 @@
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
-    "electron": "^10.1.3",
+    "electron": "^10.1.5",
     "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",
     "electron-webpack": "^2.8.2",
     "electron-webpack-vue": "^2.4.0",
-    "eslint": "^7.12.0",
+    "eslint": "^7.13.0",
-    "eslint-config-standard": "^14.1.1",
+    "eslint-config-standard": "^16.0.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",

src/common/data-types/mysql.js

@@ -0,0 +1,303 @@
+module.exports = [
+   {
+      group: 'integer',
+      types: [
+         {
+            name: 'TINYINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'SMALLINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'INT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'MEDIUMINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BIGINT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         },
+         {
+            name: 'BIT',
+            length: true,
+            collation: false,
+            unsigned: true,
+            zerofill: true
+         }
+      ]
+   },
+   {
+      group: 'float',
+      types: [
+         {
+            name: 'FLOAT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DOUBLE',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DECIMAL',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'string',
+      types: [
+         {
+            name: 'CHAR',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'VARCHAR',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TINYTEXT',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MEDIUMTEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LONGTEXT',
+            length: false,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'JSON',
+            length: true,
+            collation: true,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'binary',
+      types: [
+         {
+            name: 'BINARY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'VARBINARY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TINYBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'BLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MEDIUMBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LONGBLOB',
+            length: false,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'time',
+      types: [
+         {
+            name: 'DATE',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'YEAR',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'DATETIME',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'TIMESTAMP',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'spatial',
+      types: [
+         {
+            name: 'POINT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'LINESTRING',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'POLYGON',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'GEOMETRY',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTIPOINT',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTILINESTRING',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'MULTIPOLYGON',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'GEOMETRYCOLLECTION',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   },
+   {
+      group: 'other',
+      types: [
+         {
+            name: 'UNKNOWN',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'ENUM',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         },
+         {
+            name: 'SET',
+            length: true,
+            collation: false,
+            unsigned: false,
+            zerofill: false
+         }
+      ]
+   }
+];

src/common/fieldTypes.js

@@ -1,7 +1,7 @@
 export const TEXT = ['char', 'varchar'];
 export const LONG_TEXT = ['text', 'mediumtext', 'longtext'];
 
-export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal'];
+export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal', 'bool'];
 
 export const DATE = ['date'];
 export const TIME = ['time'];

src/common/libs/sqlEscaper.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-useless-escape */
 // eslint-disable-next-line no-control-regex
-const regex = new RegExp(/[\0\x08\x09\x1a\n\r"'\\\%]/gm);
+const pattern = /[\0\x08\x09\x1a\n\r"'\\\%]/gm;
+const regex = new RegExp(pattern);
 
 /**
  * Escapes a string

src/main/ipc-handlers/tables.js

@@ -153,4 +153,14 @@ export default (connections) => {
          return { status: 'error', response: err.toString() };
       }
    });
+
+   ipcMain.handle('alter-table', async (event, params) => {
+      try {
+         await connections[params.uid].alterTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };

src/main/libs/clients/MySQLClient.js

@@ -192,6 +192,7 @@ export class MySQLClient extends AntaresCore {
             charset: field.CHARACTER_SET_NAME,
             collation: field.COLLATION_NAME,
             autoIncrement: field.EXTRA.includes('auto_increment'),
+            onUpdate: field.EXTRA.toLowerCase().includes('on update') ? field.EXTRA.replace('on update', '') : '',
             comment: field.COLUMN_COMMENT
          };
       });
@@ -266,6 +267,43 @@ export class MySQLClient extends AntaresCore {
       });
    }
 
+   /**
+    * ALTER TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async alterTable (params) {
+      const {
+         table,
+         // additions,
+         // deletions,
+         changes
+      } = params;
+
+      let sql = `ALTER TABLE \`${table}\` `;
+      const alterColumns = [];
+
+      changes.forEach(change => {
+         const length = change.numLength || change.charLength || change.datePrecision;
+
+         alterColumns.push(`CHANGE COLUMN \`${change.orgName}\` \`${change.name}\` 
+            ${change.type.toUpperCase()}${length ? `(${length})` : ''} 
+            ${change.unsigned ? 'UNSIGNED' : ''} 
+            ${change.nullable ? 'NULL' : 'NOT NULL'}
+            ${change.autoIncrement ? 'AUTO_INCREMENT' : ''}
+            ${change.default ? `DEFAULT ${change.default}` : ''}
+            ${change.comment ? `COMMENT '${change.comment}'` : ''}
+            ${change.collation ? `COLLATE ${change.collation}` : ''}
+            ${change.onUpdate ? `ON UPDATE ${change.onUpdate}` : ''}
+            ${change.after ? `AFTER \`${change.after}\`` : 'FIRST'}`);
+      });
+
+      sql += alterColumns.join(', ');
+
+      return await this.raw(sql);
+   }
+
    /**
     * @returns {String} SQL string
     * @memberof MySQLClient
@@ -361,16 +399,18 @@ export class MySQLClient extends AntaresCore {
                if (err)
                   reject(err);
                else {
-                  const remappedFields = fields ? fields.map(field => {
+                  const remappedFields = fields
-                     return {
+                     ? fields.map(field => {
-                        name: field.name,
+                        return {
-                        orgName: field.orgName,
+                           name: field.name,
-                        schema: field.db,
+                           orgName: field.orgName,
-                        table: field.table,
+                           schema: field.db,
-                        orgTable: field.orgTable,
+                           table: field.table,
-                        type: 'varchar'
+                           orgTable: field.orgTable,
-                     };
+                           type: 'varchar'
-                  }) : [];
+                        };
+                     })
+                     : [];
 
                   if (args.details) {
                      let cachedTable;
@@ -395,9 +435,11 @@ export class MySQLClient extends AntaresCore {
                            try { // Table data
                               const response = await this.getTableColumns(paramObj);
 
-                              let detailedFields = response.length ? selectedFields.map(selField => {
+                              let detailedFields = response.length
-                                 return response.find(field => field.name === selField.name && field.table === selField.table);
+                                 ? selectedFields.map(selField => {
-                              }).filter(el => !!el) : [];
+                                    return response.find(field => field.name === selField.name && field.table === selField.table);
+                                 }).filter(el => !!el)
+                                 : [];
 
                               if (selectedFields.length) {
                                  detailedFields = detailedFields.map(field => {

src/renderer/components/BaseConfirmModal.vue

@@ -48,7 +48,7 @@ export default {
    props: {
       size: {
          type: String,
-         validator: prop => ['small', 'medium', 'large'].includes(prop),
+         validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
          default: 'small'
       },
       confirmText: String,
@@ -67,6 +67,8 @@ export default {
       modalSizeClass () {
          if (this.size === 'small')
             return 'modal-sm';
+         if (this.size === '400')
+            return 'modal-400';
          else if (this.size === 'large')
             return 'modal-lg';
          else return '';
@@ -86,7 +88,12 @@ export default {
 </script>
 
 <style scoped>
-  .modal.modal-sm .modal-container {
+.modal-400 .modal-container {
-    padding: 0;
+  max-width: 400px;
-  }
+}
+
+.modal.modal-sm .modal-container {
+  padding: 0;
+}
+
 </style>

src/renderer/components/WorkspacePropsTab.vue

@@ -3,13 +3,20 @@
       <div class="workspace-query-runner column col-12">
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
-               <button class="btn btn-primary btn-sm">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  @click="saveChanges"
+               >
                   <span>{{ $t('word.save') }}</span>
                   <i class="mdi mdi-24px mdi-content-save ml-1" />
                </button>
                <button
+                  :disabled="!isChanged"
                   class="btn btn-link btn-sm mr-0"
                   :title="$t('message.clearChanges')"
+                  @click="clearChanges"
                >
                   <span>{{ $t('word.clear') }}</span>
                   <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
@@ -40,7 +47,7 @@
          <WorkspacePropsTable
             v-if="localFields"
             ref="queryTable"
-            :results="localFields"
+            :fields="localFields"
             :tab-uid="tabUid"
             :conn-uid="connection.uid"
             :table="table"
@@ -52,9 +59,10 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import WorkspacePropsTable from '@/components/WorkspacePropsTable';
-import { mapGetters, mapActions } from 'vuex';
 
 export default {
    name: 'WorkspacePropsTab',
@@ -69,7 +77,10 @@ export default {
       return {
          tabUid: 'prop',
          isQuering: false,
+         isSaving: false,
+         originalFields: [],
          localFields: [],
+         originalKeyUsage: [],
          localKeyUsage: [],
          lastTable: null,
          isAddModal: false
@@ -87,6 +98,9 @@ export default {
       },
       schema () {
          return this.workspace.breadcrumbs.schema;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) || JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage);
       }
    },
    watch: {
@@ -103,25 +117,13 @@ export default {
          }
       }
    },
-   created () {
-      this.getFieldsData();
-      window.addEventListener('keydown', this.onKey);
-   },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification',
+         addNotification: 'notifications/addNotification'
-         setTabFields: 'workspaces/setTabFields',
-         setTabKeyUsage: 'workspaces/setTabKeyUsage'
       }),
       async getFieldsData () {
          if (!this.table) return;
          this.isQuering = true;
-         const fieldsArr = [];
-         const keysArr = [];
-
-         // if table changes clear cached values
-         if (this.lastTable !== this.table)
-            this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
 
          const params = {
             uid: this.connection.uid,
@@ -132,8 +134,10 @@ export default {
          try { // Columns data
             const { status, response } = await Tables.getTableColumns(params);
             if (status === 'success') {
-               this.localFields = response;
+               this.originalFields = response.map(field => {
-               fieldsArr.push(response);
+                  return { ...field, _id: uidGen() };
+               });
+               this.localFields = JSON.parse(JSON.stringify(this.originalFields));
             }
             else
                this.addNotification({ status: 'error', message: response });
@@ -146,8 +150,8 @@ export default {
             const { status, response } = await Tables.getKeyUsage(params);
 
             if (status === 'success') {
-               this.localKeyUsage = response;
+               this.originalKeyUsage = response;
-               keysArr.push(response);
+               this.localKeyUsage = JSON.parse(JSON.stringify(response));
             }
             else
                this.addNotification({ status: 'error', message: response });
@@ -156,35 +160,62 @@ export default {
             this.addNotification({ status: 'error', message: err.stack });
          }
 
-         this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: fieldsArr });
-         this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: keysArr });
-
          this.isQuering = false;
       },
-      reloadFields () {
+      async saveChanges () {
-         this.getFieldsData();
+         if (this.isSaving) return;
+         this.isSaving = true;
+
+         const originalIDs = this.originalFields.reduce((acc, curr) => [...acc, curr._id], []);
+         const localIDs = this.localFields.reduce((acc, curr) => [...acc, curr._id], []);
+         const additions = this.localFields.filter(field => !originalIDs.includes(field._id));
+         const deletions = this.originalFields.filter(field => !localIDs.includes(field._id));
+
+         // Changes
+         const changes = [];
+         this.originalFields.forEach((originalField, oI) => {
+            const lI = this.localFields.findIndex(localField => localField._id === originalField._id);
+            const originalSibling = oI > 0 ? this.originalFields[oI - 1]._id : false;
+            const localSibling = lI > 0 ? this.localFields[lI - 1]._id : false;
+            const after = lI > 0 ? this.localFields[lI - 1].name : false;
+            const orgName = originalField.name;
+
+            if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
+               changes.push({ ...this.localFields[lI], after, orgName });
+         });
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            table: this.workspace.breadcrumbs.table,
+            additions,
+            changes,
+            deletions
+         };
+
+         try { // Key usage (foreign keys)
+            const { status, response } = await Tables.alterTable(params);
+
+            if (status === 'success')
+               this.getFieldsData();
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localFields = JSON.parse(JSON.stringify(this.originalFields));
+         this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
       },
       showAddModal () {
          this.isAddModal = true;
       },
       hideAddModal () {
          this.isAddModal = false;
-      },
-      onKey (e) {
-         e.stopPropagation();
-         if (e.key === 'F5')
-            this.reloadFields();
-      },
-      setRefreshInterval () {
-         if (this.refreshInterval)
-            clearInterval(this.refreshInterval);
-
-         if (+this.autorefreshTimer) {
-            this.refreshInterval = setInterval(() => {
-               if (!this.isQuering)
-                  this.reloadFields();
-            }, this.autorefreshTimer * 1000);
-         }
       }
    }
 };

src/renderer/components/WorkspacePropsTable.vue

@@ -89,79 +89,36 @@
                </div>
             </div>
          </div>
-         <div ref="resultTable" class="tbody">
+         <draggable
-            <div
+            ref="resultTable"
-               v-for="row in results"
+            :list="fields"
-               :key="row.name"
+            class="tbody"
-               class="tr"
+            handle=".row-draggable"
-            >
+         >
-               <div class="td">
+            <TableRow
-                  <div class="row-draggable">
+               v-for="row in fields"
-                     <i class="mdi mdi-drag-horizontal row-draggable-icon" />
+               :key="row._id"
-                     {{ row.order }}
+               :row="row"
-                  </div>
+               :data-types="dataTypes"
-               </div>
+            />
-               <div class="td">
+         </draggable>
-                  <i
-                     v-if="row.key"
-                     :title="keyName(row.key)"
-                     class="mdi mdi-key column-key c-help pl-1"
-                     :class="`key-${row.key}`"
-                  />
-               </div>
-               <div class="td">
-                  {{ row.name }}
-               </div>
-               <div class="td text-uppercase" :class="`type-${row.type}`">
-                  {{ row.type }}
-               </div>
-               <div class="td type-int">
-                  {{ row.numLength || row.charLength || row.datePrecision }}
-               </div>
-               <div class="td">
-                  <label class="form-checkbox">
-                     <input type="checkbox" :checked="row.unsigned ">
-                     <i class="form-icon" />
-                  </label>
-               </div>
-               <div class="td">
-                  <label class="form-checkbox">
-                     <input type="checkbox" :checked="row.nullable ">
-                     <i class="form-icon" />
-                  </label>
-               </div>
-               <div class="td">
-                  <label class="form-checkbox">
-                     <input type="checkbox" :checked="row.zerofill ">
-                     <i class="form-icon" />
-                  </label>
-               </div>
-               <div class="td">
-                  {{ (row.autoIncrement ? 'AUTO_INCREMENT' : false) || row.default }}
-               </div>
-               <div class="td type-varchar">
-                  {{ row.comment }}
-               </div>
-               <div class="td">
-                  {{ row.collation }}
-               </div>
-            </div>
-         </div>
       </div>
    </div>
 </template>
 
 <script>
-import TableContext from '@/components/WorkspaceQueryTableContext';
 import { mapActions, mapGetters } from 'vuex';
+import draggable from 'vuedraggable';
+import TableRow from '@/components/WorkspacePropsTableRow';
 
 export default {
    name: 'WorkspacePropsTable',
    components: {
-      TableContext
+      TableRow,
+      draggable
    },
    props: {
-      results: Array,
+      fields: Array,
       tabUid: [String, Number],
       connUid: String,
       table: String,
@@ -187,13 +144,15 @@ export default {
       workspaceSchema () {
          return this.getWorkspace(this.connUid).breadcrumbs.schema;
       },
+      dataTypes () {
+         return this.getWorkspace(this.connUid).dataTypes;
+      },
       primaryField () {
-         return this.results.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
+         return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
       },
       tabProperties () {
          return this.getWorkspaceTab(this.tabUid);
       }
-
    },
    updated () {
       if (this.$refs.propTable)
@@ -212,18 +171,6 @@ export default {
       ...mapActions({
          addNotification: 'notifications/addNotification'
       }),
-      keyName (key) {
-         switch (key) {
-            case 'pri':
-               return 'PRIMARY';
-            case 'uni':
-               return 'UNIQUE';
-            case 'mul':
-               return 'INDEX';
-            default:
-               return 'UNKNOWN ' + key;
-         }
-      },
       resizeResults () {
          if (this.$refs.resultTable) {
             const el = this.$refs.tableWrapper;
@@ -258,34 +205,4 @@ export default {
     overflow: hidden;
   }
 }
-
-.row-draggable {
-  position: relative;
-  text-align: right;
-  padding-left: 28px;
-  cursor: grab;
-
-  .row-draggable-icon {
-    position: absolute;
-    left: 0;
-    font-size: 22px;
-  }
-}
-
-.table-column-title {
-  display: flex;
-  align-items: center;
-}
-
-.form-checkbox {
-  padding: 0;
-  margin: 0;
-  line-height: 1;
-  min-height: auto;
-
-  .form-icon {
-    top: 0.15rem;
-    left: calc(50% - 8px);
-  }
-}
 </style>

src/renderer/components/WorkspacePropsTableRow.vue

@@ -0,0 +1,516 @@
+<template>
+   <div class="tr">
+      <div class="td">
+         <div class="row-draggable">
+            <i class="mdi mdi-drag-horizontal row-draggable-icon" />
+            {{ localRow.order }}
+         </div>
+      </div>
+      <div class="td" tabindex="0">
+         <i
+            v-if="localRow.key"
+            :title="keyName(localRow.key)"
+            class="mdi mdi-key column-key c-help pl-1"
+            :class="`key-${localRow.key}`"
+         />
+      </div>
+      <div class="td">
+         <span
+            v-if="!isInlineEditor.name"
+            class="cell-content"
+            @dblclick="editON($event, localRow.name , 'name')"
+         >
+            {{ localRow.name }}
+         </span>
+         <input
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            type="text"
+            autofocus
+            class="editable-field px-2"
+            @blur="editOFF"
+         >
+      </div>
+      <div class="td text-uppercase text-left" :class="`type-${lowerCase(localRow.type)}`">
+         <span
+            v-if="!isInlineEditor.type"
+            class="cell-content"
+            @dblclick="editON($event, localRow.type.toUpperCase(), 'type')"
+         >
+            {{ localRow.type }}
+         </span>
+         <select
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            class="editable-field px-1 text-uppercase"
+            @blur="editOFF"
+         >
+            <optgroup
+               v-for="group in dataTypes"
+               :key="group.group"
+               :label="group.group"
+            >
+               <option
+                  v-for="type in group.types"
+                  :key="type.name"
+                  :selected="localRow.type.toUpperCase() === type.name"
+                  :value="type.name"
+               >
+                  {{ type.name }}
+               </option>
+            </optgroup>
+         </select>
+      </div>
+      <div class="td type-int">
+         <template v-if="fieldType.length">
+            <span
+               v-if="!isInlineEditor.length"
+               class="cell-content"
+               @dblclick="editON($event, localLength, 'length')"
+            >
+               {{ localLength }}
+            </span>
+            <input
+               v-else
+               ref="editField"
+               v-model="editingContent"
+               type="number"
+               autofocus
+               class="editable-field px-2"
+               @blur="editOFF"
+            >
+         </template>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.unsigned"
+               type="checkbox"
+               :disabled="!fieldType.unsigned"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.nullable"
+               type="checkbox"
+               :disabled="localRow.key === 'pri'"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <label class="form-checkbox">
+            <input
+               v-model="localRow.zerofill"
+               type="checkbox"
+               :disabled="!fieldType.zerofill"
+            >
+            <i class="form-icon" />
+         </label>
+      </div>
+      <div class="td">
+         <span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
+            {{ fieldDefault }}
+         </span>
+      </div>
+      <div class="td type-varchar">
+         <span
+            v-if="!isInlineEditor.comment"
+            class="cell-content"
+            @dblclick="editON($event, localRow.comment , 'comment')"
+         >
+            {{ localRow.comment }}
+         </span>
+         <input
+            v-else
+            ref="editField"
+            v-model="editingContent"
+            type="text"
+            autofocus
+            class="editable-field px-2"
+            @blur="editOFF"
+         >
+      </div>
+      <div class="td">
+         <template v-if="fieldType.collation">
+            <span
+               v-if="!isInlineEditor.collation"
+               class="cell-content"
+               @dblclick="editON($event, localRow.collation, 'collation')"
+            >
+               {{ localRow.collation }}
+            </span>
+            <select
+               v-else
+               ref="editField"
+               v-model="editingContent"
+               class="editable-field px-1"
+               @blur="editOFF"
+            >
+               <option
+                  v-for="collation in collations"
+                  :key="collation.collation"
+                  :selected="localRow.collation === collation.collation"
+                  :value="collation.collation"
+               >
+                  {{ collation.collation }}
+               </option>
+            </select>
+         </template>
+      </div>
+      <ConfirmModal
+         v-if="isDefaultModal"
+         :confirm-text="$t('word.confirm')"
+         size="400"
+         @confirm="editOFF"
+         @hide="hideDefaultModal"
+      >
+         <template :slot="'header'">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.default') }} "{{ row.name }}"
+            </div>
+         </template>
+         <div :slot="'body'">
+            <form class="form-horizontal">
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        type="radio"
+                        name="default"
+                        value="noval"
+                     ><i class="form-icon" /> No value
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <div class="form-group">
+                     <label class="form-radio form-inline col-4">
+                        <input
+                           v-model="defaultValue.type"
+                           value="custom"
+                           type="radio"
+                           name="default"
+                        ><i class="form-icon" /> {{ $t('message.customValue') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.custom"
+                           :disabled="defaultValue.type !== 'custom'"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        type="radio"
+                        name="default"
+                        value="null"
+                     ><i class="form-icon" /> NULL
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <label class="form-radio form-inline">
+                     <input
+                        v-model="defaultValue.type"
+                        :disabled="localRow.key !== 'pri'"
+                        type="radio"
+                        name="default"
+                        value="autoincrement"
+                     ><i class="form-icon" /> AUTO_INCREMENT
+                  </label>
+               </div>
+               <div class="mb-2">
+                  <div class="form-group">
+                     <label class="form-radio form-inline col-4">
+                        <input
+                           v-model="defaultValue.type"
+                           type="radio"
+                           name="default"
+                           value="expression"
+                        ><i class="form-icon" /> {{ $t('word.expression') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.expression"
+                           :disabled="defaultValue.type !== 'expression'"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+               <div>
+                  <div class="form-group">
+                     <label class="form-label col-4">
+                        {{ $t('message.onUpdate') }}
+                     </label>
+                     <div class="column">
+                        <input
+                           v-model="defaultValue.onUpdate"
+                           class="form-input"
+                           type="text"
+                        >
+                     </div>
+                  </div>
+               </div>
+            </form>
+         </div>
+      </ConfirmModal>
+   </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsTableRow',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      row: Object,
+      dataTypes: Array
+   },
+   data () {
+      return {
+         localRow: {},
+         isInlineEditor: {},
+         isDefaultModal: false,
+         defaultValue: {
+            type: 'noval',
+            custom: '',
+            expression: '',
+            onUpdate: ''
+         },
+         editingContent: null,
+         editingField: null
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      localLength () {
+         return this.localRow.numLength || this.localRow.charLength || this.localRow.datePrecision || 0;
+      },
+      fieldType () {
+         const fieldType = this.dataTypes.reduce((acc, group) => [...acc, ...group.types], []).filter(type =>
+            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : '')
+         );
+         const group = this.dataTypes.filter(group => group.types.some(type =>
+            type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : ''))
+         );
+
+         return fieldType.length ? { ...fieldType[0], group: group[0].group } : {};
+      },
+      fieldDefault () {
+         if (this.localRow.autoIncrement) return 'AUTO_INCREMENT';
+         if (this.localRow.default === 'NULL') return 'NULL';
+         return this.localRow.default;
+      },
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      }
+   },
+   watch: {
+      localRow () {
+         this.initLocalRow();
+      },
+      row () {
+         this.localRow = this.row;
+      }
+   },
+   mounted () {
+      this.localRow = this.row;
+      this.initLocalRow();
+      this.isInlineEditor.length = false;
+   },
+   methods: {
+      keyName (key) {
+         switch (key) {
+            case 'pri':
+               return 'PRIMARY';
+            case 'uni':
+               return 'UNIQUE';
+            case 'mul':
+               return 'INDEX';
+            default:
+               return 'UNKNOWN ' + key;
+         }
+      },
+      lowerCase (val) {
+         if (val)
+            return val.toLowerCase();
+         return val;
+      },
+      initLocalRow () {
+         Object.keys(this.localRow).forEach(key => {
+            this.isInlineEditor[key] = false;
+         });
+
+         this.defaultValue.onUpdate = this.localRow.onUpdate;
+
+         if (this.localRow.autoIncrement)
+            this.defaultValue.type = 'autoincrement';
+         else if (this.localRow.default === null)
+            this.defaultValue.type = 'noval';
+         else if (this.localRow.default === 'NULL')
+            this.defaultValue.type = 'null';
+         else if (this.localRow.default.match(/^'.*'$/g)) {
+            this.defaultValue.type = 'custom';
+            this.defaultValue.custom = this.localRow.default.replace(/(^')|('$)/g, '');
+         }
+         else if (!isNaN(this.localRow.default)) {
+            this.defaultValue.type = 'custom';
+            this.defaultValue.custom = this.localRow.default;
+         }
+         else {
+            this.defaultValue.type = 'expression';
+            this.defaultValue.expression = this.localRow.default;
+         }
+      },
+      updateRow () {
+         this.$emit('input', this.localRow);
+      },
+      editON (event, content, field) {
+         if (field === 'length') {
+            if (['integer', 'float', 'binary', 'spatial', 'other'].includes(this.fieldType.group)) this.editingField = 'numLength';
+            if (['string'].includes(this.fieldType.group)) this.editingField = 'charLength';
+            if (['time'].includes(this.fieldType.group)) this.editingField = 'datePrecision';
+         }
+         else
+            this.editingField = field;
+
+         this.editingContent = content;
+
+         const obj = { [field]: true };
+         this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+
+         if (field === 'default')
+            this.isDefaultModal = true;
+         else {
+            this.$nextTick(() => { // Focus on input
+               event.target.blur();
+
+               this.$nextTick(() => document.querySelector('.editable-field').focus());
+            });
+         }
+      },
+      editOFF () {
+         this.localRow[this.editingField] = this.editingContent;
+
+         if (this.editingField === 'type') {
+            this.localRow.numLength = false;
+            this.localRow.charLength = false;
+            this.localRow.datePrecision = false;
+
+            if (this.fieldType.length) {
+               if (['integer', 'float', 'binary', 'spatial', 'other'].includes(this.fieldType.group)) this.localRow.numLength = 11;
+               if (['string'].includes(this.fieldType.group)) this.localRow.charLength = 15;
+               if (['time'].includes(this.fieldType.group)) this.localRow.datePrecision = 0;
+            }
+
+            if (!this.fieldType.collation)
+               this.localRow.collation = null;
+         }
+
+         if (this.editingField === 'default') {
+            switch (this.defaultValue.type) {
+               case 'autoincrement':
+                  this.localRow.autoIncrement = true;
+                  break;
+               case 'noval':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = null;
+                  break;
+               case 'null':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = 'NULL';
+                  break;
+               case 'custom':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = `'${this.defaultValue.custom}'`;
+                  break;
+               case 'expression':
+                  this.localRow.autoIncrement = false;
+                  this.localRow.default = this.defaultValue.expression;
+                  break;
+            }
+
+            this.localRow.onUpdate = this.defaultValue.onUpdate;
+         }
+
+         Object.keys(this.isInlineEditor).forEach(key => {
+            this.isInlineEditor = { ...this.isInlineEditor, [key]: false };
+         });
+
+         this.editingContent = null;
+         this.editingField = null;
+      },
+      hideDefaultModal () {
+         this.isDefaultModal = false;
+      }
+   }
+};
+</script>
+
+<style lang="scss" scoped>
+.editable-field {
+  margin: 0;
+  border: none;
+  line-height: 1;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.row-draggable {
+  position: relative;
+  text-align: right;
+  padding-left: 28px;
+  cursor: grab;
+
+  .row-draggable-icon {
+    position: absolute;
+    left: 0;
+    font-size: 22px;
+  }
+}
+
+.table-column-title {
+  display: flex;
+  align-items: center;
+}
+
+.form-checkbox {
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+  min-height: auto;
+
+  .form-icon {
+    top: 0.15rem;
+    left: calc(50% - 8px);
+  }
+}
+
+.cell-content {
+  display: block;
+  min-height: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+</style>

src/renderer/components/WorkspaceQueryTab.vue

@@ -133,8 +133,8 @@ export default {
          this.affectedCount = 0;
       },
       onKey (e) {
-         e.stopPropagation();
+         if (this.isSelected) {
-         if (this.tabUid === this.workspace.selected_tab) {
+            e.stopPropagation();
             if (e.key === 'F9')
                this.runQuery(this.query);
          }

src/renderer/components/WorkspaceQueryTable.vue

@@ -229,9 +229,11 @@ export default {
       },
       setLocalResults () {
          this.resetSort();
-         this.localResults = this.resultsWithRows[this.resultsetIndex] && this.resultsWithRows[this.resultsetIndex].rows ? this.resultsWithRows[this.resultsetIndex].rows.map(item => {
+         this.localResults = this.resultsWithRows[this.resultsetIndex] && this.resultsWithRows[this.resultsetIndex].rows
-            return { ...item, _id: uidGen() };
+            ? this.resultsWithRows[this.resultsetIndex].rows.map(item => {
-         }) : [];
+               return { ...item, _id: uidGen() };
+            })
+            : [];
       },
       resizeResults () {
          if (this.$refs.resultTable) {

src/renderer/components/WorkspaceQueryTableRow.vue

@@ -66,7 +66,7 @@
                   />
                </div>
                <div class="editor-field-info">
-                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent.length }}</div>
+                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
                   <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
                </div>
             </div>
@@ -353,9 +353,7 @@ export default {
             this.$nextTick(() => document.querySelector('.editable-field').focus());
          });
 
-         const obj = {
+         const obj = { [field]: true };
-            [field]: true
-         };
          this.isInlineEditor = { ...this.isInlineEditor, ...obj };
       },
       editOFF () {

src/renderer/components/WorkspaceTableTab.vue

@@ -186,8 +186,8 @@ export default {
          this.isAddModal = false;
       },
       onKey (e) {
-         e.stopPropagation();
+         if (this.isSelected) {
-         if (this.workspace.selected_tab === 'data') {
+            e.stopPropagation();
             if (e.key === 'F5')
                this.reloadTable();
          }

src/renderer/i18n/en-US.js

@@ -52,7 +52,8 @@ module.exports = {
       default: 'Default',
       comment: 'Comment',
       key: 'Key | Keys',
-      order: 'Order'
+      order: 'Order',
+      expression: 'Expression'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -95,7 +96,9 @@ module.exports = {
       manageIndexes: 'Manage indexes',
       manageForeignKeys: 'Manage foreign keys',
       allowNull: 'Allow NULL',
-      zeroFill: 'Zero fill'
+      zeroFill: 'Zero fill',
+      customValue: 'Custom value',
+      onUpdate: 'On update'
    },
    // Date and Time
    short: {

src/renderer/ipc-api/Tables.js

@@ -29,4 +29,8 @@ export default class {
    static getForeignList (params) {
       return ipcRenderer.invoke('get-foreign-list', params);
    }
+
+   static alterTable (params) {
+      return ipcRenderer.invoke('alter-table', params);
+   }
 }

src/renderer/scss/_data-types.scss

@@ -1,9 +1,12 @@
+
 @mixin type-colors($types) {
+  $numbers: ('int','tinyint','smallint','mediumint','float','double','decimal');
+
   @each $type, $color in $types {
     .type-#{$type} {
       color: $color;
 
-      @if $type == "number" {
+      @if index($numbers, $type) {
         text-align: right;
       }
     }
@@ -15,8 +18,10 @@
     "char": $string-color,
     "varchar": $string-color,
     "text": $string-color,
+    "tinytext": $string-color,
     "mediumtext": $string-color,
     "longtext": $string-color,
+    "json": $string-color,
     "int": $number-color,
     "tinyint": $number-color,
     "smallint": $number-color,
@@ -28,9 +33,13 @@
     "datetime": $date-color,
     "date": $date-color,
     "time": $date-color,
+    "year": $date-color,
     "timestamp": $date-color,
     "bit": $bit-color,
+    "binary": $blob-color,
+    "varbinary": $blob-color,
     "blob": $blob-color,
+    "tinyblob": $blob-color,
     "mediumblob": $blob-color,
     "longblob": $blob-color,
     "enum": $enum-color,

src/renderer/store/modules/workspaces.store.js

@@ -41,26 +41,60 @@ export default {
       SELECT_WORKSPACE (state, uid) {
          state.selected_workspace = uid;
       },
-      ADD_CONNECTED (state, { uid, structure }) {
+      ADD_CONNECTED (state, { uid, client, dataTypes, structure }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure, connected: true } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               client,
+               dataTypes,
+               structure,
+               connected: true
+            }
+            : workspace);
       },
       REMOVE_CONNECTED (state, uid) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure: {}, connected: false } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               structure: {},
+               connected: false
+            }
+            : workspace);
       },
       REFRESH_STRUCTURE (state, { uid, structure }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               structure
+            }
+            : workspace);
       },
       REFRESH_COLLATIONS (state, { uid, collations }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, collations } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               collations
+            }
+            : workspace);
       },
       REFRESH_VARIABLES (state, { uid, variables }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, variables } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               variables
+            }
+            : workspace);
       },
       ADD_WORKSPACE (state, workspace) {
          state.workspaces.push(workspace);
       },
       CHANGE_BREADCRUMBS (state, { uid, breadcrumbs }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace);
+         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               breadcrumbs
+            }
+            : workspace);
       },
       NEW_TAB (state, uid) {
          tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
@@ -135,7 +169,7 @@ export default {
       }
    },
    actions: {
-      selectWorkspace ({ commit, dispatch }, uid) {
+      selectWorkspace ({ commit }, uid) {
          commit('SELECT_WORKSPACE', uid);
       },
       async connectWorkspace ({ dispatch, commit }, connection) {
@@ -144,7 +178,20 @@ export default {
             if (status === 'error')
                dispatch('notifications/addNotification', { status, message: response }, { root: true });
             else {
-               commit('ADD_CONNECTED', { uid: connection.uid, structure: response });
+               let dataTypes = [];
+
+               switch (connection.client) {
+                  case 'mysql':
+                  case 'maria':
+                     dataTypes = require('common/data-types/mysql');
+                     break;
+               }
+               commit('ADD_CONNECTED', { // TODO: add data types
+                  uid: connection.uid,
+                  client: connection.client,
+                  dataTypes,
+                  structure: response
+               });
                dispatch('refreshCollations', connection.uid);
                dispatch('refreshVariables', connection.uid);
             }