Fixed some vue errors and send less requests if (no need to fetch own edits)

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

@@ -174,7 +174,7 @@ export default defineComponent({
         })[0];
     });
 
-    const avatar = ref<string>('');
+    const avatar = ref([]);
     function onAvatarRejected() {
       Notify.create({
         group: false,
@@ -184,7 +184,7 @@ export default defineComponent({
         progress: true,
         actions: [{ icon: 'mdi-close', color: 'white' }],
       });
-      avatar.value = '';
+      avatar.value = [];
     }
 
     const allRoles = computed(() =>
@@ -208,7 +208,7 @@ export default defineComponent({
       }
 
       emit('update:user', changed);
-      if (avatar.value != '')
+      if (avatar.value && avatar.value.length > 0)
         store
           .dispatch('user/uploadAvatar', {
             user: changed,
@@ -219,6 +219,7 @@ export default defineComponent({
               onAvatarRejected();
             }
           });
+      reset();
     }
 
     function reset() {

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

@@ -1,10 +1,11 @@
 <template>
   <div>
     <q-card class="col-12">
-      <q-form @submit="save" @reset="reset">
+      <q-form
-        <q-card-section
+        @submit="save"
-          class="fit row justify-start content-center items-center"
+        @reset="reset"
       >
+        <q-card-section class="fit row justify-start content-center items-center">
           <span class="col-xs-12 col-sm-6 text-center text-h6">
             Rollen und Berechtigungen
           </span>
@@ -46,10 +47,24 @@
             />
           </q-scroll-area>
         </q-card-section>
-        <q-card-actions v-if="role" align="right">
+        <q-card-actions
-          <q-btn label="Löschen" color="negative" @click="remove" />
+          v-if="role"
-          <q-btn label="Reset" type="reset" />
+          align="right"
-          <q-btn color="primary" type="submit" label="Speichern" />
+        >
+          <q-btn
+            label="Löschen"
+            color="negative"
+            @click="remove"
+          />
+          <q-btn
+            label="Reset"
+            type="reset"
+          />
+          <q-btn
+            color="primary"
+            type="submit"
+            label="Speichern"
+          />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -61,7 +76,7 @@ import {
   computed,
   defineComponent,
   ref,
-  onBeforeMount
+  onBeforeMount,
 } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
@@ -72,10 +87,10 @@ export default defineComponent({
     const store = <Store<StateInterface>>root.$store;
 
     onBeforeMount(() => {
-      store.dispatch('user/getRoles').catch(error => {
+      store.dispatch('user/getRoles').catch((error) => {
         console.warn(error);
       });
-      store.dispatch('user/getPermissions').catch(error => {
+      store.dispatch('user/getPermissions').catch((error) => {
         console.warn(error);
       });
     });
@@ -83,10 +98,10 @@ export default defineComponent({
     const role = ref<FG.Role | null>(null);
     const roles = computed(() => store.state.user.roles);
     const permissions = computed(() =>
-      store.state.user.permissions.map(perm => {
+      store.state.user.permissions.map((perm) => {
         return {
           value: perm,
-          label: perm
+          label: perm,
         };
       })
     );
@@ -116,14 +131,19 @@ export default defineComponent({
       role.value = {
         id: rl.id,
         name: rl.name,
-        permissions: Array.from(rl.permissions)
+        permissions: Array.from(rl.permissions),
       };
     }
 
     function save() {
       if (role.value) {
         if (role.value.id === -1)
-          void store.dispatch('user/newRole', role.value);
+          void store
+            .dispatch('user/newRole', role.value)
+            .then((createdRole: FG.Role) => {
+              console.log(createdRole);
+              role.value = createdRole;
+            });
         else {
           if (newRoleName.value !== '') role.value.name = newRoleName.value;
           console.log(role.value);
@@ -135,7 +155,7 @@ export default defineComponent({
     function reset() {
       if (role.value && role.value.id !== -1) {
         const original = roles.value.find(
-          value => value.name === role.value?.name
+          (value) => value.name === role.value?.name
         );
         if (original) updateRole(original);
       } else {
@@ -151,7 +171,7 @@ export default defineComponent({
           store
             .dispatch('user/deleteRole', role.value)
             .then(() => (role.value = null))
-            .catch(error => console.warn(error));
+            .catch((error) => console.warn(error));
         }
       }
     }
@@ -167,8 +187,8 @@ export default defineComponent({
       reset,
       removeRole,
       remove,
-      newRoleName
+      newRoleName,
     };
-  }
+  },
 });
 </script>

src/plugins/user/store/user.ts

@@ -54,9 +54,12 @@ const mutations: MutationTree<UserStateInterface> = {
   setRoles(state, data: FG.Role[]) {
     state.roles = data;
   },
+  addRole(state, data: FG.Role) {
+    state.roles.push(data);
+  },
   updateRole(state, data: FG.Role) {
     const idx = state.roles.findIndex(role => role.id === data.id);
-    if (idx != undefined || idx != null) {
+    if (idx >= 0) {
       state.roles[idx].name = data.name;
       state.roles[idx].permissions = data.permissions;
     }
@@ -184,11 +187,14 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
       });
   },
 
-  newRole({ commit, dispatch }, data: FG.Role) {
+  newRole({ commit }, data: FG.Role) {
     commit('setLoading');
-    axios
+    return axios
       .post('/roles', data)
-      .then(() => dispatch('getRoles', true))
+      .then((response: AxiosResponse<FG.Role>) => {
+        commit('addRole', response.data);
+        return Promise.resolve(response.data);
+      })
       .finally(() => {
         commit('setLoading', false);
       });