feat: databases deletion

2020-10-01 15:08:35 +02:00 · 2020-10-01 15:08:35 +02:00 · 4288a1fd33
parent 52449e0420
commit 4288a1fd33
15 changed files with 168 additions and 16 deletions
--- a/README.md
+++ b/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

--- a/src/main/ipc-handlers/connection.js
+++ b/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 {
--- a/src/main/ipc-handlers/database.js
+++ b/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();
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/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>
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/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;
--- a/src/renderer/components/SettingBarContext.vue
+++ b/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>
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/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 = '';
      }
   }
 };
--- a/src/renderer/components/WorkspaceExploreBarDatabase.vue
+++ b/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>
--- a/src/renderer/components/WorkspaceExploreBarDatabaseContext.vue
+++ b/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>
--- a/src/renderer/components/WorkspaceQueryTableContext.vue
+++ b/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
--- a/src/renderer/i18n/ar-SA.js
+++ b/src/renderer/i18n/ar-SA.js
@ -50,7 +50,7 @@ module.exports = {
      testConnection: 'إختبر الإتصال',
      editConnection: 'عدل الإتصال',
      deleteConnection: 'إحذف الإتصال',
-      deleteConnectionCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
+      deleteCorfirm: 'هل أنت متأكد من حذف الإتصال؟',
      connectionSuccessfullyMade: 'تم الإتصال بنجاح!',
      madeWithJS: 'بني بـ  💛 و جافاسكربت!',
      checkForUpdates: 'تأكد من التحديثات',
--- a/src/renderer/i18n/en-US.js
+++ b/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: {
--- a/src/renderer/i18n/es-ES.js
+++ b/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',
--- a/src/renderer/i18n/it-IT.js
+++ b/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',
--- a/src/renderer/ipc-api/Database.js
+++ b/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);
   }