teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor(status): rework edit history list

Browse source
This commit is contained in:
三咲智子 2023-01-08 16:51:45 +08:00
parent 6308aa5c9a
commit c64106c98a
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 38 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/common/CommonPaginator.vue
View file

@ -22,7 +22,9 @@ const {
defineSlots<{ defineSlots<{
default: { default: {
items: T[]
item: T item: T
index: number
active?: boolean active?: boolean
older?: T older?: T
newer?: T // newer is undefined when index === 0 newer?: T // newer is undefined when index === 0
@ -61,6 +63,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
:active="active" :active="active"
:older="items[index + 1]" :older="items[index + 1]"
:newer="items[index - 1]" :newer="items[index - 1]"
:index="index"
:items="items"
/> />
</DynamicScroller> </DynamicScroller>
</template> </template>
@ -71,6 +75,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
:item="item" :item="item"
:older="items[index + 1]" :older="items[index + 1]"
:newer="items[index - 1]" :newer="items[index - 1]"
:index="index"
:items="items"
/> />
</template> </template>
</slot> </slot>

35
components/status/edit/StatusEditHistory.vue
View file

@ -6,38 +6,43 @@ const { status } = defineProps<{
status: mastodon.v1.Status status: mastodon.v1.Status
}>() }>()
const masto = useMasto() const paginator = useMasto().v1.statuses.listHistory(status.id)
const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.v1.statuses.listHistory(status.id).then(res => res.reverse()))
const showHistory = (edit: mastodon.v1.StatusEdit) => { const showHistory = (edit: mastodon.v1.StatusEdit) => {
openEditHistoryDialog(edit) openEditHistoryDialog(edit)
} }
const timeAgoOptions = useTimeAgoOptions() const timeAgoOptions = useTimeAgoOptions()
const reverseHistory = (items: mastodon.v1.StatusEdit[]) =>
[...items].reverse()
</script> </script>
<template> <template>
<template v-if="statusEdits"> <CommonPaginator :paginator="paginator" key-prop="createdAt" :preprocess="reverseHistory">
<template #default="{ items, item, index }">
<CommonDropdownItem <CommonDropdownItem
v-for="(edit, idx) in statusEdits"
:key="idx"
px="0.5" px="0.5"
@click="showHistory(edit)" @click="showHistory(item)"
> >
{{ getDisplayName(edit.account) }} {{ getDisplayName(item.account) }}
<template v-if="idx === statusEdits.length - 1"> <template v-if="index === items.length - 1">
<i18n-t keypath="status_history.created"> <i18n-t keypath="status_history.created">
{{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }} {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
</i18n-t> </i18n-t>
</template> </template>
<template v-else> <i18n-t v-else keypath="status_history.edited">
<i18n-t keypath="status_history.edited"> {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
{{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }}
</i18n-t> </i18n-t>
</template>
</CommonDropdownItem> </CommonDropdownItem>
</template> </template>
<template v-else> <template #loading>
<div i-ri:loader-2-fill animate-spin text-2xl ma /> <StatusEditHistorySkeleton />
<StatusEditHistorySkeleton op50 />
<StatusEditHistorySkeleton op25 />
</template> </template>
<template #done>
<span />
</template>
</CommonPaginator>
</template> </template>

3
components/status/edit/StatusEditHistorySkeleton.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<div class="skeleton-loading-bg" h-5 w-full rounded my2 />
</template>