Skip to content

[Ui] Allow to define listing configuration via ui component xml #23307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
magento-engcom-team merged 1 commit into from
Jun 21, 2019
Merged

[Ui] Allow to define listing configuration via ui component xml #23307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/paging/sizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ define([

return Sizes.extend({
defaults: {
excludedOptions: ['100', '200']
},

/**
* @override
*/
initialize: function () {
this._super();

this.excludedOptions.forEach(function (excludedOption) {
delete this.options[excludedOption];
}, this);
this.updateArray();

return this;
options: {
'20': {
value: 20,
label: 20
},
'30': {
value: 30,
label: 30
},
'50': {
value: 50,
label: 50
}
},
value: 20
}
});
});
94 changes: 61 additions & 33 deletions app/code/Magento/Ui/Component/Paging.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,61 @@
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

namespace Magento\Ui\Component;

/**
* Class Paging
*
* @api
* @since 100.0.2
*/
class Paging extends AbstractComponent
{
const NAME = 'paging';

/**
* Default paging options
*
* @var array
*/
private $defaultOptions = [
'20' => [
'value' => 20,
'label' => 20
],
'30' => [
'value' => 30,
'label' => 30
],
'50' => [
'value' => 50,
'label' => 50
],
'100' => [
'value' => 100,
'label' => 100
],
'200' => [
'value' => 200,
'label' => 200
],
];

/**
* Default page size
*
* @var int
*/
private $defaultPageSize = 20;

/**
* Default component data
*
* @var array
*/
protected $_data = [
'config' => [
'options' => [
'20' => [
'value' => 20,
'label' => 20
],
'30' => [
'value' => 30,
'label' => 30
],
'50' => [
'value' => 50,
'label' => 50
],
'100' => [
'value' => 100,
'label' => 100
],
'200' => [
'value' => 200,
'label' => 200
],
],
'pageSize' => 20,
'current' => 1
]
];
Expand All @@ -65,13 +80,13 @@ public function getComponentName()
public function prepare()
{
$this->prepareOptions();
$this->preparePageSize();
$paging = $this->getContext()->getRequestParam('paging');
if (!isset($paging['notLimits'])) {
$this->getContext()
->getDataProvider()
->setLimit($this->getOffset($paging), $this->getSize($paging));
}

parent::prepare();
}

Expand All @@ -83,12 +98,26 @@ public function prepare()
protected function prepareOptions()
{
$config = $this->getData('config');
if (isset($config['options'])) {
$config['options'] = array_values($config['options']);
foreach ($config['options'] as &$item) {
$item['value'] = (int) $item['value'];
}
unset($item);
if (!isset($config['options'])) {
$config['options'] = $this->defaultOptions;
}
foreach ($config['options'] as &$item) {
$item['value'] = (int)$item['value'];
}
unset($item);
$this->setData('config', $config);
}

/**
* Prepare page size
*
* @return void
*/
private function preparePageSize()
{
$config = $this->getData('config');
if (!isset($config['pageSize'])) {
$config['pageSize'] = $this->defaultPageSize;
$this->setData('config', $config);
}
}
Expand All @@ -102,7 +131,7 @@ protected function prepareOptions()
protected function getOffset($paging)
{
$defaultPage = $this->getData('config/current') ?: 1;
return (int) (isset($paging['current']) ? $paging['current'] : $defaultPage);
return (int)(isset($paging['current']) ? $paging['current'] : $defaultPage);
}

/**
Expand All @@ -113,7 +142,6 @@ protected function getOffset($paging)
*/
protected function getSize($paging)
{
$defaultLimit = $this->getData('config/pageSize') ?: 20;
return (int) (isset($paging['pageSize']) ? $paging['pageSize'] : $defaultLimit);
return (int)(isset($paging['pageSize']) ? $paging['pageSize'] : $this->getData('config/pageSize'));
}
}
24 changes: 2 additions & 22 deletions app/code/Magento/Ui/Test/Unit/Component/PagingTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,31 +81,11 @@ public function testPrepare()
],
'config' => [
'options' => [
[
'value' => 20,
'label' => 20
],
[
'value' => 30,
'label' => 30
],
[
'value' => 50,
'label' => 50
],
[
'value' => 100,
'label' => 100
],
[
'value' => 200,
'label' => 200
],
[
'options1' => [
'value' => 20,
'label' => 'options1'
],
[
'options2' => [
'value' => 40,
'label' => 'options2'
],
Expand Down
13 changes: 8 additions & 5 deletions app/code/Magento/Ui/view/base/web/js/grid/paging/paging.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ define([
template: 'ui/grid/paging/paging',
totalTmpl: 'ui/grid/paging-total',
totalRecords: 0,
pageSize: 20,
pages: 1,
current: 1,
selectProvider: 'ns = ${ $.ns }, index = ids',
Expand All @@ -35,7 +34,6 @@ define([
},

imports: {
pageSize: '${ $.sizesConfig.name }:value',
totalSelected: '${ $.selectProvider }:totalSelected',
totalRecords: '${ $.provider }:data.totalRecords',
filters: '${ $.provider }:params.filters'
Expand All @@ -46,6 +44,11 @@ define([
current: '${ $.provider }:params.paging.current'
},

links: {
options: '${ $.sizesConfig.name }:options',
pageSize: '${ $.sizesConfig.name }:value'
},

statefull: {
pageSize: true,
current: true
Expand Down Expand Up @@ -231,10 +234,10 @@ define([
* previous and current page size values.
*/
updateCursor: function () {
var cursor = this.current - 1,
size = this.pageSize,
var cursor = this.current - 1,
size = this.pageSize,
oldSize = _.isUndefined(this.previousSize) ? this.pageSize : this.previousSize,
delta = cursor * (oldSize - size) / size;
delta = cursor * (oldSize - size) / size;

delta = size > oldSize ?
Math.ceil(delta) :
Expand Down
23 changes: 0 additions & 23 deletions app/code/Magento/Ui/view/base/web/js/grid/paging/sizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,8 @@ define([
return Element.extend({
defaults: {
template: 'ui/grid/paging/sizes',
value: 20,
minSize: 1,
maxSize: 999,
options: {
'20': {
value: 20,
label: 20
},
'30': {
value: 30,
label: 30
},
'50': {
value: 50,
label: 50
},
'100': {
value: 100,
label: 100
},
'200': {
value: 200,
label: 200
}
},
statefull: {
options: true,
value: true
Expand Down
12 changes: 6 additions & 6 deletions lib/internal/Magento/Framework/View/Layout/Generator/UiComponent.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

namespace Magento\Framework\View\Layout\Generator;

use Magento\Framework\View\Element\BlockFactory;
Expand Down Expand Up @@ -65,7 +66,7 @@ public function __construct(
}

/**
* {@inheritdoc}
* @inheritdoc
*/
public function getType()
{
Expand All @@ -90,18 +91,17 @@ public function process(ReaderContext $readerContext, GeneratorContext $generato
$layout = $generatorContext->getLayout();

// Instantiate blocks and collect all actions data
/** @var $blocks \Magento\Framework\View\Element\AbstractBlock[] */
$blocks = [];
foreach ($scheduledElements as $elementName => $element) {
list($elementType, $data) = $element;

if ($elementType !== Element::TYPE_UI_COMPONENT) {
continue;
}

$block = $this->generateComponent($structure, $elementName, $data, $layout);
$blocks[$elementName] = $block;
$layout->setBlock($elementName, $block);
$layout->setBlock(
$elementName,
$this->generateComponent($structure, $elementName, $data, $layout)
);
$scheduledStructure->unsetElement($elementName);
}

Expand Down