Implement mutation 'setUserRole' in frontend

admin/src/components/ChangeUserRoleFormular.vue

@@ -16,9 +16,9 @@
     </div>
   </div>
 </template>
+
 <script>
-import { deleteUser } from '../graphql/deleteUser'
-import { unDeleteUser } from '../graphql/unDeleteUser'
+import { setUserRole } from '../graphql/setUserRole'
 
 const rolesValues = {
   admin: 'admin',
@@ -34,12 +34,7 @@ export default {
     },
   },
   data() {
-    // Wolle
-    // console.log('this.item: ', this.item)
-    // console.log('this.item.isAdmin: ', this.item.isAdmin)
-    // console.log('roleSelected: ', this.item.isAdmin ? 'admin' : 'user')
     return {
-      // Wolle: checked: false,
       roleSelected: this.item.isAdmin ? rolesValues.admin : rolesValues.user,
       roles: [
         { value: rolesValues.user, text: this.$t('userRole.selectRoles.user') },
@@ -50,54 +45,43 @@ export default {
   watch: {
     roleSelected(newRole, oldRole) {
       if (newRole !== oldRole) {
-        // Wolle
-        console.log('newRole: ', newRole)
+        this.setUserRole(newRole, oldRole)
       }
     },
   },
   methods: {
-    // Wolle: deleteUser() {
-    //   this.$apollo
-    //     .mutate({
-    //       mutation: deleteUser,
-    //       variables: {
-    //         userId: this.item.userId,
-    //       },
-    //     })
-    //     .then((result) => {
-    //       this.$emit('updateDeletedAt', {
-    //         userId: this.item.userId,
-    //         deletedAt: result.data.deleteUser,
-    //       })
-    //       this.checked = false
-    //     })
-    //     .catch((error) => {
-    //       this.toastError(error.message)
-    //     })
-    // },
-    // unDeleteUser() {
-    //   this.$apollo
-    //     .mutate({
-    //       mutation: unDeleteUser,
-    //       variables: {
-    //         userId: this.item.userId,
-    //       },
-    //     })
-    //     .then((result) => {
-    //       this.toastSuccess(this.$t('user_recovered'))
-    //       this.$emit('updateDeletedAt', {
-    //         userId: this.item.userId,
-    //         deletedAt: result.data.unDeleteUser,
-    //       })
-    //       this.checked = false
-    //     })
-    //     .catch((error) => {
-    //       this.toastError(error.message)
-    //     })
-    // },
+    setUserRole(newRole, oldRole) {
+      this.$apollo
+        .mutate({
+          mutation: setUserRole,
+          variables: {
+            userId: this.item.userId,
+            isAdmin: newRole === rolesValues.admin,
+          },
+        })
+        .then((result) => {
+          this.$emit('updateIsAdmin', {
+            userId: this.item.userId,
+            isAdmin: result.data.setUserRole,
+          })
+          this.toastSuccess(
+            this.$t('userRole.successfullyChangedTo', {
+              role:
+                result.data.setUserRole !== null
+                  ? this.$t('userRole.selectRoles.admin')
+                  : this.$t('userRole.selectRoles.user'),
+            }),
+          )
+        })
+        .catch((error) => {
+          this.roleSelected = oldRole
+          this.toastError(error.message)
+        })
+    },
   },
 }
 </script>
+
 <style>
 .role-select {
   width: 300pt;

admin/src/graphql/setUserRole.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const setUserRole = gql`
+  mutation ($userId: Int!, $isAdmin: Boolean!) {
+    setUserRole(userId: $userId, isAdmin: $isAdmin)
+  }
+`

admin/src/locales/de.json

@@ -108,6 +108,7 @@
       "admin": "Administrator",
       "user": "einfacher Nutzer"
     },
+    "successfullyChangedTo": "Nutzer ist jetzt „{role}“.",
     "tabTitle": "Nutzer-Rolle"
   },
   "user_deleted": "Nutzer ist gelöscht.",

admin/src/locales/en.json

@@ -108,6 +108,7 @@
       "admin": "administrator",
       "user": "usual user"
     },
+    "successfullyChangedTo": "User is now \"{role}\".",
     "tabTitle": "User Role"
   },
   "user_deleted": "User is deleted.",

admin/src/pages/UserSearch.vue

@@ -42,6 +42,7 @@
       type="PageUserSearch"
       :items="searchResult"
       :fields="fields"
+      @updateIsAdmin="updateIsAdmin"
       @updateDeletedAt="updateDeletedAt"
     />
     <b-pagination
@@ -111,6 +112,9 @@ export default {
           this.toastError(error.message)
         })
     },
+    updateIsAdmin(userId, isAdmin) {
+      this.searchResult.find((obj) => obj.userId === userId).isAdmin = isAdmin
+    },
     updateDeletedAt(userId, deletedAt) {
       this.searchResult.find((obj) => obj.userId === userId).deletedAt = deletedAt
       this.toastSuccess(deletedAt ? this.$t('user_deleted') : this.$t('user_recovered'))