Added edit and remove collection.

components/collections/addCollection.vue

@@ -5,7 +5,8 @@
             <ul>
                 <li>
                 <div class="flex-wrap">
-                    <h3 class="title">Add New Collection</h3>
+                    <h3 class="title" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add New Collection</h3>
+                    <h3 class="title" v-if='newCollection.hasOwnProperty("collectionIndex")'>Edit Collection</h3>
                     <div>
                     <button class="icon" @click="hideModel">
                         <i class="material-icons">close</i>
@@ -18,12 +19,13 @@
             <div slot="body">
             <ul>
                 <li>
-                <input type="text" v-model="newCollection.name" placeholder="My New Collection" />
+                    <input type="text" v-model="newCollection.name" placeholder="My New Collection" />
                 </li>
             </ul>
             </div>
             <div slot="footer">
-                <button @click="addNewCollection">Add</button>
+                <button @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button>
+                <button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button>
             </div>
         </modal>
     </div>
@@ -35,6 +37,7 @@ import modal from "../../components/modal";
 export default {
     props: {
         show: Boolean,
+        editingCollection: Object,
     },
     components: {
         modal,
@@ -48,6 +51,12 @@ export default {
             },
         }
     },
+    watch: {
+        show() {
+            if (!this.editingCollection.collectionIndex);
+            this.newCollection = Object.assign({}, this.editingCollection);
+        },
+    },
     methods: {
         addNewCollection() {
             const newCollection = Object.assign({}, this.newCollection);
@@ -58,6 +67,15 @@ export default {
                 requests: [],
             };
         },
+        saveCollection() {
+            const savedCollection = Object.assign({}, this.newCollection);
+            this.$emit('saved-collection', savedCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
         hideModel() {
             this.$emit('hide-model');
         },

components/collections/collection.vue

@@ -12,13 +12,15 @@
             <label @click="toggleShowChildren">
                 {{collection.name}}
             </label>
+            <button class="add-button" @click="editCollection">e</button>
+            <button class="add-button" @click="removeCollection">x</button>
             <button class="add-button" @click="toggleModal">+</button>
         </div>
         
         <div v-show="showChildren">
             <ul>
                 <li v-for="(folder, index) in collection.folders" :key="folder.name">
-                    <folder :folder="folder" :folderIndex="index" />
+                    <folder :folder="folder" :folderIndex="index" :collection-index="collectionIndex" />
                 </li>
             </ul>
 
@@ -94,6 +96,18 @@ export default {
             });
             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,
+            });
+        },
     }
 };
 </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="removeFolder">x</button>
         </div>
 
         <div v-show="showChildren">
@@ -30,6 +31,14 @@
         display: flex;
         align-items: center;
     }
+
+    .add-button {
+        padding: 0;
+        width: 20px;
+        margin: 0;
+        height: 20px;
+        border-radius: 50%;
+    }
 </style>
 
 <script>
@@ -56,6 +65,13 @@ export default {
         selectRequest(request) {
             this.$store.commit('postwoman/selectRequest', { request });
         },
+        removeFolder() {
+            if (!confirm("Are you sure you want to remove this folder?")) return;
+            this.$store.commit('postwoman/removeFolder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+            });
+        },
     }
 };
 </script>

components/collections/index.vue

@@ -3,7 +3,10 @@
     <addCollection
       v-bind:show="showAddModel"
       v-on:new-collection="addNewCollection"
-      v-on:hide-model='toggleModal'>
+      v-on:hide-model='toggleModal'
+      v-bind:editing-collection="selectedCollection"
+      v-on:saved-collection="savedCollection"
+      >
     </addCollection>
 
     <div class='header'>
@@ -14,7 +17,11 @@
     
     <ul>
       <li v-for="(collection, index) in collections" :key="collection.name">
-        <collection :collection-index="index" :collection="collection"></collection>
+        <collection
+          :collection-index="index"
+          :collection="collection"
+          v-on:edit-collection="editCollection"
+          ></collection>
       </li>
     </ul>
   </div>
@@ -52,6 +59,7 @@
     data() {
       return {
         showAddModel: false,
+        selectedCollection: {},
       }
     },
     computed: {
@@ -67,6 +75,16 @@
         this.$store.commit('postwoman/addCollection', newCollection);
         this.showAddModel = false;
       },
+      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 = {};
+      },
     },
   }
 

store/postwoman.js

@@ -80,11 +80,27 @@ export const mutations = {
         state.collections.push(newCollection);
     },
 
+    removeCollection (state, payload) {
+        const { collectionIndex } = payload;
+        state.collections.splice(collectionIndex, 1)
+    },
+
+    saveCollection (state, payload) {
+        const { savedCollection } = payload;
+        state.collections[savedCollection.collectionIndex] = savedCollection;
+    },
+
     addFolder (state, payload) {
         const { collectionIndex, folder } = payload;
         state.collections[collectionIndex].folders.push(folder);
     },
 
+    removeFolder (state, payload) {
+        const { collectionIndex, folderIndex } = payload;
+        console.log(collectionIndex)
+        state.collections[collectionIndex].folders.splice(folderIndex, 1)
+    },
+
     addRequest (state, payload) {
         const { collectionIndex, folderIndex, request } = payload;
         state.collections[collectionIndex].folders[folderIndex].push(request);