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

fix: remove sort history entries + fix history entries order - fixed #1455

Browse Source
This commit is contained in:
Liyas Thomas
2021-03-11 06:53:49 +00:00
committed by GitHub
parent c8cdfc8885
commit 17da230d72
7 changed files with 91 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
components/history/index.vue
View File

@@ -50,57 +50,15 @@
<i class="material-icons">clear_all</i>
<span>{{ $t("clear_all") }}</span>
</button>
<v-popover>
<button v-if="this.page == 'rest'" class="tooltip-target icon" v-tooltip="$t('sort')">
<i class="material-icons">sort</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="sort_by_label()" v-close-popover>
<i class="material-icons">sort_by_alpha</i>
<span>{{ $t("label") }}</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_time()" v-close-popover>
<i class="material-icons">access_time</i>
<span>{{ $t("time") }}</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_status_code()" v-close-popover>
<i class="material-icons">assistant</i>
<span>{{ $t("status") }}</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_url()" v-close-popover>
<i class="material-icons">language</i>
<span>{{ $t("url") }}</span>
</button>
</div>
<div>
<button class="icon" @click="sort_by_path()" v-close-popover>
<i class="material-icons">timeline</i>
<span>{{ $t("path") }}</span>
</button>
</div>
<div v-if="showMore">
<button class="icon" @click="sort_by_duration()" v-close-popover>
<i class="material-icons">timer</i>
<span>{{ $t("duration") }}</span>
</button>
</div>
<div>
<button class="icon" @click="toggleCollapse()">
<i class="material-icons">
{{ !showMore ? "first_page" : "last_page" }}
</i>
<span>{{ !showMore ? $t("show_more") : $t("hide_more") }}</span>
</button>
</div>
</template>
</v-popover>
<button
v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
class="icon"
@click="toggleCollapse()"
>
<i class="material-icons">
{{ !showMore ? "unfold_more" : "unfold_less" }}
</i>
</button>
</div>
<div class="row-wrapper" v-else>
<p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
@@ -134,14 +92,6 @@
cursor: default;
}
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
ul,
ol {
flex-direction: column;
@@ -177,11 +127,6 @@ export default {
filterText: "",
showFilter: false,
isClearingHistory: false,
reverse_sort_label: false,
reverse_sort_time: false,
reverse_sort_status_code: false,
reverse_sort_url: false,
reverse_sort_path: false,
showMore: false,
}
},
@@ -195,14 +140,17 @@ export default {
: JSON.parse(
window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
) || []
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)
return this.history
.slice()
.reverse()
.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: {
@@ -248,67 +196,6 @@ export default {
disableHistoryClearing() {
this.isClearingHistory = false
},
sort_by_time() {
let byDate = this.history.slice(0)
byDate.sort((a, b) => {
let date_a = a.date.split("/")
let date_b = b.date.split("/")
let time_a = a.time.split(":")
let time_b = b.time.split(":")
let final_a = new Date(date_a[2], date_a[1], date_a[0], time_a[0], time_a[1], time_a[2])
let final_b = new Date(date_b[2], date_b[1], date_b[0], time_b[0], time_b[1], time_b[2])
if (this.reverse_sort_time) return final_b - final_a
else return final_a - final_b
})
this.history = byDate
this.reverse_sort_time = !this.reverse_sort_time
},
sort_by_status_code() {
let byCode = this.history.slice(0)
byCode.sort((a, b) => {
if (this.reverse_sort_status_code) return b.status - a.status
else return a.status - b.status
})
this.history = byCode
this.reverse_sort_status_code = !this.reverse_sort_status_code
},
sort_by_url() {
let byUrl = this.history.slice(0)
byUrl.sort((a, b) => {
if (this.reverse_sort_url) return a.url === b.url ? 0 : +(a.url < b.url) || -1
else return a.url === b.url ? 0 : +(a.url > b.url) || -1
})
this.history = byUrl
this.reverse_sort_url = !this.reverse_sort_url
},
sort_by_label() {
let byLabel = this.history.slice(0)
byLabel.sort((a, b) => {
if (this.reverse_sort_label) return a.label === b.label ? 0 : +(a.label < b.label) || -1
else return a.label === b.label ? 0 : +(a.label > b.label) || -1
})
this.history = byLabel
this.reverse_sort_label = !this.reverse_sort_label
},
sort_by_path() {
let byPath = this.history.slice(0)
byPath.sort((a, b) => {
if (this.reverse_sort_path) return a.path === b.path ? 0 : +(a.path < b.path) || -1
else return a.path === b.path ? 0 : +(a.path > b.path) || -1
})
this.history = byPath
this.reverse_sort_path = !this.reverse_sort_path
},
sort_by_duration() {
let byDuration = this.history.slice(0)
byDuration.sort((a, b) => {
if (this.reverse_sort_duration)
return a.duration === b.duration ? 0 : +(a.duration < b.duration) || -1
else return a.duration === b.duration ? 0 : +(a.duration > b.duration) || -1
})
this.history = byDuration
this.reverse_sort_duration = !this.reverse_sort_duration
},
toggleCollapse() {
this.showMore = !this.showMore
},