CODEWITHSUNDEEP
ember.jsember-cli
dex07
dex07

Reputation: 135

Ember: How to add "else" to wrap component?

I have a component to hide some parts of design depending on user permissions.

Just hide is not a problem. Sometimes I need to display something when user has no access.

route template:

{{#restricted-access required-action="AddRoles"}}
    <button class="btn btn-success"  {{action 'add'}}>
        Add New Role
    </button>
{{else}}
    You can not add Roles
{{/restricted-access}}

component check code:

actionAllowed: function() {
    var permission = this.get('current.user.role.roleActionList');
    return permissions.filterProperty('code', this.get('required-action')).length > 0;
}.property('current.user.role.roleActionList.length')

component template:

{{#if actionAllowed}}
    {{yield}}
{{/if}}

I'm looking for something like

{{#if actionAllowed}}
    {{yield}}
{{else}}
    {{else yield}}
{{/if}}

Where I can add text that is defined in route template.

I guess I can do something like that:

{{#restricted-access required-action="AddRoles"}}
    {{#access-granted}}
        <button class="btn btn-success"  {{action 'add'}}>
            Add New Role
        </button>
    {{#access-granted}}
    {{#access-declined}}
        You can not add Roles
    {{/access-declined}}
{{/restricted-access}}

Actually I do not like this As I had to create additional components.

Is there any way to implement required functionality in one component?

Upvotes: 0

Views: 51

Answers (2)

organium
organium

Reputation: 59

Component should be agnostic to your controllers/models, it is more like display/action feature.

I'd suggest you to use controller method and if to check rights:

{{#if restriction.canAddroles}}
 ..actions...
{{else}}
  You can not add Roles
{{/if}}

restriction can be injected to needed controllers using initializers.

#... restriction class
export Ember.Object.create 
  canAddroles: ->
   @actionAllowed('addRoles')

  actionAllowed: ->
    # code from your post

I know it's more verbose because of if limits, but now your logic is stored in proper place and it's more testable.

Upvotes: 0

Jacob van Lingen
Jacob van Lingen

Reputation: 9537

As your else block is only a string, I would just pass a parameter with the else text:

{{#restricted-access required-action="AddRoles" noAccessText="You can not add Roles"}}
    <button class="btn btn-success"  {{action 'add'}}>
        Add New Role
    </button>
{{/restricted-access}}

Template component:

{{#if actionAllowed}}
    {{yield}}
{{else}}
    {{noAccessText}}
{{/if}}

Upvotes: 1

Related Questions