summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2021-03-20 18:01:09 +0100
committerSanto Cariotti <santo@dcariotti.me>2021-03-20 18:01:09 +0100
commit45e5a794ae423e81afa7fdde329f34e3d4a0bcd3 (patch)
tree1afd7082ca2570a54bd3ba0687542ba94996bbb4 /src
parenta9ece91610c7f33cbc6445b58cfd1a9b43a89a49 (diff)
feat: add top authors section
Diffstat (limited to 'src')
-rw-r--r--src/components/TopAuthor.vue16
-rw-r--r--src/sass/_commit.sass18
-rw-r--r--src/sass/main.sass6
-rw-r--r--src/store.js23
-rw-r--r--src/views/Home.vue25
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;
}
}
}