Merge pull request #1255 from rbayet/feature/search_category_products…

…_preview Feature/search category products preview
Smile-SA · Jan 10, 2019 · ea19e18 · ea19e18
2 parents df1cb18 + eb51120
commit ea19e18
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 23 deletions.
diff --git a/src/module-elasticsuite-catalog/Model/ProductSorter/AbstractPreview.php b/src/module-elasticsuite-catalog/Model/ProductSorter/AbstractPreview.php
@@ -42,6 +42,11 @@ abstract class AbstractPreview implements PreviewInterface
      */
     private $size;
 
+    /**
+     * @var string
+     */
+    private $search;
+
     /**
      * @var integer
      */
@@ -59,20 +64,23 @@ abstract class AbstractPreview implements PreviewInterface
      * @param ItemDataFactory          $itemFactory       Preview item factory.
      * @param QueryFactory             $queryFactory      ES query factory.
      * @param integer                  $storeId           Store id.
-     * @param number                   $size              Preview size.
+     * @param integer                  $size              Preview size.
+     * @param string                   $search            Preview search.
      */
     public function __construct(
         ProductCollectionFactory $collectionFactory,
         ItemDataFactory $itemFactory,
         QueryFactory $queryFactory,
         $storeId,
-        $size = 10
+        $size = 10,
+        $search = ''
     ) {
         $this->collectionFactory = $collectionFactory;
         $this->itemFactory       = $itemFactory;
         $this->queryFactory      = $queryFactory;
         $this->storeId           = $storeId;
         $this->size              = $size;
+        $this->search            = $search;
     }
 
     /**
@@ -147,7 +155,10 @@ private function getProductCollection()
      */
     private function getUnsortedProductData()
     {
-        $productCollection = $this->getProductCollection()->setPageSize($this->size);
+        $productCollection = $this->getProductCollection()
+            ->setSearchQuery($this->search)
+            ->setPageSize($this->size)
+        ;
 
         return ['products' => $productCollection->getItems(), 'size' => $productCollection->getSize()];
     }

diff --git a/src/module-elasticsuite-catalog/i18n/de_DE.csv b/src/module-elasticsuite-catalog/i18n/de_DE.csv
@@ -77,3 +77,5 @@ Pinned,Angeheftet
 Products,Produkte
 Categories,Kategorien
 Attributes,Attribute
+"Clear search","Suche abbrechen"
+"Your search returned no results.","Ihre Suche ergab keine Treffer."
diff --git a/src/module-elasticsuite-catalog/i18n/en_US.csv b/src/module-elasticsuite-catalog/i18n/en_US.csv
@@ -77,3 +77,5 @@ Pinned,Pinned
 Products,Products
 Categories,Categories
 Attributes,Attributes
+"Clear search","Clear search"
+"Your search returned no results.","Your search returned no results."
diff --git a/src/module-elasticsuite-catalog/i18n/fr_FR.csv b/src/module-elasticsuite-catalog/i18n/fr_FR.csv
@@ -77,3 +77,5 @@ No,Non
 Products,Produits
 Categories,Catégories
 Attributes,Attributs
+"Clear search","Annuler la recherche"
+"Your search returned no results.","Votre recherche n'a donné aucun résultat."
diff --git a/src/module-elasticsuite-catalog/view/adminhtml/ui_component/search_term_preview.xml b/src/module-elasticsuite-catalog/view/adminhtml/ui_component/search_term_preview.xml
@@ -81,6 +81,7 @@
                         <item name="pageSize" xsi:type="string">20</item>
                         <item name="forceLoading" xsi:type="boolean">true</item>
                         <item name="allowBlacklist" xsi:type="boolean">true</item>
+                        <item name="allowSearch" xsi:type="boolean">false</item>
                         <item name="messages" xsi:type="array">
                             <item name="emptyText" xsi:type="string" translate="true"><![CDATA[No search result for the current search.]]></item>
                         </item>

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less b/src/module-elasticsuite-catalog/view/adminhtml/web/css/source/_module.less
@@ -22,6 +22,12 @@
         letter-spacing: .025em;
     }
 
+    .top-search {
+        a.action-reset {
+            margin: 0 1rem;
+        }
+    }
+
     .bottom-links {
         clear: both;
         width: 40%;

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js b/src/module-elasticsuite-catalog/view/adminhtml/web/js/form/element/product-sorter.js
@@ -16,8 +16,9 @@ define([
     'Magento_Ui/js/form/element/abstract',
     'jquery',
     'Smile_ElasticsuiteCatalog/js/form/element/product-sorter/item',
-    'MutationObserver'
-], function (Component, $, Product) {
+    'MutationObserver',
+    'ko'
+], function (Component, $, Product, MutationObserver, ko) {
     'use strict';
 
     return Component.extend({
@@ -38,10 +39,14 @@ define([
                 emptyText     : $.mage.__('Your product selection is empty.'),
                 automaticSort : $.mage.__('Automatic Sort'),
                 manualSort    : $.mage.__('Manual Sort'),
+                search        : $.mage.__('Search'),
+                clearSearch   : $.mage.__('Clear search'),
+                noResultsText : $.mage.__('Your search returned no results.'),
                 showMore      : $.mage.__('Show more')
             },
             forceLoading : false,
             allowBlacklist : false,
+            allowSearch: false,
             blacklistedProducts: [],
             modules: {
                 provider: '${ $.provider }'
@@ -59,6 +64,7 @@ define([
             this.pageSize           = parseInt(this.pageSize, 10);
             this.currentSize        = this.pageSize;
             this.enabled            = this.loadUrl != null;
+            this.search             = ko.observable("");
 
             this.observe(['products', 'countTotalProducts', 'currentSize', 'editPositions', 'loading', 'showSpinner', 'blacklistedProducts']);
 
@@ -93,7 +99,7 @@ define([
                 });
             }
         },
-        
+
         refreshProductList: function () {
             if (this.refreshRateLimiter !== undefined) {
                 clearTimeout();
@@ -108,26 +114,27 @@ define([
                 }.bind(this));
 
                 formData['page_size'] = this.currentSize();
+                formData['search'] = this.search();
 
                 if (this.enabled) {
                     this.loadXhr = $.post(this.loadUrl, this.formData, this.onProductListLoad.bind(this));
                 }
             }.bind(this), this.maxRefreshInterval);
         },
-        
+
         onProductListLoad: function (loadedData) {
             var products = this.sortProduct(loadedData.products.map(this.createProduct.bind(this)));
             this.products(products);
             this.countTotalProducts(parseInt(loadedData.size, 10));
             this.currentSize(Math.max(this.currentSize(), this.products().length));
-            
+
             var productIds = products.map(function (product) { return product.getId() });
             var editPositions = this.editPositions();
 
             for (var productId in editPositions) {
                 if ($.inArray(parseInt(productId, 10), productIds) < 0) {
                     delete editPositions[productId];
-                } 
+                }
             }
 
             this.editPositions(editPositions);
@@ -155,6 +162,24 @@ define([
             return this.products().length < this.countTotalProducts();
         },
 
+        enterSearch: function (d, e) {
+            e.keyCode === 13 && this.refreshProductList();
+            return true;
+        },
+
+        resetSearch: function () {
+            this.search('');
+            this.refreshProductList();
+        },
+
+        hasSearch: function () {
+            return (this.search() !== '');
+        },
+
+        searchProducts: function () {
+            this.refreshProductList();
+        },
+
         showMoreProducts: function () {
             this.currentSize(this.currentSize() + this.pageSize);
             this.refreshProductList();
@@ -216,11 +241,11 @@ define([
             this.products(this.sortProduct(products));
             this.editPositions(editPositions);
         },
-        
+
         toggleSortType: function (product) {
             var products      = this.products();
             var editPositions = this.editPositions();
-            
+
             if (product.getPosition() !== undefined) {
                 var lastProduct = products[products.length -1];
                 if (lastProduct.hasPosition() || lastProduct.getScore() >= product.getScore()) {

diff --git a/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html b/src/module-elasticsuite-catalog/view/adminhtml/web/template/form/element/product-sorter.html
@@ -7,20 +7,27 @@
     </div>
 
     <input type="hidden" data-bind="value: value, attr: {name: inputName}"/>
-    
+
     <span class="title" data-bind="text: label"></span>
-    
+
     <div class="elasticsuite-admin-product-sorter-empty" data-bind="if: !hasProducts()">
         <div class="message message-info">
-            <div data-bind="html: messages.emptyText"></div>
+            <div data-bind="html: messages.emptyText" visible="!hasSearch()"></div>
+            <div data-bind="html: messages.noResultsText" visible="hasSearch()"></div>
         </div>
     </div>
-
+
+    <p class="top-search" data-bind="if: allowSearch && (hasProducts() || hasSearch())">
+        <input type="text" id="elasticsuite-preview-search" class="admin__control-text" data-bind="textInput : search, event: {keypress: enterSearch}"/>
+        <a href="#" data-bind="click: searchProducts, text: messages.search" class="action-default action-search"></a>
+        <a href="#" visible="search" data-bind="click: resetSearch, text: messages.clearSearch" class="action-reset"></a>
+    </p>
+
     <div data-bind="if: hasProducts()">
-        
+
         <ul data-bind="foreach: products, afterRender: enableSortableList" class="product-list">
             <li class="product-list-item" data-bind="
-                attr: {'data-product-id': getId()}, 
+                attr: {'data-product-id': getId()},
                 css: {'manual-sorting': hasPosition(), 'automatic-sorting': !hasPosition(), 'blacklisted': isBlacklisted() }
             ">
                 <div class="draggable-handle" data-bind="if: hasPosition()"></div>
@@ -29,14 +36,14 @@
                 </div>
 
                 <div class="product-image"><img data-bind="attr: { src: getImageUrl() }" /></div>
-    
+
                 <div class="info">
                     <h1><span data-bind="html: getName(), attr: {title: getName()"></span></h1>
                     <p class="sku" data-bind="text: getSku()"></p>
                     <p class="price" data-bind="text: getFormattedPrice()"></p>
                     <p class="stock" data-bind="text: getStockLabel()"></p>
                 </div>
-                
+
                 <div class="admin__actions-switch" data-role="switcher" data-bind="click: $parent.toggleSortType.bind($parent)">
                     <input type="checkbox" class="admin__actions-switch-checkbox" simple-checked="hasPosition()" ko-value="hasPosition()" />
                     <label class="admin__actions-switch-label">
@@ -47,7 +54,7 @@ <h1><span data-bind="html: getName(), attr: {title: getName()"></span></h1>
                 </div>
             </li>
         </ul>
-    
+
         <p class="bottom-links" data-bind="visible: hasMoreProducts()">
             <a href="#" data-bind="click: showMoreProducts, text: messages.showMore" class="show-more-link"></a>
         </p>

diff --git a/src/module-elasticsuite-virtual-category/Controller/Adminhtml/Category/Virtual/Preview.php b/src/module-elasticsuite-virtual-category/Controller/Adminhtml/Category/Virtual/Preview.php
@@ -92,8 +92,9 @@ private function getPreviewObject()
     {
         $category = $this->getCategory();
         $pageSize = $this->getPageSize();
+        $search = $this->getRequest()->getParam('search');
 
-        return $this->previewModelFactory->create(['category' => $category, 'size' => $pageSize]);
+        return $this->previewModelFactory->create(['category' => $category, 'size' => $pageSize, 'search' => $search]);
     }
 
     /**

diff --git a/src/module-elasticsuite-virtual-category/Model/Preview.php b/src/module-elasticsuite-virtual-category/Model/Preview.php
@@ -50,15 +50,17 @@ class Preview extends \Smile\ElasticsuiteCatalog\Model\ProductSorter\AbstractPre
      * @param ItemDataFactory           $previewItemFactory       Preview item factory.
      * @param QueryFactory              $queryFactory             QueryInterface factory.
      * @param int                       $size                     Preview size.
+     * @param string                    $search                   Preview search.
      */
     public function __construct(
         CategoryInterface $category,
         FulltextCollectionFactory $productCollectionFactory,
         ItemDataFactory $previewItemFactory,
         QueryFactory $queryFactory,
-        $size = 10
+        $size = 10,
+        $search = ''
     ) {
-        parent::__construct($productCollectionFactory, $previewItemFactory, $queryFactory, $category->getStoreId(), $size);
+        parent::__construct($productCollectionFactory, $previewItemFactory, $queryFactory, $category->getStoreId(), $size, $search);
         $this->category     = $category;
         $this->queryFactory = $queryFactory;
     }

diff --git a/src/module-elasticsuite-virtual-category/view/adminhtml/ui_component/category_form.xml b/src/module-elasticsuite-virtual-category/view/adminhtml/ui_component/category_form.xml
@@ -143,6 +143,7 @@
                         <item name="dataScope" xsi:type="string">sorted_products</item>
                         <item name="pageSize" xsi:type="string">20</item>
                         <item name="allowBlacklist" xsi:type="boolean">true</item>
+                        <item name="allowSearch" xsi:type="boolean">true</item>
                         <item name="messages" xsi:type="array">
                             <item name="emptyText" xsi:type="string" translate="true"><![CDATA[Your product selection is empty for the selected Store View. If you are running a multi-store setup, please check this <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>manual page</a> for more informations.]]></item>
                         </item>