feat: database creation

src/main/ipc-handlers/connection.js

@@ -66,36 +66,4 @@ export default connections => {
       connections[uid].destroy();
       delete connections[uid];
    });
-
-   ipcMain.handle('get-structure', async (event, uid) => {
-      try {
-         const { rows: structure } = await connections[uid]
-            .select('*')
-            .schema('information_schema')
-            .from('TABLES')
-            .orderBy({ TABLE_SCHEMA: 'ASC', TABLE_NAME: 'ASC' })
-            .run();
-
-         return { status: 'success', response: structure };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
-
-   ipcMain.handle('raw-query', async (event, { uid, query, schema }) => {
-      if (!query) return;
-
-      try {
-         if (schema)
-            await connections[uid].use(schema);
-
-         const result = await connections[uid].raw(query, true);
-
-         return { status: 'success', response: result };
-      }
-      catch (err) {
-         return { status: 'error', response: err.toString() };
-      }
-   });
 };

src/main/ipc-handlers/database.js

@@ -0,0 +1,70 @@
+
+import { ipcMain } from 'electron';
+
+export default connections => {
+   ipcMain.handle('create-database', async (event, params) => {
+      try {
+         const query = `CREATE DATABASE \`${params.name}\` COLLATE ${params.collation}`;
+         const result = await connections[params.uid].raw(query, true);
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-structure', async (event, uid) => {
+      try {
+         const { rows: structure } = await connections[uid]
+            .select('*')
+            .schema('information_schema')
+            .from('TABLES')
+            .orderBy({ TABLE_SCHEMA: 'ASC', TABLE_NAME: 'ASC' })
+            .run();
+
+         return { status: 'success', response: structure };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-collations', async (event, uid) => {
+      try {
+         const result = await connections[uid].getCollations();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('get-variables', async (event, uid) => {
+      try {
+         const result = await connections[uid].getVariables();
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
+   ipcMain.handle('raw-query', async (event, { uid, query, schema }) => {
+      if (!query) return;
+
+      try {
+         if (schema)
+            await connections[uid].use(schema);
+
+         const result = await connections[uid].raw(query, true);
+
+         return { status: 'success', response: result };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+};

src/main/ipc-handlers/index.js

@@ -2,14 +2,14 @@ import connection from './connection';
 import tables from './tables';
 import updates from './updates';
 import application from './application';
-import properties from './properties';
+import database from './database';
 
 const connections = {};
 
 export default () => {
    connection(connections);
    tables(connections);
-   properties(connections);
+   database(connections);
    updates();
    application();
 };

src/main/libs/clients/MySQLClient.js

@@ -31,9 +31,44 @@ export class MySQLClient extends AntaresCore {
       return this.raw(sql);
    }
 
-   getCollations () {
+   /**
+    * SHOW COLLATION
+    *
+    * @returns
+    * @memberof MySQLClient
+    */
+   async getCollations () {
       const sql = 'SHOW COLLATION';
-      return this.raw(sql);
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            charset: row.Charset,
+            collation: row.Collation,
+            compiled: row.Compiled.includes('Yes'),
+            default: row.Default.includes('Yes'),
+            id: row.Id,
+            sortLen: row.Sortlen
+         };
+      });
+   }
+
+   /**
+    * SHOW VARIABLES
+    *
+    * @returns
+    * @memberof MySQLClient
+    */
+   async getVariables () {
+      const sql = 'SHOW VARIABLES';
+      const results = await this.raw(sql);
+
+      return results.rows.map(row => {
+         return {
+            name: row.Variable_name,
+            value: row.Value
+         };
+      });
    }
 
    /**

src/renderer/components/ModalNewDB.vue

@@ -0,0 +1,125 @@
+<template>
+   <div class="modal active">
+      <a class="modal-overlay" @click.stop="closeModal" />
+      <div class="modal-container p-0">
+         <div class="modal-header pl-2">
+            <div class="modal-title h6">
+               <div class="d-flex">
+                  <i class="mdi mdi-24px mdi-database-plus mr-1" /> {{ $t('message.createNewDatabase') }}
+               </div>
+            </div>
+            <a class="btn btn-clear c-hand" @click.stop="closeModal" />
+         </div>
+         <div class="modal-body pb-0">
+            <div class="content">
+               <form class="form-horizontal">
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.name') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <input
+                           v-model="database.name"
+                           class="form-input"
+                           type="text"
+                           required
+                           :placeholder="$t('message.databaseName')"
+                        >
+                     </div>
+                  </div>
+                  <div class="form-group">
+                     <div class="col-3">
+                        <label class="form-label">{{ $t('word.collation') }}:</label>
+                     </div>
+                     <div class="col-9">
+                        <select v-model="database.collation" class="form-select">
+                           <option
+                              v-for="collation in collations"
+                              :key="collation.id"
+                              :value="collation.collation"
+                           >
+                              {{ collation.collation }}
+                           </option>
+                        </select>
+                        <small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
+                     </div>
+                  </div>
+               </form>
+            </div>
+         </div>
+         <div class="modal-footer text-light">
+            <button class="btn btn-primary mr-2" @click.stop="createDatabase">
+               {{ $t('word.add') }}
+            </button>
+            <button class="btn btn-link" @click.stop="closeModal">
+               {{ $t('word.close') }}
+            </button>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import Database from '@/ipc-api/Database';
+
+export default {
+   name: 'ModalNewDB',
+   data () {
+      return {
+         database: {
+            name: '',
+            collation: ''
+         }
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace',
+         getDatabaseVariable: 'workspaces/getDatabaseVariable'
+      }),
+      collations () {
+         return this.getWorkspace(this.selectedWorkspace).collations;
+      },
+      defaultCollation () {
+         return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
+      }
+   },
+   created () {
+      this.database = { ...this.database, collation: this.defaultCollation };
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification'
+      }),
+      async createDatabase () {
+         try {
+            const { status, response } = await Database.createDatabase({
+               uid: this.selectedWorkspace,
+               ...this.database
+            });
+
+            if (status === 'success') {
+               this.closeModal();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      closeModal () {
+         this.$emit('close');
+      }
+   }
+};
+</script>
+
+<style scoped>
+  .modal-container {
+    max-width: 360px;
+  }
+</style>

src/renderer/components/WorkspaceExploreBar.vue

@@ -10,13 +10,18 @@
             <span class="workspace-explorebar-title">{{ connectionName }}</span>
             <span v-if="workspace.connected" class="workspace-explorebar-tools">
                <i
-                  class="mdi mdi-18px mdi-refresh c-hand"
+                  class="mdi mdi-18px mdi-database-plus c-hand mr-2"
+                  :title="$t('message.createNewDatabase')"
+                  @click="showNewDBModal"
+               />
+               <i
+                  class="mdi mdi-18px mdi-refresh c-hand mr-2"
                   :class="{'rotate':isRefreshing}"
                   :title="$t('word.refresh')"
                   @click="refresh"
                />
                <i
-                  class="mdi mdi-18px mdi-power-plug-off c-hand mr-1 ml-2"
+                  class="mdi mdi-18px mdi-power-plug-off c-hand"
                   :title="$t('word.disconnect')"
                   @click="disconnectWorkspace(connection.uid)"
                />
@@ -36,6 +41,11 @@
             />
          </div>
       </div>
+      <ModalNewDB
+         v-if="isNewDBModal"
+         @close="hideNewDBModal"
+         @reload="refresh"
+      />
    </div>
 </template>
 
@@ -44,12 +54,14 @@ import { mapGetters, mapActions } from 'vuex';
 import _ from 'lodash';
 import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
 import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
+import ModalNewDB from '@/components/ModalNewDB';
 
 export default {
    name: 'WorkspaceExploreBar',
    components: {
       WorkspaceConnectPanel,
-      WorkspaceExploreBarDatabase
+      WorkspaceExploreBarDatabase,
+      ModalNewDB
    },
    props: {
       connection: Object,
@@ -58,6 +70,7 @@ export default {
    data () {
       return {
          isRefreshing: false,
+         isNewDBModal: false,
          localWidth: null
       };
    },
@@ -117,6 +130,12 @@ export default {
       },
       stopResize () {
          window.removeEventListener('mousemove', this.resize);
+      },
+      showNewDBModal () {
+         this.isNewDBModal = true;
+      },
+      hideNewDBModal () {
+         this.isNewDBModal = false;
       }
    }
 };