How is the backend CMS pages grid toolbar «Actions» dropdown implemented?

dmitrii_fediuk · March 12, 2016, 7:33am

The «Actions» dropdown’s template:

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/templates/grid/actions.html#L7-L14


<div class="action-select-wrap" collapsible="onTarget: true">
<button class="action-select" translate="'Actions'"/>
<ul class="action-menu"css="_active: $collapsible.opened">
    <li repeat="foreach: actions, item: '$action'" click="applyAction.bind($data, $action().type)">
        <span class="action-menu-item" text="$action().label"/>
    </li>
</ul>
</div>

The «Actions» dropdown’s script is linked to the template above:

The `massaction` UI component definition:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml#L86-L93


<massaction class="Magento\Ui\Component\MassAction">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/massactions</item>
            <item name="displayArea" xsi:type="string">bottom</item>
        </item>
    </argument>
</massaction>

The backend CMS pages grid toolbar definition:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L83-L83


<massaction name="listing_massaction">

Actions

Delete

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L84-L96


<action name="delete">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="type" xsi:type="string">delete</item>
            <item name="label" xsi:type="string" translate="true">Delete</item>
            <item name="url" xsi:type="url" path="cms/page/massDelete"/>
            <item name="confirm" xsi:type="array">
                <item name="title" xsi:type="string" translate="true">Delete items</item>
                <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
            </item>
        </item>
    </argument>
</action>

Disable

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L97-L105


<action name="disable">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="type" xsi:type="string">disable</item>
            <item name="label" xsi:type="string" translate="true">Disable</item>
            <item name="url" xsi:type="url" path="cms/page/massDisable"/>
        </item>
    </argument>
</action>

Enable

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L106-L114


<action name="enable">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="type" xsi:type="string">enable</item>
            <item name="label" xsi:type="string" translate="true">Enable</item>
            <item name="url" xsi:type="url" path="cms/page/massEnable"/>
        </item>
    </argument>
</action>

Edit

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L115-L125


<action name="edit">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="type" xsi:type="string">edit</item>
            <item name="label" xsi:type="string" translate="true">Edit</item>
            <item name="callback" xsi:type="array">
                <item name="provider" xsi:type="string">cms_page_listing.cms_page_listing.cms_page_columns_editor</item>
                <item name="target" xsi:type="string">editSelected</item>
            </item>
        </item>
    </argument>

The actions’ click handler:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/massactions.js#L41-L47


/**
 * Applies specified action.
 *
 * @param {String} actionIndex - Actions' identifier.
 * @returns {Massactions} Chainable.
 */
applyAction: function (actionIndex) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/massactions.js#L60-L65


action   = this.getAction(actionIndex);
callback = this._getCallback(action, data);


action.confirm ?
    this._confirm(action, callback) :
    callback();

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/massactions.js#L116-L125


/**
 * Creates action callback based on its' data. If action doesn't spicify
 * a callback function than the default one will be used.
 *
 * @private
 * @param {Object} action - Actions' object.
 * @param {Object} selections - Selections data.
 * @returns {Function} Callback function.
 */
_getCallback: function (action, selections) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/massactions.js#L126-L139


var callback = action.callback,
    args     = [action, selections];


if (utils.isObject(callback)) {
    args.unshift(callback.target);


    callback = registry.async(callback.provider);
} else if (typeof callback != 'function') {
    callback = this.defaultCallback.bind(this);
}


return function () {
    callback.apply(null, args);
};

An example of a callback for the «Edit» action:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml#L120-L123


<item name="callback" xsi:type="array">
    <item name="provider" xsi:type="string">cms_page_listing.cms_page_listing.cms_page_columns_editor</item>
    <item name="target" xsi:type="string">editSelected</item>
</item>

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/grid/editing/editor.js#L543-L563


/**
 * Starts editing of selected records. If record
 * is not in the selections list, then it will get hidden.
 *
 * @returns {Editor} Chainable.
 */
editSelected: function () {
    var selections = this.getSelections();


    this.elems.each(function (record) {
        if (!_.contains(selections, record.recordId)) {
            record.active(false);
        }
    });


    selections.forEach(function (id) {
        this.edit(id);
    }, this);


    return this;
},

dmitrii_fediuk · March 12, 2016, 12:13pm

The «Actions» dropdown’s template:

The «Actions» dropdown’s script is linked to the template above:

The massaction UI component definition:

The backend CMS pages grid toolbar definition:

Actions

Delete

Disable

Enable

Edit

The actions’ click handler:

The `massaction` UI component definition: