Show more button for votes

yam-finance · Jul 20, 2020 · 20fa2c5 · 20fa2c5
1 parent 031dec4
commit 20fa2c5
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 58 deletions.
diff --git a/src/components/Block/Votes.vue b/src/components/Block/Votes.vue
@@ -0,0 +1,80 @@
+<template>
+  <Block
+    v-if="Object.keys(votes).length > 0"
+    title="Votes"
+    :counter="Object.keys(votes).length"
+    :slim="true"
+  >
+    <div
+      v-for="(vote, address, i) in visibleVotes"
+      :key="i"
+      :style="i === 0 && 'border: 0 !important;'"
+      class="px-4 py-3 border-top d-flex"
+    >
+      <User :address="address" :verified="token.verified" class="column" />
+      <div class="flex-auto text-center">
+        <span
+          v-text="proposal.msg.payload.choices[vote.msg.payload.choice - 1]"
+          class="text-white ml-2 column"
+        />
+      </div>
+      <div class="column text-right">
+        <span
+          v-text="
+            `${_numeral(vote.balance)} ${token.symbol || _shorten(token.token)}`
+          "
+          class="text-white"
+        />
+        <a
+          @click="openReceiptModal(vote)"
+          target="_blank"
+          class="ml-3"
+          title="Receipt"
+        >
+          <Icon name="signature" />
+        </a>
+      </div>
+    </div>
+    <a
+      v-if="!showAllVotes && Object.keys(votes).length > 10"
+      @click="showAllVotes = true"
+      class="px-4 py-3 border-top text-center d-block text-white bg-gray-dark"
+    >
+      See more
+    </a>
+    <ModalReceipt
+      :open="modalReceiptOpen"
+      @close="modalReceiptOpen = false"
+      :authorIpfsHash="authorIpfsHash"
+      :relayerIpfsHash="relayerIpfsHash"
+    />
+  </Block>
+</template>
+
+<script>
+export default {
+  props: ['token', 'proposal', 'votes'],
+  data() {
+    return {
+      showAllVotes: false,
+      authorIpfsHash: '',
+      relayerIpfsHash: '',
+      modalReceiptOpen: false
+    };
+  },
+  computed: {
+    visibleVotes() {
+      return Object.fromEntries(
+        Object.entries(this.votes).slice(0, this.showAllVotes ? -1 : 10)
+      );
+    }
+  },
+  methods: {
+    openReceiptModal(vote) {
+      this.authorIpfsHash = vote.authorIpfsHash;
+      this.relayerIpfsHash = vote.relayerIpfsHash;
+      this.modalReceiptOpen = true;
+    }
+  }
+};
+</script>
diff --git a/src/views/Proposal.vue b/src/views/Proposal.vue
@@ -47,50 +47,7 @@
               Vote
             </UiButton>
           </Block>
-          <Block
-            v-if="Object.keys(votes).length > 0"
-            title="Votes"
-            :counter="Object.keys(votes).length"
-            :slim="true"
-          >
-            <div
-              v-for="(vote, address, i) in votes"
-              :key="i"
-              :style="i === 0 && 'border: 0 !important;'"
-              class="px-4 py-3 border-top d-flex"
-            >
-              <User
-                :address="address"
-                :verified="token.verified"
-                class="column"
-              />
-              <div class="flex-auto text-center">
-                <span
-                  v-text="
-                    proposal.msg.payload.choices[vote.msg.payload.choice - 1]
-                  "
-                  class="text-white ml-2 column"
-                />
-              </div>
-              <div class="column text-right">
-                <span
-                  v-text="
-                    `${_numeral(vote.balance)} ${token.symbol ||
-                      _shorten(token.token)}`
-                  "
-                  class="text-white"
-                />
-                <a
-                  @click="openReceiptModal(vote)"
-                  target="_blank"
-                  class="ml-3"
-                  title="Receipt"
-                >
-                  <Icon name="signature" />
-                </a>
-              </div>
-            </div>
-          </Block>
+          <BlockVotes :token="token" :proposal="proposal" :votes="votes" />
         </div>
         <div class="col-12 col-lg-4 float-left">
           <Block title="Informations">
@@ -197,12 +154,6 @@
         :id="id"
         :selectedChoice="selectedChoice"
       />
-      <ModalReceipt
-        :open="modalReceiptOpen"
-        @close="modalReceiptOpen = false"
-        :authorIpfsHash="authorIpfsHash"
-        :relayerIpfsHash="relayerIpfsHash"
-      />
     </template>
     <div v-else class="text-center">
       <UiLoading class="big" />
@@ -228,9 +179,6 @@ export default {
       votes: {},
       results: [],
       modalOpen: false,
-      modalReceiptOpen: false,
-      authorIpfsHash: '',
-      relayerIpfsHash: '',
       selectedChoice: 0
     };
   },
@@ -252,11 +200,6 @@ export default {
       this.votes = proposalObj.votes;
       this.results = proposalObj.results;
     },
-    openReceiptModal(vote) {
-      this.authorIpfsHash = vote.authorIpfsHash;
-      this.relayerIpfsHash = vote.relayerIpfsHash;
-      this.modalReceiptOpen = true;
-    },
     async downloadReport() {
       const obj = Object.entries(this.votes)
         .map(vote => {