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

@@ -1,8 +1,16 @@
 <template>
+  <div>
     <q-card class="col-12">
       <q-form @submit="save" @reset="reset">
-      <q-linear-progress indeterminate rounded color="primary" v-if="loading" />
+        <q-linear-progress
-      <q-card-section class="fit row justify-start content-center items-center">
+          indeterminate
+          rounded
+          color="primary"
+          v-if="loading"
+        />
+        <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>
@@ -19,6 +27,8 @@
             map-options
             @new-value="createRole"
             @input="updateRole"
+            @clear="removeRole"
+            clearable
           />
         </q-card-section>
         <q-separator />
@@ -43,6 +53,7 @@
         </q-card-actions>
       </q-form>
     </q-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -89,6 +100,10 @@ export default defineComponent({
       done(name, 'add-unique');
     }
 
+    function removeRole(): void {
+      role.value = null;
+    }
+
     function updatePermissions(permissions: string[]) {
       if (role.value) {
         role.value.permissions = permissions;
@@ -139,12 +154,13 @@ export default defineComponent({
     return {
       roles,
       role,
-      createRole,
       permissions,
+      createRole,
       updateRole,
       updatePermissions,
       save,
       reset,
+      removeRole,
       remove,
       loading
     };

src/plugins/user/pages/AdminSettings.vue

@@ -36,7 +36,7 @@
       <q-tab-panels
         v-model="tab"
         style="background-color: transparent;"
-        class="q-ma-none q-pa-none"
+        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
         animated
       >
         <q-tab-panel name="user">

src/plugins/user/store/user.ts

@@ -45,6 +45,13 @@ const mutations: MutationTree<UserStateInterface> = {
   setRoles(state, data: FG.Role[]) {
     state.roles = data;
   },
+  updateRole(state, data: FG.Role) {
+    const idx = state.roles.findIndex(role => role.id === data.id);
+    if (idx != undefined || idx != null) {
+      state.roles[idx].name = data.name;
+      state.roles[idx].permissions = data.permissions;
+    }
+  },
   setPermissions(state, data: FG.Permission[]) {
     state.permissions = data;
   },
@@ -136,22 +143,18 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
     axios
       .put(`/roles/${data.id}`, data)
       .then(() => {
-        const idx = state.roles.findIndex(role => role.id === data.id);
+        commit('updateRole', data);
-        if (idx) {
-          state.roles[idx].name = data.name;
-          state.roles[idx].permissions = data.permissions;
-        }
       })
       .finally(() => {
         commit('setLoading', false);
       });
   },
 
-  newRole({ commit }, data: FG.Role) {
+  newRole({ commit, dispatch }, data: FG.Role) {
     commit('setLoading');
     axios
       .post('/roles', data)
-      .then(() => commit('getRoles'))
+      .then(() => dispatch('getRoles', true))
       .finally(() => {
         commit('setLoading', false);
       });
@@ -162,7 +165,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
     axios
       .delete(`/roles/${data.id}`)
       .then(() => {
-        state.roles = state.roles.filter(value => value.id !== data.id);
+        commit(
+          'setRoles',
+          state.roles.filter(value => value.id !== data.id)
+        );
       })
       .finally(() => {
         commit('setLoading', false);