PB-107: Display total number of products matched into ProductsList

 - populate total number of products

Author: cspruiell

app/code/Magento/PageBuilder/Controller/Adminhtml/Form/Element/ProductTotals.php

@@ -134,7 +134,12 @@ private function createCollection()
     public function execute()
     {
         /** @var \Magento\Catalog\Model\ResourceModel\Product\Collection $collection */
-        $collection = $this->createCollection();
+        $collection = $this->createCollection()
+            ->getSelect()->joinLeft(
+                ['link_table' => $collection->getTable('catalog_product_super_link')],
+                'link_table.product_id = e.entity_id',
+                ['product_id']
+            )->where('link_table.product_id IS NULL');
         $totalProducts = $collection->getSize();
         $disabledProducts = $collection
             ->addAttributeToFilter('status', Status::STATUS_DISABLED)

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_products_form.xml

@@ -227,7 +227,7 @@
                     </item>
                 </argument>
                 <settings>
-                    <elementTmpl>ui/form/element/text</elementTmpl>
+                    <elementTmpl>Magento_PageBuilder/form/element/product-totals</elementTmpl>
                     <dataType>text</dataType>
                     <imports>
                         <link name="conditionOption">ns = ${ $.ns }, index = condition_option:value</link>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_import.less

@@ -12,3 +12,4 @@
 @import '_margins-and-padding.less';
 @import 'uploader/preview/_image.less';
 @import '_visual-select.less';
+@import '_product-totals.less';

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_product-totals.less

@@ -0,0 +1,8 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+.admin__data-grid-loading-mask {
+    font-size: 2em;
+}

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/product-totals.js

@@ -31,22 +31,23 @@ define([
                 value: false
             },
             url: null,
-            valuePlaceholder: $t('of %1 (%2 disabled)')
+            valuePlaceholder: $t('of %1 (%2 disabled)'),
+            showSpinner: true,
+            loading: false
         },
 
         /** @inheritdoc */
         initObservable: function () {
             return this._super()
-                .observe('value totalProductCount totalDisabledProducts');
+                .observe('value totalProductCount totalDisabledProducts loading');
         },
 
         /**
          * Update product count.
          *
          */
         updateProductTotals: _.debounce(function () {
-            if (!this.conditionOption || _.isEmpty(this.formData) ||
-                (this.conditionOption === 'sku' && (!this.formData['sku'] || this.formData['sku'] === ''))) {
+            if (!this.conditionOption || _.isEmpty(this.formData)) {
                 return;
             }
 
@@ -57,6 +58,7 @@ define([
             _.extend(this.formData, this.conditionValue);
             conditionsDataProcessor(this.formData, this.conditionOption + '_source');
 
+            this.loading(true);
             $.ajax({
                 url: this.url,
                 method: 'POST',
@@ -71,9 +73,11 @@ define([
                             .replace('%1', this.totalProductCount())
                             .replace('%2', this.totalDisabledProducts())
                     );
+                    this.loading(false);
                 }.bind(this)
             ).fail(function () {
                 this.value($t('An unknown error occurred. Please try again.'));
+                this.loading(false);
             }.bind(this));
         }, 10),
     });

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/product-totals.html

@@ -0,0 +1,22 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div data-role="spinner"
+     class="admin__data-grid-loading-mask"
+     visible="loading"
+     if="showSpinner">
+    <div class="spinner">
+        <span repeat="8"/>
+    </div>
+</div>
+<span class="admin__field-value"
+      data-bind="
+        text: value,
+        attr: {
+            name: inputName,
+            id: uid
+        }">
+</span>