From e5b72c70721bc70b9be640883c4a887b1549d554 Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Tue, 1 Oct 2019 16:20:23 -0600
Subject: [PATCH 01/11] Initial collections

---
 components/collections/addCollection.vue | 66 ++++++++++++++++
 components/collections/addFolder.vue     | 62 +++++++++++++++
 components/collections/collection.vue    | 99 ++++++++++++++++++++++++
 components/collections/folder.vue        | 61 +++++++++++++++
 components/collections/index.vue         | 73 +++++++++++++++++
 components/collections/request.vue       | 18 +++++
 pages/index.vue                          | 14 +++-
 store/postwoman.js                       | 35 ++++++++-
 8 files changed, 425 insertions(+), 3 deletions(-)
 create mode 100644 components/collections/addCollection.vue
 create mode 100644 components/collections/addFolder.vue
 create mode 100644 components/collections/collection.vue
 create mode 100644 components/collections/folder.vue
 create mode 100644 components/collections/index.vue
 create mode 100644 components/collections/request.vue

diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
new file mode 100644
index 000000000..819681e4a
--- /dev/null
+++ b/components/collections/addCollection.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <h3 class="title">Add New 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="newCollection.name" placeholder="My New Collection" />
+                </li>
+            </ul>
+            </div>
+            <div slot="footer">
+                <button @click="addNewCollection">Add</button>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newCollection: {
+                name: '',
+                folders: [],
+                requests: [],
+            },
+        }
+    },
+    methods: {
+        addNewCollection() {
+            const newCollection = Object.assign({}, this.newCollection);
+            this.$emit('new-collection', newCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
new file mode 100644
index 000000000..e79c735bd
--- /dev/null
+++ b/components/collections/addFolder.vue
@@ -0,0 +1,62 @@
+<template>
+    <modal v-if="show" @close="show = false">
+        <div slot="header">
+            <ul>
+            <li>
+                <div class="flex-wrap">
+                <h3 class="title">Add New Folder</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="newFolder.name" placeholder="My New Folder" />
+            </li>
+            </ul>
+        </div>
+        <div slot="footer">
+            <button @click="addNewFolder">Add</button>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newFolder: {
+                name: '',
+                requests: [],
+            },
+        }
+    },
+    methods: {
+        addNewFolder() {
+            const newFolder = Object.assign({}, this.newFolder);
+            this.$emit('new-folder', newFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
new file mode 100644
index 000000000..a86cc16a5
--- /dev/null
+++ b/components/collections/collection.vue
@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <addFolder
+            v-bind:show="showModal"
+            v-on:new-folder="addNewFolder"
+            v-on:hide-model='toggleModal'>
+        </addFolder>
+
+        <div class="header">
+            <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>
+            <label @click="toggleShowChildren">
+                {{collection.name}}
+            </label>
+            <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" />
+                </li>
+            </ul>
+
+            <ul>
+                <li v-for="request in collection.requests" :key="request.name">
+                    <request :request="request"></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        padding-left: 1rem;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
+
+    label {
+        padding-left: .5rem;
+    }
+
+    .add-button {
+        padding: 0;
+        width: 20px;
+        margin: 0;
+        height: 20px;
+        border-radius: 50%;
+    }
+</style>
+
+<script>
+import folder from './folder';
+import addFolder from "./addFolder";
+import request from './request';
+
+export default {
+    components: {
+        folder,
+        addFolder,
+        request,
+    },
+    props: {
+        collectionIndex: Number,
+        collection: Object,
+    },
+    data () {
+        return {
+            showChildren: false,
+            showModal: false,
+        };
+    },
+    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;
+        },
+    }
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
new file mode 100644
index 000000000..e4215d82b
--- /dev/null
+++ b/components/collections/folder.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <div class="header">
+            <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>
+        </div>
+
+        <div v-show="showChildren">
+            <ul>
+                <li v-for="request in folder.requests" :key="request.name">
+                    <request :request="request"></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        padding-left: 1rem;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
+</style>
+
+<script>
+import request from './request';
+
+export default {
+    props: {
+        folder: Object,
+        collectionIndex: Number,
+        folderIndex: Number,
+    },
+    components: {
+        request,
+    },
+    data () {
+        return {
+            showChildren: false,
+        };
+    },
+    methods: {
+        toggleShowChildren() {
+            this.showChildren = !this.showChildren;
+        },
+        selectRequest(request) {
+            this.$store.commit('postwoman/selectRequest', { request });
+        },
+    }
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/index.vue b/components/collections/index.vue
new file mode 100644
index 000000000..74aa9464b
--- /dev/null
+++ b/components/collections/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="collections-wrapper">
+    <addCollection
+      v-bind:show="showAddModel"
+      v-on:new-collection="addNewCollection"
+      v-on:hide-model='toggleModal'>
+    </addCollection>
+
+    <div class='header'>
+      <Label>Collections</label>
+      <button class="collection-button" @click="toggleModal">+</button>
+    </div>
+    
+    
+    <ul>
+      <li v-for="(collection, index) in collections" :key="collection.name">
+        <collection :collection-index="index" :collection="collection"></collection>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
+
+  .collection-button {
+    padding: 0;
+    width: 20px;
+    margin: 0;
+    height: 20px;
+    border-radius: 50%;
+  }
+</style>
+
+<script>
+  import addCollection from "./addCollection";
+  import collection from './collection'
+
+  export default {
+    components: {
+      collection,
+      addCollection,
+    },
+    data() {
+      return {
+        showAddModel: false,
+      }
+    },
+    computed: {
+      collections () {
+        return this.$store.state.postwoman.collections;
+      }
+    },
+    methods: {
+      toggleModal() {
+        this.showAddModel = !this.showAddModel;
+      },
+      addNewCollection(newCollection) {
+        this.$store.commit('postwoman/addCollection', newCollection);
+        this.showAddModel = false;
+      },
+    },
+  }
+
+</script>
diff --git a/components/collections/request.vue b/components/collections/request.vue
new file mode 100644
index 000000000..44e0f825d
--- /dev/null
+++ b/components/collections/request.vue
@@ -0,0 +1,18 @@
+<template>
+    <div @click='selectRequest()'>
+        {{request.name}}
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        request: Object,
+    },
+    methods: {
+        selectRequest() {
+            this.$store.commit('postwoman/selectRequest', { request: this.request });
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 60f7df3c6..797a7e62a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -340,6 +340,7 @@
       </div>
     </section>
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+    <collections></collections>
   </div>
 </template>
 <script>
@@ -351,6 +352,7 @@
   import textareaAutoHeight from "../directives/textareaAutoHeight";
   import toggle from "../components/toggle";
   import modal from "../components/modal";
+  import collections from '../components/collections';
   import parseCurlCommand from '../assets/js/curlparser.js';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/dracula.css';
@@ -413,6 +415,7 @@
       'pw-modal': modal,
       history,
       autocomplete,
+      collections,
     },
     data() {
       return {
@@ -517,9 +520,16 @@
           this.path = path;
         },
         deep: true
-      }
+      },
+      selectedRequest (newValue, oldValue) {
+        if (!newValue) return;
+        this.url = newValue.url;
+      },
     },
     computed: {
+      selectedRequest() {
+        return this.$store.state.postwoman.selectedRequest;
+      },
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
@@ -1058,7 +1068,7 @@
         this.$toast.info('Cleared', {
           icon: 'clear_all'
         });
-      }
+      },
     },
     mounted() {
       this.observeRequestButton();
diff --git a/store/postwoman.js b/store/postwoman.js
index 034333253..e084faab0 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -42,7 +42,22 @@ export const SETTINGS_KEYS = [
 ];
 
 export const state = () => ({
-    settings: {}
+    settings: {},
+    collections: [{
+        name: 'My First Collection',
+        folders: [{
+            name: 'Folder 1',
+            requests: [{
+                name: "Example request",
+                url: 'http://test.com',
+            }],
+        }],
+        requests: [{
+            name: "Example request",
+            url: 'http://test.com',
+        }],
+    }],
+    selectedRequest: {},
 });
 
 export const mutations = {
@@ -59,6 +74,24 @@ export const mutations = {
         if (!SETTINGS_KEYS.includes(key)) throw new Error("The settings structure does not include the key " + key);
 
         state.settings[key] = value;
+    },
+
+    addCollection (state, newCollection) {
+        state.collections.push(newCollection);
+    },
+
+    addFolder (state, payload) {
+        const { collectionIndex, folder } = payload;
+        state.collections[collectionIndex].folders.push(folder);
+    },
+
+    addRequest (state, payload) {
+        const { collectionIndex, folderIndex, request } = payload;
+        state.collections[collectionIndex].folders[folderIndex].push(request);
+    },
+
+    selectRequest (state, payload) {
+        state.selectedRequest = Object.assign({}, payload.request);
     }
 
 };

From ed53b433b55600349656f136cb787c099502c297 Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Wed, 16 Oct 2019 07:11:34 -0600
Subject: [PATCH 02/11] Added edit and remove collection.

---
 components/collections/addCollection.vue | 24 +++++++++++++++++++++---
 components/collections/collection.vue    | 16 +++++++++++++++-
 components/collections/folder.vue        | 16 ++++++++++++++++
 components/collections/index.vue         | 22 ++++++++++++++++++++--
 store/postwoman.js                       | 16 ++++++++++++++++
 5 files changed, 88 insertions(+), 6 deletions(-)

diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 819681e4a..ece90297e 100644
--- a/components/collections/addCollection.vue
+++ b/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');
         },
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index a86cc16a5..3cec68711 100644
--- a/components/collections/collection.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index e4215d82b..36d88ea56 100644
--- a/components/collections/folder.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 74aa9464b..fbf59c7c0 100644
--- a/components/collections/index.vue
+++ b/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 = {};
+      },
     },
   }
 
diff --git a/store/postwoman.js b/store/postwoman.js
index e084faab0..c8e91cb1f 100644
--- a/store/postwoman.js
+++ b/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);

From d989da2811a455a2f8887ba864bc864fcef974a3 Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Wed, 16 Oct 2019 07:32:22 -0600
Subject: [PATCH 03/11] Added edit folder.

---
 components/collections/addFolder.vue  | 21 +++++++++++++++++++--
 components/collections/collection.vue | 23 +++++++++++++++++++++--
 components/collections/folder.vue     |  8 ++++++++
 store/postwoman.js                    |  6 +++++-
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index e79c735bd..090b0b73e 100644
--- a/components/collections/addFolder.vue
+++ b/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');
         },
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 3cec68711..6db07846b 100644
--- a/components/collections/collection.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 36d88ea56..35df7071e 100644
--- a/components/collections/folder.vue
+++ b/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>
\ No newline at end of file
diff --git a/store/postwoman.js b/store/postwoman.js
index c8e91cb1f..d14e6cf9b 100644
--- a/store/postwoman.js
+++ b/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);

From cad907125b5e1d894bd4915244e50a67c0c8323f Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Wed, 16 Oct 2019 08:29:08 -0600
Subject: [PATCH 04/11] Added initial save request

---
 components/collections/saveRequest.vue | 130 +++++++++++++++++++++++++
 pages/index.vue                        |  55 ++++++++++-
 store/postwoman.js                     |  14 ++-
 3 files changed, 196 insertions(+), 3 deletions(-)
 create mode 100644 components/collections/saveRequest.vue

diff --git a/components/collections/saveRequest.vue b/components/collections/saveRequest.vue
new file mode 100644
index 000000000..dcdaff3a2
--- /dev/null
+++ b/components/collections/saveRequest.vue
@@ -0,0 +1,130 @@
+<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")'>Add 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">
+                <button @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>Add</button>
+                <button @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>Save</button>
+            </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: '',
+            },
+        }
+    },
+    watch: {
+        show() {
+            this.request = Object.assign(this.request, this.editingRequest);
+        },
+    },
+    computed: {
+        collections() {
+            return this.$store.state.postwoman.collections
+                .map((collection, index) => {
+                    return {
+                        name: collection.name,
+                        collectionIndex: index,
+                    };
+                });
+        },
+        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,
+                    };
+                });
+        }
+    },
+    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', {
+                savedRequest,
+            });
+
+            this.request = {
+                name: '',
+                collection: '',
+                folder: '',
+            };
+            this.hideModel();
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 88a45dc04..586603505 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="page">
+    <save-request
+      v-bind:show="showRequestModal"
+      v-on:hide-model='hideRequestModal'
+      v-bind:editing-request='request'
+    ></save-request>
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
         <ul>
@@ -70,6 +75,13 @@
             <span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
           </button>
         </li>
+        <li>
+          <label class="hide-on-small-screen" for="saveRequest">&nbsp;</label>
+          <button class="icon" @click="saveRequest" id="saveRequest" ref="saveRequest" :disabled="!isValidURL">
+            <i class="material-icons">share</i>
+            <span>Save</span>
+          </button>
+        </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
           <button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">
@@ -361,6 +373,7 @@
   import toggle from "../components/toggle";
   import modal from "../components/modal";
   import collections from '../components/collections';
+  import saveRequest from '../components/collections/saveRequest';
   import parseCurlCommand from '../assets/js/curlparser.js';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/dracula.css';
@@ -424,6 +437,7 @@
       history,
       autocomplete,
       collections,
+      saveRequest,
     },
     data() {
       return {
@@ -474,7 +488,9 @@
           'application/x-www-form-urlencoded',
           'text/html',
           'text/plain'
-        ]
+        ],
+        showRequestModal: false,
+        request: {},
       }
     },
     watch: {
@@ -533,6 +549,20 @@
       selectedRequest (newValue, oldValue) {
         if (!newValue) return;
         this.url = newValue.url;
+        this.path = '/api/users';
+        this.method = newValue.method;
+        this.auth = 'None';
+        this.httpUser = '';
+        this.httpPassword = '';
+        // passwordFieldType: 'password',
+        // bearerToken: '',
+        // headers: [],
+        // params: [],
+        // bodyParams: [],
+        // rawParams: '',
+        // rawInput: false,
+        // contentType: 'application/json',
+        // requestType: 'JavaScript XHR',
       },
     },
     computed: {
@@ -1092,6 +1122,29 @@
           icon: 'clear_all'
         });
       },
+      saveRequest() {
+        this.request = {
+          url: this.url,
+          path: this.path,
+          method: this.method,
+          auth: this.auth,
+          httpUser: this.httpUser,
+          httpPassword: this.httpPassword,
+          passwordFieldType: this.passwordFieldType,
+          bearerToken: this.bearerToken,
+          headers: this.headers,
+          params: this.params,
+          bodyParams: this.bodyParams,
+          rawParams: this.rawParams,
+          rawInput: this.rawInput,
+          contentType: this.contentType,
+          requestType: this.requestType,
+        }
+        this.showRequestModal = true;
+      },
+      hideRequestModal() {
+        this.showRequestModal = false;
+      },
     },
     mounted() {
       this.observeRequestButton();
diff --git a/store/postwoman.js b/store/postwoman.js
index d14e6cf9b..34d607bd9 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -106,8 +106,18 @@ export const mutations = {
     },
 
     addRequest (state, payload) {
-        const { collectionIndex, folderIndex, request } = payload;
-        state.collections[collectionIndex].folders[folderIndex].push(request);
+        const { request } = payload;
+        state.collections[request.collection].folders[request.folder].requests.push(request);
+    },
+
+    saveRequeest (state, payload) {
+        const { request } = payload;
+        state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
+    },
+
+    removeFolder (state, payload) {
+        const { request } = payload;
+        state.collections[collectionIndex].folders[request.folder].requests.splice(request.requestIndex, 1)
     },
 
     selectRequest (state, payload) {

From 5847f0b16e1e4ac9a6129fef6e4bdbd39c772b2d Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Thu, 17 Oct 2019 09:23:26 -0600
Subject: [PATCH 05/11] Added save and remove requests.

---
 components/collections/collection.vue  |  8 +++--
 components/collections/folder.vue      |  9 ++++--
 components/collections/request.vue     | 26 ++++++++++++++--
 components/collections/saveRequest.vue |  2 --
 store/postwoman.js                     | 42 +++++++++++++++++---------
 5 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 6db07846b..f6f411423 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -33,8 +33,12 @@
             </ul>
 
             <ul>
-                <li v-for="request in collection.requests" :key="request.name">
-                    <request :request="request"></request>
+                <li v-for="(request, index) in collection.requests" :key="index">
+                    <request 
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :request-index="index"
+                    ></request>
                 </li>
             </ul>
         </div>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 35df7071e..120dbe7eb 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -10,8 +10,13 @@
 
         <div v-show="showChildren">
             <ul>
-                <li v-for="request in folder.requests" :key="request.name">
-                    <request :request="request"></request>
+                <li v-for="(request, index) in folder.requests" :key="index">
+                    <request 
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :folder-index="folderIndex"
+                        :request-index="index"
+                    ></request>
                 </li>
             </ul>
         </div>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 44e0f825d..921ef74e1 100644
--- a/components/collections/request.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/collections/saveRequest.vue b/components/collections/saveRequest.vue
index dcdaff3a2..1e8a1704f 100644
--- a/components/collections/saveRequest.vue
+++ b/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,
diff --git a/store/postwoman.js b/store/postwoman.js
index 34d607bd9..4176e3234 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -45,17 +45,8 @@ export const state = () => ({
     settings: {},
     collections: [{
         name: 'My First Collection',
-        folders: [{
-            name: 'Folder 1',
-            requests: [{
-                name: "Example request",
-                url: 'http://test.com',
-            }],
-        }],
-        requests: [{
-            name: "Example request",
-            url: 'http://test.com',
-        }],
+        folders: [],
+        requests: [],
     }],
     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) {
-        const { request } = payload;
-        state.collections[collectionIndex].folders[request.folder].requests.splice(request.requestIndex, 1)
+    removeRequest (state, payload) {
+        const { collectionIndex, folderIndex, requestIndex } = payload;
+
+        // 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) {

From 85d6c3ac34ced5e60aa9b0c7494d040b8bf06427 Mon Sep 17 00:00:00 2001
From: Keith Holliday <keithrholliday@gmail.com>
Date: Thu, 17 Oct 2019 10:56:19 -0600
Subject: [PATCH 06/11] Edit request.

---
 components/collections/collection.vue  |  1 +
 components/collections/request.vue     |  5 +++
 components/collections/saveRequest.vue | 10 +++---
 pages/index.vue                        | 44 ++++++++++++++++----------
 store/postwoman.js                     | 13 +++++---
 5 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index f6f411423..c7284f409 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -37,6 +37,7 @@
                     <request 
                         :request="request"
                         :collection-index="collectionIndex"
+                        :folder-index="-1"
                         :request-index="index"
                     ></request>
                 </li>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 921ef74e1..f48300e8e 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,6 +1,7 @@
 <template>
     <div @click='selectRequest()'>
         {{request.name}}
+        <button class="add-button" @click="editRequest">e</button>
         <button class="add-button" @click="removeRequest">x</button>
     </div>
 </template>
@@ -27,6 +28,10 @@ export default {
         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', {
diff --git a/components/collections/saveRequest.vue b/components/collections/saveRequest.vue
index 1e8a1704f..b29b432fb 100644
--- a/components/collections/saveRequest.vue
+++ b/components/collections/saveRequest.vue
@@ -8,9 +8,9 @@
                             <h3 class="title" v-if='!request.hasOwnProperty("requestIndex")'>Add 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>
+                                <button class="icon" @click="hideModel">
+                                    <i class="material-icons">close</i>
+                                </button>
                             </div>
                         </div>
                     </li>
@@ -63,7 +63,7 @@ export default {
             request: {
                 name: '',
                 collection: '',
-                folder: '',
+                folder: -1,
             },
         }
     },
@@ -110,7 +110,7 @@ export default {
             const savedRequest = Object.assign({}, this.request);
 
             this.$store.commit('postwoman/saveRequest', {
-                savedRequest,
+                request: savedRequest,
             });
 
             this.request = {
diff --git a/pages/index.vue b/pages/index.vue
index 586603505..6289d1783 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
     <save-request
       v-bind:show="showRequestModal"
       v-on:hide-model='hideRequestModal'
-      v-bind:editing-request='request'
+      v-bind:editing-request='editRequest'
     ></save-request>
     <pw-modal v-if="showModal" @close="showModal = false">
       <div slot="header">
@@ -490,7 +490,7 @@
           'text/plain'
         ],
         showRequestModal: false,
-        request: {},
+        editRequest: {},
       }
     },
     watch: {
@@ -547,28 +547,36 @@
         deep: true
       },
       selectedRequest (newValue, oldValue) {
+        // @TODO: Convert all variables to single request variable
         if (!newValue) return;
         this.url = newValue.url;
-        this.path = '/api/users';
+        this.path = newValue.path;
         this.method = newValue.method;
-        this.auth = 'None';
-        this.httpUser = '';
-        this.httpPassword = '';
-        // passwordFieldType: 'password',
-        // bearerToken: '',
-        // headers: [],
-        // params: [],
-        // bodyParams: [],
-        // rawParams: '',
-        // rawInput: false,
-        // contentType: 'application/json',
-        // requestType: 'JavaScript XHR',
+        this.auth = newValue.auth;
+        this.httpUser = newValue.httpUser;
+        this.httpPassword = newValue.httpPassword;
+        this.passwordFieldType = newValue.passwordFieldType;
+        this.bearerToken = newValue.bearerToken;
+        this.headers = newValue.headers;
+        this.params = newValue.params;
+        this.bodyParams = newValue.bodyParams;
+        this.rawParams = newValue.rawParams;
+        this.rawInput = newValue.rawInput;
+        this.contentType = newValue.contentType;
+        this.requestType = newValue.requestType;
       },
+      editingRequest (newValue) {
+        this.editRequest = newValue;
+        this.showRequestModal = true;
+      }
     },
     computed: {
       selectedRequest() {
         return this.$store.state.postwoman.selectedRequest;
       },
+      editingRequest() {
+        return this.$store.state.postwoman.editingRequest;
+      },
       requestName() {
         return this.label
       },
@@ -1123,7 +1131,7 @@
         });
       },
       saveRequest() {
-        this.request = {
+        this.editRequest = {
           url: this.url,
           path: this.path,
           method: this.method,
@@ -1139,11 +1147,13 @@
           rawInput: this.rawInput,
           contentType: this.contentType,
           requestType: this.requestType,
-        }
+        };
+        console.log(this.editRequest);
         this.showRequestModal = true;
       },
       hideRequestModal() {
         this.showRequestModal = false;
+        this.editRequest = {};
       },
     },
     mounted() {
diff --git a/store/postwoman.js b/store/postwoman.js
index 4176e3234..eb7a36659 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -49,6 +49,7 @@ export const state = () => ({
         requests: [],
     }],
     selectedRequest: {},
+    editingRequest: {},
 });
 
 export const mutations = {
@@ -100,7 +101,7 @@ export const mutations = {
         const { request } = payload;
         
         // Request that is directly attached to collection
-        if (!request.folder) {
+        if (request.folder === -1) {
             state.collections[request.collection].requests.push(request);
             return
         }
@@ -112,7 +113,7 @@ export const mutations = {
         const { request } = payload;
         
         // Request that is directly attached to collection
-        if (!request.folder) {
+        if (request.folder === -1) {
             state.collections[request.collection].requests[request.requestIndex] = request;
             return
         }
@@ -124,7 +125,7 @@ export const mutations = {
         const { collectionIndex, folderIndex, requestIndex } = payload;
 
         // Request that is directly attached to collection
-        if (!folderIndex) {
+        if (folderIndex === -1) {
             state.collections[collectionIndex].requests.splice(requestIndex, 1)
             return
         }
@@ -134,6 +135,10 @@ export const mutations = {
 
     selectRequest (state, payload) {
         state.selectedRequest = Object.assign({}, payload.request);
-    }
+    },
+
+    editRequest (state, payload) {
+        state.editingRequest = Object.assign({}, payload.request);
+    },
 
 };

From 16bcb65d94e98fee4b3b912f2e7f1e48218038c5 Mon Sep 17 00:00:00 2001
From: thehollidayinn <keithrholliday@gmail.com>
Date: Mon, 21 Oct 2019 22:50:09 -0600
Subject: [PATCH 07/11] Updates to editing request.

---
 components/collections/addCollection.vue |  2 +-
 components/collections/addFolder.vue     |  2 +-
 components/collections/collection.vue    |  1 +
 components/collections/folder.vue        |  1 +
 components/collections/saveRequest.vue   | 20 ++++++++++++++++++++
 store/postwoman.js                       | 15 +++++++++++++++
 6 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index ece90297e..94619f00b 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -53,7 +53,7 @@ export default {
     },
     watch: {
         show() {
-            if (!this.editingCollection.collectionIndex);
+            if (!this.editingCollection.collectionIndex) return;
             this.newCollection = Object.assign({}, this.editingCollection);
         },
     },
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index 090b0b73e..b318d0b43 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -50,7 +50,7 @@ export default {
     },
     watch: {
         show() {
-            if (!this.editingFolder.folderIndex);
+            if (!this.editingFolder.folderIndex) return;
             this.newFolder = Object.assign({}, this.editingFolder);
         },
     },
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index c7284f409..138c41bca 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -69,6 +69,7 @@
         padding: 0;
         width: 20px;
         margin: 0;
+        margin-right: .2rem;
         height: 20px;
         border-radius: 50%;
     }
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 120dbe7eb..5706d0ed9 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -42,6 +42,7 @@
         padding: 0;
         width: 20px;
         margin: 0;
+        margin-right: .2rem;
         height: 20px;
         border-radius: 50%;
     }
diff --git a/components/collections/saveRequest.vue b/components/collections/saveRequest.vue
index b29b432fb..7f5d31037 100644
--- a/components/collections/saveRequest.vue
+++ b/components/collections/saveRequest.vue
@@ -71,6 +71,26 @@ export default {
         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() {
diff --git a/store/postwoman.js b/store/postwoman.js
index eb7a36659..2f021683d 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -111,6 +111,21 @@ export const mutations = {
 
     saveRequest (state, payload) {
         const { request } = payload;
+
+        // Remove the old request from collection
+        if (request.hasOwnProperty('oldCollection') && request.oldCollection > -1) {
+            const folder = request.hasOwnProperty('oldFolder') && request.oldFolder >= -1 ? request.oldFolder : request.folder;
+            if (folder > -1) {
+                state.collections[request.oldCollection].folders[folder].requests.splice(request.requestIndex, 1)
+            } else {
+                state.collections[request.oldCollection].requests.splice(request.requestIndex, 1)
+            }
+        } else if (request.hasOwnProperty('oldFolder') && request.oldFolder !== -1) {
+            state.collections[request.collection].folders[folder].requests.splice(request.requestIndex, 1)
+        }
+
+        delete request.oldCollection;
+        delete request.oldFolder;
         
         // Request that is directly attached to collection
         if (request.folder === -1) {

From b244ee8580de6bfe666d8613d9948974fd01ff74 Mon Sep 17 00:00:00 2001
From: thehollidayinn <keithrholliday@gmail.com>
Date: Mon, 21 Oct 2019 22:52:01 -0600
Subject: [PATCH 08/11] Save icon.

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 6289d1783..93705d7f1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -78,7 +78,7 @@
         <li>
           <label class="hide-on-small-screen" for="saveRequest">&nbsp;</label>
           <button class="icon" @click="saveRequest" id="saveRequest" ref="saveRequest" :disabled="!isValidURL">
-            <i class="material-icons">share</i>
+            <i class="material-icons">save</i>
             <span>Save</span>
           </button>
         </li>

From 3f5307ef795ae118268614aefc43f2dd6e5c24b6 Mon Sep 17 00:00:00 2001
From: thehollidayinn <keithrholliday@gmail.com>
Date: Mon, 21 Oct 2019 23:00:13 -0600
Subject: [PATCH 09/11] Added export modal.

---
 components/collections/exportCollection.vue | 49 +++++++++++++++++++++
 components/collections/index.vue            | 14 ++++++
 2 files changed, 63 insertions(+)
 create mode 100644 components/collections/exportCollection.vue

diff --git a/components/collections/exportCollection.vue b/components/collections/exportCollection.vue
new file mode 100644
index 000000000..a24fc0dba
--- /dev/null
+++ b/components/collections/exportCollection.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <h3 class="title">Export Collections</h3>
+                    <div>
+                    <button class="icon" @click="hideModel">
+                        <i class="material-icons">close</i>
+                    </button>
+                    </div>
+                </div>
+                </li>
+            </ul>
+            </div>
+            <div slot="body">
+                <textarea v-model='collectionJson'>
+                </textarea>
+            </div>
+            <div slot="footer">
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+    },
+    components: {
+        modal,
+    },
+    computed: {
+        collectionJson () {
+            return JSON.stringify(this.$store.state.postwoman.collections);
+        }
+    },
+    methods: {
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>
\ No newline at end of file
diff --git a/components/collections/index.vue b/components/collections/index.vue
index fbf59c7c0..8539a05cc 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -9,9 +9,12 @@
       >
     </addCollection>
 
+    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+
     <div class='header'>
       <Label>Collections</label>
       <button class="collection-button" @click="toggleModal">+</button>
+      <button class="export-button" @click="toggleExport">Export</button>
     </div>
     
     
@@ -45,20 +48,28 @@
     height: 20px;
     border-radius: 50%;
   }
+
+  .export-button {
+    padding: 10px 8px;
+    height: 15px;
+  }
 </style>
 
 <script>
   import addCollection from "./addCollection";
+  import exportCollection from "./exportCollection";
   import collection from './collection'
 
   export default {
     components: {
       collection,
       addCollection,
+      exportCollection,
     },
     data() {
       return {
         showAddModel: false,
+        showExportModal: false,
         selectedCollection: {},
       }
     },
@@ -71,6 +82,9 @@
       toggleModal() {
         this.showAddModel = !this.showAddModel;
       },
+      toggleExport() {
+        this.showExportModal = !this.showExportModal;
+      },
       addNewCollection(newCollection) {
         this.$store.commit('postwoman/addCollection', newCollection);
         this.showAddModel = false;

From 7ad6cd83dbe79e82b8574d76fca29908ee162597 Mon Sep 17 00:00:00 2001
From: thehollidayinn <keithrholliday@gmail.com>
Date: Mon, 21 Oct 2019 23:07:35 -0600
Subject: [PATCH 10/11] Added save selected request.

---
 pages/index.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 93705d7f1..51e0c0d18 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1148,7 +1148,11 @@
           contentType: this.contentType,
           requestType: this.requestType,
         };
-        console.log(this.editRequest);
+        
+        if (this.selectedRequest.url) {
+          this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
+        }
+
         this.showRequestModal = true;
       },
       hideRequestModal() {

From ee58075d3ff765ec17a7426f968aceb8a4704d1f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 22 Oct 2019 14:43:54 +0530
Subject: [PATCH 11/11] :art: Basic stylings

---
 components/collections/collection.vue | 60 +++++++++++++--------------
 components/collections/folder.vue     | 46 ++++++++++----------
 components/collections/index.vue      | 37 ++++++-----------
 components/collections/request.vue    | 21 +++++++---
 pages/index.vue                       |  2 +-
 5 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 138c41bca..51c218f8f 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -9,21 +9,36 @@
         >
         </addFolder>
 
-        <div class="header">
-            <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>
-            <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 class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder</i>
+              <span>{{collection.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editCollection">
+              <i class="material-icons">create</i>
+            </button>
+            <button class="icon" @click="removeCollection">
+              <i class="material-icons">delete</i>
+            </button>
+            <button class="icon" @click="toggleModal">
+              <i class="material-icons">add</i>
+            </button>
+          </div>
         </div>
-        
+
         <div v-show="showChildren">
             <ul>
                 <li v-for="(folder, index) in collection.folders" :key="folder.name">
-                    <folder 
+                    <folder
                         :folder="folder"
                         :folderIndex="index"
                         :collection-index="collectionIndex"
@@ -34,7 +49,7 @@
 
             <ul>
                 <li v-for="(request, index) in collection.requests" :key="index">
-                    <request 
+                    <request
                         :request="request"
                         :collection-index="collectionIndex"
                         :folder-index="-1"
@@ -53,25 +68,8 @@
     }
 
     ul li {
-        padding-left: 1rem;
-    }
-
-    .header {
         display: flex;
-        align-items: center;
-    }
-
-    label {
-        padding-left: .5rem;
-    }
-
-    .add-button {
-        padding: 0;
-        width: 20px;
-        margin: 0;
-        margin-right: .2rem;
-        height: 20px;
-        border-radius: 50%;
+        padding-left: 1rem;
     }
 </style>
 
@@ -135,4 +133,4 @@ export default {
         },
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 5706d0ed9..b2cda6186 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -1,17 +1,32 @@
 <template>
     <div>
-        <div class="header">
-            <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 class="flex-wrap">
+          <div>
+            <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
+              <i class="material-icons">arrow_right</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
+              <i class="material-icons">arrow_drop_down</i>
+            </button>
+            <button class="icon" @click="toggleShowChildren">
+              <i class="material-icons">folder_open</i>
+              <span>{{folder.name}}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="editFolder">
+              <i class="material-icons">edit</i>
+            </button>
+            <button class="icon" @click="removeFolder">
+              <i class="material-icons">delete</i>
+            </button>
+          </div>
         </div>
 
         <div v-show="showChildren">
             <ul>
                 <li v-for="(request, index) in folder.requests" :key="index">
-                    <request 
+                    <request
                         :request="request"
                         :collection-index="collectionIndex"
                         :folder-index="folderIndex"
@@ -30,21 +45,8 @@
     }
 
     ul li {
-        padding-left: 1rem;
-    }
-
-    .header {
         display: flex;
-        align-items: center;
-    }
-
-    .add-button {
-        padding: 0;
-        width: 20px;
-        margin: 0;
-        margin-right: .2rem;
-        height: 20px;
-        border-radius: 50%;
+        padding-left: 1rem;
     }
 </style>
 
@@ -88,4 +90,4 @@ export default {
         },
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 8539a05cc..7fef8fcaf 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -11,13 +11,20 @@
 
     <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
 
-    <div class='header'>
-      <Label>Collections</label>
-      <button class="collection-button" @click="toggleModal">+</button>
-      <button class="export-button" @click="toggleExport">Export</button>
+    <div class='flex-wrap'>
+      <h3 class="title">Collections</h3>
+      <div>
+        <button class="icon" @click="toggleModal">
+          <i class="material-icons">add</i>
+          <span>New</span>
+        </button>
+        <button class="icon" @click="toggleExport">
+          <i class="material-icons">import_export</i>
+          <span>Export</span>
+        </button>
+      </div>
     </div>
-    
-    
+
     <ul>
       <li v-for="(collection, index) in collections" :key="collection.name">
         <collection
@@ -35,24 +42,6 @@
     display: flex;
     flex-direction: column;
   }
-
-  .header {
-    display: flex;
-    align-items: center;
-  }
-
-  .collection-button {
-    padding: 0;
-    width: 20px;
-    margin: 0;
-    height: 20px;
-    border-radius: 50%;
-  }
-
-  .export-button {
-    padding: 10px 8px;
-    height: 15px;
-  }
 </style>
 
 <script>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index f48300e8e..734bfbde3 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,8 +1,19 @@
 <template>
-    <div @click='selectRequest()'>
-        {{request.name}}
-        <button class="add-button" @click="editRequest">e</button>
-        <button class="add-button" @click="removeRequest">x</button>
+    <div class="flex-wrap">
+      <div>
+        <button class="icon" @click="selectRequest()">
+          <i class="material-icons">star</i>
+          <span>{{request.name}}</span>
+        </button>
+      </div>
+      <div>
+        <button class="icon" @click="editRequest">
+          <i class="material-icons">edit</i>
+        </button>
+        <button class="icon" @click="removeRequest">
+          <i class="material-icons">delete</i>
+        </button>
+      </div>
     </div>
 </template>
 
@@ -42,4 +53,4 @@ export default {
         },
     },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 51e0c0d18..1993ce0c6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1148,7 +1148,7 @@
           contentType: this.contentType,
           requestType: this.requestType,
         };
-        
+
         if (this.selectedRequest.url) {
           this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
         }