Added initial save request

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>

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();

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) {