elk/components/status/edit/StatusEditHistory.vue

44 lines
1.2 KiB
Vue
Raw Normal View History

2022-11-26 05:05:44 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-12-27 18:00:42 +00:00
import { formatTimeAgo } from '@vueuse/core'
2022-11-26 05:05:44 +00:00
const { status } = defineProps<{
2023-01-08 06:21:09 +00:00
status: mastodon.v1.Status
2022-11-26 05:05:44 +00:00
}>()
const masto = useMasto()
2023-01-08 06:21:09 +00:00
const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.v1.statuses.listHistory(status.id).then(res => res.reverse()))
2022-11-26 05:05:44 +00:00
2023-01-08 06:21:09 +00:00
const showHistory = (edit: mastodon.v1.StatusEdit) => {
2022-11-26 05:05:44 +00:00
openEditHistoryDialog(edit)
}
2022-12-02 02:18:36 +00:00
const timeAgoOptions = useTimeAgoOptions()
2022-11-26 05:05:44 +00:00
</script>
<template>
<template v-if="statusEdits">
<CommonDropdownItem
v-for="(edit, idx) in statusEdits"
:key="idx"
px="0.5"
@click="showHistory(edit)"
>
{{ getDisplayName(edit.account) }}
2022-12-27 18:00:42 +00:00
<template v-if="idx === statusEdits.length - 1">
<i18n-t keypath="status_history.created">
{{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }}
</i18n-t>
</template>
<template v-else>
<i18n-t keypath="status_history.edited">
{{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }}
</i18n-t>
</template>
2022-11-26 05:05:44 +00:00
</CommonDropdownItem>
</template>
<template v-else>
<div i-ri:loader-2-fill animate-spin text-2xl ma />
</template>
</template>