From 0f587a90d09ff356584cbf6e928f77ceef5d57e0 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 18 Jun 2020 11:05:03 +0100 Subject: [PATCH] Added rough "edit mode" for members table behind dev flag no issue - initial UI for bulk-selection, focusing for now on first stage which is limited to select-all and delete actions - adds "Edit" button to the members table that shows the "selection" toolbar in place of the table header and shows a checkbox next to each member --- app/components/gh-members-list-item.hbs | 24 ++++++++++++--- app/controllers/members.js | 34 ++++++++++++++++++++ app/styles/layouts/members.css | 30 ++++++++++++++++++ app/templates/members.hbs | 41 +++++++++++++++++++++++-- 4 files changed, 121 insertions(+), 8 deletions(-) diff --git a/app/components/gh-members-list-item.hbs b/app/components/gh-members-list-item.hbs index f98d2ce7f..585b28820 100644 --- a/app/components/gh-members-list-item.hbs +++ b/app/components/gh-members-list-item.hbs @@ -1,5 +1,10 @@
  • {{#if @member.is_loading}} + {{#if @isEditing}} +
    + +
    + {{/if}}
    @@ -8,6 +13,12 @@
    {{else}} + {{#if @isEditing}} +
    + +
    + {{/if}} +
    @@ -21,7 +32,7 @@ - {{#if @member.geolocation}} + {{#if (and @member.geolocation @member.geolocation.country)}} {{#if (eq @member.geolocation.country_code "US")}} {{@member.geolocation.region}}, US {{else}} @@ -34,14 +45,17 @@ {{#if @member.createdAtUTC}} - {{moment-format @member.createdAtUTC "MMM DD, YYYY"}} ({{moment-from-now @member.createdAtUTC}}) + {{moment-format @member.createdAtUTC "MMM DD, YYYY"}} + ({{moment-from-now @member.createdAtUTC}}) {{/if}} -
    - {{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}} -
    + {{#unless @isEditing}} +
    + {{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}} +
    + {{/unless}}     {{/if}}
    • \ No newline at end of file diff --git a/app/controllers/members.js b/app/controllers/members.js index 5d9050a94..03332e27e 100644 --- a/app/controllers/members.js +++ b/app/controllers/members.js @@ -22,6 +22,7 @@ const PAID_PARAMS = [{ }]; export default class MembersController extends Controller { + @service config; @service ellaSparse; @service feature; @service membersStats; @@ -34,11 +35,13 @@ export default class MembersController extends Controller { ]; @tracked members = A([]); + @tracked allSelected = false; @tracked searchText = ''; @tracked searchParam = ''; @tracked paidParam = null; @tracked label = null; @tracked modalLabel = null; + @tracked isEditing = false; @tracked showLabelModal = false; @tracked _availableLabels = A([]); @@ -111,6 +114,20 @@ export default class MembersController extends Controller { return this.paidParams.findBy('value', this.paidParam) || {value: '!unknown'}; } + get selectedCount() { + return this.allSelected ? this.members.length : 0; + } + + get selectAllLabel() { + let {members} = this; + + if (this.allSelected) { + return `All items selected (${formatNumber(members.length)})`; + } else { + return `Select all (${formatNumber(members.length)})`; + } + } + // Actions ----------------------------------------------------------------- @action @@ -121,6 +138,16 @@ export default class MembersController extends Controller { this.membersStats.fetch(); } + @action + toggleEditMode() { + this.isEditing = !this.isEditing; + } + + @action + toggleSelectAll() { + this.allSelected = !this.allSelected; + } + @action search(e) { this.searchTask.perform(e.target.value); @@ -182,6 +209,13 @@ export default class MembersController extends Controller { this.paidParam = paid.value; } + @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`); + } + // Tasks ------------------------------------------------------------------- @task({restartable: true}) diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css index fa1081de1..c34ab4875 100644 --- a/app/styles/layouts/members.css +++ b/app/styles/layouts/members.css @@ -59,6 +59,32 @@ z-index: 1; } +.members-list-header-overlay { + display: flex; + flex-direction: row; + justify-content: space-between; + position: sticky; + height: 40px; + top: calc(84px - 40px); /* match gh-list-header sticky top */ + left: 0; + right: 0; + margin-top: -40px; + transform: translateY(40px); + z-index: 2; + + border-radius: 5px 5px 0 0; + + border-bottom: 1px solid #e5eff5; + font-size: 1.2rem; + font-weight: 500; + letter-spacing: .1px; + color: #738a94; + text-transform: uppercase; + padding: 10px 16px; + white-space: nowrap; + background: #f8fafc; +} + .members-header .view-actions input.gh-members-list-searchfield { min-width: 220px; padding-left: 30px; @@ -78,6 +104,10 @@ box-shadow: inset 0 0 0 1px #3eb0ef; } +.gh-members-list-checkbox { + width: 36px; +} + p.gh-members-list-email { margin: -2px 0 -1px; } diff --git a/app/templates/members.hbs b/app/templates/members.hbs index 8d63963f3..979f6034b 100644 --- a/app/templates/members.hbs +++ b/app/templates/members.hbs @@ -57,16 +57,51 @@ {{/if}}
    + {{!-- overlaid on header to keep table column sizing --}} + {{#if this.isEditing}} +
    +
    +
    + + +
    + +
    + + +
    + {{/if}} +
      {{#if this.members}} -
    1. +
    2. + {{#if this.isEditing}} + {{!-- necessary because we add an extra column in the list items --}} +
      + {{/if}}
      {{this.listHeader}}
      Location
      Created
      -
      +
      + {{!-- TODO: 🍆🖌 --}} + {{#if this.config.enableDeveloperExperiments}} + + {{/if}} +
      3. - + {{else}}