Merge pull request #10 from gico-net/feat/search-commit

Search commit page

6 files changed, 76 insertions, 4 deletions

diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
index fd6d731..9c8c2e0 100644
--- a/src/components/HeaderBlue.vue
+++ b/src/components/HeaderBlue.vue
@@ -3,6 +3,11 @@
     b-container
       h1
         a(href="/" rel="home") Gico
+      b-form(action="/search")
+        b-form-group
+          b-input(placeholder="Search a commit" name="q")
+        b-form-group
+          b-button(variant="primary" type="submit") Go
 </template>
 
 <script>
diff --git a/src/router.js b/src/router.js
index 9363d15..9be8616 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 
 import Home from '@/views/Home.vue'
 import Commit from '@/views/Commit.vue'
+import Search from '@/views/Search.vue'
 
 Vue.use(VueRouter)
 
@@ -17,7 +18,12 @@ const routes = [
     name: 'Commit',
     component: Commit,
     props: true
-  }
+  },
+  {
+    path: '/search',
+    name: 'Search',
+    component: Search,
+  },
 ]
 
 const router = new VueRouter({
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index e64a031..36114af 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,6 +6,12 @@ header
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
   margin-bottom: 30px
+  .container
+    display: grid
+    grid-template-columns: 70% 30%
+    @include breakpoint(phablet)
+      grid-template-columns: 100%
+      justify-items: center
   h1
     font-size: 3em
     margin: 0
@@ -13,3 +19,8 @@ header
       color: $color-w !important
     @include breakpoint(phablet)
       text-align: center
+
+  form
+    display: flex
+    @include breakpoint(phablet)
+      margin-top: 50px
diff --git a/src/store.js b/src/store.js
index 98a4417..1afad67 100644
--- a/src/store.js
+++ b/src/store.js
@@ -69,9 +69,13 @@ export default new Vuex.Store({
   },
   actions: {
     // Get all commits from the api backend
-    async get_commits({commit}) {
+    async get_commits({commit}, query) {
       commit('loading_state', true)
-      await fetch(`${this.state.api}/commit/`)
+      let path = `${this.state.api}/commit/`
+      if(query) {
+        path += `?q=${query}`
+      }
+      await fetch(path)
         .then(async response => {
           commit('load_commits', await response.json());
         })
diff --git a/src/views/Commit.vue b/src/views/Commit.vue
index 234fc88..5fbeb13 100644
--- a/src/views/Commit.vue
+++ b/src/views/Commit.vue
@@ -4,7 +4,7 @@
     b-container(v-if="loading")
       b-overlay(:show="true" spinner-large)
     b-container(v-else)
-      .commi(v-if="error404")
+      .commit(v-if="error404")
         h2 Commit not found
       commit-card(
         :data="commit"
diff --git a/src/views/Search.vue b/src/views/Search.vue
new file mode 100644
index 0000000..c173567
--- /dev/null
+++ b/src/views/Search.vue
@@ -0,0 +1,46 @@
+<template lang="pug">
+  main
+    header-blue
+    b-container(v-if="loading")
+      b-overlay(:show="true" spinner-large)
+    b-container(v-else)
+      .commit
+        h2 Commits found {{ commits.length }}
+      .commit(style="padding: 50px" v-if="loading")
+        b-overlay(:show="true" spinner-large)
+      commit-card(
+        v-else
+        v-for="i in commits" :key="i.hash" :data="i"
+        :author="emails[i.author_email]"
+        :committer="emails[i.committer_email]"
+      )
+</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,
+  },
+  mounted() {
+    this.$store.dispatch('get_commits', this.$route.query.q);
+    this.$store.dispatch('get_emails');
+  },
+  computed: {
+    loading: function() {
+      return this.$store.getters.loading;
+    },
+    commits: function() {
+      return this.$store.getters.commits;
+    },
+    emails: function() {
+      return this.$store.getters.emails;
+    },
+  },
+}
+</script>