summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2021-03-23 21:33:13 +0100
committerGitHub <noreply@github.com>2021-03-23 21:33:13 +0100
commit67baef47414e15de9fd11c83275b8f30e8e21250 (patch)
tree2a68867468ca56db3e08a3eda4bc63a5e933203f
parent8a04db5cdb1fad22ddc0764cb60b2e5a9822a417 (diff)
parent9bbff6134c7068567a7a38b2de13472bff4c73e9 (diff)
Merge pull request #10 from gico-net/feat/search-commit
Search commit page
-rw-r--r--src/components/HeaderBlue.vue5
-rw-r--r--src/router.js8
-rw-r--r--src/sass/_header.sass11
-rw-r--r--src/store.js8
-rw-r--r--src/views/Commit.vue2
-rw-r--r--src/views/Search.vue46
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>