86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex items-stretch group">
|
|
<span
|
|
class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
|
|
:class="entryStatus.className"
|
|
data-testid="restore_history_entry"
|
|
:title="`${duration}`"
|
|
@click="$emit('use-entry')"
|
|
>
|
|
{{ entry.request.method }}
|
|
</span>
|
|
<span
|
|
class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
|
|
data-testid="restore_history_entry"
|
|
:title="`${duration}`"
|
|
@click="$emit('use-entry')"
|
|
>
|
|
<span class="truncate">
|
|
{{ entry.request.endpoint }}
|
|
</span>
|
|
</span>
|
|
<ButtonSecondary
|
|
v-tippy="{ theme: 'tooltip' }"
|
|
svg="trash"
|
|
color="red"
|
|
:title="$t('action.remove')"
|
|
class="hidden group-hover:inline-flex"
|
|
data-testid="delete_history_entry"
|
|
@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 }"
|
|
:svg="entry.star ? 'star-solid' : 'star'"
|
|
color="yellow"
|
|
data-testid="star_button"
|
|
@click.native="$emit('toggle-star')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
|
|
import findStatusGroup from "~/helpers/findStatusGroup"
|
|
import { useI18n } from "~/helpers/utils/composables"
|
|
import { RESTHistoryEntry } from "~/newstore/history"
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
entry: { type: Object as PropType<RESTHistoryEntry>, default: () => {} },
|
|
showMore: Boolean,
|
|
},
|
|
setup(props) {
|
|
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: "",
|
|
}
|
|
)
|
|
})
|
|
|
|
return {
|
|
duration,
|
|
entryStatus,
|
|
}
|
|
},
|
|
})
|
|
</script>
|