Merge pull request #847 from sboulema/feature/add-format-body-option-#767

Add format body option

lang/en-US.json

@@ -184,6 +184,8 @@
   "waiting_receive_schema": "(waiting to receive schema)",
   "gql_prettify_invalid_query": "Couldn't prettify an invalid query, solve query syntax errors and try again",
   "prettify_query": "Prettify Query",
+  "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
+  "prettify_body": "Prettify body",
   "cancel": "Cancel",
   "save": "Save",
   "dismiss": "Dismiss",

pages/index.vue

@@ -262,6 +262,14 @@
                       </button>
                     </label>
                     <input ref="payload" name="payload" type="file" @change="uploadPayload" />
+                    <button
+                        class="icon"
+                        @click="prettifyRequestBody()"
+                        v-tooltip="$t('prettify_body')"
+                        v-if="rawInput && this.contentType.endsWith('json')"
+                      >
+                        <i class="material-icons">assistant</i>
+                      </button>
                   </div>
                 </div>
               </li>
@@ -2332,6 +2340,16 @@ export default {
         },
       })
     },
+    prettifyRequestBody() {
+      try {
+        const jsonObj = JSON.parse(this.rawParams)
+        this.rawParams = JSON.stringify(jsonObj, null, 2)
+      } catch (e) {
+        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+          icon: "error",
+        })
+      }
+    },
     copyRequest() {
       if (navigator.share) {
         const time = new Date().toLocaleTimeString()