From b495987dc9ce286b333657bcf8068586a5db1673 Mon Sep 17 00:00:00 2001 From: Bhanu Teja P Date: Fri, 13 Sep 2019 00:04:10 +0530 Subject: [PATCH 1/2] Add vue-loading-overlay --- package-lock.json | 5 +++++ package.json | 1 + src/App.vue | 29 ++++++++++++++++++++++++----- src/main.js | 4 ++-- src/store/index.js | 9 +++++++-- 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 26018e8..6144fb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12174,6 +12174,11 @@ "vue-style-loader": "^4.1.0" } }, + "vue-loading-overlay": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.2.0.tgz", + "integrity": "sha512-QBHa+vwcQ3k3oKp4pucP7RHWHSQvgVWFlDFqSaXLu+kCuEv1PZCoerAo1T04enF5y9yMFCqh7L9ChrWHy7HYvA==" + }, "vue-router": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz", diff --git a/package.json b/package.json index 562cb2a..1f1c92f 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "vue": "^2.6.10", "vue-codemirror": "^4.0.6", "vue-fragment": "^1.5.1", + "vue-loading-overlay": "^3.2.0", "vue-router": "^3.0.3", "vuetify": "^2.0.0", "vuex": "^3.0.1", diff --git a/src/App.vue b/src/App.vue index 498f127..2758882 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,21 +1,40 @@ diff --git a/src/main.js b/src/main.js index b854d17..80c9449 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,5 @@ +import 'roboto-fontface/css/roboto/roboto-fontface.css'; +import '@mdi/font/css/materialdesignicons.css'; import { sync } from 'vuex-router-sync'; import { Plugin } from 'vue-fragment'; import Vue from 'vue'; @@ -5,8 +7,6 @@ import App from './App'; import router from './router'; import store from './store'; import vuetify from './plugins/vuetify'; -import 'roboto-fontface/css/roboto/roboto-fontface.css'; -import '@mdi/font/css/materialdesignicons.css'; Vue.config.productionTip = false; sync(store, router); diff --git a/src/store/index.js b/src/store/index.js index b16cf85..efc2f22 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,17 +19,22 @@ const plugins = debug ? [ export default new Vuex.Store({ state: { baseUrl: '/api', + loading: false, }, mutations: { - + setLoading(state, loading) { + state.loading = loading; + }, }, actions: { - }, modules: { authentication, }, getters: { + isLoading(state) { + return state.loading; + }, getErrorMessage: () => (response) => { console.log('HERE', response); const { status, data: { data: { errors } = {}, message } } = response; From af28c4e37f24b6fc0ac544022ccab1770b0832b4 Mon Sep 17 00:00:00 2001 From: Bhanu Teja P Date: Fri, 13 Sep 2019 00:22:12 +0530 Subject: [PATCH 2/2] Show loading dots whenever an action is performed --- src/App.vue | 1 - src/store/index.js | 3 +++ src/store/plugins/index.js | 1 + src/store/plugins/loading.js | 12 ++++++++++++ vue.config.js | 4 +--- 5 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/store/plugins/index.js create mode 100644 src/store/plugins/loading.js diff --git a/src/App.vue b/src/App.vue index 2758882..772f663 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,6 @@ :active.sync="isLoading" color="indigo" loader="dots" - opacity=0.4 is-full-page > diff --git a/src/store/index.js b/src/store/index.js index efc2f22..849f684 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import authentication from './modules/authentication'; +import { Loading } from './plugins'; Vue.use(Vuex); @@ -12,8 +13,10 @@ const debug = process.env.NODE_ENV !== 'production'; const plugins = debug ? [ createLogger(), // createPersistedState(), + Loading, ] : [ createPersistedState(), + Loading, ]; export default new Vuex.Store({ diff --git a/src/store/plugins/index.js b/src/store/plugins/index.js new file mode 100644 index 0000000..136343b --- /dev/null +++ b/src/store/plugins/index.js @@ -0,0 +1 @@ +export { default as Loading } from './loading'; diff --git a/src/store/plugins/loading.js b/src/store/plugins/loading.js new file mode 100644 index 0000000..32f4be2 --- /dev/null +++ b/src/store/plugins/loading.js @@ -0,0 +1,12 @@ +export default (store) => { + store.subscribeAction({ + before: (action) => { + console.log(`before action ${action.type}`); + store.commit('setLoading', true, { root: true }); + }, + after: (action) => { + console.log(`after action ${action.type}`); + store.commit('setLoading', false, { root: true }); + }, + }); +}; diff --git a/vue.config.js b/vue.config.js index 1739624..4091ee3 100644 --- a/vue.config.js +++ b/vue.config.js @@ -2,9 +2,7 @@ module.exports = { devServer: { proxy: { '/api': { - target: 'https://localhost:8000', - ws: true, - changeOrigin: true, + target: 'http://localhost:8000', headers: { Connection: 'keep-alive', },