Converted <GhPostsListItem> to glimmer component

no issue

- moved tag name and classes into template
- updated backing class to native class syntax
This commit is contained in:
Kevin Ansfield 2020-07-01 18:39:03 +01:00
parent 1f87c59055
commit ec925a60b0
2 changed files with 65 additions and 69 deletions

View File

@ -1,70 +1,72 @@
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-featured" @title="Edit this post">
{{#if @post.isFeatured}}
<span data-tooltip="Featured" class="dib pl1 pr1 nr1 nl1">{{svg-jar "star-filled" class="fill-blue w3 h3"}}</span>
{{/if}}
</LinkTo>
<li class="gh-list-row gh-posts-list-item" ...attributes>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-featured" @title="Edit this post">
{{#if @post.isFeatured}}
<span data-tooltip="Featured" class="dib pl1 pr1 nr1 nl1">{{svg-jar "star-filled" class="fill-blue w3 h3"}}</span>
{{/if}}
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-title" @title="Edit this post">
<h3 class="gh-content-entry-title">
{{@post.title}}
</h3>
<p>
<span class="gh-content-entry-meta">
By <span class="midgrey-l2 fw5">{{this.authorNames}}</span>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-title" @title="Edit this post">
<h3 class="gh-content-entry-title">
{{@post.title}}
</h3>
<p>
<span class="gh-content-entry-meta">
By <span class="midgrey-l2 fw5">{{this.authorNames}}</span>
{{#if @post.primaryTag}}
in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
{{/if}}
{{#if @post.primaryTag}}
in <span class="midgrey-l2 fw5">{{@post.primaryTag.name}}</span>
{{/if}}
{{#if @post.isScheduled}}
<span class="gh-schedule-time">Will be published and sent {{gh-format-post-time @post.publishedAtUTC scheduled=true}}</span>
{{/if}}
</span>
</p>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status" @title="Edit this post">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-schedule-time">Will be published and sent {{gh-format-post-time @post.publishedAtUTC scheduled=true}}</span>
<span class="gh-content-status-draft gh-badge nowrap">
Scheduled
</span>
{{/if}}
</span>
</p>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-status" @title="Edit this post">
<div class="flex items-center">
{{#if @post.isScheduled}}
<span class="gh-content-status-draft gh-badge nowrap">
Scheduled
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-purple nowrap">
Draft
</span>
{{/if}}
{{#if @post.isDraft}}
<span class="gh-content-status-draft gh-badge gh-badge-purple nowrap">
Draft
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap" title="Post has been sent by email">
Published
</span>
{{/if}}
{{#if @post.isPublished}}
<span class="gh-content-status-published nowrap" title="Post has been sent by email">
Published
</span>
{{/if}}
{{#if this.session.user.isOwnerOrAdmin}}
{{#if (or @post.email (and @post.isScheduled @post.sendEmailWhenPublished))}}
{{#if (eq @post.email.status "failed")}}
<span data-tooltip="Failed to send post by email" class="gh-content-status-emailed error">
{{svg-jar "send-email" class="stroke-red"}}
</span>
{{else}}
{{#if @post.isScheduled}}
<span data-tooltip="To be sent by email" class="gh-content-status-emailed scheduled">
{{svg-jar "send-email" class="stroke-green-d2"}}
{{#if this.session.user.isOwnerOrAdmin}}
{{#if (or @post.email (and @post.isScheduled @post.sendEmailWhenPublished))}}
{{#if (eq @post.email.status "failed")}}
<span data-tooltip="Failed to send post by email" class="gh-content-status-emailed error">
{{svg-jar "send-email" class="stroke-red"}}
</span>
{{else}}
<span data-tooltip="Sent by email" class="gh-content-status-emailed">
{{svg-jar "send-email" class="stroke-midgrey"}}
</span>
{{#if @post.isScheduled}}
<span data-tooltip="To be sent by email" class="gh-content-status-emailed scheduled">
{{svg-jar "send-email" class="stroke-green-d2"}}
</span>
{{else}}
<span data-tooltip="Sent by email" class="gh-content-status-emailed">
{{svg-jar "send-email" class="stroke-midgrey"}}
</span>
{{/if}}
{{/if}}
{{/if}}
{{/if}}
{{/if}}
</div>
</LinkTo>
</div>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-updated" @title="Edit this post">
<span class="nowrap">{{gh-format-post-time @post.updatedAtUTC draft=true}}</span>
</LinkTo>
<LinkTo @route="editor.edit" @models={{array @post.displayName @post.id}} class="permalink gh-list-data gh-post-list-updated" @title="Edit this post">
<span class="nowrap">{{gh-format-post-time @post.updatedAtUTC draft=true}}</span>
</LinkTo>
</li>

View File

@ -1,16 +1,10 @@
import Component from '@ember/component';
import {computed} from '@ember/object';
import Component from '@glimmer/component';
import {inject as service} from '@ember/service';
export default Component.extend({
session: service(),
export default class GhPostsListItemComponent extends Component {
@service session;
tagName: 'li',
classNames: ['gh-list-row', 'gh-posts-list-item'],
authorNames: computed('post.authors.[]', function () {
let authors = this.get('post.authors');
return authors.map(author => author.get('name') || author.get('email')).join(', ');
})
});
get authorNames() {
return this.args.post.authors.map(author => author.name || author.email).join(', ');
}
}