/
ProposalQuestion.svelte
100 lines (92 loc) · 4.23 KB
/
ProposalQuestion.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script lang="typescript">
import type { AnswerStatus, Question } from '@iota/wallet'
import { createEventDispatcher } from 'svelte'
import { Text, FontWeight, Icon, ProposalAnswer, TooltipIcon } from 'shared/components'
import { ABSTAIN_VOTE_VALUE } from '@contexts/governance/constants'
import { ProposalStatus } from '@contexts/governance/enums'
import { selectedProposal } from '@contexts/governance/stores'
import { Icon as IconEnum } from '@auxiliary/icon'
import { Position } from './enums'
import { getPercentagesFromAnswerStatuses, IProposalAnswerPercentages } from '@contexts/governance'
const dispatch = createEventDispatcher()
export let answerStatuses: AnswerStatus[] = []
export let questionIndex: number = undefined
export let isOpened = false
export let question: Question
export let selectedAnswerValue: number = undefined
export let votedAnswerValue: number = undefined
let percentages: IProposalAnswerPercentages = {}
let winnerAnswerIndex: number
$: answers = [...question?.answers, { value: 0, text: 'Abstain', additionalInfo: '' }]
$: percentages = getPercentagesFromAnswerStatuses(answerStatuses)
$: disabled =
$selectedProposal.status === ProposalStatus.Upcoming || $selectedProposal.status === ProposalStatus.Ended
$: answerStatuses, setWinnerAnswerIndex()
$: showMargin =
isOpened ||
((votedAnswerValue || votedAnswerValue === ABSTAIN_VOTE_VALUE) && !isOpened) ||
((selectedAnswerValue || selectedAnswerValue === ABSTAIN_VOTE_VALUE) && !isOpened) ||
winnerAnswerIndex !== undefined
function handleAnswerClick(answerValue: number): void {
dispatch('clickAnswer', { answerValue, questionIndex })
}
function handleQuestionClick(): void {
dispatch('clickQuestion', { questionIndex })
}
function setWinnerAnswerIndex(): void {
if ($selectedProposal.status === ProposalStatus.Ended) {
const answersAccumulated = answerStatuses?.map((answer) => answer.accumulated)
const maxAccumulated = Math.max(...answersAccumulated)
winnerAnswerIndex = answersAccumulated?.indexOf(maxAccumulated)
}
}
</script>
<proposal-question
class="flex flex-col px-5 py-4 rounded-xl border border-solid border-gray-200 dark:border-transparent dark:bg-gray-850 cursor-pointer"
>
<div on:click={handleQuestionClick} class="flex justify-between items-center">
<div class="flex flex-col min-w-0">
{#if questionIndex !== undefined}
<Text smaller fontWeight={FontWeight.bold} overrideColor classes="mb-1 text-blue-500">
Question {questionIndex + 1}
</Text>
{/if}
<div class="flex flex-row space-x-1.5 items-center">
<Text
fontWeight={FontWeight.bold}
overrideColor
classes="text-gray-900 dark:text-white {isOpened ? '' : 'truncate'}"
>
{question.text}
</Text>
{#if question.additionalInfo}
<TooltipIcon
iconClasses="text-gray-600 dark:text-gray-500"
text={question.additionalInfo}
position={Position.Bottom}
width={13}
height={13}
/>
{/if}
</div>
</div>
<Icon icon={IconEnum.ChevronDown} classes="text-gray-500 transform {isOpened ? 'rotate-180' : 'rotate-0'}" />
</div>
<proposal-answers class:mt-4={showMargin} class="flex flex-col gap-2">
{#each answers as answer, answerIndex}
<ProposalAnswer
{answer}
{answerIndex}
{votedAnswerValue}
{selectedAnswerValue}
{disabled}
hidden={!isOpened}
percentage={percentages[answer.value]}
isWinner={answerIndex === winnerAnswerIndex}
proposalStatus={$selectedProposal.status}
truncate={!isOpened}
on:click={handleAnswerClick(answer.value)}
/>
{/each}
</proposal-answers>
</proposal-question>