fix locked vote cells and add locked icon

Signed-off-by: dartcafe <github@dartcafe.de>

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 */