From 770556aa7461a4887a8f3329d78d9bab76eda02a Mon Sep 17 00:00:00 2001
From: vlad0337187 <naumovvladislav@mail.ru>
Date: Wed, 23 Oct 2019 23:10:46 +0300
Subject: [PATCH 1/4] feature: allow importing collections from local JSON
 files

---
 ...ection.vue => importExportCollections.vue} | 40 ++++++++++++++++++-
 components/collections/index.vue              | 16 ++++----
 store/postwoman.js                            | 12 +++++-
 3 files changed, 57 insertions(+), 11 deletions(-)
 rename components/collections/{exportCollection.vue => importExportCollections.vue} (51%)

diff --git a/components/collections/exportCollection.vue b/components/collections/importExportCollections.vue
similarity index 51%
rename from components/collections/exportCollection.vue
rename to components/collections/importExportCollections.vue
index c0291eaa9..167f0b8f6 100644
--- a/components/collections/exportCollection.vue
+++ b/components/collections/importExportCollections.vue
@@ -5,7 +5,7 @@
             <ul>
                 <li>
                 <div class="flex-wrap">
-                    <h3 class="title">Export Collections</h3>
+                    <h3 class="title">Import / Export Collections</h3>
                     <div>
                     <button class="icon" @click="hideModel">
                         <i class="material-icons">close</i>
@@ -21,6 +21,20 @@
             </div>
             <div slot="footer">
               <ul>
+                <li>
+                <button class="icon" @click="openDialogChooseFileToReplaceWith">
+                  <i class="material-icons">get_app</i>
+                  <span>Replace with JSON</span>
+                  <input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
+                </button>
+                </li>
+                <li>
+                <button class="icon" @click="openDialogChooseFileToImportFrom">
+                  <i class="material-icons">get_app</i>
+                  <span>Import from JSON</span>
+                  <input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
+                </button>
+                </li>
                 <li>
                 <button class="icon" @click="exportJSON">
                   <i class="material-icons">get_app</i>
@@ -52,6 +66,30 @@ export default {
         hideModel() {
             this.$emit('hide-model');
         },
+        openDialogChooseFileToReplaceWith() {
+          this.$refs.inputChooseFileToReplaceWith.click();
+        },
+        openDialogChooseFileToImportFrom() {
+          this.$refs.inputChooseFileToImportFrom.click();
+        },
+        replaceWithJSON() {
+          let reader = new FileReader();
+          reader.onload = (event) => {
+            let content = event.target.result;
+            let collections = JSON.parse(content);
+            this.$store.commit('postwoman/replaceCollections', collections);
+          };
+          reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+        },
+        importFromJSON() {
+          let reader = new FileReader();
+          reader.onload = (event) => {
+            let content = event.target.result;
+            let collections = JSON.parse(content);
+            this.$store.commit('postwoman/importCollections', collections);
+          };
+          reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+        },
         exportJSON() {
           let text = this.collectionJson;
           text = text.replace(/\n/g, '\r\n');
diff --git a/components/collections/index.vue b/components/collections/index.vue
index af19b0b37..dace20ee2 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -9,7 +9,7 @@
       >
     </addCollection>
 
-    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+    <importExportCollections :show="showImportExportModal" v-on:hide-model='toggleImportExport'></importExportCollections>
 
     <div class='flex-wrap'>
       <div>
@@ -19,9 +19,9 @@
         </button>
       </div>
       <div>
-        <button class="icon" @click="toggleExport">
+        <button class="icon" @click="toggleImportExport">
           <i class="material-icons">import_export</i>
-          <span>Export</span>
+          <span>Import / Export</span>
         </button>
       </div>
     </div>
@@ -50,19 +50,19 @@
 
 <script>
   import addCollection from "./addCollection";
-  import exportCollection from "./exportCollection";
+  import importExportCollections from "./importExportCollections";
   import collection from './collection'
 
   export default {
     components: {
       collection,
       addCollection,
-      exportCollection,
+      importExportCollections,
     },
     data() {
       return {
         showAddModel: false,
-        showExportModal: false,
+        showImportExportModal: false,
         selectedCollection: {},
       }
     },
@@ -75,8 +75,8 @@
       toggleModal() {
         this.showAddModel = !this.showAddModel;
       },
-      toggleExport() {
-        this.showExportModal = !this.showExportModal;
+      toggleImportExport() {
+        this.showImportExportModal = !this.showImportExportModal;
       },
       addNewCollection(newCollection) {
         this.$store.commit('postwoman/addCollection', newCollection);
diff --git a/store/postwoman.js b/store/postwoman.js
index 2f021683d..d433f6b46 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -68,6 +68,14 @@ export const mutations = {
         state.settings[key] = value;
     },
 
+    replaceCollections (state, collections) {
+        state.collections = collections;
+    },
+
+    importCollections (state, collections) {
+        state.collections = [...state.collections, ...collections];
+    },
+
     addCollection (state, newCollection) {
         state.collections.push(newCollection);
     },
@@ -99,7 +107,7 @@ export const mutations = {
 
     addRequest (state, payload) {
         const { request } = payload;
-        
+
         // Request that is directly attached to collection
         if (request.folder === -1) {
             state.collections[request.collection].requests.push(request);
@@ -126,7 +134,7 @@ export const mutations = {
 
         delete request.oldCollection;
         delete request.oldFolder;
-        
+
         // Request that is directly attached to collection
         if (request.folder === -1) {
             state.collections[request.collection].requests[request.requestIndex] = request;

From 932b92e67d326af18f35d34fe17b979ae95981c8 Mon Sep 17 00:00:00 2001
From: vlad0337187 <naumovvladislav@mail.ru>
Date: Thu, 24 Oct 2019 02:38:01 +0300
Subject: [PATCH 2/4] refactor: split
 'components/collections/addCollection.vue' to 'addCollection',
 'editCollection'

---
 components/collections/addCollection.vue      | 50 +++-----------
 components/collections/editCollection.vue     | 67 +++++++++++++++++++
 .../collections/importExportCollections.vue   |  2 +-
 components/collections/index.vue              | 65 ++++++++++--------
 store/postwoman.js                            | 21 ++++--
 5 files changed, 130 insertions(+), 75 deletions(-)
 create mode 100644 components/collections/editCollection.vue

diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 5552de5a0..1d10775e3 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -1,14 +1,13 @@
 <template>
     <div>
-        <modal v-if="show" @close="hideModel">
+        <modal v-if="show" @close="hideModal">
             <div slot="header">
             <ul>
                 <li>
                 <div class="flex-wrap">
-                  <h3 class="title" v-if='!newCollection.hasOwnProperty("collectionIndex")'>New Collection</h3>
-                  <h3 class="title" v-if='newCollection.hasOwnProperty("collectionIndex")'>Edit Collection</h3>
+                  <h3 class="title">New Collection</h3>
                   <div>
-                    <button class="icon" @click="hideModel" >
+                    <button class="icon" @click="hideModal" >
                         <i class="material-icons">close</i>
                     </button>
                   </div>
@@ -19,21 +18,17 @@
             <div slot="body">
             <ul>
                 <li>
-                  <input type="text" v-model="newCollection.name" placeholder="My New Collection" />
+                  <input type="text" v-model="name" placeholder="My New Collection" />
                 </li>
             </ul>
             </div>
             <div slot="footer">
               <ul>
                 <li>
-                  <button class="icon" @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>
+                  <button class="icon" @click="addNewCollection">
                     <i class="material-icons">add</i>
                     <span>Create</span>
                   </button>
-                  <button class="icon" @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>
-                    <i class="material-icons">save</i>
-                    <span>Save</span>
-                  </button>
                 </li>
               </ul>
             </div>
@@ -47,47 +42,22 @@ import modal from "../../components/modal";
 export default {
     props: {
         show: Boolean,
-        editingCollection: Object,
     },
     components: {
         modal,
     },
     data() {
         return {
-            newCollection: {
-                name: '',
-                folders: [],
-                requests: [],
-            },
+          name: undefined,
         }
     },
-    watch: {
-        show() {
-            if (!this.editingCollection.collectionIndex) return;
-            this.newCollection = Object.assign({}, this.editingCollection);
-        },
-    },
     methods: {
         addNewCollection() {
-            const newCollection = Object.assign({}, this.newCollection);
-            this.$emit('new-collection', newCollection);
-            this.newCollection = {
-                name: '',
-                folders: [],
-                requests: [],
-            };
+            this.$store.commit('postwoman/addNewCollection', { name: this.$data.name })
+            this.$emit('hide-modal')
         },
-        saveCollection() {
-            const savedCollection = Object.assign({}, this.newCollection);
-            this.$emit('saved-collection', savedCollection);
-            this.newCollection = {
-                name: '',
-                folders: [],
-                requests: [],
-            };
-        },
-        hideModel() {
-            this.$emit('hide-model');
+        hideModal() {
+            this.$emit('hide-modal')
         },
     },
 };
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
new file mode 100644
index 000000000..1ad723491
--- /dev/null
+++ b/components/collections/editCollection.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot='header'>
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                  <h3 class="title">Edit Collection</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="name" v-bind:placeholder="editingCollection.name" />
+                </li>
+            </ul>
+            </div>
+            <div slot="footer">
+              <ul>
+                <li>
+                  <button class="icon" @click="saveCollection">
+                    <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,
+        editingCollection: Object,
+        editingCollectionIndex: Number,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+          name: undefined,
+        }
+    },
+    methods: {
+        saveCollection() {
+            const collectionUpdated = { ...this.$props.editingCollection, name: this.$data.name }
+            this.$store.commit('postwoman/editCollection', { collection: collectionUpdated, collectionIndex: this.$props.editingCollectionIndex })
+            this.$emit('hide-modal');
+        },
+        hideModel() {
+            this.$emit('hide-modal');
+        },
+    },
+};
+</script>
diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue
index 167f0b8f6..5e57518a7 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -64,7 +64,7 @@ export default {
     },
     methods: {
         hideModel() {
-            this.$emit('hide-model');
+            this.$emit('hide-modal');
         },
         openDialogChooseFileToReplaceWith() {
           this.$refs.inputChooseFileToReplaceWith.click();
diff --git a/components/collections/index.vue b/components/collections/index.vue
index dace20ee2..e9417b779 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,25 +1,29 @@
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showAddModel"
-      v-on:new-collection="addNewCollection"
-      v-on:hide-model='toggleModal'
-      v-bind:editing-collection="selectedCollection"
-      v-on:saved-collection="savedCollection"
+      v-bind:show="showModalAdd"
+      v-on:hide-modal='displayModalAdd(false)'
       >
     </addCollection>
+    <editCollection
+      v-bind:show="showModalEdit"
+      v-bind:editingCollection="editingCollection"
+      v-bind:editingCollectionIndex="editingCollectionIndex"
+      v-on:hide-modal='displayModalEdit(false)'
+      >
+    </editCollection>
 
-    <importExportCollections :show="showImportExportModal" v-on:hide-model='toggleImportExport'></importExportCollections>
+    <importExportCollections :show="showModalImportExport" v-on:hide-modal='displayImportExport(false)'></importExportCollections>
 
     <div class='flex-wrap'>
       <div>
-        <button class="icon" @click="toggleModal">
+        <button class="icon" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
           <span>New</span>
         </button>
       </div>
       <div>
-        <button class="icon" @click="toggleImportExport">
+        <button class="icon" @click="displayImportExport(true)">
           <i class="material-icons">import_export</i>
           <span>Import / Export</span>
         </button>
@@ -31,7 +35,7 @@
         <collection
           :collection-index="index"
           :collection="collection"
-          v-on:edit-collection="editCollection"
+          v-on:edit-collection="editCollection(collection, index)"
           ></collection>
       </li>
       <li v-if="collections.length === 0">
@@ -50,6 +54,7 @@
 
 <script>
   import addCollection from "./addCollection";
+  import editCollection from "./editCollection";
   import importExportCollections from "./importExportCollections";
   import collection from './collection'
 
@@ -57,40 +62,42 @@
     components: {
       collection,
       addCollection,
+      editCollection,
       importExportCollections,
     },
     data() {
       return {
-        showAddModel: false,
-        showImportExportModal: false,
-        selectedCollection: {},
+        showModalAdd: false,
+        showModalEdit: false,
+        showModalImportExport: false,
+        editingCollection: undefined,
+        editingCollectionIndex: undefined,
       }
     },
     computed: {
       collections () {
-        return this.$store.state.postwoman.collections;
+        return this.$store.state.postwoman.collections
       }
     },
     methods: {
-      toggleModal() {
-        this.showAddModel = !this.showAddModel;
+      displayModalAdd(shouldDisplay) {
+        this.showModalAdd = shouldDisplay
       },
-      toggleImportExport() {
-        this.showImportExportModal = !this.showImportExportModal;
+      displayModalEdit(shouldDisplay) {
+        this.showModalEdit = shouldDisplay
+
+        if (!shouldDisplay) {
+          this.$data.editingCollection = undefined
+          this.$data.editingCollectionIndex = undefined
+        }
       },
-      addNewCollection(newCollection) {
-        this.$store.commit('postwoman/addCollection', newCollection);
-        this.showAddModel = false;
+      displayImportExport(shouldDisplay) {
+        this.showModalImportExport = shouldDisplay
       },
-      editCollection(payload) {
-        const { collection, collectionIndex } = payload;
-        this.selectedCollection = Object.assign({ collectionIndex }, collection);
-        this.showAddModel = true;
-      },
-      savedCollection(savedCollection) {
-        this.$store.commit('postwoman/saveCollection', { savedCollection });
-        this.showAddModel = false;
-        this.selectedCollection = {};
+      editCollection(collection, collectionIndex) {
+        this.$data.editingCollection = collection
+        this.$data.editingCollectionIndex = collectionIndex
+        this.displayModalEdit(true)
       },
     },
   }
diff --git a/store/postwoman.js b/store/postwoman.js
index d433f6b46..f831d612c 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -74,10 +74,21 @@ export const mutations = {
 
     importCollections (state, collections) {
         state.collections = [...state.collections, ...collections];
+
+        let index = 0;
+        for (let collection of collections) {
+            collection.collectionIndex = index;
+            index += 1;
+        }
     },
 
-    addCollection (state, newCollection) {
-        state.collections.push(newCollection);
+    addNewCollection (state, collection) {
+        state.collections.push({
+            name: '',
+            folders: [],
+            requests: [],
+            ...collection,
+        })
     },
 
     removeCollection (state, payload) {
@@ -85,9 +96,9 @@ export const mutations = {
         state.collections.splice(collectionIndex, 1)
     },
 
-    saveCollection (state, payload) {
-        const { savedCollection } = payload;
-        state.collections[savedCollection.collectionIndex] = savedCollection;
+    editCollection (state, payload) {
+        const { collection, collectionIndex } = payload
+        state.collections[collectionIndex] = collection
     },
 
     addFolder (state, payload) {

From 3743ff96ff863c706224a6bf554f3918eaff5c83 Mon Sep 17 00:00:00 2001
From: vlad0337187 <naumovvladislav@mail.ru>
Date: Thu, 24 Oct 2019 05:15:55 +0300
Subject: [PATCH 3/4] refactor: split 'components/collections/addFolder.vue' to
 'addFolder', 'editFolder'

---
 components/collections/addFolder.vue      |  49 +++------
 components/collections/collection.vue     |  55 ++---------
 components/collections/editCollection.vue |   6 +-
 components/collections/editFolder.vue     |  70 +++++++++++++
 components/collections/folder.vue         |   6 +-
 components/collections/index.vue          | 115 ++++++++++++++++------
 store/postwoman.js                        |  27 ++---
 7 files changed, 199 insertions(+), 129 deletions(-)
 create mode 100644 components/collections/editFolder.vue

diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index 8d7d092e1..bc70f87d4 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -4,10 +4,9 @@
             <ul>
             <li>
               <div class="flex-wrap">
-                <h3 class="title" v-if='!newFolder.hasOwnProperty("folderIndex")'>New Folder</h3>
-                <h3 class="title" v-if='newFolder.hasOwnProperty("folderIndex")'>Edit Folder</h3>
+                <h3 class="title">New Folder</h3>
                 <div>
-                  <button class="icon" @click="hideModel">
+                  <button class="icon" @click="hideModal">
                   <i class="material-icons">close</i>
                   </button>
                 </div>
@@ -18,21 +17,17 @@
         <div slot="body">
             <ul>
             <li>
-                <input type="text" v-model="newFolder.name" placeholder="My New Folder" />
+                <input type="text" v-model="name" placeholder="My New Folder" />
             </li>
             </ul>
         </div>
         <div slot="footer">
           <ul>
             <li>
-            <button class="icon" @click="addNewFolder" v-if='!newFolder.hasOwnProperty("folderIndex")'>
+            <button class="icon" @click="addNewFolder">
               <i class="material-icons">add</i>
               <span>Create</span>
             </button>
-            <button class="icon" @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>
-              <i class="material-icons">save</i>
-              <span>Save</span>
-            </button>
             </li>
           </ul>
         </div>
@@ -44,45 +39,25 @@ import modal from "../../components/modal";
 
 export default {
     props: {
-        show: Boolean,
-        editingFolder: Object,
+        show            : Boolean,
+        collection      : Object,
+        collectionIndex : Number,
     },
     components: {
         modal,
     },
     data() {
         return {
-            newFolder: {
-                name: '',
-                requests: [],
-            },
+            name: undefined,
         }
     },
-    watch: {
-        show() {
-            if (!this.editingFolder.folderIndex) return;
-            this.newFolder = Object.assign({}, this.editingFolder);
-        },
-    },
     methods: {
         addNewFolder() {
-            const newFolder = Object.assign({}, this.newFolder);
-            this.$emit('new-folder', newFolder);
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
+            this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
+            this.hideModal()
         },
-        saveFolder() {
-            const savedFolder = Object.assign({}, this.newFolder);
-            this.$emit('saved-folder', savedFolder);
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
-        },
-        hideModel() {
-            this.$emit('hide-model');
+        hideModal() {
+            this.$emit('hide-modal')
         },
     },
 };
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 21fbafef6..dd292aa2e 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -1,14 +1,5 @@
 <template>
     <div>
-        <addFolder
-            v-bind:show="showModal"
-            v-on:new-folder="addNewFolder"
-            v-on:hide-model='toggleModal'
-            v-bind:editing-folder="selectedFolder"
-            v-on:saved-folder="savedFolder"
-        >
-        </addFolder>
-
         <div class="flex-wrap">
           <div>
             <button class="icon" @click="toggleShowChildren">
@@ -22,10 +13,10 @@
             <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
               <i class="material-icons">delete</i>
             </button>
-            <button class="icon" @click="editCollection" v-tooltip="'Edit collection'">
+            <button class="icon" @click="$emit('edit-collection')" v-tooltip="'Edit collection'">
               <i class="material-icons">create</i>
             </button>
-            <button class="icon" @click="toggleModal" v-tooltip="'New Folder'">
+            <button class="icon" @click="$emit('add-folder')" v-tooltip="'New Folder'">
               <i class="material-icons">create_new_folder</i>
             </button>
           </div>
@@ -35,10 +26,10 @@
             <ul>
                 <li v-for="(folder, index) in collection.folders" :key="folder.name">
                     <folder
-                        :folder="folder"
-                        :folderIndex="index"
-                        :collection-index="collectionIndex"
-                        v-on:edit-folder="editFolder"
+                        v-bind:folder           = "folder"
+                        v-bind:folderIndex      = "index"
+                        v-bind:collection-index = "collectionIndex"
+                        v-on:edit-folder        = "editFolder(collectionIndex, folder, index)"
                     />
                 </li>
                 <li v-if="(collection.folders.length === 0) && (collection.requests.length === 0)">
@@ -75,13 +66,11 @@
 
 <script>
 import folder from './folder';
-import addFolder from "./addFolder";
 import request from './request';
 
 export default {
     components: {
         folder,
-        addFolder,
         request,
     },
     props: {
@@ -90,46 +79,22 @@ export default {
     },
     data () {
         return {
-            showChildren: false,
-            showModal: false,
-            selectedFolder: {},
+            showChildren   : false,
+            selectedFolder : {},
         };
     },
     methods: {
         toggleShowChildren() {
             this.showChildren = !this.showChildren;
         },
-        toggleModal() {
-            this.showModal = !this.showModal;
-        },
-        addNewFolder(newFolder) {
-            this.$store.commit('postwoman/addFolder', {
-                collectionIndex: this.collectionIndex,
-                folder: newFolder,
-            });
-            this.showModal = false;
-        },
-        editCollection() {
-            this.$emit('edit-collection', {
-                collectionIndex: this.collectionIndex,
-                collection: this.collection,
-            });
-        },
         removeCollection() {
             if (!confirm("Are you sure you want to remove this collection?")) return;
             this.$store.commit('postwoman/removeCollection', {
                 collectionIndex: this.collectionIndex,
             });
         },
-        editFolder(payload) {
-            const { folder, collectionIndex, folderIndex } = payload;
-            this.selectedFolder = Object.assign({ collectionIndex, folderIndex }, folder);
-            this.showModal = true;
-        },
-        savedFolder(savedFolder) {
-            this.$store.commit('postwoman/saveFolder', { savedFolder });
-            this.showModal = false;
-            this.selectedFolder = {};
+        editFolder(collectionIndex, folder, folderIndex) {
+            this.$emit('edit-folder', { collectionIndex, folder, folderIndex })
         },
     }
 };
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
index 1ad723491..5cf952a99 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -41,9 +41,9 @@ import modal from "../../components/modal";
 
 export default {
     props: {
-        show: Boolean,
-        editingCollection: Object,
-        editingCollectionIndex: Number,
+        show                   : Boolean,
+        editingCollection      : Object,
+        editingCollectionIndex : Number,
     },
     components: {
         modal,
diff --git a/components/collections/editFolder.vue b/components/collections/editFolder.vue
new file mode 100644
index 000000000..b0b94f2c8
--- /dev/null
+++ b/components/collections/editFolder.vue
@@ -0,0 +1,70 @@
+<template>
+    <modal v-if="show" @close="show = false">
+        <div slot="header">
+            <ul>
+            <li>
+              <div class="flex-wrap">
+                <h3 class="title">Edit Folder</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="name" v-bind:placeholder="folder.name" />
+            </li>
+            </ul>
+        </div>
+        <div slot="footer">
+          <ul>
+            <li>
+            <button class="icon" @click="editFolder">
+              <i class="material-icons">add</i>
+              <span>Save</span>
+            </button>
+            </li>
+          </ul>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show            : Boolean,
+        collection      : Object,
+        collectionIndex : Number,
+        folder          : Object,
+        folderIndex     : Number,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            name: undefined,
+        }
+    },
+    methods: {
+        editFolder() {
+            this.$store.commit('postwoman/editFolder', {
+              collectionIndex : this.$props.collectionIndex,
+              folder          : { ...this.$props.folder, name: this.$data.name },
+              folderIndex     : this.$props.folderIndex,
+            })
+            this.hideModal()
+        },
+        hideModal() {
+            this.$emit('hide-modal')
+        },
+    },
+};
+</script>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 93c9aa565..b6ea4d2ea 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -82,11 +82,7 @@ export default {
             });
         },
         editFolder() {
-            this.$emit('edit-folder', {
-                collectionIndex: this.collectionIndex,
-                folderIndex: this.folderIndex,
-                folder: this.folder,
-            });
+            this.$emit('edit-folder')
         },
     }
 };
diff --git a/components/collections/index.vue b/components/collections/index.vue
index e9417b779..2320c91a9 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,19 +1,38 @@
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showModalAdd"
-      v-on:hide-modal='displayModalAdd(false)'
+      v-bind:show     = "showModalAdd"
+      v-on:hide-modal = 'displayModalAdd(false)'
       >
     </addCollection>
     <editCollection
-      v-bind:show="showModalEdit"
-      v-bind:editingCollection="editingCollection"
-      v-bind:editingCollectionIndex="editingCollectionIndex"
-      v-on:hide-modal='displayModalEdit(false)'
+      v-bind:show                   = "showModalEdit"
+      v-bind:editingCollection      = "editingCollection"
+      v-bind:editingCollectionIndex = "editingCollectionIndex"
+      v-on:hide-modal               = 'displayModalEdit(false)'
       >
     </editCollection>
-
-    <importExportCollections :show="showModalImportExport" v-on:hide-modal='displayImportExport(false)'></importExportCollections>
+    <addFolder
+        v-bind:show            = "showModalAddFolder"
+        v-bind:collection      = "editingCollection"
+        v-bind:collectionIndex = "editingCollectionIndex"
+        v-on:hide-modal        = 'displayModalAddFolder(false)'
+    >
+    </addFolder>
+    <editFolder
+        v-bind:show            = "showModalEditFolder"
+        v-bind:collection      = "editingCollection"
+        v-bind:collectionIndex = "editingCollectionIndex"
+        v-bind:folder          = "editingFolder"
+        v-bind:folderIndex     = "editingFolderIndex"
+        v-on:hide-modal        = 'displayModalEditFolder(false)'
+    >
+    </editFolder>
+    <importExportCollections
+        v-bind:show     = "showModalImportExport"
+        v-on:hide-modal = 'displayModalImportExport(false)'
+        >
+    </importExportCollections>
 
     <div class='flex-wrap'>
       <div>
@@ -23,7 +42,7 @@
         </button>
       </div>
       <div>
-        <button class="icon" @click="displayImportExport(true)">
+        <button class="icon" @click="displayModalImportExport(true)">
           <i class="material-icons">import_export</i>
           <span>Import / Export</span>
         </button>
@@ -33,10 +52,13 @@
     <ul>
       <li v-for="(collection, index) in collections" :key="collection.name">
         <collection
-          :collection-index="index"
-          :collection="collection"
-          v-on:edit-collection="editCollection(collection, index)"
-          ></collection>
+          v-bind:collection-index = "index"
+          v-bind:collection       = "collection"
+          v-on:edit-collection    = "editCollection(collection, index)"
+          v-on:add-folder         = "addFolder(collection, index)"
+          v-on:edit-folder        = "editFolder($event)"
+          >
+        </collection>
       </li>
       <li v-if="collections.length === 0">
         <label>Collections are empty</label>
@@ -53,25 +75,33 @@
 </style>
 
 <script>
-  import addCollection from "./addCollection";
-  import editCollection from "./editCollection";
+  import addCollection           from "./addCollection";
+  import addFolder               from "./addFolder";
+  import collection              from './collection'
+  import editCollection          from "./editCollection";
+  import editFolder              from "./editFolder";
   import importExportCollections from "./importExportCollections";
-  import collection from './collection'
 
   export default {
     components: {
-      collection,
       addCollection,
+      addFolder,
+      collection,
       editCollection,
+      editFolder,
       importExportCollections,
     },
     data() {
       return {
-        showModalAdd: false,
-        showModalEdit: false,
-        showModalImportExport: false,
-        editingCollection: undefined,
-        editingCollectionIndex: undefined,
+        showModalAdd           : false,
+        showModalEdit          : false,
+        showModalImportExport  : false,
+        showModalAddFolder     : false,
+        showModalEditFolder    : false,
+        editingCollection      : undefined,
+        editingCollectionIndex : undefined,
+        editingFolder          : undefined,
+        editingFolderIndex     : undefined,
       }
     },
     computed: {
@@ -86,19 +116,48 @@
       displayModalEdit(shouldDisplay) {
         this.showModalEdit = shouldDisplay
 
-        if (!shouldDisplay) {
-          this.$data.editingCollection = undefined
-          this.$data.editingCollectionIndex = undefined
-        }
+        if (!shouldDisplay)
+          this.resetSelectedData()
       },
-      displayImportExport(shouldDisplay) {
+      displayModalImportExport(shouldDisplay) {
         this.showModalImportExport = shouldDisplay
       },
+      displayModalAddFolder(shouldDisplay) {
+          this.showModalAddFolder = shouldDisplay
+
+          if (!shouldDisplay)
+            this.resetSelectedData()
+      },
+      displayModalEditFolder(shouldDisplay) {
+          this.showModalEditFolder = shouldDisplay
+
+          if (!shouldDisplay)
+            this.resetSelectedData()
+      },
       editCollection(collection, collectionIndex) {
-        this.$data.editingCollection = collection
+        this.$data.editingCollection      = collection
         this.$data.editingCollectionIndex = collectionIndex
         this.displayModalEdit(true)
       },
+      addFolder(collection, collectionIndex) {
+        this.$data.editingCollection      = collection
+        this.$data.editingCollectionIndex = collectionIndex
+        this.displayModalAddFolder(true)
+      },
+      editFolder(payload) {
+        const { collectionIndex, folder, folderIndex } = payload
+        this.$data.editingCollection      = collection
+        this.$data.editingCollectionIndex = collectionIndex
+        this.$data.editingFolder          = folder
+        this.$data.editingFolderIndex     = folderIndex
+        this.displayModalEditFolder(true)
+      },
+      resetSelectedData() {
+        this.$data.editingCollection      = undefined
+        this.$data.editingCollectionIndex = undefined
+        this.$data.editingFolder          = undefined
+        this.$data.editingFolderIndex     = undefined
+      },
     },
   }
 
diff --git a/store/postwoman.js b/store/postwoman.js
index f831d612c..572a16862 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -84,9 +84,9 @@ export const mutations = {
 
     addNewCollection (state, collection) {
         state.collections.push({
-            name: '',
-            folders: [],
-            requests: [],
+            name     : '',
+            folders  : [],
+            requests : [],
             ...collection,
         })
     },
@@ -98,12 +98,22 @@ export const mutations = {
 
     editCollection (state, payload) {
         const { collection, collectionIndex } = payload
-        state.collections[collectionIndex] = collection
+        state.collections[collectionIndex]    = collection
     },
 
-    addFolder (state, payload) {
+    addNewFolder (state, payload) {
         const { collectionIndex, folder } = payload;
-        state.collections[collectionIndex].folders.push(folder);
+        state.collections[collectionIndex].folders.push({
+            name     : '',
+            requests : [],
+            ...folder,
+        });
+    },
+
+    editFolder (state, payload) {
+        const { collectionIndex, folder, folderIndex } = payload;
+        state.collections[collectionIndex].folders[folderIndex] = folder;
+        state.collections[collectionIndex].folders = [...state.collections[collectionIndex].folders]  // mark updated
     },
 
     removeFolder (state, payload) {
@@ -111,11 +121,6 @@ export const mutations = {
         state.collections[collectionIndex].folders.splice(folderIndex, 1)
     },
 
-    saveFolder (state, payload) {
-        const { savedFolder } = payload;
-        state.collections[savedFolder.collectionIndex].folders[savedFolder.folderIndex] = savedFolder;
-    },
-
     addRequest (state, payload) {
         const { request } = payload;
 

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 4/4] 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);
-    },
-
 };