first commit

iadmin/themes/new-theme/js/components/grid/extension/column/catalog/category-position-extension.js

@@ -0,0 +1,166 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * 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.md.
+ * 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://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+
+import 'tablednd/dist/jquery.tablednd.min';
+
+const {$} = window;
+
+/**
+ * Class CategoryPositionExtension extends Grid with reorderable category positions
+ */
+export default class CategoryPositionExtension {
+  constructor() {
+    return {
+      extend: (grid) => this.extend(grid),
+    };
+  }
+
+  /**
+   * Extend grid
+   *
+   * @param {Grid} grid
+   */
+  extend(grid) {
+    this.grid = grid;
+
+    this.addIdsToGridTableRows();
+
+    grid.getContainer().find('.js-grid-table').tableDnD({
+      dragHandle: '.js-drag-handle',
+      onDragClass: 'dragging-row',
+      onDragStart: () => {
+        this.originalPositions = decodeURIComponent($.tableDnD.serialize());
+      },
+      onDrop: (table, row) => this.handleCategoryPositionChange(row),
+    });
+  }
+
+  /**
+   * When position is changed handle update
+   *
+   * @param {HTMLElement} row
+   *
+   * @private
+   */
+  handleCategoryPositionChange(row) {
+    const positions = decodeURIComponent($.tableDnD.serialize());
+    const way = (this.originalPositions.indexOf(row.id) < positions.indexOf(row.id)) ? 1 : 0;
+
+    const $categoryPositionContainer = $(row).find(`.js-${this.grid.getId()}-position:first`);
+
+    const categoryId = $categoryPositionContainer.data('id');
+    const categoryParentId = $categoryPositionContainer.data('id-parent');
+    const positionUpdateUrl = $categoryPositionContainer.data('position-update-url');
+
+    let params = positions.replace(new RegExp(`${this.grid.getId()}_grid_table`, 'g'), 'positions');
+
+    const queryParams = {
+      id_category_parent: categoryParentId,
+      id_category_to_move: categoryId,
+      way,
+    };
+
+    if (positions.indexOf('_0&') !== -1) {
+      queryParams.found_first = 1;
+    }
+
+    params += `&${$.param(queryParams)}`;
+
+    this.updateCategoryPosition(positionUpdateUrl, params);
+  }
+
+  /**
+   * Add ID's to Grid table rows to make tableDnD.onDrop() function work.
+   *
+   * @private
+   */
+  addIdsToGridTableRows() {
+    this.grid.getContainer()
+      .find('.js-grid-table')
+      .find(`.js-${this.grid.getId()}-position`)
+      .each((index, positionWrapper) => {
+        const $positionWrapper = $(positionWrapper);
+
+        const categoryId = $positionWrapper.data('id');
+        const categoryParentId = $positionWrapper.data('id-parent');
+        const position = $positionWrapper.data('position');
+
+        const id = `tr_${categoryParentId}_${categoryId}_${position}`;
+
+        $positionWrapper.closest('tr').attr('id', id);
+      });
+  }
+
+  /**
+   * Update categories listing with new positions
+   *
+   * @private
+   */
+  updateCategoryIdsAndPositions() {
+    this.grid.getContainer()
+      .find('.js-grid-table')
+      .find(`.js-${this.grid.getId()}-position`)
+      .each((index, positionWrapper) => {
+        const $positionWrapper = $(positionWrapper);
+        const $row = $positionWrapper.closest('tr');
+
+        const offset = $positionWrapper.data('pagination-offset');
+        const newPosition = offset > 0 ? index + offset : index;
+
+        const oldId = $row.attr('id');
+        $row.attr('id', oldId.replace(/_[0-9]$/g, `_${newPosition}`));
+
+        $positionWrapper.find('.js-position').text(newPosition + 1);
+        $positionWrapper.data('position', newPosition);
+      });
+  }
+
+  /**
+   * Process categories positions update
+   *
+   * @param {String} url
+   * @param {String} params
+   *
+   * @private
+   */
+  updateCategoryPosition(url, params) {
+    $.post({
+      url,
+      headers: {
+        'cache-control': 'no-cache',
+      },
+      data: params,
+      dataType: 'json',
+    }).then((response) => {
+      if (response.success) {
+        window.showSuccessMessage(response.message);
+      } else {
+        window.showErrorMessage(response.message);
+      }
+
+      this.updateCategoryIdsAndPositions();
+    });
+  }
+}

iadmin/themes/new-theme/js/components/grid/extension/column/common/async-toggle-column-extension.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * 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.md.
+ * 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://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+
+const {$} = window;
+
+/**
+ * Class AsyncToggleColumnExtension submits toggle action using AJAX
+ */
+export default class AsyncToggleColumnExtension {
+  constructor() {
+    return {
+      extend: (grid) => this.extend(grid),
+    };
+  }
+
+  /**
+   * Extend grid
+   *
+   * @param {Grid} grid
+   */
+  extend(grid) {
+    grid
+      .getContainer()
+      .find('.js-grid-table')
+      .on('click', '.ps-togglable-row', (event) => {
+        const $button = $(event.currentTarget);
+
+        if (!$button.hasClass('ps-switch')) {
+          event.preventDefault();
+        }
+
+        $.post({
+          url: $button.data('toggle-url'),
+        })
+          .then((response) => {
+            if (response.status) {
+              window.showSuccessMessage(response.message);
+
+              this.toggleButtonDisplay($button);
+
+              return;
+            }
+
+            window.showErrorMessage(response.message);
+          })
+          .catch((error) => {
+            const response = error.responseJSON;
+
+            window.showErrorMessage(response.message);
+          });
+      });
+  }
+
+  /**
+   * Toggle button display from enabled to disabled and other way around
+   *
+   * @param {jQuery} $button
+   *
+   * @private
+   */
+  toggleButtonDisplay($button) {
+    const isActive = $button.hasClass('grid-toggler-icon-valid');
+
+    const classToAdd = isActive ? 'grid-toggler-icon-not-valid' : 'grid-toggler-icon-valid';
+    const classToRemove = isActive ? 'grid-toggler-icon-valid' : 'grid-toggler-icon-not-valid';
+    const icon = isActive ? 'clear' : 'check';
+
+    $button.removeClass(classToRemove);
+    $button.addClass(classToAdd);
+
+    if ($button.hasClass('material-icons')) {
+      $button.text(icon);
+    }
+  }
+}