How does Magento_GroupedProduct/js/grouped-product use the `mage.modal` jQuery UI widget?

dmitry_fedyuk · May 20, 2018, 6:34pm

magento/magento2/blob/2.2.4/app/code/Magento/GroupedProduct/view/adminhtml/web/js/grouped-product.js#L100-L197


/**
 * Create modal for show product
 *
 * @private
 */
_bindDialog: function () {
    var widget = this,
        selectedProductList = {},
        popup = $('[data-role=add-product-dialog]'),
        gridPopup;


    popup.modal({
        type: 'slide',
        innerScroll: true,
        title: $.mage.__('Add Products to Group'),
        modalClass: 'grouped',


        /** @inheritdoc */
        open: function () {
            $(this).addClass('admin__scope-old'); // ToDo UI: remove with old styles removal
        },
        buttons: [{
            id: 'grouped-product-dialog-apply-button',
            text: $.mage.__('Add Selected Products'),
            'class': 'action-primary action-add',


            /** @inheritdoc */
            click: function () {
                $.each(selectedProductList, function (index, product) {
                    widget._add(null, product);
                });
                widget._resort();
                widget._updateGridVisibility();
                popup.modal('closeModal');
            }
        }]
    });


    popup.on('click', '[data-role=row]', function (event) {
        var target = $(event.target);


        if (!target.is('input')) {
            target.closest('[data-role=row]')
                .find('[data-column=entity_ids] input')
                .prop('checked', function (element, value) {
                    return !value;
                })
                .trigger('change');
        }
    });


    popup.on(
        'change',
        '[data-role=row] [data-column=entity_ids] input',
        $.proxy(function (event) {
            var element = $(event.target),
                product = {};


            if (element.is(':checked')) {
                product.id = element.val();
                product.qty = 0;
                element.closest('[data-role=row]').find('[data-column]').each(function (index, el) {
                    product[$(el).data('column')] = $.trim($(el).text());
                });
                selectedProductList[product.id] = product;
            } else {
                delete selectedProductList[element.val()];
            }
        }, this)
    );


    gridPopup = $(this.options.gridPopup).data('gridObject');


    $('[data-role=add-product]').on('click', function (event) {
        event.preventDefault();
        popup.modal('openModal');
        gridPopup.reload();
        selectedProductList = {};
    });


    $('#' + gridPopup.containerId).on('gridajaxsettings', function (event, ajaxSettings) {
        var ids = widget.$grid.find('[data-role=id]').map(function (index, element) {
            return $(element).val();
        }).toArray();


        ajaxSettings.data.filter = $.extend(ajaxSettings.data.filter || {}, {
            'entity_ids': ids
        });
    }).on('gridajax', function (event, ajaxRequest) {
        ajaxRequest.done(function () {
            popup.find('[data-role=row] [data-column=entity_ids] input').each(function (index, element) {
                var $element = $(element);


                $element.prop('checked', !!selectedProductList[$element.val()]);
            });
        });
    });
},

dmitry_fedyuk · May 20, 2018, 6:35pm