feat: proposal item
This commit is contained in:
Alisa | Side.one
parent
a22da6878d
commit
a478949bdd
@ -26,64 +26,82 @@ const statusMap: Record<string, string> = {
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||||
<RouterLink
|
<table class="table w-full">
|
||||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
<tbody>
|
||||||
v-for="(item, index) in proposals?.proposals"
|
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||||
:key="index"
|
<td class="px-4 w-10">
|
||||||
class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
|
<RouterLink
|
||||||
>
|
class="text-main text-base hover:text-indigo-400"
|
||||||
<div class="grid grid-cols-6 md:grid-cols-11 flex-1">
|
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||||
<div class="text-main dark:text-white mb-3">
|
>
|
||||||
#{{ item?.proposal_id }}
|
#{{ item?.proposal_id }}
|
||||||
</div>
|
</RouterLink>
|
||||||
|
</td>
|
||||||
|
<td class="w-[40%]">
|
||||||
|
<div>
|
||||||
|
<RouterLink
|
||||||
|
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||||
|
class="text-main text-base mb-1 block hover:text-indigo-400"
|
||||||
|
>
|
||||||
|
{{ item?.content?.title }}
|
||||||
|
</RouterLink>
|
||||||
|
<div
|
||||||
|
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
|
||||||
|
>
|
||||||
|
{{ showType(item.content['@type']) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="w-[30%]">
|
||||||
|
<ProposalProcess
|
||||||
|
:pool="staking.pool"
|
||||||
|
:tally="item.final_tally_result"
|
||||||
|
></ProposalProcess>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="flex items-center"
|
||||||
|
:class="
|
||||||
|
statusMap?.[item?.status] === 'PASSED'
|
||||||
|
? 'text-yes'
|
||||||
|
: statusMap?.[item?.status] === 'REJECTED'
|
||||||
|
? 'text-no'
|
||||||
|
: 'text-info'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-1 h-1 rounded-full mr-2"
|
||||||
|
:class="
|
||||||
|
statusMap?.[item?.status] === 'PASSED'
|
||||||
|
? 'bg-yes'
|
||||||
|
: statusMap?.[item?.status] === 'REJECTED'
|
||||||
|
? 'bg-no'
|
||||||
|
: 'bg-info'
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div class="text-xs">
|
||||||
|
{{ statusMap?.[item?.status] || item?.status }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
|
||||||
|
>
|
||||||
|
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
<div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
|
<td>
|
||||||
{{ item?.content?.title }}
|
<div>
|
||||||
</div>
|
<button class="btn btn-xs btn-primary rounded-sm mr-3">
|
||||||
|
Detail
|
||||||
<div class="col-span-3 mb-3 truncate">
|
</button>
|
||||||
<div
|
<button class="btn btn-xs btn-primary rounded-sm">Vote</button>
|
||||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
|
</div>
|
||||||
>
|
</td>
|
||||||
{{ showType(item.content['@type']) }}
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex items-center mb-3"
|
|
||||||
:class="
|
|
||||||
statusMap?.[item?.status] === 'PASSED'
|
|
||||||
? 'text-yes'
|
|
||||||
: statusMap?.[item?.status] === 'REJECTED'
|
|
||||||
? 'text-no'
|
|
||||||
: 'text-info'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-1 h-1 rounded-full mr-2"
|
|
||||||
:class="
|
|
||||||
statusMap?.[item?.status] === 'PASSED'
|
|
||||||
? 'bg-yes'
|
|
||||||
: statusMap?.[item?.status] === 'REJECTED'
|
|
||||||
? 'bg-no'
|
|
||||||
: 'bg-info'
|
|
||||||
"
|
|
||||||
></div>
|
|
||||||
<div class="text-xs">
|
|
||||||
{{ statusMap?.[item?.status] || item?.status }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="truncate mb-3 col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
|
|
||||||
>
|
|
||||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ProposalProcess
|
|
||||||
:pool="staking.pool"
|
|
||||||
:tally="item.final_tally_result"
|
|
||||||
></ProposalProcess>
|
|
||||||
</RouterLink>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -30,14 +30,35 @@ const veto = computed(() =>
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="progress rounded-full h-1 text-xs flex items-center">
|
<div class="progress rounded-[3px] h-7 text-xs flex items-center">
|
||||||
<div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
|
|
||||||
<div class="h-1 bg-no" :style="`width: ${no}`"></div>
|
|
||||||
<div
|
<div
|
||||||
class="h-1"
|
class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
|
||||||
:style="`width: ${veto}; background-color: #B71C1C;`"
|
:style="`width: ${yes}`"
|
||||||
></div>
|
:title="yes"
|
||||||
<div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
|
>
|
||||||
|
{{ yes }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-7 bg-no flex items-center overflow-hidden"
|
||||||
|
:style="`width: ${no}`"
|
||||||
|
:title="no"
|
||||||
|
>
|
||||||
|
{{ no }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
|
||||||
|
:style="`width: ${veto};`"
|
||||||
|
:title="veto"
|
||||||
|
>
|
||||||
|
{{ veto }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-7 bg-secondary flex items-center overflow-hidden"
|
||||||
|
:style="`width: ${abstain}`"
|
||||||
|
:title="abstain"
|
||||||
|
>
|
||||||
|
{{ abstain }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -1,31 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { useBlockchain } from '@/stores/useBlockchain';
|
|
||||||
import { Icon } from '@iconify/vue';
|
|
||||||
import { computed } from '@vue/reactivity';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
|
|
||||||
const chain = useBlockchain();
|
|
||||||
const route = useRoute();
|
|
||||||
const i18n = useI18n();
|
|
||||||
/// To display human readable module name, we have to set the prefix("module.") + route name to the key in i18n.
|
|
||||||
/// such as `module.chain` = 'Dashboard'
|
|
||||||
const moduleName = computed(() =>
|
|
||||||
i18n.t(`module.${route.name?.toString() || ''}`)
|
|
||||||
);
|
|
||||||
const items = computed(() => [
|
|
||||||
{ title: String(chain.name).toUpperCase(), href: `/${chain.name}` },
|
|
||||||
moduleName.value,
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="d-flex flex-rows align-center">
|
|
||||||
<span class="text-h5 mr-3">{{ moduleName }}</span>
|
|
||||||
<Icon icon="mdi-dots-vertical" />
|
|
||||||
<VBreadcrumbs :items="items">
|
|
||||||
<template v-slot:divider>
|
|
||||||
<Icon icon="mdi-chevron-right" />
|
|
||||||
</template>
|
|
||||||
</VBreadcrumbs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
Loading…
Reference in New Issue
Block a user