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>
|
||||
<template>
|
||||
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
v-for="(item, index) in proposals?.proposals"
|
||||
:key="index"
|
||||
class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
|
||||
>
|
||||
<div class="grid grid-cols-6 md:grid-cols-11 flex-1">
|
||||
<div class="text-main dark:text-white mb-3">
|
||||
#{{ item?.proposal_id }}
|
||||
</div>
|
||||
<table class="table w-full">
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||
<td class="px-4 w-10">
|
||||
<RouterLink
|
||||
class="text-main text-base hover:text-indigo-400"
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
>
|
||||
#{{ item?.proposal_id }}
|
||||
</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">
|
||||
{{ item?.content?.title }}
|
||||
</div>
|
||||
|
||||
<div class="col-span-3 mb-3 truncate">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<td>
|
||||
<div>
|
||||
<button class="btn btn-xs btn-primary rounded-sm mr-3">
|
||||
Detail
|
||||
</button>
|
||||
<button class="btn btn-xs btn-primary rounded-sm">Vote</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -30,14 +30,35 @@ const veto = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="progress rounded-full h-1 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 class="progress rounded-[3px] h-7 text-xs flex items-center">
|
||||
<div
|
||||
class="h-1"
|
||||
:style="`width: ${veto}; background-color: #B71C1C;`"
|
||||
></div>
|
||||
<div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
|
||||
class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
|
||||
:style="`width: ${yes}`"
|
||||
:title="yes"
|
||||
>
|
||||
{{ 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>
|
||||
</template>
|
||||
<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