feat: tables options edit

src/main/ipc-handlers/database.js

@@ -83,6 +83,17 @@ export default connections => {
       }
    });
 
+   ipcMain.handle('get-engines', async (event, uid) => {
+      try {
+         const result = await connections[uid].getEngines();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
    ipcMain.handle('use-schema', async (event, { uid, schema }) => {
       if (!schema) return;
 

src/main/libs/clients/MySQLClient.js

@@ -267,6 +267,28 @@ export class MySQLClient extends AntaresCore {
       });
    }
 
+   /**
+    * SHOW ENGINES
+    *
+    * @returns {Array.<Object>} engines list
+    * @memberof MySQLClient
+    */
+   async getEngines () {
+      const sql = 'SHOW ENGINES';
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            name: row.Engine,
+            support: row.Support,
+            comment: row.Comment,
+            transactions: row.Trasactions,
+            xa: row.XA,
+            savepoints: row.Savepoints
+         };
+      });
+   }
+
    /**
     * ALTER TABLE
     *
@@ -278,12 +300,19 @@ export class MySQLClient extends AntaresCore {
          table,
          additions,
          deletions,
-         changes
+         changes,
+         options
       } = params;
 
       let sql = `ALTER TABLE \`${table}\` `;
       const alterColumns = [];
 
+      // OPTIONS
+      if ('comment' in options) alterColumns.push(`COMMENT='${options.comment}'`);
+      if ('engine' in options) alterColumns.push(`ENGINE=${options.engine}`);
+      if ('autoIncrement' in options) alterColumns.push(`AUTO_INCREMENT=${+options.autoIncrement}`);
+      if ('collation' in options) alterColumns.push(`COLLATE='${options.collation}'`);
+
       // ADD
       additions.forEach(addition => {
          const length = addition.numLength || addition.charLength || addition.datePrecision;
@@ -325,6 +354,9 @@ export class MySQLClient extends AntaresCore {
 
       sql += alterColumns.join(', ');
 
+      // RENAME
+      if (options.name) sql += `; RENAME TABLE \`${table}\` TO \`${options.name}\``;
+
       return await this.raw(sql);
    }
 

src/renderer/components/WorkspaceExploreBarDatabaseContext.vue

@@ -3,10 +3,10 @@
       :context-event="contextEvent"
       @close-context="closeContext"
    >
-      <!-- <div class="context-element">
+      <div class="context-element">
          <span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ $t('word.add') }}</span>
          <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
-      </div> -->
+      </div>
       <div class="context-element" @click="showEditModal">
          <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
       </div>

src/renderer/components/WorkspacePropsTab.vue

@@ -40,7 +40,7 @@
                   <span>{{ $t('word.foreignKeys') }}</span>
                   <i class="mdi mdi-24px mdi-key-link ml-1" />
                </button>
-               <button class="btn btn-dark btn-sm d-none">
+               <button class="btn btn-dark btn-sm" @click="showOptionsModal">
                   <span>{{ $t('word.options') }}</span>
                   <i class="mdi mdi-24px mdi-cogs ml-1" />
                </button>
@@ -60,6 +60,92 @@
             @remove-field="removeField"
          />
       </div>
+      <ConfirmModal
+         v-if="isOptionsModal"
+         :confirm-text="$t('word.confirm')"
+         size="400"
+         @confirm="confirmOptionsChange"
+         @hide="hideOptionsModal"
+      >
+         <template :slot="'header'">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-cogs mr-1" /> {{ $t('word.options') }} "{{ table }}"
+            </div>
+         </template>
+         <div :slot="'body'">
+            <form class="form-horizontal">
+               <div class="form-group">
+                  <label class="form-label col-4">
+                     {{ $t('word.name') }}
+                  </label>
+                  <div class="column">
+                     <input
+                        v-model="localOptions.name"
+                        class="form-input"
+                        :class="{'is-error': !isTableNameValid}"
+                        type="text"
+                     >
+                  </div>
+               </div>
+               <div class="form-group">
+                  <label class="form-label col-4">
+                     {{ $t('word.comment') }}
+                  </label>
+                  <div class="column">
+                     <input
+                        v-model="localOptions.comment"
+                        class="form-input"
+                        type="text"
+                     >
+                  </div>
+               </div>
+               <div class="form-group">
+                  <label class="form-label col-4">
+                     {{ $t('word.autoIncrement') }}
+                  </label>
+                  <div class="column">
+                     <input
+                        v-model="localOptions.autoIncrement"
+                        class="form-input"
+                        type="number"
+                     >
+                  </div>
+               </div>
+               <div class="form-group">
+                  <label class="form-label col-4">
+                     {{ $t('word.collation') }}
+                  </label>
+                  <div class="column">
+                     <select v-model="localOptions.collation" class="form-select">
+                        <option
+                           v-for="collation in workspace.collations"
+                           :key="collation.id"
+                           :value="collation.collation"
+                        >
+                           {{ collation.collation }}
+                        </option>
+                     </select>
+                  </div>
+               </div>
+               <div class="form-group">
+                  <label class="form-label col-4">
+                     {{ $t('word.engine') }}
+                  </label>
+                  <div class="column">
+                     <select v-model="localOptions.engine" class="form-select">
+                        <option
+                           v-for="engine in workspace.engines"
+                           :key="engine.name"
+                           :value="engine.name"
+                        >
+                           {{ engine.name }}
+                        </option>
+                     </select>
+                  </div>
+               </div>
+            </form>
+         </div>
+      </ConfirmModal>
    </div>
 </template>
 
@@ -68,11 +154,13 @@ import { mapGetters, mapActions } from 'vuex';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import WorkspacePropsTable from '@/components/WorkspacePropsTable';
+import ConfirmModal from '@/components/BaseConfirmModal';
 
 export default {
    name: 'WorkspacePropsTab',
    components: {
-      WorkspacePropsTable
+      WorkspacePropsTable,
+      ConfirmModal
    },
    props: {
       connection: Object,
@@ -83,29 +171,45 @@ export default {
          tabUid: 'prop',
          isQuering: false,
          isSaving: false,
+         isAddModal: false,
+         isOptionsModal: false,
+         isOptionsChanging: false,
          originalFields: [],
          localFields: [],
          originalKeyUsage: [],
          localKeyUsage: [],
-         lastTable: null,
-         isAddModal: false
+         localOptions: [],
+         lastTable: null
       };
    },
    computed: {
       ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace'
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
       }),
       workspace () {
          return this.getWorkspace(this.connection.uid);
       },
+      tableOptions () {
+         const db = this.workspace.structure.find(db => db.name === this.schema);
+         return db ? db.tables.find(table => table.name === this.table) : {};
+      },
+      defaultEngine () {
+         return this.getDatabaseVariable(this.connection.uid, 'default_storage_engine').value || '';
+      },
       isSelected () {
          return this.workspace.selected_tab === 'prop';
       },
       schema () {
          return this.workspace.breadcrumbs.schema;
       },
       isChanged () {
-         return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) || JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage);
+         return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) ||
+            JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage) ||
+            JSON.stringify(this.tableOptions) !== JSON.stringify(this.localOptions);
+      },
+      isTableNameValid () {
+         return this.localOptions.name !== '';
       }
    },
    watch: {
@@ -124,11 +228,13 @@ export default {
    },
    methods: {
       ...mapActions({
-         addNotification: 'notifications/addNotification'
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure'
       }),
       async getFieldsData () {
          if (!this.table) return;
          this.isQuering = true;
+         this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
 
          const params = {
             uid: this.connection.uid,
@@ -197,20 +303,30 @@ export default {
                if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
          });
 
+         // OPTIONS
+         const options = Object.keys(this.localOptions).reduce((acc, option) => {
+            if (this.localOptions[option] !== this.tableOptions[option])
+               acc[option] = this.localOptions[option];
+            return acc;
+         }, {});
+
          const params = {
             uid: this.connection.uid,
             schema: this.schema,
             table: this.workspace.breadcrumbs.table,
             additions,
             changes,
-            deletions
+            deletions,
+            options
          };
 
          try { // Key usage (foreign keys)
             const { status, response } = await Tables.alterTable(params);
 
-            if (status === 'success')
+            if (status === 'success') {
+               await this.refreshStructure(this.connection.uid);
                this.getFieldsData();
+            }
             else
                this.addNotification({ status: 'error', message: response });
          }
@@ -223,6 +339,7 @@ export default {
       clearChanges () {
          this.localFields = JSON.parse(JSON.stringify(this.originalFields));
          this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
+         this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
       },
       addField () {
          this.localFields.push({
@@ -256,6 +373,22 @@ export default {
       },
       hideAddModal () {
          this.isAddModal = false;
+      },
+      showOptionsModal () {
+         this.isOptionsModal = true;
+      },
+      hideOptionsModal () {
+         if (this.isOptionsChanging && !this.isTableNameValid) {
+            this.isOptionsChanging = false;
+            return;
+         }
+
+         this.isOptionsModal = false;
+         if (!this.isOptionsChanging) this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
+         this.isOptionsChanging = false;
+      },
+      confirmOptionsChange () {
+         this.isOptionsChanging = true;
       }
    }
 };

src/renderer/i18n/en-US.js

@@ -53,7 +53,9 @@ module.exports = {
       comment: 'Comment',
       key: 'Key | Keys',
       order: 'Order',
-      expression: 'Expression'
+      expression: 'Expression',
+      autoIncrement: 'Auto Increment',
+      engine: 'Engine'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',

src/renderer/ipc-api/Database.js

@@ -30,6 +30,10 @@ export default class {
       return ipcRenderer.invoke('get-variables', uid);
    }
 
+   static getEngines (uid) {
+      return ipcRenderer.invoke('get-engines', uid);
+   }
+
    static useSchema (params) {
       return ipcRenderer.invoke('use-schema', params);
    }

src/renderer/scss/main.scss

@@ -191,6 +191,11 @@ body {
   background-color: $bg-color-gray;
 }
 
+.form-input.is-error,
+.form-select.is-error {
+  background-color: $bg-color-gray;
+}
+
 .form-input:not(:placeholder-shown):invalid:focus {
   background: $bg-color-gray;
 }