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.

5
  • Hi Mohit Please check the following answer : magento.stackexchange.com/a/292029/59216 Dont forget to upvote! :) Oct 8, 2019 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, 2019 at 4:38
  • Sure, I would really like to know if there is a better way :) Oct 9, 2019 at 4:58
  • @MohitRane can you please provide the answer or any refrence Jan 22, 2020 at 6:47
  • 1
    @SagarParikhSGR I've added an answer.
    – Mohit Rane
    Jan 24, 2020 at 13:31

1 Answer 1

4

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.

6
  • 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 Jan 27, 2020 at 9:47
  • @SagarParikhSGR please check updated answer.
    – Mohit Rane
    Jan 27, 2020 at 10:32
  • @MohitRane can you please point out what is the issue in my magento.stackexchange.com/questions/323757/… this problem
    – Asad Khan
    Oct 6, 2020 at 7:31
  • @MohitRane I've followed exact your answer but still I'm getting the same issue as I was getting before Uncaught ReferenceError: adminActivityLogView is not defined at HTMLAnchorElement.onclick any idea
    – Asad Khan
    Oct 14, 2020 at 11:03
  • @AsadKhan did you checked this magento.stackexchange.com/a/323795/73212 ?
    – Mohit Rane
    Oct 14, 2020 at 11:49

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.