ENGCOM-7210: {ASI} : SortBy component added #26736

Author: VladimirZaets

app/code/Magento/Ui/view/base/web/js/grid/sortBy.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'uiElement'
+], function (Element) {
+    'use strict';
+
+    return Element.extend({
+        defaults: {
+            template: 'ui/grid/sortBy',
+            options: [],
+            applied: {},
+            sorting: 'asc',
+            columnsProvider: 'ns = ${ $.ns }, componentType = columns',
+            selectedOption: '',
+            isVisible: true,
+            listens: {
+                'selectedOption': 'applyChanges'
+            },
+            statefull: {
+                selectedOption: true,
+                applied: true
+            },
+            exports: {
+                applied: '${ $.provider }:params.sorting'
+            },
+            imports: {
+                preparedOptions: '${ $.columnsProvider }:elems'
+            },
+            modules: {
+                columns: '${ $.columnsProvider }'
+            }
+        },
+
+        /**
+         * @inheritdoc
+         */
+        initObservable: function () {
+            return this._super()
+                .observe([
+                    'applied',
+                    'selectedOption',
+                    'isVisible'
+                ]);
+        },
+
+        /**
+         * Prepared sort order options
+         */
+        preparedOptions: function (columns) {
+            if (columns && columns.length > 0) {
+                columns.map(function (column) {
+                    if (column.sortable === true) {
+                        this.options.push({
+                            value: column.index,
+                            label: column.label
+                        });
+                        this.isVisible(true);
+                    } else {
+                        this.isVisible(false);
+                    }
+                }.bind(this));
+            }
+        },
+
+        /**
+         * Apply changes
+         */
+        applyChanges: function () {
+            this.applied({
+                field: this.selectedOption(),
+                direction: this.sorting
+            });
+        }
+    });
+});

app/code/Magento/Ui/view/base/web/templates/grid/sortBy.html

@@ -0,0 +1,15 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div if="isVisible" class="masonry-image-sortby">
+    <b><!-- ko i18n: 'Sort by' --><!-- /ko -->:</b>
+    <select class="admin__control-select" data-bind="
+        options: options,
+        optionsValue: 'value',
+        optionsText: 'label',
+        value: selectedOption
+    "></select>
+</div>

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

@@ -114,5 +114,16 @@
                 }
             }
         }
+
+        &-sortby {
+            select {
+                background-image: url(../images/arrows-bg.svg);
+                border: none;
+                padding-right: 3.2rem;
+                &:active {
+                    background-image+: url('../images/arrows-bg.svg');
+                }
+            }
+        }
     }
 }

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/sortBy.test.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/*eslint max-nested-callbacks: 0*/
+define([
+    'Magento_Ui/js/grid/sortBy'
+], function (SortBy) {
+    'use strict';
+
+    describe('Magento_Ui/js/grid/sortBy', function () {
+
+        var sortByObj;
+
+        beforeEach(function () {
+            sortByObj = new SortBy({
+                options: []
+            });
+        });
+
+        describe('"preparedOptions" method', function () {
+            it('sort option will not available if sorting is disabled for the columns', function () {
+                var columns = {
+                    sortable: false,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.options[0]).toBeUndefined();
+                expect(sortByObj.options[0]).toBeUndefined();
+            });
+
+            it('sort option will available if sorting is enabled for the columns', function () {
+                var columns = {
+                    sortable: true,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.options[0].value).toEqual('name');
+                expect(sortByObj.options[0].label).toEqual('magento');
+            });
+
+            it('return "isVisible" method true if sorting is enabled for column', function () {
+                var columns = {
+                    sortable: true,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.isVisible()).toBeTruthy();
+            });
+
+            it('return "isVisible" method false if sorting is disabled for column', function () {
+                var columns = {
+                    sortable: false,
+                    label: 'magento',
+                    index: 'name'
+                };
+
+                sortByObj.preparedOptions([columns]);
+                expect(sortByObj.isVisible()).toBeFalsy();
+            });
+        });
+        describe('"applyChanges" method', function () {
+            it('return applied options for sorting column', function () {
+                var applied = {
+                    field: 'selectedOption',
+                    direction: 'asc'
+                };
+
+                spyOn(sortByObj, 'selectedOption').and.returnValue('selectedOption');
+                sortByObj.applyChanges();
+                expect(sortByObj.applied()).toEqual(applied);
+                expect(sortByObj.selectedOption).toHaveBeenCalled();
+            });
+        });
+    });
+});