src/boot/loading.ts

@@ -3,7 +3,7 @@ import { Loading } from 'quasar';
 
 // "async" is optional;
 // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
-export default boot(async (/* { app, router, Vue ... } */) => {
+export default boot((/* { app, router, Vue ... } */) => {
   Loading.setDefaults({
     spinner: () => import('src/components/loading/DarkCircularProgress.vue')
   });

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

@@ -1,5 +1,6 @@
 <template>
   <q-card class="col-12">
+    <q-linear-progress indeterminate rounded color="primary" v-if="loading" />
     <q-form @submit="save" @reset="reset">
       <q-card-section class="fit row justify-start content-center items-center">
         <q-input
@@ -81,6 +82,7 @@
         />
       </q-card-section>
       <q-card-actions align="right">
+        <q-btn label="test" @click="$store.dispatch('user/getUser')" />
         <q-btn label="Reset" type="reset" />
         <q-btn color="primary" type="submit" label="Speichern" />
       </q-card-actions>
@@ -164,6 +166,12 @@ export default defineComponent({
       );
     }
 
+    const loading = computed(() => {
+      return (
+        store.state.user.getUserLoading || store.state.user.updateUserLoading
+      );
+    });
+
     return {
       user,
       firstname,
@@ -177,7 +185,8 @@ export default defineComponent({
       isEmail,
       notEmpty,
       save,
-      reset
+      reset,
+      loading
     };
   }
 });

src/plugins/user/pages/Settings.vue

@@ -53,7 +53,12 @@ export default defineComponent({
       console.log(sessions.value);
     }
 
-    const sessionsLoading = computed(() => store.state.sessions.loading);
+    const sessionsLoading = computed(
+      () =>
+        store.state.sessions.loading ||
+        store.state.user.getUserLoading ||
+        store.state.user.updateUserLoading
+    );
 
     return {
       showRootGetters,

src/plugins/user/store/user.ts

@@ -7,7 +7,8 @@ import { LocalStorage, Loading } from 'quasar';
 import { Router } from 'src/router';
 
 export interface UserStateInterface extends LoginResponse {
-  loginLoading: boolean;
+  updateUserLoading: boolean;
+  getUserLoading: boolean;
 }
 
 export interface LoginResponse {
@@ -35,18 +36,29 @@ const empty_user: FG.User = {
 const state: UserStateInterface = {
   user: empty_user,
   session: empty_session,
-  loginLoading: false
+  updateUserLoading: false,
+  getUserLoading: false
 };
 
 const mutations: MutationTree<UserStateInterface> = {
   setUser(state, data: FG.User) {
     state.user = data;
   },
+  updateUser(state, data: { [index: string]: string }) {
+    Object.keys(data).forEach(key => {
+      if ((<{ [index: string]: any }>state.user)[key] === data[key]) {
+        (<{ [index: string]: any }>state.user)[key] = data[key];
+      }
+    });
+  },
   setSession(state, data: FG.Session) {
     state.session = data;
   },
-  setLoginLoading(state, data: boolean) {
+  setLoading(
-    state.loginLoading = data;
+    state,
+    data: { key: 'updateUserLoading' | 'getUserLoading'; data: boolean }
+  ) {
+    state[data.key] = data.data;
   },
   showState(state) {
     console.log(state);
@@ -55,7 +67,6 @@ const mutations: MutationTree<UserStateInterface> = {
 
 const actions: ActionTree<UserStateInterface, StateInterface> = {
   login({ commit }, data: LoginData) {
-    commit('setLoginLoading', true);
     Loading.show({
       message: 'Du wirst eingeloggt'
     });
@@ -75,7 +86,6 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
         console.exception(error);
       })
       .finally(() => {
-        commit('setLoginLoading', false);
         Loading.hide();
       });
   },
@@ -101,15 +111,34 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
     });
   },
 
-  updateUser({ commit, state }, data) {
+  getUser({ commit, state }) {
-    commit('setLoginLoading', true);
+    commit('setLoading', { key: 'getUserLoading', data: true });
+    axios
+      .get(`/users/${state.user.userid}`)
+      .then((response: AxiosResponse<FG.User>) => {
+        commit('setUser', response.data);
+        LocalStorage.set('user', response.data);
+      })
+      .catch(err => {
+        console.warn(err);
+      })
+      .finally(() => {
+        commit('setLoading', { key: 'getUserLoading', data: false });
+      });
+  },
+
+  updateUser({ commit, state, dispatch }, data) {
+    commit('setLoading', { key: 'updateUserLoading', data: true });
     axios
       .put(`/users/${state.user.userid}`, data)
+      .then(() => {
+        void dispatch('getUser');
+      })
       .catch(error => {
         console.log(error);
       })
       .finally(() => {
-        commit('setLoginLoading', false);
+        commit('setLoading', { key: 'updateUserLoading', data: false });
       });
   },
 
@@ -133,8 +162,8 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
   session({ session }) {
     return session;
   },
-  loginLoading({ loginLoading }) {
+  loading({ updateUserLoading, getUserLoading }) {
-    return loginLoading;
+    return updateUserLoading || getUserLoading;
   }
 };