2

Here is the link of what I expected to do in my custom module

http://admin-actions-log-m2.demo2.amasty.com/_router/redirect/admin-actions-log-m2/index.php/admin/amaudit/actionslog/index/

just open the link and go to

System -> Actions Log

click on the Preview Changes in grid

I'm attaching a screenshot please have a look,

enter image description here

It will show you slide out panel. In Core Magento, you will see this under

Catalog -> Products -> Advanced Inventory

I want to implement in my module grid, Let me know if anyone has a solution.

EDIT 1

I tried to refer this solution in link below

https://www.magestore.com/magento-2-tutorial/how-to-create-multiple-layers-of-modal-in-magento-2/

but it doesn't work since it's not a full code and have not mentioned where to define code and how it should be called.

  • Hi Mohit Please check the following answer : magento.stackexchange.com/a/292029/59216 Dont forget to upvote! :) – Milind Singh Oct 8 '19 at 12:02
  • 1
    Thank you for your comment but I have figured out by myself will update as an answer. ;) – Mohit Rane Oct 9 '19 at 4:38
  • Sure, I would really like to know if there is a better way :) – Milind Singh Oct 9 '19 at 4:58
  • @MohitRane can you please provide the answer or any refrence – Sagar Parikh SGR Jan 22 at 6:47
  • 1
    @SagarParikhSGR I've added an answer. – Mohit Rane Jan 24 at 13:31
3

Finally, I've figured out by myself, I want popup preview on grid's actions Column, so you can start by adding below code

Test/PreviewPopup/view/adminhtml/layout/previewpopup_actionslog_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="actions_log_listing"/>
        </referenceContainer>
        <referenceContainer name="js">
            <block class="Test\PreviewPopup\Block\Adminhtml\ActionsLog\Preview" template="Test_PreviewPopup::activity/js.phtml" name="activity.view.model.js"/>
        </referenceContainer>
    </body>
</page>

Test/PreviewPopup/Controller/Adminhtml/ActionsLog/Index.php

<?php

namespace Test\PreviewPopup\Controller\Adminhtml\ActionsLog;

use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Backend\App\Action;
use Magento\Backend\Model\UrlInterface;

class Index extends Action
{
    /**
     * @var string
     */
    const ADMIN_RESOURCE = 'Test_PreviewPopup::actions_log';

    /**
     * @var PageFactory
     */
    public $resultPageFactory;

    /**
     * @var \Magento\Backend\Model\UrlInterface
     */
    protected $backendUrl;

    /**
     * Index constructor.
     * @param Context $context
     * @param PageFactory $resultPageFactory
     */
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory,
        UrlInterface $backendUrl
    ) {
        $this->resultPageFactory = $resultPageFactory;
        $this->backendUrl = $backendUrl;
        parent::__construct($context);
    }

    /**
     * Index action
     * @return \Magento\Backend\Model\View\Result\Page
     */
    public function execute()
    {
        /** @var \Magento\Backend\Model\View\Result\Page $resultPage */
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Test_PreviewPopup::actions_log');
        $resultPage->addBreadcrumb(__('Test'), __('Actions Log'));
        $resultPage->getConfig()->getTitle()->prepend(__('Actions Log'));

        return $resultPage;
    }

    /**
     * access rights checking
     *
     * @return bool
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Test_PreviewPopup::actions_log');
    }
}

Test/PreviewPopup/view/adminhtml/ui_component/actions_log_listing.xml

<actionsColumn name="actions" class="Test\PreviewPopup\Ui\Component\Listing\Columns\LogActions">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="viewUrlPath" xsi:type="string">previewpopup/actionslog/preview</item>
            <item name="resizeEnabled" xsi:type="boolean">false</item>
            <item name="resizeDefaultWidth" xsi:type="string">107</item>
            <item name="indexField" xsi:type="string">actions_id</item>
            <item name="urlEntityParamName" xsi:type="string">actions_id</item>
        </item>
    </argument>
</actionsColumn>

Test/PreviewPopup/Ui/Component/Listing/Columns/LogActions.php

<?php

namespace Test\PreviewPopup\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;

class LogActions extends \Magento\Ui\Component\Listing\Columns\Column
{
    protected $urlBuilder;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        \Magento\Framework\View\LayoutInterface $layout,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->layout = $layout;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Get item url
     * @return string
     */
    public function getViewUrl()
    {
        return $this->urlBuilder->getUrl(
            $this->getData('config/viewUrlPath')
        );
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                if (isset($item['actions_id'])) {
                    $name = $this->getData('name');

                    $item[$name] = html_entity_decode('<a href="#" class="action-activity-log-view" 
                        onclick="adminActivityLogView.open(\''
                                . $this->getViewUrl() . '\', \'' .
                                $item['actions_id']. '\', \'' .
                                $item['restore'] . '\')'
                                .'")>'. __('Preview Changes').'</a>
                                <br/>
                                <a href="'.$this->urlBuilder->getUrl(
                                    'previewpopup/actionslog/edit',
                                    ['actions_id' => $item['actions_id']]
                                ).'">'. __('View Details').'</a>');
                    //View Details is not needed i've just added according to my requirement
                }
            }
        }

        return $dataSource;
    }
}

Test/PreviewPopup/view/adminhtml/templates/activity/js.phtml

<script>
    require([
        "jquery",
        "Magento_Ui/js/modal/modal",
        'mage/backend/notification',
        "prototype"
    ], function(jQuery, modal, notification) {

//<![CDATA[
        Window.keepMultiModalWindow = true;
        var adminActivityLogView = {
            overlayShowEffectOptions : null,
            overlayHideEffectOptions : null,
            modal: null,
            activityId: 0,
            open : function(editorUrl, elementId, revertable) {
                if (editorUrl && elementId) {
                    jQuery.ajax({
                        url: editorUrl,
                        data: {
                            id: elementId
                        },
                        showLoader: true,
                        dataType: 'html',
                        success: function(data, textStatus, transport) {
                            this.openDialogWindow(data, elementId, revertable);
                        }.bind(this)
                    });
                }
            },
            openDialogWindow : function(data, elementId, revertable) {
                var self = this;
                this.activityId = elementId;
                if (this.modal) {
                    this.modal.html(jQuery(data).html());
                } else {
                    this.modal = jQuery(data).modal({
                        title: '<?= /* @escapeNotVerified */ __('Actions Log'); ?>',
                        modalClass: 'magento',
                        type: 'slide',
                        firedElementId: elementId,
                        buttons: [{
                            text: jQuery.mage.__('Back'),
                            class: 'action- scalable back',
                            click: function () {
                                self.closeDialogWindow(this);
                            }
                        }],
                        close: function () {
                            self.closeDialogWindow(this);
                        }
                    });
                }
                jQuery(".action-revert-activity").hide();
                if(revertable == 1) {
                    jQuery(".action-revert-activity").show();
                }
                this.modal.modal('openModal');
                this.autoResize();
            },
            closeDialogWindow : function(dialogWindow) {

                jQuery('body').trigger('processStop');
                dialogWindow.closeModal();
                Windows.overlayShowEffectOptions = this.overlayShowEffectOptions;
                Windows.overlayHideEffectOptions = this.overlayHideEffectOptions;
            },
            error: function (message) {
                jQuery('body').notification('clear')
                    .notification('add', {
                        error: true,
                        message: jQuery.mage.__(message),
                        insertMethod: function (message) {
                            var $wrapper = jQuery('<div/>').html(message);
                            jQuery('.page-main-actions').after($wrapper);
                        }
                    });
            },
            autoResize: function () {
                jQuery.each(jQuery('textarea.value-container'), function() {
                    var offset = this.offsetHeight - this.clientHeight;
                    var resizeTextarea = function(el) {
                        console.log('You clicked me!!');
                        jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
                    };
                    jQuery(this).unbind().on('click', function() { resizeTextarea(this); }).trigger('click');
                });
            }
        };

        window.adminActivityLogView = adminActivityLogView;
//]]>

    });
</script>

Test/Previewpopup/Controller/Adminhtml/ActionsLog/Preview.php;

<?php

namespace Test\Previewpopup\Controller\Adminhtml\ActionsLog;

use Magento\Backend\App\Action\Context;
use Magento\Backend\App\Action;

class Preview extends Action
{
    /**
     * @var \Magento\Framework\Controller\Result\RawFactory
     */
    public $resultRawFactory;

    /**
     * @var \Magento\Framework\View\LayoutFactory
     */
    public $layoutFactory;

    /**
     * Log constructor.
     * @param Context $context
     * @param \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
     * @param \Magento\Framework\View\LayoutFactory $layoutFactory
     */
    public function __construct(
        Context $context,
        \Magento\Framework\Controller\Result\RawFactory $resultRawFactory,
        \Magento\Framework\View\LayoutFactory $layoutFactory
    ) {
        $this->resultRawFactory = $resultRawFactory;
        $this->layoutFactory = $layoutFactory;

        parent::__construct($context);
    }

    /**
     * view action
     * @return $this
     */
    public function execute()
    {
        $content = $this->layoutFactory->create()
            ->createBlock(
                \Test\PreviewPopup\Block\Adminhtml\ActionsLog\Preview::class
            );

        /** @var \Magento\Framework\Controller\Result\Raw $resultRaw */
        $resultRaw = $this->resultRawFactory->create();
        return $resultRaw->setContents($content->toHtml());
    }
}

Test/PreviewPopup/Block/Adminhtml/ActionsLog/Preview.php

    <?php

namespace Test\PreviewPopup\Block\Adminhtml\ActionsLog;

use Magento\Backend\Block\Template;

class Preview extends Template
{
    /**
     * Path to template file in theme.
     * @var string
     */
    public $_template = 'Test_PreviewPopup::tab/modification.phtml';

    /**
     * Preview constructor.
     * @param Template\Context $context
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Model\Auth\Session $authSession,
        \Test\PreviewPopup\Model\ActionsLogFactory $actionlogFactory,
        \Test\PreviewPopup\Model\ResourceModel\ActionsLogChanges\CollectionFactory $actionsLogChangesFactory,
        array $data = []
    ) {
        $this->authSession = $authSession;
        $this->actionlogFactory = $actionlogFactory;
        $this->actionsLogChangesFactory = $actionsLogChangesFactory;
        parent::__construct($context, $data);
    }

    public function getModificationDetails()
    {
        $id = $this->getActionsId();
        $actionsLogChangescollections = $this->actionsLogChangesFactory
                                            ->create()
                                            ->addFieldToFilter(
                                                'actions_id',
                                                array('eq' => $id)
                                            )
                                            ->load();
        return $actionsLogChangescollections;
    }

    public function getActionsId()
    {
        return $this->getRequest()->getParam('id');
    }

    public function getUserEmail()
    {
        return $this->authSession->getUser()->getEmail();
    }

    /**
     * Check permission for passed action
     *
     * @param string $resourceId
     * @return bool
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed("Test_PreviewPopup::actions_log");
    }
}

Test/PreviewPopup/view/adminhtml/templates/tab/modification.phtml

<?php

$collection = $block->getModificationDetails();
// I wanted to show custom collection Data in grid so i've added this code you can make changes according to your requirements.
if($collection->getSize() > 0)
{
?>
<div class="grid">
    <div class="admin__table-wrapper">
        <table cellspacing="0" class="data-grid">
            <thead>
                <tr class="headings">
                    <th class="data-grid-th">Name</th>
                    <th class="data-grid-th">Old Value</th>
                    <th class="data-grid-th">New Value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="data-grid-controls-row data-row ">
                    <td align="center" colspan="3" class="data-grid-checkbox-cell ammodel">Magento\User\Model\User\Interceptor</td>
                </tr>
                <?php foreach ($collection as $collections) {
                    ?>
                <tr class="data-grid-controls-row data-row _odd-row">
                    <td><?= $collections->getName(); ?></td>
                    <td class="onlyDeletions">
                        <pre>
                            <ins><?= $collections->getNewValue(); ?></ins>
                            <del><?= $collections->getOldValue(); ?></del>
                        </pre>
                    </td>
                    <td class="onlyInsertions">
                        <pre>
                            <ins><?= $collections->getNewValue(); ?></ins>
                            <del><?= $collections->getOldValue(); ?></del>
                        </pre>
                    </td>
                </tr>
               <?php } ?>
            </tbody>
        </table>
    </div>
</div>
<?php } else { ?>
<div class="grid">
    <div class="admin__table-wrapper">
        <table cellspacing="0" class="data-grid">
            <thead>
                <tr class="headings">
                    <th class="data-grid-th">Name</th>
                    <th class="data-grid-th">Old Value</th>
                    <th class="data-grid-th">New Value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="data-grid-controls-row data-row _odd-row">
                    <td align="center" colspan="3" class="dashboard-advanced-reports-content">We couldn't find any records.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<?php } ?>

Hope it Helps.

| improve this answer | |
  • there is previewpopup_actionslog_index.xml file, but you did not added index controller in your answer, can you share your module or just sample code if possible – Sagar Parikh SGR Jan 27 at 9:47
  • @SagarParikhSGR please check updated answer. – Mohit Rane Jan 27 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.