[User] Rollen können umbenannt werden

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

@@ -1,17 +1,16 @@
 <template>
   <div>
     <q-card class="col-12">
-      <q-form
+      <q-form @submit="save" @reset="reset">
-        @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-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>
@@ -38,6 +37,12 @@
           class="fit row justify-start content-center items-center"
         >
           <q-scroll-area style="height: 20em; width: 100%;">
+            <q-input
+              filled
+              v-model="newRoleName"
+              label="neuer Name"
+              v-if="role.id != -1"
+            />
             <q-option-group
               :value="role.permissions"
               @input="updatePermissions"
@@ -47,24 +52,10 @@
             />
           </q-scroll-area>
         </q-card-section>
-        <q-card-actions
+        <q-card-actions v-if="role" align="right">
-          v-if="role"
+          <q-btn label="Löschen" color="negative" @click="remove" />
-          align="right"
+          <q-btn label="Reset" type="reset" />
-        >
+          <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>
@@ -76,7 +67,7 @@ import {
   computed,
   defineComponent,
   ref,
-  onBeforeMount,
+  onBeforeMount
 } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
@@ -87,10 +78,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);
       });
     });
@@ -99,14 +90,16 @@ 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
         };
       })
     );
 
+    const newRoleName = ref<string>('');
+
     function createRole(
       name: string,
       done: (arg0: string, arg1: string) => void
@@ -130,7 +123,7 @@ export default defineComponent({
       role.value = {
         id: rl.id,
         name: rl.name,
-        permissions: Array.from(rl.permissions),
+        permissions: Array.from(rl.permissions)
       };
     }
 
@@ -138,14 +131,18 @@ export default defineComponent({
       if (role.value) {
         if (role.value.id === -1)
           void store.dispatch('user/newRole', role.value);
-        else void store.dispatch('user/updateRole', role.value);
+        else {
+          if (newRoleName.value !== '') role.value.name = newRoleName.value;
+          console.log(role.value);
+          void store.dispatch('user/updateRole', role.value);
+        }
       }
     }
 
     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 {
@@ -161,7 +158,7 @@ export default defineComponent({
           store
             .dispatch('user/deleteRole', role.value)
             .then(() => (role.value = null))
-            .catch((error) => console.warn(error));
+            .catch(error => console.warn(error));
         }
       }
     }
@@ -178,7 +175,8 @@ export default defineComponent({
       removeRole,
       remove,
       loading,
+      newRoleName
     };
-  },
+  }
 });
 </script>