feat(ui-grid-refresh): ajax ui grid refresh component added

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 adapttive
+Copyright (c) 2020 Milind Singh <hello@adapttive.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,2 +1,24 @@
 # advance-grid
-Module for Magento2 provides enhanced ui grid with refresh and conditional filters
+
+Module for Magento 2 provides enhanced ui grid with refresh and conditional filters
+
+## features
+
+- **refresh**: without the page reload (ready)
+- **filter**: with conditions (under-development)
+- **locking**: of columns for horizontal scroll (under-development)
+
+## usage
+
+add the following to ui grid xml:
+
+```xml
+   <listingToolbar name="listing_top" template="Adapttive_Ui/grid/toolbar">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="stickyTmpl" xsi:type="string">Adapttive_Ui/grid/sticky/sticky</item>
+            </item>
+        </argument>
+        <component name="listing_refresh" component="Adapttive_Ui/js/grid/refresh/refresh"/>
+   </listingToolbar>
+```

composer.json

@@ -0,0 +1,22 @@
+{
+    "name": "adapttive/advance-grid",
+    "description": "Module for Magento2 provides enhanced ui grid with refresh and conditional filters.",
+    "type": "magento2-module",
+    "require": {
+        "php": "~7.1.3||~7.2.0||~7.3.0||~7.4.0",
+        "magento/module-ui": "101.1.*",
+        "magento/framework": "102.0.*"
+    },
+    "license": [
+        "MIT"
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "Adapttive\\Ui\\": ""
+        }
+    },
+    "version": "1.0.0"
+}

etc/module.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!--
+/**
+ *
+ * Adapttive/Ui: module for Magento2 provides enhanced ui grid with refresh and conditional filters
+ *
+ * @category XML
+ * @package Adapttive
+ * @subpackage Ui
+ * @author Milind Singh <hello@adapttive.com>
+ * @copyright 2020 Milind Singh
+ * @license MIT
+ * @version 1.0.0
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Adapttive_Ui" >
+        <sequence>
+            <module name="Magento_Ui"/>
+        </sequence>
+    </module>
+</config>

registration.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ *
+ * Adapttive/Ui: module for Magento2 provides enhanced ui grid with refresh and conditional filters
+ *
+ * @category PHP
+ * @package Adapttive
+ * @subpackage Ui
+ * @author Milind Singh <hello@adapttive.com>
+ * @copyright 2020 Milind Singh
+ * @license MIT
+ * @version 1.0.0
+ */
+
+use \Magento\Framework\Component\ComponentRegistrar;
+
+ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Adapttive_Ui', __DIR__);

view/adminhtml/ui_component/sales_order_grid.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ *
+ * Adapttive/Ui: module for Magento2 provides enhanced ui grid with refresh and conditional filters
+ *
+ * @category XML
+ * @package Adapttive
+ * @subpackage Ui
+ * @author Milind Singh <hello@adapttive.com>
+ * @copyright 2020 Milind Singh
+ * @license MIT
+ * @version 1.0.0
+ */
+-->
+<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
+    <listingToolbar name="listing_top" template="Adapttive_Ui/grid/toolbar">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="stickyTmpl" xsi:type="string">Adapttive_Ui/grid/sticky/sticky</item>
+            </item>
+        </argument>
+        <component name="listing_refresh" component="Adapttive_Ui/js/grid/refresh/refresh"/>
+    </listingToolbar>
+</listing>

view/base/web/css/source/_module.less

@@ -0,0 +1,9 @@
+.data-grid-filters-action-wrap {
+    .action-default.adapttive-action-refresh {
+        padding-left: 0.7rem !important;
+        padding-right: 0.5rem !important;
+        &:before {
+            content: '\e61f' !important;
+        }
+    }
+}

view/base/web/js/grid/refresh/refresh.js

@@ -0,0 +1,44 @@
+/**
+ * @api
+ */
+define([
+    'ko',
+    'underscore',
+    'mageUtils',
+    'uiLayout',
+    'uiElement'
+], function (ko, _, utils, layout, Element) {
+    'use strict';
+
+    return Element.extend({
+        defaults: {
+            template: 'Adapttive_Ui/grid/refresh/refresh',
+        },
+
+        /**
+         * Initializes paging component.
+         *
+         * @returns {Refresh} Chainable.
+         */
+        initialize: function () {
+            this._super();
+            return this;
+        },
+
+
+        /**
+         * Refresh the current page.
+         *
+         * @returns {Refresh} Chainable.
+         */
+        refresh: function () {
+            this.source.initStorage().clearData();
+            this.source.reload({"refresh":true});
+            return this;
+        },
+
+        loading: function () {
+            return false
+        }
+    });
+});

view/base/web/template/grid/refresh/refresh.html

@@ -0,0 +1,5 @@
+<div class="data-grid-filters-actions-wrap">
+    <div class="data-grid-filters-action-wrap">
+        <button class="action-default adapttive-action-refresh" type="button" attr="title: $t('Refresh')" click="refresh" disable="loading()"></button>
+    </div>
+</div>

view/base/web/template/grid/sticky/sticky.html

@@ -0,0 +1,27 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div style="display: none;" css="stickyClass" afterRender="setStickyNode">
+    <span class="data-grid-cap-left" afterRender="setLeftCap"/>
+    <span class="data-grid-cap-right" afterRender="setRightCap"/>
+
+    <div afterRender="setStickyToolbarNode">
+        <div class="admin__data-grid-header">
+            <div class="admin__data-grid-header-row">
+                <scope args="requestChild('listing_massaction')" render=""/>
+                <scope args="requestChild('listing_paging')" render="totalTmpl"/>
+                <scope args="requestChild('listing_refresh')" render=""/>
+                <each args="getRegion('dataGridFilters')" render=" $data.stickyTmpl || getTemplate()"/>
+                <div class="admin__data-grid-actions-wrap" each="getRegion('dataGridActions')" render=""/>
+                <scope args="requestChild('listing_paging')" render=""/>
+            </div>
+        </div>
+
+        <scope args="requestChild('listing_filters_chips')" render="$data.stickyTmpl || getTemplate()"/>
+
+        <scope args="columnsProvider" render="stickyTmpl"/>
+    </div>
+</div>

view/base/web/template/grid/toolbar.html

@@ -0,0 +1,34 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="admin__data-grid-header" afterRender="$data.setToolbarNode">
+    <div class="admin__data-grid-header-row">
+        <div class="admin__data-grid-actions-wrap" each="getRegion('dataGridActions')" render=""/>
+        <each args="getRegion('dataGridFilters')" render=""/>
+    </div>
+    <div class="admin__data-grid-header-row row row-gutter">
+        <div class="col-xs-2" if="hasChild('listing_massaction')" ko-scope="requestChild('listing_massaction')" render=""/>
+        <div css="
+            'col-xs-10': hasChild('listing_massaction'),
+            'col-xs-12': !hasChild('listing_massaction')">
+            <div class="row">
+                <!-- ko scope: requestChild('listing_paging') -->
+                <div class="col-xs-3" render="totalTmpl"/>
+                <!--/ko-->
+                <div class="col-xs-9">
+                    <div class="row">
+                        <div class="col-xs-4" if="hasChild('listing_refresh')" ko-scope="requestChild('listing_refresh')" render=""/>
+                        <!-- ko scope: requestChild('listing_paging') -->
+                        <div class="col-xs-8" render=""></div>
+                        <!--/ko-->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<render args="stickyTmpl" if="$data.sticky"/>