btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

History filtering added, added confirm mechanism for clearing history.

Browse Source
This commit is contained in:
izerozlu
2019-08-30 10:57:46 +03:00
parent a3f8abba1a
commit 8c8d4a129e
1 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/history.vue
View File

@@ -1,12 +1,39 @@
<template>
<pw-section class="gray" label="History">
<ul>
<li>
<button :class="{ disabled: history.length === 0 }" v-on:click="clearHistory">Clear History</button>
<li id="filter-history">
<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 v-for="entry in history" :key="entry.millis" class="entry">
<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)">
<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>