feat: voter list partial

src/components/proposals/Breakdown.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import { useChainData } from "@/composables/useChainData";
+import * as Utility from "@/utility/index";
+
+const { getAllVotes, getAllVotesAsync } = useChainData();
+
+const props = defineProps<{ proposalId: number; isValidatorsOnly?: boolean }>();
+const offset = ref<number>(1);
+const limit = ref<number>(10);
+const votes = ref();
+
+function next() {
+  offset.value += limit.value;
+}
+
+function prev() {
+  offset.value = offset.value <= limit.value ? 0 : offset.value - limit.value;
+}
+
+async function updateVoteList() {
+  try {
+    console.log(props.proposalId);
+    console.log(limit.value);
+    console.log(offset.value);
+    votes.value = getAllVotes(props.proposalId, limit.value, 0).value;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+const filteredVotes = computed(() => {
+  return votes.value;
+});
+
+onMounted(() => {
+  updateVoteList();
+
+  setInterval(async () => {
+    const res = await getAllVotesAsync(0, 10, 0);
+    console.log(res);
+  }, 1000);
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full">
+    <div class="grid grid-cols-4 py-4 w-full text-grey-100 font-medium text-200">
+      <span>Voter</span>
+      <span>TX Hash</span>
+      <span>Answer</span>
+      <span class="text-right">Time</span>
+    </div>
+    <div class="grid grid-cols-4 py-4 w-full text-200 text-grey-50" v-for="index in 10" :key="index">
+      <span>GovGen...</span>
+      <span>wwwwwwwwww</span>
+      <span>yes</span>
+      <span class="text-right">{{ Utility.formatHuman(new Date(Date.now())) }}</span>
+    </div>
+    {{ filteredVotes }}
+    <div class="flex flex-row justify-end pt-12 gap-4">
+      <Icon icon="Arrowleftend" class="text-400 hover:opacity-75 cursor-pointer" />
+      <Icon icon="Arrowleft" class="text-400 hover:opacity-75 cursor-pointer" />
+      <!-- Page Numbers -->
+      <Icon icon="Arrowright" class="text-400 hover:opacity-75 cursor-pointer" />
+      <Icon icon="Arrowrightend" class="text-400 hover:opacity-75 cursor-pointer" />
+    </div>
+  </div>
+</template>

src/components/proposals/ProposalWrapper.vue

@@ -21,9 +21,13 @@ import utc from "dayjs/plugin/utc";
 import { decToPerc, formatAmount } from "@/utility";
 import { useValidators } from "@/composables/useValidators";
 import { ValSetQuery, ValidatorsQuery, VotesQuery } from "@/gql/graphql";
+import * as Utility from "@/utility/index";
+import CommonButton from "../ui/CommonButton.vue";
+import Breakdown from "@/components/proposals/Breakdown.vue";
 
-type TabNames = "Info" | "Voters" | "Discussions" | "Links";
 const voteTypes = ["yes", "no", "veto", "abstain"] as const;
+type BreakdownType = "voters" | "validators" | null;
+type TabNames = "Info" | "Voters" | "Discussions" | "Links";
 type VoteTypes = (typeof voteTypes)[number];
 
 dayjs.extend(duration);
@@ -68,6 +72,7 @@ watch(validators, async (valSet, _old) => {
     }),
   );
 });
+
 const maxValidators = computed(() => {
   return validatorsWithStakeAndVotes.value.length;
 });
@@ -193,6 +198,9 @@ const termDiscussion = computed(() => `Proposal #${props.proposalId}`);
 const tabSelected = ref<TabNames>("Info");
 const tabOptions = reactive<TabNames[]>(["Info", "Voters", "Discussions", "Links"]);
 
+const breakdownType = ref<("validators" | "voters") | null>(null);
+const breakdownOffset = ref(0);
+
 const inDeposit = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_DEPOSIT_PERIOD");
 const inVoting = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_VOTING_PERIOD");
 const failed = computed(() => proposal.value?.proposal[0].status === "PROPOSAL_STATUS_FAILED");
@@ -254,6 +262,7 @@ const threshold = computed(() => {
 const veto_threshold = computed(() => {
   return parseFloat(tally_params.value?.veto_threshold ?? "0");
 });
+
 const yesCount = getVoteOption(props.proposalId, "VOTE_OPTION_YES");
 const noCount = getVoteOption(props.proposalId, "VOTE_OPTION_NO");
 const nwvCount = getVoteOption(props.proposalId, "VOTE_OPTION_NO_WITH_VETO");
@@ -371,6 +380,11 @@ const timeTo = (dateString: string) => {
 function isTabSelected(tabName: TabNames) {
   return tabSelected.value.toLowerCase() == tabName.toLowerCase();
 }
+
+function showBreakdown(type: BreakdownType) {
+  breakdownType.value = type;
+  breakdownOffset.value = 0;
+}
 </script>
 
 <template>
@@ -667,53 +681,71 @@ function isTabSelected(tabName: TabNames) {
         </div>
       </div>
       <div v-if="isTabSelected('Voters')" class="flex flex-col w-full gap-6">
-        <div v-if="proposal && proposal.proposal[0]" class="flex flex-col lg:flex-row w-full gap-6">
-          <!-- All Account Votes -->
-          <VotePanel
-            :voters="distinctVoters"
-            :denom="stakingDenomDisplay"
-            :precision="stakingDenomDecimals"
-            :vote-tallies="allVoteCounts"
-            :token-tallies="tokenTallies"
-            @on-breakdown="() => {}"
-          >
-            <template #header>{{ $t("proposalpage.labels.accountsAll") }}</template>
-            <template #type>{{ $t("proposalpage.labels.accountsVoted") }}</template>
-          </VotePanel>
-          <!-- All Validator Votes -->
-          <VotePanel
-            :max="maxValidators"
-            :voters="votedValidators"
-            :denom="stakingDenomDisplay"
-            :precision="stakingDenomDecimals"
-            :vote-tallies="validatorVoteCounts"
-            :token-tallies="validatorTallies"
-            @on-breakdown="() => {}"
-          >
-            <template #header>{{ $t("proposalpage.labels.validators") }}</template>
-            <template #type>{{ $t("proposalpage.labels.validatorsVoted") }}</template>
-          </VotePanel>
-        </div>
+        <template v-if="!breakdownType">
+          <!-- Voters Panel -->
+          <div v-if="proposal && proposal.proposal[0]" class="flex flex-col lg:flex-row w-full gap-6">
+            <!-- All Account Votes -->
+            <VotePanel
+              :voters="distinctVoters"
+              :denom="stakingDenomDisplay"
+              :precision="stakingDenomDecimals"
+              :vote-tallies="allVoteCounts"
+              :token-tallies="tokenTallies"
+              @on-breakdown="showBreakdown('voters')"
+            >
+              <template #header>{{ $t("proposalpage.labels.accountsAll") }}</template>
+              <template #type>{{ $t("proposalpage.labels.accountsVoted") }}</template>
+            </VotePanel>
+            <!-- All Validator Votes -->
+            <VotePanel
+              :max="maxValidators"
+              :voters="votedValidators"
+              :denom="stakingDenomDisplay"
+              :precision="stakingDenomDecimals"
+              :vote-tallies="validatorVoteCounts"
+              :token-tallies="validatorTallies"
+              @on-breakdown="showBreakdown('validators')"
+            >
+              <template #header>{{ $t("proposalpage.labels.validators") }}</template>
+              <template #type>{{ $t("proposalpage.labels.validatorsVoted") }}</template>
+            </VotePanel>
+          </div>
 
-        <!-- Treemap Panel-->
-        <div class="flex flex-col bg-grey-300 rounded-md w-full p-10">
-          <div class="text-light text-500 text-left mb-8">{{ $t("proposalpage.labels.validatorQuota") }}</div>
-          <div class="flex flex-row object-contain">
-            <template v-if="validatorVoteSum >= 1">
-              <div
-                v-for="voteType in voteTypes"
-                :key="voteType"
-                class="flex flex-row h-96 relative"
-                :style="[`width: ${calculateWidthForTree(voteType)}%`]"
-              >
-                <Treemap :data="getValidatorVotes(voteType)" :type="voteType" />
+          <!-- Treemap Panel-->
+          <div class="flex flex-col bg-grey-300 rounded-md w-full p-10">
+            <div class="text-light text-500 text-left mb-8">{{ $t("proposalpage.labels.validatorQuota") }}</div>
+            <div class="flex flex-row object-contain">
+              <template v-if="validatorVoteSum >= 1">
+                <div
+                  v-for="voteType in voteTypes"
+                  :key="voteType"
+                  class="flex flex-row h-96 relative"
+                  :style="[`width: ${calculateWidthForTree(voteType)}%`]"
+                >
+                  <Treemap :data="getValidatorVotes(voteType)" :type="voteType" />
+                </div>
+              </template>
+              <div v-else class="text-grey-100 text-300">
+                {{ $t("proposalpage.labels.noValidatorVotes") }}
               </div>
-            </template>
-            <div v-else class="text-grey-100 text-300">
-              {{ $t("proposalpage.labels.noValidatorVotes") }}
             </div>
           </div>
-        </div>
+        </template>
+        <template v-else>
+          <CommonButton class="flex justify-between items-center gap-6 w-36" @click="showBreakdown(null)">
+            <Icon icon="arrowLeft" /><span>{{ $t("ui.buttons.back") }}</span>
+          </CommonButton>
+          <div class="font-termina text-800 font-semibold text-light pt-12">
+            {{ Utility.capitalizeFirstLetter(breakdownType) }}
+          </div>
+          <div class="flex flex-row gap-4">
+            <span>filter</span>
+            <span>filter</span>
+            <span>filter</span>
+            <span>filter</span>
+          </div>
+          <Breakdown v-if="proposal" :proposal-id="proposal.proposal[0].id" />
+        </template>
       </div>
       <div v-if="isTabSelected('Discussions')" class="w-full lg:w-2/3">
         <GithubComments :term="termDiscussion" />

src/components/ui/icons/Arrowleft.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.96967 4.71967C10.2626 4.42678 10.7374 4.42678 11.0303 4.71967C11.3232 5.01256 11.3232 5.48744 11.0303 5.78033L5.56066 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H5.56066L11.0303 18.2197C11.3232 18.5126 11.3232 18.9874 11.0303 19.2803C10.7374 19.5732 10.2626 19.5732 9.96967 19.2803L3.21967 12.5303C3.08238 12.393 3.00944 12.2158 3.00086 12.036C3.00029 12.024 3 12.012 3 12C3 11.8983 3.02024 11.8013 3.05691 11.7129C3.09351 11.6245 3.14776 11.5416 3.21967 11.4697L9.96967 4.71967Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/components/ui/icons/Arrowleftend.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.5 3.75C4.5 3.33579 4.16421 3 3.75 3C3.33579 3 3 3.33579 3 3.75V20.25C3 20.6642 3.33579 21 3.75 21C4.16421 21 4.5 20.6642 4.5 20.25V3.75ZM14.0303 4.71967C14.3232 5.01256 14.3232 5.48744 14.0303 5.78033L8.56066 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H8.56066L14.0303 18.2197C14.3232 18.5126 14.3232 18.9874 14.0303 19.2803C13.7374 19.5732 13.2626 19.5732 12.9697 19.2803L6.21967 12.5303C6.14776 12.4584 6.09351 12.3755 6.05691 12.2871C6.02051 12.1993 6.0003 12.1031 6 12.0022L6 12L6 11.9978C6.00057 11.8066 6.0738 11.6155 6.21967 11.4697L12.9697 4.71967C13.2626 4.42678 13.7374 4.42678 14.0303 4.71967Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/components/ui/icons/Arrowright.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.0303 4.71967C13.7374 4.42678 13.2626 4.42678 12.9697 4.71967C12.6768 5.01256 12.6768 5.48744 12.9697 5.78033L18.4393 11.25H3.75C3.33579 11.25 3 11.5858 3 12C3 12.4142 3.33579 12.75 3.75 12.75H18.4393L12.9697 18.2197C12.6768 18.5126 12.6768 18.9874 12.9697 19.2803C13.2626 19.5732 13.7374 19.5732 14.0303 19.2803L20.7803 12.5303C20.9176 12.393 20.9906 12.2158 20.9991 12.036C20.9997 12.024 21 12.012 21 12C21 11.8983 20.9798 11.8013 20.9431 11.7129C20.9065 11.6245 20.8522 11.5416 20.7803 11.4697L14.0303 4.71967Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/components/ui/icons/Arrowrightend.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 3.75C21 3.33579 20.6642 3 20.25 3C19.8358 3 19.5 3.33579 19.5 3.75V20.25C19.5 20.6642 19.8358 21 20.25 21C20.6642 21 21 20.6642 21 20.25V3.75ZM9.96967 4.71967C10.2626 4.42678 10.7374 4.42678 11.0303 4.71967L17.7803 11.4697C17.8522 11.5416 17.9065 11.6245 17.9431 11.7129C17.9798 11.8013 18 11.8983 18 12C18 12.1919 17.9268 12.3839 17.7803 12.5303L11.0303 19.2803C10.7374 19.5732 10.2626 19.5732 9.96967 19.2803C9.67678 18.9874 9.67678 18.5126 9.96967 18.2197L15.4393 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H15.4393L9.96967 5.78033C9.67678 5.48744 9.67678 5.01256 9.96967 4.71967Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/localization/index.ts

@@ -90,6 +90,9 @@ export const messages = {
         cli: "or Copy CLI Command",
         cancel: "Cancel",
       },
+      buttons: {
+        back: "Back",
+      },
       tabs: {
         Info: "Info",
         Voters: "Voters",