diff options
| -rw-r--r-- | src/components/HeaderBlue.vue | 19 | ||||
| -rw-r--r-- | src/components/design/HeaderBlue.vue | 12 | ||||
| -rw-r--r-- | src/sass/_header.sass | 14 | ||||
| -rw-r--r-- | src/store.js | 14 | ||||
| -rw-r--r-- | src/views/Home.vue | 6 |
5 files changed, 48 insertions, 17 deletions
diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue new file mode 100644 index 0000000..d4ffa9f --- /dev/null +++ b/src/components/HeaderBlue.vue @@ -0,0 +1,19 @@ +<template lang="pug"> + header(:class="{active: loading}") + #big-loading(v-if="loading") + b-overlay(:show="true" spinner-large) + b-container + h1 + a(href="/" rel="home") Gico +</template> + +<script> +export default { + name: "HeaderBlue", + computed: { + loading: function() { + return this.$store.getters.loading; + }, + } +} +</script> diff --git a/src/components/design/HeaderBlue.vue b/src/components/design/HeaderBlue.vue deleted file mode 100644 index fd6d731..0000000 --- a/src/components/design/HeaderBlue.vue +++ /dev/null @@ -1,12 +0,0 @@ -<template lang="pug"> - header - b-container - h1 - a(href="/" rel="home") Gico -</template> - -<script> -export default { - name: "HeaderBlue", -} -</script> diff --git a/src/sass/_header.sass b/src/sass/_header.sass index e64a031..21f11bb 100644 --- a/src/sass/_header.sass +++ b/src/sass/_header.sass @@ -6,6 +6,20 @@ header padding: 10px 0 box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px margin-bottom: 30px + &.active + z-index: 1044 + #big-loading + top: 0 + width: 100% + height: 100% + position: fixed + z-index: 1045 + .b-overlay-wrap + height: 100% + background-color: rgba(0, 0, 0, .8) + .spinner-border + border-color: $primary + border-right-color: transparent h1 font-size: 3em margin: 0 diff --git a/src/store.js b/src/store.js index 888add2..dab3529 100644 --- a/src/store.js +++ b/src/store.js @@ -6,10 +6,14 @@ Vue.use(Vuex) export default new Vuex.Store({ state: { api: process.env.VUE_APP_BACKEND_URL, + loading: false, commits: [], emails: {}, }, - get: { + getters: { + loading: state => { + return state.loading + }, commits: state => { return state.commits }, @@ -18,24 +22,29 @@ export default new Vuex.Store({ }, }, mutations: { + loading_state: (state, value) => { + state.loading = value + }, load_commits: (state, value) => { state.commits = value }, load_emails: (state, value) => { - console.log(JSON.stringify(value)) state.emails = value }, }, actions: { // Get all commits from the api backend async get_commits({commit}) { + commit('loading_state', true) await fetch(`${this.state.api}/commit/`) .then(async response => { commit('load_commits', await response.json()); }) + commit('loading_state', false) }, // Get all emails and map them like an hash async get_emails({commit}) { + commit('loading_state', true) await fetch(`${this.state.api}/email/`) .then(async response => { const emails_list = await response.json(); @@ -47,6 +56,7 @@ export default new Vuex.Store({ commit('load_emails', emails_obj); }) + commit('loading_state', false) }, }, modules: { diff --git a/src/views/Home.vue b/src/views/Home.vue index e507ef8..b5fbda0 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -6,7 +6,7 @@ </template> <script> -import HeaderBlue from '@/components/design/HeaderBlue'; +import HeaderBlue from '@/components/HeaderBlue'; export default { name: "Home", @@ -19,10 +19,10 @@ export default { }, computed: { commits: () => { - return this.$store.get.commits; + return this.$store.getters.commits; }, emails: () => { - return this.$store.get.emails; + return this.$store.getters.emails; }, } } |