Merge pull request #211 from breno-pereira/master

bug: keeping information on page change

pages/index.vue

@@ -43,7 +43,7 @@
       <ul>
         <li>
           <label for="method">Method</label>
-          <select id="method" v-model="method">
+          <select id="method" v-model="method" @change="methodChange">
             <option>GET</option>
             <option>HEAD</option>
             <option>POST</option>
@@ -130,20 +130,22 @@
           </ul>
           <ul v-for="(param, index) in bodyParams" :key="index">
             <li>
-              <input
-                :placeholder="'key '+(index+1)"
-                :name="'bparam'+index"
-                v-model="param.key"
-                @keyup.prevent="setRouteQueryState"
+              <input 
+                :placeholder="'key '+(index+1)" 
+                :name="'bparam'+index" 
+                :value="param.key" 
+                @change="$store.commit('setKeyBodyParams', { index, value: $event.target.value })" 
+                @keyup.prevent="setRouteQueryState" 
                 autofocus
               />
             </li>
             <li>
-              <input
-                :placeholder="'value '+(index+1)"
-                :id="'bvalue'+index"
-                :name="'bvalue'+index"
-                v-model="param.value"
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :id="'bvalue'+index" 
+                :name="'bvalue'+index" 
+                :value="param.value" 
+                @change="$store.commit('setValueBodyParams', { index, value: $event.target.value })" 
                 @keyup.prevent="setRouteQueryState"
               />
             </li>
@@ -355,19 +357,21 @@
           </ul>
           <ul v-for="(header, index) in headers" :key="index">
             <li>
-              <input
-                :placeholder="'header '+(index+1)"
-                :name="'header'+index"
-                v-model="header.key"
-                @keyup.prevent="setRouteQueryState"
+              <input 
+                :placeholder="'header '+(index+1)" 
+                :name="'header'+index" 
+                :value="header.key" 
+                @change="$store.commit('setKeyHeader', { index, value: $event.target.value })" 
+                @keyup.prevent="setRouteQueryState" 
                 autofocus
               />
             </li>
             <li>
-              <input
-                :placeholder="'value '+(index+1)"
-                :name="'value'+index"
-                v-model="header.value"
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :name="'value'+index" 
+                :value="header.value" 
+                @change="$store.commit('setValueHeader', { index, value: $event.target.value })"  
                 @keyup.prevent="setRouteQueryState"
               />
             </li>
@@ -416,15 +420,21 @@
           </ul>
           <ul v-for="(param, index) in params" :key="index">
             <li>
-              <input
-                :placeholder="'parameter '+(index+1)"
-                :name="'param'+index"
-                v-model="param.key"
+              <input 
+                :placeholder="'parameter '+(index+1)" 
+                :name="'param'+index" 
+                :value="param.key" 
+                @change="$store.commit('setKeyParams', { index, value: $event.target.value })" 
                 autofocus
               />
             </li>
             <li>
-              <input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="param.value" />
+              <input 
+                :placeholder="'value '+(index+1)" 
+                :name="'value'+index" 
+                :value="param.value" 
+                @change="$store.commit('setValueParams', { index, value: $event.target.value })"
+              />
             </li>
             <div>
               <li>
@@ -597,25 +607,9 @@ export default {
   },
   data () {
     return {
-      label: "",
       showModal: false,
       copyButton: '<i class="material-icons">file_copy</i>',
       copiedButton: '<i class="material-icons">done</i>',
-      method: "GET",
-      url: "https://reqres.in",
-      auth: "None",
-      path: "/api/users",
-      httpUser: "",
-      httpPassword: "",
-      passwordFieldType: "password",
-      bearerToken: "",
-      headers: [],
-      params: [],
-      bodyParams: [],
-      rawParams: "",
-      rawInput: false,
-      contentType: "application/json",
-      requestType: "JavaScript XHR",
       isHidden: true,
       response: {
         status: "",
@@ -744,6 +738,71 @@ export default {
     }
   },
   computed: {
+    url: {
+        get() { return this.$store.state.request.url; },
+        set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
+      },
+    method: {
+      get() { return this.$store.state.request.method; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
+    },
+    path: {
+      get() { return this.$store.state.request.path; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
+    },
+    label: {
+      get() { return this.$store.state.request.label; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
+    },
+    auth: {
+      get() { return this.$store.state.request.auth; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
+    },
+    httpUser: {
+      get() { return this.$store.state.request.httpUser; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
+    },
+    httpPassword: {
+      get() { return this.$store.state.request.httpPassword; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
+    },
+    bearerToken: {
+      get() { return this.$store.state.request.bearerToken; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
+    },
+    headers: {
+      get() { return this.$store.state.request.headers; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
+    },
+    params: {
+      get() { return this.$store.state.request.params; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
+    },
+    bodyParams: {
+      get() { return this.$store.state.request.bodyParams; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
+    },
+    rawParams: {
+      get() { return this.$store.state.request.rawParams; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
+    },
+    rawInput: {
+      get() { return this.$store.state.request.rawInput; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
+    },
+    requestType: {
+      get() { return this.$store.state.request.requestType; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
+    },
+    contentType: {
+      get() { return this.$store.state.request.contentType; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
+    },
+    passwordFieldType: {
+      get() { return this.$store.state.request.passwordFieldType; },
+      set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' }) }
+    },
+
     selectedRequest() {
       return this.$store.state.postwoman.selectedRequest;
     },
@@ -877,31 +936,21 @@ export default {
         requestString.push('  method: "' + this.method + '",\n');
         if (this.auth === "Basic") {
           var basic = this.httpUser + ":" + this.httpPassword;
-          headers.push(
-            '    "Authorization": "Basic ' +
-              window.btoa(unescape(encodeURIComponent(basic))) +
-              ",\n"
-          );
+          this.$store.commit('addHeaders', '    "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ",\n")
         } else if (this.auth === "Bearer Token") {
-          headers.push(
-            '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n"
-          );
+          this.$store.commit('addHeaders', '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n")
         }
         if (["POST", "PUT", "PATCH"].includes(this.method)) {
           const requestBody = this.rawInput
             ? this.rawParams
             : this.rawRequestBody;
           requestString.push("  body: " + requestBody + ",\n");
-          headers.push('    "Content-Length": ' + requestBody.length + ",\n");
-          headers.push(
-            '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
-          );
+          this.$store.commit('addHeaders', '    "Content-Length": ' + requestBody.length + ",\n")
+          this.$store.commit('addHeaders', '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
         }
         if (this.headers) {
           this.headers.forEach(function(element) {
-            headers.push(
-              '    "' + element.key + '": "' + element.value + '",\n'
-            );
+            this.$store.commit('addHeaders', '    "' + element.key + '": "' + element.value + '",\n')
           });
         }
         headers = headers.join("").slice(0, -3);
@@ -1154,40 +1203,34 @@ export default {
       this.params = params;
     },
     addRequestHeader() {
-      this.headers.push({
+      this.$store.commit('addHeaders', {
         key: "",
         value: ""
       });
       return false;
     },
     removeRequestHeader(index) {
-      this.headers.splice(index, 1);
+      this.$store.commit('removeHeaders', index)
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestParam() {
-      this.params.push({
-        key: "",
-        value: ""
-      });
+      this.$store.commit('addParams', { key: "", value: "" })
       return false;
     },
     removeRequestParam(index) {
-      this.params.splice(index, 1);
+      this.$store.commit('removeParams', index)
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestBodyParam() {
-      this.bodyParams.push({
-        key: "",
-        value: ""
-      });
+      this.$store.commit('addBodyParams', { key: "", value: "" })
       return false;
     },
     removeRequestBodyParam(index) {
-      this.bodyParams.splice(index, 1);
+      this.$store.commit('removeBodyParams', index)
       this.$toast.error("Deleted", {
         icon: "delete"
       });
@@ -1399,10 +1442,7 @@ export default {
         this.path = "";
         this.headers = [];
         for (const key of Object.keys(parsedCurl.headers)) {
-          this.headers.push({
-            key: key,
-            value: parsedCurl.headers[key]
-          });
+          this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
         }
         this.method = parsedCurl.method.toUpperCase();
         if (parsedCurl["data"]) {
@@ -1493,6 +1533,10 @@ export default {
     setExclude (excludedField, excluded) {
         this.urlExcludes[excludedField] = excluded;
         this.setRouteQueryState();
+    },
+    methodChange() {
+      // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
+      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '';
     }
   },
   mounted() {
@@ -1528,4 +1572,4 @@ export default {
     );
   }
 };
-</script>
+</script>

store/index.js

@@ -1,3 +1,24 @@
-export default {
+import Vuex from 'vuex';
+import state from './state';
+import VuexPersist from 'vuex-persist'
 
-}
+export default {
+  install(Vue) {
+    Vue.use(Vuex);
+
+    const vuexLocalStorage = new VuexPersist({
+      key: 'vuex',
+      storage: window.localStorage,
+      reducer: ({ ...request }) => ({
+        ...request
+      })
+    })
+
+    const store = new Vuex.Store({
+      state,
+      plugins: [vuexLocalStorage.plugin]
+    });
+
+    Vue.prototype.$store = store;
+  },
+};

store/mutations.js

@@ -0,0 +1,53 @@
+export default {
+  setState(state, object){
+    state.request[object.attribute] = object.value
+  },
+
+  addHeaders(state, value) {
+    state.request.headers.push(value);
+  },
+
+  removeHeaders(state, index) {
+    state.request.headers.splice(index, 1)
+  },
+
+  setKeyHeader(state, object) {
+    state.request.headers[object.index].key = object.value
+  },
+
+  setValueHeader(state, object) {
+    state.request.headers[object.index].value = object.value
+  },
+
+  addParams(state, value) {
+    state.request.params.push(value);
+  },
+
+  removeParams(state, index) {
+    state.request.params.splice(index, 1)
+  },
+
+  setKeyParams(state, object) {
+    state.request.params[object.index].key = object.value
+  },
+
+  setValueParams(state, object) {
+    state.request.params[object.index].value = object.value
+  },
+
+  addBodyParams(state, value) {
+    state.request.bodyParams.push(value);
+  },
+
+  removeBodyParams(state, index) {
+    state.request.bodyParams.splice(index, 1)
+  },
+
+  setKeyBodyParams(state, object) {
+    state.request.bodyParams[object.index].key = object.value
+  },
+
+  setValueBodyParams(state, object) {
+    state.request.bodyParams[object.index].value = object.value
+  },
+};

store/state.js

@@ -0,0 +1,19 @@
+export default {
+  request: {
+    method: 'GET',
+    url: 'https://reqres.in',
+    path: '/api/users',
+    label: '',
+    auth: 'None',
+    httpUser: '',
+    httpPassword: '',
+    bearerToken: '',
+    headers: [],
+    params: [],
+    bodyParams: [],
+    rawParams: '',
+    rawInput: false,
+    requestType: '',
+    contentType: '',
+  }
+};