2017-06-26 08:52:22 +00:00
|
|
|
import {module} from '../module';
|
|
|
|
import './multi-check.scss';
|
2017-06-28 11:12:01 +00:00
|
|
|
/**
|
|
|
|
* 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;
|
2017-06-28 11:12:01 +00:00
|
|
|
this._models = [];
|
2017-06-26 11:53:52 +00:00
|
|
|
this.type = {};
|
|
|
|
this.showDropDown = false;
|
2017-06-26 08:52:22 +00:00
|
|
|
}
|
2017-06-28 11:12:01 +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() {
|
2017-06-28 11:12:01 +00:00
|
|
|
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 {
|
2017-06-28 11:12:01 +00:00
|
|
|
checked = this.checkAll === 1;
|
2017-06-26 11:53:52 +00:00
|
|
|
}
|
2017-06-28 11:12:01 +00:00
|
|
|
el.checked = checked;
|
2017-06-26 11:53:52 +00:00
|
|
|
}
|
2017-06-28 11:12:01 +00:00
|
|
|
);
|
2017-06-26 08:52:22 +00:00
|
|
|
}
|
2017-06-28 06:55:01 +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: {
|
2017-07-06 12:21:55 +00:00
|
|
|
checkAll: '=',
|
2017-06-26 08:52:22 +00:00
|
|
|
options: '<',
|
2017-06-26 11:53:52 +00:00
|
|
|
models: '=',
|
2017-06-26 08:52:22 +00:00
|
|
|
className: '@?'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|