2020-05-26 00:01:25 +02:00
|
|
|
import StatusContent from '../status_content/status_content.vue'
|
2020-05-07 15:10:53 +02:00
|
|
|
import { mapState } from 'vuex'
|
2018-04-09 19:44:37 +02:00
|
|
|
import Status from '../status/status.vue'
|
2019-02-02 21:33:02 +01:00
|
|
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
2019-03-05 20:01:49 +01:00
|
|
|
import UserCard from '../user_card/user_card.vue'
|
2019-06-18 22:28:31 +02:00
|
|
|
import Timeago from '../timeago/timeago.vue'
|
2021-01-11 18:32:58 +01:00
|
|
|
import Report from '../report/report.vue'
|
2022-08-30 00:46:41 +02:00
|
|
|
import UserLink from '../user_link/user_link.vue'
|
2021-08-13 12:06:42 +02:00
|
|
|
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
2022-06-16 15:30:05 +02:00
|
|
|
import UserPopover from '../user_popover/user_popover.vue'
|
2022-06-07 18:37:16 +02:00
|
|
|
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
2020-04-25 06:04:39 +02:00
|
|
|
import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
|
2018-06-18 11:09:14 +02:00
|
|
|
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
2018-12-13 17:57:11 +01:00
|
|
|
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
2020-10-19 21:35:46 +02:00
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
import {
|
|
|
|
faCheck,
|
|
|
|
faTimes,
|
|
|
|
faStar,
|
|
|
|
faRetweet,
|
|
|
|
faUserPlus,
|
|
|
|
faEyeSlash,
|
|
|
|
faUser,
|
2022-12-19 21:20:15 +01:00
|
|
|
faSuitcaseRolling,
|
|
|
|
faExpandAlt,
|
|
|
|
faCompressAlt
|
2020-10-19 21:35:46 +02:00
|
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
|
|
|
|
library.add(
|
|
|
|
faCheck,
|
|
|
|
faTimes,
|
|
|
|
faStar,
|
|
|
|
faRetweet,
|
|
|
|
faUserPlus,
|
|
|
|
faUser,
|
|
|
|
faEyeSlash,
|
2022-12-19 21:20:15 +01:00
|
|
|
faSuitcaseRolling,
|
|
|
|
faExpandAlt,
|
|
|
|
faCompressAlt
|
2020-10-19 21:35:46 +02:00
|
|
|
)
|
2018-04-09 19:44:37 +02:00
|
|
|
|
|
|
|
const Notification = {
|
|
|
|
data () {
|
|
|
|
return {
|
2022-12-19 21:20:15 +01:00
|
|
|
statusExpanded: false,
|
2019-09-06 17:15:22 +02:00
|
|
|
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
|
2022-06-07 18:37:16 +02:00
|
|
|
unmuted: false,
|
|
|
|
showingApproveConfirmDialog: false,
|
|
|
|
showingDenyConfirmDialog: false
|
2018-04-09 19:44:37 +02:00
|
|
|
}
|
|
|
|
},
|
2022-07-31 11:35:48 +02:00
|
|
|
props: ['notification'],
|
2023-11-13 16:29:25 +01:00
|
|
|
emits: ['interacted'],
|
2018-04-09 19:44:37 +02:00
|
|
|
components: {
|
2020-05-26 00:01:25 +02:00
|
|
|
StatusContent,
|
2019-06-18 22:28:31 +02:00
|
|
|
UserAvatar,
|
|
|
|
UserCard,
|
2020-05-26 00:01:25 +02:00
|
|
|
Timeago,
|
2021-01-11 18:32:58 +01:00
|
|
|
Status,
|
2022-02-26 02:08:13 +01:00
|
|
|
Report,
|
2022-06-15 03:01:46 +02:00
|
|
|
RichContent,
|
2022-08-30 00:46:41 +02:00
|
|
|
UserPopover,
|
2022-06-07 18:37:16 +02:00
|
|
|
UserLink,
|
|
|
|
ConfirmModal
|
2018-04-09 19:44:37 +02:00
|
|
|
},
|
|
|
|
methods: {
|
2022-12-19 21:20:15 +01:00
|
|
|
toggleStatusExpanded () {
|
|
|
|
this.statusExpanded = !this.statusExpanded
|
2018-12-17 00:52:27 +01:00
|
|
|
},
|
2019-09-06 17:15:22 +02:00
|
|
|
generateUserProfileLink (user) {
|
2018-12-26 14:50:48 +01:00
|
|
|
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
|
2019-02-18 15:49:32 +01:00
|
|
|
},
|
|
|
|
getUser (notification) {
|
2019-04-12 09:49:22 +02:00
|
|
|
return this.$store.state.users.usersObject[notification.from_profile.id]
|
2019-09-06 17:15:22 +02:00
|
|
|
},
|
2023-11-13 16:29:25 +01:00
|
|
|
interacted () {
|
|
|
|
this.$emit('interacted')
|
|
|
|
},
|
2019-09-06 17:15:22 +02:00
|
|
|
toggleMute () {
|
|
|
|
this.unmuted = !this.unmuted
|
2020-04-25 06:04:39 +02:00
|
|
|
},
|
2022-06-07 18:37:16 +02:00
|
|
|
showApproveConfirmDialog () {
|
|
|
|
this.showingApproveConfirmDialog = true
|
|
|
|
},
|
|
|
|
hideApproveConfirmDialog () {
|
|
|
|
this.showingApproveConfirmDialog = false
|
|
|
|
},
|
|
|
|
showDenyConfirmDialog () {
|
|
|
|
this.showingDenyConfirmDialog = true
|
|
|
|
},
|
|
|
|
hideDenyConfirmDialog () {
|
|
|
|
this.showingDenyConfirmDialog = false
|
|
|
|
},
|
2020-04-25 06:04:39 +02:00
|
|
|
approveUser () {
|
2022-06-07 18:37:16 +02:00
|
|
|
if (this.shouldConfirmApprove) {
|
|
|
|
this.showApproveConfirmDialog()
|
|
|
|
} else {
|
|
|
|
this.doApprove()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
doApprove () {
|
2023-11-13 16:29:25 +01:00
|
|
|
this.$emit('interacted')
|
2020-04-25 06:04:39 +02:00
|
|
|
this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
|
|
|
|
this.$store.dispatch('removeFollowRequest', this.user)
|
2020-05-02 09:52:57 +02:00
|
|
|
this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
|
2020-04-25 06:04:39 +02:00
|
|
|
this.$store.dispatch('updateNotification', {
|
|
|
|
id: this.notification.id,
|
|
|
|
updater: notification => {
|
|
|
|
notification.type = 'follow'
|
|
|
|
}
|
|
|
|
})
|
2022-06-10 21:55:31 +02:00
|
|
|
this.hideApproveConfirmDialog()
|
2020-04-25 06:04:39 +02:00
|
|
|
},
|
|
|
|
denyUser () {
|
2022-06-07 18:37:16 +02:00
|
|
|
if (this.shouldConfirmDeny) {
|
|
|
|
this.showDenyConfirmDialog()
|
|
|
|
} else {
|
|
|
|
this.doDeny()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
doDeny () {
|
2023-11-13 16:29:25 +01:00
|
|
|
this.$emit('interacted')
|
2020-04-25 06:04:39 +02:00
|
|
|
this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
|
2020-05-02 10:51:39 +02:00
|
|
|
.then(() => {
|
|
|
|
this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
|
|
|
|
this.$store.dispatch('removeFollowRequest', this.user)
|
|
|
|
})
|
2022-06-10 21:55:31 +02:00
|
|
|
this.hideDenyConfirmDialog()
|
2018-04-09 19:44:37 +02:00
|
|
|
}
|
2018-06-18 11:09:14 +02:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
userClass () {
|
2019-04-01 03:59:18 +02:00
|
|
|
return highlightClass(this.notification.from_profile)
|
2018-06-18 11:09:14 +02:00
|
|
|
},
|
|
|
|
userStyle () {
|
2019-10-06 22:28:30 +02:00
|
|
|
const highlight = this.$store.getters.mergedConfig.highlight
|
2019-04-01 03:59:18 +02:00
|
|
|
const user = this.notification.from_profile
|
2018-08-05 04:18:04 +02:00
|
|
|
return highlightStyle(highlight[user.screen_name])
|
2019-04-01 16:26:13 +02:00
|
|
|
},
|
|
|
|
user () {
|
2019-12-11 10:48:18 +01:00
|
|
|
return this.$store.getters.findUser(this.notification.from_profile.id)
|
2019-09-06 17:15:22 +02:00
|
|
|
},
|
|
|
|
userProfileLink () {
|
2019-09-10 22:21:52 +02:00
|
|
|
return this.generateUserProfileLink(this.user)
|
2019-09-06 17:15:22 +02:00
|
|
|
},
|
2019-12-10 20:02:25 +01:00
|
|
|
targetUser () {
|
2019-12-11 10:48:18 +01:00
|
|
|
return this.$store.getters.findUser(this.notification.target.id)
|
2019-12-10 20:02:25 +01:00
|
|
|
},
|
|
|
|
targetUserProfileLink () {
|
|
|
|
return this.generateUserProfileLink(this.targetUser)
|
|
|
|
},
|
2019-09-06 17:15:22 +02:00
|
|
|
needMute () {
|
2020-04-24 17:53:17 +02:00
|
|
|
return this.$store.getters.relationship(this.user.id).muting
|
2020-04-25 06:04:39 +02:00
|
|
|
},
|
|
|
|
isStatusNotification () {
|
|
|
|
return isStatusNotification(this.notification.type)
|
2020-05-07 15:10:53 +02:00
|
|
|
},
|
2022-06-07 18:37:16 +02:00
|
|
|
mergedConfig () {
|
|
|
|
return this.$store.getters.mergedConfig
|
|
|
|
},
|
|
|
|
shouldConfirmApprove () {
|
|
|
|
return this.mergedConfig.modalOnApproveFollow
|
|
|
|
},
|
|
|
|
shouldConfirmDeny () {
|
|
|
|
return this.mergedConfig.modalOnDenyFollow
|
|
|
|
},
|
2020-05-07 15:10:53 +02:00
|
|
|
...mapState({
|
|
|
|
currentUser: state => state.users.currentUser
|
|
|
|
})
|
2018-04-09 19:44:37 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Notification
|