Added edit folder.

components/collections/addFolder.vue

@@ -4,7 +4,8 @@
             <ul>
             <li>
                 <div class="flex-wrap">
-                <h3 class="title">Add New Folder</h3>
+                <h3 class="title" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add New Folder</h3>
+                <h3 class="title" v-if='newFolder.hasOwnProperty("folderIndex")'>Edit Folder</h3>
                 <div>
                     <button class="icon" @click="hideModel">
                     <i class="material-icons">close</i>
@@ -22,7 +23,8 @@
             </ul>
         </div>
         <div slot="footer">
-            <button @click="addNewFolder">Add</button>
+            <button @click="addNewFolder" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add</button>
+            <button @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>Save</button>
         </div>
     </modal>
 </template>
@@ -33,6 +35,7 @@ import modal from "../../components/modal";
 export default {
     props: {
         show: Boolean,
+        editingFolder: Object,
     },
     components: {
         modal,
@@ -45,6 +48,12 @@ export default {
             },
         }
     },
+    watch: {
+        show() {
+            if (!this.editingFolder.folderIndex);
+            this.newFolder = Object.assign({}, this.editingFolder);
+        },
+    },
     methods: {
         addNewFolder() {
             const newFolder = Object.assign({}, this.newFolder);
@@ -54,6 +63,14 @@ export default {
                 requests: [],
             };
         },
+        saveFolder() {
+            const savedFolder = Object.assign({}, this.newFolder);
+            this.$emit('saved-folder', savedFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
         hideModel() {
             this.$emit('hide-model');
         },

components/collections/collection.vue

@@ -3,7 +3,10 @@
         <addFolder
             v-bind:show="showModal"
             v-on:new-folder="addNewFolder"
-            v-on:hide-model='toggleModal'>
+            v-on:hide-model='toggleModal'
+            v-bind:editing-folder="selectedFolder"
+            v-on:saved-folder="savedFolder"
+        >
         </addFolder>
 
         <div class="header">
@@ -20,7 +23,12 @@
         <div v-show="showChildren">
             <ul>
                 <li v-for="(folder, index) in collection.folders" :key="folder.name">
-                    <folder :folder="folder" :folderIndex="index" :collection-index="collectionIndex" />
+                    <folder 
+                        :folder="folder"
+                        :folderIndex="index"
+                        :collection-index="collectionIndex"
+                        v-on:edit-folder="editFolder"
+                    />
                 </li>
             </ul>
 
@@ -80,6 +88,7 @@ export default {
         return {
             showChildren: false,
             showModal: false,
+            selectedFolder: {},
         };
     },
     methods: {
@@ -108,6 +117,16 @@ export default {
                 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 = {};
+        },
     }
 };
 </script>

components/collections/folder.vue

@@ -4,6 +4,7 @@
             <i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i>
             <i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i>
             <div @click="toggleShowChildren">{{folder.name}}</div>
+            <button class="add-button" @click="editFolder">e</button>
             <button class="add-button" @click="removeFolder">x</button>
         </div>
 
@@ -72,6 +73,13 @@ export default {
                 folderIndex: this.folderIndex,
             });
         },
+        editFolder() {
+            this.$emit('edit-folder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+                folder: this.folder,
+            });
+        },
     }
 };
 </script>

store/postwoman.js

@@ -97,10 +97,14 @@ export const mutations = {
 
     removeFolder (state, payload) {
         const { collectionIndex, folderIndex } = payload;
-        console.log(collectionIndex)
         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 { collectionIndex, folderIndex, request } = payload;
         state.collections[collectionIndex].folders[folderIndex].push(request);