diff options
| -rw-r--r-- | src/components/TopAuthor.vue | 16 | ||||
| -rw-r--r-- | src/sass/_commit.sass | 18 | ||||
| -rw-r--r-- | src/sass/main.sass | 6 | ||||
| -rw-r--r-- | src/store.js | 23 | ||||
| -rw-r--r-- | src/views/Home.vue | 25 |
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; } } } |