merge generic variant in main ( after 8.2.0rc.2)

Move code VoteItem code into VoteButton
Add drop-down list in VoteButton
adapt with new poll types

Author: philippe lhardy

src/components/VoteTable/VoteButton.vue

@@ -48,6 +48,8 @@ const vote = computed(() =>
 	}),
 )
 
+const chosenRank=JSON.parse(pollStore.configuration.chosenRank)
+
 const nextAnswer = computed<richAnswer>(() => {
 	if (['no', ''].includes(vote.value.answer)) {
 		return richAnswers.yes
@@ -76,7 +78,10 @@ async function setVote() {
 	}
 }
 
-async function handleRankSelected(rank){
+async function handleRankSelected(event){
+	const selectElement = event.target
+	const rank = selectElement.value
+	console.log('rank',rank,'event',event)
 	try {
 		await votesStore.set({
 			option,
@@ -94,19 +99,31 @@ async function handleRankSelected(rank){
 </script>
 
 <template>
-	<button
-		class="vote-button active"
-		:class="[vote.answer]"
-		:aria-label="
-			t('polls', 'Click to vote with {nextAnswer} for option {option}', {
-				option: option.text,
-				nextAnswer: nextAnswer.translated,
-			})
-		"
-		@click="setVote()"
-		@select-change="handleRankSelected">
-		<VoteIndicator :answer="vote.answer" />
-	</button>
+	<div v-if="pollStore.votingVariant === 'generic'" class="generic-vote">
+		<select
+		:value="vote.answer"
+		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>
+		<button
+			class="vote-button active"
+			:class="[vote.answer]"
+			:aria-label="
+				t('polls', 'Click to vote with {nextAnswer} for option {option}', {
+					option: option.text,
+					nextAnswer: nextAnswer.translated,
+				})
+			"
+			@click="setVote()">
+			<VoteIndicator :answer="vote.answer" />
+		</button>
+	</div>
 </template>
 
 <style lang="scss" scoped>

src/components/VoteTable/VoteIndicator.vue

@@ -10,6 +10,7 @@ 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)
 

src/components/VoteTable/VoteItem.vue

@@ -31,28 +31,6 @@ const vote = computed(() =>
 	}),
 )
 
-
-async function handleRankSelected(rank){
-	if (isVotable.value) {
-		try {
-			await votesStore.set({
-				option,
-				setTo: String(rank),
-		});
-		showSuccess(t('polls', 'Vote saved'), { timeout: 2000 });
-		} catch (error) {
-			if ((error as AxiosError).status === 409) {
-				showError(t('polls', 'Vote already booked out'));
-			} else {
-				showError(t('polls', 'Error saving vote'));
-			}
-		}
-	} else {
-		showError(t('polls', 'Error saving vote'));
-	}
-}
-
-
 const iconAnswer = computed(() => {
 	if (option.locked && currentUser && !pollStore.isClosed) {
 		return 'locked'
@@ -68,7 +46,7 @@ const iconAnswer = computed(() => {
 
 <template>
 	<div class="vote-item" :class="vote.answer">
-		<VoteIndicator :answer="iconAnswer" @select-change="handleRankSelected" />
+		<VoteIndicator :answer="iconAnswer" />
 	</div>
 </template>
 

src/stores/poll.ts

@@ -29,6 +29,8 @@ import type {
 	AllowProposals,
 	PollStore,
 	PollTypesType,
+	VotingVariant,
+	VotingVariantsType
 } from './poll.types'
 import type { ViewMode } from './preferences.types'
 
@@ -45,7 +47,16 @@ export const pollTypes: Record<PollType, PollTypesType> = {
 	},
 }
 
-const DEFAULT_CHOSEN_RANK = [] ;
+export const votingVariants: Record<VotingVariant, VotingVariantsType> = {
+	simple: {
+		name: t('polls', 'Simple variant'),
+	},
+	generic: {
+		name: t('polls', 'Generic variant'),
+	}
+}
+
+const DEFAULT_CHOSEN_RANK : Array<string> = [] ;
 
 export const usePollStore = defineStore('poll', {
 	state: (): PollStore => ({
@@ -59,10 +70,10 @@ export const usePollStore = defineStore('poll', {
 			access: 'private',
 			allowComment: false,
 			allowMaybe: false,
-			chosenRank: JSON.stringify(DEFAULT_CHOSEN_RANK),
 			allowProposals: 'disallow',
 			anonymous: false,
 			autoReminder: false,
+			chosenRank: JSON.stringify(DEFAULT_CHOSEN_RANK),
 			collapseDescription: true,
 			expire: 0,
 			forceConfidentialComments: false,
@@ -299,11 +310,11 @@ export const usePollStore = defineStore('poll', {
 			}
 		},
 
-		async add(payload: { type: PollType; title: string }): Promise<Poll | void> {
+		async add(payload: { type: PollType; title: string; votingVariant: VotingVariant }): Promise<Poll | void> {
 			const pollsStore = usePollsStore()
 
 			try {
-				const response = await PollsAPI.addPoll(payload.type, payload.title)
+				const response = await PollsAPI.addPoll(payload.type, payload.title, payload.votingVariant)
 				return response.data.poll
 			} catch (error) {
 				if ((error as AxiosError)?.code === 'ERR_CANCELED') {

src/stores/poll.types.ts

@@ -11,7 +11,12 @@ export type PollTypesType = {
 	name: string
 }
 
-export type VoteVariant = 'simple'
+export type VotingVariant = 'simple' | 'generic'
+
+export type VotingVariantsType = {
+	name : string
+}
+
 export type AccessType = 'private' | 'open'
 export type ShowResults = 'always' | 'closed' | 'never'
 export type AllowProposals = 'allow' | 'disallow' | 'review'
@@ -30,6 +35,7 @@ export type PollConfiguration = {
 	anonymous: boolean
 	autoReminder: boolean
 	collapseDescription: boolean
+	chosenRank: string
 	description: string
 	expire: number
 	forceConfidentialComments: boolean
@@ -98,7 +104,7 @@ export type CurrentUserStatus = {
 export type Poll = {
 	id: number
 	type: PollType
-	voteVariant: VoteVariant
+	votingVariant: VotingVariant
 	descriptionSafe: string
 	configuration: PollConfiguration
 	owner: User