Skip to content

Commit 2d4aadf

Browse files
balex13balex13
authored
Merge pull request #951 from magento-nord/NORD-EXT-PR-31
MAGETWO-63502: A lot of catalog related entities shown in admin product grid column
2 parents 8c4bc8d + a295a30 commit 2d4aadf

File tree

7 files changed

+282
-4
lines changed

7 files changed

+282
-4
lines changed

‎app/code/Magento/Ui/view/base/web/js/grid/columns/expandable.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/**
2+
* Copyright © 2016 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'./column'
7+
], function (Column) {
8+
'use strict';
9+
10+
return Column.extend({
11+
defaults: {
12+
bodyTmpl: 'ui/grid/cells/expandable',
13+
tooltipTmpl: 'ui/grid/cells/expandable/content',
14+
visibeItemsLimit: 5,
15+
tooltipTitle: ''
16+
},
17+
18+
/**
19+
* Gets label from full options array.
20+
*
21+
* @param {Object} record - Record object.
22+
* @returns {String}
23+
*/
24+
getFullLabel: function (record) {
25+
return this.getLabelsArray(record).join(', ');
26+
},
27+
28+
/**
29+
* Gets label from options array limited by 'visibeItemsLimit'.
30+
*
31+
* @param {Object} record - Record object.
32+
* @returns {String}
33+
*/
34+
getShortLabel: function (record) {
35+
return this.getLabelsArray(record).slice(0, this.visibeItemsLimit).join(', ');
36+
},
37+
38+
/**
39+
* Extracts array of labels associated with provided values and sort it alphabetically.
40+
*
41+
* @param {Object} record - Record object.
42+
* @returns {Array}
43+
*/
44+
getLabelsArray: function (record) {
45+
var values = this.getLabel(record),
46+
options = this.options || [],
47+
labels = [];
48+
49+
if (_.isString(values)) {
50+
values = values.split(',');
51+
}
52+
53+
if (!Array.isArray(values)) {
54+
values = [values];
55+
}
56+
57+
values = values.map(function (value) {
58+
return value + '';
59+
});
60+
61+
options = this.flatOptions(options);
62+
63+
options.forEach(function (item) {
64+
if (_.contains(values, item.value + '')) {
65+
labels.push(item.label);
66+
}
67+
});
68+
69+
return labels.sort();
70+
},
71+
72+
/**
73+
* Transformation tree options structure to liner array.
74+
*
75+
* @param {Array} options
76+
* @returns {Array}
77+
*/
78+
flatOptions: function (options) {
79+
var self = this;
80+
81+
return options.reduce(function (options, option) {
82+
if (_.isArray(option.value)) {
83+
options = options.concat(self.flatOptions(option.value));
84+
} else {
85+
options.push(option);
86+
}
87+
88+
return options;
89+
}, []);
90+
},
91+
92+
/**
93+
* Checks if amount of options is more than limit value.
94+
*
95+
* @param {Object} record - Data to be preprocessed.
96+
* @returns {Boolean}
97+
*/
98+
isExpandable: function (record) {
99+
return this.getLabel(record).length > this.visibeItemsLimit;
100+
}
101+
});
102+
});

‎app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/tooltip.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,12 @@ define([
4343
closeButton: false,
4444
showed: false,
4545
strict: true,
46-
center: false
46+
center: false,
47+
closeOnScroll: true
4748
};
4849

4950
tooltipData = {
51+
tooltipClasses: '',
5052
trigger: false,
5153
timeout: 0,
5254
element: false,
@@ -578,9 +580,12 @@ define([
578580
$('.' + config.closeButtonClass).on('click.closeButton', tooltip.destroy.bind(null, id));
579581
}
580582

581-
document.addEventListener('scroll', tooltip.destroy, true);
583+
if (config.closeOnScroll) {
584+
document.addEventListener('scroll', tooltip.destroy, true);
585+
$(window).on('scroll.tooltip', tooltip.outerClick.bind(null, id));
586+
}
587+
582588
$(window).on('keydown.tooltip', tooltip.keydownHandler);
583-
$(window).on('scroll.tooltip', tooltip.outerClick.bind(null, id));
584589
$(window).on('resize.outerClick', tooltip.outerClick.bind(null, id));
585590
},
586591

@@ -666,6 +671,7 @@ define([
666671
$('.' + defaults.closeButtonClass).off('click.closeButton');
667672
tooltipData.trigger.off('mousemove.track');
668673
document.removeEventListener('scroll', tooltip.destroy, true);
674+
$(window).off('scroll.tooltip');
669675
$(window).off(CLICK_EVENT + '.outerClick');
670676
$(window).off('keydown.tooltip');
671677
$(window).off('resize.outerClick');

‎app/code/Magento/Ui/view/base/web/templates/grid/cells/expandable.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
/**
3+
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<div class="data-grid-cell-content">
8+
<span text="$col.getFullLabel($row())" ifnot="$col.isExpandable($row())"/>
9+
10+
<div if="$col.isExpandable($row())">
11+
<div text="$col.getShortLabel($row())" class="admin__control-short-label" />
12+
<a attr="'data-tooltip-trigger': ++ko.uid" translate="'Show more'"/>
13+
<div
14+
tooltip="
15+
tooltipClasses: 'data-grid-column-tooltip',
16+
trigger: '[data-tooltip-trigger=' + ko.uid + ']',
17+
action: 'click',
18+
delay: 0,
19+
center: true,
20+
position: 'top',
21+
closeButton: true,
22+
closeOnScroll: false
23+
">
24+
<div render="$data.tooltipTmpl"/>
25+
</div>
26+
</div>
27+
</div>

‎app/code/Magento/Ui/view/base/web/templates/grid/cells/expandable/content.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!--
2+
/**
3+
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<div class="admin__tooltip-title" if="$data.tooltipTitle.length">
8+
<span translate="$data.tooltipTitle"/>
9+
</div>
10+
<ul class="items">
11+
<li class="item" repeat="foreach: $col.getLabelsArray($row()), item: '$item'">
12+
<span text="$item()"/>
13+
</li>
14+
</ul>

‎app/code/Magento/Ui/view/base/web/templates/tooltip/tooltip.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* See COPYING.txt for license details.
55
*/
66
-->
7-
<div data-tooltip="tooltip-wrapper" class="data-tooltip-wrapper">
7+
<div data-tooltip="tooltip-wrapper" class="data-tooltip-wrapper <%= data.tooltipClasses %>">
88
<div class="data-tooltip-tail"></div>
99
<div class="data-tooltip">
1010
<% if(data.closeButton){ %>

‎app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/_data-grid.less

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@
1515
@data-grid-row-changed__icon: @icon-edit__content;
1616
@data-grid-row-changed-tooltip__background: @color-white-fog2;
1717

18+
@data-grid-tooltip__background-color: @color-lazy-sun;
19+
@data-grid-tooltip__border-color: @color-dark-grayish-orange;
20+
@data-grid-tooltip__box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
21+
@data-grid-tooltip-content__width: 24rem;
22+
@data-grid-tooltip__z-index: @z-index-1;
23+
1824
//
1925
// Components
2026
// ---------------------------------------------
@@ -1002,6 +1008,57 @@ body._in-resize {
10021008
}
10031009
}
10041010

1011+
// Column with tooltip
1012+
.data-grid-column-tooltip {
1013+
z-index: @data-grid-tooltip__z-index;
1014+
1015+
.data-tooltip {
1016+
background-color: @data-grid-tooltip__background-color;
1017+
border-color: @data-grid-tooltip__border-color;
1018+
box-shadow: @data-grid-tooltip__box-shadow;
1019+
min-width: @data-grid-tooltip-content__width;
1020+
padding: 1.5rem;
1021+
1022+
.action-close {
1023+
padding: 1.5rem;
1024+
right: 0;
1025+
top: 0;
1026+
}
1027+
}
1028+
1029+
.data-tooltip-tail {
1030+
&:before {
1031+
background-color: @data-grid-tooltip__background-color;
1032+
border-color: @data-grid-tooltip__border-color;
1033+
box-shadow: @data-grid-tooltip__box-shadow;
1034+
}
1035+
1036+
&:after {
1037+
background-color: @data-grid-tooltip__background-color;
1038+
}
1039+
}
1040+
1041+
.data-tooltip-content {
1042+
.items {
1043+
max-height: 24rem;
1044+
overflow-y: auto;
1045+
1046+
.item {
1047+
margin-bottom: .5rem;
1048+
}
1049+
}
1050+
}
1051+
1052+
.admin__tooltip-title {
1053+
font-weight: @font-weight__bold;
1054+
margin-bottom: 1rem;
1055+
}
1056+
}
1057+
1058+
.admin__control-short-label {
1059+
margin-bottom: @indent__s;
1060+
}
1061+
10051062
// Fix for Not whole column area is clickable in data-grid.
10061063
// Purpose to expand clickable area for new data-grids.
10071064
.admin__data-grid-outer-wrap {

‎dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/columns/expandable.test.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define([
7+
'Magento_Ui/js/grid/columns/expandable'
8+
], function (Expandable) {
9+
'use strict';
10+
11+
describe('Ui/js/grid/columns/expandable', function () {
12+
var expandable, record;
13+
14+
beforeEach(function () {
15+
expandable = new Expandable({
16+
index: 'shared_catalog',
17+
visibeItemsLimit: 1,
18+
options: []
19+
});
20+
record = {
21+
'entity_id': '3',
22+
'row_id': '3',
23+
'shared_catalog': []
24+
};
25+
});
26+
27+
describe('getFullLabel method', function () {
28+
it('get label while options are empty', function () {
29+
expect(expandable.getFullLabel(record)).toBe('');
30+
});
31+
32+
it('get label after options are set', function () {
33+
record['shared_catalog'].push(1);
34+
expandable.options.push({
35+
label: 'Default',
36+
value: '1'
37+
});
38+
expect(expandable.getFullLabel(record)).toBe('Default');
39+
});
40+
41+
it('check if getLabelsArray have been called', function () {
42+
spyOn(expandable, 'getLabelsArray').and.returnValues(['Default', 'Custom']);
43+
expandable.getFullLabel(record);
44+
expect(expandable.getLabelsArray).toHaveBeenCalled();
45+
});
46+
});
47+
48+
describe('getShortLabel method', function () {
49+
it('get label while options are empty', function () {
50+
expect(expandable.getShortLabel(record)).toBe('');
51+
});
52+
});
53+
54+
describe('isExpandable method', function () {
55+
it('check if label is not expandable', function () {
56+
expect(expandable.isExpandable(record)).toBe(false);
57+
});
58+
59+
it('check if label is expandable', function () {
60+
record['shared_catalog'].push(1);
61+
record['shared_catalog'].push(2);
62+
expect(expandable.isExpandable(record)).toBe(true);
63+
});
64+
65+
it('check if getLabel have been called', function () {
66+
spyOn(expandable, 'getLabel').and.returnValues('1', '2');
67+
expandable.isExpandable(record);
68+
expect(expandable.getLabel).toHaveBeenCalled();
69+
});
70+
});
71+
});
72+
});

0 commit comments

Comments
 (0)