Rows Grouping (v2.3.0)

adapters.comment.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'https://api.github.com',
  namespace: 'repos/emberjs/ember.js/issues/13071/comments',
  query(store, b, query) {
    const url = `${this.get('host')}/${this.get('namespace')}`;
    return this.ajax(url, 'GET', {data: query}); 
  }
});

components.comment-details.js

import Ember from 'ember';

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

components.expand-toggle.js

import layout from '../templates/components/expand-toggle';

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

components.grouping-row.js

import Ember from 'ember';
import DefaultComponent from './models-table/row-group-toggle';

export default DefaultComponent.extend({
  classNames: ['grouping-cell']
});

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();
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

controllers.index.js

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

export default Ember.Controller.extend({
  themeInstance: Theme.create({sortGroupedPropertyBtn: 'btn btn-link'}),
  displayGroupedValueAs: Ember.computed('displayGroupedValueAsToggle', function () {
    return this.get('displayGroupedValueAsToggle') ? 'row' : 'column';
  }),
  currentGroupingPropertyName : 'createdDay',
  dataGroupProperties: [{value: 'user.login', label: 'User'}, {value: 'createdDay', label: 'Created Day'}],
  displayGroupedValueAsToggle: false,
  columns: [
    {
      component: 'select-toggle',
      useFilter: false,
      mayBeHidden: false
    },
    {
      component: 'expand-toggle',
      useFilter: false,
      mayBeHidden: false
    },
    {propertyName: 'id'},
    {propertyName: 'user.login', title: 'User'},
    {propertyName: 'created_at'},
    {propertyName: 'updated_at'}
  ]
});

models.comment.js

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

export default Model.extend({
  url: attr('string'),
	html_url: attr('string'),
	issue_url: attr('string'),
	user: belongsTo('user'),
	created_at: attr('string'),
	updated_at: attr('string'),
	author_association: attr('string'),
	body: attr('string'),
  createdDay: Ember.computed('created_at', function () {
    const d = new Date(this.get('created_at'));
    let month = d.getMonth();
    month = (month < 10 ? '0': '') + month;
    let day = d.getDate();
    day = (day < 10 ? '0' : '') + day;
    return `${d.getFullYear()}-${month}-${day}`;
  })
});

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('comment', {per_page: 100});
  }
});

serializers.comment.js

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

export default DS.JSONAPISerializer.extend({
  _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: 'comment',
          attributes: item,
          relationships: {
          	user: {
              data: { id: item.user.id, type: 'user' }
            }
          }
        };
        included.pushObjects(this._mapIncluded(item.user, 'user'));
        return itemData;
      })
    };
    newPayload.included = included;
    console.log(newPayload);
    return newPayload;
  }
});

styles.app.css

.models-table-clear {
  margin-bottom: 20px;
}

.grouping-cell {
  min-width: 240px;
}

templates.application.hbs

<div class="container">
	<h1>{{appName}}</h1>
	{{outlet}}
</div>

templates.components.comment-details.hbs

<p><a href={{record.user.html_url}}><img src={{record.user.avatar_url}} alt={{record.user.login}} style="width:40px" > {{record.user.login}}</a></p>
{{markdown-to-html record.body}}

templates.components.expand-toggle.hbs

{{#if isExpanded}}
  <a href="#" {{action "collapseRow" index record bubbles=false}} class={{themeInstance.collapseRow}}><i class="{{themeInstance.collapse-row}}"></i></a>
{{else}}
  <a href="#" {{action "expandRow" index record bubbles=false}} class={{themeInstance.expandRow}}><i class="{{themeInstance.expand-row}}"></i></a>
{{/if}}
{{yield}}

templates.components.grouping-row.hbs

<p>{{currentGroupingPropertyName}}: {{groupedValue}} ({{visibleGroupedItems.length}} / {{groupedItems.length}})</p>
<div class="btn-group"><button class="btn" {{action "toggleGroupedRows" bubbles=false}}><i class="glyphicon glyphicon-resize-full"></i>/<i class="glyphicon glyphicon-resize-small"></i></button>
<button class="btn" {{action "toggleGroupedRowsExpands" bubbles=false}}><i class={{themeInstance.expand-row}}></i>/<i class={{themeInstance.collapse-row}}></i> ({{expandedGroupedItems.length}})</button>
<button class="btn" {{action "toggleGroupedRowsSelection" bubbles=false}}><i class={{themeInstance.select-row}}></i>/<i class={{themeInstance.deselect-row}}></i> ({{selectedGroupedItems.length}})</button></div>

templates.components.select-toggle.hbs

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

templates.index.hbs

<p>{{input type="checkbox" name="displayGroupedValueAs" checked=displayGroupedValueAsToggle}} Grouped value will be shown as row above grouped rows</p>
{{models-table
	themeInstance=themeInstance
	data=model
  columns=columns
  useDataGrouping=true
  pageSize=25
  multipleExpand=true
  multipleSelect=true
  showGlobalFilter=false
  groupingRowComponent=(component "grouping-row")
  expandedRowComponent=(component "comment-details")
  displayGroupedValueAs=displayGroupedValueAs
  dataGroupProperties=dataGroupProperties
  currentGroupingPropertyName=currentGroupingPropertyName
}}

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"
  }
}