use msgBoxConfirm for user deletion modal

admin/src/components/DeletedUserFormular.vue

@@ -9,7 +9,7 @@
           v-if="item.deletedAt === null"
           variant="danger"
           v-b-modal.delete-user-modal
-          @click="showModal('deleteUser')"
+          @click="showDeleteModal()"
         >
           {{ $t('delete_user') }}
         </b-button>
@@ -17,23 +17,12 @@
           v-if="item.deletedAt !== null"
           variant="success"
           v-b-modal.delete-user-modal
-          @click="showModal('undeleteUser')"
+          @click="showUndeleteModal()"
         >
           {{ $t('undelete_user') }}
         </b-button>
       </div>
     </div>
-    <b-modal
-      id="delete-user-modal"
-      hide-header-close
-      :title="modalTitle"
-      :cancel-title="$t('overlay.cancel')"
-      :ok-title="modalOkTitle"
-      :ok-variant="variant"
-      @ok="modalEvent"
-    >
-      <p class="my-4">{{ modalQuestion }}</p>
-    </b-modal>
   </div>
 </template>
 <script>
@@ -51,33 +40,56 @@ export default {
   data() {
     return {
       checked: false,
-      modalTitle: '',
-      modalQuestion: '',
-      modalOkTitle: '',
-      modalEvent: null,
-      username: '',
-      variant: 'danger',
     }
   },
   methods: {
-    showModal(type) {
+    showDeleteModal() {
-      this.username = `${this.item.firstName} ${this.item.lastName}`
+      this.$bvModal
-
+        .msgBoxConfirm(
-      if (type === 'deleteUser') {
+          this.$t('overlay.deleteUser.question', {
-        this.variant = 'danger'
+            username: `${this.item.firstName} ${this.item.lastName}`,
-        this.modalTitle = this.$t('overlay.deleteUser.title')
+          }),
-        this.modalQuestion = this.$t('overlay.deleteUser.question', { username: this.username })
+          {
-        this.modalOkTitle = this.$t('overlay.deleteUser.yes')
+            cancelTitle: this.$t('overlay.cancel'),
-        this.modalEvent = this.deleteUser
+            centered: true,
-      }
+            hideHeaderClose: true,
-
+            title: this.$t('overlay.deleteUser.title'),
-      if (type === 'undeleteUser') {
+            okTitle: this.$t('overlay.deleteUser.yes'),
-        this.variant = 'success'
+            okVariant: 'danger',
-        this.modalTitle = this.$t('overlay.undeleteUser.title')
+          },
-        this.modalQuestion = this.$t('overlay.undeleteUser.question', { username: this.username })
+        )
-        this.modalOkTitle = this.$t('overlay.undeleteUser.yes')
+        .then((okClicked) => {
-        this.modalEvent = this.unDeleteUser
+          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