TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Refactored <GhMembersListItem>

Browse Source 
no issue

- switched to using a glimmer component
  - cleaned up property access in the template
  - used helpers for basic display logic in the template
- removed unused computed properties, aliases, and injected services
This commit is contained in:
Kevin Ansfield 2020-02-27 12:17:48 +00:00
parent 4b5f538552
commit ab8334dae2
2 changed files with 26 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
ghost/admin/app/components/gh-members-list-item.js
View File

@ -1,29 +1,8 @@
import Component from '@ember/component';
import Component from '@glimmer/component';
import moment from 'moment';
import {alias, or} from '@ember/object/computed';
import {computed} from '@ember/object';
import {inject as service} from '@ember/service';
export default Component.extend({
ghostPaths: service(),
notifications: service(),
router: service(),
tagName: 'li',
classNames: ['gh-list-row', 'gh-members-list-item'],
active: false,
id: alias('member.id'),
email: alias('member.email'),
name: alias('member.name'),
displayName: or('member.name', 'member.email'),
memberSince: computed('member.createdAtUTC', function () {
return moment(this.member.createdAtUTC).from(moment());
}),
createdDate: computed('member.createdAtUTC', function () {
return moment(this.member.createdAtUTC).format('MMM DD, YYYY');
})
});
export default class GhMembersListItemComponent extends Component {
get memberSince() {
return moment(this.args.member.createdAtUTC).from(moment());
}
}

38
ghost/admin/app/templates/components/gh-members-list-item.hbs
View File

@ -1,21 +1,23 @@
<LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center">
<GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3" />
<div>
<h3 class="ma0 pa0 gh-members-list-name {{if (not member.name) "gh-members-name-noname"}}">{{this.displayName}}</h3>
{{#if this.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{this.email}}</p>
{{/if}}
<li class="gh-list-row gh-members-list-item" ...attributes>
<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" />
<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>
</div>
</LinkTo>
</LinkTo>
<LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not member.name) "gh-members-subscribed-noname"}}">
{{this.createdDate}} <span class="midgrey-l2">({{this.memberSince}})</span>
</LinkTo>
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
{{moment-format @member.createdAtUTC "MMM DD, YYYY"}} <span class="midgrey-l2">({{this.memberSince}})</span>
</LinkTo>
<LinkTo @route="member" @model={{this.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>
<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>
</li>