Add 'ChangeUserRoleFormular.vue' to 'SearchUserTable'

admin/src/components/ChangeUserRoleFormular.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="change-user-role-formular">
+    <div v-if="item.userId === $store.state.moderator.id" class="mt-5 mb-5">
+      {{ $t('userRole.notChangeYourSelf') }}
+    </div>
+    <!-- Wolle: <div v-else class="mt-5"> -->
+    <div class="mt-5">
+      <!-- Wolle: <b-form-checkbox switch size="lg" v-model="checked">
+        <div>{{ item.deletedAt ? $t('undelete_user') : $t('delete_user') }}</div>
+      </b-form-checkbox>
+
+      <div class="mt-3 mb-5">
+        <b-button v-if="checked && item.deletedAt === null" variant="danger" @click="deleteUser">
+          {{ $t('delete_user') }}
+        </b-button>
+        <b-button v-if="checked && item.deletedAt !== null" variant="success" @click="unDeleteUser">
+          {{ $t('undelete_user') }}
+        </b-button>
+      </div> -->
+      {{ $t('userRole.selectLabel') }}
+      <b-form-select v-model="selected" :options="options"></b-form-select>
+    </div>
+  </div>
+</template>
+<script>
+import { deleteUser } from '../graphql/deleteUser'
+import { unDeleteUser } from '../graphql/unDeleteUser'
+
+export default {
+  name: 'ChangeUserRoleFormular',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    // Wolle
+    console.log('this.item: ', this.item)
+    return {
+      // Wolle: checked: false,
+      selected: this.item.isAmin ? 'admin' : 'user',
+      options: [
+        { value: 'user', text: 'einfacher Nutzer' },
+        { value: 'admin', text: 'Administrator' },
+      ],
+    }
+  },
+  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)
+    //     })
+    // },
+  },
+}
+</script>
+<style>
+.input-group-text {
+  background-color: rgb(255, 252, 205);
+}
+</style>

admin/src/components/DeletedUserFormular.vue

@@ -28,6 +28,7 @@ export default {
   props: {
     item: {
       type: Object,
+      required: true,
     },
   },
   data() {

admin/src/components/Tables/SearchUserTable.vue

@@ -79,6 +79,9 @@
             <b-tab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
               <transaction-link-list v-if="!row.item.deletedAt" :userId="row.item.userId" />
             </b-tab>
+            <b-tab :title="$t('userRole.tabTitle')">
+              <change-user-role-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
+            </b-tab>
             <b-tab :title="$t('delete_user')">
               <deleted-user-formular :item="row.item" @updateDeletedAt="updateDeletedAt" />
             </b-tab>
@@ -93,6 +96,7 @@ import CreationFormular from '../CreationFormular.vue'
 import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular.vue'
 import CreationTransactionList from '../CreationTransactionList.vue'
 import TransactionLinkList from '../TransactionLinkList.vue'
+import ChangeUserRoleFormular from '../ChangeUserRoleFormular.vue'
 import DeletedUserFormular from '../DeletedUserFormular.vue'
 
 export default {
@@ -102,6 +106,7 @@ export default {
     ConfirmRegisterMailFormular,
     CreationTransactionList,
     TransactionLinkList,
+    ChangeUserRoleFormular,
     DeletedUserFormular,
   },
   props: {

admin/src/graphql/searchUsers.js

@@ -19,6 +19,7 @@ export const searchUsers = gql`
         hasElopage
         emailConfirmationSend
         deletedAt
+        isAdmin
       }
     }
   }

admin/src/locales/de.json

@@ -103,5 +103,10 @@
   },
   "user_deleted": "Nutzer ist gelöscht.",
   "user_recovered": "Nutzer ist wiederhergestellt.",
+  "userRole": {
+    "tabTitle": "Nutzer-Rolle / -Rechte",
+    "notChangeYourSelf": "Als Admin / Moderator kannst du nicht selber deine Rolle ändern.",
+    "selectLabel": "Rolle:"
+  },
   "user_search": "Nutzer-Suche"
 }

admin/src/locales/en.json

@@ -71,7 +71,7 @@
   },
   "redeemed": "redeemed",
   "remove": "Remove",
-  "removeNotSelf": "As admin / moderator you cannot delete yourself.",
+  "removeNotSelf": "As admin / moderator you can not delete yourself.",
   "remove_all": "Remove all users",
   "save": "Speichern",
   "status": "Status",
@@ -103,5 +103,10 @@
   },
   "user_deleted": "User is deleted.",
   "user_recovered": "User is recovered.",
+  "userRole": {
+    "tabTitle": "User Role / Rights",
+    "notChangeYourSelf": "As admin / moderator you can not change your own role.",
+    "selectLabel": "Role:"
+  },
   "user_search": "User search"
 }