Context Menu Integration

adapters.github-repository.js

import GithubRepositoryAdapter from 'ember-data-github/adapters/github-repository';
import {resolve} from 'rsvp';

export default GithubRepositoryAdapter.extend({

  deleteRecord() {
    return resolve();
  }
  
});

components.models-table.themes.my-bs4.custom-row.js

import {computed, get} from '@ember/object';
import {inject as service} from '@ember/service';
import Row from 'ember-models-table/components/models-table/row';
import ContextMenuMixin from 'ember-context-menu';

export default Row.extend(ContextMenuMixin, {
  
  modalsManager: service(),
  
  contextItems: computed('isEditRow', function () {
    const self = this;
    const modalsManager = get(self, 'modalsManager');
    const common = [
      {
      	label: 'Delete',
        action() {
          return modalsManager
            .confirm({title: 'Please Confirm', body: 'Are you sure? Don\'t worry, nothing won\'t be deleted from Github'})
          	.then(() => get(self, 'record')
               .destroyRecord()
               .then(() => modalsManager.alert({
            			title: 'Simulation',
            			body: 'Deleted successfully'
          			})));
      	}
      }
    ];
    if (get(self, 'isEditRow')) {
      return [
        ...common, 
        {
          label: 'Cancel Edit',
          action (selection, details, event) {
            get(self, 'record').rollbackAttributes();
            self.send('cancelEditRow');
          }
        },
        {
          label: 'Save',
          action (selection, details, event) {
            get(self, 'record').save();
            self.send('saveRow');
          }
        }
      ];
    }
    return [
			...common,
    	{
        label: 'Edit',
        action (selection, details, event) {
          self.send('editRow');
        }
      }
  	]
  })
   
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  columns: [
    {propertyName: 'name'},
    {propertyName: 'language', filterWithSelect: true},
    {propertyName: 'createdAt'},
    {propertyName: 'openIssues'},
    {propertyName: 'size'}
  ]
});

initializers.emt.js

import MyBs4Theme from '../themes/my-bs4';

export function initialize(application) {
  application.register('emt-theme:my-bs4', MyBs4Theme, {singleton: false});
}

export default {
  name: 'emt',
  after: 'emt-themes',
  initialize
};

instance-initializers.emt.js

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', 'theme:my-bs4');
}

export default {
  name: 'emt',
  after: 'emt-inject',
  initialize
};

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').query('github-repository', {user: 'onechiporenko'});
  }
});

templates.application.hbs

<div class="container-fluid">
	{{outlet}}
</div>
{{context-menu}}
{{modals-container}}

templates.components.context-menu.hbs

{{! override to provide `renderInPlace=true`}}

{{#if isActive}}
  {{#ember-wormhole to="wormhole-context-menu" renderInPlace=true}}
    <div class="context-menu-container" style={{position}}>
      <ul class="context-menu {{if renderLeft "context-menu--left"}}">
        {{#each items as |item|}}
          {{context-menu-item item=item
                              amount=selection.length
                              itemIsDisabled=itemIsDisabled
                              clickAction=clickAction}}
        {{/each}}
      </ul>
    </div>
  {{/ember-wormhole}}
{{/if}}

templates.index.hbs

{{models-table data=model columns=columns}}

themes.my-bs4.js

import Bootstrap4Theme from './ember-bootstrap-v4';

export default Bootstrap4Theme.extend({
  components: {
    row: 'models-table/themes/my-bs4/custom-row'
  }
});

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
  	"FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "fa": "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-models-table": "2.9.0",
    "ember-context-menu": "0.4.3",
    "ember-bootstrap": "2.5.0",
    "ember-data-github": "0.8.1",
    "ember-bootstrap-modals-manager": "2.1.0"
  }
}