akkoma-fe/src/components/user_card/user_card.js

169 lines
5.1 KiB
JavaScript
Raw Normal View History

import UserAvatar from '../user_avatar/user_avatar.vue'
import RemoteFollow from '../remote_follow/remote_follow.vue'
import ProgressButton from '../progress_button/progress_button.vue'
2019-10-08 07:21:48 +00:00
import FollowButton from '../follow_button/follow_button.vue'
2019-02-18 14:49:32 +00:00
import ModerationTools from '../moderation_tools/moderation_tools.vue'
2019-10-08 07:21:48 +00:00
import AccountActions from '../account_actions/account_actions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faBell,
faRss,
faChevronDown,
faSearchPlus,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
library.add(
faRss,
faBell,
faChevronDown,
faSearchPlus,
faExternalLinkAlt
)
export default {
props: [
2020-04-21 20:27:51 +00:00
'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
],
data () {
return {
followRequestInProgress: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter
}
},
created () {
this.$store.dispatch('fetchUserRelationship', this.user.id)
},
computed: {
2020-04-21 20:27:51 +00:00
user () {
return this.$store.getters.findUser(this.userId)
},
relationship () {
return this.$store.getters.relationship(this.userId)
2020-04-21 20:27:51 +00:00
},
2019-03-05 07:32:23 +00:00
classes () {
return [{
2019-07-05 07:02:14 +00:00
'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
'user-card-rounded': this.rounded === true, // set border-radius for all sides
'user-card-bordered': this.bordered === true // set border for all sides
2019-03-05 07:32:23 +00:00
}]
},
style () {
return {
backgroundImage: [
`linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
`url(${this.user.cover_photo})`
].join(', ')
}
},
isOtherUser () {
return this.user.id !== this.$store.state.users.currentUser.id
},
subscribeUrl () {
// eslint-disable-next-line no-undef
const serverUrl = new URL(this.user.statusnet_profile_url)
return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
},
loggedIn () {
return this.$store.state.users.currentUser
},
dailyAvg () {
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
return Math.round(this.user.statuses_count / days)
2018-06-18 08:36:58 +00:00
},
userHighlightType: {
2018-06-18 08:36:58 +00:00
get () {
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
2019-07-06 21:54:17 +00:00
return (data && data.type) || 'disabled'
2018-06-18 08:36:58 +00:00
},
set (type) {
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
if (type !== 'disabled') {
2019-07-06 21:54:17 +00:00
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
2018-06-18 08:36:58 +00:00
} else {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
2018-06-18 08:36:58 +00:00
}
},
...mapGetters(['mergedConfig'])
2018-06-18 08:36:58 +00:00
},
userHighlightColor: {
get () {
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
return data && data.color
2018-06-18 08:36:58 +00:00
},
set (color) {
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
2018-06-18 08:36:58 +00:00
}
},
visibleRole () {
2019-02-18 14:49:32 +00:00
const rights = this.user.rights
if (!rights) { return }
const validRole = rights.admin || rights.moderator
const roleTitle = rights.admin ? 'admin' : 'moderator'
return validRole && roleTitle
},
2019-11-12 15:40:36 +00:00
hideFollowsCount () {
return this.isOtherUser && this.user.hide_follows_count
},
hideFollowersCount () {
return this.isOtherUser && this.user.hide_followers_count
},
...mapGetters(['mergedConfig'])
},
components: {
UserAvatar,
2019-02-18 14:49:32 +00:00
RemoteFollow,
2019-04-16 14:13:26 +00:00
ModerationTools,
2019-10-08 07:21:48 +00:00
AccountActions,
ProgressButton,
FollowButton
},
methods: {
2019-03-01 16:37:34 +00:00
muteUser () {
this.$store.dispatch('muteUser', this.user.id)
},
2019-03-01 16:37:34 +00:00
unmuteUser () {
this.$store.dispatch('unmuteUser', this.user.id)
},
subscribeUser () {
return this.$store.dispatch('subscribeUser', this.user.id)
},
unsubscribeUser () {
return this.$store.dispatch('unsubscribeUser', this.user.id)
},
setProfileView (v) {
if (this.switcher) {
const store = this.$store
store.commit('setProfileView', { v })
}
},
2019-07-05 07:02:14 +00:00
linkClicked ({ target }) {
if (target.tagName === 'SPAN') {
target = target.parentNode
}
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
2018-12-15 03:16:44 +00:00
},
userProfileLink (user) {
return generateProfileLink(
user.id, user.screen_name,
this.$store.state.instance.restrictedNicknames
)
2019-07-22 20:58:20 +00:00
},
zoomAvatar () {
2019-07-22 20:58:20 +00:00
const attachment = {
url: this.user.profile_image_url_original,
mimetype: 'image'
}
this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment)
},
mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
}
}
}