feat: databases deletion

README.md

@@ -19,7 +19,7 @@ My target is to support as many databases as possible, and all major operating s
 
 Why am I developing an SQL client when there are a lot of them on the market?  
 The main goal is to develop a totally free, cross platform and open source alternative, empowered by JavaScript's ecosystem.  
-An application created with minimalism and semplicity in mind, with features in the righ places, not hundreds of tiny buttons or submenu.
+An application created with minimalism and semplicity in mind, with features in the right places, not hundreds of tiny buttons or submenu.
 
 ## How to contribute
 

src/main/ipc-handlers/connection.js

@@ -39,7 +39,8 @@ export default connections => {
             port: +conn.port,
             user: conn.user,
             password: conn.password
-         }
+         },
+         poolSize: 1
       });
 
       try {

src/main/ipc-handlers/database.js

@@ -14,6 +14,18 @@ export default connections => {
       }
    });
 
+   ipcMain.handle('delete-database', async (event, params) => {
+      try {
+         const query = `DROP DATABASE \`${params.database}\``;
+         await connections[params.uid].raw(query);
+
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
    ipcMain.handle('get-structure', async (event, uid) => {
       try {
          const structure = await connections[uid].getStructure();

src/renderer/components/BaseConfirmModal.vue

@@ -27,7 +27,7 @@
          <div class="modal-footer">
             <button
                class="btn btn-primary mr-2"
-               @click="confirmModal"
+               @click.stop="confirmModal"
             >
                {{ confirmText || $t('word.confirm') }}
             </button>

src/renderer/components/BaseContextMenu.vue

@@ -72,6 +72,7 @@ export default {
         align-items: center;
         padding: 0.1rem 0.3rem;
         cursor: pointer;
+        justify-content: space-between;
 
         &:hover {
           background: $primary-color;

src/renderer/components/SettingBarContext.vue

@@ -4,10 +4,10 @@
       @close-context="$emit('close-context')"
    >
       <div class="context-element" @click="showEditModal(contextConnection)">
-         <i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
       </div>
       <div class="context-element" @click="showConfirmModal">
-         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
       </div>
 
       <ConfirmModal
@@ -22,7 +22,7 @@
          </template>
          <div :slot="'body'">
             <div class="mb-2">
-               {{ $t('message.deleteConnectionCorfirm') }} <b>{{ connectionName }}</b>?
+               {{ $t('message.deleteCorfirm') }} <b>{{ connectionName }}</b>?
             </div>
          </div>
       </ConfirmModal>

src/renderer/components/WorkspaceExploreBar.vue

@@ -38,6 +38,7 @@
                :key="db.name"
                :database="db"
                :connection="connection"
+               @show-database-context="openDatabaseContext"
             />
          </div>
       </div>
@@ -46,6 +47,13 @@
          @close="hideNewDBModal"
          @reload="refresh"
       />
+      <DatabaseContext
+         v-if="isDatabaseContext"
+         :selected-database="selectedDatabase"
+         :context-event="databaseContextEvent"
+         @close-context="closeDatabaseContext"
+         @reload="refresh"
+      />
    </div>
 </template>
 
@@ -54,6 +62,7 @@ import { mapGetters, mapActions } from 'vuex';
 import _ from 'lodash';
 import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
 import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
+import DatabaseContext from '@/components/WorkspaceExploreBarDatabaseContext';
 import ModalNewDB from '@/components/ModalNewDB';
 
 export default {
@@ -61,6 +70,7 @@ export default {
    components: {
       WorkspaceConnectPanel,
       WorkspaceExploreBarDatabase,
+      DatabaseContext,
       ModalNewDB
    },
    props: {
@@ -71,7 +81,13 @@ export default {
       return {
          isRefreshing: false,
          isNewDBModal: false,
-         localWidth: null
+         localWidth: null,
+         isDatabaseContext: false,
+         isTableContext: false,
+         databaseContextEvent: null,
+         tableContextEvent: null,
+         selectedDatabase: '',
+         selectedTable: ''
       };
    },
    computed: {
@@ -115,6 +131,7 @@ export default {
          changeExplorebarSize: 'settings/changeExplorebarSize'
       }),
       async refresh () {
+         console.log('refresh');
          if (!this.isRefreshing) {
             this.isRefreshing = true;
             await this.refreshStructure(this.connection.uid);
@@ -136,6 +153,16 @@ export default {
       },
       hideNewDBModal () {
          this.isNewDBModal = false;
+      },
+      openDatabaseContext (payload) {
+         this.isTableContext = false;
+         this.selectedDatabase = payload.database;
+         this.databaseContextEvent = payload.event;
+         this.isDatabaseContext = true;
+      },
+      closeDatabaseContext () {
+         this.isDatabaseContext = false;
+         this.selectedDatabase = '';
       }
    }
 };

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -4,6 +4,7 @@
          class="accordion-header database-name pb-0"
          :class="{'text-bold': breadcrumbs.schema === database.name}"
          @click="changeBreadcrumbs({schema: database.name, table:null})"
+         @contextmenu.prevent="showDatabaseContext($event, database.name)"
       >
          <i class="icon mdi mdi-18px mdi-chevron-right" />
          <i class="database-icon mdi mdi-18px mdi-database mr-1" />
@@ -18,6 +19,7 @@
                   class="menu-item"
                   :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.table === table.TABLE_NAME}"
                   @click="changeBreadcrumbs({schema: database.name, table: table.TABLE_NAME})"
+                  @contextmenu.prevent="showTableContext($event, table.TABLE_NAME)"
                >
                   <a class="table-name">
                      <i class="table-icon mdi mdi-18px mdi-table mr-1" />
@@ -50,7 +52,13 @@ export default {
    methods: {
       ...mapActions({
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      })
+      }),
+      showDatabaseContext (event, database) {
+         this.$emit('show-database-context', { event, database });
+      },
+      showTableContext (table) {
+         this.$emit('show-table-context', table);
+      }
    }
 };
 </script>

src/renderer/components/WorkspaceExploreBarDatabaseContext.vue

@@ -0,0 +1,97 @@
+<template>
+   <BaseContextMenu
+      :context-event="contextEvent"
+      @close-context="closeContext"
+   >
+      <!-- <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 class="context-element">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-pencil text-light pr-1" /> {{ $t('word.edit') }}</span>
+      </div>
+      <div class="context-element" @click="showConfirmModal">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
+      </div>
+
+      <ConfirmModal
+         v-if="isConfirmModal"
+         @confirm="deleteDatabase"
+         @hide="hideConfirmModal"
+      >
+         <template slot="header">
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-database-remove mr-1" /> {{ $t('message.deleteDatabase') }}
+            </div>
+         </template>
+         <div slot="body">
+            <div class="mb-2">
+               {{ $t('message.deleteCorfirm') }} "<b>{{ selectedDatabase }}</b>"?
+            </div>
+         </div>
+      </ConfirmModal>
+   </BaseContextMenu>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import BaseContextMenu from '@/components/BaseContextMenu';
+import ConfirmModal from '@/components/BaseConfirmModal';
+import Database from '@/ipc-api/Database';
+
+export default {
+   name: 'WorkspaceExploreBarDatabaseContext',
+   components: {
+      BaseContextMenu,
+      ConfirmModal
+   },
+   props: {
+      contextEvent: MouseEvent,
+      selectedDatabase: String
+   },
+   data () {
+      return {
+         isConfirmModal: false
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected'
+      })
+   },
+   methods: {
+      ...mapActions({
+         deleteConnection: 'connections/deleteConnection',
+         showEditModal: 'application/showEditConnModal',
+         addNotification: 'notifications/addNotification'
+      }),
+      showConfirmModal () {
+         this.isConfirmModal = true;
+      },
+      hideConfirmModal () {
+         this.isConfirmModal = false;
+      },
+      closeContext () {
+         this.$emit('close-context');
+      },
+      async deleteDatabase () {
+         try {
+            const { status, response } = await Database.deleteDatabase({
+               uid: this.selectedWorkspace,
+               database: this.selectedDatabase
+            });
+
+            if (status === 'success') {
+               this.closeContext();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      }
+   }
+};
+</script>

src/renderer/components/WorkspaceQueryTableContext.vue

@@ -4,7 +4,7 @@
       @close-context="closeContext"
    >
       <div class="context-element" @click="showConfirmModal">
-         <i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}
+         <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $tc('message.deleteRows', selectedRows.length) }}</span>
       </div>
 
       <ConfirmModal

src/renderer/i18n/ar-SA.js

@@ -50,7 +50,7 @@ module.exports = {
       testConnection: 'إختبر الإتصال',
       editConnection: 'عدل الإتصال',
       deleteConnection: 'إحذف الإتصال',
-      deleteConnectionCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
+      deleteCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
       connectionSuccessfullyMade: 'تم الإتصال بنجاح!',
       madeWithJS: 'بني بـ  💛 و جافاسكربت!',
       checkForUpdates: 'تأكد من التحديثات',

src/renderer/i18n/en-US.js

@@ -53,7 +53,7 @@ module.exports = {
       testConnection: 'Test connection',
       editConnection: 'Edit connection',
       deleteConnection: 'Delete connection',
-      deleteConnectionCorfirm: 'Do you confirm the cancellation of',
+      deleteCorfirm: 'Do you confirm the cancellation of',
       connectionSuccessfullyMade: 'Connection successfully made!',
       madeWithJS: 'Made with 💛 and JavaScript!',
       checkForUpdates: 'Check for updates',
@@ -76,7 +76,9 @@ module.exports = {
       affectedRows: 'Affected rows',
       createNewDatabase: 'Create new Database',
       databaseName: 'Database name',
-      serverDefault: 'Server default'
+      serverDefault: 'Server default',
+      deleteDatabase: 'Delete database',
+      editDatabase: 'Edit database'
    },
    // Date and Time
    short: {

src/renderer/i18n/es-ES.js

@@ -51,7 +51,7 @@ module.exports = {
       testConnection: 'Comprobar conexión',
       editConnection: 'Editar conexión',
       deleteConnection: 'Eliminar conexión',
-      deleteConnectionCorfirm: 'Confirmas la cancelación de',
+      deleteCorfirm: 'Confirmas la cancelación de',
       connectionSuccessfullyMade: 'Conexión realizada correctamente!',
       madeWithJS: 'Hecho con 💛 y JavaScript!',
       checkForUpdates: 'Comprobar actualizaciones',

src/renderer/i18n/it-IT.js

@@ -29,10 +29,10 @@ module.exports = {
       donate: 'Dona',
       run: 'Esegui',
       schema: 'Schema',
-      results: 'Results',
+      results: 'Risultati',
       size: 'Dimensioni',
       seconds: 'Secondi',
-      type: 'tipologia',
+      type: 'Tipo',
       mimeType: 'Mime-Type',
       download: 'Scarica',
       add: 'Aggiungi',
@@ -51,7 +51,7 @@ module.exports = {
       testConnection: 'Testa connessione',
       editConnection: 'Modifica connessione',
       deleteConnection: 'Elimina connessione',
-      deleteConnectionCorfirm: 'Confermi l\'eliminazione di',
+      deleteCorfirm: 'Confermi l\'eliminazione di',
       connectionSuccessfullyMade: 'Connessione avvenuta con successo!',
       madeWithJS: 'Fatto con 💛 e JavaScript!',
       checkForUpdates: 'Cerca aggiornamenti',

src/renderer/ipc-api/Database.js

@@ -6,6 +6,10 @@ export default class {
       return ipcRenderer.invoke('create-database', params);
    }
 
+   static deleteDatabase (params) {
+      return ipcRenderer.invoke('delete-database', params);
+   }
+
    static getStructure (uid) {
       return ipcRenderer.invoke('get-structure', uid);
    }