addon/mixins/ui-checkbox-group-base.js

import $ from 'jquery';
import Mixin from '@ember/object/mixin';
import { observer } from '@ember/object';
import { bool } from '@ember/object/computed';
import { set } from '@ember/object';
import { guidFor } from '@ember/object/internals';


/**
ui-checkbox-base mixinx

@module mixins
@namespace mixins
@class UiCheckboxGroupBase
@constructor
*/
export default Mixin.create({
    /**
     * The root component element
     *
     * @property {Ember.String} tagName
     * @default  "div"
     */
    tagName: 'div',

    /**
     * value  for the checkbox radio group component
     *
     * @property {Ember.Array} value
     */
    value: null,

    /**
     * name for the checkbox radio group component
     *
     * @property {Ember.String} name
     */
    name: '',

    /**
     *  label for the checkbox radio group component
     *
     * @property {Ember.String} label
     */
    label: '',

    /**
     * label key for option
     *
     * @property {Ember.String} labelPath
     */
    labelPath: 'name',

    /**
     * value key for option
     *
     * @property {Ember.String} valuePath
     */
    valuePath: 'value',

    /**
     * Class bindings for the checkbox component
     *
     * @property {Ember.Array} classNameBindings
     */
    classNameBindings: ['theme', '_componentClass'],
    theme: 'inline',
    _componentClass: 'fields',

    /**
     * options for the checkbox component
     *
     * @property {Ember.Array} options
     */
    options: null,

    /**
     * options for the checkbox component
     *
     * @property {Ember.Array} options
     */
    _options: null,
    valueChange: observer('value', function() {
        if (this._options) {
            for (var i = 0; i < this._options.length; i++) {
                let item = this._options[i];
                set(item, 'checked', this.isOptionChecked(item['value']));
            }
        }
        this.setupBlockOptions();
    }),
    /**
     * @function initOptions connect options and _options step one
     * @observes "didInsertElement" event
     * @returns  {void}
     */
    init: function() {
        this._super(...arguments);
        this.setupOptions();
        if (!this.name) {
            this.set('name', guidFor(this));
        }
    },
    didInsertElement() {
        this.setupBlockOptions();
    },
    setupBlockOptions() {
        if (this.hasBlock && !this.options) {
            let name = this.name;
            this.$('input').each((index, item) => {
                if (!$(item).attr('name')) {
                    $(item).attr('name', name);
                }
                let checked = this.isOptionChecked($(item).val());
                $(item).prop('checked', checked);
            });
        }
    },
    setupOptions() {
        let _options = [];
        if (this.options) {
            for (var i = 0; i < this.options.length; i++) {
                let item = this.options[i];
                let label = item[this.get('labelPath')];
                let value = item[this.get('valuePath')];
                let checked = this.isOptionChecked(value);
                _options.push({
                    'label': label,
                    'value': String(value),
                    'checked': checked
                });
            }
            this.set('_options', _options);
        }
    },
    optionsChange: observer('options', function() {
        this.setupOptions();
    }),
    hasBlock: bool('template').readOnly()
});