diff --git a/quasar.conf.js b/quasar.conf.js index e6f0708..f503dd4 100644 --- a/quasar.conf.js +++ b/quasar.conf.js @@ -103,7 +103,7 @@ module.exports = configure(function(ctx) { // directives: [], // Quasar plugins - plugins: ['LocalStorage'] + plugins: ['LocalStorage', 'Loading'] }, // animations: 'all', // --- includes all animations diff --git a/src/components/loading/CircularProgress.vue b/src/components/loading/CircularProgress.vue new file mode 100644 index 0000000..b59b9d9 --- /dev/null +++ b/src/components/loading/CircularProgress.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/plugins/user/pages/Settings.vue b/src/plugins/user/pages/Settings.vue index 0146030..e0f0bf9 100644 --- a/src/plugins/user/pages/Settings.vue +++ b/src/plugins/user/pages/Settings.vue @@ -7,6 +7,8 @@
+ +
tada:: {{ sessionsLoading }}
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api'; -import { mainLink } from '../plugin'; -import { platform } from 'os'; +import CircularProgress from 'components/loading/CircularProgress.vue'; export default defineComponent({ // name: 'PageName' + components: { CircularProgress }, setup(_, { root }) { onBeforeMount(() => { root.$store.dispatch('sessions/getSessions'); @@ -101,13 +103,19 @@ export default defineComponent({ function isThisSession(token: string) { return root.$store.getters['user/token'].token == token; } + + const sessionsLoading = computed(() => { + return root.$store.getters['sessions/loading']; + }); + return { showRootGetters, sessions, getBrowserIcon, getPlatformIcon, isThisSession, - deleteSession + deleteSession, + sessionsLoading }; } }); diff --git a/src/plugins/user/store/session.ts b/src/plugins/user/store/session.ts index 8cd8e05..da47218 100644 --- a/src/plugins/user/store/session.ts +++ b/src/plugins/user/store/session.ts @@ -26,7 +26,7 @@ const mutations: MutationTree = { setSessions(state, sessions: Session[]) { state.sessions = sessions; }, - setLoading(state, value) { + setLoading(state, value: boolean) { state.loading = value; } }; @@ -71,6 +71,9 @@ const actions: ActionTree = { const getters: GetterTree = { sessions(state) { return state.sessions; + }, + loading(state) { + return state.loading; } }; diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts index a721d6b..1f6cdc2 100644 --- a/src/plugins/user/store/user.ts +++ b/src/plugins/user/store/user.ts @@ -3,7 +3,7 @@ import { StateInterface } from 'src/store'; import { axios } from 'boot/axios'; import { LoginData } from 'src/plugins/user/models'; import { AxiosResponse } from 'axios'; -import { LocalStorage } from 'quasar'; +import { LocalStorage, Loading } from 'quasar'; import { Router } from 'src/router'; export interface Token { @@ -72,6 +72,7 @@ const actions: ActionTree = { login({ commit }, data: LoginData) { console.log('bla'); commit('setLoginLoading', true); + Loading.show({ message: 'Du wirst eingeloggt' }); void axios .post('http://localhost:5000/auth', data) .then((response: AxiosResponse) => { @@ -93,6 +94,7 @@ const actions: ActionTree = { }) .finally(() => { commit('setLoginLoading', false); + Loading.hide(); }); } };