Added save and remove requests.

components/collections/collection.vue

@@ -33,8 +33,12 @@
             </ul>
 
             <ul>
-                <li v-for="request in collection.requests" :key="request.name">
+                <li v-for="(request, index) in collection.requests" :key="index">
-                    <request :request="request"></request>
+                    <request 
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :request-index="index"
+                    ></request>
                 </li>
             </ul>
         </div>

components/collections/folder.vue

@@ -10,8 +10,13 @@
 
         <div v-show="showChildren">
             <ul>
-                <li v-for="request in folder.requests" :key="request.name">
+                <li v-for="(request, index) in folder.requests" :key="index">
-                    <request :request="request"></request>
+                    <request 
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :folder-index="folderIndex"
+                        :request-index="index"
+                    ></request>
                 </li>
             </ul>
         </div>

components/collections/request.vue

@@ -1,18 +1,40 @@
 <template>
     <div @click='selectRequest()'>
         {{request.name}}
+        <button class="add-button" @click="removeRequest">x</button>
     </div>
 </template>
 
+<style scoped>
+    .add-button {
+        padding: 0;
+        width: 20px;
+        margin: 0;
+        height: 20px;
+        border-radius: 50%;
+    }
+</style>
+
 <script>
 export default {
     props: {
         request: Object,
+        collectionIndex: Number,
+        folderIndex: Number,
+        requestIndex: Number,
     },
     methods: {
         selectRequest() {
             this.$store.commit('postwoman/selectRequest', { 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,
+            });
+        },
+    },
+};
 </script>

components/collections/saveRequest.vue

@@ -83,11 +83,9 @@ export default {
                 });
         },
         folders() {
-            console.log(this.request)
             if (this.request.collection === '') return []
             return this.$store.state.postwoman.collections[this.request.collection].folders
                 .map((folder, index) => {
-                    console.log(folder)
                     return {
                         name: folder.name,
                         folderIndex: index,

store/postwoman.js

@@ -45,17 +45,8 @@ export const state = () => ({
     settings: {},
     collections: [{
         name: 'My First Collection',
-        folders: [{
+        folders: [],
-            name: 'Folder 1',
+        requests: [],
-            requests: [{
-                name: "Example request",
-                url: 'http://test.com',
-            }],
-        }],
-        requests: [{
-            name: "Example request",
-            url: 'http://test.com',
-        }],
     }],
     selectedRequest: {},
 });
@@ -107,17 +98,38 @@ export const mutations = {
 
     addRequest (state, payload) {
         const { request } = payload;
+        
+        // Request that is directly attached to collection
+        if (!request.folder) {
+            state.collections[request.collection].requests.push(request);
+            return
+        }
+
         state.collections[request.collection].folders[request.folder].requests.push(request);
     },
 
-    saveRequeest (state, payload) {
+    saveRequest (state, payload) {
         const { request } = payload;
+        
+        // Request that is directly attached to collection
+        if (!request.folder) {
+            state.collections[request.collection].requests[request.requestIndex] = request;
+            return
+        }
+
         state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
     },
 
-    removeFolder (state, payload) {
+    removeRequest (state, payload) {
-        const { request } = payload;
+        const { collectionIndex, folderIndex, requestIndex } = payload;
-        state.collections[collectionIndex].folders[request.folder].requests.splice(request.requestIndex, 1)
+
+        // Request that is directly attached to collection
+        if (!folderIndex) {
+            state.collections[collectionIndex].requests.splice(requestIndex, 1)
+            return
+        }
+
+        state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
     },
 
     selectRequest (state, payload) {