URL Path Parameters #834

functions/requestParams.js

@@ -0,0 +1,17 @@
+export function hasPathParams(params) {
+    return params.some((p) => p.type === "path")
+}
+  
+export function addPathParamsToVariables(params, variables) {
+    params
+        .filter(({ key }) => !!key)
+        .filter(({ type }) => type === "path")
+        .forEach(p => variables[p.key] = p.value)
+    return variables;
+}
+
+export function getQueryParams(params) {
+    return params
+        .filter(({ key }) => !!key)
+        .filter(({ type }) => type != "path")
+}

pages/index.vue

@@ -848,6 +848,22 @@
                       "
                     />
                   </li>
+                  <li>
+                    <span class="select-wrapper">
+                      <select 
+                        :name="'type' + index" 
+                        @change="
+                          $store.commit('setTypeParams', {
+                            index,
+                            value: $event.target.value,
+                          })
+                        "
+                      >
+                        <option value="query" :selected="param.type === 'query'">{{ $t("query") }}</option>
+                        <option value="path" :selected="param.type === 'path'">{{ $t("path") }}</option>
+                      </select>
+                    </span>
+                  </li>
                   <div>
                     <li>
                       <button
@@ -1305,6 +1321,7 @@ import { tokenRequest, oauthRedirect } from "../assets/js/oauth"
 import { sendNetworkRequest } from "../functions/network"
 import { fb } from "../functions/fb"
 import { getEditorLangForMimeType } from "~/functions/editorutils"
+import { hasPathParams, addPathParamsToVariables, getQueryParams } from "../functions/requestParams.js"
 const statusCategories = [
   {
     name: "informational",
@@ -1492,8 +1509,7 @@ export default {
           return
         }
         let path = this.path
-        let queryString = newValue
+        let queryString = getQueryParams(newValue)
-          .filter(({ key }) => !!key)
           .map(({ key, value }) => `${key}=${value}`)
           .join("&")
         queryString = queryString === "" ? "" : `?${queryString}`
@@ -1503,6 +1519,7 @@ export default {
           path = path + queryString
         }
         this.path = path
+        this.setRouteQueryState()
       },
       deep: true,
     },
@@ -1573,9 +1590,11 @@ export default {
       set(value) {
         this.$store.commit("setState", { value, attribute: "uri" })
         let url = value
-        if (this.preRequestScript && this.showPreRequestScript) {
+
-          const environmentVariables = getEnvironmentVariablesFromScript(this.preRequestScript)
+        if ((this.preRequestScript && this.showPreRequestScript) || hasPathParams(this.params)) {
-          url = parseTemplateString(value, environmentVariables)
+          let environmentVariables = getEnvironmentVariablesFromScript(this.preRequestScript)
+          environmentVariables = addPathParamsToVariables(this.params, environmentVariables)
+          url = parseTemplateString(url, environmentVariables)
         }
         try {
           url = new URL(url)
@@ -1882,8 +1901,7 @@ export default {
       return result === "" ? "" : `${result}`
     },
     queryString() {
-      const result = this.params
+      const result = getQueryParams(this.params)
-        .filter(({ key }) => !!key)
         .map(({ key, value }) => `${key}=${encodeURIComponent(value)}`)
         .join("&")
       return result === "" ? "" : `?${result}`
@@ -2039,8 +2057,10 @@ export default {
         data: requestBody,
         credentials: true,
       }
-      if (preRequestScript) {
+
-        const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript)
+      if (preRequestScript || hasPathParams(this.params)) {
+        let environmentVariables = getEnvironmentVariablesFromScript(preRequestScript)
+        environmentVariables = addPathParamsToVariables(this.params, environmentVariables)
         requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables)
         requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables)
         for (let k in requestOptions.headers) {
@@ -2261,7 +2281,7 @@ export default {
       })
     },
     addRequestParam() {
-      this.$store.commit("addParams", { key: "", value: "" })
+      this.$store.commit("addParams", { key: "", value: "", type: "query" })
       return false
     },
     removeRequestParam(index) {

store/mutations.js

@@ -61,6 +61,10 @@ export default {
     request.params[index].value = value
   },
 
+  setTypeParams({ request }, { index, value }) {
+    request.params[index].type = value
+  },
+
   addBodyParams({ request }, value) {
     request.bodyParams.push(value)
   },