Merge remote-tracking branch 'upstream/master'

components/history.vue

@@ -0,0 +1,146 @@
+<template>
+  <pw-section class="gray" label="History">
+    <ul>
+      <li id="filter-history">
+        <label for="filter-history-input">Search History</label>
+        <input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
+      </li>
+    </ul>
+    <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
+      <ul v-for="entry in filteredHistory" :key="entry.millis" class="entry">
+        <li>
+          <label :for="'time#' + entry.millis">Time</label>
+          <input :id="'time#' + entry.millis" type="text" readonly :value="entry.time" :title="entry.date">
+        </li>
+        <li class="method-list-item">
+          <label :for="'time#' + entry.millis">Method</label>
+          <input :id="'method#' + entry.millis" 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>
+          <label :for="'url#' + entry.millis">URL</label>
+          <input :id="'url#' + entry.millis" type="text" readonly :value="entry.url">
+        </li>
+        <li>
+          <label :for="'path#' + entry.millis">Path</label>
+          <input :id="'path#' + entry.millis" type="text" readonly :value="entry.path">
+        </li>
+        <li>
+          <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
+            Delete
+          </button>
+        </li>
+        <li>
+          <label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
+          <button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
+            Use
+          </button>
+        </li>
+      </ul>
+    </virtual-list>
+    <ul :class="{hidden: filteredHistory.length != 0 || history.length === 0 }">
+      <li>
+        <label>Nothing found for "{{filterText}}"</label>
+      </li>
+    </ul>
+    <ul>
+      <li v-if="!isClearingHistory">
+        <button id="clear-history-button" :class="{ disabled: history.length === 0 }" @click="enableHistoryClearing">
+          Clear History
+        </button>
+      </li>
+      <li v-else>
+        <div class="flex-wrap">
+          <label for="clear-history-button">Are you sure?</label>
+          <div>
+            <button id="confirm-clear-history-button" @click="clearHistory">
+              Yes
+            </button>
+            <button id="reject-clear-history-button" @click="disableHistoryClearing">
+              No
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </pw-section>
+</template>
+<script>
+  import VirtualList from 'vue-virtual-scroll-list'
+  import section from "./section";
+  import {
+    findStatusGroup
+  } from "../pages/index";
+  const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
+  export default {
+    components: {
+      'pw-section': section,
+      VirtualList
+    },
+    data() {
+      const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
+      return {
+        history: localStorageHistory || [],
+        filterText: '',
+        showFilter: false,
+        isClearingHistory: false
+      }
+    },
+    computed: {
+      filteredHistory() {
+        return this.history.filter(entry => {
+          const filterText = this.filterText.toLowerCase();
+          return Object.keys(entry).some(key => {
+            let value = entry[key];
+            value = typeof value !== 'string' ? value.toString() : value;
+            return value.toLowerCase().includes(filterText);
+          });
+        });
+      }
+    },
+    methods: {
+      clearHistory() {
+        this.history = [];
+        this.filterText = '';
+        this.disableHistoryClearing();
+        updateOnLocalStorage('history', this.history);
+      },
+      useHistory(entry) {
+        this.$emit('useHistory', entry);
+      },
+      findEntryStatus(entry) {
+        const foundStatusGroup = findStatusGroup(entry.status);
+        return foundStatusGroup || {
+          className: ''
+        };
+      },
+      deleteHistory(entry) {
+        this.history.splice(this.history.indexOf(entry), 1);
+        if (this.history.length === 0) {
+          this.filterText = '';
+        }
+        updateOnLocalStorage('history', this.history);
+      },
+      addEntry(entry) {
+        this.history.push(entry);
+        updateOnLocalStorage('history', this.history);
+      },
+      enableHistoryClearing() {
+        this.isClearingHistory = true;
+      },
+      disableHistoryClearing() {
+        this.isClearingHistory = false;
+      }
+    }
+  }
+
+</script>
+<style scoped lang="scss">
+  .virtual-list {
+    [readonly] {
+      cursor: default;
+    }
+  }
+
+</style>

components/toggle.vue

@@ -3,7 +3,8 @@
     <label class="toggle" :class="{on: on}" ref="toggle">
       <span class="handle"></span>
     </label>
-    <label class="caption"><slot /></label>
+    <label class="caption">
+      <slot /></label>
   </div>
 </template>
 
@@ -14,7 +15,7 @@
   $inactiveColor: var(--fg-color);
 
   $inactiveHandleColor: $inactiveColor;
-  $activeHandleColor: var(--fg-color);
+  $activeHandleColor: var(--act-color);
 
   $width: 50px;
   $height: 20px;
@@ -27,7 +28,7 @@
   }
 
   label.caption {
-    margin-left: 5px;
+    margin-left: 4px;
     vertical-align: middle;
   }
 
@@ -75,6 +76,7 @@
       }
     }
   }
+
 </style>
 
 <script>
@@ -95,4 +97,5 @@
     }
 
   }
+
 </script>

pages/index.vue

@@ -187,46 +187,12 @@
         </li>
       </ul>
     </pw-section>
-    <pw-section class="gray" label="History">
+    <history @useHistory="handleUseHistory" ref="historyComponent" />
-      <ul>
-        <li>
-          <button :class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
-        </li>
-      </ul>
-      <virtual-list class="virtual-list" :size="89" :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" :title="entry.date">
-          </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}">
-            <span class="entry-status-code">{{entry.status}}</span>
-          </li>
-          <li>
-            <label for="url">URL</label>
-            <input name="url" type="text" readonly :value="entry.url">
-          </li>
-          <li>
-            <label for="path">Path</label>
-            <input name="path" type="text" readonly :value="entry.path">
-          </li>
-          <li>
-            <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>
-            <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 history from "../components/history";
   import section from "../components/section";
 
   const statusCategories = [{
@@ -261,7 +227,6 @@
       className: 'missing-data-response'
     }
   ];
-
   const parseHeaders = xhr => {
     const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
     const headerMap = {};
@@ -274,12 +239,12 @@
     return headerMap
 
   };
-  const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
+  export const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
 
   export default {
     components: {
       'pw-section': section,
-      VirtualList
+      history
     },
     data() {
       return {
@@ -301,7 +266,6 @@
           headers: '',
           body: ''
         },
-        history: window.localStorage.getItem('history') ? JSON.parse(window.localStorage.getItem('history')) : [],
         previewEnabled: false
       }
     },
@@ -309,16 +273,15 @@
       statusCategory() {
         return findStatusGroup(this.response.status);
       },
-      noHistoryToClear() {
-        return this.history.length === 0;
-      },
       isValidURL() {
         const protocol = '^(https?:\\/\\/)?';
         const validIP = new RegExp(protocol + "(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$");
         const validHostname = new RegExp(protocol + "(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$");
         return validIP.test(this.url) || validHostname.test(this.url);
       },
-      hasRequestBody () { return['POST', 'PUT', 'PATCH'].includes(this.method); },
+      hasRequestBody() {
+        return ['POST', 'PUT', 'PATCH'].includes(this.method);
+      },
       rawRequestBody() {
         const {
           bodyParams
@@ -370,33 +333,18 @@
       }
     },
     methods: {
-      findEntryStatus(entry) {
+      handleUseHistory({
-        let foundStatusGroup = findStatusGroup(entry.status);
-        return foundStatusGroup || {
-          className: ''
-        };
-      },
-      deleteHistory(entry) {
-        this.history.splice(this.history.indexOf(entry), 1)
-        window.localStorage.setItem('history', JSON.stringify(this.history))
-      },
-      clearHistory() {
-        this.history = []
-        window.localStorage.setItem('history', JSON.stringify(this.history))
-      },
-      useHistory({
         method,
         url,
         path
       }) {
-        this.method = method
+        this.method = method;
-        this.url = url
+        this.url = url;
-        this.path = path
+        this.path = path;
         this.$refs.request.$el.scrollIntoView({
           behavior: 'smooth'
-        })
+        });
       },
-
       async sendRequest() {
         if (!this.isValidURL) {
           alert('Please check the formatting of the URL.');
@@ -467,23 +415,33 @@
             const date = new Date().toLocaleDateString();
             const time = new Date().toLocaleTimeString();
 
-              this.history.push({
+            // Addition of an entry to the history component.
+            const entry = {
               status,
               date,
               time,
-
               method: this.method,
               url: this.url,
               path: this.path
-              });
+            };
-
+            this.$refs.historyComponent.addEntry(entry);
-              window.localStorage.setItem('history', JSON.stringify(this.history));
           })();
         } catch (error) {
           if (error.response) {
             this.response.headers = error.response.headers;
             this.response.status = error.response.status;
             this.response.body = error.response.data;
+
+            // Addition of an entry to the history component.
+            const entry = {
+              status: this.response.status,
+              date: new Date().toLocaleDateString(),
+              time: new Date().toLocaleTimeString(),
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
+            this.$refs.historyComponent.addEntry(entry);
             return;
           }