53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import Status from '../status/status.vue'
|
|
import StillImage from '../still-image/still-image.vue'
|
|
import UserCardContent from '../user_card_content/user_card_content.vue'
|
|
|
|
import { sortBy, take, filter } from 'lodash'
|
|
|
|
const Notifications = {
|
|
data () {
|
|
return {
|
|
visibleNotificationCount: 10,
|
|
userExpanded: false
|
|
}
|
|
},
|
|
computed: {
|
|
notifications () {
|
|
return this.$store.state.statuses.notifications
|
|
},
|
|
unseenNotifications () {
|
|
return filter(this.notifications, ({seen}) => !seen)
|
|
},
|
|
visibleNotifications () {
|
|
// Don't know why, but sortBy([seen, -action.id]) doesn't work.
|
|
let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
|
|
sortedNotifications = sortBy(sortedNotifications, 'seen')
|
|
return take(sortedNotifications, this.visibleNotificationCount)
|
|
},
|
|
unseenCount () {
|
|
return this.unseenNotifications.length
|
|
}
|
|
},
|
|
components: {
|
|
Status, StillImage, UserCardContent
|
|
},
|
|
watch: {
|
|
unseenCount (count) {
|
|
if (count > 0) {
|
|
this.$store.dispatch('setPageTitle', `(${count})`)
|
|
} else {
|
|
this.$store.dispatch('setPageTitle', '')
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
markAsSeen () {
|
|
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
|
|
},
|
|
toggleUserExpanded () {
|
|
this.userExpanded = !this.userExpanded
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Notifications
|