diff options
author | dartcafe <github@dartcafe.de> | 2022-04-13 09:30:31 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-04-13 09:30:31 +0300 |
commit | 93c0e98afcdc0c0f81922e8d5f5700a467047230 (patch) | |
tree | eabcffb92a953387677375afb5b886a7f8eb7147 /src | |
parent | 9a4fa40b50823d952451d32c9df0737254f8c4aa (diff) |
fix locked vote cells and add locked icon
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/assets/icons/material-design/cancel.svg | 1 | ||||
-rw-r--r-- | src/js/assets/scss/icons-md.scss | 8 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteColumn.vue | 37 | ||||
-rw-r--r-- | src/js/components/VoteTable/VoteItem.vue | 26 | ||||
-rw-r--r-- | src/js/store/modules/poll.js | 4 | ||||
-rw-r--r-- | src/js/store/modules/subModules/acl.js | 5 | ||||
-rw-r--r-- | src/js/store/modules/votes.js | 1 | ||||
-rw-r--r-- | src/js/views/PollList.vue | 4 |
8 files changed, 57 insertions, 29 deletions
diff --git a/src/js/assets/icons/material-design/cancel.svg b/src/js/assets/icons/material-design/cancel.svg new file mode 100644 index 00000000..592a60cc --- /dev/null +++ b/src/js/assets/icons/material-design/cancel.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z" /></svg>
\ No newline at end of file diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss index efcd85d2..81e7d27e 100644 --- a/src/js/assets/scss/icons-md.scss +++ b/src/js/assets/scss/icons-md.scss @@ -24,6 +24,7 @@ --icon-md-archive: url('../icons/material-design/archive.svg'); --icon-md-bell: url('../icons/material-design/bell.svg'); --icon-md-bell-off: url('../icons/material-design/bell-off.svg'); + --icon-md-cancel: url('../icons/material-design/cancel.svg'); --icon-md-calendar-month: url('../icons/material-design/calendar-month.svg'); --icon-md-calendar-blank: url('../icons/material-design/calendar-blank.svg'); --icon-md-calendar-end: url('../icons/material-design/calendar-end.svg'); @@ -158,6 +159,13 @@ @include masked-icon(var(--icon-md-close)); } +.locked .vote-item.currentuser .icon, +.icon-mask-md-locked-vote { + background-color: var(--color-polls-foreground-no) !important; + @include masked-icon(var(--icon-md-cancel)); + mask-size: 100%; +} + .icon-mask-md-maybe-vote, .icon-mask-md-maybe-votes { background-color: var(--color-polls-foreground-maybe) !important; diff --git a/src/js/components/VoteTable/VoteColumn.vue b/src/js/components/VoteTable/VoteColumn.vue index ab920823..5491a419 100644 --- a/src/js/components/VoteTable/VoteColumn.vue +++ b/src/js/components/VoteTable/VoteColumn.vue @@ -33,7 +33,9 @@ <VoteItem v-for="(participant) in participants" :key="participant.userId" :user-id="participant.userId" - :option="option" /> + :option="option" + :locked="isLocked" + :confirmed="isConfirmed" /> <OptionItemOwner v-if="proposalsExist" :option="option" @@ -95,23 +97,20 @@ export default { poll: (state) => state.poll, settings: (state) => state.settings.user, currentUser: (state) => state.poll.acl.userId, + isVoteLimitExceeded: (state) => state.poll.acl.isVoteLimitExceeded, + voteLimit: (state) => state.poll.voteLimit, }), ...mapGetters({ closed: 'poll/isClosed', + getVote: 'votes/getVote', participants: 'poll/safeParticipants', proposalsExist: 'options/proposalsExist', - getVote: 'votes/getVote', }), componentClass() { const classList = ['vote-column'] - const ownAnswer = this.getVote({ - userId: this.currentUser, - option: this.option, - }) - - if (this.option.computed.isBookedUp && !this.closed) { + if (this.isLocked) { classList.push('locked') } @@ -119,9 +118,27 @@ export default { classList.push('confirmed') } - classList.push(ownAnswer) + classList.push(this.ownAnswer) + + return classList.join(' ').trim() + }, + + isConfirmed() { + return !!(this.option.confirmed && this.closed) + }, + + ownAnswer() { + return this.getVote({ + userId: this.currentUser, + option: this.option, + }).answer + }, - return classList.join(' ') + isLocked() { + return (this.option.computed.isBookedUp || this.isVoteLimitExceeded) + && !this.closed + && this.ownAnswer !== 'yes' + && this.ownAnswer !== 'maybe' }, showCalendarPeek() { diff --git a/src/js/components/VoteTable/VoteItem.vue b/src/js/components/VoteTable/VoteItem.vue index c569f765..a2656481 100644 --- a/src/js/components/VoteTable/VoteItem.vue +++ b/src/js/components/VoteTable/VoteItem.vue @@ -21,8 +21,8 @@ --> <template> - <div class="vote-item" :class="[answer, {confirmed: isConfirmed }, { active: isVotable }, {currentuser: isCurrentUser}]"> - <div v-if="isActive && !isVoteLimitExceded" class="icon" @click="setVote()" /> + <div class="vote-item" :class="[answer, { confirmed: confirmed }, { active: isVotable }, {currentuser: isCurrentUser}]"> + <div v-if="isActive" class="icon" @click="setVote()" /> <div v-else class="icon" /> <slot name="indicator" /> </div> @@ -44,18 +44,23 @@ export default { type: String, default: '', }, + locked: { + type: Boolean, + default: false, + }, + confirmed: { + type: Boolean, + default: false, + }, }, computed: { ...mapState({ - voteLimit: (state) => state.poll.voteLimit, - optionLimit: (state) => state.poll.optionLimit, currentUser: (state) => state.poll.acl.userId, allowVote: (state) => state.poll.acl.allowVote, }), ...mapGetters({ - countVotes: 'votes/countVotes', closed: 'poll/isClosed', answerSequence: 'poll/answerSequence', }), @@ -64,8 +69,7 @@ export default { return this.isActive && this.isValidUser && !this.closed - && !this.isVoteLimitExceded - && !(this.option.computed.isBookedUp && !['yes', 'maybe'].includes(this.answer)) + && !this.locked }, isActive() { @@ -83,14 +87,6 @@ export default { }).answer }, - isVoteLimitExceded() { - return (this.countVotes('yes') >= this.voteLimit && this.voteLimit && this.answer !== 'yes') - }, - - isConfirmed() { - return this.option.confirmed && this.closed - }, - nextAnswer() { if (this.answerSequence.indexOf(this.answer) < 0) { return this.answerSequence[1] diff --git a/src/js/store/modules/poll.js b/src/js/store/modules/poll.js index 9d988edf..bbbf68af 100644 --- a/src/js/store/modules/poll.js +++ b/src/js/store/modules/poll.js @@ -228,7 +228,9 @@ const actions = { const endPoint = `apps/polls/poll/${context.state.id}` try { const response = await axios.put(generateUrl(endPoint), { poll: context.state }) - context.commit('set', { poll: response.data }) + context.commit('set', response.data) + context.commit('acl/set', response.data) + context.dispatch('options/list', null, { root: true }) } catch (e) { console.error('Error updating poll:', { error: e.response }, { poll: context.state }) throw e diff --git a/src/js/store/modules/subModules/acl.js b/src/js/store/modules/subModules/acl.js index d05c557d..62203d52 100644 --- a/src/js/store/modules/subModules/acl.js +++ b/src/js/store/modules/subModules/acl.js @@ -28,8 +28,8 @@ const defaultAcl = () => ({ allowComment: false, allowDelete: false, allowEdit: false, - allowPollDownload: false, allowPollCreation: false, + allowPollDownload: false, allowPublicShares: false, allowSeeResults: false, allowSeeUsernames: false, @@ -38,12 +38,15 @@ const defaultAcl = () => ({ allowVote: false, displayName: '', isOwner: false, + isVoteLimitExceeded: false, loggedIn: false, pollId: null, token: '', userHasVoted: false, userId: '', userIsInvolved: '', + pollExpired: false, + pollExpire: 0, }) const state = defaultAcl() diff --git a/src/js/store/modules/votes.js b/src/js/store/modules/votes.js index 80f6ec81..9680d75e 100644 --- a/src/js/store/modules/votes.js +++ b/src/js/store/modules/votes.js @@ -127,6 +127,7 @@ const actions = { }) context.commit('setItem', { option: payload.option, pollId: context.rootState.poll.id, vote: response.data.vote }) context.dispatch('options/list', null, { root: true }) + context.dispatch('poll/get', null, { root: true }) return response } catch (e) { if (e.response.status === 409) { diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue index 8055ba32..a5a62ab3 100644 --- a/src/js/views/PollList.vue +++ b/src/js/views/PollList.vue @@ -126,11 +126,11 @@ export default { }), title() { - return this.pollCategories.find((category) => (category.id === this.$route.params.type)).titleExt + return this.pollCategories.find((category) => (category.id === this.$route.params.type))?.titleExt }, description() { - return this.pollCategories.find((category) => (category.id === this.$route.params.type)).description + return this.pollCategories.find((category) => (category.id === this.$route.params.type))?.description }, /* eslint-disable-next-line vue/no-unused-properties */ |