Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7d03df6

Browse files
Merge pull request #16 from coderplex/authentication
Show loader during an action
2 parents 3507a93 + 44b4b5b commit 7d03df6

File tree

8 files changed

+55
-12
lines changed

8 files changed

+55
-12
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"vue": "^2.6.10",
1717
"vue-codemirror": "^4.0.6",
1818
"vue-fragment": "^1.5.1",
19+
"vue-loading-overlay": "^3.2.0",
1920
"vue-router": "^3.0.3",
2021
"vuetify": "^2.0.0",
2122
"vuex": "^3.0.1",

‎src/App.vue‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
<template>
2-
<Layout>
3-
<v-container>
4-
<router-view></router-view>
5-
</v-container>
6-
</Layout>
2+
<fragment>
3+
<loading
4+
:active.sync="isLoading"
5+
color="indigo"
6+
loader="dots"
7+
is-full-page
8+
></loading>
9+
<Layout>
10+
<v-container>
11+
<router-view></router-view>
12+
</v-container>
13+
</Layout>
14+
</fragment>
715
</template>
816

917
<script>
18+
import Loading from 'vue-loading-overlay';
19+
import 'vue-loading-overlay/dist/vue-loading.css';
20+
import { mapGetters } from 'vuex';
21+
1022
import Layout from './components/layout';
1123
1224
export default {
1325
name: 'App',
1426
components: {
1527
Layout,
28+
Loading,
1629
},
1730
data: () => ({
1831
//
1932
}),
33+
computed: {
34+
...mapGetters([
35+
'isLoading',
36+
]),
37+
},
2038
};
2139
</script>

‎src/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import 'roboto-fontface/css/roboto/roboto-fontface.css';
2+
import '@mdi/font/css/materialdesignicons.css';
13
import { sync } from 'vuex-router-sync';
24
import { Plugin } from 'vue-fragment';
35
import Vue from 'vue';
46
import App from './App';
57
import router from './router';
68
import store from './store';
79
import vuetify from './plugins/vuetify';
8-
import 'roboto-fontface/css/roboto/roboto-fontface.css';
9-
import '@mdi/font/css/materialdesignicons.css';
1010

1111
Vue.config.productionTip = false;
1212
sync(store, router);

‎src/store/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Vue from 'vue';
44
import Vuex from 'vuex';
55

66
import authentication from './modules/authentication';
7+
import { Loading } from './plugins';
78

89
Vue.use(Vuex);
910

@@ -12,24 +13,31 @@ const debug = process.env.NODE_ENV !== 'production';
1213
const plugins = debug ? [
1314
createLogger(),
1415
// createPersistedState(),
16+
Loading,
1517
] : [
1618
createPersistedState(),
19+
Loading,
1720
];
1821

1922
export default new Vuex.Store({
2023
state: {
2124
baseUrl: '/api',
25+
loading: false,
2226
},
2327
mutations: {
24-
28+
setLoading(state, loading) {
29+
state.loading = loading;
30+
},
2531
},
2632
actions: {
27-
2833
},
2934
modules: {
3035
authentication,
3136
},
3237
getters: {
38+
isLoading(state) {
39+
return state.loading;
40+
},
3341
getErrorMessage: () => (response) => {
3442
console.log('HERE', response);
3543
const { status, data: { data: { errors } = {}, message } } = response;

‎src/store/plugins/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Loading } from './loading';

‎src/store/plugins/loading.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default (store) => {
2+
store.subscribeAction({
3+
before: (action) => {
4+
console.log(`before action ${action.type}`);
5+
store.commit('setLoading', true, { root: true });
6+
},
7+
after: (action) => {
8+
console.log(`after action ${action.type}`);
9+
store.commit('setLoading', false, { root: true });
10+
},
11+
});
12+
};

‎vue.config.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@ module.exports = {
22
devServer: {
33
proxy: {
44
'/api': {
5-
target: 'https://localhost:8000',
6-
ws: true,
7-
changeOrigin: true,
5+
target: 'http://localhost:8000',
86
headers: {
97
Connection: 'keep-alive',
108
},

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /