Entity Card

components.cards.actions-menu.js

import Ember from 'ember';

export const actionTypes = {
  bookmark: 'bookmark',
  share: 'share',
  markAsDone: 'markAsDone',
  custom: 'custom'
};

export const apiActionTypes = {
  bookmark: 'BOOKMARK',
  share: 'SHARE',
  markAsDone: 'MARK_AS_DONE',
  custom: null
}

const actionComponentMap = {
  share: 'cards/actions/share-action',
  bookmark: 'cards/actions/bookmark-action',
  markAsDone: 'cards/actions/mark-done-action',
};

export default Ember.Component.extend({  
  classNames: ['actions-menu'],

  order: undefined,
  showMore: false,

  orderedActions: Ember.computed('entity.actions', 'order', function(actionType) {
    return this._getOrdererdActions(this.get('order'), this.get('entity.actions'));
  }),

  _getOrdererdActions(orderConfig, entityActions) {
    return orderConfig.reduce((accum, item) => {
      const apiAction = apiActionTypes[item];
      if (Ember.isArray(item)) {
        const moreActions = this._getOrdererdActions(item, entityActions);
        if (moreActions.length) {
				  accum.push({
            isMore: true, 
            actions: moreActions
          });
        }
      } else if (entityActions.indexOf(apiAction) > -1 || apiAction === null) {
        const componentName = actionComponentMap[item];
        if (componentName) {
      	  accum.push({
            componentName, 
            actionType: item
          });
        }
      }
      
      return accum;
    }, []);
  },
  
  actions: {
    toggleMore() {
       this.toggleProperty('showMore');
    },
    
    handleItemAction(actionType, ...params) {
      Ember.tryInvoke(this, `on${Ember.String.classify(actionType)}`, params); 
    }
  }
});

components.cards.actions.bookmark-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',

  actions: {
    bookmark() {
      Ember.tryInvoke(this, 'onAction', ['bookmark']);
    }
  }
});

components.cards.actions.mark-done-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',

  actions: {
    bookmark() {
      Ember.tryInvoke(this, 'onAction', ['markAsDone']);
    }
  }
});

components.cards.actions.share-action.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  
  actions: {
    share() {
      Ember.tryInvoke(this, 'onAction', ['share']);
    }
  }
});

components.cards.content.entity-byline.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.content.entity-type.js

import Ember from 'ember';

export default Ember.Component.extend({
  entityLabels: {
    course: 'COURSE',
    video: 'VIDEO',
    learningPath: 'LEARNING PATH'
  }
});

components.cards.feed-card.body-block.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.cards.feed-card.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['feed-card'],

  entity: undefined,
});

components.cards.feed-card.meta-block.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.consistent-entity.js

import Ember from 'ember';


export default Ember.Component.extend({
  tagName: '',
  entity: undefined,
  
  actionOptions: undefined,

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

components.search.result-card.js

import Ember from 'ember';
import { actionTypes } from '../cards/actions-menu';

export default Ember.Component.extend({
  actionsOrder: [
    actionTypes.bookmark,
    actionTypes.share,
    [
      actionTypes.markAsDone
    ]
  ],
  
  actions: {
    didBookmark() {
     // console.log('result-card bookmark', ...arguments); 
    },
    
    didShare() {
      //console.log('result-card share', ...arguments); 
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({    
  entities: [
    {
    	title: 'Decision-Making Strategies',
      contentType: 'course',
    	actions: ['BOOKMARK', 'SHARE'],
      authors: [{ name: 'Todd Rodgers' }]
  	},
    {
    	title: 'HTML resources',
      contentType: 'video',
    	actions: ['BOOKMARK', 'MARK_AS_DONE'],
      authors: [{ name: 'Todd Rodgers' }],
      parent: {
        title: 'How to do the things you want' 
      }
  	},
    {
    	title: 'Become a Customer Service Specialist',
      contentType: 'learningPath',
    	actions: ['SHARE'],
  	},
  ]
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('entity');
});

export default Router;

routes.entity.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.feed-card {
  display: flex;
  margin-bottom: 16px;
  max-width: 400px;
}

.feed-card__title {
  margin: 0;
  font-size: 1rem;
}

.feed-card__media {
  flex: 0 0 auto;
  width: 100px;
  height: 64px;
  background-color: #ccc;
  margin-right: 16px;
}

.feed-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feed-card__body-footer {
  display: flex;
  justify-content: space-between;
}

.feed-card__label,
.feed-card__content,
.feed-card__meta {
  font-size: .85rem;
}

.actions-menu,
.actions-menu__more-menu {
  list-style-type: none;
  margin: 0;
}

.actions-menu__item {
	margin: 0;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.actions-menu__more-menu {
  position: absolute;
  right: 0;
}

  
  
  
  
  
  
  
  
  
  
  
 
 

templates.application.hbs

<h1>Entity Card</h1>

{{#each entities as |entity|}}
  {{search/result-card entity=entity}}
{{/each}}

templates.components.cards.actions-menu.hbs

{{#each orderedActions as |actionArgs|}}
  {{#if actionArgs.isMore}}
    <li class="actions-menu__item">
      <button {{action "toggleMore"}}>More</button>
      {{#if showMore}}
        <ul class="actions-menu__more-menu">
          {{#each actionArgs.actions as |moreActionArgs|}}
            {{component moreActionArgs.componentName
              class="actions-menu__item"
              entity=entity
              onAction=(action "handleItemAction")}}
          {{/each}}
        </ul>
      {{/if}}
    </li>
  {{else}}
   {{component actionArgs.componentName
     class="actions-menu__item"
     entity=entity
     onAction=(action "handleItemAction")}}
  {{/if}}
{{/each}}

templates.components.cards.actions.bookmark-action.hbs

<button {{action "bookmark"}}>Bookmark</button>

templates.components.cards.actions.mark-done-action.hbs

<button {{action "markAsDone"}}>Mark As Done</button>

templates.components.cards.actions.share-action.hbs

<button {{action "share"}}>Share</button>

templates.components.cards.content.entity-byline.hbs

By: {{authors.0.name}}

templates.components.cards.content.entity-parent.hbs

From: {{parent.title}}

templates.components.cards.content.entity-type.hbs

{{get entityLabels entityType}}

templates.components.cards.feed-card.body-block.hbs

{{#if entity.parent}}
  {{cards/content/entity-parent
    parent=entity.parent}}
{{else if entity.authors.length}}
  {{cards/content/entity-byline
  	authors=entity.authors}}
{{/if}}

templates.components.cards.feed-card.hbs

<div class="feed-card__media">{{yield (hash isMedia=true)}}</div>
<div class="feed-card__body">
  <div class="feed-card__body-main">
    <div class="feed-card__label">{{yield (hash isLabel=true)}}</div>
    <h3 class="feed-card__title">{{yield (hash isTitle=true)}}</h3>
    <div class="feed-card__content">{{yield (hash isBody=true)}}</div>
  </div>
  <div class="feed-card__body-footer">
    <div class="feed-card__meta">{{yield (hash isMeta=true)}}</div>
    <div class="feed-card__actions">{{yield (hash isActions=true)}}</div>
  </div>
</div>

templates.components.cards.feed-card.meta-block.hbs

Meta

templates.components.consistent-entity.hbs

{{yield (hash
  entity=entity
  entityActions=entityActions
)}}

templates.components.search.result-card.hbs

{{#cards/feed-card 
  entity=entity
  as |cardArgs|
}}
  {{#if cardArgs.isLabel}}
    {{cards/content/entity-type entityType=entity.contentType}}
  {{/if}}

  {{#if cardArgs.isTitle}}
    {{link-to entity.title "entity"}}
  {{/if}}

  {{#if cardArgs.isBody}}
    {{cards/feed-card/body-block entity=entity}}
  {{/if}}    

  {{#if cardArgs.isMeta}}
    {{cards/feed-card/meta-block entity=entity}}
  {{/if}}

  {{#if cardArgs.isActions}}
    {{cards/actions-menu
      order=actionsOrder
      entity=entity
      onBookmark=(action "didBookmark")
      onShare=(action "didShare")}}
  {{/if}}
{{/cards/feed-card}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.10.0"
  }
}