diff options
| -rw-r--r-- | src/components/HeaderBlue.vue | 5 | ||||
| -rw-r--r-- | src/router.js | 8 | ||||
| -rw-r--r-- | src/sass/_header.sass | 11 | ||||
| -rw-r--r-- | src/store.js | 8 | ||||
| -rw-r--r-- | src/views/Commit.vue | 2 | ||||
| -rw-r--r-- | src/views/Search.vue | 46 |
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> |