From 06d58547c88b2f02bd2b614bb617fffff93d8366 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 4 Feb 2020 07:05:37 +0530
Subject: [PATCH] :sparkles: Custom methods support (follow up of #398)

---
 assets/css/styles.scss |   8 +++
 pages/index.vue        | 109 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 100 insertions(+), 17 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 5906ac886..382870d31 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -587,6 +587,14 @@ pre {
 .select-wrapper {
   position: relative;
 
+  input {
+    text-transform: uppercase;
+  }
+
+  .trigger {
+    width: 100%;
+  }
+
   &:after {
     display: inline-block;
     position: absolute;
diff --git a/pages/index.vue b/pages/index.vue
index 300204ede..af395bd97 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -45,17 +45,92 @@
             <li>
               <label for="method">{{ $t("method") }}</label>
               <span class="select-wrapper">
-                <select id="method" v-model="method" @change="methodChange">
-                  <option value="GET">GET</option>
-                  <option value="HEAD">HEAD</option>
-                  <option value="POST">POST</option>
-                  <option value="PUT">PUT</option>
-                  <option value="DELETE">DELETE</option>
-                  <option value="CONNECT">CONNECT</option>
-                  <option value="OPTIONS">OPTIONS</option>
-                  <option value="TRACE">TRACE</option>
-                  <option value="PATCH">PATCH</option>
-                </select>
+                <v-popover>
+                  <input id="method" v-model="method" />
+                  <template slot="popover">
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'GET'"
+                        v-close-popover
+                      >
+                        GET
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'HEAD'"
+                        v-close-popover
+                      >
+                        HEAD
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'POST'"
+                        v-close-popover
+                      >
+                        POST
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'PUT'"
+                        v-close-popover
+                      >
+                        PUT
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'DELETE'"
+                        v-close-popover
+                      >
+                        DELETE
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'CONNECT'"
+                        v-close-popover
+                      >
+                        CONNECT
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'OPTIONS'"
+                        v-close-popover
+                      >
+                        OPTIONS
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'TRACE'"
+                        v-close-popover
+                      >
+                        TRACE
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="method = 'PATCH'"
+                        v-close-popover
+                      >
+                        PATCH
+                      </button>
+                    </div>
+                  </template>
+                </v-popover>
               </span>
             </li>
             <li>
@@ -1574,6 +1649,12 @@ export default {
     editingRequest(newValue) {
       this.editRequest = newValue;
       this.showRequestModal = true;
+    },
+    method() {
+      // 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"
+        : "";
     }
   },
   computed: {
@@ -2669,12 +2750,6 @@ export default {
       }
       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"
-        : "";
-    },
     uploadPayload() {
       this.rawInput = true;
       const file = this.$refs.payload.files[0];