Skip to content

Commit 117f743

Browse files
xdeqxdeq
committed
ref(proposal): separate Votes tab into Validators&Addresses Votes
1 parent da4f738 commit 117f743

4 files changed

Lines changed: 67 additions & 59 deletions

File tree

‎components/modules/proposal/ProposalOverview.vue‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const props = defineProps({
3535
},
3636
})
3737
38-
const preselectedTab = route.query.tab && ["votes"].includes(route.query.tab) ? route.query.tab : "votes"
38+
const preselectedTab = route.query.tab && ["validators_votes"].includes(route.query.tab) ? route.query.tab : "validators_votes"
3939
const activeTab = ref(preselectedTab)
4040
4141
const isLoading = ref(false)
@@ -72,6 +72,7 @@ const getVotes = async () => {
7272
id: props.proposal.id,
7373
offset: (page.value - 1) * 10,
7474
option: filters.option,
75+
voter: (activeTab.value === "validators_votes" && "validator") || (activeTab.value === "addresses_votes" && "address") || null,
7576
})
7677
votes.value = data.value
7778
@@ -95,9 +96,7 @@ onMounted(() => {
9596
watch(
9697
() => page.value,
9798
() => {
98-
if (activeTab.value === "votes") {
99-
getVotes()
100-
}
99+
getVotes()
101100
},
102101
)
103102
@@ -111,6 +110,7 @@ watch(
111110
})
112111
113112
page.value = 1
113+
resetFilter("option")
114114
115115
getVotes()
116116
},
@@ -150,7 +150,7 @@ const handleViewRawVotes = () => {
150150

151151
<Flex gap="4" :class="$style.content">
152152
<Flex direction="column" :class="$style.data">
153-
<ProposalTimeline :proposal v-if="proposal.status !== 'removed'" />
153+
<ProposalTimeline :proposal />
154154

155155
<Flex direction="column" gap="24" :class="$style.main">
156156
<Flex gap="40">
@@ -218,7 +218,7 @@ const handleViewRawVotes = () => {
218218
<Flex direction="column" gap="16">
219219
<Text size="12" weight="600" color="secondary">Details</Text>
220220

221-
<Flex v-if="proposal.proposer" align="center" justify="between">
221+
<Flex align="center" justify="between">
222222
<Text size="12" weight="600" color="tertiary">Block</Text>
223223

224224
<NuxtLink :to="`/block/${proposal.height}`" target="_blank">
@@ -307,20 +307,27 @@ const handleViewRawVotes = () => {
307307
<Flex align="center" justify="between" :class="$style.tabs_wrapper">
308308
<Flex gap="4" :class="$style.tabs">
309309
<Flex
310-
@click="activeTab = 'votes'"
310+
@click="activeTab = 'validators_votes'"
311+
align="center"
312+
gap="6"
313+
:class="[$style.tab, activeTab === 'validators_votes' && $style.active]"
314+
>
315+
<Icon name="validator" size="12" color="secondary" />
316+
<Text size="13" weight="600">Validators Votes</Text>
317+
</Flex>
318+
<Flex
319+
@click="activeTab = 'addresses_votes'"
311320
align="center"
312321
gap="6"
313-
:class="[$style.tab, activeTab === 'votes' && $style.active]"
322+
:class="[$style.tab, activeTab === 'addresses_votes' && $style.active]"
314323
>
315-
<Icon name="check-circle" size="12" color="secondary" />
316-
<Text size="13" weight="600">Votes</Text>
317-
<Text size="13" weight="600" color="tertiary">{{ comma(votesTotal) }}</Text>
324+
<Icon name="address" size="12" color="secondary" />
325+
<Text size="13" weight="600">Addresses Votes</Text>
318326
</Flex>
319327
</Flex>
320328
</Flex>
321329

322330
<VotesTable
323-
v-if="activeTab === 'votes'"
324331
:proposal
325332
:votes
326333
:votesTotal

‎components/modules/proposal/VotesTable.vue‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -42,44 +42,57 @@ const props = defineProps({
4242
},
4343
})
4444
45+
const router = useRouter()
46+
4547
/** Filter by vote option */
4648
const optionFilter = ref()
49+
const cachedOptionFilter = ref()
4750
4851
const hasActiveFilters = computed(() => !!optionFilter.value)
4952
5053
const isOptionPopoverOpen = ref(false)
5154
const handleOpenOptionPopover = () => {
5255
isOptionPopoverOpen.value = true
56+
57+
cachedOptionFilter.value = optionFilter.value
5358
}
5459
const onOptionPopoverClose = () => {
5560
isOptionPopoverOpen.value = false
5661
57-
optionFilter.value = null
62+
optionFilter.value = cachedOptionFilter.value
5863
}
5964
const handleApplyOptionFilters = () => {
6065
isOptionPopoverOpen.value = false
6166
6267
emit("updateFilters", "option", optionFilter.value, true)
6368
}
6469
const handleResetOptionFilter = () => {
70+
isOptionPopoverOpen.value = false
71+
6572
emit("onFiltersReset", "option", true)
6673
optionFilter.value = null
6774
}
6875
6976
/** Pagination */
70-
const totalPages = computed(() => Math.ceil(optionFilter.value ? props.proposal[optionFilter.value] / 10 : props.votesTotal / 10))
7177
const handlePrevPage = () => {
7278
if (props.page === 1) return
7379
emit("onPrevPage")
7480
}
7581
7682
const isNextPageDisabled = computed(() => {
77-
return totalPages.value === props.page || !totalPages.value
83+
return !props.votes.length || props.votes.length !== 10
7884
})
7985
const handleNextPage = () => {
8086
if (isNextPageDisabled.value) return
8187
emit("onNextPage")
8288
}
89+
90+
watch(
91+
() => props.filters.option,
92+
() => {
93+
if (!props.filters.option) optionFilter.value = null
94+
},
95+
)
8396
</script>
8497

8598
<template>
@@ -119,9 +132,9 @@ const handleNextPage = () => {
119132
</Flex>
120133

121134
<Flex gap="8">
122-
<Button @click="handleApplyOptionFilters" type="secondary" size="mini" wide :disabled="!optionFilter"
123-
>Apply</Button
124-
>
135+
<Button @click="handleApplyOptionFilters" type="secondary" size="mini" wide :disabled="!optionFilter">
136+
Apply
137+
</Button>
125138
<Button v-if="optionFilter" @click="handleResetOptionFilter" type="tertiary" size="mini" wide>Reset</Button>
126139
</Flex>
127140
</Flex>
@@ -135,8 +148,8 @@ const handleNextPage = () => {
135148
<tr>
136149
<th><Text size="12" weight="600" color="tertiary">Option</Text></th>
137150
<th><Text size="12" weight="600" color="tertiary">Voter</Text></th>
151+
<th><Text size="12" weight="600" color="tertiary">Height</Text></th>
138152
<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
139-
<th><Text size="12" weight="600" color="tertiary">Validator</Text></th>
140153
</tr>
141154
</thead>
142155

@@ -150,7 +163,7 @@ const handleNextPage = () => {
150163
</Text>
151164
</Flex>
152165
</td>
153-
<td>
166+
<td v-if="!vote.validator">
154167
<NuxtLink :to="`/address/${vote.voter.hash}`">
155168
<Flex align="center">
156169
<Text size="13" weight="600" color="primary" class="table_column_alias">
@@ -159,6 +172,29 @@ const handleNextPage = () => {
159172
</Flex>
160173
</NuxtLink>
161174
</td>
175+
<td v-else>
176+
<Flex v-if="vote.validator" align="center">
177+
<Tooltip delay="500">
178+
<Text size="13" height="120" weight="600" color="primary">
179+
{{ vote.validator.moniker }}
180+
</Text>
181+
182+
<template #content> {{ space(vote.validator.cons_address) }} </template>
183+
</Tooltip>
184+
</Flex>
185+
<Text v-else size="12" weight="600" color="support">No Validator</Text>
186+
</td>
187+
<td>
188+
<Flex align="center" :class="$style.link">
189+
<Outline @click.prevent="router.push(`/block/${vote.height}`)">
190+
<Flex align="center" gap="6">
191+
<Icon name="block" size="14" color="secondary" />
192+
193+
<Text size="13" weight="600" color="primary" tabular>{{ comma(vote.height) }}</Text>
194+
</Flex>
195+
</Outline>
196+
</Flex>
197+
</td>
162198
<td>
163199
<Flex justify="center" direction="column" gap="4">
164200
<Text size="12" weight="600" color="primary">
@@ -169,40 +205,6 @@ const handleNextPage = () => {
169205
</Text>
170206
</Flex>
171207
</td>
172-
<td>
173-
<Flex v-if="vote.validator" align="center">
174-
<Tooltip delay="500">
175-
<template #default>
176-
<Flex direction="column" gap="4">
177-
<Text size="12" height="120" weight="600" color="primary">
178-
{{ vote.validator.moniker }}
179-
</Text>
180-
181-
<Flex align="center" gap="6">
182-
<Text size="12" weight="600" color="tertiary" mono>
183-
{{ vote.validator.cons_address.slice(0, 4) }}
184-
</Text>
185-
<Flex align="center" gap="3">
186-
<div v-for="dot in 3" class="dot" />
187-
</Flex>
188-
<Text size="12" weight="600" color="tertiary" mono>
189-
{{
190-
vote.validator.cons_address.slice(
191-
vote.validator.cons_address.length - 4,
192-
vote.validator.cons_address.length,
193-
)
194-
}}
195-
</Text>
196-
<CopyButton :text="vote.validator.cons_address" size="10" />
197-
</Flex>
198-
</Flex>
199-
</template>
200-
201-
<template #content> {{ space(vote.validator.cons_address) }} </template>
202-
</Tooltip>
203-
</Flex>
204-
<Text v-else size="12" weight="600" color="support">No Validator</Text>
205-
</td>
206208
</tr>
207209
</tbody>
208210
</table>
@@ -230,9 +232,7 @@ const handleNextPage = () => {
230232
</Button>
231233

232234
<Button type="secondary" size="mini" disabled>
233-
<Text size="12" weight="600" color="primary">
234-
Page {{ comma(page) }} <template v-if="totalPages">of {{ comma(totalPages) }}</template>
235-
</Text>
235+
<Text size="12" weight="600" color="primary"> Page {{ comma(page) }} </Text>
236236
</Button>
237237

238238
<Button @click="handleNextPage" type="secondary" size="mini" :disabled="isNextPageDisabled">

‎services/api/proposal.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,14 @@ export const fetchProposalById = async ({ id }) => {
2929
}
3030
}
3131

32-
export const fetchProposalVotes = async ({ id, limit, offset, option }) => {
32+
export const fetchProposalVotes = async ({ id, limit, offset, option, voter }) => {
3333
try {
3434
const url = new URL(`${useServerURL()}/proposal/${id}/votes`)
3535

3636
if (limit) url.searchParams.append("limit", limit)
3737
if (offset) url.searchParams.append("offset", offset)
3838
if (option) url.searchParams.append("option", option)
39+
if (voter) url.searchParams.append("voter", voter)
3940

4041
const data = await useAsyncData(`proposal-${id}-votes`, () => $fetch(url.href))
4142
return data

‎services/config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const useServerURL = () => {
4242
return Server.API.dev
4343

4444
default:
45-
return Server.API.dev
45+
return Server.API.mocha
4646
}
4747
}
4848

0 commit comments

Comments
 (0)