Moved members bulk delete confirmation into a modal

ghost/admin/app/components/modal-delete-members.hbs

@@ -0,0 +1,16 @@
+<header class="modal-header">
+    <h1>Are you sure you want to delete these members?</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body">
+    <p>
+        You're about to delete "<strong>{{pluralize this.model.memberCount "member"}}</strong>".
+        This is permanent! We warned you, k?
+    </p>
+</div>
+
+<div class="modal-footer">
+    <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
+    <GhTaskButton @buttonText="Delete" @successText="Deleted" @task={{this.deleteMembersTask}} @class="gh-btn gh-btn-red gh-btn-icon" />
+</div>

ghost/admin/app/components/modal-delete-members.js

@@ -0,0 +1,21 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {task} from 'ember-concurrency';
+
+export default ModalComponent.extend({
+    // Allowed actions
+    confirm: () => {},
+
+    actions: {
+        confirm() {
+            this.deleteMembersTask.perform();
+        }
+    },
+
+    deleteMembersTask: task(function* () {
+        try {
+            yield this.confirm();
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop()
+});

ghost/admin/app/controllers/members.js

@@ -43,6 +43,7 @@ export default class MembersController extends Controller {
     @tracked modalLabel = null;
     @tracked isEditing = false;
     @tracked showLabelModal = false;
+    @tracked showDeleteMembersModal = false;
 
     @tracked _availableLabels = A([]);
 
@@ -210,10 +211,13 @@ export default class MembersController extends Controller {
     }
 
     @action
-    confirmDeleteMembers() {
-        let {members} = this;
-        let count = `${formatNumber(members.length)} ${pluralize(members.length, 'member', {withoutCount: true})}`;
-        alert(`Once deletion is implemented, you'll see a confirmation for deleting ${count} here`);
+    toggleDeleteMembersModal() {
+        this.showDeleteMembersModal = !this.showDeleteMembersModal;
+    }
+
+    @action
+    deleteMembers() {
+        return this.deleteMembersTask.perform();
     }
 
     // Tasks -------------------------------------------------------------------
@@ -283,6 +287,18 @@ export default class MembersController extends Controller {
         });
     }
 
+    @task({drop: true})
+    *deleteMembersTask() {
+        yield timeout(1000);
+        alert('Bulk deletion is not implemented yet, nothing has been deleted');
+
+        // reset and reload
+        this.resetSelection();
+        this.reload();
+
+        return true;
+    }
+
     // Internal ----------------------------------------------------------------
 
     resetSearch() {
@@ -293,4 +309,10 @@ export default class MembersController extends Controller {
         this.isEditing = false;
         this.allSelected = false;
     }
+
+    reload() {
+        this.membersStats.invalidate();
+        this.membersStats.fetch();
+        this.fetchMembersTask.perform();
+    }
 }

ghost/admin/app/templates/members.hbs

@@ -65,7 +65,7 @@
                                 <input type="checkbox" id="select-all-members" name="select-all-members" {{on "input" this.toggleSelectAll}}>
                                 <label for="select-all-members">{{this.selectAllLabel}}</label>
                             </div>
-                            <button class="gh-btn" {{on "click" this.confirmDeleteMembers}} disabled={{not this.selectedCount}}>
+                            <button class="gh-btn" {{on "click" this.toggleDeleteMembersModal}} disabled={{not this.selectedCount}}>
                                 <span>Delete</span>
                             </button>
                         </div>
@@ -128,6 +128,16 @@
 
 {{outlet}}
 
+{{#if this.showDeleteMembersModal}}
+    <GhFullscreenModal
+        @modal="delete-members"
+        @model={{hash memberCount=this.selectedCount}}
+        @confirm={{this.deleteMembers}}
+        @close={{this.toggleDeleteMembersModal}}
+        @modifier="action wide"
+    />
+{{/if}}
+
 {{#if this.showLabelModal}}
     <GhFullscreenModal
         @modal="members-label-form"