Allow opening hidden products in preview block

admin-dev/themes/new-theme/js/components/grid/extension/preview-extension.js

@@ -29,12 +29,13 @@ const $ = window.$;
  * Extends grid with preview functionality.
  */
 export default class PreviewExtension {
-  constructor() {
+  constructor(previewCustomization) {
     this.lock = [];
     this.expandSelector = '.js-expand';
     this.collapseSelector = '.js-collapse';
     this.previewOpenClass = 'preview-open';
     this.previewToggleSelector = '.preview-toggle';
+    this.previewCustomization = previewCustomization;
   }
 
   /**
@@ -47,6 +48,10 @@ export default class PreviewExtension {
 
     this.$gridContainer.find('tbody tr').on('mouseover mouseleave', event => this._handleIconHovering(event));
     this.$gridContainer.find(this.previewToggleSelector).on('click', event => this._togglePreview(event));
+
+    if (typeof this.previewCustomization === 'function') {
+      this.previewCustomization(this.$gridContainer);
+    }
   }
 
   /**

admin-dev/themes/new-theme/js/pages/order/index.js

@@ -36,6 +36,7 @@ import FiltersSubmitButtonEnablerExtension
   from '../../components/grid/extension/filters-submit-button-enabler-extension';
 import ModalFormSubmitExtension from '../../components/grid/extension/modal-form-submit-extension';
 import PreviewExtension from '../../components/grid/extension/preview-extension';
+import previewProductsToggler from './preview-products-toggler';
 
 const $ = window.$;
 
@@ -51,5 +52,5 @@ $(() => {
   orderGrid.addExtension(new BulkActionCheckboxExtension());
   orderGrid.addExtension(new FiltersSubmitButtonEnablerExtension());
   orderGrid.addExtension(new ModalFormSubmitExtension());
-  orderGrid.addExtension(new PreviewExtension());
+  orderGrid.addExtension(new PreviewExtension(previewProductsToggler));
 });

admin-dev/themes/new-theme/js/pages/order/preview-products-toggler.js

@@ -0,0 +1,43 @@
+/**
+ * 2007-2019 PrestaShop SA and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2019 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ */
+
+const $ = window.$;
+
+/**
+ * Toggles hidden products in order preview block.
+ *
+ * @param {jQuery} $gridContainer
+ */
+export default function previewProductsToggler($gridContainer) {
+  $gridContainer.on('click', '.js-preview-more-products-btn', (event) => {
+    event.preventDefault();
+
+    const $btn = $(event.currentTarget);
+    const $hiddenProducts = $btn.closest('tbody').find('.js-product-preview-more');
+
+    $hiddenProducts.removeClass('d-none');
+    $btn.closest('tr').remove();
+  });
+}

src/PrestaShopBundle/Resources/views/Admin/Sell/Order/Order/preview.html.twig

@@ -120,30 +120,37 @@
           </thead>
           <tbody>
           {% for productDetail in orderPreview.productDetails %}
-            {% if loop.index <= productsPreviewLimit %}
-              <tr>
-                <td class="p-1">{{ productDetail.name }}</td>
-                <td class="p-1">{{ productDetail.reference }}</td>
-                <td class="p-1">
-                  {% if productDetail.location is not empty %}{{ productDetail.location }}{% else %}-{% endif %}
-                </td>
-                <td class="p-1 text-center">{{ productDetail.totalTax }}</td>
-                <td class="p-1 text-center">{{ productDetail.quantity }}</td>
-                <td class="p-1 text-center">{{ productDetail.totalPrice }}</td>
-              </tr>
-            {% endif %}
+            <tr class="{% if loop.index > productsPreviewLimit %}js-product-preview-more d-none{% endif %}">
+              <td class="p-1">{{ productDetail.name }}</td>
+              <td class="p-1">{{ productDetail.reference }}</td>
+              <td class="p-1">
+                {% if productDetail.location is not empty %}{{ productDetail.location }}{% else %}-{% endif %}
+              </td>
+              <td class="p-1 text-center">{{ productDetail.totalTax }}</td>
+              <td class="p-1 text-center">{{ productDetail.quantity }}</td>
+              <td class="p-1 text-center">{{ productDetail.totalPrice }}</td>
+            </tr>
           {% endfor %}
+
+          {% if orderPreview.productDetails|length > productsPreviewLimit %}
+            <tr>
+              <td colspan="6">
+                <a href="#" class="js-preview-more-products-btn text-dark">
+                  <i class="material-icons">more_horiz</i>
+                  {{ '(%count% more)'|trans({
+                    '%count%': orderPreview.productDetails|length - productsPreviewLimit
+                  }, 'Admin.Global') }}
+                </a>
+              </td>
+            </tr>
+          {% endif %}
           </tbody>
         </table>
       </div>
 
       <div class="text-right">
         <a href="{{ path('admin_orders_view', {'orderId': orderId}) }}" class="btn btn-primary btn-sm">
-          {% if orderPreview.productDetails|length > productsPreviewLimit %}
-            {{ 'View the other %count% products'|trans({'%count%': orderPreview.productDetails|length - productsPreviewLimit}, 'Admin.Orderscustomers.Feature') }}
-          {% else %}
-            {{ 'Order details'|trans({}, 'Admin.Orderscustomers.Feature') }}
-          {% endif %}
+          {{ 'Open order'|trans({}, 'Admin.Orderscustomers.Feature') }}
           <i class="material-icons">arrow_right_alt</i>
         </a>
       </div>