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

@@ -1,48 +1,59 @@
 <template>
-  <q-card class="col-12">
+  <div>
-    <q-form @submit="save" @reset="reset">
+    <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-linear-progress
-        <span class="col-xs-12 col-sm-6 text-center text-h6">
+          indeterminate
-          Rollen und Berechtigungen
+          rounded
-        </span>
+          color="primary"
-        <q-select
+          v-if="loading"
-          filled
-          use-input
-          label="Rolle"
-          input-debounce="0"
-          class="col-xs-12 col-sm-6 q-pa-sm"
-          :value="role"
-          :options="roles"
-          option-label="name"
-          option-value="name"
-          map-options
-          @new-value="createRole"
-          @input="updateRole"
         />
-      </q-card-section>
+        <q-card-section
-      <q-separator />
+          class="fit row justify-start content-center items-center"
-      <q-card-section
+        >
-        v-if="role"
+          <span class="col-xs-12 col-sm-6 text-center text-h6">
-        class="fit row justify-start content-center items-center"
+            Rollen und Berechtigungen
-      >
+          </span>
-        <q-scroll-area style="height: 20em; width: 100%;">
+          <q-select
-          <q-option-group
+            filled
-            :value="role.permissions"
+            use-input
-            @input="updatePermissions"
+            label="Rolle"
-            :options="permissions"
+            input-debounce="0"
-            color="primary"
+            class="col-xs-12 col-sm-6 q-pa-sm"
-            type="checkbox"
+            :value="role"
+            :options="roles"
+            option-label="name"
+            option-value="name"
+            map-options
+            @new-value="createRole"
+            @input="updateRole"
+            @clear="removeRole"
+            clearable
           />
-        </q-scroll-area>
+        </q-card-section>
-      </q-card-section>
+        <q-separator />
-      <q-card-actions v-if="role" align="right">
+        <q-card-section
-        <q-btn label="Löschen" color="negative" @click="remove" />
+          v-if="role"
-        <q-btn label="Reset" type="reset" />
+          class="fit row justify-start content-center items-center"
-        <q-btn color="primary" type="submit" label="Speichern" />
+        >
-      </q-card-actions>
+          <q-scroll-area style="height: 20em; width: 100%;">
-    </q-form>
+            <q-option-group
-  </q-card>
+              :value="role.permissions"
+              @input="updatePermissions"
+              :options="permissions"
+              color="primary"
+              type="checkbox"
+            />
+          </q-scroll-area>
+        </q-card-section>
+        <q-card-actions v-if="role" align="right">
+          <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>
+  </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);