elk/components/notification/NotificationPaginator.vue

74 lines
1.8 KiB
Vue
Raw Normal View History

2022-11-15 21:21:54 +00:00
<script setup lang="ts">
import type { Notification, Paginator, WsEvents } from 'masto'
2022-11-30 00:47:54 +00:00
import type { GroupedNotifications } from '~/types'
2022-11-15 21:21:54 +00:00
const { paginator, stream } = defineProps<{
2022-11-15 21:21:54 +00:00
paginator: Paginator<any, Notification[]>
stream?: WsEvents
2022-11-15 21:21:54 +00:00
}>()
2022-11-30 00:47:54 +00:00
function groupItems(items: Notification[]): (Notification | GroupedNotifications)[] {
const results: (Notification | GroupedNotifications)[] = []
let id = 0
let followGroup: Notification[] = []
const bump = () => {
const alwaysGroup = true
if (!alwaysGroup && followGroup.length === 1) {
2022-11-30 00:47:54 +00:00
results.push(followGroup[0])
followGroup = []
}
else if (followGroup.length > 0) {
results.push({
id: `grouped-${id++}`,
type: 'grouped-follow',
items: followGroup,
})
followGroup = []
}
}
for (const item of items) {
if (item.type === 'follow') {
followGroup.push(item)
}
else {
bump()
results.push(item)
}
}
bump()
return results
}
const { clearNotifications } = useNotifications()
2022-11-15 21:21:54 +00:00
</script>
<template>
<CommonPaginator :paginator="paginator" :stream="stream" event-type="notification">
<template #updater="{ number, update }">
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
{{ $t('timeline.show_new_items', [number]) }}
</button>
</template>
2022-11-30 00:47:54 +00:00
<template #items="{ items }">
<template v-for="item of groupItems(items)" :key="item.id">
<NotificationGroupedFollow
v-if="item.type === 'grouped-follow'"
:items="item"
border="b base"
2022-11-30 00:47:54 +00:00
/>
<NotificationCard
v-else
:notification="item"
hover:bg-active
border="b base"
2022-11-30 00:47:54 +00:00
/>
</template>
2022-11-16 16:11:08 +00:00
</template>
</CommonPaginator>
2022-11-15 21:21:54 +00:00
</template>