feat: commit details page

5 files changed, 90 insertions, 2 deletions

diff --git a/src/components/Commit.vue b/src/components/Commit.vue
index 63e1764..a60f40e 100644
--- a/src/components/Commit.vue
+++ b/src/components/Commit.vue
@@ -32,10 +32,13 @@
             | <{{data.committer_email}}></b>
 
     .text
-      p
+      p(v-if="!expand")
         | {{ first_line(data.text) }}
         span.middot ·
         span.date {{ data.date | moment("ddd, D MMM YYYY HH:mm:ss ZZ") }}
+      p(v-else)
+        pre {{ data.text }}
+        span.date {{ data.date | moment("ddd, D MMM YYYY HH:mm:ss ZZ") }}
 </template>
 
 <script>
@@ -43,7 +46,7 @@ export default {
   name: 'Commit',
   // `author` is the hash md5 of the author's gravatar
   // `committer` is the hash md5 of the committer's gravatar
-  props: ['data', 'author', 'committer'],
+  props: ['data', 'author', 'committer', 'expand'],
   methods: {
     first_line(text) {
       return text.split('\n')[0]
diff --git a/src/router.js b/src/router.js
index 5dc4e51..9363d15 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from '@/views/Home.vue'
+import Commit from '@/views/Commit.vue'
 
 Vue.use(VueRouter)
 
@@ -10,6 +11,12 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home,
+  },
+  {
+    path: '/commit/:hash',
+    name: 'Commit',
+    component: Commit,
+    props: true
   }
 ]
 
diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
index d59afa0..514d82b 100644
--- a/src/sass/_commit.sass
+++ b/src/sass/_commit.sass
@@ -72,6 +72,8 @@
         color: $secondary
         white-space: pre
         display: inline-block
+      pre
+        margin-top: 20px
 
   .repo a
     color: #fff
diff --git a/src/store.js b/src/store.js
index a56a468..98a4417 100644
--- a/src/store.js
+++ b/src/store.js
@@ -11,6 +11,7 @@ export default new Vuex.Store({
     commits: [],
     top_authors: [],
     emails: {},
+    commit_data: {},
     author_avatar: "",
     committer_avatar: "",
   },
@@ -30,6 +31,9 @@ export default new Vuex.Store({
     emails: state => {
       return state.emails
     },
+    commit: state => {
+      return state.commit_data
+    },
     author_avatar: state => {
       return state.author_avatar
     },
@@ -53,6 +57,9 @@ export default new Vuex.Store({
     load_emails: (state, value) => {
       state.emails = value
     },
+    load_commit: (state, value) => {
+      state.commit_data = value
+    },
     load_author_avatar: (state, value) => {
       state.author_avatar = value.hash_md5
     },
@@ -92,6 +99,14 @@ export default new Vuex.Store({
           commit('load_top_authors', await response.json());
         })
       commit('loading_top_authors_state', false)
+    },
+    // Get commit by hash
+    async get_commit({commit}, hash) {
+      await fetch(`${this.state.api}/commit/${hash}/`)
+        .then(async response => {
+          commit('load_commit', await response.json());
+        })
+    },
     // Get email
     async get_email({commit}, data) {
       await fetch(`${this.state.api}/email/search/?q=${data.email}`)
@@ -101,6 +116,13 @@ export default new Vuex.Store({
           }
         })
     },
+    // Set committer avatar
+    async set_committer({commit}, avatar) {
+      commit('load_committer_avatar', avatar);
+    },
+    // Set loading state
+    async set_loading({commit}, status) {
+      commit('loading_state', status);
     }
   },
   modules: {
diff --git a/src/views/Commit.vue b/src/views/Commit.vue
new file mode 100644
index 0000000..d8b0050
--- /dev/null
+++ b/src/views/Commit.vue
@@ -0,0 +1,54 @@
+<template lang="pug">
+  main
+    header-blue
+    b-container(v-if="loading")
+      b-overlay(:show="true" spinner-large)
+    b-container(v-else)
+      commit-card(
+        :data="commit"
+        :author="author_avatar"
+        :committer="committer_avatar"
+        :expand="true"
+      )
+</template>
+
+<script>
+import HeaderBlue from '@/components/HeaderBlue';
+import Commit from '@/components/Commit';
+
+export default {
+  name: "Commit",
+  props: ["hash"],
+  components: {
+    'header-blue': HeaderBlue,
+    'commit-card': Commit,
+  },
+  async mounted() {
+    this.$store.dispatch('set_loading', true);
+    await this.$store.dispatch('get_commit', this.hash);
+    await this.$store.dispatch('get_email',
+                        {type: 'author', email: this.commit.author_email});
+    if(this.commit.author_email != this.commit.committer_email) {
+      await this.$store.dispatch('get_email',
+                        {type: 'committer', email: this.commit.committer_email});
+    } else {
+      await this.$store.dispatch('set_committer', this.author_avatar)
+    }
+    this.$store.dispatch('set_loading', false);
+  },
+  computed: {
+    loading: function() {
+      return this.$store.getters.loading;
+    },
+    commit: function() {
+      return this.$store.getters.commit;
+    },
+    author_avatar: function() {
+      return this.$store.getters.author_avatar;
+    },
+    committer_avatar: function() {
+      return this.$store.getters.committer_avatar;
+    },
+  },
+}
+</script>