add Leaderboard popup component, update Ballot

Author: jeffreywhitaker

src/components/Leaderboard.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="#fdc743" dark v-bind="attrs" v-on="on">
+          See Full Leaderboard
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="headline grey lighten-2">
+          Our Vote Leaders
+        </v-card-title>
+
+        <v-card-text>
+          <v-data-table :headers="headers" :items="pageData.items"
+          :items-per-page="5" class="elevation-1" width: />
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="cancel" text @click="dialog = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { voting } from "@/api";
+export default {
+  name: "Leaderboard",
+  data() {
+    return {
+      dialog: false,
+      headers: [
+        { text: "Rank", sortable: true, value: "rank" },
+        { text: "First Name", sortable: false, value: "firstName" },
+        { text: "Last Name", sortable: false, value: "lastName" },
+        { text: "Votes", sortable: true, value: "numVotes" }
+      ],
+      entries: [],
+      pageData: {
+        hasNext: false,
+        hasPrev: false,
+        nextNum: false,
+        page: 1,
+        items: [],
+        prevNum: null,
+        totalItems: 0,
+        totalPages: 0
+      }
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      const results = await voting.getBallot(1, 1000);
+      await this.setResult(results);
+    },
+    async setResult(result) {
+      await new Promise(resolve => {
+        setTimeout(async () => {
+          for (const [key, value] of Object.entries(result)) {
+            if (key !== "items") {
+              Vue.set(this.pageData, key, value);
+            }
+          }
+
+          const items = result.items
+            .filter(i => i.disqualified === null)
+            .sort((a, b) => {
+              return a.numVotes < b.numVotes ? 1 : -1;
+            });
+
+          // add rank
+          let counter = 1;
+          for (let i = 0; i < items.length; i++) {
+            items[i] = {
+              ...items[i],
+              rank: counter
+            };
+            counter++;
+          }
+
+          Vue.set(this.pageData, "items", items);
+          resolve();
+        }, 500);
+      });
+    }
+  }
+};
+</script>
+
+<style></style>

src/views/Voting/Ballot.vue

@@ -32,6 +32,7 @@
         <v-row>
           <v-col>
             <BallotLeaders />
+            <Leaderboard />
           </v-col>
         </v-row>
       </v-container>
@@ -68,12 +69,14 @@
 
 <script>
 import BallotLeaders from "./BallotLeaders";
+import Leaderboard from "@/components/Leaderboard";
 import VoteLeaderboardSearch from "@/components/VoteLeaderboardSearch";
 
 export default {
   name: "Ballot",
   components: {
     BallotLeaders,
+    Leaderboard,
     VoteLeaderboardSearch
   },
   methods: {

src/views/Voting/VoteOverLeaderboard.vue

@@ -48,6 +48,7 @@
 </template>
 
 <script>
+// TODO: this component is not being used
 // TODO: this component is largely copy pasted from Ballot - they should be consolidated at some point
 import VoteLeaderboardSearch from "@/components/VoteLeaderboardSearch";