From bd64e4a45b13804a4e3caf7af0d7bc7994baef55 Mon Sep 17 00:00:00 2001
From: vlad0337187 <naumovvladislav@mail.ru>
Date: Thu, 24 Oct 2019 13:46:18 +0300
Subject: [PATCH] refactor, fix: split 'components/collections/saveRequest.vue'
 to 'editRequest', 'saveRequestAs'; fix saving bugs

---
 components/collections/collection.vue    |  16 ++-
 components/collections/editRequest.vue   | 132 +++++++++++++++++++
 components/collections/folder.vue        |  15 ++-
 components/collections/index.vue         |  37 ++++++
 components/collections/request.vue       |  22 ++--
 components/collections/saveRequest.vue   | 158 -----------------------
 components/collections/saveRequestAs.vue | 158 +++++++++++++++++++++++
 pages/index.vue                          |   8 +-
 store/postwoman.js                       |  88 ++++++++++---
 9 files changed, 430 insertions(+), 204 deletions(-)
 create mode 100644 components/collections/editRequest.vue
 delete mode 100644 components/collections/saveRequest.vue
 create mode 100644 components/collections/saveRequestAs.vue

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index dd292aa2e..332d8d8fb 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -30,6 +30,7 @@
                         v-bind:folderIndex      = "index"
                         v-bind:collection-index = "collectionIndex"
                         v-on:edit-folder        = "editFolder(collectionIndex, folder, index)"
+                        v-on:edit-request       = "$emit('edit-request', $event)"
                     />
                 </li>
                 <li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
@@ -40,10 +41,11 @@
             <ul>
                 <li v-for="(request, index) in collection.requests" :key="index">
                     <request
-                        :request="request"
-                        :collection-index="collectionIndex"
-                        :folder-index="-1"
-                        :request-index="index"
+                        v-bind:request          = "request"
+                        v-bind:collection-index = "collectionIndex"
+                        v-bind:folder-index     = "-1"
+                        v-bind:request-index    = "index"
+                        v-on:edit-request       = "$emit('edit-request', { request, collectionIndex, folderIndex: undefined, requestIndex: index })"
                     ></request>
                 </li>
             </ul>
@@ -65,7 +67,7 @@
 </style>
 
 <script>
-import folder from './folder';
+import folder  from './folder';
 import request from './request';
 
 export default {
@@ -74,8 +76,8 @@ export default {
         request,
     },
     props: {
-        collectionIndex: Number,
-        collection: Object,
+        collectionIndex : Number,
+        collection      : Object,
     },
     data () {
         return {
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
new file mode 100644
index 000000000..cbcb5c35c
--- /dev/null
+++ b/components/collections/editRequest.vue
@@ -0,0 +1,132 @@
+<!--
+Made this component to be separate from `saveRequest` as it handles request editing
+only related to it's positioning and naming inside of collections.
+-->
+
+<template>
+    <div>
+        <modal v-if="show" @close="hideModal">
+            <div slot="header">
+                <ul>
+                    <li>
+                        <div class="flex-wrap">
+                            <h3 class="title">Edit Request</h3>
+                            <div>
+                              <button class="icon" @click="hideModal">
+                                <i class="material-icons">close</i>
+                              </button>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div slot="body">
+                <ul>
+                    <li>
+                        <input  type="text" v-model="requestUpdateData.name" v-bind:placeholder="request.name" />
+                        <select type="text" v-model="requestUpdateData.collectionIndex" >
+                            <option
+                                v-for="(collection, index) in $store.state.postwoman.collections"
+                                :key   = "index"
+                                :value = "index">
+                                {{ collection.name }}
+                            </option>
+                        </select>
+                        <select type="text" v-model="requestUpdateData.folderIndex">
+                            <option
+                                :key   = "undefined"
+                                :value = "undefined">
+                            </option>
+                            <option
+                                v-for="(folder, index) in folders"
+                                :key   = "index"
+                                :value = "index">
+                                {{ folder.name }}
+                            </option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
+            <div slot="footer">
+              <ul>
+                <li>
+                <button class="icon" @click="saveRequest">
+                  <i class="material-icons">save</i>
+                  <span>Save</span>
+                </button>
+                </li>
+              </ul>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show            : Boolean,
+        collectionIndex : Number,
+        folderIndex     : Number,
+        request         : Object,
+        requestIndex    : Number,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            requestUpdateData : {
+              name            : undefined,
+              collectionIndex : undefined,
+              folderIndex     : undefined,
+            },
+        }
+    },
+    watch: {
+      'requestUpdateData.collectionIndex': function resetFolderIndex() {
+        // if user choosen some folder, than selected other collection, which doesn't have any folders
+        // than `requestUpdateData.folderIndex` won't be reseted
+        this.$data.requestUpdateData.folderIndex = undefined
+      },
+    },
+    computed: {
+        folders() {
+            const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
+            if  (!userSelectedAnyCollection)  return []
+
+            return this.$store.state.postwoman.collections[this.$data.requestUpdateData.collectionIndex].folders
+        },
+    },
+    methods: {
+        saveRequest() {
+            const userSelectedAnyCollection = this.$data.requestUpdateData.collectionIndex !== undefined
+
+            const requestUpdated = {
+              ...this.$props.request,
+              name       : this.$data.requestUpdateData.name || this.$props.request.name,
+              collection : userSelectedAnyCollection ? this.$data.requestUpdateData.collectionIndex : this.$props.collectionIndex,
+              folder     : this.$data.requestUpdateData.folderIndex,
+            }
+
+            // pass data separately to don't depend on request's collection, folder fields
+            // probably, they should be deprecated because they don't describe request itself
+            this.$store.commit('postwoman/editRequest', {
+                requestOld                : this.$props.request,
+                requestOldCollectionIndex : this.$props.collectionIndex,
+                requestOldFolderIndex     : this.$props.folderIndex,
+                requestOldIndex           : this.$props.requestIndex,
+                requestNew                : requestUpdated,
+                requestNewCollectionIndex : requestUpdated.collection,
+                requestNewFolderIndex     : requestUpdated.folder,
+            });
+
+            this.hideModal()
+        },
+        hideModal() {
+            this.$emit('hide-modal')
+        },
+    },
+};
+</script>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index b6ea4d2ea..4bacf9830 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -23,10 +23,11 @@
             <ul>
                 <li v-for="(request, index) in folder.requests" :key="index">
                     <request
-                        :request="request"
-                        :collection-index="collectionIndex"
-                        :folder-index="folderIndex"
-                        :request-index="index"
+                        v-bind:request          = "request"
+                        v-bind:collection-index = "collectionIndex"
+                        v-bind:folder-index     = "folderIndex"
+                        v-bind:request-index    = "index"
+                        v-on:edit-request       = "$emit('edit-request', { request, collectionIndex, folderIndex, requestIndex: index })"
                     ></request>
                 </li>
                 <li v-if="folder.requests.length === 0">
@@ -55,9 +56,9 @@ import request from './request';
 
 export default {
     props: {
-        folder: Object,
-        collectionIndex: Number,
-        folderIndex: Number,
+        folder          : Object,
+        collectionIndex : Number,
+        folderIndex     : Number,
     },
     components: {
         request,
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 2320c91a9..2e44eba69 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,3 +1,8 @@
+<!--
+TODO:
+    - probably refactor and pass event arguments to modals directly without unpacking
+-->
+
 <template>
   <div class="collections-wrapper">
     <addCollection
@@ -28,6 +33,15 @@
         v-on:hide-modal        = 'displayModalEditFolder(false)'
     >
     </editFolder>
+    <editRequest
+        v-bind:show            = "showModalEditRequest"
+        v-bind:collectionIndex = "editingCollectionIndex"
+        v-bind:folderIndex     = "editingFolderIndex"
+        v-bind:request         = "editingRequest"
+        v-bind:requestIndex    = "editingRequestIndex"
+        v-on:hide-modal        = "displayModalEditRequest(false)"
+    >
+    </editRequest>
     <importExportCollections
         v-bind:show     = "showModalImportExport"
         v-on:hide-modal = 'displayModalImportExport(false)'
@@ -57,6 +71,7 @@
           v-on:edit-collection    = "editCollection(collection, index)"
           v-on:add-folder         = "addFolder(collection, index)"
           v-on:edit-folder        = "editFolder($event)"
+          v-on:edit-request       = "editRequest($event)"
           >
         </collection>
       </li>
@@ -80,6 +95,7 @@
   import collection              from './collection'
   import editCollection          from "./editCollection";
   import editFolder              from "./editFolder";
+  import editRequest             from "./editRequest";
   import importExportCollections from "./importExportCollections";
 
   export default {
@@ -89,6 +105,7 @@
       collection,
       editCollection,
       editFolder,
+      editRequest,
       importExportCollections,
     },
     data() {
@@ -98,10 +115,13 @@
         showModalImportExport  : false,
         showModalAddFolder     : false,
         showModalEditFolder    : false,
+        showModalEditRequest   : false,
         editingCollection      : undefined,
         editingCollectionIndex : undefined,
         editingFolder          : undefined,
         editingFolderIndex     : undefined,
+        editingRequest         : undefined,
+        editingRequestIndex    : undefined,
       }
     },
     computed: {
@@ -134,6 +154,12 @@
           if (!shouldDisplay)
             this.resetSelectedData()
       },
+      displayModalEditRequest(shouldDisplay) {
+          this.showModalEditRequest = shouldDisplay
+
+          if (!shouldDisplay)
+            this.resetSelectedData()
+      },
       editCollection(collection, collectionIndex) {
         this.$data.editingCollection      = collection
         this.$data.editingCollectionIndex = collectionIndex
@@ -152,11 +178,22 @@
         this.$data.editingFolderIndex     = folderIndex
         this.displayModalEditFolder(true)
       },
+      editRequest(payload) {
+        const { request, collectionIndex, folderIndex, requestIndex } = payload
+        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingFolderIndex     = folderIndex
+        this.$data.editingRequest         = request
+        this.$data.editingRequestIndex    = requestIndex
+        this.displayModalEditRequest(true)
+
+      },
       resetSelectedData() {
         this.$data.editingCollection      = undefined
         this.$data.editingCollectionIndex = undefined
         this.$data.editingFolder          = undefined
         this.$data.editingFolderIndex     = undefined
+        this.$data.editingRequest         = undefined
+        this.$data.editingRequestIndex    = undefined
       },
     },
   }
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 18f09b0ae..7cb150f5a 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -7,10 +7,10 @@
         </button>
       </div>
       <div>
-        <button class="icon" @click="removeRequest" v-tooltip="'Delete collection'">
+        <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
           <i class="material-icons">delete</i>
         </button>
-        <button class="icon" @click="editRequest" v-tooltip="'Edit request'">
+        <button class="icon" @click="$emit('edit-request')" v-tooltip="'Edit request'">
           <i class="material-icons">edit</i>
         </button>
       </div>
@@ -33,25 +33,21 @@
 <script>
 export default {
     props: {
-        request: Object,
-        collectionIndex: Number,
-        folderIndex: Number,
-        requestIndex: Number,
+        request         : Object,
+        collectionIndex : Number,
+        folderIndex     : Number,
+        requestIndex    : Number,
     },
     methods: {
         selectRequest() {
             this.$store.commit('postwoman/selectRequest', { request: this.request });
         },
-        editRequest() {
-            this.request.requestIndex = this.requestIndex;
-            this.$store.commit('postwoman/editRequest', { request: this.request });
-        },
         removeRequest() {
             if (!confirm("Are you sure you want to remove this request?")) return;
             this.$store.commit('postwoman/removeRequest', {
-                collectionIndex: this.collectionIndex,
-                folderIndex: this.folderIndex,
-                requestIndex: this.requestIndex,
+                collectionIndex : this.collectionIndex,
+                folderIndex     : this.folderIndex,
+                requestIndex    : this.requestIndex,
             });
         },
     },
diff --git a/components/collections/saveRequest.vue b/components/collections/saveRequest.vue
deleted file mode 100644
index dc2a764f7..000000000
--- a/components/collections/saveRequest.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-    <div>
-        <modal v-if="show" @close="hideModel">
-            <div slot="header">
-                <ul>
-                    <li>
-                        <div class="flex-wrap">
-                            <h3 class="title" v-if='!request.hasOwnProperty("requestIndex")'>New Request</h3>
-                            <h3 class="title" v-if='request.hasOwnProperty("requestIndex")'>Edit Request</h3>
-                            <div>
-                              <button class="icon" @click="hideModel">
-                                <i class="material-icons">close</i>
-                              </button>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div slot="body">
-                <ul>
-                    <li>
-                        <input type="text" v-model="request.name" placeholder="My New Request" />
-                        <select type="text" v-model="request.collection" >
-                            <option
-                                v-for="collection in collections"
-                                :key="collection.collectionIndex"
-                                :value="collection.collectionIndex">
-                                {{ collection.name }}
-                            </option>
-                        </select>
-                        <select type="text" v-model="request.folder" >
-                            <option
-                                v-for="folder in folders"
-                                :key="folder.folderIndex"
-                                :value="folder.folderIndex">
-                                {{ folder.name }}
-                            </option>
-                        </select>
-                    </li>
-                </ul>
-            </div>
-            <div slot="footer">
-              <ul>
-                <li>
-                <button class="icon" @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>
-                  <i class="material-icons">add</i>
-                  <span>Create</span>
-                </button>
-                <button class="icon" @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>
-                  <i class="material-icons">save</i>
-                  <span>Save</span>
-                </button>
-                </li>
-              </ul>
-            </div>
-        </modal>
-    </div>
-</template>
-
-<script>
-import modal from "../../components/modal";
-
-export default {
-    props: {
-        show: Boolean,
-        editingRequest: Object,
-    },
-    components: {
-        modal,
-    },
-    data() {
-        return {
-            request: {
-                name: '',
-                collection: '',
-                folder: -1,
-            },
-        }
-    },
-    watch: {
-        show() {
-            this.request = Object.assign(this.request, this.editingRequest);
-        },
-        'request.collection': function (newValue, oldValue) {
-            if (!oldValue) return;
-
-            if (newValue === oldValue) {
-                delete this.request.oldCollection;
-                return;
-            }
-            this.request.oldFolder = this.request.folder;
-            this.request.folder = -1;
-            this.request.oldCollection = oldValue;
-        },
-        'request.folder': function (newValue, oldValue) {
-            if (!oldValue) return;
-
-            if (newValue === oldValue) {
-                delete this.request.oldFolder;
-                return;
-            }
-            this.request.oldFolder = oldValue;
-        }
-    },
-    computed: {
-        collections() {
-            return this.$store.state.postwoman.collections
-                .map((collection, index) => {
-                    return {
-                        name: collection.name,
-                        collectionIndex: index,
-                    };
-                });
-        },
-        folders() {
-            if (this.request.collection === '') return []
-            return this.$store.state.postwoman.collections[this.request.collection].folders
-                .map((folder, index) => {
-                    return {
-                        name: folder.name,
-                        folderIndex: index,
-                    };
-                });
-        }
-    },
-    methods: {
-        addRequest() {
-            const request = Object.assign({}, this.request);
-            this.$store.commit('postwoman/addRequest', {
-                request,
-            });
-            this.request = {
-                name: '',
-                collection: '',
-                folder: '',
-            };
-            this.hideModel();
-        },
-        saveRequest() {
-            const savedRequest = Object.assign({}, this.request);
-
-            this.$store.commit('postwoman/saveRequest', {
-                request: savedRequest,
-            });
-
-            this.request = {
-                name: '',
-                collection: '',
-                folder: '',
-            };
-            this.hideModel();
-        },
-        hideModel() {
-            this.$emit('hide-model');
-        },
-    },
-};
-</script>
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
new file mode 100644
index 000000000..de90f8b53
--- /dev/null
+++ b/components/collections/saveRequestAs.vue
@@ -0,0 +1,158 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModal">
+            <div slot="header">
+                <ul>
+                    <li>
+                        <div class="flex-wrap">
+                            <h3 class="title">Save Request As</h3>
+                            <div>
+                              <button class="icon" @click="hideModal">
+                                <i class="material-icons">close</i>
+                              </button>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div slot="body">
+                <ul>
+                    <li>
+                        <input  type="text" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
+                        <select type="text" v-model="requestData.collectionIndex" >
+                            <option
+                                v-for="(collection, index) in $store.state.postwoman.collections"
+                                :key   = "index"
+                                :value = "index">
+                                {{ collection.name }}
+                            </option>
+                        </select>
+                        <select type="text" v-model="requestData.folderIndex" >
+                            <option
+                                :key   = "undefined"
+                                :value = "undefined">
+                            </option>
+                            <option
+                                v-for="(folder, index) in folders"
+                                :key   = "index"
+                                :value = "index">
+                                {{ folder.name }}
+                            </option>
+                        </select>
+                        <select type="text" v-model="requestData.requestIndex" >
+                            <option
+                                :key   = "undefined"
+                                :value = "undefined">
+                            </option>
+                            <option
+                                v-for  ="(folder, index) in requests"
+                                :key   = "index"
+                                :value = "index">
+                                {{ folder.name }}
+                            </option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
+            <div slot="footer">
+              <ul>
+                <li>
+                <button class="icon" @click="saveRequestAs">
+                  <i class="material-icons">save</i>
+                  <span>Save</span>
+                </button>
+                </li>
+              </ul>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show           : Boolean,
+        editingRequest : Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            defaultRequestName : 'My New Request',
+            requestData        : {
+                name            : undefined,
+                collectionIndex : undefined,
+                folderIndex     : undefined,
+                requestIndex    : undefined,
+            },
+        }
+    },
+    watch: {
+        'requestData.collectionIndex': function resetFolderAndRequestIndex() {
+          // if user choosen some folder, than selected other collection, which doesn't have any folders
+          // than `requestUpdateData.folderIndex` won't be reseted
+          this.$data.requestData.folderIndex  = undefined
+          this.$data.requestData.requestIndex = undefined
+        },
+        'requestData.folderIndex': function resetRequestIndex() {
+          this.$data.requestData.requestIndex = undefined
+        },
+    },
+    computed: {
+        folders() {
+            const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+            if  (!userSelectedAnyCollection)  return []
+
+            return this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex].folders
+        },
+        requests() {
+            const userSelectedAnyCollection = this.$data.requestData.collectionIndex !== undefined
+            if  (!userSelectedAnyCollection)  return []
+
+            const userSelectedAnyFolder = this.$data.requestData.folderIndex !== undefined
+            if   (userSelectedAnyFolder) {
+              const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
+              const folder     = collection.folders[this.$data.requestData.folderIndex]
+              const requests   = folder.requests
+              return requests
+            }
+            else {
+              const collection = this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex]
+              const requests   = collection.requests
+              return requests
+            }
+        }
+    },
+    methods: {
+        saveRequestAs() {
+            const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
+            if   (userDidntSpecifyCollection) {
+                this.$toast.error('please, specify collection first', { icon: 'error' })
+                return
+            }
+
+            const requestUpdated = {
+              ...this.$props.editingRequest,
+              name       : this.$data.requestData.name || this.$data.defaultRequestName,
+              collection : this.$data.requestData.collectionIndex,
+            }
+
+            this.$store.commit('postwoman/saveRequestAs', {
+                request         : requestUpdated,
+                collectionIndex : this.$data.requestData.collectionIndex,
+                folderIndex     : this.$data.requestData.folderIndex,
+                requestIndex    : this.$data.requestData.requestIndex,
+            });
+
+            this.hideModal();
+        },
+        hideModal() {
+            this.$emit('hide-modal');
+            this.$emit('hide-model');  // for backward compatibility  // TODO: use fixed event
+        },
+    },
+};
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 22206f5df..2e3eca26d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="page">
-    <save-request
+    <save-request-as
       v-bind:show="showRequestModal"
       v-on:hide-model='hideRequestModal'
       v-bind:editing-request='editRequest'
-    ></save-request>
+    ></save-request-as>
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -364,7 +364,7 @@
   import toggle from "../components/toggle";
   import modal from "../components/modal";
   import collections from '../components/collections';
-  import saveRequest from '../components/collections/saveRequest';
+  import saveRequestAs from '../components/collections/saveRequestAs';
   import parseCurlCommand from '../assets/js/curlparser.js';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/dracula.css';
@@ -428,7 +428,7 @@
       history,
       autocomplete,
       collections,
-      saveRequest,
+      saveRequestAs,
     },
     data() {
       return {
diff --git a/store/postwoman.js b/store/postwoman.js
index 572a16862..b8ecb2391 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 export const SETTINGS_KEYS = [
     /**
      * The CSS class that should be applied to the root element.
@@ -42,14 +44,14 @@ export const SETTINGS_KEYS = [
 ];
 
 export const state = () => ({
-    settings: {},
-    collections: [{
-        name: 'My First Collection',
-        folders: [],
-        requests: [],
+    settings        : {},
+    collections     : [{
+        name     : 'My First Collection',
+        folders  : [],
+        requests : [],
     }],
-    selectedRequest: {},
-    editingRequest: {},
+    selectedRequest : {},
+    editingRequest  : {},
 });
 
 export const mutations = {
@@ -112,8 +114,7 @@ export const mutations = {
 
     editFolder (state, payload) {
         const { collectionIndex, folder, folderIndex } = payload;
-        state.collections[collectionIndex].folders[folderIndex] = folder;
-        state.collections[collectionIndex].folders = [...state.collections[collectionIndex].folders]  // mark updated
+        Vue.set(state.collections[collectionIndex].folders, folderIndex, folder)
     },
 
     removeFolder (state, payload) {
@@ -133,6 +134,67 @@ export const mutations = {
         state.collections[request.collection].folders[request.folder].requests.push(request);
     },
 
+    editRequest (state, payload) {
+        const {
+            requestOld,
+            requestOldCollectionIndex,
+            requestOldFolderIndex,
+            requestOldIndex,
+            requestNew,
+            requestNewCollectionIndex,
+            requestNewFolderIndex,
+        } = payload
+
+        const changedCollection = requestOldCollectionIndex !== requestNewCollectionIndex
+        const changedFolder     = requestOldFolderIndex     !== requestNewFolderIndex
+        const changedPlace      = changedCollection || changedFolder
+
+        // set new request
+        if (requestNewFolderIndex !== undefined)
+            Vue.set(state.collections[requestNewCollectionIndex].folders[requestNewFolderIndex].requests, requestOldIndex, requestNew)
+        else
+            Vue.set(state.collections[requestNewCollectionIndex].requests, requestOldIndex, requestNew)
+
+        // remove old request
+        if (changedPlace) {
+            if (requestOldFolderIndex !== undefined)
+                state.collections[requestOldCollectionIndex].folders[requestOldFolderIndex].requests.splice(requestOldIndex, 1)
+            else
+                state.collections[requestOldCollectionIndex].requests.splice(requestOldIndex, 1)
+        }
+    },
+
+    saveRequestAs (state, payload) {
+        const {
+            request,
+            collectionIndex,
+            folderIndex,
+            requestIndex,
+        } = payload
+
+        const specifiedCollection = collectionIndex !== undefined
+        const specifiedFolder     = folderIndex     !== undefined
+        const specifiedRequest    = requestIndex    !== undefined
+
+        if      (specifiedCollection && specifiedFolder && specifiedRequest)
+            Vue.set(state.collections[collectionIndex].folders[folderIndex].requests, requestIndex, request)
+        else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
+            const requests         = state.collections[collectionIndex].folders[folderIndex].requests
+            const lastRequestIndex = requests.length - 1;
+            Vue.set(requests, lastRequestIndex + 1, request)
+        }
+        else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
+            const requests         = state.collections[collectionIndex].requests
+            Vue.set(requests,requestIndex, request)
+        }
+        else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
+            const requests         = state.collections[collectionIndex].requests
+            const lastRequestIndex = requests.length - 1;
+            Vue.set(requests, lastRequestIndex + 1, request)
+        }
+
+    },
+
     saveRequest (state, payload) {
         const { request } = payload;
 
@@ -153,11 +215,11 @@ export const mutations = {
 
         // Request that is directly attached to collection
         if (request.folder === -1) {
-            state.collections[request.collection].requests[request.requestIndex] = request;
+            Vue.set(state.collections[request.collection].requests, request.requestIndex, request)
             return
         }
 
-        state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
+        Vue.set(state.collections[request.collection].folders[request.folder].requests, request.requestIndex, request)
     },
 
     removeRequest (state, payload) {
@@ -176,8 +238,4 @@ export const mutations = {
         state.selectedRequest = Object.assign({}, payload.request);
     },
 
-    editRequest (state, payload) {
-        state.editingRequest = Object.assign({}, payload.request);
-    },
-
 };