[TASK] Update CSS and HTML in BE view

* Use TYPO3-native date input fields. * Payment and shipping get background colors depending on their status. * Use TYPO3-native layout functionality. * Remove inline CSS * Restyle list view (update filters, pagination) * Restyle order view * Date format in backend can be set via TypoScript * Add changelog for new TypoScript option for backend date format * Update docs for TypoScript backend date format
extcode · Apr 7, 2024 · 5e50f8f · 5e50f8f
1 parent 513d973
commit 5e50f8f
Show file tree

Hide file tree

Showing 23 changed files with 635 additions and 425 deletions.
diff --git a/Classes/Controller/Backend/Order/OrderController.php b/Classes/Controller/Backend/Order/OrderController.php
@@ -23,6 +23,7 @@
 use TYPO3\CMS\Core\Imaging\Icon;
 use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Localization\LanguageService;
+use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Pagination\SimplePagination;
 use TYPO3\CMS\Core\Type\ContextualFeedbackSeverity;
 use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
@@ -43,6 +44,8 @@ class OrderController extends ActionController
 
     protected array $searchArguments = [];
 
+    private PageRenderer $pageRenderer;
+
     public function injectPersistenceManager(PersistenceManager $persistenceManager): void
     {
         $this->persistenceManager = $persistenceManager;
@@ -53,6 +56,11 @@ public function injectItemRepository(ItemRepository $itemRepository): void
         $this->itemRepository = $itemRepository;
     }
 
+    public function injectPageRenderer(PageRenderer $pageRenderer): void
+    {
+        $this->pageRenderer = $pageRenderer;
+    }
+
     public function __construct(
         protected readonly ModuleTemplateFactory $moduleTemplateFactory,
         protected readonly IconFactory $iconFactory
@@ -72,6 +80,7 @@ public function listAction(int $currentPage = 1): ResponseInterface
         $this->moduleTemplate = $this->moduleTemplateFactory->create($this->request);
 
         $this->setDocHeader($this->getListButtons());
+        $this->addBackendAssets();
 
         $this->moduleTemplate->assign('settings', $this->settings);
         $this->moduleTemplate->assign('searchArguments', $this->searchArguments);
@@ -133,6 +142,8 @@ public function showAction(Item $orderItem): ResponseInterface
         $buttons = $this->getOrderButtons($orderItem);
         $this->setDocHeader($buttons);
 
+        $this->addBackendAssets();
+
         $this->moduleTemplate->assign('settings', $this->settings);
         $this->moduleTemplate->assign('orderItem', $orderItem);
 
@@ -360,4 +371,11 @@ private function getListButtons(): array
             ],
         ];
     }
+
+    private function addBackendAssets(): void
+    {
+        $this->pageRenderer->addCssFile('EXT:cart/Resources/Public/Stylesheets/Backend/style.css');
+
+        $this->pageRenderer->loadJavaScriptModule('@extcode/cart/order-module.js');
+    }
 }
diff --git a/Configuration/JavaScriptModules.php b/Configuration/JavaScriptModules.php
@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'dependencies' => ['backend'],
+    'imports' => [
+        '@extcode/cart/' => 'EXT:cart/Resources/Public/JavaScript/Backend/',
+    ],
+];
diff --git a/Configuration/TypoScript/constants.typoscript b/Configuration/TypoScript/constants.typoscript
@@ -46,6 +46,10 @@ plugin.tx_cart {
             decimals           = 2
         }
 
+        backend {
+            dateFormat = Y-m-d
+        }
+
         validation {
             orderItem {
                 fields {

diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript
@@ -329,12 +329,6 @@ plugin.tx_cart {
     }
 }
 
-module.tx_cart {
-    invoiceNumber < plugin.tx_cart.invoiceNumber
-    deliveryNumber < plugin.tx_cart.deliveryNumber
-}
-
-
 # use this lib to add custom information or content elements to your email template
 
 temp.cartMailContentElement = RECORDS

diff --git a/Documentation/Administrator/Configuration/BackendModule/Index.rst b/Documentation/Administrator/Configuration/BackendModule/Index.rst
@@ -0,0 +1,34 @@
+.. include:: ../../../Includes.txt
+
+.. _backend_module:
+
+==============
+Backend module
+==============
+
+The backend module shows a list with filters. The date format of the input
+fields of the filter can be adapted by overwriting the following TypoScript.
+
+.. code-block:: typoscript
+   :caption: EXT:cart/Configuration/TypoScript/constants.typoscript
+
+   plugin.tx_cart {
+       settings {
+           backend {
+              dateFormat = Y-m-d
+           }
+       }
+   }
+
+plugin.tx_cart.settings.search
+--------------------------------
+
+.. confval:: dateFormat
+
+   :Type: string
+   :Default: Y-m-d
+
+   Defines the format which will be shown after using the filters in the
+   backend.
+
+   See also the `PHP documentation <https://www.php.net/manual/en/datetime.format.php>`_.
diff --git a/Documentation/Administrator/Configuration/Index.rst b/Documentation/Administrator/Configuration/Index.rst
@@ -18,5 +18,6 @@ extension with TypoScript, PageTS and YAML.
    PaymentMethods/Index
    ShippingMethods/Index
    TaxClasses/Index
+   BackendModule/Index
    Action/Index
    Ajax/Index
diff --git a/Documentation/Changelog/9.0/Feature-465-DateFormatInBackendModuleFilter.rst b/Documentation/Changelog/9.0/Feature-465-DateFormatInBackendModuleFilter.rst
@@ -0,0 +1,49 @@
+.. include:: ../../Includes.txt
+
+============================================
+Feature: #465 - DateFormat in Backend Module
+============================================
+
+See :issue:`465`
+
+Description
+===========
+
+The backend module was refactored. The dateformat of the date input fields can
+be set in TypoScript.
+
+.. code-block:: typoscript
+   :caption: EXT:cart/Configuration/TypoScript/constants.typoscript
+
+   plugin.tx_cart {
+       settings {
+           backend {
+              dateFormat = Y-m-d
+           }
+       }
+   }
+
+Impact
+======
+
+Before this the dates in the backend were always in the format `d.m.Y`, now it
+ is `Y-m-d` by default.
+ The change affect only the formatting in the backend, not the storage format.
+
+ Migration
+ =========
+ To get the old formatting you need to overwrite the above shown TypoScript
+ constants:
+
+ .. code-block:: typoscript
+    :caption: EXT:sitepackage/Configuration/TypoScript/constants.typoscript
+
+    plugin.tx_cart {
+        settings {
+            backend {
+               dateFormat = d.m.Y
+            }
+        }
+    }
+
+.. index:: Backend
diff --git a/Documentation/Changelog/9.0/Feature-465-UpdatedBackendViews.rst b/Documentation/Changelog/9.0/Feature-465-UpdatedBackendViews.rst
@@ -0,0 +1,27 @@
+.. include:: ../../Includes.txt
+
+=====================================
+Feature: #465 - Updated backend views
+=====================================
+
+See :issue:`465`
+
+Description
+===========
+
+The view of the backend module were refactored. This has the following benefits:
+
+* No inline CSS which avoid problems with Content-Security-Policies.
+* Clearer design.
+* Responsive design (old design was not usable on smartphones).
+* Order tables with colors to improve the visibility of status of orders.
+* Backend CSS reduced / updated to really used HTML.
+
+Impact
+======
+
+Own overwrites might need adaption otherwise this change should not have any
+negative impact.
+
+
+.. index:: Backend
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
@@ -539,17 +539,35 @@
             <trans-unit id="tx_cart_domain_model_order_item.order_product">
                 <source>Order Product</source>
             </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.order_order">
+                <source>Order</source>
+            </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.order_invoice">
+                <source>Invoice</source>
+            </trans-unit>
             <trans-unit id="tx_cart_domain_model_order_item.order_shipping">
                 <source>Shipping</source>
             </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.order_shipping.method">
+                <source>Method</source>
+            </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.order_delivery">
+                <source>Delivery</source>
+            </trans-unit>
             <trans-unit id="tx_cart_domain_model_order_item.order_payment">
                 <source>Payment</source>
             </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.order_payment.method">
+                <source>Method</source>
+            </trans-unit>
+            <trans-unit id="tx_cart_domain_model_order_item.items">
+                <source>Ordered items</source>
+            </trans-unit>
             <trans-unit id="tx_cart_domain_model_order_item.crdate">
                 <source>Order Date</source>
             </trans-unit>
             <trans-unit id="tx_cart_domain_model_order_item.comment">
-                <source>Comment</source>
+                <source>Customer comment</source>
             </trans-unit>
             <trans-unit id="tx_cart_domain_model_order_item.accept_terms_and_conditions">
                 <source>I have read the general terms and conditions agree to them.</source>