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

⚡ Added 'Not found' prompt for empty filtered history

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-30 15:37:51 +05:30
parent 2514a60fb3
commit 542b912090
3 changed files with 185 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
components/history.vue
View File

@@ -2,34 +2,8 @@
<pw-section class="gray" label="History"> <pw-section class="gray" label="History">
<ul> <ul>
<li id="filter-history"> <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> </li>
</ul> </ul>
<virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)"> <virtual-list class="virtual-list" :size="89" :remain="Math.min(5, filteredHistory.length)">
@@ -40,10 +14,7 @@
</li> </li>
<li class="method-list-item"> <li class="method-list-item">
<label :for="'time#' + entry.millis">Method</label> <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> <span class="entry-status-code">{{entry.status}}</span>
</li> </li>
<li> <li>
@@ -56,122 +27,120 @@
</li> </li>
<li> <li>
<label :for="'delete-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label> <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 Delete
</button> </button>
</li> </li>
<li> <li>
<label :for="'use-button#' + entry.millis" class="hide-on-small-screen">&nbsp;</label> <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 Use
</button> </button>
</li> </li>
</ul> </ul>
</virtual-list> </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> </pw-section>
</template> </template>
<script> <script>
import VirtualList from 'vue-virtual-scroll-list' import VirtualList from 'vue-virtual-scroll-list'
import section from "./section"; 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
},
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;
}
}
}
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> </script>
<style scoped lang="scss"> <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 { .virtual-list {
[readonly] { [readonly] {
cursor: default; cursor: default;
} }
} }
</style> </style>

35
components/toggle.vue
View File

@@ -3,7 +3,8 @@
<label class="toggle" :class="{on: on}" ref="toggle"> <label class="toggle" :class="{on: on}" ref="toggle">
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="caption"><slot /></label> <label class="caption">
<slot /></label>
</div> </div>
</template> </template>
@@ -14,7 +15,7 @@
$inactiveColor: var(--fg-color); $inactiveColor: var(--fg-color);
$inactiveHandleColor: $inactiveColor; $inactiveHandleColor: $inactiveColor;
$activeHandleColor: var(--fg-color); $activeHandleColor: var(--act-color);
$width: 50px; $width: 50px;
$height: 20px; $height: 20px;
@@ -27,7 +28,7 @@
} }
label.caption { label.caption {
margin-left: 5px; margin-left: 4px;
vertical-align: middle; vertical-align: middle;
} }
@@ -62,7 +63,7 @@
pointer-events: none; pointer-events: none;
transition: $transition; 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 { &.on {
@@ -75,24 +76,26 @@
} }
} }
} }
</style> </style>
<script> <script>
export default { export default {
props: { props: {
'on': { 'on': {
type: Boolean, type: Boolean,
default: false default: false
}
},
methods: {
toggle () {
this.$refs.toggle.classList.toggle("on");
this.$emit('change', this.$refs.toggle.classList.contains("on"));
}
} }
},
methods: {
toggle() {
this.$refs.toggle.classList.toggle("on");
this.$emit('change', this.$refs.toggle.classList.contains("on"));
}
}
} }
</script> </script>

121
pages/index.vue
View File

@@ -187,15 +187,15 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<history @useHistory="handleUseHistory" ref="historyComponent"/> <history @useHistory="handleUseHistory" ref="historyComponent" />
</div> </div>
</template> </template>
<script> <script>
import history from "../components/history"; import history from "../components/history";
import section from "../components/section"; import section from "../components/section";
const statusCategories = [{ const statusCategories = [{
name: 'informational', name: 'informational',
statusCodeRegex: new RegExp(/[1][0-9]+/), statusCodeRegex: new RegExp(/[1][0-9]+/),
className: 'info-response' className: 'info-response'
@@ -243,8 +243,8 @@
export default { export default {
components: { components: {
'pw-section': section, 'pw-section': section,
history history
}, },
data() { data() {
return { return {
@@ -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])$"); 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); 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() { rawRequestBody() {
const { const {
bodyParams bodyParams
@@ -331,11 +333,17 @@
} }
}, },
methods: { methods: {
handleUseHistory({method,url,path}) { handleUseHistory({
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'}); this.$refs.request.$el.scrollIntoView({
behavior: 'smooth'
});
}, },
async sendRequest() { async sendRequest() {
if (!this.isValidURL) { if (!this.isValidURL) {
@@ -358,8 +366,8 @@
this.response.body = 'Loading...'; this.response.body = 'Loading...';
const auth = this.auth === 'Basic' ? { const auth = this.auth === 'Basic' ? {
username: this.httpUser, username: this.httpUser,
password: this.httpPassword password: this.httpPassword
} : null; } : null;
let headers = {}; let headers = {};
@@ -370,68 +378,75 @@
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody; const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
Object.assign(headers, { Object.assign(headers, {
'Content-Length': requestBody.length, 'Content-Length': requestBody.length,
'Content-Type': `${this.contentType}; charset=utf-8` 'Content-Type': `${this.contentType}; charset=utf-8`
}); });
} }
// If the request uses a token for auth, we want to make sure it's sent here. // 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( headers = Object.assign(
// Clone the app headers object first, we don't want to // Clone the app headers object first, we don't want to
// mutate it with the request headers added by default. // mutate it with the request headers added by default.
Object.assign({}, this.headers), Object.assign({}, this.headers),
// We make our temporary headers object the source so // We make our temporary headers object the source so
// that you can override the added headers if you // that you can override the added headers if you
// specify them. // specify them.
headers headers
); );
try { try {
const payload = await this.$axios({ const payload = await this.$axios({
method: this.method, method: this.method,
url: this.url + this.path + this.queryString, url: this.url + this.path + this.queryString,
auth, auth,
headers headers
}); });
(() => { (() => {
const status = this.response.status = payload.status; const status = this.response.status = payload.status;
const headers = this.response.headers = payload.headers; const headers = this.response.headers = payload.headers;
// We don't need to bother parsing JSON, axios already handles it for us! // We don't need to bother parsing JSON, axios already handles it for us!
const body = this.response.body = payload.data; const body = this.response.body = payload.data;
const date = new Date().toLocaleDateString(); const date = new Date().toLocaleDateString();
const time = new Date().toLocaleTimeString(); const time = new Date().toLocaleTimeString();
// Addition of an entry to the history component. // Addition of an entry to the history component.
const entry = {status, date, time, method: this.method, url: this.url, path: this.path}; const entry = {
this.$refs.historyComponent.addEntry(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.headers = error.response.headers;
this.response.status = error.response.status; this.response.status = error.response.status;
this.response.body = error.response.data; this.response.body = error.response.data;
// Addition of an entry to the history component. // Addition of an entry to the history component.
const entry = { const entry = {
status: this.response.status, status: this.response.status,
date: new Date().toLocaleDateString(), date: new Date().toLocaleDateString(),
time: new Date().toLocaleTimeString(), time: new Date().toLocaleTimeString(),
method: this.method, method: this.method,
url: this.url, url: this.url,
path: this.path path: this.path
}; };
this.$refs.historyComponent.addEntry(entry); this.$refs.historyComponent.addEntry(entry);
return; return;
} }
this.response.status = error.message; this.response.status = error.message;
this.response.body = "See JavaScript console (F12) for details."; this.response.body = "See JavaScript console (F12) for details.";
} }
}, },