salix/front/core/components/multi-check/multi-check.js

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: '<?'
    }
});