reset VoteIndicator and use VoteItem

remove unused code in VoteIndicator
reset VoteIndicator handles only simple variant
move generic variant display in VoteItem

Signed-off-by: philippe lhardy <philippe.lhardy@astrolabe.coop>

Author: philippe lhardy

src/components/VoteTable/VoteIndicator.vue

@@ -4,28 +4,15 @@
 -->
 
 <script setup lang="ts">
-import { ref,computed, watch } from 'vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
 import MaybeIcon from '../AppIcons/MaybeIcon.vue'
 import { Answer } from '../../stores/votes.types'
-import { usePollStore } from '../../stores/poll.js'
-const pollStore = usePollStore()
-const chosenRank=JSON.parse(pollStore.configuration.chosenRank)
 
 const ICON_SIZE = 26
 
-interface Props {
-	answer: Answer | 'locked'
-	active?: boolean
-}
-
-const props = defineProps<Props>()
-
-const selectedRank = ref(props.answer)
-
-const emit = defineEmits(['click','selectChange'])
+const { answer } = defineProps<{ answer: Answer | 'locked' }>()
 
 const colorCodeNo = getComputedStyle(document.documentElement).getPropertyValue(
 	'--color-error',
@@ -36,44 +23,10 @@ const colorCodeYes = getComputedStyle(document.documentElement).getPropertyValue
 const colorCodeMaybe = getComputedStyle(document.documentElement).getPropertyValue(
 	'--color-warning',
 )
-
-// Watchers
-watch(() => props.answer, (newValue) => {
-  selectedRank.value = newValue
-})
-
-// Methods
-const handleRankSelected = (event) => {
-  const rank = event.target.value
-  emit('selectChange', rank)
-}
-
-
-function onClick() {
-	if (props.active) {
-		emit('click')
-	}
-}
 </script>
 
 <template>
-	<div class="vote-cell-container">
-	<div v-if="pollStore.votingVariant === 'generic'" class="generic-vote">
-		<span v-if="!props.active" class="selected-value">
-			{{ selectedRank }}
-		</span>
-		<select
-			v-else
-			:value="selectedRank"
-			class="vote-ranking"
-			@change="handleRankSelected">
-			<option disabled value=""></option>
-			<option v-for="rank in chosenRank" :key="rank" :value="rank">
-				{{ rank }}
-			</option>
-		</select>
-	</div>
-	<div v-else :class="['vote-indicator', props.active]" @click="onClick()">
+	<div class="vote-indicator">
 		<MaybeIcon
 			v-if="answer === 'maybe'"
 			:fill-color="colorCodeMaybe"
@@ -91,10 +44,28 @@ function onClick() {
 			:fill-color="colorCodeNo"
 			:size="ICON_SIZE" />
 	</div>
-	</div>
 </template>
 
 <style lang="scss">
+.active .vote-indicator {
+	border: 2px solid;
+	border-radius: var(--border-radius);
+
+	&,
+	* {
+		cursor: pointer;
+	}
+
+	&:hover {
+		width: 35px;
+		height: 35px;
+		.material-design-icon {
+			width: 31px;
+			height: 31px;
+		}
+	}
+}
+
 .vote-indicator {
 	color: var(--color-polls-foreground-no);
 	min-width: 30px;
@@ -106,39 +77,14 @@ function onClick() {
 	&,
 	* {
 		transition: all 0.4s ease-in-out;
-		margin: auto;
-		.active & {
-			cursor: pointer;
-		}
 	}
 
-	.active & {
-		border: 2px solid;
-		border-radius: var(--border-radius);
-		.material-design-icon {
-			width: 26px;
-			height: 26px;
-		}
-	}
 	.yes & {
 		color: var(--color-polls-foreground-yes);
 	}
 
 	.maybe & {
 		color: var(--color-polls-foreground-maybe);
 	}
-
-	.active:hover & {
-		width: 35px;
-		height: 35px;
-		.material-design-icon {
-			width: 31px;
-			height: 31px;
-		}
-	}
-}
-
-.error-message {
-  color: var(--color-error);
 }
 </style>

src/components/VoteTable/VoteItem.vue

@@ -45,7 +45,10 @@ const iconAnswer = computed(() => {
 </script>
 
 <template>
-	<div class="vote-item" :class="vote.answer">
+	<div v-if="pollStore.votingVariant==='generic'" class="generic-vote">
+		{{vote.answer}}
+	</div>
+	<div v-else class="vote-item" :class="vote.answer">
 		<VoteIndicator :answer="iconAnswer" />
 	</div>
 </template>
@@ -89,6 +92,17 @@ const iconAnswer = computed(() => {
 	}
 }
 
+.generic-vote {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: all 0.4s ease-in-out;
+	background-clip: content-box;
+	border-radius: 12px;
+	background-color: var(--color-polls-background-maybe);
+}
+
 .list-view .locked .vote-item.current-user {
 	background-color: revert;
 }