⚡ Added 'Not found' prompt for empty filtered history

components/history.vue

@@ -2,34 +2,8 @@
   <pw-section class="gray" label="History">
     <ul>
       <li id="filter-history">
-        <label for="filter-history-input">Filter History</label>
+        <label for="filter-history-input">Search History</label>
-        <input id="filter-history-input" type="text"
+        <input id="filter-history-input" type="text" :disabled="history.length === 0 || isClearingHistory" v-model="filterText">
-               :disabled="history.length === 0 || isClearingHistory"
-               v-model="filterText">
-      </li>
-    </ul>
-    <ul>
-      <li id="clear-history">
-        <button
-          id="clear-history-button"
-          :class="{ disabled: history.length === 0 }"
-          @click="enableHistoryClearing"
-          v-if="!isClearingHistory">
-          Clear History
-        </button>
-        <template v-else>
-          <label for="clear-history-button">Are you sure?</label>
-          <button
-            id="confirm-clear-history-button"
-            @click="clearHistory">
-            Yes
-          </button>
-          <button
-            id="reject-clear-history-button"
-            @click="disableHistoryClearing">
-            No
-          </button>
-        </template>
       </li>
     </ul>
     <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
@@ -40,10 +14,7 @@
         </li>
         <li class="method-list-item">
           <label :for="'time#' + entry.millis">Method</label>
-          <input :id="'method#' + entry.millis" type="text" readonly
+          <input :id="'method#' + entry.millis" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
-                 :value="entry.method"
-                 :class="findEntryStatus(entry).className"
-                 :style="{'--status-code': entry.status}">
           <span class="entry-status-code">{{entry.status}}</span>
         </li>
         <li>
@@ -56,34 +27,57 @@
         </li>
         <li>
           <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'delete-button#' + entry.millis"
+          <button :id="'delete-button#' + entry.millis" :disabled="isClearingHistory" @click="deleteHistory(entry)">
-                  :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"
+          <button :id="'use-button#' + entry.millis" :disabled="isClearingHistory" @click="useHistory(entry)">
-                  :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";
+  import {
-
+    findStatusGroup
+  } from "../pages/index";
   const updateOnLocalStorage = (propertyName, property) => window.localStorage.setItem(propertyName, JSON.stringify(property));
-
   export default {
-				components: {'pw-section': section, VirtualList},
+    components: {
+      'pw-section': section,
+      VirtualList
+    },
     data() {
       const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
       return {
@@ -117,7 +111,9 @@
       },
       findEntryStatus(entry) {
         const foundStatusGroup = findStatusGroup(entry.status);
-								return foundStatusGroup || {className: ''};
+        return foundStatusGroup || {
+          className: ''
+        };
       },
       deleteHistory(entry) {
         this.history.splice(this.history.indexOf(entry), 1);
@@ -138,40 +134,13 @@
       }
     }
   }
+
 </script>
-
 <style scoped lang="scss">
-  #filter-history {
-    display: flex;
-    flex-direction: row;
-
-    label {
-      flex-basis: 20%;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  #clear-history {
-    flex-direction: row;
-    justify-content: flex-end;
-
-    #clear-history-button {
-      flex: 1;
-    }
-
-    label {
-      flex: 1;
-    }
-
-    #confirm-clear-history-button, #reject-clear-history-button {
-      flex-basis: 10%;
-    }
-  }
-
   .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;
   }
 
@@ -62,7 +63,7 @@
       pointer-events: none;
       transition: $transition;
 
-      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     }
 
     &.on {
@@ -75,6 +76,7 @@
       }
     }
   }
+
 </style>
 
 <script>
@@ -88,11 +90,12 @@
     },
 
     methods: {
-          toggle () {
+      toggle() {
         this.$refs.toggle.classList.toggle("on");
         this.$emit('change', this.$refs.toggle.classList.contains("on"));
       }
     }
 
   }
+
 </script>

pages/index.vue

@@ -187,7 +187,7 @@
         </li>
       </ul>
     </pw-section>
-    <history @useHistory="handleUseHistory" ref="historyComponent"/>
+    <history @useHistory="handleUseHistory" ref="historyComponent" />
   </div>
 </template>
 
@@ -279,7 +279,9 @@
         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
@@ -331,11 +333,17 @@
       }
     },
     methods: {
-      handleUseHistory({method,url,path}) {
+      handleUseHistory({
+        method,
+        url,
+        path
+      }) {
         this.method = method;
         this.url = url;
         this.path = path;
-        this.$refs.request.$el.scrollIntoView({behavior: 'smooth'});
+        this.$refs.request.$el.scrollIntoView({
+          behavior: 'smooth'
+        });
       },
       async sendRequest() {
         if (!this.isValidURL) {
@@ -376,7 +384,7 @@
         }
 
         // If the request uses a token for auth, we want to make sure it's sent here.
-        if(this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
+        if (this.auth === 'Bearer Token') headers['Authorization'] = `Bearer ${this.bearerToken}`;
 
         headers = Object.assign(
           // Clone the app headers object first, we don't want to
@@ -408,11 +416,18 @@
             const time = new Date().toLocaleTimeString();
 
             // Addition of an entry to the history component.
-		          const entry = {status, date, time, method: this.method, url: this.url, path: this.path};
+            const entry = {
+              status,
+              date,
+              time,
+              method: this.method,
+              url: this.url,
+              path: this.path
+            };
             this.$refs.historyComponent.addEntry(entry);
           })();
-        } catch(error) {
+        } catch (error) {
-            if(error.response){
+          if (error.response) {
             this.response.headers = error.response.headers;
             this.response.status = error.response.status;
             this.response.body = error.response.data;