Newer
Older
<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" v-html="notificationData.message">
<template v-else v-html="notificationData.message"></template>
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
<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 }"')
return {
libraryFollowMessage,
libraryAcceptFollowMessage,
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
if (!a.related_object.approved) {
action = {
buttonClass: 'green',
icon: 'check',
label: this.$gettext('Approve'),
handler: () => { self.approveLibraryFollow(a.related_object) }
}
}
return {
action,
detailUrl: {name: 'content.libraries.detail', params: {id: a.object.uuid}},
message: this.$gettextInterpolate(
this.labels.libraryFollowMessage,
{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>