344 lines
10 KiB
JavaScript
344 lines
10 KiB
JavaScript
import merge from 'lodash/merge'
|
|
import unescape from 'lodash/unescape'
|
|
|
|
import ColorInput from 'src/components/color_input/color_input.vue'
|
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
|
import RemoteFollow from '../remote_follow/remote_follow.vue'
|
|
import ProgressButton from '../progress_button/progress_button.vue'
|
|
import FollowButton from '../follow_button/follow_button.vue'
|
|
import ModerationTools from '../moderation_tools/moderation_tools.vue'
|
|
import AccountActions from '../account_actions/account_actions.vue'
|
|
import UserNote from '../user_note/user_note.vue'
|
|
import Select from '../select/select.vue'
|
|
import UserLink from '../user_link/user_link.vue'
|
|
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
|
import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
|
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
|
import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
|
|
|
|
import localeService from 'src/services/locale/locale.service.js'
|
|
import suggestor from 'src/components/emoji_input/suggestor.js'
|
|
|
|
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
|
import { mapGetters } from 'vuex'
|
|
import { usePostStatusStore } from 'src/stores/post_status'
|
|
import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
|
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import {
|
|
faBell,
|
|
faRss,
|
|
faSearchPlus,
|
|
faExternalLinkAlt,
|
|
faEdit,
|
|
faTimes,
|
|
faExpandAlt,
|
|
faBirthdayCake,
|
|
faSave
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
import { useMediaViewerStore } from '../../stores/media_viewer'
|
|
import { useInterfaceStore } from '../../stores/interface'
|
|
|
|
library.add(
|
|
faSave,
|
|
faRss,
|
|
faBell,
|
|
faSearchPlus,
|
|
faExternalLinkAlt,
|
|
faEdit,
|
|
faTimes,
|
|
faExpandAlt,
|
|
faBirthdayCake
|
|
)
|
|
|
|
export default {
|
|
props: [
|
|
'editable',
|
|
'userId',
|
|
'switcher',
|
|
'selected',
|
|
'hideBio',
|
|
'rounded',
|
|
'bordered',
|
|
'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
|
|
'onClose',
|
|
'hasNoteEditor'
|
|
],
|
|
components: {
|
|
UserAvatar,
|
|
Checkbox,
|
|
RemoteFollow,
|
|
ModerationTools,
|
|
AccountActions,
|
|
ProgressButton,
|
|
FollowButton,
|
|
Select,
|
|
RichContent,
|
|
UserLink,
|
|
UserNote,
|
|
UserTimedFilterModal,
|
|
ColorInput,
|
|
EmojiInput
|
|
},
|
|
data () {
|
|
const user = this.$store.state.users.currentUser
|
|
|
|
return {
|
|
followRequestInProgress: false,
|
|
muteExpiryAmount: 0,
|
|
muteExpiryUnit: 'minutes',
|
|
|
|
// Editable stuff
|
|
newName: user.name_unescaped,
|
|
newActorType: user.actor_type,
|
|
newBio: unescape(user.description),
|
|
newBirthday: user.birthday,
|
|
newShowBirthday: user.show_birthday,
|
|
newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
|
|
editingFields: false,
|
|
newLocked: user.locked,
|
|
newShowRole: user.show_role,
|
|
}
|
|
},
|
|
created () {
|
|
this.$store.dispatch('fetchUserRelationship', this.user.id)
|
|
},
|
|
computed: {
|
|
user () {
|
|
return this.$store.getters.findUser(this.userId)
|
|
},
|
|
relationship () {
|
|
return this.$store.getters.relationship(this.userId)
|
|
},
|
|
classes () {
|
|
return [{
|
|
'-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
|
|
'-rounded': this.rounded === true, // set border-radius for all sides
|
|
'-bordered': this.bordered === true, // set border for all sides
|
|
'-popover': !!this.onClose // set popover rounding
|
|
}]
|
|
},
|
|
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 () {
|
|
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)
|
|
},
|
|
emoji () {
|
|
return this.$store.state.instance.customEmoji.map(e => ({
|
|
shortcode: e.displayText,
|
|
static_url: e.imageUrl,
|
|
url: e.imageUrl
|
|
}))
|
|
},
|
|
userHighlightType: {
|
|
get () {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
return (data && data.type) || 'disabled'
|
|
},
|
|
set (type) {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
if (type !== 'disabled') {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
|
|
} else {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
|
|
}
|
|
},
|
|
...mapGetters(['mergedConfig'])
|
|
},
|
|
userHighlightColor: {
|
|
get () {
|
|
const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
|
|
return data && data.color
|
|
},
|
|
set (color) {
|
|
this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
|
|
}
|
|
},
|
|
visibleRole () {
|
|
const rights = this.user.rights
|
|
if (!rights) { return }
|
|
const validRole = rights.admin || rights.moderator
|
|
const roleTitle = rights.admin ? 'admin' : 'moderator'
|
|
return validRole && roleTitle
|
|
},
|
|
hideFollowsCount () {
|
|
return this.isOtherUser && this.user.hide_follows_count
|
|
},
|
|
hideFollowersCount () {
|
|
return this.isOtherUser && this.user.hide_followers_count
|
|
},
|
|
showModerationMenu () {
|
|
const privileges = this.loggedIn.privileges
|
|
return this.loggedIn.role === 'admin' ||
|
|
privileges.includes('users_manage_activation_state') ||
|
|
privileges.includes('users_delete') ||
|
|
privileges.includes('users_manage_tags')
|
|
},
|
|
hasNote () {
|
|
return this.relationship.note
|
|
},
|
|
supportsNote () {
|
|
return 'note' in this.relationship
|
|
},
|
|
muteExpiryAvailable () {
|
|
return this.user.mute_expires_at !== undefined
|
|
},
|
|
muteExpiry () {
|
|
return this.user.mute_expires_at == null
|
|
? this.$t('user_card.mute_expires_forever')
|
|
: this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
|
|
},
|
|
blockExpiryAvailable () {
|
|
return this.user.block_expires_at !== undefined
|
|
},
|
|
blockExpiry () {
|
|
return this.user.block_expires_at == null
|
|
? this.$t('user_card.block_expires_forever')
|
|
: this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
|
|
},
|
|
formattedBirthday () {
|
|
const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
|
|
return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
|
|
},
|
|
|
|
// Editable stuff
|
|
fieldsLimits () {
|
|
return this.$store.state.instance.fieldsLimits
|
|
},
|
|
maxFields () {
|
|
return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
|
|
},
|
|
emojiUserSuggestor () {
|
|
return suggestor({
|
|
emoji: [
|
|
...this.$store.getters.standardEmojiList,
|
|
...this.$store.state.instance.customEmoji
|
|
],
|
|
store: this.$store
|
|
})
|
|
},
|
|
emojiSuggestor () {
|
|
return suggestor({
|
|
emoji: [
|
|
...this.$store.getters.standardEmojiList,
|
|
...this.$store.state.instance.customEmoji
|
|
]
|
|
})
|
|
},
|
|
...mapGetters(['mergedConfig'])
|
|
},
|
|
methods: {
|
|
muteUser () {
|
|
this.$refs.timedMuteDialog.optionallyPrompt()
|
|
},
|
|
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 })
|
|
}
|
|
},
|
|
linkClicked ({ target }) {
|
|
if (target.tagName === 'SPAN') {
|
|
target = target.parentNode
|
|
}
|
|
if (target.tagName === 'A') {
|
|
window.open(target.href, '_blank')
|
|
}
|
|
},
|
|
userProfileLink (user) {
|
|
return generateProfileLink(
|
|
user.id, user.screen_name,
|
|
this.$store.state.instance.restrictedNicknames
|
|
)
|
|
},
|
|
openProfileTab () {
|
|
useInterfaceStore().openSettingsModalTab('profile')
|
|
},
|
|
zoomAvatar () {
|
|
const attachment = {
|
|
url: this.user.profile_image_url_original,
|
|
mimetype: 'image'
|
|
}
|
|
useMediaViewerStore().setMedia([attachment])
|
|
useMediaViewerStore().setCurrentMedia(attachment)
|
|
},
|
|
mentionUser () {
|
|
usePostStatusStore().openPostStatusModal({ profileMention: true, repliedUser: this.user })
|
|
},
|
|
onAvatarClickHandler (e) {
|
|
if (this.onAvatarClick) {
|
|
e.preventDefault()
|
|
this.onAvatarClick()
|
|
}
|
|
},
|
|
|
|
// Editable stuff
|
|
addField () {
|
|
if (this.newFields.length < this.maxFields) {
|
|
this.newFields.push({ name: '', value: '' })
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
deleteField (index) {
|
|
this.newFields.splice(index, 1)
|
|
},
|
|
propsToNative (props) {
|
|
return propsToNative(props)
|
|
},
|
|
updateProfile () {
|
|
const params = {
|
|
note: this.newBio,
|
|
locked: this.newLocked,
|
|
|
|
// Backend notation.
|
|
display_name: this.newName,
|
|
fields_attributes: this.newFields.filter(el => el != null),
|
|
actor_type: this.actorType,
|
|
show_role: this.showRole,
|
|
birthday: this.newBirthday || '',
|
|
show_birthday: this.showBirthday
|
|
}
|
|
|
|
if (this.emailLanguage) {
|
|
params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
|
|
}
|
|
|
|
this.$store.state.api.backendInteractor
|
|
.updateProfile({ params })
|
|
.then((user) => {
|
|
this.newFields.splice(user.fields.length)
|
|
merge(this.newFields, user.fields)
|
|
this.$store.commit('addNewUsers', [user])
|
|
this.$store.commit('setCurrentUser', user)
|
|
})
|
|
},
|
|
}
|
|
}
|