History filtering added, added confirm mechanism for clearing history.

components/history.vue

@@ -1,12 +1,39 @@
 <template>
   <pw-section class="gray" label="History">
     <ul>
-      <li>
+      <li id="filter-history">
-        <button :class="{ disabled: history.length === 0 }" v-on:click="clearHistory">Clear History</button>
+        <label for="filter-history-input">Filter 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, history.length)">
+    <ul>
-      <ul v-for="entry in history" :key="entry.millis" class="entry">
+      <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)">
+      <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">
@@ -29,11 +56,19 @@
         </li>
         <li>
           <label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label>
-          <button :id="'delete-button#' + entry.millis" @click="deleteHistory(entry)">Delete</button>
+          <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" @click="useHistory(entry)">Use</button>
+          <button :id="'use-button#' + entry.millis"
+                  :disabled="isClearingHistory"
+                  @click="useHistory(entry)">
+            Use
+          </button>
         </li>
       </ul>
     </virtual-list>
@@ -51,14 +86,30 @@
 				components: {'pw-section': section, VirtualList},
 				data() {
 						const localStorageHistory = JSON.parse(window.localStorage.getItem('history'));
-						console.log(localStorageHistory);
 						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) {
@@ -70,16 +121,57 @@
 						},
 						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>
+<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>