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

Merge pull request #79 from izerozlu/history-fieldset-virtualscroll

Browse Source 
Virtual scroll addition for history section.
This commit is contained in:
Liyas Thomas
2019-08-28 16:42:50 +05:30
committed by GitHub
parent f004a9c322 df2ceb3fe9
commit af51c48ede
2 changed files with 133 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -13,6 +13,7 @@
"dependencies": {
"@nuxtjs/pwa": "^3.0.0-0",
"nuxt": "^2.0.0",
"vue-virtual-scroll-list": "^1.4.2",
"vuex-persist": "^2.0.1"
},
"devDependencies": {

35
pages/index.vue
View File

@@ -191,14 +191,16 @@
<button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
</li>
</ul>
<ul v-for="entry in history">
<virtual-list class="virtual-list" :size="88" :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">
</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}">
<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>
@@ -218,10 +220,14 @@
<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 section from "../components/section";
const statusCategories = [{
name: 'informational',
statusCodeRegex: new RegExp(/[1][0-9]+/),
@@ -264,12 +270,14 @@
headerMap[header] = value
});
return headerMap
};
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
import section from "../components/section";
export default {
components: {
'pw-section': section
'pw-section': section,
VirtualList
},
data () {
return {
@@ -279,8 +287,7 @@
path: '/api/users',
httpUser: '',
httpPassword: '',
bearerToken: '',
headers: [],
bearerToken: '',headers: [],
params: [],
bodyParams: [],
rawParams: '',
@@ -352,7 +359,7 @@
key,
value
}) => `${key}=${encodeURIComponent(value)}`).join('&')
return result == '' ? '' : `?${result}`
return result === '' ? '' : `?${result}`
},
responseType() {
return (this.response.headers['content-type'] || '').split(';')[0].toLowerCase();
@@ -360,7 +367,8 @@
},
methods: {
findEntryStatus(entry) {
return findStatusGroup(entry.status);
let foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {className: ''};
},
deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1)
@@ -386,8 +394,7 @@
if (!this.isValidURL) {
alert('Please check the formatting of the URL');
return
}
if (this.$refs.response.$el.classList.contains('hidden')) {
} if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden')
}
this.$refs.response.$el.scrollIntoView({
@@ -400,9 +407,8 @@
const user = this.auth === 'Basic' ? this.httpUser : null;
const password = this.auth === 'Basic' ? this.httpPassword : null;
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
if (this.auth === 'Bearer Token') xhr.setRequestHeader(
'Authorization',
'Bearer ' + this.bearerToken
if (this.auth === 'Bearer Token')
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken
);
if (this.headers) {
this.headers.forEach(function(element) {
@@ -422,7 +428,8 @@
const headers = this.response.headers = parseHeaders(xhr);
this.response.body = xhr.responseText;
if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
this.response.body = JSON.stringify(JSON.parse(
this.response.body ), null, 2);
}
const n = new Date().toLocaleTimeString();
this.history = [{