mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Added member details and hid member column on activity feed when filtered by member
refs https://github.com/TryGhost/Team/issues/1277 - extracted member details display into a `<GhMemberDetails>` component for re-use in the member details and members-activity screens - added loading of member record from the member id query param and displayed the member details above the table when a member filter is present - hid the member column in the events table when a member filter is present - it's useless/repeated info at that point
This commit is contained in:
Kevin Ansfield
parent
88e71dec6c
commit
69e7bad5d1
48
ghost/admin/app/components/gh-member-details.hbs
Normal file
48
ghost/admin/app/components/gh-member-details.hbs
Normal file
@ -0,0 +1,48 @@
|
||||
<section class="gh-member-detail-overview" ...attributes>
|
||||
<div class="gh-main-section-block">
|
||||
<div class="gh-main-section-content">
|
||||
<div class="flex items-center">
|
||||
{{#if (or @member.name @member.email)}}
|
||||
<GhMemberAvatar
|
||||
@member={{@member}}
|
||||
@sizeClass={{if @member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-subheadline fw4 lh-zero tracked-1'}}
|
||||
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
|
||||
/>
|
||||
{{else}}
|
||||
<div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
|
||||
<span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<h3>
|
||||
{{or @member.name @member.email}}
|
||||
{{#unless (or @member.name @member.email)}}
|
||||
{{#if @member.isNew}}
|
||||
<span class="midgrey">New member</span>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
</h3>
|
||||
<p>
|
||||
{{#if (and @member.name @member.email)}}
|
||||
<a href="mailto:{{@member.email}}">{{@member.email}}</a>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{#unless @member.isNew}}
|
||||
<p class="{{if @member.name "nudge-bottom--2"}}">
|
||||
{{#if @member.geolocation}}
|
||||
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
|
||||
{{@member.geolocation.region}}, US
|
||||
{{else}}
|
||||
{{or @member.geolocation.country "Unknown location"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
Unknown location
|
||||
{{/if}}
|
||||
– Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
|
||||
</p>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,53 +1,6 @@
|
||||
<div class="gh-member-settings" ...attributes>
|
||||
|
||||
<section class="gh-main-section no-heading gh-member-detail-overview">
|
||||
<div class="gh-main-section-block">
|
||||
<div class="gh-main-section-content">
|
||||
<div class="flex items-center">
|
||||
{{#if (or this.member.name this.member.email)}}
|
||||
<GhMemberAvatar
|
||||
@member={{this.member}}
|
||||
@sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-subheadline fw4 lh-zero tracked-1'}}
|
||||
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
|
||||
/>
|
||||
{{else}}
|
||||
<div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
|
||||
<span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<h3>
|
||||
{{or this.member.name this.member.email}}
|
||||
{{#unless (or this.member.name this.member.email)}}
|
||||
{{#if this.member.isNew}}
|
||||
<span class="midgrey">New member</span>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
</h3>
|
||||
<p>
|
||||
{{#if (and this.member.name this.member.email)}}
|
||||
<a href="mailto:{{this.member.email}}">{{this.member.email}}</a>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{#unless this.member.isNew}}
|
||||
<p class="{{if this.member.name "nudge-bottom--2"}}">
|
||||
{{#if this.member.geolocation}}
|
||||
{{#if (and (eq this.member.geolocation.country_code "US") @member.geolocation.region)}}
|
||||
{{this.member.geolocation.region}}, US
|
||||
{{else}}
|
||||
{{or this.member.geolocation.country "Unknown location"}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
Unknown location
|
||||
{{/if}}
|
||||
– Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
|
||||
</p>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<GhMemberDetails class="gh-main-section no-heading" @member={{@member}} />
|
||||
|
||||
<section class="gh-main-section columns-3">
|
||||
<div class="gh-main-section-block span-2">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{{svg-jar "members-placeholder" class="gh-members-placeholder"}}
|
||||
{{#if @filter}}
|
||||
<h3>No activities match the current filter</h3>
|
||||
<LinkTo @route="members-activity" @query={{hash filter=null}} class="gh-btn gh-btn-lg">
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}} class="gh-btn gh-btn-lg">
|
||||
<span>Show all activity</span>
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
{{#let (parse-member-event @event) as |event|}}
|
||||
<tr>
|
||||
<div class="gh-list-data">
|
||||
<LinkTo @route="member" @model={{event.memberId}}>
|
||||
<strong>{{event.member.name}}</strong>
|
||||
<br>
|
||||
{{event.member.email}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{#unless @hideMemberColumn}}
|
||||
<div class="gh-list-data">
|
||||
<LinkTo @route="member" @model={{event.memberId}}>
|
||||
<strong>{{event.member.name}}</strong>
|
||||
<br>
|
||||
{{event.member.email}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/unless}}
|
||||
<div class="gh-list-data">
|
||||
{{event.action}}
|
||||
{{event.object}}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<table class="gh-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
{{#unless @hideMemberColumn}}<th>Member</th>{{/unless}}
|
||||
<th>Event</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each @events as |event|}}
|
||||
<MembersActivity::TableRow @event={{event}} />
|
||||
<MembersActivity::TableRow @hideMemberColumn={{@hideMemberColumn}} @event={{event}} />
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
@ -5,6 +5,7 @@ import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class MembersActivityController extends Controller {
|
||||
@service router;
|
||||
@service store;
|
||||
|
||||
queryParams = ['excludedEvents', 'member'];
|
||||
|
||||
@ -20,6 +21,16 @@ export default class MembersActivityController extends Controller {
|
||||
return filterParts.filter(p => !!p).join('+');
|
||||
}
|
||||
|
||||
get memberRecord() {
|
||||
if (!this.member) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// TODO: {reload: true} here shouldn't be needed but without it
|
||||
// the template renders nothing if the record is already in the store
|
||||
return this.store.findRecord('member', this.member, {reload: true});
|
||||
}
|
||||
|
||||
@action
|
||||
updateExcludedEvents(newList) {
|
||||
this.router.transitionTo({queryParams: {excludedEvents: newList}});
|
||||
|
||||
@ -13,10 +13,14 @@
|
||||
</GhCanvasHeader>
|
||||
|
||||
<div class="view-container">
|
||||
{{#if this.memberRecord}}
|
||||
<GhMemberDetails @member={{this.memberRecord}} />
|
||||
{{/if}}
|
||||
|
||||
{{#let (members-event-fetcher filter=this.filter pageSize=50) as |eventsFetcher|}}
|
||||
<div class="gh-list-scrolling">
|
||||
{{#if eventsFetcher.data}}
|
||||
<MembersActivity::Table @events={{eventsFetcher.data}} />
|
||||
<MembersActivity::Table @hideMemberColumn={{if this.member true}} @events={{eventsFetcher.data}} />
|
||||
|
||||
{{#unless (or eventsFetcher.isLoading eventsFetcher.hasReachedEnd)}}
|
||||
<GhScrollTrigger @enter={{eventsFetcher.loadNextPage}} @triggerOffset={{250}} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user