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

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@nuxtjs/pwa": "^3.0.0-0",
     "nuxt": "^2.0.0",
+    "vue-virtual-scroll-list": "^1.4.2",
     "vuex-persist": "^2.0.1"
   },
   "devDependencies": {

pages/index.vue

@@ -191,14 +191,16 @@
           <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
         </li>
       </ul>
-      <ul v-for="entry in history">
+      <virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)">
+        <ul v-for="entry in history" :key="entry.millis" class="entry">
           <li>
             <label for="time">Time</label>
             <input name="time" type="text" readonly :value="entry.time">
           </li>
           <li class="method-list-item">
             <label for="method">Method</label>
-          <input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
+            <input name="method" type="text" readonly
+                   :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
             <span class="entry-status-code">{{entry.status}}</span>
           </li>
           <li>
@@ -210,18 +212,22 @@
             <input name="path" type="text" readonly :value="entry.path">
           </li>
           <li>
-          <label for="delete" class="hide-on-small-screen">&nbsp;</label>
+            <label for="delete"class="hide-on-small-screen">&nbsp;</label>
             <button name="delete" @click="deleteHistory(entry)">Delete</button>
           </li>
           <li>
-          <label for="use" class="hide-on-small-screen">&nbsp;</label>
+            <label for="use"class="hide-on-small-screen">&nbsp;</label>
             <button name="use" @click="useHistory(entry)">Use</button>
           </li>
         </ul>
+      </virtual-list>
     </pw-section>
   </div>
 </template>
 <script>
+  import VirtualList from 'vue-virtual-scroll-list'
+  import section from "../components/section";
+
   const statusCategories = [{
     name: 'informational',
       statusCodeRegex: new RegExp(/[1][0-9]+/),
@@ -264,14 +270,16 @@
           headerMap[header] = value
       });
       return headerMap
+
   };
   const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
-  import section from "../components/section";
+
   export default {
       components: {
-      'pw-section': section
+      'pw-section': section,
+      VirtualList
     },
-    data() {
+      data () {
           return {
               method: 'GET',
               url: 'https://reqres.in',
@@ -279,8 +287,7 @@
               path: '/api/users',
               httpUser: '',
               httpPassword: '',
-        bearerToken: '',
+              bearerToken: '',headers: [],
-        headers: [],
         params: [],
         bodyParams: [],
         rawParams: '',
@@ -352,7 +359,7 @@
             key,
             value
           }) => `${key}=${encodeURIComponent(value)}`).join('&')
-        return result == '' ? '' : `?${result}`
+        return result === '' ? '' : `?${result}`
       },
       responseType() {
         return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
@@ -360,7 +367,8 @@
     },
     methods: {
       findEntryStatus(entry) {
-        return findStatusGroup(entry.status);
+        let foundStatusGroup = findStatusGroup(entry.status);
+            return foundStatusGroup || {className: ''};
           },
           deleteHistory(entry) {
               this.history.splice(this.history.indexOf(entry), 1)
@@ -386,8 +394,7 @@
         if (!this.isValidURL) {
           alert('Please check the formatting of the URL');
           return
-        }
+        }    if (this.$refs.response.$el.classList.contains('hidden')) {
-        if (this.$refs.response.$el.classList.contains('hidden')) {
               this.$refs.response.$el.classList.toggle('hidden')
             }
             this.$refs.response.$el.scrollIntoView({
@@ -400,9 +407,8 @@
             const user = this.auth === 'Basic' ? this.httpUser : null;
             const password = this.auth === 'Basic' ? this.httpPassword : null;
             xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
-        if (this.auth === 'Bearer Token') xhr.setRequestHeader(
+            if (this.auth === 'Bearer Token')
-          'Authorization',
+              xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken
-          'Bearer ' + this.bearerToken
             );
             if (this.headers) {
           this.headers.forEach(function(element) {
@@ -422,7 +428,8 @@
               const headers = this.response.headers = parseHeaders(xhr);
           this.response.body = xhr.responseText;
               if ((headers['content-type'] || '').startsWith('application/json')) {
-            this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
+                this.response.body = JSON.stringify(JSON.parse(
+                this.response.body ), null, 2);
               }
               const n = new Date().toLocaleTimeString();
               this.history = [{