Ghost/ghost/admin/app/components/gh-members-list-item.hbs
Sanne de Vries ffe0f84700 Added open-rate column and ordering to the members list (#1790)
closes https://github.com/TryGhost/Ghost/issues/12421

- added `emailOpenRate` property to member model
- added open-rate column to the members list
  - hidden when email analytics is disabled
- added `{{feature "flag"}}` helper so feature flags can be checked in templates without injecting the feature service into the backing class
- added `order` query param to the members controller/route and wired it into the data fetching routine
- added order dropdown to the filter bar with "Newest" (default) and "Open rate" as the two options
  - whole dropdown is hidden if email analytics is disabled

Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
2020-12-08 19:23:57 +00:00

57 lines
3.1 KiB
Handlebars

<li class="gh-list-row gh-members-list-item {{if @member.is_loading "loading"}}" ...attributes>
{{#if @member.is_loading}}
<div class="gh-list-data gh-members-list-basic gh-list-loadingcell">
<div class="gh-list-loading-title"></div>
<div class="gh-list-loading-detail"></div>
</div>
<div class="gh-list-data gh-members-list-open-rate gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-geolocation gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-10"></div>
<div class="gh-list-data gh-members-list-chevron gh-list-cellwidth-chevron"></div>
{{else}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div>
<h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
{{/if}}
</div>
</div>
</LinkTo>
{{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8">
{{#if (not (is-empty @member.emailOpenRate))}}
<span>{{@member.emailOpenRate}}%</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-geolocation middarkgrey f8 {{if (not @member.name) "gh-members-geolocation-noname"}}">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{@member.geolocation.country}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
{{#if @member.createdAtUTC}}
{{moment-format @member.createdAtUTC "D MMM YYYY"}}
<span class="midlightgrey">({{moment-from-now @member.createdAtUTC}})</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-list-cellwidth-chevron gh-members-list-chevron">
<div class="flex items-center justify-end w-100 h-100">
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div>
</LinkTo>
{{/if}}
</li>