refactor: split 'components/collections/addFolder.vue' to 'addFolder', 'editFolder'

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">New Folder</h3>
-                <h3 class="title" v-if='newFolder.hasOwnProperty("folderIndex")'>Edit 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,
+        show            : Boolean,
-        editingFolder: Object,
+        collection      : Object,
+        collectionIndex : Number,
     },
     components: {
         modal,
     },
     data() {
         return {
-            newFolder: {
+            name: undefined,
-                name: '',
-                requests: [],
-            },
         }
     },
-    watch: {
-        show() {
-            if (!this.editingFolder.folderIndex) return;
-            this.newFolder = Object.assign({}, this.editingFolder);
-        },
-    },
     methods: {
         addNewFolder() {
-            const newFolder = Object.assign({}, this.newFolder);
+            this.$store.commit('postwoman/addNewFolder', { folder: { name: this.$data.name }, collectionIndex: this.$props.collectionIndex })
-            this.$emit('new-folder', newFolder);
+            this.hideModal()
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
         },
-        saveFolder() {
+        hideModal() {
-            const savedFolder = Object.assign({}, this.newFolder);
+            this.$emit('hide-modal')
-            this.$emit('saved-folder', savedFolder);
-            this.newFolder = {
-                name: '',
-                requests: [],
-            };
-        },
-        hideModel() {
-            this.$emit('hide-model');
         },
     },
 };

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"
+                        v-bind:folder           = "folder"
-                        :folderIndex="index"
+                        v-bind:folderIndex      = "index"
-                        :collection-index="collectionIndex"
+                        v-bind:collection-index = "collectionIndex"
-                        v-on:edit-folder="editFolder"
+                        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,
+            showChildren   : false,
-            showModal: false,
+            selectedFolder : {},
-            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) {
+        editFolder(collectionIndex, folder, folderIndex) {
-            const { folder, collectionIndex, folderIndex } = payload;
+            this.$emit('edit-folder', { collectionIndex, folder, folderIndex })
-            this.selectedFolder = Object.assign({ collectionIndex, folderIndex }, folder);
-            this.showModal = true;
-        },
-        savedFolder(savedFolder) {
-            this.$store.commit('postwoman/saveFolder', { savedFolder });
-            this.showModal = false;
-            this.selectedFolder = {};
         },
     }
 };

components/collections/editCollection.vue

@@ -41,9 +41,9 @@ import modal from "../../components/modal";
 
 export default {
     props: {
-        show: Boolean,
+        show                   : Boolean,
-        editingCollection: Object,
+        editingCollection      : Object,
-        editingCollectionIndex: Number,
+        editingCollectionIndex : Number,
     },
     components: {
         modal,

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>

components/collections/folder.vue

@@ -82,11 +82,7 @@ export default {
             });
         },
         editFolder() {
-            this.$emit('edit-folder', {
+            this.$emit('edit-folder')
-                collectionIndex: this.collectionIndex,
-                folderIndex: this.folderIndex,
-                folder: this.folder,
-            });
         },
     }
 };

components/collections/index.vue

@@ -1,19 +1,38 @@
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showModalAdd"
+      v-bind:show     = "showModalAdd"
-      v-on:hide-modal='displayModalAdd(false)'
+      v-on:hide-modal = 'displayModalAdd(false)'
       >
     </addCollection>
     <editCollection
-      v-bind:show="showModalEdit"
+      v-bind:show                   = "showModalEdit"
-      v-bind:editingCollection="editingCollection"
+      v-bind:editingCollection      = "editingCollection"
-      v-bind:editingCollectionIndex="editingCollectionIndex"
+      v-bind:editingCollectionIndex = "editingCollectionIndex"
-      v-on:hide-modal='displayModalEdit(false)'
+      v-on:hide-modal               = 'displayModalEdit(false)'
       >
     </editCollection>
-
+    <addFolder
-    <importExportCollections :show="showModalImportExport" v-on:hide-modal='displayImportExport(false)'></importExportCollections>
+        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"
+          v-bind:collection-index = "index"
-          :collection="collection"
+          v-bind:collection       = "collection"
-          v-on:edit-collection="editCollection(collection, index)"
+          v-on:edit-collection    = "editCollection(collection, index)"
-          ></collection>
+          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 addCollection           from "./addCollection";
-  import editCollection from "./editCollection";
+  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,
+        showModalAdd           : false,
-        showModalEdit: false,
+        showModalEdit          : false,
-        showModalImportExport: false,
+        showModalImportExport  : false,
-        editingCollection: undefined,
+        showModalAddFolder     : false,
-        editingCollectionIndex: undefined,
+        showModalEditFolder    : false,
+        editingCollection      : undefined,
+        editingCollectionIndex : undefined,
+        editingFolder          : undefined,
+        editingFolderIndex     : undefined,
       }
     },
     computed: {
@@ -86,19 +116,48 @@
       displayModalEdit(shouldDisplay) {
         this.showModalEdit = shouldDisplay
 
-        if (!shouldDisplay) {
+        if (!shouldDisplay)
-          this.$data.editingCollection = undefined
+          this.resetSelectedData()
-          this.$data.editingCollectionIndex = undefined
-        }
       },
-      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
+      },
     },
   }
 

store/postwoman.js

@@ -84,9 +84,9 @@ export const mutations = {
 
     addNewCollection (state, collection) {
         state.collections.push({
-            name: '',
+            name     : '',
-            folders: [],
+            folders  : [],
-            requests: [],
+            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;