editablemultiselect.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @deprecated since version 2.2.0
 */
/* global EditableMultiselect */
/* eslint-disable strict */
define([
    'jquery',
    'Magento_Ui/js/modal/alert',
    'Magento_Ui/js/modal/confirm',
    'jquery/editableMultiselect/js/jquery.editable',
    'jquery/editableMultiselect/js/jquery.multiselect'
], function ($, alert, confirm) {
    /**
     * Editable multiselect wrapper for multiselects
     * This class is defined in global scope ('var' is not needed).
     *
     *  @param {Object} settings - settings object.
     *  @param {String} settings.add_button_caption - caption of the 'Add New Value' button
     *  @param {String} settings.new_url - URL to which new request has to be submitted
     *  @param {String} settings.save_url - URL to which save request has to be submitted
     *  @param {String} settings.delete_url - URL to which delete request has to be submitted
     *  @param {String} settings.delete_confirm_message - confirmation message that is shown to user during
     *      delete operation
     *  @param {String} settings.target_select_id - HTML ID of target select element
     *  @param {Hash} settings.submit_data - extra parameters to send with new/edit/delete requests
     *  @param {String} settings.entity_value_name - name of the request parameter that represents select option text
     *  @param {String} settings.entity_id_name - name of the request parameter that represents select option value
     *  @param {Boolean} settings.is_entry_editable - flag that shows if user can add/edit/remove data
     *
     * @constructor
     */
    window.EditableMultiselect = function (settings) {

        this.settings = settings || {};
        this.addButtonCaption = this.settings['add_button_caption'] || 'Add new value';
        this.newUrl = this.settings['new_url'];
        this.saveUrl = this.settings['save_url'];
        this.deleteUrl = this.settings['delete_url'];
        this.deleteConfirmMessage = this.settings['delete_confirm_message'];
        this.targetSelectId = this.settings['target_select_id'];
        this.submitData = this.settings['submit_data'] || {};
        this.entityIdName = this.settings['entity_id_name'] || 'entity_id';
        this.entityValueName = this.settings['entity_value_name'] || 'entity_value';
        this.isEntityEditable = this.settings['is_entity_editable'] || false;

        /**
         * Initialize editable multiselect (make it visible in UI)
         */
        EditableMultiselect.prototype.init = function () {
            var self = this,
                mselectOptions = {
                    addText: this.addButtonCaption,

                    /**
                     * @param {*} value
                     * @param {*} options
                     */
                    mselectInputSubmitCallback: function (value, options) {
                        self.createEntity(value, options);
                    }
                },
                mselectList;

            if (!this.isEntityEditable) {
                // Override default layout of editable multiselect
                mselectOptions.layout = '<section class="block %mselectListClass%">' +
                    '<div class="block-content"><div class="%mselectItemsWrapperClass%">' +
                    '%items%' +
                    '</div></div>' +
                    '<div class="%mselectInputContainerClass%">' +
                    '<input type="text" class="%mselectInputClass%" title="%inputTitle%"/>' +
                    '<span class="%mselectButtonCancelClass%" title="%cancelText%"></span>' +
                    '<span class="%mselectButtonSaveClass%" title="Add"></span>' +
                    '</div>' +
                    '</section>';
            }

            $('#' + this.targetSelectId).multiselect(mselectOptions);

            // Make multiselect editable if needed
            if (this.isEntityEditable) {
                this.makeMultiselectEditable();

                // Root element of HTML markup that represents select element in UI
                mselectList = $('#' + this.targetSelectId).next();
                this.attachEventsToControls(mselectList);
            }
        };

        /**
         * Attach required event handlers to control elements of editable multiselect
         *
         * @param {Object} mselectList
         */
        EditableMultiselect.prototype.attachEventsToControls = function (mselectList) {
            mselectList.on('click.mselect-delete', '.mselect-delete', {
                container: this
            }, function (event) {
                // Pass the clicked button to container
                event.data.container.deleteEntity({
                    'delete_button': this
                });
            });

            mselectList.on('click.mselect-checked', '.mselect-list-item input', {
                container: this
            }, function (event) {
                var el = $(this),
                    checkedClassName = 'mselect-checked';

                el[el.is(':checked') ? 'addClass' : 'removeClass'](checkedClassName);
                event.data.container.makeMultiselectEditable();
            });

            mselectList.on('click.mselect-edit', '.mselect-edit', {
                container: this
            }, function (event) {
                event.data.container.makeMultiselectEditable();
                $(this).parent().find('label span').trigger('dblclick');
            });
        };

        /**
         * Make multiselect editable
         */
        EditableMultiselect.prototype.makeMultiselectEditable = function () {
            var entityIdName = this.entityIdName,
                entityValueName = this.entityValueName,
                selectList = $('#' + this.targetSelectId).next();

            selectList.find('.mselect-list-item:not(.mselect-list-item-not-editable) label span').editable(this.saveUrl,
            {
                type: 'text',
                submit: '<button class="mselect-save" title="Save" type="submit" />',
                cancel: '<span class="mselect-cancel" title="Cancel"></span>',
                event: 'dblclick',
                placeholder: '',

                /**
                 * Is checked.
                 */
                isChecked: function () {
                    var that = $(this),
                        checked;

                    if (!that.closest('.mselect-list-item').hasClass('mselect-disabled')) {
                        checked = that.parent().find('[type=checkbox]').prop('disabled');
                        that.parent().find('[type=checkbox]').prop({
                            disabled: !checked
                        });
                    }
                },

                /**
                 * @param {*} value
                 * @param {Object} sett
                 * @return {*}
                 */
                data: function (value, sett) {
                    var retval;

                    sett.isChecked.apply(this, [sett]);

                    if (typeof value === 'string') {
                        retval = value.unescapeHTML();

                        return retval;
                    }

                    return value;
                },
                submitdata: this.submitData,
                onblur: 'cancel',
                name: entityValueName,
                ajaxoptions: {
                    dataType: 'json'
                },

                /**
                 * @param {Object} sett
                 * @param {*} original
                 */
                onsubmit: function (sett, original) {
                    var select = $(original).closest('.mselect-list').prev(),
                        current = $(original).closest('.mselect-list-item').index(),
                        entityId = select.find('option').eq(current).val(),
                        entityInfo = {};

                    entityInfo[entityIdName] = entityId;
                    sett.submitdata = $.extend(sett.submitdata || {}, entityInfo);
                },

                /**
                 * @param {Object} result
                 * @param {Object} sett
                 */
                callback: function (result, sett) {
                    var select, current;

                    sett.isChecked.apply(this, [sett]);
                    select = $(this).closest('.mselect-list').prev();
                    current = $(this).closest('.mselect-list-item').index();

                    if (result.success) {
                        if (typeof result[entityValueName] === 'string') {
                            select.find('option').eq(current).val(result[entityIdName]).text(result[entityValueName]);
                            $(this).html(result[entityValueName].escapeHTML());
                        }
                    } else {
                        alert({
                            content: result['error_message']
                        });
                    }
                }
            });
        };

        /**
         * Callback function that is called when admin adds new value to select
         *
         * @param {*} value
         * @param {Object} options - list of settings of multiselect
         */
        EditableMultiselect.prototype.createEntity = function (value, options) {
            var select, entityIdName, entityValueName, entityInfo, postData, ajaxOptions;

            if (!value) {
                return;
            }

            select = $('#' + this.targetSelectId),
            entityIdName = this.entityIdName,
            entityValueName = this.entityValueName,
            entityInfo = {};
            entityInfo[entityIdName] = null;
            entityInfo[entityValueName] = value;

            postData = $.extend(entityInfo, this.submitData);

            ajaxOptions = {
                type: 'POST',
                data: postData,
                dataType: 'json',
                url: this.newUrl,

                /**
                 * @param {Object} result
                 */
                success: function (result) {
                    var resultEntityValueName, mselectItemHtml, sectionBlock, itemsWrapper, inputSelector;

                    if (result.success) {
                        resultEntityValueName = '';

                        if (typeof result[entityValueName] === 'string') {
                            resultEntityValueName = result[entityValueName].escapeHTML();
                        } else {
                            resultEntityValueName = result[entityValueName];
                        }
                        // Add item to initial select element
                        select.append('<option value="' + result[entityIdName] + '" selected="selected">' +
                        resultEntityValueName + '</option>');
                        // Add editable multiselect item
                        mselectItemHtml = $(options.item.replace(/%value%|%label%/gi, resultEntityValueName)
                                .replace(/%mselectDisabledClass%|%iseditable%|%isremovable%/gi, '')
                                .replace(/%mselectListItemClass%/gi, options.mselectListItemClass))
                                .find('[type=checkbox]')
                                .attr('checked', true)
                                .addClass(options.mselectCheckedClass)
                                .end();
                        sectionBlock = select.nextAll('section.block:first');
                        itemsWrapper = sectionBlock.find('.' + options.mselectItemsWrapperClass + '');

                        if (itemsWrapper.children('.' + options.mselectListItemClass + '').length) {
                            itemsWrapper.children('.' + options.mselectListItemClass + ':last').after(mselectItemHtml);
                        } else {
                            itemsWrapper.prepend(mselectItemHtml);
                        }
                        // Trigger blur event on input field, that is used to add new value, to hide it
                        inputSelector = '.' + options.mselectInputContainerClass + ' [type=text].' +
                            options.mselectInputClass + '';
                        sectionBlock.find(inputSelector).trigger('blur');
                    } else {
                        alert({
                            content: result['error_message']
                        });
                    }
                }
            };
            $.ajax(ajaxOptions);
        };

        /**
         * Callback function that is called when user tries to delete value from select
         *
         * @param {Object} options
         */
        EditableMultiselect.prototype.deleteEntity = function (options) {
            var self = this;

            if (options['delete_button']) {
                confirm({
                    content: this.deleteConfirmMessage,
                    actions: {
                        /**
                         * Confirm.
                         */
                        confirm: function () {
                            // Button that has been clicked
                            var deleteButton = $(options['delete_button']),
                                index = deleteButton.parent().index(),
                                select = deleteButton.closest('.mselect-list').prev(),
                                entityId = select.find('option').eq(index).val(),
                                entityInfo = {},
                                postData, ajaxOptions;

                            entityInfo[self.entityIdName] = entityId;
                            postData = $.extend(entityInfo, self.submitData);

                            ajaxOptions = {
                                type: 'POST',
                                data: postData,
                                dataType: 'json',
                                url: self.deleteUrl,

                                /**
                                 * @param {Object} result
                                 */
                                success: function (result) {
                                    if (result.success) {
                                        deleteButton.parent().remove();
                                        select.find('option').eq(index).remove();
                                    } else {
                                        alert({
                                            content: result['error_message']
                                        });
                                    }
                                }
                            };
                            $.ajax(ajaxOptions);
                        }
                    }
                });
            }
        };
    };
});