Merge pull request #2087 from gradido/add-confirm-dialog-on-delete-contribution

fix: Add Confirm Dialog on Delete Contribution

admin/src/locales/de.json

@@ -35,6 +35,7 @@
   "creation_form": {
     "creation_failed": "Ausstehende Schöpfung für {email} konnte nicht erzeugt werden.",
     "creation_for": "Aktives Grundeinkommen für",
+    "deleteNow": "Möchtest du diesen Beitrag zur Gemeinschaft wirklich löschen?",
     "enter_text": "Text eintragen",
     "form": "Schöpfungsformular",
     "min_characters": "Mindestens 10 Zeichen eingeben",

admin/src/locales/en.json

@@ -35,6 +35,7 @@
   "creation_form": {
     "creation_failed": "Could not create pending creation for {email}",
     "creation_for": "Active Basic Income for",
+    "deleteNow": "Do you really want to delete this contribution to the community?",
     "enter_text": "Enter text",
     "form": "Creation form",
     "min_characters": "Enter at least 10 characters",

admin/src/pages/CreationConfirm.spec.js

@@ -80,28 +80,54 @@ describe('CreationConfirm', () => {
     })
 
     describe('remove creation with success', () => {
-      beforeEach(async () => {
+      let spy
-        await wrapper.findAll('tr').at(1).findAll('button').at(0).trigger('click')
-      })
 
-      it('calls the adminDeleteContribution mutation', () => {
+      describe('admin confirms deletion', () => {
-        expect(apolloMutateMock).toBeCalledWith({
+        beforeEach(async () => {
-          mutation: adminDeleteContribution,
+          spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
-          variables: { id: 1 },
+          spy.mockImplementation(() => Promise.resolve('some value'))
+          await wrapper.findAll('tr').at(1).findAll('button').at(0).trigger('click')
+        })
+
+        it('opens a modal', () => {
+          expect(spy).toBeCalled()
+        })
+
+        it('calls the adminDeleteContribution mutation', () => {
+          expect(apolloMutateMock).toBeCalledWith({
+            mutation: adminDeleteContribution,
+            variables: { id: 1 },
+          })
+        })
+
+        it('commits openCreationsMinus to store', () => {
+          expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
+        })
+
+        it('toasts a success message', () => {
+          expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_delete')
         })
       })
 
-      it('commits openCreationsMinus to store', () => {
+      describe('admin cancels deletion', () => {
-        expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
+        beforeEach(async () => {
-      })
+          spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
+          spy.mockImplementation(() => Promise.resolve(false))
+          await wrapper.findAll('tr').at(1).findAll('button').at(0).trigger('click')
+        })
 
-      it('toasts a success message', () => {
+        it('does not call the adminDeleteContribution mutation', () => {
-        expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_delete')
+          expect(apolloMutateMock).not.toBeCalled()
+        })
       })
     })
 
     describe('remove creation with error', () => {
+      let spy
+
       beforeEach(async () => {
+        spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
+        spy.mockImplementation(() => Promise.resolve('some value'))
         apolloMutateMock.mockRejectedValue({ message: 'Ouchhh!' })
         await wrapper.findAll('tr').at(1).findAll('button').at(0).trigger('click')
       })

admin/src/pages/CreationConfirm.vue

@@ -34,20 +34,23 @@ export default {
   },
   methods: {
     removeCreation(item) {
-      this.$apollo
+      this.$bvModal.msgBoxConfirm(this.$t('creation_form.deleteNow')).then(async (value) => {
-        .mutate({
+        if (value)
-          mutation: adminDeleteContribution,
+          await this.$apollo
-          variables: {
+            .mutate({
-            id: item.id,
+              mutation: adminDeleteContribution,
-          },
+              variables: {
-        })
+                id: item.id,
-        .then((result) => {
+              },
-          this.updatePendingCreations(item.id)
+            })
-          this.toastSuccess(this.$t('creation_form.toasted_delete'))
+            .then((result) => {
-        })
+              this.updatePendingCreations(item.id)
-        .catch((error) => {
+              this.toastSuccess(this.$t('creation_form.toasted_delete'))
-          this.toastError(error.message)
+            })
-        })
+            .catch((error) => {
+              this.toastError(error.message)
+            })
+      })
     },
     confirmCreation() {
       this.$apollo