Merge pull request #176 from TheHollidayInn/feat/collections

Collections

components/collections/addCollection.vue

@@ -0,0 +1,84 @@
+<template>
+    <div>
+        <modal v-if="show" @close="hideModel">
+            <div slot="header">
+            <ul>
+                <li>
+                <div class="flex-wrap">
+                    <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>
+                    </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" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button>
+                <button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button>
+            </div>
+        </modal>
+    </div>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingCollection: Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newCollection: {
+                name: '',
+                folders: [],
+                requests: [],
+            },
+        }
+    },
+    watch: {
+        show() {
+            if (!this.editingCollection.collectionIndex) return;
+            this.newCollection = Object.assign({}, this.editingCollection);
+        },
+    },
+    methods: {
+        addNewCollection() {
+            const newCollection = Object.assign({}, this.newCollection);
+            this.$emit('new-collection', newCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        saveCollection() {
+            const savedCollection = Object.assign({}, this.newCollection);
+            this.$emit('saved-collection', savedCollection);
+            this.newCollection = {
+                name: '',
+                folders: [],
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/addFolder.vue

@@ -0,0 +1,79 @@
+<template>
+    <modal v-if="show" @close="show = false">
+        <div slot="header">
+            <ul>
+            <li>
+                <div class="flex-wrap">
+                <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>
+                    </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" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add</button>
+            <button @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>Save</button>
+        </div>
+    </modal>
+</template>
+
+<script>
+import modal from "../../components/modal";
+
+export default {
+    props: {
+        show: Boolean,
+        editingFolder: Object,
+    },
+    components: {
+        modal,
+    },
+    data() {
+        return {
+            newFolder: {
+                name: '',
+                requests: [],
+            },
+        }
+    },
+    watch: {
+        show() {
+            if (!this.editingFolder.folderIndex) return;
+            this.newFolder = Object.assign({}, this.editingFolder);
+        },
+    },
+    methods: {
+        addNewFolder() {
+            const newFolder = Object.assign({}, this.newFolder);
+            this.$emit('new-folder', newFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        saveFolder() {
+            const savedFolder = Object.assign({}, this.newFolder);
+            this.$emit('saved-folder', savedFolder);
+            this.newFolder = {
+                name: '',
+                requests: [],
+            };
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

components/collections/collection.vue

@@ -0,0 +1,136 @@
+<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" 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"
+                        :folderIndex="index"
+                        :collection-index="collectionIndex"
+                        v-on:edit-folder="editFolder"
+                    />
+                </li>
+            </ul>
+
+            <ul>
+                <li v-for="(request, index) in collection.requests" :key="index">
+                    <request
+                        :request="request"
+                        :collection-index="collectionIndex"
+                        :folder-index="-1"
+                        :request-index="index"
+                    ></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        display: flex;
+        padding-left: 1rem;
+    }
+</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,
+            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) {
+            const { folder, collectionIndex, folderIndex } = payload;
+            this.selectedFolder = Object.assign({ collectionIndex, folderIndex }, folder);
+            this.showModal = true;
+        },
+        savedFolder(savedFolder) {
+            this.$store.commit('postwoman/saveFolder', { savedFolder });
+            this.showModal = false;
+            this.selectedFolder = {};
+        },
+    }
+};
+</script>

components/collections/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>

components/collections/folder.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <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"
+                        :collection-index="collectionIndex"
+                        :folder-index="folderIndex"
+                        :request-index="index"
+                    ></request>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    ul {
+        display: flex;
+        flex-direction: column;
+    }
+
+    ul li {
+        display: flex;
+        padding-left: 1rem;
+    }
+</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 });
+        },
+        removeFolder() {
+            if (!confirm("Are you sure you want to remove this folder?")) return;
+            this.$store.commit('postwoman/removeFolder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+            });
+        },
+        editFolder() {
+            this.$emit('edit-folder', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+                folder: this.folder,
+            });
+        },
+    }
+};
+</script>

components/collections/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="collections-wrapper">
+    <addCollection
+      v-bind:show="showAddModel"
+      v-on:new-collection="addNewCollection"
+      v-on:hide-model='toggleModal'
+      v-bind:editing-collection="selectedCollection"
+      v-on:saved-collection="savedCollection"
+      >
+    </addCollection>
+
+    <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
+
+    <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
+          :collection-index="index"
+          :collection="collection"
+          v-on:edit-collection="editCollection"
+          ></collection>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    display: flex;
+    flex-direction: column;
+  }
+</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: {},
+      }
+    },
+    computed: {
+      collections () {
+        return this.$store.state.postwoman.collections;
+      }
+    },
+    methods: {
+      toggleModal() {
+        this.showAddModel = !this.showAddModel;
+      },
+      toggleExport() {
+        this.showExportModal = !this.showExportModal;
+      },
+      addNewCollection(newCollection) {
+        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 = {};
+      },
+    },
+  }
+
+</script>

components/collections/request.vue

@@ -0,0 +1,56 @@
+<template>
+    <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>
+
+<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 });
+        },
+        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', {
+                collectionIndex: this.collectionIndex,
+                folderIndex: this.folderIndex,
+                requestIndex: this.requestIndex,
+            });
+        },
+    },
+};
+</script>

components/collections/saveRequest.vue

@@ -0,0 +1,148 @@
+<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: -1,
+            },
+        }
+    },
+    watch: {
+        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() {
+            return this.$store.state.postwoman.collections
+                .map((collection, index) => {
+                    return {
+                        name: collection.name,
+                        collectionIndex: index,
+                    };
+                });
+        },
+        folders() {
+            if (this.request.collection === '') return []
+            return this.$store.state.postwoman.collections[this.request.collection].folders
+                .map((folder, index) => {
+                    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', {
+                request: savedRequest,
+            });
+
+            this.request = {
+                name: '',
+                collection: '',
+                folder: '',
+            };
+            this.hideModel();
+        },
+        hideModel() {
+            this.$emit('hide-model');
+        },
+    },
+};
+</script>

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='editRequest'
+    ></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">save</i>
+            <span>Save</span>
+          </button>
+        </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
           <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
@@ -352,6 +364,7 @@
       </div>
     </section>
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+    <collections></collections>
   </div>
 </template>
 <script>
@@ -363,6 +376,8 @@
   import textareaAutoHeight from "../directives/textareaAutoHeight";
   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';
@@ -425,6 +440,8 @@
       'pw-modal': modal,
       history,
       autocomplete,
+      collections,
+      saveRequest,
     },
     data() {
       return {
@@ -475,7 +492,9 @@
           'application/x-www-form-urlencoded',
           'text/html',
           'text/plain'
-        ]
+        ],
+        showRequestModal: false,
+        editRequest: {},
       }
     },
     watch: {
@@ -530,9 +549,38 @@
           this.path = path;
         },
         deep: true
+      },
+      selectedRequest (newValue, oldValue) {
+        // @TODO: Convert all variables to single request variable
+        if (!newValue) return;
+        this.url = newValue.url;
+        this.path = newValue.path;
+        this.method = newValue.method;
+        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
       },
@@ -1120,7 +1168,36 @@
         this.$toast.info('Cleared', {
           icon: 'clear_all'
         });
-      }
+      },
+      saveRequest() {
+        this.editRequest = {
+          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,
+        };
+
+        if (this.selectedRequest.url) {
+          this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
+        }
+
+        this.showRequestModal = true;
+      },
+      hideRequestModal() {
+        this.showRequestModal = false;
+        this.editRequest = {};
+      },
     },
     mounted() {
       this.observeRequestButton();

store/postwoman.js

@@ -42,7 +42,14 @@ export const SETTINGS_KEYS = [
 ];
 
 export const state = () => ({
-    settings: {}
+    settings: {},
+    collections: [{
+        name: 'My First Collection',
+        folders: [],
+        requests: [],
+    }],
+    selectedRequest: {},
+    editingRequest: {},
 });
 
 export const mutations = {
@@ -59,6 +66,94 @@ 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);
+    },
+
+    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;
+        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;
+        
+        // Request that is directly attached to collection
+        if (request.folder === -1) {
+            state.collections[request.collection].requests.push(request);
+            return
+        }
+
+        state.collections[request.collection].folders[request.folder].requests.push(request);
+    },
+
+    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) {
+            state.collections[request.collection].requests[request.requestIndex] = request;
+            return
+        }
+
+        state.collections[request.collection].folders[request.folder].requests[request.requestIndex] = request;
+    },
+
+    removeRequest (state, payload) {
+        const { collectionIndex, folderIndex, requestIndex } = payload;
+
+        // Request that is directly attached to collection
+        if (folderIndex === -1) {
+            state.collections[collectionIndex].requests.splice(requestIndex, 1)
+            return
+        }
+
+        state.collections[collectionIndex].folders[folderIndex].requests.splice(requestIndex, 1)
+    },
+
+    selectRequest (state, payload) {
+        state.selectedRequest = Object.assign({}, payload.request);
+    },
+
+    editRequest (state, payload) {
+        state.editingRequest = Object.assign({}, payload.request);
+    },
 
 };