Edit connection

src/renderer/App.vue

@@ -14,6 +14,7 @@
       <TheFooter />
       <TheNotificationsBoard />
       <ModalNewConnection v-if="isNewConnModal" />
+      <ModalEditConnection v-if="isEditModal" />
    </div>
 </template>
 
@@ -25,6 +26,7 @@ import TheNotificationsBoard from '@/components/TheNotificationsBoard';
 import TheAppWelcome from '@/components/TheAppWelcome';
 import DatabaseWorkspace from '@/components/DatabaseWorkspace';
 import ModalNewConnection from '@/components/ModalNewConnection';
+import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'App',
@@ -34,7 +36,8 @@ export default {
       TheNotificationsBoard,
       TheAppWelcome,
       DatabaseWorkspace,
-      ModalNewConnection
+      ModalNewConnection,
+      ModalEditConnection
    },
    data () {
       return {
@@ -44,6 +47,7 @@ export default {
       ...mapGetters({
          isLoading: 'application/isLoading',
          isNewConnModal: 'connections/isNewModal',
+         isEditModal: 'connections/isEditModal',
          connections: 'connections/getConnections'
       })
    },

src/renderer/components/ModalEditConnection.vue

@@ -4,7 +4,7 @@
       <div class="modal-container">
          <div class="modal-header text-light">
             <div class="modal-title h6">
-               Create a new connection
+               Edit connection
             </div>
             <a class="btn btn-clear c-hand" @click="closeModal" />
          </div>
@@ -127,7 +127,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseToast from '@/components/BaseToast';
@@ -138,13 +138,6 @@ export default {
       ModalAskCredentials,
       BaseToast
    },
-   props: {
-      isOpened: {
-         type: Boolean,
-         default: false
-      },
-      connection: Object
-   },
    data () {
       return {
          toast: {
@@ -157,10 +150,13 @@ export default {
       };
    },
    computed: {
+      ...mapGetters({
+         connection: 'connections/getSelectedConnection'
+      }),
       localConnection: {
          get () {
             if (this.connectionProxy === null)
-               return this.connection;
+               return Object.assign({}, this.connection);
             else
                return this.connectionProxy;
          },
@@ -171,6 +167,7 @@ export default {
    },
    methods: {
       ...mapActions({
+         closeModal: 'connections/hideEditConnModal',
          editConnection: 'connections/editConnection'
       }),
       async startTest () {
@@ -180,11 +177,11 @@ export default {
             message: ''
          };
 
-         if (this.connection.ask)
+         if (this.localConnection.ask)
             this.isAsking = true;
          else {
             try {
-               const res = await Connection.makeTest(this.connection);
+               const res = await Connection.makeTest(this.localConnection);
                if (res.status === 'error')
                   this.toast = { status: 'error', message: res.response.message };
                else
@@ -199,7 +196,7 @@ export default {
       },
       async continueTest (credentials) { // if "Ask for credentials" is true
          this.isAsking = false;
-         const params = Object.assign({}, this.connection, credentials);
+         const params = Object.assign({}, this.localConnection, credentials);
          try {
             const res = await Connection.makeTest(params);
             if (res.status === 'error')
@@ -214,12 +211,9 @@ export default {
          this.isTesting = false;
       },
       saveEditConnection () {
-         this.editConnection(this.connection);
+         this.editConnection(this.localConnection);
          this.closeModal();
       },
-      closeModal () {
-         this.$emit('close');
-      },
       closeAsking () {
          this.isTesting = false;
          this.isAsking = false;

src/renderer/components/ModalNewConnection.vue

@@ -143,12 +143,6 @@ export default {
       ModalAskCredentials,
       BaseToast
    },
-   props: {
-      isOpened: {
-         type: Boolean,
-         default: false
-      }
-   },
    data () {
       return {
          connection: {

src/renderer/components/SettingBarContext.vue

@@ -3,7 +3,7 @@
       :context-event="contextEvent"
       @closeContext="$emit('closeContext')"
    >
-      <div class="context-element" @click="showEditModal">
+      <div class="context-element" @click="showEditModal(contextConnection)">
          <i class="material-icons md-18 text-light pr-1">edit</i> Edit
       </div>
       <div class="context-element" @click="showConfirmModal">
@@ -24,12 +24,6 @@
             </div>
          </div>
       </ConfirmModal>
-      <!-- TODO: move to vuex -->
-      <ModalEditConnection
-         v-if="isEditModal"
-         :connection="contextConnection"
-         @close="isEditModal = false"
-      />
    </BaseContextMenu>
 </template>
 
@@ -37,14 +31,12 @@
 import { mapActions } from 'vuex';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
-import ModalEditConnection from '@/components/ModalEditConnection';
 
 export default {
    name: 'SettingBarContext',
    components: {
       BaseContextMenu,
-      ConfirmModal,
-      ModalEditConnection
+      ConfirmModal
    },
    props: {
       contextEvent: MouseEvent,
@@ -52,25 +44,19 @@ export default {
    },
    data () {
       return {
-         isConfirmModal: false,
-         isEditModal: false
+         isConfirmModal: false
       };
    },
    methods: {
       ...mapActions({
-         deleteConnection: 'connections/deleteConnection'
+         deleteConnection: 'connections/deleteConnection',
+         showEditModal: 'connections/showEditConnModal'
       }),
       showConfirmModal () {
          this.isConfirmModal = true;
       },
       hideConfirmModal () {
          this.isConfirmModal = false;
-      },
-      showEditModal () {
-         this.isEditModal = true;
-      },
-      hideEditModal () {
-         this.isEditModal = false;
       }
    }
 };

src/renderer/store/modules/connections.store.js

@@ -6,11 +6,14 @@ export default {
    state: {
       connections: [],
       is_new_modal: false,
-      is_edit_modal: false
+      is_edit_modal: false,
+      selected_conection: {}
    },
    getters: {
       getConnections: state => state.connections,
-      isNewModal: state => state.is_new_modal
+      getSelectedConnection: state => state.selected_conection,
+      isNewModal: state => state.is_new_modal,
+      isEditModal: state => state.is_edit_modal
    },
    mutations: {
       ADD_CONNECTION (state, connection) {
@@ -19,6 +22,14 @@ export default {
       DELETE_CONNECTION (state, connection) {
          state.connections = state.connections.filter(el => el.uid !== connection.uid);
       },
+      EDIT_CONNECTION (state, connection) {
+         const editedConnections = state.connections.map(conn => {
+            if (conn.uid === connection.uid) return connection;
+            return conn;
+         });
+         state.connections = editedConnections;
+         state.selected_conection = {};
+      },
       UPDATE_CONNECTIONS (state, connections) {
          state.connections = connections;
       },
@@ -27,6 +38,13 @@ 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;
       }
    },
    actions: {
@@ -48,6 +66,12 @@ 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');
       }
    }
 };