Ghost/ghost/admin/app/templates/staff/index.hbs
Kevin Ansfield 2231dd84c2 Migrated to <AngleBracketSyntax /> (#1460)
no issue

Ember is migrating to `<AngleBracketSyntax />` for component invocation, see https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md

We were in a half-way situation where some templates used angle bracket syntax in some places, this PR updates templates to use the syntax everywhere.

This simplifies the rules for what template code is referring to...

`<Component>` = a component
`{{helper}}` = a helper (or locally assigned handlebars variable)
`{{this.foo}}` = data on the template backing context (a component/controller)
`{{@foo}}` = a named argument passed into the component that the component backing class has not modified (note: this commit does not introduce any named arguments)

- ran codemod https://github.com/ember-codemods/ember-angle-brackets-codemod on the following directories:
  - `app/templates`
  - `lib/koenig-editor/addon/templates`
- removed positional params from components as angle bracket syntax does not support them
  - `gh-feature-flag`
  - `gh-tour-item`
  - `gh-cm-editor`
  - `gh-fullscreen-modal`
  - `gh-task-button`
- updates some code that was missed in 3c851293c1 to use explicit this
2020-01-16 15:14:03 +00:00

112 lines
5.7 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Staff users</h2>
{{!-- Do not show Invite user button to authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
<section class="view-actions">
<button class="gh-btn gh-btn-green" {{action "toggleInviteUserModal"}} ><span>Invite people</span></button>
</section>
{{/unless}}
</GhCanvasHeader>
{{#if this.showInviteUserModal}}
<GhFullscreenModal @modal="invite-new-user"
@close={{action "toggleInviteUserModal"}}
@modifier="action wide" />
{{/if}}
<section class="view-container gh-team">
{{!-- Show invited users to everyone except authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
{{#if this.invites}}
<section class="apps-grid-container gh-invited-users apps-first-header" data-test-invited-users>
<span class="apps-grid-title">Invited users</span>
<div class="apps-grid">
{{#each this.sortedInvites as |invite|}}
<GhUserInvited @invite={{invite}} @reload={{route-action "reload"}} as |component|>
<div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
<div class="apps-card-meta">
<h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
<p class="apps-card-app-desc">
{{#if invite.pending}}
<span class="description-error">
Invitation not sent - please try again
</span>
{{else}}
<span class="description" data-test-invite-description>
Invitation sent: {{component.createdAt}},
{{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
</span>
{{/if}}
</p>
</div>
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{#if component.isSending}}
<span>Sending Invite...</span>
{{else}}
<a class="apps-configured-action red-hover" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
Revoke
</a>
<a class="apps-configured-action green-hover" href="#resend" {{action "resend" target=component}} data-test-resend-button>
Resend
</a>
<span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
{{/if}}
</div>
</div>
</article>
</div>
</GhUserInvited>
{{/each}}
</div>
</section>
{{/if}}
{{/unless}}
<section class="apps-grid-container gh-active-users {{unless this.invites "apps-first-header"}}" data-test-active-users>
<span class="apps-grid-title">Active users</span>
<div class="apps-grid">
{{!-- For authors/contributors, only show their own user --}}
{{#if this.currentUser.isAuthorOrContributor}}
<GhUserActive @user={{this.currentUser}} as |component|>
<GhUserListItem @user={{this.currentUser}} @component={{component}} />
</GhUserActive>
{{else}}
{{#vertical-collection this.sortedActiveUsers
key="id"
containerSelector=".gh-main"
estimateHeight=75
as |user|
}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/vertical-collection}}
{{/if}}
</div>
</section>
</section>
{{!-- Don't show if we have no suspended users or logged in as an author --}}
{{#if (and this.suspendedUsers (not this.currentUser.isAuthorOrContributor))}}
<section class="apps-grid-container gh-active-users" data-test-suspended-users>
<span class="apps-grid-title">Suspended users</span>
<div class="apps-grid">
{{#each this.sortedSuspendedUsers key="id" as |user|}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/each}}
</div>
</section>
{{/if}}
</section>