Skip to content

Instantly share code, notes, and snippets.

@aalasolutions-zz

aalasolutions-zz/controllers.application.js

Last active August 1, 2016 08:43
Show Gist options
  • Save aalasolutions-zz/22539ad04d436607d1f46a5ffdc95b0b to your computer and use it in GitHub Desktop.
Save aalasolutions-zz/22539ad04d436607d1f46a5ffdc95b0b to your computer and use it in GitHub Desktop.
Download ZIP
Multiche ckboxes
Raw
controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
acl2: {"carpet_design":{
"title":"Manage Carpet Designs",
"create":{"title":"Create","allowed":0},
"read":{"title":"View","allowed":1},
"update":{"title":"Edit","allowed":0},
"delete":{"title":"Delete","allowed":0},
"columns":{
"design_collection":{"title":"Design Collection","allowed":1},
"status":{"title":"Status","allowed":1}
}}},
actions: {
updateAllCheckValue(key, obj, event, c, f, g){
this.recursiveObjItr(obj, event);
},
updateCheckValue: function (action, key, value, nested) {
if (typeof nested === 'object') {
if (value[action]['allowed'] === 1) {
Ember.set(value[action], 'allowed', 0);
} else {
Ember.set(value[action], 'allowed', 1);
}
}
},
},
recursiveObjItr(obj, event){
for (var k in obj) {
if (typeof obj[k] === "object" && obj[k] !== null) {
this.recursiveObjItr(obj[k], event);
}
else {
if (obj.hasOwnProperty('allowed')) {
if (event.target.checked === true) {
console.log(`%c acl update to ${event.target.checked}`, 'background:#254;color:white;');
Ember.set(obj, 'allowed' , 1);
// obj['allowed'] = 1;
} else {
console.log(`%c acl update to ${event.target.checked}`, 'background:#254;color:yellow;');
Ember.set(obj, 'allowed' , 0);
// obj['allowed'] = 0;
}
}
}
}
},
});
Raw
helpers.is-equal.js
import Ember from 'ember';
export function isEqual([leftSide, rightSide]/*, hash*/) {
return leftSide === rightSide;
}
export default Ember.Helper.helper(isEqual);
Raw
templates.application.hbs
{{acl2.carpet_design.title}}<br>
Read {{acl2.carpet_design.read.allowed}} {{input type="checkbox" checked=acl2.carpet_design.read.allowed}}<br>
{{input type="checkbox" checked=acl2.carpet_design.read.allowed}}
<br>
{{#each-in acl2 as |key value|}}
<div class="row">
<h1> {{value.title}} </h1>
<div style="float: left;">
<input id="{{concat key '_selectall_' uniqueID }}"
onchange={{ action 'updateAllCheckValue' key value}} type="checkbox"
checked="{{temp}}"/>
</div>
<label for="{{concat key '_selectall' uniqueID }}" style="display: inline;">Check / Uncheck All</label>
</div>
<div class="row">
{{#each-in value.read as |k v|}}
{{#if (isEqual k 'allowed')}}
<div style="float: left;">
{{input
type="checkbox" id=(concat key '_read_' uniqueID)
onchange=( action 'updateCheckValue' 'read' key value )
checked=v}}
<input id="{{concat key '_read_' uniqueID }}"
onchange={{ action 'updateCheckValue' 'read' key value }} type="checkbox"
checked={{v}}/>
</div>
{{else if (isEqual k 'title')}}
<label style="display: inline;"
for="{{concat key '_read_' uniqueID }}">{{v}}</label>
{{/if}}
{{/each-in}}
</div>
{{/each-in}}
{{input
type="checkbox"
checked=acl2.carpet_design.read.allowed}}
{{input
type="checkbox"
checked=acl2.carpet_design.read.allowed}}
{{input
type="checkbox"
checked=acl2.carpet_design.read.allowed}}
{{input
type="checkbox"
checked=acl2.carpet_design.read.allowed}}
Raw
twiddle.json
{
"version": "0.10.4",
"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.7.0",
"ember-data": "2.7.0",
"ember-template-compiler": "2.7.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment