Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
<tr :class="[{'disabled-row': item.is_read}]">
<td>
<actor-link class="user" :actor="item.activity.actor" />
</td>
<td>
<router-link tag="span" class="link" v-if="notificationData.detailUrl" :to="notificationData.detailUrl">
{{ notificationData.message }}
</router-link>
<template v-else>{{ notificationData.message }}</template>
<template v-if="notificationData.action">
<div @click="handleAction(notificationData.action.handler)" :class="['ui', 'basic', 'tiny', notificationData.action.buttonClass || '', 'button']">
<i v-if="notificationData.action.icon" :class="[notificationData.action.icon, 'icon']" />
{{ notificationData.action.label }}
</div>
</template>
</td>
<td><human-date :date="item.activity.creation_date" /></td>
<td class="read collapsing">
<span @click="markRead(false)" v-if="item.is_read" :title="labels.markUnread">
<i class="redo icon" />
</span>
<span @click="markRead(true)" v-else :title="labels.markRead">
<i class="check icon" />
</span>
</td>
</tr>
</template>
<script>
import axios from 'axios'
export default {
props: ['item'],
computed: {
message () {
return 'plop'
},
labels () {
let libraryFollowMessage = this.$gettext('%{ username } followed your library "%{ library }"')
let libraryAcceptFollowMessage = this.$gettext('%{ username } accepted your follow on library "%{ library }"')
let libraryPendingFollowMessage = this.$gettext('%{ username } wants to follow your library "%{ library }"')
return {
libraryFollowMessage,
libraryAcceptFollowMessage,
libraryPendingFollowMessage,
markRead: this.$gettext('Mark as read'),
markUnread: this.$gettext('Mark as unread'),
}
},
username () {
return this.item.activity.actor.preferred_username
},
notificationData () {
let self = this
let a = this.item.activity
if (a.type === 'Follow') {
if (a.object && a.object.type === 'music.Library') {
let action = null
let message = null
message = this.labels.libraryPendingFollowMessage
action = {
buttonClass: 'green',
icon: 'check',
label: this.$gettext('Approve'),
handler: () => { self.approveLibraryFollow(a.related_object) }
}
} else {
message = this.labels.libraryFollowMessage
}
return {
action,
detailUrl: {name: 'content.libraries.detail', params: {id: a.object.uuid}},
message: this.$gettextInterpolate(
message,
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
{username: this.username, library: a.object.name}
)
}
}
}
if (a.type === 'Accept') {
if (a.object && a.object.type === 'federation.LibraryFollow') {
return {
detailUrl: {name: 'content.remote.index'},
message: this.$gettextInterpolate(
this.labels.libraryAcceptFollowMessage,
{username: this.username, library: a.related_object.name}
)
}
}
}
return {}
}
},
methods: {
handleAction (handler) {
// call handler then mark notification as read
handler()
this.markRead(true)
},
approveLibraryFollow (follow) {
let self = this
let action = 'accept'
axios.post(`federation/follows/library/${follow.uuid}/${action}/`).then((response) => {
follow.isLoading = false
follow.approved = true
})
},
markRead (value) {
let self = this
let action = 'accept'
axios.patch(`federation/inbox/${this.item.id}/`, {is_read: value}).then((response) => {
self.item.is_read = value
if (value) {
self.$store.commit('ui/incrementNotifications', {type: 'inbox', count: -1})
} else {
self.$store.commit('ui/incrementNotifications', {type: 'inbox', count: 1})
}
})
}
}
}
</script>
<style scoped>
.read > span {
cursor: pointer;
}
.disabled-row {
color: rgba(40, 40, 40, 0.3);
}
</style>