Edit connection

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