Migrate "Design > Image Settings"

admin-dev/themes/new-theme/.webpack/common.js

@@ -158,6 +158,7 @@ module.exports = {
     country: './js/pages/country',
     country_form: './js/pages/country/form',
     create_product: './js/pages/product/create/create-product',
+    image_settings: './js/pages/image-settings',
     create_product_default_theme: './scss/pages/product/create_product_default_theme.scss',
     cart: './js/pages/cart',
   },

admin-dev/themes/new-theme/js/components/grid/extension/action/row/image_type/delete-image-type-row-action-extension.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 {Grid} from '@js/types/grid';
+import GridMap from '@components/grid/grid-map';
+
+const {$} = window;
+
+/**
+ * Class DeleteCustomerRowActionExtension handles submitting of row action
+ */
+export default class DeleteImageTypeRowActionExtension {
+  /**
+   * Extend grid
+   *
+   * @param {Grid} grid
+   */
+  extend(grid: Grid): void {
+    grid
+      .getContainer()
+      .on('click', GridMap.rows.imageTypeDeleteAction, (event) => {
+        event.preventDefault();
+
+        const $button = $(event.currentTarget);
+        const $deleteImageTypeModal = $(GridMap.rows.deleteImageTypeModal(grid.getId()));
+        $deleteImageTypeModal.modal('show');
+
+        $deleteImageTypeModal.on('click', GridMap.rows.submitDeleteImageType, () => {
+          const $form = $deleteImageTypeModal.find('form');
+          $form.attr('action', $button.data('delete-url'));
+          $form.submit();
+        });
+      });
+  }
+}

admin-dev/themes/new-theme/js/components/grid/grid-map.ts

@@ -52,6 +52,9 @@ export default {
     linkRowActionClickableFirst:
       '.js-link-row-action[data-clickable-row=1]:first',
     clickableTd: 'td.clickable',
+    imageTypeDeleteAction: '.js-delete-image-type-row-action',
+    deleteImageTypeModal: (id: string): string => `#${id}_grid_delete_image_type_modal`,
+    submitDeleteImageType: '.js-submit-delete-image-type',
   },
   actions: {
     showQuery: '.js-common_show_query-grid-action',

admin-dev/themes/new-theme/js/pages/image-settings/index.ts

@@ -0,0 +1,115 @@
+/**
+ * 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 Grid from '@components/grid/grid';
+import FiltersResetExtension from '@components/grid/extension/filters-reset-extension';
+import ReloadListActionExtension from '@components/grid/extension/reload-list-extension';
+import ExportToSqlManagerExtension from '@components/grid/extension/export-to-sql-manager-extension';
+import SortingExtension from '@components/grid/extension/sorting-extension';
+import BulkActionCheckboxExtension from '@components/grid/extension/bulk-action-checkbox-extension';
+import SubmitBulkExtension from '@components/grid/extension/submit-bulk-action-extension';
+import FiltersSubmitButtonEnablerExtension from '@components/grid/extension/filters-submit-button-enabler-extension';
+import ChoiceExtension from '@components/grid/extension/choice-extension';
+import LinkRowActionExtension from '@components/grid/extension/link-row-action-extension';
+import ColumnTogglingExtension from '@components/grid/extension/column-toggling-extension';
+import SubmitRowActionExtension from '@components/grid/extension/action/row/submit-row-action-extension';
+import DeleteImageTypeRowActionExtension
+  from '@components/grid/extension/action/row/image_type/delete-image-type-row-action-extension';
+import ConfirmModal from '@components/modal/confirm-modal';
+
+const {$} = window;
+
+$(() => {
+  // Init image type grid
+  const grid = new Grid('image_type');
+  grid.addExtension(new FiltersResetExtension());
+  grid.addExtension(new ReloadListActionExtension());
+  grid.addExtension(new ExportToSqlManagerExtension());
+  grid.addExtension(new SortingExtension());
+  grid.addExtension(new LinkRowActionExtension());
+  grid.addExtension(new SubmitBulkExtension());
+  grid.addExtension(new BulkActionCheckboxExtension());
+  grid.addExtension(new FiltersSubmitButtonEnablerExtension());
+  grid.addExtension(new ChoiceExtension());
+  grid.addExtension(new ColumnTogglingExtension());
+  grid.addExtension(new SubmitRowActionExtension());
+  grid.addExtension(new DeleteImageTypeRowActionExtension());
+
+  // Regenerate thumbnails system
+  const $regenerateThumbnailsForm = $('form[name=regenerate_thumbnails]');
+  const $regenerateThumbnailsButton = $('#regenerate-thumbnails-button');
+  const $selectImage = $('#regenerate_thumbnails_image');
+  const $selectImageType = $('#regenerate_thumbnails_image-type');
+  const $parentImageFormat = $selectImageType.parents('.form-group');
+  const formatsByTypes = $selectImage.data('formats');
+
+  // First hide the image format select
+  $parentImageFormat.hide();
+
+  // On image type change, show the image format by the type selected
+  $selectImage.on('change', () => {
+    const selectedImage: string = ($selectImage.val() ?? 'all').toString();
+
+    // Reset format selector
+    $selectImageType.val(0);
+    $selectImageType.children('option').hide();
+
+    // If all is selected, hide the format selector
+    if (selectedImage === 'all') {
+      $parentImageFormat.hide();
+    } else {
+      // Else show the format selector...
+      $parentImageFormat.show();
+      // and the formats by the type selected
+      formatsByTypes[selectedImage].forEach((formatId: number) => {
+        $selectImageType.children(`option[value="${formatId}"]`).show();
+      });
+      // Don't forget to show the "all" option
+      $selectImageType.children('option[value="0"]').show();
+    }
+  });
+
+  // On submit regenerate thumbnails form, show a confirmation modal.
+  $regenerateThumbnailsButton.on('click', (event) => {
+    event.preventDefault();
+
+    // Display confirmation modal
+    const modal = new (ConfirmModal as any)(
+      {
+        id: '#regeneration-confirm-modal',
+        confirmTitle: $regenerateThumbnailsButton.data('confirm-title'),
+        confirmMessage: $regenerateThumbnailsButton.data('confirm-message'),
+        closeButtonLabel: $regenerateThumbnailsButton.data('confirm-cancel'),
+        confirmButtonLabel: $regenerateThumbnailsButton.data('confirm-apply'),
+        closable: true,
+      },
+      () => {
+        // If ok, submit the form
+        $regenerateThumbnailsForm.submit();
+      },
+    );
+    modal.show();
+  });
+});

classes/lang/KeysReference/FeatureFlagLang.php

@@ -84,3 +84,6 @@
 // Carts index feature flag
 trans('Carts', 'Admin.Advaparameters.Feature');
 trans('Enable or Disable the migrated carts page.', 'Admin.Advparameters.Help');
+
+trans('Image settings', 'Admin.Advparameters.Feature');
+trans('Enable / Disable the new image settings page.', 'Admin.Advparameters.Help');

install-dev/data/xml/feature_flag.xml

@@ -24,5 +24,6 @@
     <feature_flag id="symfony_layout" name="symfony_layout" type="env,query,dotenv,db" label_wording="Symfony layout" label_domain="Admin.Advparameters.Feature" description_wording="Enable / Disable symfony layout (in opposition to legacy layout)." description_domain="Admin.Advparameters.Help" state="1" stability="beta" />
     <feature_flag id="front_container_v2" name="front_container_v2" type="env,dotenv,db" label_wording="New front container" label_domain="Admin.Advparameters.Feature" description_wording="Enable / Disable the new front container." description_domain="Admin.Advparameters.Help" state="0" stability="beta" />
     <feature_flag id="carts" name="carts" type="env,dotenv,db" label_wording="Carts" label_domain="Admin.Advparameters.Feature" description_wording="Enable / Disable the migrated carts page." description_domain="Admin.Advparameters.Help" state="0" stability="beta" />
+    <feature_flag id="image_settings" name="image_settings" type="env,dotenv,db" label_wording="Image settings" label_domain="Admin.Advparameters.Feature" description_wording="Enable / Disable the new image settings page." description_domain="Admin.Advparameters.Help" state="0" stability="beta" />
   </entities>
 </entity_feature_flag>

src/Adapter/Admin/ImageConfiguration.php

@@ -0,0 +1,107 @@
+<?php
+/**
+ * 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)
+ */
+
+namespace PrestaShop\PrestaShop\Adapter\Admin;
+
+use PrestaShop\PrestaShop\Adapter\Configuration;
+use PrestaShop\PrestaShop\Core\Configuration\DataConfigurationInterface;
+
+/**
+ * Manages the configuration data about image.
+ */
+class ImageConfiguration implements DataConfigurationInterface
+{
+    /**
+     * @var Configuration
+     */
+    private $configuration;
+
+    public function __construct(Configuration $configuration)
+    {
+        $this->configuration = $configuration;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getConfiguration()
+    {
+        return [
+            'formats' => $this->configuration->get('PS_IMAGE_FORMAT'),
+            'base-format' => $this->configuration->get('PS_IMAGE_QUALITY'),
+            'avif-quality' => (int) $this->configuration->get('PS_AVIF_QUALITY'),
+            'jpeg-quality' => (int) $this->configuration->get('PS_JPEG_QUALITY'),
+            'png-quality' => (int) $this->configuration->get('PS_PNG_QUALITY'),
+            'webp-quality' => (int) $this->configuration->get('PS_WEBP_QUALITY'),
+            'generation-method' => (int) $this->configuration->get('PS_IMAGE_GENERATION_METHOD'),
+            'picture-max-size' => (int) $this->configuration->get('PS_PRODUCT_PICTURE_MAX_SIZE'),
+            'picture-max-width' => (int) $this->configuration->get('PS_PRODUCT_PICTURE_WIDTH'),
+            'picture-max-height' => (int) $this->configuration->get('PS_PRODUCT_PICTURE_HEIGHT'),
+        ];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function updateConfiguration(array $configuration)
+    {
+        $errors = [];
+
+        if ($this->validateConfiguration($configuration)) {
+            $this->configuration->set('PS_IMAGE_FORMAT', $configuration['formats']);
+            $this->configuration->set('PS_IMAGE_QUALITY', $configuration['base-format']);
+            $this->configuration->set('PS_AVIF_QUALITY', (int) $configuration['avif-quality']);
+            $this->configuration->set('PS_JPEG_QUALITY', (int) $configuration['jpeg-quality']);
+            $this->configuration->set('PS_PNG_QUALITY', (int) $configuration['png-quality']);
+            $this->configuration->set('PS_WEBP_QUALITY', (int) $configuration['webp-quality']);
+            $this->configuration->set('PS_IMAGE_GENERATION_METHOD', (int) $configuration['generation-method']);
+            $this->configuration->set('PS_PRODUCT_PICTURE_MAX_SIZE', (int) $configuration['picture-max-size']);
+            $this->configuration->set('PS_PRODUCT_PICTURE_WIDTH', (int) $configuration['picture-max-width']);
+            $this->configuration->set('PS_PRODUCT_PICTURE_HEIGHT', (int) $configuration['picture-max-height']);
+        }
+
+        return $errors;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function validateConfiguration(array $configuration)
+    {
+        return isset(
+            $configuration['formats'],
+            $configuration['base-format'],
+            $configuration['avif-quality'],
+            $configuration['jpeg-quality'],
+            $configuration['png-quality'],
+            $configuration['webp-quality'],
+            $configuration['generation-method'],
+            $configuration['picture-max-size'],
+            $configuration['picture-max-width'],
+            $configuration['picture-max-height'],
+        );
+    }
+}