Sync bodyParams and rawBodyParams (#1562)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Joel DSouza <joel.dsouza@kapturecrm.com>

components/http/BodyParameters.vue

@@ -27,12 +27,7 @@
           :placeholder="`key ${index + 1}`"
           :name="`bparam ${index}`"
           :value="param.key"
-          @change="
+          @change="updateBodyParams($event, index, `setKeyBodyParams`)"
-            $store.commit('setKeyBodyParams', {
-              index,
-              value: $event.target.value,
-            })
-          "
           @keyup.prevent="setRouteQueryState"
           autofocus
         />
@@ -45,10 +40,7 @@
           @change="
             // if input is form data, set value to be an array containing the value
             // only
-            $store.commit('setValueBodyParams', {
+            updateBodyParams($event, index, `setValueBodyParams`)
-              index,
-              value: $event.target.value,
-            })
           "
           @keyup.prevent="setRouteQueryState"
         />
@@ -68,12 +60,7 @@
         <li>
           <button
             class="icon"
-            @click="
+            @click="toggleActive(index,param)"
-              $store.commit('setActiveBodyParams', {
-                index,
-                value: param.hasOwnProperty('active') ? !param.active : false,
-              })
-            "
             v-tooltip.bottom="{
               content: param.hasOwnProperty('active')
                 ? param.active
@@ -161,6 +148,9 @@ export default {
       this.$emit("set-route-query-state")
     },
     removeRequestBodyParam(index) {
+      const paramArr = this.$store.state.request.bodyParams
+        .filter((item, itemIndex) => itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true))
+      this.setRawParams(paramArr)
       this.$emit("remove-request-body-param", index)
     },
     addRequestBodyParam() {
@@ -184,6 +174,44 @@ export default {
         fileIndex,
       })
     },
+    updateBodyParams(event, index, type){
+      this.$store.commit(type, {
+        index,
+        value: event.target.value,
+      })
+      let paramArr = this.$store.state.request.bodyParams
+        .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+        
+        this.setRawParams(paramArr)
+    },
+    toggleActive(index, param){
+      let paramArr = this.$store.state.request.bodyParams
+      .filter((item, itemIndex) => {
+          if(index === itemIndex){
+              return !param.active
+          } else {
+              return item.hasOwnProperty("active") ? item.active == true : true
+          }
+      })
+        
+      this.setRawParams(paramArr)
+
+      this.$store.commit('setActiveBodyParams', {
+        index,
+        value: param.hasOwnProperty('active') ? !param.active : false,
+      })
+    },
+    setRawParams(filteredParamArr){
+      let rawParams = {}
+      filteredParamArr.forEach(_param=>{
+        rawParams={
+          ...rawParams,
+          [_param.key]:_param.value
+        }
+      })
+      const rawParamsStr = JSON.stringify(rawParams,null,2)
+      this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
+    }
   },
   computed: {
     contentType() {

pages/index.vue

@@ -1037,6 +1037,22 @@ export default {
       },
       set(value) {
         this.$store.commit("setState", { value, attribute: "rawParams" })
+        // Convert the rawParams to bodyParams format
+        try{
+          const valueObj = JSON.parse(value)
+          const params = Object.keys(valueObj).map(key=>{
+            if(typeof valueObj[key] !== "function"){
+              return {
+                active: true,
+                key,
+                value: valueObj[key]
+              }
+            }
+            })
+          this.$store.commit("setBodyParams", { params })
+        } catch {
+          
+        }
       },
     },
     rawInput: {

store/mutations.js

@@ -107,6 +107,10 @@ export default {
     request.bodyParams[index].value = value
   },
 
+  setBodyParams({request},{params}){
+    request.bodyParams = params
+  },
+
   // While this mutation is same as the setValueBodyParams above, it is excluded
   // from vuex-persist. We will commit this mutation while adding a file
   // param as there is no way to serialize File objects and thus we cannot