refactor: improvements to edit connection modal

package.json

@@ -58,7 +58,6 @@
     "pg": "^8.3.3",
     "source-map-support": "^0.5.16",
     "spectre.css": "^0.5.9",
-    "vue-click-outside": "^1.1.0",
     "vue-i18n": "^8.21.0",
     "vue-the-mask": "^0.11.1",
     "vuedraggable": "^2.24.1",

src/renderer/App.vue

@@ -16,7 +16,6 @@
          <TheFooter />
          <TheNotificationsBoard />
          <ModalNewConnection v-if="isNewConnModal" />
-         <ModalEditConnection v-if="isEditModal" />
          <ModalSettings v-if="isSettingModal" />
       </div>
    </div>
@@ -36,7 +35,6 @@ export default {
       TheAppWelcome: () => import(/* webpackChunkName: "TheAppWelcome" */'@/components/TheAppWelcome'),
       Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
       ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
-      ModalEditConnection: () => import(/* webpackChunkName: "ModalEditConnection" */'@/components/ModalEditConnection'),
       ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings')
    },
    data () {

src/renderer/components/BaseContextMenu.vue

@@ -15,13 +15,8 @@
 </template>
 
 <script>
-import ClickOutside from 'vue-click-outside';
-
 export default {
    name: 'BaseContextMenu',
-   directives: {
-      ClickOutside
-   },
    props: {
       contextEvent: MouseEvent
    },

src/renderer/components/ModalEditConnection.vue

@@ -180,7 +180,6 @@ export default {
    },
    methods: {
       ...mapActions({
-         closeModal: 'application/hideEditConnModal',
          editConnection: 'connections/editConnection'
       }),
       async startTest () {
@@ -231,6 +230,9 @@ export default {
          this.isTesting = false;
          this.isAsking = false;
       },
+      closeModal () {
+         this.$emit('close');
+      },
       onKey (e) {
          e.stopPropagation();
          if (e.key === 'Escape')

src/renderer/components/SettingBarContext.vue

@@ -10,9 +10,10 @@
          <span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ $t('word.delete') }}</span>
       </div>
 
+      <ModalEditConnection v-if="isEditModal" @close="hideEditModal" />
       <ConfirmModal
          v-if="isConfirmModal"
-         @confirm="deleteConnection(contextConnection)"
+         @confirm="confirmDeleteConnection"
          @hide="hideConfirmModal"
       >
          <template :slot="'header'">
@@ -33,11 +34,13 @@
 import { mapActions, mapGetters } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'SettingBarContext',
    components: {
       BaseContextMenu,
+      ModalEditConnection,
       ConfirmModal
    },
    props: {
@@ -46,7 +49,8 @@ export default {
    },
    data () {
       return {
-         isConfirmModal: false
+         isConfirmModal: false,
+         isEditModal: false
       };
    },
    computed: {
@@ -59,14 +63,27 @@ export default {
    },
    methods: {
       ...mapActions({
-         deleteConnection: 'connections/deleteConnection',
+         deleteConnection: 'connections/deleteConnection'
-         showEditModal: 'application/showEditConnModal'
       }),
+      confirmDeleteConnection () {
+         this.deleteConnection(this.contextConnection);
+         this.$emit('close-context');
+      },
+      showEditModal () {
+         this.isEditModal = true;
+      },
+      hideEditModal () {
+         this.isEditModal = false;
+         this.closeContext();
+      },
       showConfirmModal () {
          this.isConfirmModal = true;
       },
       hideConfirmModal () {
          this.isConfirmModal = false;
+      },
+      closeContext () {
+         this.$emit('close-context');
       }
    }
 };

src/renderer/store/modules/application.store.js

@@ -7,7 +7,6 @@ export default {
       app_version: process.env.PACKAGE_VERSION || 0,
       is_loading: false,
       is_new_modal: false,
-      is_edit_modal: false,
       is_setting_modal: false,
       selected_setting_tab: 'general',
       selected_conection: {},
@@ -20,7 +19,6 @@ export default {
       appVersion: state => state.app_version,
       getSelectedConnection: state => state.selected_conection,
       isNewModal: state => state.is_new_modal,
-      isEditModal: state => state.is_edit_modal,
       isSettingModal: state => state.is_setting_modal,
       selectedSettingTab: state => state.selected_setting_tab,
       getUpdateStatus: state => state.update_status,
@@ -36,13 +34,6 @@ export default {
       HIDE_NEW_CONNECTION_MODAL (state) {
          state.is_new_modal = false;
       },
-      SHOW_EDIT_CONNECTION_MODAL (state, connection) {
-         state.is_edit_modal = true;
-         state.selected_conection = connection;
-      },
-      HIDE_EDIT_CONNECTION_MODAL (state) {
-         state.is_edit_modal = false;
-      },
       SHOW_SETTING_MODAL (state, tab) {
          state.selected_setting_tab = tab;
          state.is_setting_modal = true;
@@ -68,12 +59,6 @@ export default {
       hideNewConnModal ({ commit }) {
          commit('HIDE_NEW_CONNECTION_MODAL');
       },
-      showEditConnModal ({ commit }, connection) {
-         commit('SHOW_EDIT_CONNECTION_MODAL', connection);
-      },
-      hideEditConnModal ({ commit }) {
-         commit('HIDE_EDIT_CONNECTION_MODAL');
-      },
       showSettingModal ({ commit }, tab) {
          commit('SHOW_SETTING_MODAL', tab);
       },