From ba4ec2abf2a02b4fc46ab1c97ec11a7dab47aa0e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 00:08:59 +0800
Subject: [PATCH] feat: timeline

---
 src/modules/[chain]/gov/[proposal_id].vue | 583 ++++++++++++----------
 1 file changed, 310 insertions(+), 273 deletions(-)

diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 5929572f..6a3d078b 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -1,318 +1,355 @@
 <script lang="ts" setup>
 import ObjectElement from '@/components/dynamic/ObjectElement.vue';
-import { useBaseStore, useFormatter, useGovStore, useStakingStore, useTxDialog } from '@/stores';
-import type { GovProposal, GovVote, PaginabledAccounts, PaginatedProposalDeposit, PaginatedProposalVotes, Pagination } from '@/types';
-import { ref , reactive} from 'vue';
+import {
+  useBaseStore,
+  useFormatter,
+  useGovStore,
+  useStakingStore,
+  useTxDialog,
+} from '@/stores';
+import type {
+  GovProposal,
+  GovVote,
+  PaginabledAccounts,
+  PaginatedProposalDeposit,
+  PaginatedProposalVotes,
+  Pagination,
+} from '@/types';
+import { ref, reactive } from 'vue';
 import Countdown from '@/components/Countdown.vue';
 import { computed } from '@vue/reactivity';
 
-const props = defineProps(["proposal_id", "chain"]);
-const proposal = ref({} as GovProposal)
-const format = useFormatter()
-const store = useGovStore()
-const dialog = useTxDialog()
+const props = defineProps(['proposal_id', 'chain']);
+const proposal = ref({} as GovProposal);
+const format = useFormatter();
+const store = useGovStore();
+const dialog = useTxDialog();
 
 store.fetchProposal(props.proposal_id).then((res) => {
-    const proposalDetail = reactive(res.proposal)
-    // when status under the voting, final_tally_result are no data, should request fetchTally
-    if (res.proposal?.status === 'PROPOSAL_STATUS_VOTING_PERIOD'){
-        store.fetchTally(props.proposal_id).then((tallRes)=>{
-            proposalDetail.final_tally_result = tallRes?.tally
-        })
-    }
-    proposal.value = proposalDetail
-})
+  const proposalDetail = reactive(res.proposal);
+  // when status under the voting, final_tally_result are no data, should request fetchTally
+  if (res.proposal?.status === 'PROPOSAL_STATUS_VOTING_PERIOD') {
+    store.fetchTally(props.proposal_id).then((tallRes) => {
+      proposalDetail.final_tally_result = tallRes?.tally;
+    });
+  }
+  proposal.value = proposalDetail;
+});
 
 const color = computed(() => {
-    if (proposal.value.status==='PROPOSAL_STATUS_PASSED') {
-        return "success"
-    }else if (proposal.value.status==='PROPOSAL_STATUS_REJECTED') {
-        return "error"
-    }
-    return ""
-})
+  if (proposal.value.status === 'PROPOSAL_STATUS_PASSED') {
+    return 'success';
+  } else if (proposal.value.status === 'PROPOSAL_STATUS_REJECTED') {
+    return 'error';
+  }
+  return '';
+});
 const status = computed(() => {
-    if(proposal.value.status) {
-        return proposal.value.status.replace("PROPOSAL_STATUS_", "")
-    }
-    return ""
-})
+  if (proposal.value.status) {
+    return proposal.value.status.replace('PROPOSAL_STATUS_', '');
+  }
+  return '';
+});
 
-const deposit = ref({} as PaginatedProposalDeposit)
-store.fetchProposalDeposits(props.proposal_id).then(x => deposit.value = x)
+const deposit = ref({} as PaginatedProposalDeposit);
+store.fetchProposalDeposits(props.proposal_id).then((x) => (deposit.value = x));
 
-const votes = ref({} as GovVote[])
-const votePage = ref({} as Pagination)
-const loading = ref(false)
+const votes = ref({} as GovVote[]);
+const votePage = ref({} as Pagination);
+const loading = ref(false);
 
-store.fetchProposalVotes(props.proposal_id).then(x => {
-    votes.value = x.votes
-    votePage.value = x.pagination
-})
+store.fetchProposalVotes(props.proposal_id).then((x) => {
+  votes.value = x.votes;
+  votePage.value = x.pagination;
+});
 
 function loadMore() {
-    if(votePage.value.next_key) {
-        loading.value = true
-        store.fetchProposalVotes(props.proposal_id, votePage.value.next_key).then(x => {
-            votes.value = votes.value.concat(x.votes)
-            votePage.value = x.pagination
-            loading.value = false
-        })
-    }
+  if (votePage.value.next_key) {
+    loading.value = true;
+    store
+      .fetchProposalVotes(props.proposal_id, votePage.value.next_key)
+      .then((x) => {
+        votes.value = votes.value.concat(x.votes);
+        votePage.value = x.pagination;
+        loading.value = false;
+      });
+  }
 }
 
 function shortTime(v: string) {
-    if(v) {
-        return format.toDay(v, "from")
-    }
-    return ""
+  if (v) {
+    return format.toDay(v, 'from');
+  }
+  return '';
 }
 
 const votingCountdown = computed((): number => {
-    const now = new Date();
-    const end = new Date(proposal.value.voting_end_time)
-    return end.getTime() - now.getTime()
-})
+  const now = new Date();
+  const end = new Date(proposal.value.voting_end_time);
+  return end.getTime() - now.getTime();
+});
 
 const upgradeCountdown = computed((): number => {
-    const height = Number(proposal.value.content?.plan?.height || 0)
-    if(height > 0) {
-        const base = useBaseStore()
-        const current = Number(base.latest?.block?.header?.height || 0)
-        return (height - current) * 6 * 1000
-    }
-    const now = new Date();
-    const end = new Date(proposal.value.content?.plan?.time || "")
-    return end.getTime() - now.getTime()
-})
+  const height = Number(proposal.value.content?.plan?.height || 0);
+  if (height > 0) {
+    const base = useBaseStore();
+    const current = Number(base.latest?.block?.header?.height || 0);
+    return (height - current) * 6 * 1000;
+  }
+  const now = new Date();
+  const end = new Date(proposal.value.content?.plan?.time || '');
+  return end.getTime() - now.getTime();
+});
 
-const total = computed(()=> {
-    const tally = proposal.value.final_tally_result
-    let sum = 0
-    if(tally) {
-        sum += Number(tally.abstain || 0)
-        sum += Number(tally.yes || 0)
-        sum += Number(tally.no || 0)
-        sum += Number(tally.no_with_veto || 0)
-
-    }
-    return sum
-})
+const total = computed(() => {
+  const tally = proposal.value.final_tally_result;
+  let sum = 0;
+  if (tally) {
+    sum += Number(tally.abstain || 0);
+    sum += Number(tally.yes || 0);
+    sum += Number(tally.no || 0);
+    sum += Number(tally.no_with_veto || 0);
+  }
+  return sum;
+});
 
 const turnout = computed(() => {
-    if (total.value > 0) {
-    const bonded = useStakingStore().pool?.bonded_tokens || "1"
-    return format.percent(total.value / Number(bonded))
-    }
-    return 0
-})
+  if (total.value > 0) {
+    const bonded = useStakingStore().pool?.bonded_tokens || '1';
+    return format.percent(total.value / Number(bonded));
+  }
+  return 0;
+});
 
-const yes = computed(()=> {
-    if(total.value > 0) {
-        const yes = proposal.value?.final_tally_result?.yes || 0
-        return format.percent(Number(yes) / total.value )
-    }
-    return 0
-})
+const yes = computed(() => {
+  if (total.value > 0) {
+    const yes = proposal.value?.final_tally_result?.yes || 0;
+    return format.percent(Number(yes) / total.value);
+  }
+  return 0;
+});
 
-const no = computed(()=> {
-    if(total.value > 0) {
-        const value = proposal.value?.final_tally_result?.no || 0
-        return format.percent(Number(value) / total.value)
-    }
-    return 0
-})
+const no = computed(() => {
+  if (total.value > 0) {
+    const value = proposal.value?.final_tally_result?.no || 0;
+    return format.percent(Number(value) / total.value);
+  }
+  return 0;
+});
 
-const veto = computed(()=> {
-    if(total.value > 0) {
-        const value = proposal.value?.final_tally_result?.no_with_veto || 0
-        return format.percent(Number(value) / total.value)
-    }
-    return 0
-})
+const veto = computed(() => {
+  if (total.value > 0) {
+    const value = proposal.value?.final_tally_result?.no_with_veto || 0;
+    return format.percent(Number(value) / total.value);
+  }
+  return 0;
+});
 
-const abstain = computed(()=> {
-    if(total.value > 0) {
-        const value = proposal.value?.final_tally_result?.abstain || 0
-        return format.percent(Number(value) / total.value)
-    }
-    return 0
-})
-const processList = computed(()=>{
-    return [
-        {name: 'Turnout', value : turnout.value, class: 'bg-info' },
-        {name: 'Yes', value : yes.value, class: 'bg-success' },
-        {name: 'No', value : no.value, class: 'bg-error' },
-        {name: 'No With Veto', value : veto.value, class: 'bg-primary' },
-        {name: 'Abstain', value : abstain.value, class: 'bg-warning' }
-    ]
-})
+const abstain = computed(() => {
+  if (total.value > 0) {
+    const value = proposal.value?.final_tally_result?.abstain || 0;
+    return format.percent(Number(value) / total.value);
+  }
+  return 0;
+});
+const processList = computed(() => {
+  return [
+    { name: 'Turnout', value: turnout.value, class: 'bg-info' },
+    { name: 'Yes', value: yes.value, class: 'bg-success' },
+    { name: 'No', value: no.value, class: 'bg-error' },
+    { name: 'No With Veto', value: veto.value, class: 'bg-primary' },
+    { name: 'Abstain', value: abstain.value, class: 'bg-warning' },
+  ];
+});
 </script>
 
 <template>
-<div>
+  <div>
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title flex flex-col md:justify-between md:flex-row">
-            <p class="truncate w-full">{{ proposal_id }}. {{ proposal.content?.title }} </p>
-            <div 
-                class="badge badge-ghost"
-                :class="
-                    color === 'success'
-                    ? 'text-yes'
-                    : color === 'error'
-                    ? 'text-no'
-                    : 'text-info'
-                "
-            >{{ status }}</div>
-        </h2>
-        <div class="">
-            <ObjectElement :value="proposal.content"/>
+      <h2 class="card-title flex flex-col md:justify-between md:flex-row">
+        <p class="truncate w-full">
+          {{ proposal_id }}. {{ proposal.content?.title }}
+        </p>
+        <div
+          class="badge badge-ghost"
+          :class="
+            color === 'success'
+              ? 'text-yes'
+              : color === 'error'
+              ? 'text-no'
+              : 'text-info'
+          "
+        >
+          {{ status }}
         </div>
+      </h2>
+      <div class="">
+        <ObjectElement :value="proposal.content" />
+      </div>
     </div>
     <!-- grid lg:grid-cols-3 auto-rows-max-->
     <!-- flex-col lg:flex-row flex -->
-    <div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max ">
-        <!-- flex-1 -->
-        <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow ">
-            <h2 class="card-title">Tally</h2>
-            <div v-for="(item,index) of processList" :key="index">
-                <label class="block">{{item.name }}</label>
-                <div class="h-6 w-full relative">
-                    <div class="absolute inset-x-0 inset-y-0 w-full opacity-10 rounded-sm" :class="`${item.class}`"></div>
-                    <div class="absolute inset-x-0 inset-y-0 rounded-sm" :class="`${item.class}`" :style="`width: ${item.value}`"></div>
-                    <p class="absolute inset-x-0 inset-y-0 text-center text-sm text-[#666] dark:text-[#eee] flex items-center justify-center">{{ item.value }}</p>
-                </div>
-            </div>
-            <div>
-                <label for="vote" class="btn btn-primary float-right btn-sm mx-1" @click="dialog.open('vote', {proposal_id})">Vote</label>
-                <label for="deposit" class="btn btn-primary float-right btn-sm mx-1" @click="dialog.open('deposit', {proposal_id})">Deposit</label>
-            </div>
-        </div>
-        <!-- lg:col-span-2 -->
-        <!-- lg:flex-[2_2_0%] -->
-        <div class="h-max bg-base-100 px-4 pt-3 pb-4 rounded shadow lg:col-span-2">
-            <h2 class="card-title">Timeline</h2>
-           <VTimeline
-                class="mt-2"
-                side="end"
-                align="start"
-                line-inset="8"
-                truncate-line="both"
-                density="compact"
+    <div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max">
+      <!-- flex-1 -->
+      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+        <h2 class="card-title mb-1">Tally</h2>
+        <div class="mb-1" v-for="(item, index) of processList" :key="index">
+          <label class="block text-sm mb-1">{{ item.name }}</label>
+          <div class="h-5 w-full relative">
+            <div
+              class="absolute inset-x-0 inset-y-0 w-full opacity-10 rounded-sm"
+              :class="`${item.class}`"
+            ></div>
+            <div
+              class="absolute inset-x-0 inset-y-0 rounded-sm"
+              :class="`${item.class}`"
+              :style="`width: ${item.value}`"
+            ></div>
+            <p
+              class="absolute inset-x-0 inset-y-0 text-center text-sm text-[#666] dark:text-[#eee] flex items-center justify-center"
             >
-                <VTimelineItem
-                dot-color="error"
-                size="x-small"
-                >
-                <!-- 👉 Header -->
-                <div class="d-flex justify-space-between flex-wrap mb-3">
-                    <h6 class="text-base font-weight-medium me-3">
-                    Submited at: {{ format.toDay(proposal.submit_time) }}
-                    </h6>
-                    <small class="text-xs text-disabled my-1">{{ shortTime(proposal.submit_time) }}</small>
-                </div>
-                </VTimelineItem>
-
-                <VTimelineItem
-                size="x-small"
-                dot-color="primary"
-                >
-                <!-- 👉 Header -->
-                <div class="d-flex justify-space-between flex-wrap mb-3">
-                    <h6 class="text-base font-weight-medium me-3">
-                        Deposited at: {{ format.toDay(proposal.status==="PROPOSAL_STATUS_DEPOSIT_PERIOD"?proposal.deposit_end_time: proposal.voting_start_time) }}
-                    </h6>
-                    <small class="text-xs text-disabled text-no-wrap my-1">{{ shortTime(proposal.status==="PROPOSAL_STATUS_DEPOSIT_PERIOD"?proposal.deposit_end_time: proposal.voting_start_time) }}</small>
-                </div>
-
-                <p class="mb-0">
-                    <div v-for="x of deposit.deposits">
-                        {{ x.depositor }} {{ format.formatTokens(x.amount) }}
-                    </div>
-                </p>
-
-                
-                </VTimelineItem>
-
-                <VTimelineItem
-                size="x-small"
-                dot-color="success"
-                >
-                <!-- 👉 Header -->
-                <div class="d-flex justify-space-between flex-wrap mb-3">
-                    <h6 class="text-base font-weight-medium me-3">
-                        Voting start from {{ format.toDay(proposal.voting_start_time) }}
-                    </h6>
-                    <small class="text-xs text-disabled text-no-wrap my-1">{{ shortTime(proposal.voting_start_time) }}</small>
-                </div>
-
-                <!-- 👉 Content -->
-                <p class="mb-0">
-                    <Countdown :time="votingCountdown"/>
-                </p>
-                </VTimelineItem>
-
-                <VTimelineItem
-                size="x-small"
-                dot-color="success"
-                >
-                <!-- 👉 Header -->
-                <div class="d-flex justify-space-between flex-wrap mb-3">
-                    <h6 class="text-base font-weight-medium me-3">
-                        Voting end {{ format.toDay(proposal.voting_end_time) }}
-                    </h6>
-                    <small class="text-xs text-disabled text-no-wrap my-1">{{ shortTime(proposal.voting_end_time) }}</small>
-                </div>
-
-                <!-- 👉 Content -->
-                <p class="mb-0">
-                    Current Status: {{ proposal.status }}
-                </p>
-                </VTimelineItem>
-                <VTimelineItem
-                    v-if="proposal.content && proposal.content['@type'].endsWith('SoftwareUpgradeProposal')"
-                    size="x-small"
-                    dot-color="success"
-                >
-                    <!-- 👉 Header -->
-                    <div class="d-flex justify-space-between flex-wrap mb-3">
-                        <h6 class="text-base font-weight-medium me-3">
-                            Upgrade Plan: 
-                            <span v-if="Number(proposal.content?.plan?.height||'0') > 0"> (EST)</span>
-                            <span v-else>{{ format.toDay(proposal.content?.plan?.time) }}</span>
-                        </h6>
-                        <small class="text-xs text-disabled text-no-wrap my-1">{{ shortTime(proposal.voting_end_time) }}</small>
-                    </div>
-
-                    <!-- 👉 Content -->
-                    <p class="mb-0">
-                        <Countdown :time="upgradeCountdown"/>
-                    </p>
-                </VTimelineItem>
-            </VTimeline>
+              {{ item.value }}
+            </p>
+          </div>
         </div>
+        <div class="mt-6 grid grid-cols-2">
+          <label
+            for="vote"
+            class="btn btn-primary float-right btn-sm mx-1"
+            @click="dialog.open('vote', { proposal_id })"
+            >Vote</label
+          >
+          <label
+            for="deposit"
+            class="btn btn-primary float-right btn-sm mx-1"
+            @click="dialog.open('deposit', { proposal_id })"
+            >Deposit</label
+          >
+        </div>
+      </div>
+
+      <div
+        class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:col-span-2"
+      >
+        <h2 class="card-title">Timeline</h2>
+
+        <div class="px-1">
+          <div class="flex items-center mb-4 mt-2">
+            <div class="w-2 h-2 rounded-full bg-error mr-3"></div>
+            <div class="text-base flex-1 text-main">
+              Submited at: {{ format.toDay(proposal.submit_time) }}
+            </div>
+            <div class="text-sm">{{ shortTime(proposal.submit_time) }}</div>
+          </div>
+          <div class="flex items-center mb-4">
+            <div class="w-2 h-2 rounded-full bg-primary mr-3"></div>
+            <div class="text-base flex-1 text-main">
+              Deposited at:
+              {{
+                format.toDay(
+                  proposal.status === 'PROPOSAL_STATUS_DEPOSIT_PERIOD'
+                    ? proposal.deposit_end_time
+                    : proposal.voting_start_time
+                )
+              }}
+            </div>
+            <div class="text-sm">
+              {{
+                shortTime(
+                  proposal.status === 'PROPOSAL_STATUS_DEPOSIT_PERIOD'
+                    ? proposal.deposit_end_time
+                    : proposal.voting_start_time
+                )
+              }}
+            </div>
+          </div>
+          <div class="mb-4">
+            <div class="flex items-center">
+              <div class="w-2 h-2 rounded-full bg-yes mr-3"></div>
+              <div class="text-base flex-1 text-main">
+                Voting start from {{ format.toDay(proposal.voting_start_time) }}
+              </div>
+              <div class="text-sm">
+                {{ shortTime(proposal.voting_start_time) }}
+              </div>
+            </div>
+            <div class="pl-5 text-sm mt-2">
+              <Countdown :time="votingCountdown" />
+            </div>
+          </div>
+          <div>
+            <div class="flex items-center mb-1">
+              <div class="w-2 h-2 rounded-full bg-success mr-3"></div>
+              <div class="text-base flex-1 text-main">
+                Voting end {{ format.toDay(proposal.voting_end_time) }}
+              </div>
+              <div class="text-sm">
+                {{ shortTime(proposal.voting_end_time) }}
+              </div>
+            </div>
+            <div class="pl-5 text-sm">
+              Current Status: {{ proposal.status }}
+            </div>
+          </div>
+
+          <div
+            class="mt-4"
+            v-if="
+              proposal?.content?.['@type']?.endsWith('SoftwareUpgradeProposal')
+            "
+          >
+            <div class="flex items-center">
+              <div class="w-2 h-2 rounded-full bg-warning mr-3"></div>
+              <div class="text-base flex-1 text-main">
+                Upgrade Plan:
+                <span v-if="Number(proposal.content?.plan?.height || '0') > 0">
+                  (EST)</span
+                >
+                <span v-else>{{
+                  format.toDay(proposal.content?.plan?.time)
+                }}</span>
+              </div>
+              <div class="text-sm">
+                {{ shortTime(proposal.voting_end_time) }}
+              </div>
+            </div>
+            <div class="pl-5 text-sm mt-2">
+              <Countdown :time="upgradeCountdown" />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    
+
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title">Votes</h2>
-        <div class="overflow-x-auto">
-            <table class="table  w-full">
-                <tbody>
-                    <tr v-for="(item,index) of votes" :key="index">
-                        <td>{{ item.voter }}</td>
-                        <td>{{ item.option }}</td>
-                    </tr>
-                </tbody>
-            </table>
+      <h2 class="card-title">Votes</h2>
+      <div class="overflow-x-auto">
+        <table class="table w-full table-zebra">
+          <tbody>
+            <tr v-for="(item, index) of votes" :key="index">
+              <td class="py-2 text-sm">{{ item.voter }}</td>
+              <td
+                class="py-2 text-sm"
+                :class="{
+                  'text-yes': item.option === 'VOTE_OPTION_YES',
+                  'text-gray-400': item.option === 'VOTE_OPTION_ABSTAIN',
+                }"
+              >
+                {{ item.option }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
-            <button
-                v-if="votePage.next_key" 
-                @click="loadMore()"
-                :disabled="loading"
-                class="btn btn-outline btn-primary w-full"
-                style="border: 1px solid hsl(var(--p));"
-            >Load more</button>
-        </div>
+        <button
+          @click="loadMore()"
+          v-if="votePage.next_key"
+          :disabled="loading"
+          class="btn btn-outline btn-primary w-full mt-4"
+        >
+          Load more
+        </button>
+      </div>
     </div>
-</div>
+  </div>
 </template>