127 lines
2.9 KiB
JavaScript
127 lines
2.9 KiB
JavaScript
import ngModule from '../../module';
|
|
import Input from '../../lib/input';
|
|
import './style.scss';
|
|
|
|
/**
|
|
* Draw checkbox with a drop-down and multi options
|
|
* @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked
|
|
* @param {Array} data List of options shown in drop-down
|
|
* @param {Array} models Elements to check / unCheck
|
|
*/
|
|
export default class MultiCheck extends Input {
|
|
constructor($element, $scope) {
|
|
super($element, $scope);
|
|
this._checked = false;
|
|
this.checkField = 'checked';
|
|
this.isIntermediate = false;
|
|
}
|
|
|
|
/**
|
|
* Gets array model instance
|
|
*
|
|
* @return {ArrayModel} - Array model instance
|
|
*/
|
|
get model() {
|
|
return this._model;
|
|
}
|
|
|
|
/**
|
|
* Sets the array model instance
|
|
* Changes intermediate property for
|
|
* the check component
|
|
*
|
|
* @param {ArrayModel} value - Array model instance
|
|
*/
|
|
set model(value) {
|
|
this._model = value;
|
|
|
|
if (value) {
|
|
value.on('rowChange', () => {
|
|
this.isIntermediate = !this.areAllUnchecked() && !this.areAllChecked();
|
|
|
|
if (this.areAllChecked())
|
|
this._checked = true;
|
|
else if (!this.areAllChecked())
|
|
this._checked = false;
|
|
});
|
|
|
|
value.on('dataChange', () => {
|
|
if (this.checked) this.toggle();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets current check state
|
|
*/
|
|
get checked() {
|
|
return this._checked;
|
|
}
|
|
|
|
/**
|
|
* Sets current check state
|
|
*
|
|
* @param {Boolean} value - Checkbox state [undefined, true, false]
|
|
*/
|
|
set checked(value) {
|
|
this._checked = value;
|
|
this.checkAll = value;
|
|
|
|
this.toggle();
|
|
}
|
|
|
|
/**
|
|
* Returns a bolean result for
|
|
* checked instances
|
|
*
|
|
* @return {Boolean} - True if all instances are checked
|
|
*/
|
|
areAllChecked() {
|
|
if (!this.model || !this.model.data) return;
|
|
|
|
const data = this.model.data;
|
|
return data.every(item => {
|
|
return item[this.checkField] === true;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Returns a bolean result for
|
|
* checked instances
|
|
*
|
|
* @return {Boolean} - False if all instances are checked
|
|
*/
|
|
areAllUnchecked() {
|
|
if (!this.model || !this.model.data) return;
|
|
|
|
const data = this.model.data;
|
|
return data.every(item => {
|
|
return item[this.checkField] === false;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Toggles checked property on
|
|
* all instances
|
|
*/
|
|
toggle() {
|
|
const data = this.model.data;
|
|
if (!data) return;
|
|
data.forEach(el => {
|
|
el[this.checkField] = this.checkAll;
|
|
});
|
|
}
|
|
}
|
|
|
|
ngModule.component('vnMultiCheck', {
|
|
template: require('./multi-check.html'),
|
|
controller: MultiCheck,
|
|
bindings: {
|
|
model: '<',
|
|
checkField: '<?',
|
|
checkAll: '=?',
|
|
disabled: '<?'
|
|
}
|
|
});
|
|
|