From 0ea459737f5960b60270fad975601bad948d2376 Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Thu, 25 Jul 2024 19:29:56 +0200
Subject: [PATCH] rework deleted user

---
 admin/src/components/DeletedUserFormular.vue  | 172 +++++++-----------
 .../src/components/Tables/SearchUserTable.vue |  84 ++++++---
 2 files changed, 133 insertions(+), 123 deletions(-)

diff --git a/admin/src/components/DeletedUserFormular.vue b/admin/src/components/DeletedUserFormular.vue
index cf39d9570..1cf535582 100644
--- a/admin/src/components/DeletedUserFormular.vue
+++ b/admin/src/components/DeletedUserFormular.vue
@@ -1,127 +1,95 @@
 <template>
   <div class="deleted-user-formular">
-    <div v-if="item.userId === $store.state.moderator.id" class="mt-5 mb-5">
+    <div v-if="isUserModerator" class="mt-5 mb-5">
       {{ $t('removeNotSelf') }}
     </div>
     <div v-else class="mt-5">
       <div class="mt-3 mb-5">
-        <b-button
+        <BButton
           v-if="!item.deletedAt"
           v-b-modal.delete-user-modal
           variant="danger"
-          @click="showDeleteModal()"
+          @click="showDeleteModal"
         >
           {{ $t('delete_user') }}
-        </b-button>
-        <b-button v-else v-b-modal.delete-user-modal variant="success" @click="showUndeleteModal()">
+        </BButton>
+        <BButton v-else v-b-modal.delete-user-modal variant="success" @click="showUndeleteModal">
           {{ $t('undelete_user') }}
-        </b-button>
+        </BButton>
       </div>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useApolloClient } from '@vue/apollo-composable'
+import { BButton, vBModal } from 'bootstrap-vue-next'
 import { deleteUser } from '../graphql/deleteUser'
 import { unDeleteUser } from '../graphql/unDeleteUser'
+import { useAppToast } from '@/composables/useToast'
 
-export default {
-  name: 'DeletedUser',
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['update-deleted-at'],
-  methods: {
-    showDeleteModal() {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('overlay.deleteUser.question', {
-            username: `${this.item.firstName} ${this.item.lastName}`,
-          }),
-          {
-            cancelTitle: this.$t('overlay.cancel'),
-            centered: true,
-            hideHeaderClose: true,
-            title: this.$t('overlay.deleteUser.title'),
-            okTitle: this.$t('overlay.deleteUser.yes'),
-            okVariant: 'danger',
-            static: true,
-          },
-        )
-        .then((okClicked) => {
-          if (okClicked) {
-            this.deleteUser()
-          }
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    showUndeleteModal() {
-      this.$bvModal
-        .msgBoxConfirm(
-          this.$t('overlay.undeleteUser.question', {
-            username: `${this.item.firstName} ${this.item.lastName}`,
-          }),
-          {
-            cancelTitle: this.$t('overlay.cancel'),
-            centered: true,
-            hideHeaderClose: true,
-            title: this.$t('overlay.undeleteUser.title'),
-            okTitle: this.$t('overlay.undeleteUser.yes'),
-            okVariant: 'success',
-          },
-        )
-        .then((okClicked) => {
-          if (okClicked) {
-            this.unDeleteUser()
-          }
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    deleteUser() {
-      this.$apollo
-        .mutate({
-          mutation: deleteUser,
-          variables: {
-            userId: this.item.userId,
-          },
-        })
-        .then((result) => {
-          this.$emit('update-deleted-at', {
-            userId: this.item.userId,
-            deletedAt: result.data.deleteUser,
-          })
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
-    unDeleteUser() {
-      this.$apollo
-        .mutate({
-          mutation: unDeleteUser,
-          variables: {
-            userId: this.item.userId,
-          },
-        })
-        .then((result) => {
-          this.$emit('update-deleted-at', {
-            userId: this.item.userId,
-            deletedAt: result.data.unDeleteUser,
-          })
-        })
-        .catch((error) => {
-          this.toastError(error.message)
-        })
-    },
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
   },
+})
+
+const emit = defineEmits(['update-deleted-at', 'show-delete-modal', 'show-undelete-modal'])
+
+const { client } = useApolloClient()
+const store = useStore()
+const { toastError } = useAppToast()
+
+const isUserModerator = computed(() => props.item.userId === store.state.moderator.id)
+
+const showDeleteModal = () => {
+  emit('show-delete-modal')
 }
+
+const showUndeleteModal = () => {
+  emit('show-undelete-modal')
+}
+
+const deleteUserMutation = async () => {
+  try {
+    const result = await client.mutate({
+      mutation: deleteUser,
+      variables: {
+        userId: props.item.userId,
+      },
+    })
+    emit('update-deleted-at', {
+      userId: props.item.userId,
+      deletedAt: result.data.deleteUser,
+    })
+  } catch (error) {
+    toastError(error.message)
+  }
+}
+
+const undeleteUserMutation = async () => {
+  try {
+    const result = await client.mutate({
+      mutation: unDeleteUser,
+      variables: {
+        userId: props.item.userId,
+      },
+    })
+    emit('update-deleted-at', {
+      userId: props.item.userId,
+      deletedAt: result.data.unDeleteUser,
+    })
+  } catch (error) {
+    toastError(error.message)
+  }
+}
+
+defineExpose({ deleteUserMutation, undeleteUserMutation })
 </script>
+
 <style>
 .input-group-text {
   background-color: rgb(255 252 205);
diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index 709d28768..0dc7a2e78 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -93,10 +93,18 @@
             </BTab>
             <BTab v-if="store.state.moderator.roles.includes('ADMIN')" :title="$t('delete_user')">
               <deleted-user-formular
+                v-if="!row.item.deletedAt"
+                ref="deletedUserForm"
                 :item="row.item"
                 @update-deleted-at="updateDeletedAt"
                 @show-delete-modal="showDeleteModal"
               />
+              <deleted-user-formular
+                v-else
+                ref="undeletedUserForm"
+                :item="row.item"
+                @show-undelete-modal="showUndeleteModal"
+              />
             </BTab>
           </BTabs>
         </BCard>
@@ -106,15 +114,7 @@
 </template>
 <script setup>
 import { ref, nextTick, onMounted, watch, computed } from 'vue'
-import {
-  BTable,
-  BAvatar,
-  BTab,
-  BTabs,
-  BCard,
-  useModal,
-  useModalController,
-} from 'bootstrap-vue-next'
+import { BTable, BAvatar, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useAppToast } from '@/composables/useToast'
@@ -124,6 +124,8 @@ import CreationTransactionList from '../CreationTransactionList.vue'
 import TransactionLinkList from '../TransactionLinkList.vue'
 import ChangeUserRoleFormular from '../ChangeUserRoleFormular.vue'
 
+const { t } = useI18n()
+const { confirm } = useModalController()
 const store = useStore()
 const { toastError } = useAppToast()
 
@@ -138,18 +140,21 @@ const props = defineProps({
   },
 })
 
-const { t } = useI18n()
 const rolesValues = {
   ADMIN: 'ADMIN',
   MODERATOR: 'MODERATOR',
   USER: 'USER',
 }
-const { confirm } = useModalController()
-const modal = useModal()
+
 const userChangeForm = ref()
+const deletedUserForm = ref()
+const undeletedUserForm = ref()
+const myItems = ref()
+const creationUserData = ref({})
+const rowDetails = ref()
 
 const showModal = async () => {
-  const value = await confirm?.({
+  await confirm?.({
     props: {
       cancelTitle: t('overlay.cancel'),
       centered: true,
@@ -179,19 +184,56 @@ const showModal = async () => {
     .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' } })
+  await confirm?.({
+    props: {
+      cancelTitle: t('overlay.cancel'),
+      centered: true,
+      hideHeaderClose: true,
+      title: t('overlay.deleteUser.title'),
+      okTitle: t('overlay.deleteUser.yes'),
+      okVariant: 'danger',
+      static: true,
+      body: t('overlay.deleteUser.question', {
+        username: `${selectedRow.value.firstName} ${selectedRow.value.lastName}`,
+      }),
+    },
+  })
+    .then((ok) => {
+      if (ok) {
+        deletedUserForm.value.deleteUserMutation()
+      }
+    })
+    .catch((error) => {
+      toastError(error.message)
+    })
 }
 
-const myItems = ref()
-const creationUserData = ref({})
-const rowDetails = ref()
+const showUndeleteModal = async () => {
+  await confirm?.({
+    props: {
+      cancelTitle: t('overlay.cancel'),
+      centered: true,
+      hideHeaderClose: true,
+      title: t('overlay.undeleteUser.title'),
+      okTitle: t('overlay.undeleteUser.yes'),
+      okVariant: 'success',
+      body: t('overlay.undeleteUser.question', {
+        username: `${selectedRow.value.firstName} ${selectedRow.value.lastName}`,
+      }),
+    },
+  })
+    .then((ok) => {
+      if (ok) {
+        undeletedUserForm.value.undeleteUserMutation()
+      }
+    })
+    .catch((error) => {
+      toastError(error.message)
+    })
+}
 
 const updateUserData = (rowItem, newCreation) => {
   rowItem.creation = newCreation