Make page title dynamic, better notification handling.

This commit is contained in:
Roger Braun 2017-02-18 20:42:00 +01:00
parent d0281f5341
commit 963a0035e5
4 changed files with 38 additions and 7 deletions

View file

@ -1,4 +1,4 @@
import { sortBy, take } from 'lodash' import { sortBy, take, filter } from 'lodash'
const Notifications = { const Notifications = {
data () { data () {
@ -7,8 +7,30 @@ const Notifications = {
} }
}, },
computed: { computed: {
notifications () {
return this.$store.state.statuses.notifications
},
unseenNotifications () {
return filter(this.notifications, ({seen}) => !seen)
},
visibleNotifications () { visibleNotifications () {
return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount) // 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
}
},
watch: {
unseenCount (count) {
this.$store.dispatch('setPageTitle', `(${count})`)
}
},
methods: {
markAsSeen () {
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
} }
} }
} }

View file

@ -1,13 +1,14 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<div class="panel panel-default base00-background"> <div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div> <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification"> <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url"> <a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original"> <img class='avatar' :src="notification.action.user.profile_image_url_original">
</a> </a>
<div class='text'> <div class='text'>
<timeago :since="notification.action.created_at" :auto-update="240"></timeago>
<div v-if="notification.type === 'favorite'"> <div v-if="notification.type === 'favorite'">
<h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1> <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p> <p>{{ notification.status.text }}</p>

View file

@ -13,11 +13,14 @@ const config = {
} }
}, },
actions: { actions: {
setOption ({ commit }, { name, value }) { setPageTitle ({state}, option = '') {
document.title = `${state.name} ${option}`
},
setOption ({ commit, dispatch }, { name, value }) {
commit('setOption', {name, value}) commit('setOption', {name, value})
switch (name) { switch (name) {
case 'name': case 'name':
document.title = value dispatch('setPageTitle')
break break
case 'theme': case 'theme':
const fullPath = `/static/css/${value}` const fullPath = `/static/css/${value}`

View file

@ -173,7 +173,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
} }
const addNotification = ({type, status, action}) => { const addNotification = ({type, status, action}) => {
state.notifications.push({type, status, action}) state.notifications.push({type, status, action, seen: false})
} }
const favoriteStatus = (favorite) => { const favoriteStatus = (favorite) => {
@ -276,6 +276,11 @@ export const mutations = {
setNsfw (state, { id, nsfw }) { setNsfw (state, { id, nsfw }) {
const newStatus = find(state.allStatuses, { id }) const newStatus = find(state.allStatuses, { id })
newStatus.nsfw = nsfw newStatus.nsfw = nsfw
},
markNotificationsAsSeen (state, notifications) {
each(notifications, (notification) => {
notification.seen = true
})
} }
} }