Migrate "Shop parameters > Order settings > Statuses" page

admin-dev/themes/new-theme/js/app/utils/colorpicker.js

@@ -32,6 +32,12 @@ const {$} = window;
 const init = function initDatePickers() {
   $('.colorpicker input[type="text"]').each((i, picker) => {
     $(picker).colorpicker();
+    $(picker).on('colorpickerCreate', () => {
+      $(picker).css('background-color', $(picker).val());
+    });
+    $(picker).on('colorpickerChange', (event) => {
+      $(picker).css('background-color', event.color.toString());
+    });
   });
 };
 

admin-dev/themes/new-theme/js/components/grid/extension/bulk-action-checkbox-extension.ts

@@ -38,10 +38,26 @@ export default class BulkActionCheckboxExtension {
    * @param {Grid} grid
    */
   extend(grid: Grid): void {
+    this.handleBulkActionCheckboxStatus(grid);
     this.handleBulkActionCheckboxSelect(grid);
     this.handleBulkActionSelectAllCheckbox(grid);
   }
 
+  /**
+   * Disable/Enable "Select all" button in the grid
+   *
+   * @param {Grid} grid
+   *
+   * @private
+   */
+  private handleBulkActionCheckboxStatus(grid: Grid) {
+    const gridBulkActionSelectAll = grid.getContainer().find(GridMap.bulks.actionSelectAll);
+    gridBulkActionSelectAll.prop(
+      'disabled',
+      grid.getContainer().find(GridMap.bulks.bulkActionCheckbox).length === 0,
+    );
+  }
+
   /**
    * Handles "Select all" button in the grid
    *

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

@@ -32,28 +32,34 @@ import ColumnTogglingExtension from '@components/grid/extension/column-toggling-
 import SubmitBulkActionExtension from '@components/grid/extension/submit-bulk-action-extension';
 import BulkActionCheckboxExtension from '@components/grid/extension/bulk-action-checkbox-extension';
 import SubmitRowActionExtension from '@components/grid/extension/action/row/submit-row-action-extension';
+import SubmitGridExtension from '@components/grid/extension/submit-grid-action-extension';
+import FiltersSubmitButtonEnablerExtension from '@components/grid/extension/filters-submit-button-enabler-extension';
 
 const {$} = window;
 
 $(() => {
   const orderStatesGrid = new Grid('order_states');
 
   orderStatesGrid.addExtension(new FiltersResetExtension());
+  orderStatesGrid.addExtension(new FiltersSubmitButtonEnablerExtension());
   orderStatesGrid.addExtension(new SortingExtension());
   orderStatesGrid.addExtension(new ExportToSqlManagerExtension());
   orderStatesGrid.addExtension(new ReloadListActionExtension());
   orderStatesGrid.addExtension(new BulkActionCheckboxExtension());
+  orderStatesGrid.addExtension(new SubmitGridExtension());
   orderStatesGrid.addExtension(new SubmitBulkActionExtension());
   orderStatesGrid.addExtension(new SubmitRowActionExtension());
   orderStatesGrid.addExtension(new ColumnTogglingExtension());
 
   const orderReturnStatusesGrid = new Grid('order_return_states');
 
   orderReturnStatusesGrid.addExtension(new FiltersResetExtension());
+  orderReturnStatusesGrid.addExtension(new FiltersSubmitButtonEnablerExtension());
   orderReturnStatusesGrid.addExtension(new SortingExtension());
   orderReturnStatusesGrid.addExtension(new ExportToSqlManagerExtension());
   orderReturnStatusesGrid.addExtension(new ReloadListActionExtension());
   orderReturnStatusesGrid.addExtension(new BulkActionCheckboxExtension());
+  orderReturnStatusesGrid.addExtension(new SubmitGridExtension());
   orderReturnStatusesGrid.addExtension(new SubmitBulkActionExtension());
   orderReturnStatusesGrid.addExtension(new SubmitRowActionExtension());
 });

admin-dev/themes/new-theme/scss/components/_colorpicker.scss

@@ -6,4 +6,13 @@
   &::after {
     border: none;
   }
+
+  .form-control {
+    &,
+    &:focus-visible,
+    &:focus {
+      color: transparent;
+      text-shadow: none;
+    }
+  }
 }

admin-dev/themes/new-theme/scss/components/_grid.scss

@@ -319,10 +319,6 @@ table {
 
       td[data-column-id^="id_"] {
         max-width: 8rem;
-
-        input {
-          max-width: 6rem;
-        }
       }
 
       td[data-column-id^="price_tax_excluded"] {

admin-dev/themes/new-theme/scss/pages/_order_states.scss

@@ -1,9 +1,9 @@
 table#order_states_grid_table,
 table#order_return_states_grid_table {
-  thead {
-    tr.column-headers {
-      th:first-child {
-        width: 130px;
+  tbody {
+    .color-type.column-name {
+      .badge {
+        font-size: inherit;
       }
     }
   }

classes/order/OrderReturnState.php

@@ -1,4 +1,7 @@
 <?php
+
+use PrestaShop\PrestaShop\Core\Domain\OrderReturnState\OrderReturnStateSettings;
+
 /**
  * Copyright since 2007 PrestaShop SA and Contributors
  * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
@@ -42,7 +45,7 @@ class OrderReturnStateCore extends ObjectModel
             'color' => ['type' => self::TYPE_STRING, 'validate' => 'isColor'],
 
             /* Lang fields */
-            'name' => ['type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => 64],
+            'name' => ['type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => OrderReturnStateSettings::NAME_MAX_LENGTH],
         ],
     ];
 

classes/order/OrderState.php

@@ -1,4 +1,7 @@
 <?php
+
+use PrestaShop\PrestaShop\Core\Domain\OrderState\OrderStateSettings;
+
 /**
  * Copyright since 2007 PrestaShop SA and Contributors
  * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
@@ -91,7 +94,7 @@ class OrderStateCore extends ObjectModel
             'deleted' => ['type' => self::TYPE_BOOL, 'validate' => 'isBool'],
 
             /* Lang fields */
-            'name' => ['type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => 64],
+            'name' => ['type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => OrderStateSettings::NAME_MAX_LENGTH],
             'template' => ['type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isTplName', 'size' => 64],
         ],
     ];