feat: database creation

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;
       }
    }
 };

src/renderer/components/WorkspaceQueryTab.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import Connection from '@/ipc-api/Connection';
+import Database from '@/ipc-api/Database';
 import Tables from '@/ipc-api/Tables';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
@@ -114,7 +114,7 @@ export default {
                query
             };
 
-            const { status, response } = await Connection.rawQuery(params);
+            const { status, response } = await Database.rawQuery(params);
 
             if (status === 'success') {
                this.results = Array.isArray(response) ? response : [response];