Ghost/ghost/admin/app/templates/members.hbs
Fabien O'Carroll 592e3df794 Added Members Filtering feature
no-issue

This adds the ability to apply complex filters to members, as well as to
perform bulk actions on the filtered set, including unsubscribing,
adding & removing labels.
2021-10-01 14:16:28 +02:00

193 lines
8.4 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
<section class="view-actions">
<div class="view-actions-bottom-row">
<div class="relative gh-members-header-search">
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput
placeholder="Search members..."
@value={{this.searchText}}
@input={{this.search}}
class="gh-members-list-searchfield {{if this.searchText "active"}}" />
</div>
</div>
<div class="view-actions-top-row">
<GhMembersFilterLabs
@isFiltered={{this.isFiltered}}
@onApplyFilter={{this.applyFilter}}
@defaultFilterParam={{this.filterParam}}
@onApplySoftFilter={{this.applySoftFilter}}
@onResetSoftFilter={{this.resetSoftFilter}}
@onResetFilter={{this.resetFilter}}
@onLabelEdit={{this.editLabel}}
/>
<span class="dropdown">
<GhDropdownButton
@dropdownName="members-actions-menu"
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@title="Members Actions"
data-test-button="members-actions"
>
<span>
{{svg-jar "settings"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown
@name="members-actions-menu"
@tagName="ul"
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
>
<li>
<LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
<span>Import members</span>
</LinkTo>
</li>
<li class="{{if this.members.length "" "disabled"}}">
{{#if this.members.length}}
<button class="mr2" {{on "click" this.exportData}}>
{{#if this.showingAll}}
<span>Export all members</span>
{{else}}
<span>Export selected members ({{this.members.length}})</span>
{{/if}}
</button>
{{else}}
<button class="mr2" disabled="true">
<span>Export selected members (0)</span>
</button>
{{/if}}
</li>
{{#if (and this.members.length this.isFiltered)}}
<li class="divider"></li>
<li>
<button class="mr2" {{on "click" this.toggleAddMembersLabelModal}} data-test-button="add-label-selected">
<span>Add label for selected members ({{this.members.length}})</span>
</button>
</li>
<li>
<button class="mr2" {{on "click" this.toggleRemoveMembersLabelModal}} data-test-button="remove-label-selected">
<span>Remove label from selected members ({{this.members.length}})</span>
</button>
</li>
<li>
<button class="mr2" {{on "click" this.toggleUnsubscribeMembersModal}} data-test-button="remove-label-selected">
<span>Unsubscribe selected members ({{this.members.length}})</span>
</button>
</li>
<li class="divider"></li>
<li>
<button class="mr2" {{on "click" this.toggleDeleteMembersModal}} data-test-button="delete-selected">
<span class="red">Delete selected members ({{this.members.length}})</span>
</button>
</li>
{{/if}}
</GhDropdown>
</span>
<LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
</div>
</section>
</GhCanvasHeader>
{{#unless this.members.loading}}
<section class="view-container">
{{#if this.members}}
<div class="gh-list-scrolling">
<table class="gh-list">
<thead>
<tr>
<th>{{this.listHeader}}</th>
<th>Open rate</th>
<th>Location</th>
<th>Created</th>
{{#each this.filterColumnLabels as |filterColumn|}}
<th>{{filterColumn}}</th>
{{/each}}
</tr>
</thead>
<VerticalCollection @tagName="tbody" @items={{this.members}} @key="id" @containerSelector=".gh-list-scrolling" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
<GhMembersListItemLabs
@member={{member}}
@filterColumns={{this.filterColumns}}
data-test-member={{member.id}}
/>
</VerticalCollection>
</table>
</div>
{{else}}
<div class="no-posts-box">
<div class="no-posts">
{{svg-jar "members-placeholder" class="gh-members-placeholder"}}
{{#if this.showingAll}}
<h3>No members yet</h3>
<GhMembersNoMembers @afterCreate={{this.refreshData}} />
{{else}}
<h3>No members match the current filter</h3>
<LinkTo @route="members" @query={{hash filter=null}} class="gh-btn gh-btn-lg">
<span>Show all members</span>
</LinkTo>
{{/if}}
</div>
</div>
{{/if}}
</section>
{{else}}
<div class="gh-content">
<GhLoadingSpinner />
</div>
{{/unless}}
</section>
{{outlet}}
{{#if this.showAddMembersLabelModal}}
<GhFullscreenModal
@modal="add-label-members"
@model={{hash memberCount=this.members.length}}
@confirm={{this.addLabelToMembers}}
@close={{this.toggleAddMembersLabelModal}}
@modifier="action wide"
/>
{{/if}}
{{#if this.showRemoveMembersLabelModal}}
<GhFullscreenModal
@modal="remove-label-members"
@model={{hash memberCount=this.members.length}}
@confirm={{this.removeLabelFromMembers}}
@close={{this.toggleRemoveMembersLabelModal}}
@modifier="action wide"
/>
{{/if}}
{{#if this.showUnsubscribeMembersModal}}
<GhFullscreenModal
@modal="unsubscribe-members"
@model={{hash memberCount=this.members.length}}
@confirm={{this.unsubscribeMembers}}
@close={{this.toggleUnsubscribeMembersModal}}
@modifier="action wide"
/>
{{/if}}
{{#if this.showDeleteMembersModal}}
<GhFullscreenModal
@modal="delete-members"
@model={{hash memberCount=this.members.length}}
@confirm={{this.deleteMembers}}
@close={{this.toggleDeleteMembersModal}}
@modifier="action wide"
/>
{{/if}}
{{#if this.showLabelModal}}
<GhFullscreenModal
@modal="members-label-form"
@model={{this.labelModalData}}
@close={{this.toggleLabelModal}}
@modifier="action wide"
/>
{{/if}}