import ngModule from '../../module'; import FormInput from '../form-input'; import './style.scss'; /** * Multicheck component for checking all form instances at once * @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 FormInput { 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: '