feat: table fields addition

src/main/libs/clients/MySQLClient.js

@@ -276,14 +276,31 @@ export class MySQLClient extends AntaresCore {
    async alterTable (params) {
       const {
          table,
-         // additions,
+         additions,
-         // deletions,
+         deletions,
          changes
       } = params;
 
       let sql = `ALTER TABLE \`${table}\` `;
       const alterColumns = [];
 
+      // ADD
+      additions.forEach(addition => {
+         const length = addition.numLength || addition.charLength || addition.datePrecision;
+
+         alterColumns.push(`ADD COLUMN \`${addition.name}\` 
+            ${addition.type.toUpperCase()}${length ? `(${length})` : ''} 
+            ${addition.unsigned ? 'UNSIGNED' : ''} 
+            ${addition.nullable ? 'NULL' : 'NOT NULL'}
+            ${addition.autoIncrement ? 'AUTO_INCREMENT' : ''}
+            ${addition.default ? `DEFAULT ${addition.default}` : ''}
+            ${addition.comment ? `COMMENT '${addition.comment}'` : ''}
+            ${addition.collation ? `COLLATE ${addition.collation}` : ''}
+            ${addition.onUpdate ? `ON UPDATE ${addition.onUpdate}` : ''}
+            ${addition.after ? `AFTER \`${addition.after}\`` : 'FIRST'}`);
+      });
+
+      // CHANGE
       changes.forEach(change => {
          const length = change.numLength || change.charLength || change.datePrecision;
 
@@ -299,6 +316,11 @@ export class MySQLClient extends AntaresCore {
             ${change.after ? `AFTER \`${change.after}\`` : 'FIRST'}`);
       });
 
+      // DROP
+      deletions.forEach(deletion => {
+         alterColumns.push(`DROP COLUMN \`${deletion.name}\``);
+      });
+
       sql += alterColumns.join(', ');
 
       return await this.raw(sql);

src/renderer/components/WorkspacePropsTab.vue

@@ -24,7 +24,11 @@
 
                <div class="divider-vert py-3" />
 
-               <button class="btn btn-dark btn-sm" :title="$t('message.addNewField')">
+               <button
+                  class="btn btn-dark btn-sm"
+                  :title="$t('message.addNewField')"
+                  @click="addField"
+               >
                   <span>{{ $t('word.add') }}</span>
                   <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
                </button>
@@ -168,7 +172,15 @@ export default {
 
          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));
+
+         // Additions
+         const additions = this.localFields.filter((field, i) => !originalIDs.includes(field._id)).map(field => {
+            const lI = this.localFields.findIndex(localField => localField._id === field._id);
+            const after = lI > 0 ? this.localFields[lI - 1].name : false;
+            return { ...field, after };
+         });
+
+         // Deletions
          const deletions = this.originalFields.filter(field => !localIDs.includes(field._id));
 
          // Changes
@@ -211,6 +223,33 @@ export default {
          this.localFields = JSON.parse(JSON.stringify(this.originalFields));
          this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
       },
+      addField () {
+         this.localFields.push({
+            _id: uidGen(),
+            name: '',
+            key: '',
+            type: 'int',
+            schema: this.schema,
+            table: this.table,
+            numPrecision: null,
+            numLength: null,
+            datePrecision: null,
+            charLength: null,
+            nullable: false,
+            unsigned: false,
+            zerofill: false,
+            order: this.localFields.length + 1,
+            default: null,
+            charset: null,
+            collation: null,
+            autoIncrement: false,
+            onUpdate: '',
+            comment: ''
+         });
+      },
+      removeField (uid) {
+         this.localFields = this.localFields.filter(field => field._id !== uid);
+      },
       showAddModal () {
          this.isAddModal = true;
       },

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

@@ -186,7 +186,7 @@ export default {
                      dataTypes = require('common/data-types/mysql');
                      break;
                }
-               commit('ADD_CONNECTED', { // TODO: add data types
+               commit('ADD_CONNECTED', {
                   uid: connection.uid,
                   client: connection.client,
                   dataTypes,