-
-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
19 changed files
with
507 additions
and
410 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <?php | ||
|
|
||
| return [ | ||
| 'dependencies' => ['backend'], | ||
| 'imports' => [ | ||
| '@extcode/cart/' => 'EXT:cart/Resources/Public/JavaScript/Backend/', | ||
| ], | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -46,6 +46,10 @@ plugin.tx_cart { | |
| decimals = 2 | ||
| } | ||
|
|
||
| search { | ||
| dateFormat = Y-m-d | ||
| } | ||
|
|
||
| validation { | ||
| orderItem { | ||
| fields { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
207 changes: 116 additions & 91 deletions
207
Resources/Private/Partials/Backend/Order/Filter/List.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,125 @@ | ||
| <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" | ||
| data-namespace-typo3-fluid="true"> | ||
|
|
||
| <div class="tx_cart_module_products_filter"> | ||
| <div class="tx_cart_module_products_filter_inner"> | ||
|
|
||
| <f:form action="{action}" name="search" id="module_cartorders_search_form"> | ||
| <div> | ||
| <label for="searchCustomer"> | ||
| <f:translate key="filterCustomer"/> | ||
| </label> | ||
| <f:form.textfield property="customer" id="searchCustomer" | ||
| class="cart_module_search_field_string" value="{searchArguments.customer}"/> | ||
| </div><br /> | ||
|
|
||
| <div class="col-50"> | ||
| <div> | ||
| <label for="searchOrderNumber"> | ||
| <f:translate key="filterOrderNumber"/> | ||
| </label> | ||
| <f:form.textfield property="orderNumber" id="searchOrderNumber" | ||
| class="cart_module_search_field_string" value="{searchArguments.orderNumber}"/> | ||
| </div> | ||
| <div> | ||
| <label for="searchOrderDateStart"> | ||
| <f:translate key="filterStartDate"/> | ||
| </label> | ||
| <f:form.textfield property="orderDateStart" id="searchOrderDateStart" | ||
| class="cart_module_search_field_start cart_date" | ||
| value="{searchArguments.orderDateStart}" | ||
| type="date" /> | ||
| </div> | ||
| <div> | ||
| <label for="searchOrderDateEnd"> | ||
| <f:translate key="filterEndDate"/> | ||
| </label> | ||
| <f:form.textfield property="orderDateEnd" id="searchOrderDateEnd" | ||
| class="cart_module_search_field_end cart_date" | ||
| value="{searchArguments.orderDateEnd}" | ||
| type="date" /> | ||
| </div> | ||
| </div> | ||
| <div class="col-50"> | ||
| <div> | ||
| <label for="searchInvoiceNumber"> | ||
| <f:translate key="filterInvoiceNumber"/> | ||
| </label> | ||
| <f:form.textfield property="invoiceNumber" id="searchInvoiceNumber" | ||
| class="cart_module_search_field_string" | ||
| value="{searchArguments.inoviceNumber}"/> | ||
| </div> | ||
| <div> | ||
| <label for="searchInvoiceDateStart"> | ||
| <f:translate key="filterStartDate"/> | ||
| </label> | ||
| <f:form.textfield property="invoiceDateStart" id="searchInvoiceDateStart" | ||
| class="cart_module_search_field_start cart_date" | ||
| value="{searchArguments.invoiceDateStart}" | ||
| type="date" /> | ||
| </div> | ||
| <div> | ||
| <label for="searchInvoiceDateEnd"> | ||
| <f:translate key="filterEndDate"/> | ||
| </label> | ||
| <f:form.textfield property="invoiceDateEnd" id="searchInvoiceDateEnd" | ||
| class="cart_module_search_field_end cart_date" | ||
| value="{searchArguments.invoiceDateEnd}" | ||
| type="date" /> | ||
| </div> | ||
| </div> | ||
| <div class="clear"> </div><br /> | ||
| <f:form action="{action}" name="search" class="mb-2"> | ||
| <div class="row"> | ||
| <div class="form-group col col-sm-4"> | ||
| <label for="searchCustomer" class="form-label"> | ||
| <f:translate key="filterCustomer"/> | ||
| </label> | ||
| <f:form.textfield property="customer" id="searchCustomer" | ||
| class="form-control" | ||
| value="{searchArguments.customer}"/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="col-50"> | ||
| <label for="searchPaymentStatus"> | ||
| <f:translate key="tx_cart_domain_model_order_payment"/> | ||
| <f:translate key="tx_cart_domain_model_order_payment.status"/> | ||
| </label> | ||
| <f:form.select property="paymentStatus" options="{paymentStatus}" optionValueField="key" | ||
| optionLabelField="value" value="{searchArguments.paymentStatus}"/> | ||
| </div> | ||
| <div class="col-50"> | ||
| <label for="searchShippingStatus"> | ||
| <f:translate key="tx_cart_domain_model_order_shipping"/> | ||
| <f:translate key="tx_cart_domain_model_order_shipping.status"/> | ||
| </label> | ||
| <f:form.select property="shippingStatus" options="{shippingStatus}" optionValueField="key" | ||
| optionLabelField="value" value="{searchArguments.paymentStatus}"/> | ||
| </div> | ||
| <div class="clear"> </div><br /> | ||
| <div class="row"> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchOrderNumber" class="form-label"> | ||
| <f:translate key="filterOrderNumber"/> | ||
| </label> | ||
| <f:form.textfield property="orderNumber" id="searchOrderNumber" | ||
| class="form-control" | ||
| value="{searchArguments.orderNumber}"/> | ||
| </div> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchOrderDateStart" class="form-label"> | ||
| <f:translate key="filterStartDate"/> | ||
| </label> | ||
| <f:form.textfield | ||
| name="orderDateStart" | ||
| id="searchOrderDateStart" | ||
| value="{f:if(condition: searchArguments.orderDateStart, then: \" {f:format.date(format:'{settings.search.dateFormat}', date: '{searchArguments.orderDateStart}')}\")}" | ||
| additionalAttributes="{'autocomplete': 'off'}" | ||
| class="form-control t3js-datetimepicker t3js-clearable" | ||
| data="{date-type: 'date', date-format: '{settings.search.dateFormat}'}"/> | ||
| <f:form.hidden | ||
| property="orderDateStart" | ||
| value="{f:if(condition: searchArguments.orderDateStart, then: \"{f:format.date(format:'c', date: '{searchArguments.orderDateStart}')}\")}" | ||
| /> | ||
| </div> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchOrderDateEnd" class="form-label"> | ||
| <f:translate key="filterEndDate"/> | ||
| </label> | ||
| <f:form.textfield | ||
| name="orderDateEnd" | ||
| id="searchOrderDateEnd" | ||
| value="{f:if(condition: searchArguments.orderDateEnd, then: \" {f:format.date(format:'{settings.search.dateFormat}', date: '{searchArguments.orderDateEnd}')}\")}" | ||
| additionalAttributes="{'autocomplete': 'off'}" | ||
| class="form-control t3js-datetimepicker t3js-clearable" | ||
| data="{date-type: 'date'}"/> | ||
| <f:form.hidden | ||
| property="orderDateEnd" | ||
| value="{f:if(condition: searchArguments.orderDateEnd, then: \"{f:format.date(format:'c', date: '{searchArguments.orderDateEnd}')}\")}" | ||
| /> | ||
|
|
||
| <div class="col-25" style="float:right;"> | ||
| <f:form.submit value="{f:translate(key: 'filter')}" class="searchall_submit"/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="clear"> </div> | ||
| </f:form> | ||
| <div class="row"> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchInvoiceNumber" class="form-label"> | ||
| <f:translate key="filterInvoiceNumber"/> | ||
| </label> | ||
| <f:form.textfield property="invoiceNumber" id="searchInvoiceNumber" | ||
| class="form-control" | ||
| value="{searchArguments.inoviceNumber}"/> | ||
| </div> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchInvoiceDateStart" class="form-label"> | ||
| <f:translate key="filterStartDate"/> | ||
| </label> | ||
| <f:form.textfield | ||
| name="searchInvoiceDateStart" | ||
| id="invoiceDateStart" | ||
| value="{f:if(condition: searchArguments.invoiceDateStart, then: \" {f:format.date(format:'{settings.search.dateFormat}', date: '{searchArguments.invoiceDateStart}')}\")}" | ||
| additionalAttributes="{'autocomplete': 'off'}" | ||
| class="form-control t3js-datetimepicker t3js-clearable" | ||
| data="{date-type: 'date'}"/> | ||
| <f:form.hidden | ||
| property="invoiceDateStart" | ||
| value="{f:if(condition: searchArguments.invoiceDateStart, then: \"{f:format.date(format:'c', date: '{searchArguments.invoiceDateStart}')}\")}" | ||
| /> | ||
| </div> | ||
| <div class="form-group col col-sm-3"> | ||
| <label for="searchInvoiceDateEnd" class="form-label"> | ||
| <f:translate key="filterEndDate"/> | ||
| </label> | ||
| <f:form.textfield | ||
| name="invoiceDateEnd" | ||
| id="searchInvoiceDateEnd" | ||
| value="{f:if(condition: searchArguments.invoiceDateEnd, then: \" {f:format.date(format:'{settings.search.dateFormat}', date: '{searchArguments.invoiceDateEnd}')}\")}" | ||
| additionalAttributes="{'autocomplete': 'off'}" | ||
| class="form-control t3js-datetimepicker t3js-clearable" | ||
| data="{date-type: 'date'}"/> | ||
| <f:form.hidden | ||
| property="invoiceDateEnd" | ||
| value="{f:if(condition: searchArguments.invoiceDateEnd, then: \"{f:format.date(format:'c', date: '{searchArguments.invoiceDateEnd}')}\")}" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col col-sm-3"> | ||
| <label for="searchPaymentStatus" class="form-label"> | ||
| <f:translate key="tx_cart_domain_model_order_payment"/> | ||
| <f:translate key="tx_cart_domain_model_order_payment.status"/> | ||
| </label> | ||
| <f:form.select id="searchPaymentStatus" class="form-select" property="paymentStatus" | ||
| options="{paymentStatus}" optionValueField="key" optionLabelField="value" | ||
| value="{searchArguments.paymentStatus}"/> | ||
| </div> | ||
| <div class="col col-sm-3"> | ||
| <label for="searchShippingStatus" class="form-label"> | ||
| <f:translate key="tx_cart_domain_model_order_shipping"/> | ||
| <f:translate key="tx_cart_domain_model_order_shipping.status"/> | ||
| </label> | ||
| <f:form.select id="searchShippingStatus" class="form-select" property="shippingStatus" | ||
| options="{shippingStatus}" optionValueField="key" optionLabelField="value" | ||
| value="{searchArguments.paymentStatus}"/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <f:form.submit value="{f:translate(key: 'filter')}" class="my-3 btn btn-default"/> | ||
| </f:form> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.