Skip to content

Instantly share code, notes, and snippets.

@theoldcounty

theoldcounty/components.checkbox-group.js

Last active October 3, 2018 11:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save theoldcounty/f28edbf72193427c2a527e51d57e759f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save theoldcounty/f28edbf72193427c2a527e51d57e759f to your computer and use it in GitHub Desktop.
Download ZIP
New Twiddle
Raw
components.checkbox-group.js
import Ember from 'ember';
export default Ember.Component.extend({
});
Raw
components.wrapping-component.js
import Component from '@ember/component';
import { action, computed } from '@ember-decorators/object';
import { check } from 'twiddle/utils/tree-helpers';
export default class extends Component {
selectedItems = [];
options = [{
id: 1,
label: 'burger',
checked: false,
children: [{
id: 3,
label: 'tomato',
checked: false
}, {
id: 4,
label: 'lettus',
checked: false
}, {
id: 5,
label: 'pickle',
checked: false
}]
}, {
id: 2,
label: 'kebab',
checked: false,
children: [{
id: 6,
label: 'ketchup',
checked: false
}, {
id: 7,
label: 'chilli',
checked: false
}]
}, {
id: 8,
label: 'coffee maker',
checked: false,
children: [{
id: 9,
label: 'filter',
checked: false
}, {
id: 10,
label: 'grounds',
checked: false
}]
}];
@action
toggleChecked(item, event) {
console.log(item);
console.log(this.get('options'));
const options = this.get('options');
const copied = Ember.copy(options, true);
const groups = [];
groups.push(copied);
copied.forEach(p => {
groups.push(p.children);
});
console.log(groups);
groups.forEach(group => {
const foundMember = group.find(member => member.id == item.id)
if(foundMember) {
foundMember.checked = !foundMember.checked;
} else {
group.forEach(member => member.checked = false);
}
});
// const newTree = check(this.options, item.id);
/*
let selected = event.target.checked;
if (selected) {
this.get('selectedItems').pushObject(item);
} else {
this.get('selectedItems').removeObject(item);
}
console.log("this.get('selectedItems')", this.get('selectedItems'));
*/
this.set('options', copied);
}
}
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
Raw
helpers.not.js
import Ember from 'ember';
export function not(params/*, hash*/) {
return !params[0];
}
export default Ember.Helper.helper(not);
Raw
styles.app.css
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.checkboxhandler{
position: relative;
margin-left: 10px;
margin-bottom:10px;
border: 1px solid grey;
}
Raw
templates.application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
<WrappingComponent as |options toggle|>
{{#each options as |item|}}
<CheckboxGroup @item={{item}} @onClick={{toggle}} />
{{/each}}
</WrappingComponent>
<br>
{{outlet}}
<br>
Raw
templates.components.checkbox-group.hbs
<div class="checkboxhandler">
<input
type="checkbox"
checked={{@item.checked}}
onclick={{action @onClick @item}}
>
<label>{{@item.label}} -- checked: {{@item.checked}}</label>
{{#if @item.children}}
{{#each @item.children as |child|}}
<CheckboxGroup @item={{child}} @onClick={{@onClick}} />
{{/each}}
{{/if}}
</div>
Raw
templates.components.wrapping-component.hbs
{{yield this.options (action this.toggleChecked)}}
Raw
tests.test-helper.js
import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';
let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));
start();
Raw
tests.unit.tree-helper-test.js
import { module, test, skip } from 'qunit';
import { check, didChange } from 'twiddle/utils/tree-helpers';
const options = [{
id: 1,
label: 'burger',
checked: false,
children: [{
id: 3,
label: 'tomato',
checked: false
}, {
id: 4,
label: 'lettus',
checked: false
}, {
id: 5,
label: 'pickle',
checked: false
}]
}, {
id: 2,
label: 'kebab',
checked: false,
children: [{
id: 6,
label: 'ketchup',
checked: false
}, {
id: 7,
label: 'chilli',
checked: false
}]
}];
module('utils:tree-helper | didChange', function() {
test('detects one level of change', function(assert) {
const a = { checked: true };
const b = { checked: false };
const result = didChange(a, b);
assert.ok(result);
});
test('detects a change in a child', function(assert) {
const a = { checked: false, children: [{ checked: true }] };
const b = { checked: false, children: [{ checked: false }] };
const result = didChange(a, b);
assert.ok(result);
});
test('detects a change on an array', function(assert) {
const a = [{ checked: true }, { checked: false }];
const b = [{ checked: true }, { checked: true }];
const result = didChange(a, b);
assert.ok(result);
});
});
module('utils:tree-helper | check', function() {
test('it checks the node', function(assert) {
const result = check(options, 1);
assert.ok(result[0].checked, 'burger is checked');
});
module('a sibling is checked', function(hooks) {
let tree;
hooks.beforeEach(function(assert) {
tree = check(options, 1);
assert.ok(tree[0].checked, 'burger is checked');
});
module('another sibling is checked', function(hooks) {
hooks.beforeEach(function(assert) {
tree = check(tree, 2);
});
test('the first sibling remains checked', function(assert) {
assert.ok(tree[0].checked, 'burger is checked');
});
});
module('and children are checked before checking the other sibling', function(hooks) {
hooks.beforeEach(function(assert) {
tree = check(tree, 3);
assert.ok(tree[0].children[0].checked, 'tomato is checked');
tree = check(tree, 2);
assert.ok(tree[1].checked, 'kebab is checked');
});
skip('unchecks the entire first tree', function(assert) {
assert.notOk(tree[0].checked, 'burger is not checked');
assert.notOk(tree[0].children[0].checked, 'tomato is not checked');
});
});
});
});
Raw
twiddle.json
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": true
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.1",
"ember-template-compiler": "3.4.1",
"ember-testing": "3.2.2"
},
"addons": {
"ember-decorators": "2.0.0"
}
}
Raw
utils.tree-helpers.js
const toggle = value => !value;
const disable = () => false;
// the roots / siblings are contained by arrays
export function check(tree, id, transform = toggle) {
if (tree === undefined) return undefined;
if (Array.isArray(tree)) {
return tree.map(t => check(t, id, transform));
}
if (tree.id === id || id === 'all') {
return checkNode(tree, id, transform);
}
if (tree.children) {
return checkChildren(tree, id, transform);
}
return tree;
}
/*
function selectOnlySubtree(tree, id, transform) {
return tree.map(subTree => {
const newTree = check(subTree, id, transform);
if (!newTree.children || (transform !== disable && didChange(newTree, subTree))) {
return newTree;
}
return disableTree(subTree);
});
}
function isTargetAtThisLevel(tree, id) {
return tree.map(t => t.id).includes(id);
}
*/
function checkNode(tree, id, transform) {
return {
...tree,
checked: transform(tree.checked),
children: disableTree(tree.children)
};
}
function disableTree(tree) {
return check(tree, 'all', disable);
}
function checkChildren(tree, id, transform) {
const newChildren = check(tree.children, id, transform);
const changed = didChange(tree.children, newChildren);
const checked = changed ? false : (
id === 'all' ? transform(tree.checked) : tree.checked
);
return {
...tree,
checked: checked,
children: check(tree.children, id, transform)
};
}
export function didChange(treeA, treeB) {
const rootsChanged = treeA.checked !== treeB.checked;
if (rootsChanged) return true;
if (Array.isArray(treeA) && Array.isArray(treeB)) {
return didChangeList(treeA, treeB);
}
if (treeA.children && treeB.children) {
return didChangeList(treeA.children, treeB.children);
}
return false;
}
function didChangeList(a, b) {
const compares = a.map((childA, index) => {
return didChange(childA, b[index]);
});
const nothingChanged = compares.every(v => v === false);
return !nothingChanged;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment