kopia lustrzana https://github.com/nextcloud/social
231 wiersze
6.0 KiB
Vue
231 wiersze
6.0 KiB
Vue
<!--
|
|
- @copyright Copyright (c) 2020 Julien Veyssier <eneiluj@posteo.net>
|
|
-
|
|
- @author Julien Veyssier <eneiluj@posteo.net>
|
|
-
|
|
- @license GNU AGPL version 3 or any later version
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as
|
|
- published by the Free Software Foundation, either version 3 of the
|
|
- License, or (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
-
|
|
-->
|
|
|
|
<template>
|
|
<NcDashboardWidget :items="items"
|
|
:show-more-url="showMoreUrl"
|
|
:show-more-text="title"
|
|
:loading="state === 'loading'">
|
|
<template #empty-content>
|
|
<NcEmptyContent v-if="emptyContentMessage"
|
|
:icon="emptyContentIcon">
|
|
<template #desc>
|
|
{{ emptyContentMessage }}
|
|
<div v-if="state === 'error'" class="connect-button">
|
|
<a class="button" :href="appUrl">
|
|
{{ t('social', 'Go to Social app') }}
|
|
</a>
|
|
</div>
|
|
</template>
|
|
</NcEmptyContent>
|
|
</template>
|
|
</NcDashboardWidget>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from '@nextcloud/axios'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import { showError } from '@nextcloud/dialogs'
|
|
import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
|
|
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
|
|
components: {
|
|
NcDashboardWidget,
|
|
NcEmptyContent,
|
|
},
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
notifications: [],
|
|
showMoreUrl: generateUrl('/apps/social/timeline/notifications'),
|
|
showMoreText: t('social', 'Social notifications'),
|
|
loop: null,
|
|
state: 'loading',
|
|
appUrl: generateUrl('/apps/social'),
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
/** @return {object[]} */
|
|
items() {
|
|
return this.notifications.map((n) => {
|
|
return {
|
|
id: n.id,
|
|
targetUrl: this.getNotificationTarget(n),
|
|
avatarUrl: this.getAvatarUrl(n),
|
|
avatarUsername: this.getActorName(n),
|
|
overlayIconUrl: this.getNotificationTypeImage(n),
|
|
mainText: this.getMainText(n),
|
|
subText: this.getSubline(n),
|
|
}
|
|
})
|
|
},
|
|
/** @return {number} */
|
|
lastTimestamp() {
|
|
return this.notifications.length
|
|
? this.notifications[0].publishedTime
|
|
: 0
|
|
},
|
|
/** @return {string} */
|
|
emptyContentMessage() {
|
|
if (this.state === 'error') {
|
|
return t('social', 'Error getting Social notifications')
|
|
} else if (this.state === 'ok') {
|
|
return t('social', 'No Social notifications!')
|
|
}
|
|
return ''
|
|
},
|
|
/** @return {string} */
|
|
emptyContentIcon() {
|
|
if (this.state === 'error') {
|
|
return 'icon-close'
|
|
} else if (this.state === 'ok') {
|
|
return 'icon-checkmark'
|
|
}
|
|
return 'icon-checkmark'
|
|
},
|
|
},
|
|
|
|
beforeMount() {
|
|
this.fetchNotifications()
|
|
this.loop = setInterval(() => this.fetchNotifications(), 10000)
|
|
},
|
|
|
|
methods: {
|
|
fetchNotifications() {
|
|
const req = {
|
|
params: {
|
|
limit: 10,
|
|
},
|
|
}
|
|
const url = generateUrl('/apps/social/api/v1/stream/notifications')
|
|
// TODO check why 'since' param is in fact 'until'
|
|
/* if (this.lastDate) {
|
|
req.params.since = this.lastTimestamp,
|
|
} */
|
|
axios.get(url, req).then((response) => {
|
|
if (response.data?.result) {
|
|
this.processNotifications(response.data.result)
|
|
this.state = 'ok'
|
|
} else {
|
|
this.state = 'error'
|
|
}
|
|
}).catch((error) => {
|
|
clearInterval(this.loop)
|
|
if (error.response?.status && error.response.status >= 400) {
|
|
showError(t('social', 'Failed to get Social notifications'))
|
|
this.state = 'error'
|
|
} else {
|
|
// there was an error in notif processing
|
|
console.error(error)
|
|
}
|
|
})
|
|
},
|
|
processNotifications(newNotifications) {
|
|
if (this.lastTimestamp !== 0) {
|
|
// just add those which are more recent than our most recent one
|
|
let i = 0
|
|
while (i < newNotifications.length && this.lastTimestamp < newNotifications[i].publishedTime) {
|
|
i++
|
|
}
|
|
if (i > 0) {
|
|
const toAdd = this.filter(newNotifications.slice(0, i))
|
|
this.notifications = toAdd.concat(this.notifications)
|
|
}
|
|
} else {
|
|
// first time, we don't check the date
|
|
this.notifications = this.filter(newNotifications)
|
|
}
|
|
},
|
|
filter(notifications) {
|
|
return notifications
|
|
// TODO check if we need to filter
|
|
/* return notifications.filter((n) => {
|
|
return (n.type === 'something' || n.subtype === 'somethingElse')
|
|
}) */
|
|
},
|
|
getMainText(n) {
|
|
if (n.subtype === 'Follow') {
|
|
return t('social', '{account} is following you', { account: this.getActorName(n) })
|
|
}
|
|
if (n.subtype === 'Like') {
|
|
return t('social', '{account} liked your post', { account: this.getActorName(n) })
|
|
}
|
|
},
|
|
getAvatarUrl(n) {
|
|
return undefined
|
|
// TODO get external and internal avatars
|
|
/* return this.getActorAccountName(n)
|
|
? generateUrl('???')
|
|
: undefined */
|
|
},
|
|
getActorName(n) {
|
|
return n.actor_info && n.actor_info.type === 'Person' && n.actor_info.preferredUsername
|
|
? n.actor_info.preferredUsername
|
|
: ''
|
|
},
|
|
getActorAccountName(n) {
|
|
return n.actor_info && n.actor_info.type === 'Person' && n.actor_info.account
|
|
? n.actor_info.account
|
|
: ''
|
|
},
|
|
getNotificationTarget(n) {
|
|
if (n.subtype === 'Follow') {
|
|
return generateUrl('/apps/social/@' + this.getActorAccountName(n) + '/')
|
|
}
|
|
return this.showMoreUrl
|
|
},
|
|
getSubline(n) {
|
|
if (n.subtype === 'Follow') {
|
|
return this.getActorAccountName(n)
|
|
}
|
|
if (n.subtype === 'Like') {
|
|
return this.getActorAccountName(n)
|
|
}
|
|
return ''
|
|
},
|
|
getNotificationTypeImage(n) {
|
|
if (n.subtype === 'Follow') {
|
|
return generateUrl('/svg/social/add_user')
|
|
}
|
|
return ''
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .connect-button {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|