3f59597864
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<template>
|
|
<div class="flex items-stretch group">
|
|
<span
|
|
v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
|
|
class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
|
|
:class="entryStatus.className"
|
|
data-testid="restore_history_entry"
|
|
:title="`${duration}`"
|
|
@click="emit('use-entry')"
|
|
>
|
|
<span class="font-semibold truncate text-tiny">
|
|
{{ entry.request.method }}
|
|
</span>
|
|
</span>
|
|
<span
|
|
v-tippy="{
|
|
theme: 'tooltip',
|
|
delay: [500, 20],
|
|
content: entry.updatedOn ? shortDateTime(entry.updatedOn) : null,
|
|
}"
|
|
class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
|
|
data-testid="restore_history_entry"
|
|
@click="emit('use-entry')"
|
|
>
|
|
<span class="truncate">
|
|
{{ entry.request.endpoint }}
|
|
</span>
|
|
</span>
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:icon="IconTrash"
|
|
color="red"
|
|
:title="t('action.remove')"
|
|
class="hidden group-hover:inline-flex"
|
|
data-testid="delete_history_entry"
|
|
@click="emit('delete-entry')"
|
|
/>
|
|
<HoppButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
:title="!entry.star ? t('add.star') : t('remove.star')"
|
|
:class="{ 'group-hover:inline-flex hidden': !entry.star }"
|
|
:icon="entry.star ? IconStarOff : IconStar"
|
|
color="yellow"
|
|
data-testid="star_button"
|
|
@click="emit('toggle-star')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue"
|
|
import findStatusGroup from "~/helpers/findStatusGroup"
|
|
import { useI18n } from "@composables/i18n"
|
|
import { RESTHistoryEntry } from "~/newstore/history"
|
|
import { shortDateTime } from "~/helpers/utils/date"
|
|
|
|
import IconStar from "~icons/lucide/star"
|
|
import IconStarOff from "~icons/lucide/star-off"
|
|
import IconTrash from "~icons/lucide/trash"
|
|
|
|
const props = defineProps<{
|
|
entry: RESTHistoryEntry
|
|
showMore: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: "use-entry"): void
|
|
(e: "delete-entry"): void
|
|
(e: "toggle-star"): void
|
|
}>()
|
|
|
|
const t = useI18n()
|
|
|
|
const duration = computed(() => {
|
|
if (props.entry.responseMeta.duration) {
|
|
const responseDuration = props.entry.responseMeta.duration
|
|
if (!responseDuration) return ""
|
|
|
|
return responseDuration > 0
|
|
? `${t("request.duration")}: ${responseDuration}ms`
|
|
: t("error.no_duration")
|
|
} else return t("error.no_duration")
|
|
})
|
|
|
|
const entryStatus = computed(() => {
|
|
const foundStatusGroup = findStatusGroup(props.entry.responseMeta.statusCode)
|
|
return (
|
|
foundStatusGroup || {
|
|
className: "",
|
|
}
|
|
)
|
|
})
|
|
</script>
|