From eee84ab5f7ee7a246a9ffdf599cd6f228c9f6a10 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Fri, 19 Jun 2020 18:14:14 +0100 Subject: [PATCH] Added first pass bulk members delete confirmation and results display no issue - display a confirmation modal when bulk deleting members - hit the `DELETE /members/?all=true` endpoint when confirming - show counts of members deleted/skipped - fix selection reset when leaving edit mode --- .../app/components/modal-delete-members.hbs | 71 ++++++++++++++++--- .../app/components/modal-delete-members.js | 16 ++++- ghost/admin/app/controllers/members.js | 21 ++++-- ghost/admin/app/templates/members.hbs | 18 ++--- ghost/admin/mirage/config/members.js | 23 ++++++ ghost/admin/tests/acceptance/members-test.js | 56 ++++++++++++++- 6 files changed, 179 insertions(+), 26 deletions(-) diff --git a/ghost/admin/app/components/modal-delete-members.hbs b/ghost/admin/app/components/modal-delete-members.hbs index fa81b39b07..3dc7964737 100644 --- a/ghost/admin/app/components/modal-delete-members.hbs +++ b/ghost/admin/app/components/modal-delete-members.hbs @@ -1,16 +1,69 @@ -
+

Are you sure you want to delete these members?

{{svg-jar "close"}} -
-

- You're about to delete "{{pluralize this.model.memberCount "member"}}". - This is permanent! We warned you, k? -

-
+{{#if (not this.confirmed)}} +
+

+ You're about to delete + {{pluralize this.model.memberCount "member"}}. + This is permanent! We warned you, k? +

+
+{{else}} +
+ {{#if this.error}} +
+ {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}} +
+

+ {{this.error}} +

+
+
+ {{else}} +
+ {{svg-jar "check-circle" class="w4 h4 stroke-green mr2"}} +

+ {{pluralize this.response.deleted.count "member"}} + deleted +

+
+ {{#if this.response.invalid.count}} +
+ {{svg-jar "warning" class="w4 h4 fill-red mr2 nudge-top--3"}} +
+

+ {{pluralize this.response.invalid.count "member"}} + skipped +

+ {{#each this.response.invalid.errors as |error|}} +

{{error.message}} {{error.count}}

+ {{/each}} +
+
+ {{/if}} + {{/if}} +
+{{/if}}
- - + {{#if (not this.confirmed)}} + + + + {{else}} + + {{/if}}
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-delete-members.js b/ghost/admin/app/components/modal-delete-members.js index 9cbf67f501..c1140f3e5a 100644 --- a/ghost/admin/app/components/modal-delete-members.js +++ b/ghost/admin/app/components/modal-delete-members.js @@ -2,6 +2,10 @@ import ModalComponent from 'ghost-admin/components/modal-base'; import {task} from 'ember-concurrency'; export default ModalComponent.extend({ + confirmed: false, + response: null, + error: null, + // Allowed actions confirm: () => {}, @@ -13,9 +17,15 @@ export default ModalComponent.extend({ deleteMembersTask: task(function* () { try { - yield this.confirm(); - } finally { - this.send('closeModal'); + this.set('response', yield this.confirm()); + this.set('confirmed', true); + } catch (e) { + if (e.payload.errors) { + this.set('confirmed', true); + this.set('error', e.payload.errors[0].message); + } + + throw e; } }).drop() }); diff --git a/ghost/admin/app/controllers/members.js b/ghost/admin/app/controllers/members.js index 3397c839a4..581e033cfb 100644 --- a/ghost/admin/app/controllers/members.js +++ b/ghost/admin/app/controllers/members.js @@ -22,9 +22,11 @@ const PAID_PARAMS = [{ }]; export default class MembersController extends Controller { + @service ajax; @service config; @service ellaSparse; @service feature; + @service ghostPaths; @service membersStats; @service store; @@ -141,11 +143,18 @@ export default class MembersController extends Controller { @action toggleEditMode() { - this.isEditing = !this.isEditing; + if (this.isEditing) { + this.resetSelection(); + } else { + this.isEditing = true; + } } @action toggleSelectAll() { + if (this.members.length === 0) { + return this.allSelected = false; + } this.allSelected = !this.allSelected; } @@ -289,14 +298,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'); + let query = new URLSearchParams({all: true}); + let url = `${this.ghostPaths.url.api('members')}?${query}`; + + // response contains details of which members failed to be deleted + let response = yield this.ajax.del(url); // reset and reload + this.store.unloadAll('member'); this.resetSelection(); this.reload(); - return true; + return response.meta.stats; } // Internal ---------------------------------------------------------------- diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs index e00c43fd86..9ccdd7e4f0 100644 --- a/ghost/admin/app/templates/members.hbs +++ b/ghost/admin/app/templates/members.hbs @@ -59,18 +59,18 @@
{{!-- overlaid on header to keep table column sizing --}} {{#if this.isEditing}} -
+
- - + +
-
-
@@ -83,13 +83,13 @@ {{!-- necessary because we add an extra column in the list items --}}
{{/if}} -
{{this.listHeader}}
+
{{this.listHeader}}
Location
Created
{{!-- TODO: 🍆🖌 --}} {{#if this.config.enableDeveloperExperiments}} - {{/if}} @@ -100,11 +100,11 @@ @member={{member}} @isEditing={{this.isEditing}} @isSelected={{this.allSelected}} - @data-test-member-id={{member.id}} + @data-test-member={{member.id}} /> {{else}} -
  • +
  • {{svg-jar "members-placeholder" class="gh-members-placeholder"}} {{#if this.showingAll}} diff --git a/ghost/admin/mirage/config/members.js b/ghost/admin/mirage/config/members.js index a6d7f3f295..896b55d413 100644 --- a/ghost/admin/mirage/config/members.js +++ b/ghost/admin/mirage/config/members.js @@ -1,5 +1,6 @@ import faker from 'faker'; import moment from 'moment'; +import {Response} from 'ember-cli-mirage'; import {paginatedResponse} from '../utils'; export function mockMembersStats(server) { @@ -63,6 +64,28 @@ export default function mockMembers(server) { server.get('/members/', paginatedResponse('members')); + server.del('/members/', function ({members}, {queryParams}) { + if (queryParams.all !== 'true') { + return new Response(422, {}, {errors: [{ + type: 'IncorrectUsageError', + message: 'DELETE /members/ must be used with a filter, search, or all=true query parameter' + }]}); + } + + let count = members.all().length; + members.all().destroy(); + + return { + meta: { + stats: { + deleted: { + count + } + } + } + }; + }); + server.get('/members/:id/', function ({members}, {params}) { let {id} = params; let member = members.find(id); diff --git a/ghost/admin/tests/acceptance/members-test.js b/ghost/admin/tests/acceptance/members-test.js index 601abf9889..eee3519c0b 100644 --- a/ghost/admin/tests/acceptance/members-test.js +++ b/ghost/admin/tests/acceptance/members-test.js @@ -137,7 +137,7 @@ describe('Acceptance: Members', function () { expect(find('.gh-canvas-header h2').textContent, 'settings pane title') .to.contain('New member'); - // // all fields start blank + // all fields start blank findAll('.gh-member-settings-primary .gh-input').forEach(function (elem) { expect(elem.value, `input field for ${elem.getAttribute('name')}`) .to.be.empty; @@ -161,4 +161,58 @@ describe('Acceptance: Members', function () { .to.equal('example@domain.com'); }); }); + + describe('bulk editing', function () { + beforeEach(async function () { + this.server.loadFixtures('configs'); + + let role = this.server.create('role', {name: 'Owner'}); + this.server.create('user', {roles: [role]}); + + return await authenticateSession(); + }); + + it('can bulk delete all members', async function () { + this.server.createList('member', 100); + + await visit('/members'); + + expect(find('[data-test-list-header]'), 'initial list header text').to.contain.text('100 members'); + expect(find('[data-test-edit-overlay]'), 'initial header edit overlay').to.not.exist; + + await click('[data-test-button="edit"]'); + + expect(find('[data-test-edit-overlay]'), 'edit mode overlay').to.exist; + expect(find('[data-test-label="selection"'), 'initial selection label').to.contain.text('Select all (100)'); + expect(find('[data-test-button="delete"]'), 'initial delete button').to.have.attribute('disabled'); + + await click('[data-test-checkbox="select-all"]'); + + expect(find('[data-test-label="selection"'), 'post-select-all selection label').to.contain.text('All items selected'); + expect(find('[data-test-button="delete"]'), 'post-select-all delete button').to.not.have.attribute('disabled'); + + await click('[data-test-button="delete"]'); + + expect(find('[data-test-modal="delete-members"]'), 'post-delete-click delete modal').to.exist; + expect(find('[data-test-state="delete-unconfirmed"]'), 'post-delete-click unconfirmed state').to.exist; + expect(find('[data-test-text="delete-count"]'), 'confirm delete count').to.contain.text('100 members'); + + await click('[data-test-button="confirm"]'); + + expect(find('[data-test-no-members]'), 'background no-members state').to.exist; + expect(find('[data-test-state="delete-complete"]'), 'post-confirm complete state').to.exist; + expect(find('[data-test-text="deleted-count"]'), 'post-confirm delete count').to.contain.text('100'); + expect(find('[data-test-bulk-delete-errors]'), 'post-confirm errors').to.not.exist; + + await click('[data-test-button="close-modal"'); + + expect(find('[data-test-modal="delete-members"]'), 'post-close delete modal').to.not.exist; + }); + + it('can handle bulk delete outright error'); + it('can handle partial delete success'); + it('can bulk delete all members with a filter'); + it('can bulk delete all members with a search'); + it('can bulk delete all paid/free members'); + }); });