salix/client/core/src/multi-check/multi-check.js

83 lines
2.4 KiB
JavaScript
Raw Normal View History

2017-06-26 08:52:22 +00:00
import {module} from '../module';
import './multi-check.scss';
/**
* Draw checkbox with a drop-down and multi options
* @param {Array} options List of options shown in drop-down
* @param {Array} models Elements to check / unCheck
* @param {String} className Optional css class name
*/
2017-06-26 08:52:22 +00:00
export default class MultiCheck {
2017-06-26 12:41:08 +00:00
constructor() {
this._checkAll = 0;
this._models = [];
2017-06-26 11:53:52 +00:00
this.type = {};
this.showDropDown = false;
2017-06-26 08:52:22 +00:00
}
get models() {
return this._models;
}
set models(value) {
this._models = value;
}
2017-06-26 08:52:22 +00:00
get checkAll() {
return this._checkAll;
}
set checkAll(value) {
this._checkAll = value;
2017-06-26 11:53:52 +00:00
this.switchChecks();
2017-06-26 08:52:22 +00:00
}
2017-06-26 11:53:52 +00:00
switchChecks() {
if (this.models)
this.models.forEach(
el => {
let checked;
if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') {
if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
checked = el[this.type.id.replace('no-', '')] == null;
} else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
let label = this.type.id.replace('equal-', '');
checked = (el[label] && el[label] === this.type.name);
} else {
checked = el[this.type.id] != null;
}
2017-06-26 11:53:52 +00:00
} else {
checked = this.checkAll === 1;
2017-06-26 11:53:52 +00:00
}
el.checked = checked;
2017-06-26 11:53:52 +00:00
}
);
2017-06-26 08:52:22 +00:00
}
$onChanges() {
this.type = {};
this.checkAll = 0;
}
2017-06-26 11:53:52 +00:00
$doCheck() {
if (this.type && this.type.id) {
switch (this.type.id) {
case 'all':
2017-06-26 12:41:08 +00:00
this.checkAll = 1;
2017-06-26 11:53:52 +00:00
break;
case 'any':
2017-06-26 12:41:08 +00:00
this.checkAll = 0;
2017-06-26 11:53:52 +00:00
break;
default:
2017-06-26 12:41:08 +00:00
this.checkAll = 2;
2017-06-26 11:53:52 +00:00
break;
}
this.type = {};
}
2017-06-26 08:52:22 +00:00
}
}
2017-06-26 12:41:08 +00:00
MultiCheck.$inject = [];
2017-06-26 08:52:22 +00:00
module.component('vnMultiCheck', {
template: require('./multi-check.html'),
controller: MultiCheck,
bindings: {
options: '<',
2017-06-26 11:53:52 +00:00
models: '=',
2017-06-26 08:52:22 +00:00
className: '@?'
}
});