Inline edit and columns summary (v2.3.0)

adapters.comment.js

import DS from 'ember-data';
import Ember from 'ember';

export default DS.RESTAdapter.extend({
  host: 'https://api.github.com',
  namespace: 'repos/emberjs/ember.js/issues/13071/comments',
  token: '',
  username: '',
  query(store, b, query) {
    const url = `${this.get('host')}/${this.get('namespace')}`;
    const token = this.get('token');
    const username = this.get('username');
    return this.ajax(url, 'GET', {
      beforeSend (xhr) { 
        if (username && token) {
      		xhr.setRequestHeader("Authorization", "Basic " + btoa(`${username}:${token}`)); 
        }
    },
      data: query
    }); 
  },
  updateRecord() {
    return Ember.RSVP.Promise.resolve({meta: {}});
  }
});

adapters.issue.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'https://api.github.com',
  namespace: 'repos/emberjs/ember.js/issues',
  token: '',
  username: '',
  query(store, b, query) {
    const url = `${this.get('host')}/${this.get('namespace')}`;
    const token = this.get('token');
    const username = this.get('username');
    return this.ajax(url, 'GET', {
      beforeSend (xhr) { 
        if (username && token) {
      		xhr.setRequestHeader("Authorization", "Basic " + btoa(`${username}:${token}`)); 
        }
    },
      data: query
    }); 
  },
  updateRecord() {
    return Ember.RSVP.Promise.resolve({meta: {}});
  }
});

components.comments-edit.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    updateCommentsCount(newVal) {
      this.set('record.comments', Number(newVal));
    }
  }
});

components.comments-summary.js

import CellColumnSummary from './models-table/cell-column-summary';

export default CellColumnSummary.extend({
});

components.select-toggle.js

import Ember from 'ember';
import layout from '../templates/components/select-toggle';

export default Ember.Component.extend({
  layout,
  actions: {
    clickOnRow(index, record, event) {
      this.get('clickOnRow')(index, record);
      event.stopPropagation();
    }
  }
});

components.state-edit.js

import Ember from 'ember';
export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    this.set('options', ['open', 'closed']);
  }
});

components.type-summary.js

import Ember from 'ember';

function group(collection) {
  return Ember.computed(`${collection}.[]`, function() {
    const c = this.get(collection);
    return c ? c.reduce((result, item) => {
      if (!result[item]) {
        result[item] = 0;
      }
      result[item]++;
      return result;
    }, {}) : {};
  });
}

export default Ember.Component.extend({
  tagName: 'td',
  selectedGrouped: group('mappedSelectedItems'),
  dataGrouped: group('mappedData')
});

components.user-edit.js

import Ember from 'ember';
const {set} = Ember;
export default Ember.Component.extend({
  options: Ember.computed('users.[]', function () {
    const users = this.get('users');
    return users ? users.map(u => {
      return {label: u.get('login'), value: u.get()};
    }) : [];
  }),
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Inline edit and columns summary',
  token: Ember.computed.alias('commentsAdapter.token'),
  username: Ember.computed.alias('commentsAdapter.username')
});

controllers.index.js

import Ember from 'ember';
import Theme from '../themes/bootstrap3';

export default Ember.Controller.extend({
  allUsers: Ember.computed.mapBy('model', 'user'),
  users: Ember.computed.uniqBy('allUsers', 'id'),
  columns: [
    {
      component: 'select-toggle',
      useFilter: false,
      editable: false,
      mayBeHidden: false
    },
    {propertyName: 'type', editable: false, componentForFooterCell: 'type-summary'},
    {propertyName: 'user.login', title: 'Author', componentForEdit: 'user-edit'},
    {propertyName: 'state', componentForEdit: 'state-edit'},
    {propertyName: 'comments', componentForFooterCell: 'comments-summary', componentForEdit: 'comments-edit'},
    {propertyName: 'created_at', editable: false, disableFiltering: true},
    {propertyName: 'updated_at', editable: false, disableFiltering: true},
    {
      "title": "Edit",
      "component": "edit-row",
      "editable": false
    }
  ],
  actions: {
    onSaveRow(param) {
      return param.record.save();
    },

    onCancelRow( { record } ) {
      record.rollback();
      return true;
    }
  }
});

instance-initializers.inject.js

export function initialize(application) {
  application.inject('controller:application', 'commentsAdapter', 'adapter:comment');
};

export default {
  initialize,
  after: 'ember-data'
};

models.issue.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  number: attr('number'),
  title: attr('string'),
  state: attr('string'),
  comments: attr('number'),
  user: belongsTo('user'),
  type: attr('string'),
  labels: hasMany('label'),
	locked: attr('boolean'),
	assignee: belongsTo('user'),
	assignees: hasMany('user'),
	created_at: attr('date'),
	updated_at: attr('date'),
	closed_at: attr('date'),
	author_association: attr('string'),
	body: attr('string'),
  html_url: attr('string'),
  
  init() {
    this._super(...arguments);
    this.startTrack();
  }
});

models.label.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
	url: attr('string'),
	name: attr('string'),
	color: attr('string'),
  default: attr('boolean')
});

models.user.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  login: attr('string'),
	avatar_url: attr('string'),
	url: attr('string'),
	html_url: attr('string'),
	type: attr('string'),
	site_admin: attr('boolean')
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').query('issue', {per_page: 100});
  }
});

serializers.issue.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  pageSize: 10,
  _mapIncluded(data, type) {
    const clb = item => ({id: item.id, type, attributes: item});
    return Ember.isArray(data) ? data.map(clb) : clb(data);
  },
  
  normalizeQueryResponse(a, b, payload) {
    const included = [];
    const newPayload = {
    	data: payload.map(item => {
        const itemData = {
        	id: item.id,
          type: 'issue',
          attributes: item,
          relationships: {
            labels: {
              data: item.labels.map(label => ({type: 'label', id: label.id}))
            },
            user: {
              data: { id: item.user.id, type: 'user' }
            }
          }
        };
        included.pushObjects(this._mapIncluded(item.labels, 'label'));
        included.pushObject(this._mapIncluded(item.user, 'user'));
        itemData.attributes.type = item.pull_request ? 'Pull Request' : 'Issue';
        return itemData;
      })
    };
    newPayload.included = included;
    console.log(newPayload);
    return newPayload;
  }
});

templates.application.hbs

<div class="container">
	<h1>{{appName}}</h1>
  <form class="form-inline">
  	<div class="form-group">
      <label>Username:</label>
      {{input value=username class="form-control"}}
    </div>
    <div class="form-group">
      <label>Token:</label>
      {{input value=token class="form-control"}}
    </div>
  </form>
  <p>Use your own token (<a href="https://github.com/settings/tokens">settings.tokens</a>) if API-requests limit is reached.</p>
	{{outlet}}
</div>
<div id="ember-basic-dropdown-wormhole"></div>

templates.components.comments-edit.hbs

{{one-way-input record.comments update=(action "updateCommentsCount") class=themeInstance.input}}

templates.components.comments-summary.hbs

<p>All:</p>
<ul>
	<li>Sum: {{sumData}}</li>
	<li>Min: {{minData}}</li>
  <li>Max: {{maxData}}</li>
  <li>Avg: {{avgData}}</li>
</ul>
<p>Selected:</p>
<ul>
	<li>Sum: {{sumSelected}}</li>
	<li>Min: {{minSelected}}</li>
  <li>Max: {{maxSelected}}</li>
  <li>Avg: {{avgSelected}}</li>
</ul>

templates.components.select-toggle.hbs

<span class="{{if isSelected themeInstance.select-row themeInstance.deselect-row}}" onclick={{action "clickOnRow" index record}}></span>

templates.components.selected-user.hbs

{{option.login}}
{{yield}}

templates.components.state-edit.hbs

{{#power-select
	options=options
  selected=record.state
  onchange=(action (mut record.state))
	as |state|}}
	{{state}}
{{/power-select}}

templates.components.type-summary.hbs

<p>All:</p>
<ul>
	{{#each-in dataGrouped as |val count|}}
  	<li>{{val}}: {{count}}</li>
  {{/each-in}}
</ul>
<p>Selected:</p>
<ul>
	{{#each-in selectedGrouped as |val count|}}
  	<li>{{val}}: {{count}}</li>
  {{/each-in}}
</ul>

templates.components.user-edit.hbs

{{yield}}
{{#power-select
	options=users
  selected=record.user
  selectedItemComponent="selected-user"
  searchField="login"
  onchange=(action (mut record.user))
	as |user term|}}
	{{user.login}}
{{/power-select}}

templates.error.hbs

<p class="alert alert-danger">Rate-limit error appears. Use your own token.</p>

templates.index.hbs

{{models-table
	data=model
  columns=columns
  multipleSelect=true
  showGlobalFilter=false
  showColumnsDropdown=false
  columnComponents=(hash
    user-edit=(component
    	"user-edit"
      users=users
    )
    edit-row=(component
      "models-table/cell-edit-toggle" 
      saveRowAction=(action "onSaveRow") 
      cancelRowAction=(action "onCancelRow")
    )
   )
}}

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",
    "bs3css": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css",
    "bs3js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-models-table": "2.3.0",
    "ember-cli-showdown": "4.1.0",
    "ember-power-select": "2.0.0-beta.0",
    "ember-data-change-tracker": "0.7.2",
    "ember-one-way-controls": "3.0.1"
  }
}