Skip to content

Commit 9111120

Browse files
devaruldevarul
committed
ACP2E-104: [Magento Cloud] Customizable options Drag and drop issue
1 parent d6756f9 commit 9111120

File tree

3 files changed

+201
-1
lines changed

3 files changed

+201
-1
lines changed

‎app/code/Magento/Catalog/Ui/DataProvider/Product/Form/Modifier/CustomOptions.php

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -661,12 +661,16 @@ protected function getSelectTypeGridConfig($sortOrder)
661661
'config' => [
662662
'addButtonLabel' => __('Add Value'),
663663
'componentType' => DynamicRows::NAME,
664-
'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
664+
'component' => 'Magento_Catalog/js/components/dynamic-rows-per-page',
665+
'template' => 'Magento_Catalog/components/dynamic-rows-per-page',
665666
'additionalClasses' => 'admin__field-wide',
666667
'deleteProperty' => static::FIELD_IS_DELETE,
667668
'deleteValue' => '1',
668669
'renderDefaultRecord' => false,
669670
'sortOrder' => $sortOrder,
671+
'sizesConfig' => [
672+
'enabled' => true
673+
]
670674
],
671675
],
672676
],

‎app/code/Magento/Catalog/view/adminhtml/web/js/components/dynamic-rows-per-page.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'Magento_Ui/js/dynamic-rows/dynamic-rows',
8+
'underscore',
9+
'mageUtils',
10+
'uiLayout'
11+
], function (DynamicRows, _, utils, layout) {
12+
'use strict';
13+
14+
return DynamicRows.extend({
15+
defaults: {
16+
sizesConfig: {
17+
component: 'Magento_Ui/js/grid/paging/sizes',
18+
name: '${ $.name }_sizes',
19+
options: {
20+
'20': {
21+
value: 20,
22+
label: 20
23+
},
24+
'30': {
25+
value: 30,
26+
label: 30
27+
},
28+
'50': {
29+
value: 50,
30+
label: 50
31+
},
32+
'100': {
33+
value: 100,
34+
label: 100
35+
},
36+
'200': {
37+
value: 200,
38+
label: 200
39+
}
40+
},
41+
storageConfig: {
42+
provider: '${ $.storageConfig.provider }',
43+
namespace: '${ $.storageConfig.namespace }'
44+
},
45+
enabled: false
46+
},
47+
links: {
48+
options: '${ $.sizesConfig.name }:options',
49+
perPageSize: '${ $.sizesConfig.name }:value'
50+
},
51+
statefull: {
52+
perPageSize: true
53+
},
54+
listens: {
55+
'perPageSize': 'onPageSizeChange',
56+
},
57+
modules: {
58+
sizes: '${ $.sizesConfig.name }'
59+
}
60+
},
61+
62+
/**
63+
* Initializes paging component.
64+
*
65+
* @returns {Paging} Chainable.
66+
*/
67+
initialize: function () {
68+
this._super()
69+
.initSizes();
70+
71+
return this;
72+
},
73+
74+
/**
75+
* Initializes sizes component.
76+
*
77+
* @returns {Paging} Chainable.
78+
*/
79+
initSizes: function () {
80+
if (this.sizesConfig.enabled) {
81+
layout([this.sizesConfig]);
82+
}
83+
84+
return this;
85+
},
86+
87+
/**
88+
* Initializes observable properties.
89+
*
90+
* @returns {Paging} Chainable.
91+
*/
92+
initObservable: function () {
93+
this._super()
94+
.track([
95+
'perPageSize'
96+
]);
97+
98+
return this;
99+
},
100+
101+
/**
102+
* Handles changes of the page size.
103+
*/
104+
onPageSizeChange: function () {
105+
if(!this.containers.length) {
106+
return;
107+
}
108+
if(this.perPageSize !== undefined) {
109+
this.pageSize = this.perPageSize;
110+
this.reload();
111+
} else {
112+
this.perPageSize = this.pageSize;
113+
}
114+
},
115+
});
116+
});

‎app/code/Magento/Catalog/view/adminhtml/web/template/components/dynamic-rows-per-page.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!--
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<div class="admin__field" visible="visible" disable="disabled" css="element.setClasses(element)">
8+
<label if="element.label" class="admin__field-label" attr="for: element.uid">
9+
<span translate="element.label"></span>
10+
</label>
11+
12+
<div class="admin__field-control" data-role="grid-wrapper" attr="'data-index': index">
13+
<div class="admin__control-table-wrapper" style="overflow-x: visible;" >
14+
<div data-role="spinner"
15+
class="admin__data-grid-loading-mask"
16+
if="$data.showSpinner">
17+
<div class="spinner">
18+
<span repeat="8"></span>
19+
</div>
20+
</div>
21+
22+
<table class="admin__dynamic-rows admin__control-table" data-role="grid" attr="{'data-index': index}">
23+
<thead if="element.columnsHeader">
24+
<tr>
25+
<th if="dndConfig.enabled"></th>
26+
<th repeat="foreach: labels, item: '$label'"
27+
css="setClasses($label())"
28+
visible="$label().visible"
29+
disable="$label().disabled">
30+
<span translate="$label().label"></span>
31+
</th>
32+
</tr>
33+
</thead>
34+
35+
<tbody>
36+
<tr class="data-row" repeat="foreach: elems, item: '$record'">
37+
<td if="dndConfig.enabled"
38+
class="col-draggable"
39+
template="name: dndConfig.template, data: dnd"></td>
40+
41+
<!-- ko foreach: { data: $record().elems(), as: 'elem'} -->
42+
<td if="elem.template"
43+
css="$parent.setClasses(elem)"
44+
visible="elem.visible() && elem.formElement !== 'hidden'"
45+
disable="elem.disabled"
46+
template="elem.template"></td>
47+
<!-- /ko -->
48+
</tr>
49+
</tbody>
50+
51+
<tfoot visible="element.addButton || (!!element.getRecordCount() && pages() > 1)">
52+
<tr>
53+
<td attr="{'colspan': element.getColumnsCount()}"
54+
visible="element.addButton || pages() > 1">
55+
<button if="element.addButton"
56+
attr="{disabled: disabled, 'data-action': 'add_new_row'}"
57+
type="button"
58+
click="processingAddChild.bind($data, false, false, false)">
59+
<span translate="addButtonLabel"></span>
60+
</button>
61+
62+
<div class="admin__data-grid-pager-wrap" afterRender="onPageSizeChange">
63+
<scope args="sizes" render=""></scope>
64+
65+
<div class="admin__control-table-pagination" visible="!!element.getRecordCount() && pages() > 1">
66+
<div class="admin__data-grid-pager">
67+
<button class="action-previous" type="button" data-bind="attr: {title: $t('Previous Page')}, click: previousPage, disable: isFirst()"></button>
68+
<input class="admin__control-text" type="number" data-bind="attr: {id: ++ko.uid}, value: currentPage">
69+
<label class="admin__control-support-text" data-bind="attr: {for: ko.uid}, text: 'of ' + pages()"></label>
70+
<button class="action-next" type="button" data-bind="attr: {title: $t('Next Page')}, click: nextPage, disable: isLast()"></button>
71+
</div>
72+
</div>
73+
</div>
74+
</td>
75+
</tr>
76+
</tfoot>
77+
</table>
78+
</div>
79+
</div>
80+
</div>

0 commit comments

Comments
 (0)