rework change user role logic

admin/components.d.ts

@@ -76,6 +76,7 @@ declare module 'vue' {
     IPhCaretDown: typeof import('~icons/ph/caret-down')['default']
     IPhCaretUpFill: typeof import('~icons/ph/caret-up-fill')['default']
     IPhEnvelope: typeof import('~icons/ph/envelope')['default']
+    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
     NavBar: typeof import('./src/components/NavBar.vue')['default']
     NotFoundPage: typeof import('./src/components/NotFoundPage.vue')['default']
     OpenCreationsTable: typeof import('./src/components/Tables/OpenCreationsTable.vue')['default']
@@ -89,10 +90,9 @@ declare module 'vue' {
     TimePicker: typeof import('./src/components/input/TimePicker.vue')['default']
     TransactionLinkList: typeof import('./src/components/TransactionLinkList.vue')['default']
     UserQuery: typeof import('./src/components/UserQuery.vue')['default']
-    IPhXCircle: typeof import('~icons/ph/x-circle')['default']
-
   }
   export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
     vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
     vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
   }

admin/src/components/ChangeUserRoleFormular.vue

@@ -1,125 +1,100 @@
 <template>
   <div class="change-user-role-formular">
     <div class="shadow p-3 mb-5 bg-white rounded">
-      <div v-if="!$store.state.moderator.roles.includes('ADMIN')" class="m-3 mb-4">
-        {{ roles.find((role) => role.value === currentRole).text }}
+      <div v-if="!isModeratorRoleAdmin" class="m-3 mb-4">
+        {{ roles.find((role) => role.value === currentRole.value).text }}
       </div>
-      <div v-else-if="item.userId === $store.state.moderator.id" class="m-3 mb-4">
+      <div v-else-if="item.userId === moderatorId" class="m-3 mb-4">
         {{ $t('userRole.notChangeYourSelf') }}
       </div>
       <div v-else class="m-3">
         <label for="role" class="mr-3">{{ $t('userRole.selectLabel') }}</label>
-        <b-form-select v-model="roleSelected" class="role-select" :options="roles" />
+        <BFormSelect v-model="roleSelected" class="role-select" :options="roles" />
         <div class="mt-3 mb-5">
-          <b-button
-            v-b-modal.user-role-modal
-            variant="danger"
-            :disabled="currentRole === roleSelected"
-            @click="showModal()"
-          >
+          <BButton variant="danger" @click="showModal">
+            <!-- :disabled="currentRole.value === roleSelected.value" -->
             {{ $t('change_user_role') }}
-          </b-button>
+          </BButton>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
-import { setUserRole } from '../graphql/setUserRole'
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BButton, BFormSelect } from 'bootstrap-vue-next'
+import { useMutation } from '@vue/apollo-composable'
+import { setUserRole as setUserRoleMutation } from '../graphql/setUserRole'
+import { useStore } from 'vuex'
+import { useAppToast } from '@/composables/useToast'
+
+const { t } = useI18n()
+const store = useStore()
+const { toastError, toastSuccess } = useAppToast()
 
 const rolesValues = {
   ADMIN: 'ADMIN',
   MODERATOR: 'MODERATOR',
   USER: 'USER',
 }
-
-export default {
-  name: 'ChangeUserRoleFormular',
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['update-roles'],
-  data() {
-    return {
-      currentRole: this.getCurrentRole(),
-      roleSelected: this.getCurrentRole(),
-      roles: [
-        { value: rolesValues.USER, text: this.$t('userRole.selectRoles.user') },
-        { value: rolesValues.MODERATOR, text: this.$t('userRole.selectRoles.moderator') },
-        { value: rolesValues.ADMIN, text: this.$t('userRole.selectRoles.admin') },
-      ],
-    }
-  },
-  methods: {
-    getCurrentRole() {
-      if (this.item.roles.length) return rolesValues[this.item.roles[0]]
-      return rolesValues.USER
-    },
-    showModal() {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('overlay.changeUserRole.question', {
-            username: `${this.item.firstName} ${this.item.lastName}`,
-            newRole:
-              this.roleSelected === rolesValues.ADMIN
-                ? this.$t('userRole.selectRoles.admin')
-                : this.roleSelected === rolesValues.MODERATOR
-                  ? this.$t('userRole.selectRoles.moderator')
-                  : this.$t('userRole.selectRoles.user'),
-          }),
-          {
-            cancelTitle: this.$t('overlay.cancel'),
-            centered: true,
-            hideHeaderClose: true,
-            title: this.$t('overlay.changeUserRole.title'),
-            okTitle: this.$t('overlay.changeUserRole.yes'),
-            okVariant: 'danger',
-          },
-        )
-        .then((okClicked) => {
-          if (okClicked) {
-            this.setUserRole(this.roleSelected, this.currentRole)
-          }
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    setUserRole(newRole, oldRole) {
-      const role = this.roles.find((role) => {
-        return role.value === newRole
-      })
-      const roleText = role.text
-      const roleValue = role.value
-      this.$apollo
-        .mutate({
-          mutation: setUserRole,
-          variables: {
-            userId: this.item.userId,
-            role: role.value,
-          },
-        })
-        .then((result) => {
-          this.$emit('update-roles', {
-            userId: this.item.userId,
-            roles: roleValue === 'USER' ? [] : [roleValue],
-          })
-          this.toastSuccess(
-            this.$t('userRole.successfullyChangedTo', {
-              role: roleText,
-            }),
-          )
-        })
-        .catch((error) => {
-          this.roleSelected = oldRole
-          this.toastError(error.message)
-        })
-    },
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
   },
+})
+const getCurrentRole = () => {
+  if (props.item.roles.length) return rolesValues[props.item.roles[0]]
+  return rolesValues.USER
 }
+const currentRole = ref(getCurrentRole())
+const roleSelected = ref(getCurrentRole())
+
+const emit = defineEmits(['update-roles', 'show-modal', 'select-role'])
+const isModeratorRoleAdmin = computed(() => store.state.moderator.roles.includes('ADMIN'))
+const moderatorId = computed(() => store.state.moderator.id)
+
+const roles = computed(() => [
+  { value: rolesValues.USER, text: t('userRole.selectRoles.user') },
+  { value: rolesValues.MODERATOR, text: t('userRole.selectRoles.moderator') },
+  { value: rolesValues.ADMIN, text: t('userRole.selectRoles.admin') },
+])
+
+const showModal = async () => {
+  emit('show-modal')
+}
+
+const { mutate: setUserRole } = useMutation(setUserRoleMutation)
+
+const updateUserRole = (newRole, oldRole) => {
+  const role = roles.value.find((role) => role.value === newRole)
+  const roleText = role.text
+  const roleValue = role.value
+
+  setUserRole({
+    userId: props.item.userId,
+    role: role.value,
+  })
+    .then(() => {
+      emit('update-roles', {
+        userId: props.item.userId,
+        roles: roleValue === 'USER' ? [] : [roleValue],
+      })
+      toastSuccess(
+        t('userRole.successfullyChangedTo', {
+          role: roleText,
+        }),
+      )
+    })
+    .catch((error) => {
+      roleSelected.value = oldRole
+      toastError(error.message)
+    })
+}
+
+defineExpose({ currentRole, roleSelected, updateUserRole })
 </script>
 
 <style>

admin/src/components/Tables/SearchUserTable.vue

@@ -32,7 +32,7 @@
               style="color: #f5365c"
               class="align-center mr-3"
             />
-            <!-- <b-icon
+            <!-- <BAvatar
               v-if="!row.item.hasElopage"
               variant="danger"
               class="mr-3"
@@ -77,18 +77,27 @@
                 "
               />
             </BTab>
-            <!-- <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
+            <BTab :title="$t('creationList')" :disabled="row.item.deletedAt !== null">
               <creation-transaction-list v-if="!row.item.deletedAt" :user-id="row.item.userId" />
             </BTab>
             <BTab :title="$t('transactionlink.name')" :disabled="row.item.deletedAt !== null">
               <transaction-link-list v-if="!row.item.deletedAt" :user-id="row.item.userId" />
             </BTab>
             <BTab :title="$t('userRole.tabTitle')">
-              <change-user-role-formular :item="row.item" @update-roles="updateRoles" />
-            </BTab> -->
-            <!-- <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
-              <deleted-user-formular :item="row.item" @update-deleted-at="updateDeletedAt" />
-            </BTab> -->
+              <change-user-role-formular
+                ref="userChangeForm"
+                :item="row.item"
+                @update-roles="updateRoles"
+                @show-modal="showModal"
+              />
+            </BTab>
+            <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
+              <deleted-user-formular
+                :item="row.item"
+                @update-deleted-at="updateDeletedAt"
+                @show-delete-modal="showDeleteModal"
+              />
+            </BTab>
           </BTabs>
         </BCard>
       </template>
@@ -96,10 +105,27 @@
   </div>
 </template>
 <script setup>
-import { ref, nextTick, onMounted, watch } from 'vue'
-import { BTable, BAvatar, BTab, BTabs, BCard } from 'bootstrap-vue-next'
+import { ref, nextTick, onMounted, watch, computed } from 'vue'
+import {
+  BTable,
+  BAvatar,
+  BTab,
+  BTabs,
+  BCard,
+  useModal,
+  useModalController,
+} from 'bootstrap-vue-next'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 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'
+
+const store = useStore()
+const { toastError } = useAppToast()
 
 const props = defineProps({
   items: {
@@ -112,32 +138,78 @@ const props = defineProps({
   },
 })
 
-// const emit = defineEmits(['update-roles', 'update-deleted-at'])
+const { t } = useI18n()
+const rolesValues = {
+  ADMIN: 'ADMIN',
+  MODERATOR: 'MODERATOR',
+  USER: 'USER',
+}
+const { confirm } = useModalController()
+const modal = useModal()
+const userChangeForm = ref()
+
+const showModal = async () => {
+  const value = await confirm?.({
+    props: {
+      cancelTitle: t('overlay.cancel'),
+      centered: true,
+      hideHeaderClose: true,
+      title: t('overlay.changeUserRole.title'),
+      okTitle: t('overlay.changeUserRole.yes'),
+      okVariant: 'danger',
+      body: t('overlay.changeUserRole.question', {
+        username: `${selectedRow.value.firstName} ${selectedRow.value.lastName}`,
+        newRole:
+          userChangeForm.value.roleSelected === rolesValues.ADMIN
+            ? t('userRole.selectRoles.admin')
+            : userChangeForm.value.roleSelected === rolesValues.MODERATOR
+              ? t('userRole.selectRoles.moderator')
+              : t('userRole.selectRoles.user'),
+      }),
+    },
+  })
+    .then((ok) => {
+      if (ok) {
+        userChangeForm.value.updateUserRole(
+          userChangeForm.value.roleSelected,
+          userChangeForm.value.currentRole,
+        )
+      }
+    })
+    .catch((error) => {
+      toastError(error.message)
+    })
+
+  modal.show?.({ props: { title: `Promise resolved to ${value}`, variant: 'info' } })
+}
+
+const showDeleteModal = async () => {
+  const value = await confirm?.({ props: { title: 'Hello World! ' } })
+
+  modal.show?.({ props: { title: `Promise resolved to ${value}`, variant: 'info' } })
+}
+
 const myItems = ref()
 const creationUserData = ref({})
 const rowDetails = ref()
 
-onMounted(() => {
-  setTimeout(() => {
-    myItems.value = props.items.map((item) => {
-      return { ...item, _showDetails: false }
-    })
-
-    // myItems.value
-  }, 500)
-})
-
 const updateUserData = (rowItem, newCreation) => {
   rowItem.creation = newCreation
 }
 
-// const updateRoles = ({ userId, roles }) => {
-//   emit('update-roles', userId, roles)
-// }
-//
-// const updateDeletedAt = ({ userId, deletedAt }) => {
-//   emit('update-deleted-at', userId, deletedAt)
-// }
+const updateRoles = ({ userId, roles }) => {
+  emit('update-roles', userId, roles)
+}
+
+const updateDeletedAt = ({ userId, deletedAt }) => {
+  emit('update-deleted-at', userId, deletedAt)
+}
+
+const emit = defineEmits(['update-roles', 'update-deleted-at'])
+
+const selectedRow = computed(() => {
+  return myItems.value.find((obj) => obj._showDetails)
+})
 
 const onRowClicked = async (item) => {
   const status = myItems.value.find((obj) => {
@@ -166,4 +238,12 @@ watch(
     })
   },
 )
+
+onMounted(() => {
+  setTimeout(() => {
+    myItems.value = props.items.map((item) => {
+      return { ...item, _showDetails: false }
+    })
+  }, 500)
+})
 </script>