pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] pos_self_order: order history page UI

Browse Source 
Before this commit, the order history page needed a small ui improvement

The amount and tax were initially separated using justify-content-between
, placing the title on the left and the amount on the right.
To align with Odoo's aesthetics and achieve a ticket-like look, they are
now right-aligned in a table. Additionally, based on feedback, spacing
around the ticket has been removed and the layout has been a little bit
revamped for a cleaner appearance.

task-3500874

closes odoo/odoo#138828

Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
This commit is contained in:
Xavier Luyckx (xlu)
2023-10-17 08:53:13 +00:00
parent ff4a9b018a
commit 2151fe36a3
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/pos_self_order/static/src/app/pages/order_history_page/order_history_page.xml
+21 -17
View File
@@ -12,8 +12,8 @@
<div t-else="" class="d-flex flex-column h-100">
<div class="overflow-y-auto flex-grow-1 flex-shrink-1">
<t t-foreach="orders" t-as="order" t-key="order.access_token">
<div class="o_so_order d-flex flex-column flex-grow-1">
<div class="o_so_order_header p-3 bg-white" t-on-click="() => this.editOrder(order)">
<div class="o_so_order d-flex flex-column flex-grow-1 mb-2 bg-white">
<div class="o_so_order_header p-3" t-on-click="() => this.editOrder(order)">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex flex-column">
<h6 class="m-0" t-esc="order.pos_reference"/>
@@ -30,18 +30,18 @@
<p class="small m-0 fst-italic text-muted"
t-esc="order.date"/>
</div>
<div class="o_so_order_body p-3 bg-300">
<div class="o_so_order_body pt-2 border-top">
<div
t-foreach="order.lines"
t-as="line"
t-key="line.uuid"
t-attf-class="o_self_order_item_card position-relative d-flex align-items-start w-100 bg-white px-3 py-2 overflow-hidden"
t-attf-class="o_self_order_item_card position-relative d-flex align-items-start w-100 px-3 overflow-hidden"
t-on-click="() => this.clickOnLine(order, line)"
>
<div class="d-flex w-100 py-1 justify-content-between">
<div t-attf-class="d-flex {{ line.qty ? 'flex-column align-items-start' : 'flex-row align-items-center' }} text-900 fw-bold fs-6">
<t t-set="lineName" t-value="getNameAndDescription(line)" />
<h3 class="mb-0 o_self_product_name" t-esc="lineName.productName" />
<h4 class="mb-0 o_self_product_name" t-esc="lineName.productName" />
<div t-if="line.qty">
<span class="text-primary fw-bolder small" t-esc="`${line.qty}x `" />
<span
@@ -64,21 +64,25 @@
<span t-esc="line.customer_note" class="customer_note ms-1" />
</div>
</div>
<span t-attf-class="card-text line_price small"
<span t-attf-class="card-text line_price"
t-esc="selfOrder.formatMonetary(getPrice(line))"/>
</div>
</div>
<div class="d-flex flex-column align-items-center px-3 pt-3 bg-white">
<div class="d-grid gap-2 w-100 w-100 pb-3">
<div class="d-flex justify-content-between text-muted">
Tax:
<span t-if="!selfOrder.priceLoading" t-esc="selfOrder.formatMonetary(order.amount_tax)"/>
<span t-else="" class="spinner-border o-self-order-spinner-custom-height"></span>
</div>
<div class="d-flex justify-content-between fw-bold">
Total:
<span t-if="!selfOrder.priceLoading" t-esc="selfOrder.formatMonetary(order.amount_total)"/>
</div>
<div class="d-flex mt-2 px-3">
<div class="ms-auto border-top">
<table class="table table-sm table-borderless mb-0 py-3">
<tbody>
<tr class="text-end text-muted">
<th class="pt-2 pb-0">Tax:</th>
<th class="pt-2 pb-0 pe-0" t-if="!selfOrder.priceLoading" t-esc="selfOrder.formatMonetary(order.amount_tax)"/>
<span t-else="" class="spinner-border"/>
</tr>
<tr class="text-end">
<th class="pt-0">Total:</th>
<th class="pt-0 pe-0" t-if="!selfOrder.priceLoading" t-esc="selfOrder.formatMonetary(order.amount_total)"/>
</tr>
</tbody>
</table>
</div>
</div>
</div>