How to use ember-can - 10 common examples

export default Component.extend(EmberKeyboardMixin, {
  classNames: ['task-assignment'],

  currentUser: service(),
  store: service(),
  taskAssignment: service(),

  isAssigning: false,
  canTriggerAssignment: null,
  deferredRendering: null,
  task: null,
  taskUser: null,
  users: null,

  // auto-assigns 'task' property from component as ability 'model'
  ability: EmberCan.computed.ability('task'),
  canAssign: alias('ability.canAssign'),
  currentUserId: alias('currentUser.user.id'),
  taskUserId: alias('taskUser.id'),

  assignedToSelf: computed('currentUserId', 'taskUser.id', function() {
    return isEqual(get(this, 'taskUser.id'), get(this, 'currentUserId'));
  }),

  init() {
    this._super(...arguments);

    set(this, 'keyboardActivated', true);
  },

  // TODO: this updates selection when it changes. However, it updates while
  // the change is still processing, and rolls back if it fails.

flashMessages: service(),
  session: service(),
  store: service(),

  bound: false,
  editingDetails: false,
  hasHovered: false,
  hovering: false,
  shouldShowUsers: false,
  task: null,
  taskUser: null,
  users: null,

  // auto-assigns 'task' property from component as ability 'model'
  ability: EmberCan.computed.ability('task'),
  canArchive: alias('ability.canArchive'),
  canReposition: alias('ability.canReposition'),
  isLoading: alias('task.isLoading'),
  taskSkills: mapBy('task.taskSkills', 'skill'),

  init() {
    this._super(...arguments);
  },

  /**
  For usage with data attribute bindings. Needs to be a function because it
  needs to send 'true' and 'false' strings.
  */
  'data-can-reposition': computed('canReposition', function() {
    let canReposition = get(this, 'canReposition');
    return canReposition ? 'true' : 'false';

import Component from '@ember/component';
import { alias } from '@ember/object/computed';
import { get } from '@ember/object';
import EmberCan from 'ember-can';

export default Component.extend({
  classNames: ['archive-task'],

  // auto-assigns 'task' property from component as ability 'model'
  ability: EmberCan.computed.ability('task'),
  canArchive: alias('ability.canArchive'),

  actions: {
    archiveTask() {
      if (window.confirm(`Are you sure you want to archive this task? Archiving this task will remove it from your ${get(this, 'task.taskList.title')} task list.`)) {
        get(this, 'archiveTask')();
      }
    }
  }
});

import { Ability } from 'ember-can';
import { ability } from 'ember-can/computed';
import { get, computed } from '@ember/object';

const hasPermission = permission => (
  computed('membership.permissions.@each.hasDirtyAttributes', function() {
    return this._isGroupMember() && get(this, 'membership').hasPermission(permission);
  }).readOnly()
);

export default Ability.extend({
  membership: null,
  postAbility: ability('post', 'post'),
  commentAbility: ability('comment', 'comment'),

  canViewDashboard: computed('membership', function() {
    const isMember = this._isGroupMember();
    return isMember && (get(get(this, 'membership'), 'permissions.length') > 0);
  }).readOnly(),

  canManageEverything: hasPermission('owner'),
  canManageMembers: hasPermission('members'),
  canManageLeaders: hasPermission('leaders'),
  canManageSettings: hasPermission('community'),
  canManageReports: hasPermission('content'),
  canManageTickets: hasPermission('tickets'),

  canWritePost: computed('model', 'membership', function() {
    // If this is a restricted group, then posting is limited to leaders

import { Ability } from 'ember-can';
import { ability } from 'ember-can/computed';
import { get, computed } from '@ember/object';

const hasPermission = permission => (
  computed('membership.permissions.@each.hasDirtyAttributes', function() {
    return this._isGroupMember() && get(this, 'membership').hasPermission(permission);
  }).readOnly()
);

export default Ability.extend({
  membership: null,
  postAbility: ability('post', 'post'),
  commentAbility: ability('comment', 'comment'),

  canViewDashboard: computed('membership', function() {
    const isMember = this._isGroupMember();
    return isMember && (get(get(this, 'membership'), 'permissions.length') > 0);
  }).readOnly(),

  canManageEverything: hasPermission('owner'),
  canManageMembers: hasPermission('members'),
  canManageLeaders: hasPermission('leaders'),
  canManageSettings: hasPermission('community'),
  canManageReports: hasPermission('content'),
  canManageTickets: hasPermission('tickets'),

  canWritePost: computed('model', 'membership', function() {
    // If this is a restricted group, then posting is limited to leaders
    const group = get(this, 'model');

import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import { Ability } from 'ember-can';

export default Ability.extend({
  session: service('session'),

  model: null,

  author: null,

  canWrite: computed("session.isAuthenticated", function() {
    return this.get("session.isAuthenticated");
  }),

  canEdit: computed("model.author", "session.isAuthenticated", function() {
    return this.get("session.isAuthenticated") && this.get("model.author") === this.get("session.user");
  }),

  canChangeAuthor: computed("model.author", "author.id", function() {
    return this.get("author") && this.get("model") && parseInt(this.get("author.id"), null) !== this.get("model.author");

import { Ability } from 'ember-can';

export default Ability.extend({
  isLoggedIn: function() {
    return this.session.get("isAuthenticated");
  }.checks("write post"),

  isAuthor: function(post) {
    return post.get("author") === this.session.get("user");
  }.checks("edit post")
});

author: 42,
  title: "Something"
});

let otherPost = Post.create({
  author: 99,
  title: "Something Else"
});

let bob = Person.create({
  id: 69,
  name: "Bob"
});

export default Controller.extend({
  ability:      computed.ability("post"),
  canWritePost: alias("ability.canWrite"),
  post: editablePost,

  bob: bob,
  foo: false,

  actions: {
    selectEditable: function() {
      this.set("post", editablePost);
    },
    selectOther:    function() {
      this.set("post", otherPost);
    }
  }
});

import { alias, and } from '@ember/object/computed';
import { inject as service } from '@ember/service';
import { ability } from 'ember-can/computed';

export default Component.extend({
  classNames: ['project-user-role-modal-container'],
  tagName: 'span',

  currentUser: service(),

  projectUser: null,
  save: null,
  selectedRole: null,
  showModal: false,

  ability: ability('project'),
  canManage: alias('ability.canManage'),
  demotionDisabled: and('canManage', 'isSelf'),
  user: alias('currentUser.user'),

  isSelf: computed('projectUser', 'user', function() {
    return get(this, 'projectUser.user.id') === get(this, 'user.id');
  }),

  init() {
    this._super(...arguments);
    let role = get(this, 'projectUser.role');
    set(this, 'selectedRole', role);
  }
});

import { Ability } from 'ember-can';
import { ability } from 'ember-can/computed';
import { get, computed } from '@ember/object';

const hasPermission = permission => (
  computed('membership.permissions.@each.hasDirtyAttributes', function() {
    return this._isGroupMember() && get(this, 'membership').hasPermission(permission);
  }).readOnly()
);

export default Ability.extend({
  membership: null,
  postAbility: ability('post', 'post'),
  commentAbility: ability('comment', 'comment'),

  canViewDashboard: computed('membership', function() {
    const isMember = this._isGroupMember();
    return isMember && (get(get(this, 'membership'), 'permissions.length') > 0);
  }).readOnly(),

  canManageEverything: hasPermission('owner'),
  canManageMembers: hasPermission('members'),
  canManageLeaders: hasPermission('leaders'),
  canManageSettings: hasPermission('community'),
  canManageReports: hasPermission('content'),
  canManageTickets: hasPermission('tickets'),