fix(delete): delete concurrently and clean up correctly

fixes bug when deleting multiple the last one keeps the side panel open,
eventhough it does not exist anymore

Author: Yelinz

addon/components/document-delete-button.js

@@ -30,33 +30,45 @@ export default class DocumentDeleteButtonComponent extends Component {
     }
   }
 
-  @task *delete() {
-    try {
-      if (this.args.docsToDelete) {
-        const docs = Array.isArray(this.args.docsToDelete)
-          ? this.args.docsToDelete
-          : [this.args.docsToDelete]; // if the supplied argument is not an array we make it one
-
-        for (const doc of docs) {
-          yield doc.destroyRecord().catch((error) => {
-            doc.rollbackAttributes();
-            throw error;
-          });
-          this.documents.deselectDocument(doc);
-        }
-      }
-
-      if (this.args.onConfirm) {
-        this.args.onConfirm(this.args.docsToDelete);
-      }
+  delete = task(async () => {
+    if (!this.args.docsToDelete) {
+      return this.hideDialog();
+    }
+
+    const docs = Array.isArray(this.args.docsToDelete)
+      ? this.args.docsToDelete
+      : [this.args.docsToDelete]; // if the supplied argument is not an array we make it one
+
+    if (this.args.onConfirm) {
+      this.args.onConfirm(docs);
+    }
+
+    const deletionStatus = await Promise.allSettled(
+      docs.map((doc) => {
+        return doc.destroyRecord();
+      }),
+    );
+
+    const success = [];
+    const rejected = [];
+    deletionStatus.forEach((element) => {
+      (element.status === "rejected" ? rejected : success).push(element);
+    });
 
+    success.forEach((_, index) => {
+      this.documents.deselectDocument(docs[index]);
+    });
+
+    rejected.forEach((error, index) => {
+      docs[index].rollbackAttributes();
+      new ErrorHandler(this, error).notify("alexandria.errors.delete-document");
+    });
+
+    if (!rejected.length) {
       this.notification.success(
         this.intl.t("alexandria.success.delete-document"),
       );
-    } catch (error) {
-      new ErrorHandler(this, error).notify("alexandria.errors.delete-document");
-    } finally {
-      this.hideDialog();
     }
-  }
+    this.hideDialog();
+  });
 }

addon/services/alexandria-documents.js

@@ -38,6 +38,7 @@ export default class AlexandriaDocumentsService extends Service {
       this.selectedDocuments.length === 0
         ? undefined
         : this.selectedDocuments.map((d) => d.id);
+
     this.router.transitionTo(this.router.currentRouteName, {
       queryParams: {
         document: docs,

tests/integration/components/document-card-test.js

@@ -24,6 +24,7 @@ module("Integration | Component | document-card", function (hooks) {
   });
 
   test("delete file", async function (assert) {
+    this.owner.lookup("service:router").transitionTo = fake();
     const destroy = fake();
     this.document = {
       id: 1,

tests/integration/components/document-delete-button-test.js

@@ -2,32 +2,88 @@ import { render, click } from "@ember/test-helpers";
 import { setupRenderingTest } from "dummy/tests/helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
+import { fake } from "sinon";
 
 module("Integration | Component | document-delete-button", function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    this.owner.lookup("service:router").transitionTo = fake();
+  });
+
   test("delete document", async function (assert) {
     this.document = {
       id: 1,
       title: "Test",
-      destroyRecord() {},
+      destroyRecord() {
+        assert.step("destroy test");
+      },
     };
 
     this.onCancel = () => assert.step("cancel");
     this.onConfirm = () => assert.step("confirm");
 
     await render(hbs`
     <DocumentDeleteButton
-      @document={{this.document}}
+      @docsToDelete={{this.document}}
+      @onConfirm={{this.onConfirm}}
+      @onCancel={{this.onCancel}}
+      as |showDialog|
+    >
+      <button
+        {{on "click" showDialog}}
+        data-test-delete
+        type="button"
+      >
+        Delete
+      </button>
+    </DocumentDeleteButton>
+    `);
+
+    await click("[data-test-delete]");
+    await click("[data-test-delete-cancel]");
+
+    await click("[data-test-delete]");
+    await click("[data-test-delete-confirm]");
+
+    assert.verifySteps(["cancel", "confirm", "destroy test"]);
+  });
+
+  test("delete document multiple", async function (assert) {
+    this.documents = [
+      {
+        id: 1,
+        title: "Test",
+        destroyRecord() {
+          assert.step("destroy test");
+        },
+      },
+      {
+        id: 2,
+        title: "Bar",
+        destroyRecord() {
+          assert.step("destroy bar");
+        },
+      },
+    ];
+
+    this.onCancel = () => assert.step("cancel");
+    this.onConfirm = () => assert.step("confirm");
+
+    await render(hbs`
+    <DocumentDeleteButton
+      @docsToDelete={{this.documents}}
       @onConfirm={{this.onConfirm}}
       @onCancel={{this.onCancel}}
       as |showDialog|
     >
       <button
-      {{on "click" showDialog}}
-      data-test-delete
-      type="button"
-      >Delete</button>
+        {{on "click" showDialog}}
+        data-test-delete
+        type="button"
+      >
+        Delete
+      </button>
     </DocumentDeleteButton>
     `);
 
@@ -37,6 +93,6 @@ module("Integration | Component | document-delete-button", function (hooks) {
     await click("[data-test-delete]");
     await click("[data-test-delete-confirm]");
 
-    assert.verifySteps(["cancel", "confirm"]);
+    assert.verifySteps(["cancel", "confirm", "destroy test", "destroy bar"]);
   });
 });

tests/integration/components/single-document-details-test.js

@@ -51,6 +51,7 @@ module("Integration | Component | single-document-details", function (hooks) {
   });
 
   test("delete document", async function (assert) {
+    this.owner.lookup("service:router").transitionTo = fake();
     const destroy = fake();
     this.selectedDocument = {
       id: 1,