Merge branch 'master' of https://github.com/liyasthomas/postwoman

package-lock.json

@@ -10139,12 +10139,12 @@
       "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
     },
     "vuex-persist": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-2.0.1.tgz",
-      "integrity": "sha512-V3WSBYmxcAP6ei0VVt2lxGloeWJZgk1Ao4r+iOxLMhAv+UYIK91qbjwvqk6Xr3tAi052jzSwn8aoamtuz8ArsQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-2.1.0.tgz",
+      "integrity": "sha512-H9RqXHeynBQG60rUrsinYNLoRFXkSxh2Xx8kTVFuvLRQ9jZd3HLMvm713m2r1dN/pVZBUgiIzTu6uj5hBsAOqg==",
       "requires": {
         "flatted": "^2.0.0",
-        "lodash.merge": "^4.6.1"
+        "lodash.merge": "^4.6.2"
       }
     },
     "watchpack": {

package.json

@@ -19,7 +19,7 @@
     "nuxt": "^2.9.2",
     "vue-virtual-scroll-list": "^1.4.2",
     "vuejs-auto-complete": "^0.9.0",
-    "vuex-persist": "^2.0.1"
+    "vuex-persist": "^2.1.0"
   },
   "devDependencies": {
     "node-sass": "^4.12.0",

pages/index.vue

@@ -298,7 +298,7 @@
             }
         },
         watch: {
-            contentType (val) {
+            contentType(val) {
                 this.rawInput = !this.knownContentTypes.includes(val);
             }
         },
@@ -321,7 +321,7 @@
                 } = this
                 if (this.contentType === 'application/json') {
                     try {
-                        const obj = JSON.parse(`{${bodyParams.filter(({ key }) => !!key).map(({ key, value }) => `
+                        const obj = JSON.parse(`{${bodyParams.filter(({key}) => !!key).map(({key, value}) => `
               "${key}": "${value}"
               `).join()}}`)
                         return JSON.stringify(obj)
@@ -561,9 +561,23 @@
                     }
                 }
             },
+            setRouteQueryState() {
+                const flat = key => this[key] !== '' ? `${key}=${this[key]}&` : ''
+                const deep = key => {
+                    const haveItems = [...this[key]].length
+                    if (haveItems && this[key]['value'] !== '') {
+                        return `${key}=${JSON.stringify(this[key])}&`
+                    } else return ''
+                }
+                let flats = ['method', 'url', 'path', 'auth', 'httpUser', 'httpPassword', 'bearerToken', 'contentType'].map(item => flat(item))
+                let deeps = ['headers', 'params', 'bodyParams'].map(item => deep(item))
+                this.$router.replace('/?' + flats.concat(deeps).join('').slice(0, -1))
+            },
             setRouteQueries(queries) {
+                if (typeof (queries) !== 'object') throw new Error('Route query parameters must be a Object')
                 for (const key in queries) {
-                    if (this[key]) this[key] = queries[key];
+                    if (key === 'headers' || key === 'params' || key === 'bodyParams') this[key] = JSON.parse(queries[key])
+                    else if (typeof (this[key]) === 'string') this[key] = queries[key];
                 }
             },
             observeRequestButton() {
@@ -573,16 +587,32 @@
                     entries.forEach(entry => {
                         sendButtonElement.classList.toggle('show');
                     });
-                }, { threshold: 1 });
+                }, {threshold: 1});
 
                 observer.observe(requestElement);
             }
         },
-        created() {
-            if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
-        },
         mounted() {
             this.observeRequestButton();
+        },
+        created() {
+            if (Object.keys(this.$route.query).length) this.setRouteQueries(this.$route.query);
+            this.$watch(vm => [
+                vm.method,
+                vm.url,
+                vm.auth,
+                vm.path,
+                vm.httpUser,
+                vm.httpPassword,
+                vm.bearerToken,
+                vm.headers,
+                vm.params,
+                vm.bodyParams,
+                vm.contentType
+            ], val => {
+                this.setRouteQueryState()
+            })
+
         }
     }