118 lines
3.1 KiB
JavaScript
118 lines
3.1 KiB
JavaScript
import Checkbox from 'components/checkbox/checkbox.vue'
|
|
import RichContent from 'components/rich_content/rich_content.jsx'
|
|
import Timeago from 'components/timeago/timeago.vue'
|
|
import { usePollsStore } from 'src/stores/polls'
|
|
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
|
|
|
export default {
|
|
name: 'Poll',
|
|
props: ['basePoll', 'emoji'],
|
|
components: {
|
|
Timeago,
|
|
RichContent,
|
|
Checkbox,
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
choices: [],
|
|
randomSeed: genRandomSeed(),
|
|
}
|
|
},
|
|
created() {
|
|
if (!usePollsStore().pollsObject[this.pollId]) {
|
|
usePollsStore().mergeOrAddPoll(this.basePoll)
|
|
}
|
|
usePollsStore().trackPoll(this.pollId)
|
|
},
|
|
unmounted() {
|
|
usePollsStore().untrackPoll(this.pollId)
|
|
},
|
|
computed: {
|
|
pollId() {
|
|
return this.basePoll.id
|
|
},
|
|
poll() {
|
|
const storePoll = usePollsStore().pollsObject[this.pollId]
|
|
return storePoll || {}
|
|
},
|
|
options() {
|
|
return (this.poll && this.poll.options) || []
|
|
},
|
|
expiresAt() {
|
|
return (this.poll && this.poll.expires_at) || null
|
|
},
|
|
expired() {
|
|
return (this.poll && this.poll.expired) || false
|
|
},
|
|
expirationLabel() {
|
|
if (this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
|
|
return this.expired ? 'polls.expired_at' : 'polls.expires_at'
|
|
} else {
|
|
return this.expired ? 'polls.expired' : 'polls.expires_in'
|
|
}
|
|
},
|
|
loggedIn() {
|
|
return this.$store.state.users.currentUser
|
|
},
|
|
showResults() {
|
|
return this.poll.voted || this.expired || !this.loggedIn
|
|
},
|
|
totalVotesCount() {
|
|
return this.poll.votes_count
|
|
},
|
|
containerClass() {
|
|
return {
|
|
loading: this.loading,
|
|
}
|
|
},
|
|
choiceIndices() {
|
|
// Convert array of booleans into an array of indices of the
|
|
// items that were 'true', so [true, false, false, true] becomes
|
|
// [0, 3].
|
|
return this.choices
|
|
.map((entry, index) => entry && index)
|
|
.filter((value) => typeof value === 'number')
|
|
},
|
|
isDisabled() {
|
|
const noChoice = this.choiceIndices.length === 0
|
|
return this.loading || noChoice
|
|
},
|
|
},
|
|
methods: {
|
|
percentageForOption(count) {
|
|
return this.totalVotesCount === 0
|
|
? 0
|
|
: Math.round((count / this.totalVotesCount) * 100)
|
|
},
|
|
resultTitle(option) {
|
|
return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
|
|
},
|
|
activateOption(index, value) {
|
|
let result
|
|
if (this.poll.multiple) {
|
|
result = this.choices || this.options.map(() => false)
|
|
} else {
|
|
result = this.options.map(() => false)
|
|
}
|
|
result[index] = value
|
|
this.choices = result
|
|
},
|
|
optionId(index) {
|
|
return `poll${this.poll.id}-${index}`
|
|
},
|
|
vote() {
|
|
if (this.choiceIndices.length === 0) return
|
|
this.loading = true
|
|
usePollsStore()
|
|
.votePoll({
|
|
id: this.statusId,
|
|
pollId: this.poll.id,
|
|
choices: this.choiceIndices,
|
|
})
|
|
.then(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
},
|
|
}
|