Selection Modal DDAU

components.selection-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  isSelectedAll: false,
  isIndeterminate: false,
  
  didReceiveAttrs(...args) {
    this._super(...args);
    this.updateSelectAllState();
  },
  
  updateSelectAllState() {
  	const options = this.get('options');
    const selectedOptions = options.filterBy('isSelected');

    if (selectedOptions.length === options.length) {
      this.set('isSelectedAll', true);
      this.set('isIndeterminate', false);
    } else if (selectedOptions.length === 0) {
      this.set('isSelectedAll', false);
      this.set('isIndeterminate', false);
    } else {
      this.set('isSelectedAll', false);
      this.set('isIndeterminate', true);
    }
	},
  
  isSelectedAllDidChange: Ember.observer('isSelectedAll', function() {
  	console.log('isSelectedAll changed to', this.get('isSelectedAll'));
  }),
  
  actions: {
    selectAllDidChange(e) {
      const shouldSelectAll = e.target.checked;
      this.get('options').setEach('isSelected', shouldSelectAll);
    	this.updateSelectAllState();
  	},
    
    optionDidChange(option, e) {
      option.set('isSelected', e.target.checked);
      this.updateSelectAllState();
  	}
  }
});

components.selection-row.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['form-row', 'selection-row'],
  classNameBindings: ['isDisabled:selection-row--is-disabled'],
  option: null
});

components.sq-form-checkbox.js

import Ember from 'ember';

export default Ember.Component.extend({
  autofocus: false,
  isIndeterminate: Ember.computed.alias('indeterminate'),
  isDisabled: Ember.computed.alias('disabled'),
  isHorizontal: false,
  tagName: 'label',
  classNames: ['form-checkbox'],
  classNameBindings: [
    'isDisabled:form-checkbox--is-disabled',
    'isHorizontal:form-checkbox--horizontal',
    'isIndeterminate:form-checkbox--indeterminate'
  ],

  change(e) {
    this.sendAction('action', e.target.checked);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  options: [
    Ember.Object.create({
      label: 'First',
      isSelected: false
    }),
    Ember.Object.create({
      label: 'Second',
      isSelected: true
    }),
    Ember.Object.create({
      label: 'Third',
      isSelected: true
    })
  ]
});

helpers.not.js

import Ember from 'ember';

export function not(params/*, hash*/) {
  return !params[0];
}

export default Ember.Helper.helper(not);

styles.app.css

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

.form-checkbox {
  display: flex;
  margin-bottom: 8px;
}

.form-checkbox__content {
  flex: none;
  position: relative;
  border: 1px solid black;
  border-radius: 4px;
  display: inline-block;
  height: 16px;
  margin-right: 8px;
  width: 16px;
  cursor: pointer;
  background: white;
}

.form-checkbox__input {
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

.form-checkbox__check {
  position: absolute;
  left: 5px;
  top: -1px;
  border: 2px solid blue;
  border-width: 0 2px 2px 0;
  display: none;
  height: 11px;
  width: 6px;
  transform: rotate(45deg);
}

.form-checkbox__input:checked + .form-checkbox__check {
  display: block;
}

.form-checkbox__text {
  cursor: pointer;
}

.form-checkbox__check--indeterminate {
  height: 2px;
  width: 12px;
  left: 1px;
  top: 6px;
  border: 1px solid blue;
  transform: none;
}

.form-checkbox--indeterminate .form-checkbox__check--indeterminate {
  display: block; 
}

templates.application.hbs

{{selection-modal options=options}}

templates.components.selection-modal.hbs

{{sq-form-checkbox class="selection-modal__list__header__checkbox"
                   label="Select All (via sq-form-checkbox)"
                   isIndeterminate=isIndeterminate
                   checked=(readonly isSelectedAll)
                   change=(action "selectAllDidChange")}}

<hr>

{{#each options as |option i|}}
  {{selection-row option=option
                  class=(concat "row-" i)
                  change=(action "optionDidChange" option)}}
{{/each}}

templates.components.selection-row.hbs

{{sq-form-checkbox class="selection-row__form-checkbox"
                   label=option.label
                   labelSecondary=option.labelSecondary
                   disabled=option.isDisabled
                   checked=option.isSelected
                   class="select-all-checkbox"}}
{{#if option.labelTertiary}}
  <div class="selection-row__label-tertiary">{{option.labelTertiary}}</div>
{{/if}}

templates.components.sq-form-checkbox.hbs

<div class="form-checkbox__content">
  {{input type="checkbox"
          class="form-checkbox__input"
          disabled=disabled
          data-test-form-checkbox=label
          checked=checked}}
  <div class="form-checkbox__check {{if isIndeterminate "form-checkbox__check--indeterminate"}}"></div>
</div>
<div class="form-checkbox__text">
  {{label}}
  {{#if labelSecondary}}
    <span class="form-helptext form-helptext--checksecondary">{{labelSecondary}}</span>
  {{/if}}
  {{yield}}
</div>

tests.acceptance.my-acceptance-test.js

import { test, skip } from 'qunit';
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

moduleForAcceptance('Multi Select');

test('with sq-form-checkbox', function(assert) {
  var checkboxSelector = '.selection-modal__list__header__checkbox';
  var selectAllInputSelector = checkboxSelector + ' .form-checkbox__input';
  var checkboxInderminateSelector = '.selection-modal__list__header__checkbox.form-checkbox--indeterminate';
  var selectAllInputCheckedSelector = checkboxSelector + ' .form-checkbox__input:checked';
  var indeterminateCheckSelector = checkboxSelector + ' .form-checkbox__check--indeterminate';
  var option1CheckedSelector = '.row-0 .form-checkbox__input:checked';
  var option2CheckedSelector = '.row-1 .form-checkbox__input:checked';
  var option3CheckedSelector = '.row-2 .form-checkbox__input:checked';
  
  visit('/');

  andThen(function() {
    assert.ok(document.querySelector(checkboxInderminateSelector), 'Select All is inderminate');
    assert.ok(document.querySelector(indeterminateCheckSelector), 'Select All check is indeterminate');
    assert.notOk(document.querySelector(option1CheckedSelector), 'Option 1 is not checked');
    assert.ok(document.querySelector(option2CheckedSelector), 'Option 2 is checked');
    assert.ok(document.querySelector(option3CheckedSelector), 'Option 1 is checked');
  });
  
  click(selectAllInputSelector);
  
  andThen(function() {
    assert.ok(document.querySelector(selectAllInputCheckedSelector), 'Select All is checked');
    assert.notOk(document.querySelector(indeterminateCheckSelector), 'Select All check is not indeterminate');
    assert.ok(document.querySelector(option1CheckedSelector), 'Option 1 is checked');
    assert.ok(document.querySelector(option2CheckedSelector), 'Option 2 is checked');
    assert.ok(document.querySelector(option3CheckedSelector), 'Option 3 is checked');
  });
  
  click(selectAllInputSelector);
  
  andThen(function() {
    assert.notOk(document.querySelector(selectAllInputCheckedSelector), 'Select All is not checked');
    assert.notOk(document.querySelector(indeterminateCheckSelector), 'Select All check is not indeterminate');
    assert.notOk(document.querySelector(option1CheckedSelector), 'Option 1 is not checked');
    assert.notOk(document.querySelector(option2CheckedSelector), 'Option 2 is not checked');
    assert.notOk(document.querySelector(option3CheckedSelector), 'Option 3 is not checked');
  });
});

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.module-for-acceptance.js

import { module } from 'qunit';
import Ember from 'ember';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';

const { RSVP: { Promise } } = Ember;

export default function(name, options = {}) {
  module(name, {
    beforeEach() {
      this.application = startApp();

      if (options.beforeEach) {
        return options.beforeEach.apply(this, arguments);
      }
    },

    afterEach() {
      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
      return Promise.resolve(afterEach).then(() => destroyApp(this.application));
    }
  });
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

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

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.13.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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}