Implemented UrlFilterApplier component #28932
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <?php | ||
| /** | ||
| * Copyright © Magento, Inc. All rights reserved. | ||
| * See COPYING.txt for license details. | ||
| */ | ||
|
|
||
| /** @var $block \Magento\Backend\Block\Template */ | ||
| ?> | ||
| <script type="text/x-magento-init"> | ||
| { | ||
| "*": { | ||
| "Magento_Ui/js/grid/url-filter-applier": {} | ||
| } | ||
| } | ||
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <?php | ||
| /** | ||
| * Copyright © Magento, Inc. All rights reserved. | ||
| * See COPYING.txt for license details. | ||
| */ | ||
|
|
||
| /** @var $block \Magento\Backend\Block\Template */ | ||
| ?> | ||
| <script type="text/x-magento-init"> | ||
| { | ||
| "*": { | ||
| "Magento_Ui/js/grid/url-filter-applier": {} | ||
| } | ||
| } | ||
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /** | ||
| * Copyright © Magento, Inc. All rights reserved. | ||
| * See COPYING.txt for license details. | ||
| */ | ||
|
|
||
| define([ | ||
| 'uiComponent', | ||
| 'underscore', | ||
| ], function (Component, _) { | ||
| 'use strict'; | ||
|
|
||
| return Component.extend({ | ||
| defaults: { | ||
| filterProvider: 'componentType = filters', | ||
|
There was a problem hiding this comment. how this component is behaving on a page with multiple grids? There was a problem hiding this comment. Good point, will have a look on this, probably will have to introduce a parameter to handle the component namespace. |
||
| filterKey: 'filters', | ||
| searchString: location.search, | ||
| modules: { | ||
| filterComponent: '${ $.filterProvider }', | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Init component | ||
| * | ||
| * @return {exports} | ||
| */ | ||
| initialize: function () { | ||
| this._super(); | ||
| this.apply(); | ||
|
|
||
| return this; | ||
| }, | ||
|
|
||
| /** | ||
| * Apply filter | ||
| */ | ||
| apply: function () { | ||
| var urlFilter = this.getFilterParam(this.searchString); | ||
|
|
||
| if (_.isUndefined(this.filterComponent())) { | ||
| setTimeout(function () {this.apply()}.bind(this), 100); | ||
| } else { | ||
| if (Object.keys(urlFilter).length) { | ||
| this.filterComponent().setData(urlFilter, false); | ||
| this.filterComponent().apply(); | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Get filter param from url | ||
| * | ||
| * @returns {Object} | ||
| */ | ||
| getFilterParam: function (url) { | ||
| var searchString = decodeURI(url); | ||
|
|
||
| return _.chain(searchString.slice(1).split('&')) | ||
| .map(function (item) { | ||
| if (item && item.search(this.filterKey) !== -1) { | ||
| var itemArray = item.split('='); | ||
|
|
||
| itemArray[0] = itemArray[0].replace(this.filterKey, '') | ||
| .replace(/[\[\]]/g, ''); | ||
|
|
||
| return itemArray | ||
| } | ||
| }.bind(this)) | ||
| .compact() | ||
| .object() | ||
| .value(); | ||
| } | ||
| }); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /** | ||
| * Copyright © Magento, Inc. All rights reserved. | ||
| * See COPYING.txt for license details. | ||
| */ | ||
|
|
||
| /*eslint max-nested-callbacks: 0*/ | ||
| define([ | ||
| 'Magento_Ui/js/grid/url-filter-applier' | ||
| ], function (UrlFilterApplier) { | ||
| 'use strict'; | ||
|
|
||
| describe('Magento_Ui/js/grid/url-filter-applier', function () { | ||
| var urlFilterApplierObj, | ||
| filterComponentMock = { | ||
| setData: jasmine.createSpy(), | ||
| apply: jasmine.createSpy() | ||
| }; | ||
|
|
||
| beforeEach(function () { | ||
| urlFilterApplierObj = new UrlFilterApplier({}); | ||
| urlFilterApplierObj.filterComponent = jasmine.createSpy().and.returnValue(filterComponentMock); | ||
| }); | ||
|
|
||
| describe('"getFilterParam" method', function () { | ||
| it('return object from url with a simple filters parameter', function () { | ||
| var urlSearch = '?filters[name]=test'; | ||
|
|
||
| expect(urlFilterApplierObj.getFilterParam(urlSearch)).toEqual({'name': 'test'}); | ||
| }); | ||
| it('return object from url with multiple filters parameter', function () { | ||
| var urlSearch = '?filters[name]=test&filters[qty]=1'; | ||
|
|
||
| expect(urlFilterApplierObj.getFilterParam(urlSearch)).toEqual({ | ||
| 'name': 'test', | ||
| 'qty': '1' | ||
| }); | ||
| }); | ||
| it('return object from url with multiple filters parameter and another parameter', function () { | ||
| var urlSearch = '?filters[name]=test&filters[qty]=1&anotherparam=1'; | ||
|
|
||
| expect(urlFilterApplierObj.getFilterParam(urlSearch)).toEqual({ | ||
| 'name': 'test', | ||
| 'qty': '1' | ||
| }); | ||
| }); | ||
| it('return object from url with another parameter', function () { | ||
| var urlSearch = '?anotherparam=1'; | ||
|
|
||
| expect(urlFilterApplierObj.getFilterParam(urlSearch)).toEqual({}); | ||
| }); | ||
| }); | ||
|
|
||
| describe('"apply" method', function () { | ||
| it('applies url filter on filter component', function () { | ||
| urlFilterApplierObj.searchString = '?filters[name]=test&filters[qty]=1'; | ||
| urlFilterApplierObj.apply(); | ||
| expect(urlFilterApplierObj.filterComponent().setData).toHaveBeenCalledWith({ | ||
| 'name': 'test', | ||
| 'qty': '1' | ||
| }, false); | ||
| expect(urlFilterApplierObj.filterComponent().apply).toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can add
Urlfiltercomponent in ui_component instead of creating a new block. Please check the similar implementationhttps://github.com/magento/adobe-stock-integration/blob/f8f7257d30bf54646536491ad5366ae082c13570/AdobeStockImageAdminUi/view/adminhtml/ui_component/adobe_stock_images_listing.xml#L55-L70
Let me know your thoughts
Thanks
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@konarshankar07 I think both approaches are fine
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sivaschenko ... Yes, you are right but my concerns is the namespace are hard coded in the
url_filter_applier.phtmlfile which can be easily exported using ui_component.