feat: add top authors section

5 files changed, 86 insertions, 2 deletions

diff --git a/src/components/TopAuthor.vue b/src/components/TopAuthor.vue
new file mode 100644
index 0000000..e8a0241
--- /dev/null
+++ b/src/components/TopAuthor.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  .top-author
+    .user
+      img(:src="'https://gravatar.com/avatar/'+avatar" :alt="data.author_email")
+      strong(:title="data.author_email")
+        | {{ data.author_name }} <{{ data.author_email }}>
+    .number
+      h2 {{ data.num }}
+</template>
+
+<script>
+export default {
+  name: "TopAuthor",
+  props: ['data', 'avatar'],
+}
+</script>
diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
index 64a315c..d59afa0 100644
--- a/src/sass/_commit.sass
+++ b/src/sass/_commit.sass
@@ -86,3 +86,21 @@
     border-radius: 2px
     @include breakpoint(phablet)
       max-width: 180px
+
+.top-author
+  display: grid
+  grid-template-columns: 80% 20%
+  .user
+    display: flex
+    img
+      width: 30px
+      height: 30px
+      margin-right: 5px
+    strong
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+
+  .number
+    justify-self: end
+    color: $secondary
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 09acd39..deab05d 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -5,3 +5,9 @@ body
   color: #2c3e50
   font-family: $font-family
   background-color: #fbfcfc 
+
+#home
+  @include breakpoint(phablet)
+    flex-direction: column-reverse
+    > div
+      margin-bottom: 42px
diff --git a/src/store.js b/src/store.js
index 2fd04eb..79bdaff 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,16 +7,24 @@ export default new Vuex.Store({
   state: {
     api: process.env.VUE_APP_BACKEND_URL,
     loading: false,
+    loading_top_authors: false,
     commits: [],
+    top_authors: [],
     emails: {},
   },
   getters: {
     loading: state => {
       return state.loading
     },
+    loading_top_authors: state => {
+      return state.loading_top_authors
+    },
     commits: state => {
       return state.commits
     },
+    top_authors: state => {
+      return state.top_authors
+    },
     emails: state => {
       return state.emails
     },
@@ -25,9 +33,15 @@ export default new Vuex.Store({
     loading_state: (state, value) => {
       state.loading = value
     },
+    loading_top_authors_state: (state, value) => {
+      state.loading_top_authors = value
+    },
     load_commits: (state, value) => {
       state.commits = value
     },
+    load_top_authors: (state, value) => {
+      state.top_authors = value
+    },
     load_emails: (state, value) => {
       state.emails = value
     },
@@ -56,6 +70,15 @@ export default new Vuex.Store({
           commit('load_emails', emails_obj);
         })
     },
+    /// Get the ranking of commits authors
+    async get_top_authors({commit}) {
+      commit('loading_top_authors_state', true)
+      await fetch(`${this.state.api}/commit/top/`)
+        .then(async response => {
+          commit('load_top_authors', await response.json());
+        })
+      commit('loading_top_authors_state', false)
+    }
   },
   modules: {
   }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3ca1445..49e42b3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,7 +2,7 @@
   main
     header-blue
     b-container
-      b-row
+      b-row#home
         b-col(md="8" sm="12")
           h2 List of commits
           section#commits
@@ -14,22 +14,37 @@
               :author="emails[i.author_email]"
               :committer="emails[i.committer_email]"
             )
-        b-col
+        b-col(md="4" sm="12")
+          h2 Top authors
+          b-list-group
+            b-list-group-item(v-if="loading_top_authors")
+              b-overlay(:show="true" spinner-large)
+            b-list-group-item(
+              v-else v-for="author in top_authors.slice(0, 7)" :key="author.email"
+              button
+            )
+              author(
+                :data="author"
+                :avatar="emails[author.author_email]"
+              )
 </template>
 
 <script>
 import HeaderBlue from '@/components/HeaderBlue';
 import Commit from '@/components/Commit';
+import TopAuthor from '@/components/TopAuthor';
 
 export default {
   name: "Home",
   components: {
     'header-blue': HeaderBlue,
     'commit-card': Commit,
+    'author': TopAuthor,
   },
   mounted() {
     this.$store.dispatch('get_commits');
     this.$store.dispatch('get_emails');
+    this.$store.dispatch('get_top_authors');
   },
   computed: {
     commits: function() {
@@ -38,8 +53,14 @@ export default {
     emails: function() {
       return this.$store.getters.emails;
     },
+    top_authors: function() {
+      return this.$store.getters.top_authors;
+    },
     loading: function() {
       return this.$store.getters.loading;
+    },
+    loading_top_authors: function() {
+      return this.$store.getters.loading_top_authors;
     }
   }
 }