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