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

✨ Adds expandable columns to History component for showing request duration and pre-request scripts if any. Fixes #233 #225

Browse Source
This commit is contained in:
liyasthomas
2019-11-08 23:22:48 +05:30
parent aae182a9f8
commit f71b940197
1 changed files with 43 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/history.vue
View File

@@ -37,12 +37,27 @@
Path Path
</label> </label>
</li> </li>
<li @click="sort_by_duration()"> <transition name="smooth" v-if="show">
<label> <li>
Duration <ul>
</label> <li @click="sort_by_duration()">
</li> <label>
Duration
</label>
</li>
<li>
<label>
Pre-script
</label>
</li>
</ul>
</li>
</transition>
<li></li> <li></li>
<button class="icon" @click="toggleCollapse()" v-tooltip="'Show more'">
<i class="material-icons" v-if="!show">first_page</i>
<i class="material-icons" v-else>last_page</i>
</button>
</ul> </ul>
<virtual-list <virtual-list
class="virtual-list" class="virtual-list"
@@ -50,7 +65,7 @@
:size="56" :size="56"
:remain="Math.min(5, filteredHistory.length)" :remain="Math.min(5, filteredHistory.length)"
> >
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<li> <li>
<button v-if="entry.usesScripts" <button v-if="entry.usesScripts"
v-tooltip="'This entry used pre-request scripts'" v-tooltip="'This entry used pre-request scripts'"
@@ -98,12 +113,16 @@
<li> <li>
<input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" /> <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path" />
</li> </li>
<li> <transition name="smooth">
<input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" /> <div v-if="show" class="show-on-small-screen">
</li> <li>
<li> <input aria-label="Duration" type="text" readonly :value="entry.duration" placeholder="No duration" />
<input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" /> </li>
</li> <li>
<input aria-label="Pre Request Script" type="text" readonly :value="entry.preRequestScript" placeholder="No pre request script" />
</li>
</div>
</transition>
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button <button
@@ -182,6 +201,13 @@
} }
} }
.smooth-enter-active, .smooth-leave-active {
transition: all 0.2s;
}
.smooth-enter, .smooth-leave-to {
opacity: 0;
}
@media (max-width: 720px) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 200px; min-height: 200px;
@@ -214,7 +240,8 @@
reverse_sort_time: false, reverse_sort_time: false,
reverse_sort_status_code: false, reverse_sort_status_code: false,
reverse_sort_url: false, reverse_sort_url: false,
reverse_sort_path: false reverse_sort_path: false,
show: false
}; };
}, },
computed: { computed: {
@@ -348,6 +375,9 @@
}); });
this.history = byDuration; this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration; this.reverse_sort_duration = !this.reverse_sort_duration;
},
toggleCollapse: function() {
this.show = !this.show
} }
} }
}; };