feat: history section
This commit is contained in:
Liyas Thomas
GitHub
@@ -17,8 +17,8 @@
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!entry.star ? $t('add_star') : $t('remove_star')"
|
||||
data-testid="star_button"
|
||||
:class="{ stared: entry.star }"
|
||||
:icon="entry.star ? 'star' : 'star_border'"
|
||||
color="yellow"
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
@@ -130,9 +130,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stared {
|
||||
color: #f8e81c !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
<template>
|
||||
<AppSection label="history" class="bg-green-200">
|
||||
<div class="flex">
|
||||
<AppSection label="history">
|
||||
<div class="flex sticky top-10 shadow-sm">
|
||||
<input
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
type="search"
|
||||
class="px-4 py-2 text-xs flex flex-1"
|
||||
class="px-4 py-2 text-xs flex flex-1 focus:outline-none border-divider"
|
||||
:placeholder="$t('search')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
data-testid="clear_history"
|
||||
:disabled="history.length === 0"
|
||||
icon="clear_all"
|
||||
:title="$t('clear_all')"
|
||||
@click.native="confirmRemove = true"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="divide-y overflow-auto divide-dashed divide-divider"
|
||||
:class="{ filled: filteredHistory.length }"
|
||||
>
|
||||
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
|
||||
<HistoryRestCard
|
||||
v-if="page == 'rest'"
|
||||
:id="index"
|
||||
@@ -31,56 +36,32 @@
|
||||
@delete-entry="deleteHistory(entry)"
|
||||
@use-entry="useHistory(entry)"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
<p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
|
||||
{{ $t("nothing_found") }} "{{ filterText }}"
|
||||
</p>
|
||||
<p v-if="history.length === 0">
|
||||
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
|
||||
</p>
|
||||
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryLight">
|
||||
<div
|
||||
v-if="!isClearingHistory"
|
||||
class="flex items-center justify-between flex-1"
|
||||
>
|
||||
<ButtonSecondary
|
||||
data-testid="clear_history"
|
||||
:disabled="history.length === 0"
|
||||
icon="clear_all"
|
||||
:label="$t('clear_all')"
|
||||
@click.native="enableHistoryClearing"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!showMore ? $t('show_more') : $t('hide_more')"
|
||||
:icon="!showMore ? 'unfold_more' : 'unfold_less'"
|
||||
@click.native="toggleCollapse()"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-between flex-1">
|
||||
<span class="flex items-center">
|
||||
<i class="material-icons mx-2">help_outline</i>
|
||||
{{ $t("are_you_sure") }}
|
||||
</span>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('yes')"
|
||||
data-testid="confirm_clear_history"
|
||||
icon="done"
|
||||
@click.native="clearHistory"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('no')"
|
||||
data-testid="reject_clear_history"
|
||||
icon="close"
|
||||
@click.native="disableHistoryClearing"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
|
||||
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">manage_search</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("nothing_found") }} "{{ filterText }}"
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="history.length === 0"
|
||||
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">schedule</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("history_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
:title="$t('are_you_sure_remove_history')"
|
||||
@hide-modal="confirmRemove = false"
|
||||
@resolve="clearHistory"
|
||||
/>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
@@ -103,9 +84,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
filterText: "",
|
||||
showFilter: false,
|
||||
isClearingHistory: false,
|
||||
showMore: false,
|
||||
confirmRemove: false,
|
||||
}
|
||||
},
|
||||
subscriptions() {
|
||||
@@ -132,8 +112,6 @@ export default {
|
||||
if (this.page === "rest") clearRESTHistory()
|
||||
else clearGraphqlHistory()
|
||||
|
||||
this.isClearingHistory = false
|
||||
|
||||
this.$toast.error(this.$t("history_deleted"), {
|
||||
icon: "delete",
|
||||
})
|
||||
@@ -149,16 +127,6 @@ export default {
|
||||
icon: "delete",
|
||||
})
|
||||
},
|
||||
enableHistoryClearing() {
|
||||
if (!this.history || !this.history.length) return
|
||||
this.isClearingHistory = true
|
||||
},
|
||||
disableHistoryClearing() {
|
||||
this.isClearingHistory = false
|
||||
},
|
||||
toggleCollapse() {
|
||||
this.showMore = !this.showMore
|
||||
},
|
||||
toggleStar(entry) {
|
||||
if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
|
||||
else toggleGraphqlHistoryEntryStar(entry)
|
||||
|
||||
@@ -1,126 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span
|
||||
class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
{{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
|
||||
<div class="flex group">
|
||||
<span
|
||||
class="
|
||||
font-mono font-bold
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-12
|
||||
mx-2
|
||||
truncate
|
||||
"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
{{ entry.method }}
|
||||
</span>
|
||||
<span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
|
||||
<span class="truncate">
|
||||
{{ `${entry.url}${entry.path}` }}
|
||||
</span>
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('token_req_name')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="entry.name"
|
||||
:placeholder="$t('empty_req_name')"
|
||||
class="input cursor-pointer text-sm bg-transparent"
|
||||
@click="$emit('use-entry')"
|
||||
/>
|
||||
</li>
|
||||
<span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!entry.star ? $t('add_star') : $t('remove_star')"
|
||||
data-testid="star_button"
|
||||
:class="{ stared: entry.star }"
|
||||
:icon="entry.star ? 'star' : 'star_border'"
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
</span>
|
||||
<!-- <li>
|
||||
<ButtonSecondary
|
||||
|
||||
v-tippy="{ theme: 'tooltip' }" title="{
|
||||
content: !entry.usesScripts
|
||||
? 'No pre-request script'
|
||||
: 'Used pre-request script'
|
||||
}"
|
||||
>
|
||||
<i class="material-icons">
|
||||
{{ !entry.usesScripts ? "http" : "code" }}
|
||||
</i>
|
||||
|
||||
</li> -->
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('options')"
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
data-testid="restore_history_entry"
|
||||
:aria-label="$t('edit')"
|
||||
icon="restore"
|
||||
:label="$t('restore')"
|
||||
@click.native="
|
||||
$emit('use-entry')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
data-testid="delete_history_entry"
|
||||
:aria-label="$t('delete')"
|
||||
icon="delete"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
$emit('delete-entry')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('url')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="`${entry.url}${entry.path}`"
|
||||
:placeholder="$t('no_url')"
|
||||
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="showMore" class="flex">
|
||||
<li>
|
||||
<input
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
title="entry.date"
|
||||
:aria-label="$t('time')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="entry.time"
|
||||
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:aria-label="$t('duration')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="`Duration: ${entry.duration}ms`"
|
||||
:placeholder="$t('no_duration')"
|
||||
class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
|
||||
/>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<input class="input"
|
||||
:aria-label="$t('prerequest_script')"
|
||||
type="text"
|
||||
readonly
|
||||
:value="entry.preRequestScript"
|
||||
:placeholder="$t('no_prerequest_script')"
|
||||
class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
|
||||
/>
|
||||
</li> -->
|
||||
</div>
|
||||
</transition>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
data-testid="delete_history_entry"
|
||||
icon="delete"
|
||||
:title="$t('delete')"
|
||||
class="group-hover:inline-flex hidden"
|
||||
color="red"
|
||||
@click.native="$emit('delete-entry')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!entry.star ? $t('add_star') : $t('remove_star')"
|
||||
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
|
||||
:icon="entry.star ? 'star' : 'star_border'"
|
||||
color="yellow"
|
||||
@click.native="$emit('toggle-star')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -132,11 +50,6 @@ export default {
|
||||
entry: { type: Object, default: () => {} },
|
||||
showMore: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expand: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
entryStatus() {
|
||||
const foundStatusGroup = findStatusGroup(this.entry.status)
|
||||
@@ -149,9 +62,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.stared {
|
||||
color: #f8e81c !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user