From 8a85a2717797da1e4f30cd699d63352ba5872366 Mon Sep 17 00:00:00 2001 From: rintisch Date: Wed, 27 Mar 2024 11:38:55 +0100 Subject: [PATCH] WIP [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 Todo: * Add changelog for new TypoScript option for search date format * Update docs for TypoScript search date format --- .../Backend/Order/OrderController.php | 19 ++ Configuration/JavaScriptModules.php | 8 + Configuration/TypoScript/constants.typoscript | 4 + Configuration/TypoScript/setup.typoscript | 6 - Resources/Private/Language/locallang.xlf | 20 +- .../Partials/Backend/Order/Filter/List.html | 207 +++++++++------- .../Partials/Backend/Order/List/Item.html | 14 +- .../Partials/Backend/Order/Show/Address.html | 30 +-- .../Partials/Backend/Order/Show/Cart.html | 2 +- .../Backend/Order/Show/CartTable/Body.html | 12 +- .../Backend/Order/Show/CartTable/Footer.html | 36 +-- .../Backend/Order/Show/CartTable/Header.html | 18 +- .../Backend/Order/Show/Properties.html | 233 ++++++++++-------- .../Private/Partials/Utility/Paginator.html | 101 +++++--- .../Templates/Backend/Order/Order/List.html | 11 +- .../Templates/Backend/Order/Order/Show.html | 41 +-- .../Public/JavaScript/Backend/order-module.js | 17 ++ .../Public/Stylesheets/Backend/style.css | 134 +++------- ext_typoscript_setup.typoscript | 4 + 19 files changed, 507 insertions(+), 410 deletions(-) create mode 100644 Configuration/JavaScriptModules.php create mode 100644 Resources/Public/JavaScript/Backend/order-module.js diff --git a/Classes/Controller/Backend/Order/OrderController.php b/Classes/Controller/Backend/Order/OrderController.php index d3b33496..7311d624 100644 --- a/Classes/Controller/Backend/Order/OrderController.php +++ b/Classes/Controller/Backend/Order/OrderController.php @@ -19,6 +19,7 @@ use TYPO3\CMS\Backend\Template\ModuleTemplate; use TYPO3\CMS\Backend\Template\ModuleTemplateFactory; use TYPO3\CMS\Core\Imaging\IconFactory; +use TYPO3\CMS\Core\Page\PageRenderer; use TYPO3\CMS\Core\Pagination\SimplePagination; use TYPO3\CMS\Core\Type\ContextualFeedbackSeverity; use TYPO3\CMS\Core\Utility\ExtensionManagementUtility; @@ -37,6 +38,8 @@ class OrderController extends ActionController protected array $searchArguments = []; + private PageRenderer $pageRenderer; + public function injectPersistenceManager(PersistenceManager $persistenceManager): void { $this->persistenceManager = $persistenceManager; @@ -47,6 +50,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 @@ -65,6 +73,8 @@ public function listAction(int $currentPage = 1): ResponseInterface { $this->moduleTemplate = $this->moduleTemplateFactory->create($this->request); + $this->addBackendAssets(); + $this->moduleTemplate->assign('settings', $this->settings); $this->moduleTemplate->assign('searchArguments', $this->searchArguments); @@ -125,6 +135,8 @@ public function showAction(Item $orderItem): ResponseInterface { $this->moduleTemplate = $this->moduleTemplateFactory->create($this->request); + $this->addBackendAssets(); + $this->moduleTemplate->assign('settings', $this->settings); $this->moduleTemplate->assign('orderItem', $orderItem); @@ -234,4 +246,11 @@ public function getShippingStatus(): array } return $shippingStatusArray; } + + 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 new file mode 100644 index 00000000..3d088e85 --- /dev/null +++ b/Configuration/JavaScriptModules.php @@ -0,0 +1,8 @@ + ['backend'], + 'imports' => [ + '@extcode/cart/' => 'EXT:cart/Resources/Public/JavaScript/Backend/', + ], +]; \ No newline at end of file diff --git a/Configuration/TypoScript/constants.typoscript b/Configuration/TypoScript/constants.typoscript index 693b6549..9f41e6d0 100755 --- a/Configuration/TypoScript/constants.typoscript +++ b/Configuration/TypoScript/constants.typoscript @@ -46,6 +46,10 @@ plugin.tx_cart { decimals = 2 } + search { + dateFormat = Y-m-d + } + validation { orderItem { fields { diff --git a/Configuration/TypoScript/setup.typoscript b/Configuration/TypoScript/setup.typoscript index e6a5f06e..5a0b07f1 100755 --- 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/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf index 69caaa92..22c292d1 100644 --- a/Resources/Private/Language/locallang.xlf +++ b/Resources/Private/Language/locallang.xlf @@ -536,17 +536,35 @@ Order Product + + Order + + + Invoice + Shipping + + Method + + + Delivery + Payment + + Method + + + Ordered items + Order Date - Comment + Customer comment I have read the general terms and conditions agree to them. diff --git a/Resources/Private/Partials/Backend/Order/Filter/List.html b/Resources/Private/Partials/Backend/Order/Filter/List.html index ba0718b4..d6926a3a 100644 --- a/Resources/Private/Partials/Backend/Order/Filter/List.html +++ b/Resources/Private/Partials/Backend/Order/Filter/List.html @@ -1,100 +1,125 @@ -
-
- - -
- - -

- -
-
- - -
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
 

+ +
+
+ + +
+
-
- - -
-
- - -
-
 

+
+
+ + +
+
+ + + +
+
+ + + -
- -
+
+
-
 
- +
+
+ + +
+
+ + + +
+
+ + + +
+
+
+
+ + +
+
+ + +
-
+ + \ No newline at end of file diff --git a/Resources/Private/Partials/Backend/Order/List/Item.html b/Resources/Private/Partials/Backend/Order/List/Item.html index 72608042..ce095cd2 100644 --- a/Resources/Private/Partials/Backend/Order/List/Item.html +++ b/Resources/Private/Partials/Backend/Order/List/Item.html @@ -2,7 +2,7 @@ xmlns:cart="http://typo3.org/ns/Extcode/Cart/ViewHelpers" data-namespace-typo3-fluid="true"> - + {orderItem.billingAddress.firstName} @@ -32,23 +32,19 @@ - + {orderItem.totalGross} - + {orderItem.totalNet} {orderItem.payment.name}
- ( - - ) + (  ) {orderItem.shipping.name}
- ( - - ) + (  )
- :
 + + + :
 {address.taxIdentificationNumber}
@@ -40,25 +42,23 @@
-
-
+
+
- - : - +

+ +

-
- - - : - + +
+

+ +

- -
- -
+
+
\ No newline at end of file diff --git a/Resources/Private/Partials/Backend/Order/Show/Cart.html b/Resources/Private/Partials/Backend/Order/Show/Cart.html index 8c1f2579..4034ef9f 100644 --- a/Resources/Private/Partials/Backend/Order/Show/Cart.html +++ b/Resources/Private/Partials/Backend/Order/Show/Cart.html @@ -1,7 +1,7 @@ - +
diff --git a/Resources/Private/Partials/Backend/Order/Show/CartTable/Body.html b/Resources/Private/Partials/Backend/Order/Show/CartTable/Body.html index c0282ba4..3b3c6192 100644 --- a/Resources/Private/Partials/Backend/Order/Show/CartTable/Body.html +++ b/Resources/Private/Partials/Backend/Order/Show/CartTable/Body.html @@ -10,23 +10,23 @@ - - - - - - - - - @@ -23,14 +23,14 @@ - - - - + - - + - + - - - - - - diff --git a/Resources/Private/Partials/Backend/Order/Show/CartTable/Header.html b/Resources/Private/Partials/Backend/Order/Show/CartTable/Header.html index a494bc17..e2f5f91c 100644 --- a/Resources/Private/Partials/Backend/Order/Show/CartTable/Header.html +++ b/Resources/Private/Partials/Backend/Order/Show/CartTable/Header.html @@ -1,37 +1,37 @@ - - + - - - - - - - diff --git a/Resources/Private/Partials/Backend/Order/Show/Properties.html b/Resources/Private/Partials/Backend/Order/Show/Properties.html index 8f43ab2c..2c163bb2 100644 --- a/Resources/Private/Partials/Backend/Order/Show/Properties.html +++ b/Resources/Private/Partials/Backend/Order/Show/Properties.html @@ -1,105 +1,140 @@ -
{product.title} + {product.price} + {product.discount} + {product.count} + {product.net} + {product.gross} + {product.orderTax.tax} diff --git a/Resources/Private/Partials/Backend/Order/Show/CartTable/Footer.html b/Resources/Private/Partials/Backend/Order/Show/CartTable/Footer.html index 614147f7..33139801 100644 --- a/Resources/Private/Partials/Backend/Order/Show/CartTable/Footer.html +++ b/Resources/Private/Partials/Backend/Order/Show/CartTable/Footer.html @@ -6,14 +6,14 @@ + {orderItem.net} + {orderItem.gross} + {orderTax.tax} : {orderItem.shipping.name} + {orderItem.shipping.net} + {orderItem.shipping.gross} + {orderItem.shipping.orderTax.tax} @@ -43,18 +43,18 @@
: {orderItem.payment.name} + {orderItem.payment.net} + {orderItem.payment.gross} - + {orderItem.payment.orderTax.tax} @@ -69,19 +69,19 @@ -
{orderDiscount.title} + {orderDiscount.net} + {orderDiscount.gross} + {orderDiscount.orderTax.tax} @@ -100,14 +100,14 @@ + {orderItem.totalNet} + {orderItem.totalGross} + {orderTotalTax.tax}
+
+ + + + + + +
- - - - - - - - - - - - +
+
+

{f:translate(key:"tx_cart_domain_model_order_item.order_order")}

+
- - - {orderItem.orderNumber} - - - - {orderItem.invoiceNumber} -
- - - - - - - - - - - -
+ + + + + + + + +
+ + + {orderItem.orderNumber} +
+ + + + + +
+
+
+

{f:translate(key:"tx_cart_domain_model_order_item.order_invoice")}

+ + + + + + + + + +
+ + + {f:if(condition:'{orderItem.invoiceNumber}', then:'{orderItem.invoiceNumber}', else: '-')} +
+ + + + + + + + - + + +
+
+
+

+ {f:translate(key:"tx_cart_domain_model_order_item.order_payment")}

+ + + + + + + + + +
+ {f:translate(key:"tx_cart_domain_model_order_item.order_payment.method")} + + {orderItem.payment.name} +
+ + + +
+ + +
+ +
+
- - -   - - -   - - - - - - {orderItem.deliveryNumber} - - - - -   - - -   - - - - - - - - - - +
+

{f:translate(key:"tx_cart_domain_model_order_item.order_delivery")}

+ + + + + + + + + +
+ + + {orderItem.deliveryNumber} +
+ + + + + +
+
- - - - - - {orderItem.payment.name} - - - - - - {orderItem.shipping.name} - - - - - - - - - - - - - - - - - - - - - - - -
+ +
+

{f:translate(key:"tx_cart_domain_model_order_item.order_shipping")}

+ + + + + + + + +
+ {f:translate(key:"tx_cart_domain_model_order_item.order_shipping.method")} + + {orderItem.shipping.name} +
+ + + +
+ + +
+ +
+
+
\ No newline at end of file diff --git a/Resources/Private/Partials/Utility/Paginator.html b/Resources/Private/Partials/Utility/Paginator.html index d6ffb9dd..0c7b789f 100644 --- a/Resources/Private/Partials/Utility/Paginator.html +++ b/Resources/Private/Partials/Utility/Paginator.html @@ -1,40 +1,75 @@ + \ No newline at end of file diff --git a/Resources/Private/Templates/Backend/Order/Order/List.html b/Resources/Private/Templates/Backend/Order/Order/List.html index b542b97e..fe303ebc 100644 --- a/Resources/Private/Templates/Backend/Order/Order/List.html +++ b/Resources/Private/Templates/Backend/Order/Order/List.html @@ -3,9 +3,10 @@ data-namespace-typo3-fluid="true" > - + +
@@ -14,9 +15,9 @@
- +
- + @@ -71,11 +72,13 @@
- + Select a Page where Order Item Dataset are saved. +
\ No newline at end of file diff --git a/Resources/Private/Templates/Backend/Order/Order/Show.html b/Resources/Private/Templates/Backend/Order/Order/Show.html index b2ec93ad..1afa3fa3 100644 --- a/Resources/Private/Templates/Backend/Order/Order/Show.html +++ b/Resources/Private/Templates/Backend/Order/Order/Show.html @@ -4,28 +4,39 @@ xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers" data-namespace-typo3-fluid="true"> - + - +
+ -
- -
+

Order view for #{orderItem.orderNumber} ({orderItem.orderDate -> f:format.date(format:'d.m.Y')})

-
- -
+
+ +
- -
- :
- {orderItem.comment -> f:sanitize.html()} +
+
- -
- + +
+
+

+ {f:translate(key:"tx_cart_domain_model_order_item.comment")} +

+ {orderItem.comment -> f:sanitize.html()} +
+
+ +
+
+

{f:translate(key:"tx_cart_domain_model_order_item.items")}

+ +
+
\ No newline at end of file diff --git a/Resources/Public/JavaScript/Backend/order-module.js b/Resources/Public/JavaScript/Backend/order-module.js new file mode 100644 index 00000000..4a157ef8 --- /dev/null +++ b/Resources/Public/JavaScript/Backend/order-module.js @@ -0,0 +1,17 @@ +import DateTimePicker from '@typo3/backend/date-time-picker.js'; +import '@typo3/backend/input/clearable.js'; + +class AdministrationModule { + constructor() { + let dateTimePickerElements = document.querySelectorAll('.t3js-datetimepicker'); + let clearableElements = document.querySelectorAll('.t3js-clearable'); + dateTimePickerElements.forEach((dateTimePickerElement) => { + DateTimePicker.initialize(dateTimePickerElement); + }) + clearableElements.forEach((clearableField) => { + clearableField.clearable(); + }) + } +} + +export default new AdministrationModule(); \ No newline at end of file diff --git a/Resources/Public/Stylesheets/Backend/style.css b/Resources/Public/Stylesheets/Backend/style.css index 7c139e44..78d869a0 100644 --- a/Resources/Public/Stylesheets/Backend/style.css +++ b/Resources/Public/Stylesheets/Backend/style.css @@ -1,128 +1,56 @@ -.tx_cart_module_products_filter { - background-color: #dddddd; - border: 1px solid #a2aab8; - margin: 15px 0; - width: 100%; +.cart-list { + --color-open: #eca5a5; + --color-pending: #ecdba5; + --color-paid: #c1eca5; + --color-canceled: #c9c8c8; } -.tx_cart_module_products_filter_inner { - margin: 15px; +.cart-figure { + inline-size: 12ch; + text-align: right; } -#module_cartorders_search_form label, #module_cartproducts_search_form label { - width: 150px; - display: inline-block; +.cart-list :is(.order-payment-status-open, .order-shipping-status-open) { + background-color: var(--color-open); } -#module_cartorders_search_form input { - width: 150px; - display: inline-block; - margin-right: 50px; +.cart-list :is(.order-payment-status-pending, .order-shipping-status-in_process) { + background-color: var(--color-pending); } - -#module_cartorders_search_form .col-25 { - width: 25%; - display: block; - float: left; -} - -#module_cartorders_search_form .col-50 { - width: 50%; - display: block; - float: left; -} - -#module_cartorders_search_form .col-75 { - width: 75%; - display: block; - float: left; -} - -.download-links { - float:right; - margin-bottom: 15px; - display: block; -} - -.download-button { - background: #f6f6f6 -moz-linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%) repeat-x center bottom; - border: 1px solid #7c7c7c; - border-radius: 1px; - color: #434343; - cursor: pointer; - padding: 5px; -} - -.filter { - float:left; - margin-bottom: 15px; - display: block; -} - -.clear { - height: 1px; - clear: both; -} - -.block-left { - width: 45%; - float: left; -} - -.block-right { - width: 45%; - float: right; +.cart-list :is(.order-payment-status-paid, .order-shipping-status-shipped) { + background-color: var(--color-paid); } -.label { - font-weight: bold; +.cart-list :is(.order-payment-status-canceled, .order-shipping-status-on_hold) { + background-color: var(--color-canceled); } -tr.sum { - background-color: #666; - color: #fff; +.cart-order .table { + inline-size: unset; + max-inline-size: 150ch; } -.f3-widget-paginator { - display: inline-block; - border-radius: 4px; - margin: 20px 0; - padding-left: 0; +.cart-order .properties .table th:first-child { + padding-inline-start: 0; } -.f3-widget-paginator > li { - display: inline; +.cart-order .properties .table tr { + border-color: transparent; } -.f3-widget-paginator > li > a, -.f3-widget-paginator > li.current { - position: relative; - float: left; - padding: 6px 12px; - margin-left: -1px; - text-decoration: none; - border: 1px solid #DDD; - background-color: #FFF; - color: #FF8700; +.cart-order .properties .table :is(th, td) { + vertical-align: baseline; } -.f3-widget-paginator > li.current, -.f3-widget-paginator > li > a:hover, -.f3-widget-paginator > li > a:focus { - text-decoration: underline; - background-color: #EEE; +.cart-order .properties select { + min-inline-size: 16ch; } -.f3-widget-paginator > li:first-child > a, -.f3-widget-paginator > li.current:first-child { - margin-left: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; +.cart-order table .sum { + border-top: 2px solid #999; } -.f3-widget-paginator > li:last-child > a, -.f3-widget-paginator > li.current:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.cart-order table td { + padding-block: 1rem; } \ No newline at end of file diff --git a/ext_typoscript_setup.typoscript b/ext_typoscript_setup.typoscript index 67392d76..0ff432b5 100644 --- a/ext_typoscript_setup.typoscript +++ b/ext_typoscript_setup.typoscript @@ -12,5 +12,9 @@ module.tx_cart { separateCurrency = {$plugin.tx_cart.settings.format.currency.separateCurrency} decimals = {$plugin.tx_cart.settings.format.currency.decimals} } + + search { + dateFormat = {$plugin.tx_cart.settings.search.dateFormat} + } } }