Dynamische LoadingBar hinzugefügt

* mit setLoadingBoar, kann ein WatcherSource mitgeliefert werden, sodass eine LoadingBar erscheint.
* muss jeweils einmal! für alle loadings angewendet werden.

quasar.conf.js

@@ -89,7 +89,12 @@ module.exports = configure(function(ctx) {
       iconSet: 'material-icons', // Quasar icon set
       lang: 'de', // Quasar language pack
       config: {
-        dark: 'auto'
+        dark: 'auto',
+        loadingBar: {
+          position: 'top',
+          color: 'warning',
+          size: '5px'
+        }
       },
 
       // Possible values for "importStrategy":
@@ -105,7 +110,13 @@ module.exports = configure(function(ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['LocalStorage', 'SessionStorage', 'Loading', 'Notify']
+      plugins: [
+        'LocalStorage',
+        'SessionStorage',
+        'Loading',
+        'Notify',
+        'LoadingBar'
+      ]
     },
 
     // animations: 'all', // --- includes all animations

src/components/loading.ts

@@ -0,0 +1,11 @@
+import { watch, WatchSource } from '@vue/composition-api';
+import { LoadingBar } from 'quasar';
+
+function setLoadingBar(loading: WatchSource<boolean>) {
+  return watch<boolean>(loading, loading => {
+    if (loading) LoadingBar.start(10000);
+    if (!loading) LoadingBar.stop();
+  });
+}
+
+export default setLoadingBar;

src/plugins/balance/pages/MainPage.vue

@@ -27,13 +27,24 @@
 import { computed, defineComponent } from '@vue/composition-api';
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import mainRoutes from 'src/plugins/balance/routes';
+import { Store } from 'vuex';
+import { BalanceInterface } from 'src/plugins/balance/store/balance';
+import setLoadingBar from 'components/loading';
+import { StateInterface } from 'src/store';
 export default defineComponent({
   // name: 'PageName'
   components: { EssentialLink },
   setup(_, { root }) {
+    const store = <Store<StateInterface>>root.$store;
+    const loading = computed(() => {
+      return (<BalanceInterface>store.state.balance).loading > 0;
+    });
     const checkMain = computed(() => {
       return root.$route.matched.length == 2;
     });
+
+    setLoadingBar(loading);
+
     return { checkMain, mainRoutes };
   }
 });

src/plugins/balance/store/balance.ts

@@ -11,13 +11,15 @@ interface BalanceResponse {
 
 export interface BalanceInterface extends BalanceResponse {
   limit: number;
+  loading: number;
 }
 
 const state: BalanceInterface = {
   balance: 0,
   credit: 0,
   debit: 0,
-  limit: 0
+  limit: 0,
+  loading: 0
 };
 
 const mutations: MutationTree<BalanceInterface> = {
@@ -32,11 +34,16 @@ const mutations: MutationTree<BalanceInterface> = {
   },
   setLimit(state, data: number) {
     state.limit = data;
+  },
+  setLoading(state, data = true) {
+    if (data) state.loading += 1;
+    else state.loading -= 1;
   }
 };
 
 const actions: ActionTree<BalanceInterface, StateInterface> = {
   getBalance({ commit, rootState }) {
+    commit('setLoading');
     axios
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
       .get(`/users/${rootState.user.currentUser?.userid}/balance`)
@@ -47,9 +54,11 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
       })
       .catch(err => {
         console.warn(err);
-      });
+      })
+      .finally(() => commit('setLoading', false));
   },
-  getLimit({ rootState }) {
+  getLimit({ rootState, commit }) {
+    commit('setLoading');
     axios
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
       .get(`/users/${rootState.user.currentUser?.userid}/balance/limit`)
@@ -58,9 +67,11 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
       })
       .catch(err => {
         console.warn(err);
-      });
+      })
+      .finally(() => commit('setLoading', false));
   },
-  changeBalance({ rootState, dispatch }, amount: number) {
+  changeBalance({ rootState, dispatch, commit }, amount: number) {
+    commit('setLoading');
     axios
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
       .put(`/users/${rootState.user.currentUser?.userid}/balance`, <
@@ -71,7 +82,8 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
       .then(() => {
         dispatch('getBalance').catch(err => console.warn(err));
       })
-      .catch(err => console.warn(err));
+      .catch(err => console.warn(err))
+      .finally(() => commit('setLoading', false));
   }
 };
 

src/plugins/user/components/settings/MainUserSettings.vue

@@ -1,6 +1,5 @@
 <template>
   <q-form @submit="save" @reset="reset">
-    <q-linear-progress indeterminate rounded color="primary" v-if="loading" />
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
         class="col-xs-12 col-sm-6 q-pa-sm"
@@ -194,8 +193,6 @@ export default defineComponent({
       );
     }
 
-    const loading = computed(() => store.state.user.loading > 0);
-
     return {
       props,
       allRoles,
@@ -209,8 +206,7 @@ export default defineComponent({
       notEmpty,
       isUseridUsed,
       save,
-      reset,
-      loading
+      reset
     };
   }
 });

src/plugins/user/components/settings/RoleSettings.vue

@@ -2,12 +2,6 @@
   <div>
     <q-card class="col-12">
       <q-form @submit="save" @reset="reset">
-        <q-linear-progress
-          indeterminate
-          rounded
-          color="primary"
-          v-if="loading"
-        />
         <q-card-section
           class="fit row justify-start content-center items-center"
         >
@@ -86,7 +80,6 @@ export default defineComponent({
       });
     });
 
-    const loading = computed(() => store.state.user.loading > 0);
     const role = ref<FG.Role | null>(null);
     const roles = computed(() => store.state.user.roles);
     const permissions = computed(() =>
@@ -174,7 +167,6 @@ export default defineComponent({
       reset,
       removeRole,
       remove,
-      loading,
       newRoleName
     };
   }

src/plugins/user/pages/Settings.vue

@@ -4,7 +4,6 @@
       padding
       class="fit row justify-center content-center items-center q-gutter-sm"
     >
-      <circular-progress v-if="sessionsLoading" />
       <q-card class="col-12">
         <q-card-section
           class="fit row justify-start content-center items-center"
@@ -35,6 +34,7 @@ import Sessions from '../components/settings/Sessions.vue';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
+import setLoadingBar from 'components/loading';
 
 export default defineComponent({
   // name: 'PageName'
@@ -50,16 +50,19 @@ export default defineComponent({
 
     const currentUser = ref(<FG.User>store.state.user.currentUser);
     const sessions = computed(() => store.state.session.sessions);
-    const sessionsLoading = computed(() => store.state.session.loading);
+    const loading = computed(
+      () => store.state.session.loading || store.state.user.loading > 0
+    );
     function updateUser(value: FG.User) {
       store.dispatch('user/updateUser', value).catch(error => {
         console.warn(error);
       });
     }
 
+    setLoadingBar(loading);
+
     return {
       currentUser,
-      sessionsLoading,
       sessions,
       updateUser
     };

src/plugins/user/store/user.ts

@@ -83,6 +83,7 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
   },
 
   getUsers({ commit }) {
+    commit('setLoading');
     axios
       .get('/users')
       .then((response: AxiosResponse<FG.User[]>) => {
@@ -90,6 +91,9 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       })
       .catch(err => {
         console.warn(err);
+      })
+      .finally(() => {
+        commit('setLoading', false);
       });
   },
 

src/store/index.ts

@@ -10,6 +10,7 @@ import { UserStateInterface } from 'src/plugins/user/store/user';
 export interface StateInterface {
   user: UserStateInterface;
   session: SessionInterface;
+  [key: string]: any;
 }
 
 export default store(function({ Vue }) {