add modal to user role change in admin interface

admin/src/components/ChangeUserRoleFormular.vue

@@ -4,19 +4,35 @@
       <div v-if="item.userId === $store.state.moderator.id" class="m-3 mb-4">
         {{ $t('userRole.notChangeYourSelf') }}
       </div>
-      <div class="m-3">
+      <div v-else class="m-3">
         <label for="role" class="mr-3">{{ $t('userRole.selectLabel') }}</label>
-        <b-form-select
-          class="role-select"
-          v-model="roleSelected"
-          :options="roles"
-          :disabled="item.userId === $store.state.moderator.id"
-        />
+        <b-form-select class="role-select" v-model="roleSelected" :options="roles" />
+        <div class="mt-3 mb-5">
+          <b-button
+            variant="danger"
+            v-b-modal.user-role-modal
+            :disabled="currentRole === roleSelected"
+            @click="showModal('changeUserRole')"
+          >
+            {{ $t('change_user_role') }}
+          </b-button>
+        </div>
       </div>
     </div>
+
+    <b-modal
+      id="user-role-modal"
+      hide-header-close
+      ok-variant="danger"
+      :title="modalTitle"
+      :cancel-title="$t('overlay.cancel')"
+      :ok-title="modalOkTitle"
+      @ok="modalEvent"
+    >
+      <p class="my-4">{{ modalQuestion }}</p>
+    </b-modal>
   </div>
 </template>
-
 <script>
 import { setUserRole } from '../graphql/setUserRole'
 
@@ -35,21 +51,37 @@ export default {
   },
   data() {
     return {
+      currentRole: this.item.isAdmin ? rolesValues.admin : rolesValues.user,
       roleSelected: this.item.isAdmin ? rolesValues.admin : rolesValues.user,
       roles: [
         { value: rolesValues.user, text: this.$t('userRole.selectRoles.user') },
         { value: rolesValues.admin, text: this.$t('userRole.selectRoles.admin') },
       ],
+      modalTitle: '',
+      modalQuestion: '',
+      modalOkTitle: '',
+      modalEvent: null,
+      username: '',
     }
   },
   watch: {
-    roleSelected(newRole, oldRole) {
-      if (newRole !== oldRole) {
-        this.setUserRole(newRole, oldRole)
-      }
-    },
+    // roleSelected(newRole, oldRole) {
+    //   if (newRole !== oldRole) {
+    //     // this.setUserRole(newRole, oldRole)
+    //   }
+    // },
   },
   methods: {
+    showModal() {
+      this.username = `${this.item.firstName} ${this.item.lastName}`
+      this.modalTitle = this.$t('overlay.changeUserRole.title')
+      this.modalQuestion = this.$t('overlay.changeUserRole.question', {
+        username: this.username,
+        newRole: this.roleSelected, // TODO get the text:Administrator instead of admin
+      })
+      this.modalOkTitle = this.$t('overlay.changeUserRole.yes')
+      this.modalEvent = this.setUserRole(this.roleSelected, this.currentRole)
+    },
     setUserRole(newRole, oldRole) {
       this.$apollo
         .mutate({

admin/src/locales/de.json

@@ -2,6 +2,7 @@
   "all_emails": "Alle Nutzer",
   "back": "zurück",
   "chat": "Chat",
+  "change_user_role": "Nutzerrolle ändern",
   "contributionLink": {
     "amount": "Betrag",
     "changeSaved": "Änderungen gespeichert",
@@ -141,6 +142,11 @@
       "question": "Willst du wirklich {username} wiederherstellen?",
       "title": "Nutzer wiederherstellen",
       "yes": "Ja, Nutzer wiederherstellen"
+    },
+    "changeUserRole": {
+      "question": "Willst du die Rolle von {username} wirklich zu {newRole} ändern?",
+      "title": "Nutzerrolle ändern",
+      "yes": "Ja, Nutzerrolle ändern"
     }
   },
   "redeemed": "eingelöst",

admin/src/locales/en.json

@@ -2,6 +2,7 @@
   "all_emails": "All users",
   "back": "back",
   "chat": "Chat",
+  "change_user_role": "Change user role",
   "contributionLink": {
     "amount": "Amount",
     "changeSaved": "Changes saved",
@@ -141,6 +142,11 @@
       "question": "Do you really want to undelete {username}",
       "title": "Undelete user",
       "yes": "Yes,undelete user"
+    },
+    "changeUserRole": {
+      "question": "Do you really want to change {username}'s role to {newRole}?",
+      "title": "Change user role",
+      "yes": "Yes, change user role"
     }
   },
   "redeemed": "redeemed",