|
|
@ -2,10 +2,12 @@ import Notification from '../notification/notification.vue'
|
|
|
|
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
|
|
|
|
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
notificationsFromStore,
|
|
|
|
notificationsFromStore,
|
|
|
|
visibleNotificationsFromStore,
|
|
|
|
filteredNotificationsFromStore,
|
|
|
|
unseenNotificationsFromStore
|
|
|
|
unseenNotificationsFromStore
|
|
|
|
} from '../../services/notification_utils/notification_utils.js'
|
|
|
|
} from '../../services/notification_utils/notification_utils.js'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
|
|
|
|
|
|
|
|
|
|
|
|
const Notifications = {
|
|
|
|
const Notifications = {
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
// Disables display of panel header
|
|
|
|
// Disables display of panel header
|
|
|
@ -18,7 +20,11 @@ const Notifications = {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
bottomedOut: false
|
|
|
|
bottomedOut: false,
|
|
|
|
|
|
|
|
// How many seen notifications to display in the list. The more there are,
|
|
|
|
|
|
|
|
// the heavier the page becomes. This count is increased when loading
|
|
|
|
|
|
|
|
// older notifications, and cut back to default whenever hitting "Read!".
|
|
|
|
|
|
|
|
seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
@ -34,14 +40,17 @@ const Notifications = {
|
|
|
|
unseenNotifications () {
|
|
|
|
unseenNotifications () {
|
|
|
|
return unseenNotificationsFromStore(this.$store)
|
|
|
|
return unseenNotificationsFromStore(this.$store)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
visibleNotifications () {
|
|
|
|
filteredNotifications () {
|
|
|
|
return visibleNotificationsFromStore(this.$store, this.filterMode)
|
|
|
|
return filteredNotificationsFromStore(this.$store, this.filterMode)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
unseenCount () {
|
|
|
|
unseenCount () {
|
|
|
|
return this.unseenNotifications.length
|
|
|
|
return this.unseenNotifications.length
|
|
|
|
},
|
|
|
|
},
|
|
|
|
loading () {
|
|
|
|
loading () {
|
|
|
|
return this.$store.state.statuses.notifications.loading
|
|
|
|
return this.$store.state.statuses.notifications.loading
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
notificationsToDisplay () {
|
|
|
|
|
|
|
|
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
@ -64,12 +73,21 @@ const Notifications = {
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
markAsSeen () {
|
|
|
|
markAsSeen () {
|
|
|
|
this.$store.dispatch('markNotificationsAsSeen')
|
|
|
|
this.$store.dispatch('markNotificationsAsSeen')
|
|
|
|
|
|
|
|
this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
|
|
|
|
},
|
|
|
|
},
|
|
|
|
fetchOlderNotifications () {
|
|
|
|
fetchOlderNotifications () {
|
|
|
|
if (this.loading) {
|
|
|
|
if (this.loading) {
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const seenCount = this.filteredNotifications.length - this.unseenCount
|
|
|
|
|
|
|
|
if (this.seenToDisplayCount < seenCount) {
|
|
|
|
|
|
|
|
this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
} else if (this.seenToDisplayCount > seenCount) {
|
|
|
|
|
|
|
|
this.seenToDisplayCount = seenCount
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const store = this.$store
|
|
|
|
const store = this.$store
|
|
|
|
const credentials = store.state.users.currentUser.credentials
|
|
|
|
const credentials = store.state.users.currentUser.credentials
|
|
|
|
store.commit('setNotificationsLoading', { value: true })
|
|
|
|
store.commit('setNotificationsLoading', { value: true })
|
|
|
@ -82,6 +100,7 @@ const Notifications = {
|
|
|
|
if (notifs.length === 0) {
|
|
|
|
if (notifs.length === 0) {
|
|
|
|
this.bottomedOut = true
|
|
|
|
this.bottomedOut = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.seenToDisplayCount += notifs.length
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|