[FIX] point_of_sale: New mobile order list display
Prior to this commit the displayed order information in the order list was inconsistent. This commit rearranges the displayed information. Task-3502304 closes odoo/odoo#134969 Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
This commit is contained in:
Loukas Wets (lowe)
@@ -58,39 +58,50 @@
|
||||
<div class="col narrow p-2">Status</div>
|
||||
<div class="col very-narrow p-2" name="delete"></div>
|
||||
</div>
|
||||
<t t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
|
||||
<t t-if="!ui.isSmall" t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
|
||||
<div class="order-row" t-att-class="{ 'highlight bg-primary text-white': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
|
||||
<div class="col wide p-2 ">
|
||||
<div><t t-esc="getDate(order)"></t></div>
|
||||
<div t-if="ui.isSmall"><t t-esc="getTotal(order)"></t></div>
|
||||
</div>
|
||||
<div class="col wide p-2">
|
||||
<div><t t-esc="order.name"></t></div>
|
||||
<div t-if="ui.isSmall"><t t-esc="getStatus(order)"></t></div>
|
||||
</div>
|
||||
<div class="col p-2" t-if="!ui.isSmall">
|
||||
<div class="col p-2">
|
||||
<div><t t-esc="getPartner(order)"></t></div>
|
||||
</div>
|
||||
<div t-if="showCardholderName() and !ui.isSmall" class="col p-2">
|
||||
<div t-if="showCardholderName()" class="col p-2">
|
||||
<div><t t-esc="getCardholderName(order)"></t></div>
|
||||
</div>
|
||||
<div class="col p-2">
|
||||
<t t-esc="getCashier(order)"></t>
|
||||
</div>
|
||||
<div class="col end p-2">
|
||||
<div><t t-esc="getTotal(order)"></t></div>
|
||||
</div>
|
||||
<div class="col narrow p-2">
|
||||
<div><t t-esc="getStatus(order)"></t></div>
|
||||
</div>
|
||||
<div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
|
||||
<i class="fa fa-trash" aria-hidden="true"/>
|
||||
</div>
|
||||
<div t-else="" class="col very-narrow p-2"></div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="ui.isSmall" t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
|
||||
<div class="mobileOrderList order-row" t-att-class="{ 'highlight bg-primary text-white': isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
|
||||
<div class="col p-2 d-flex justify-content-between align-items-center">
|
||||
<div t-if="ui.isSmall and getPartner(order)"><t t-esc="getPartner(order)"></t></div>
|
||||
<div t-att-class = "ui.isSmall ? 'cashier':''"><t t-esc="getCashier(order)"></t></div>
|
||||
<div t-if="ui.isSmall and !shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2 rounded-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
|
||||
<div><t t-esc="order.name"></t></div>
|
||||
<div><t t-esc="getTotal(order)"></t></div>
|
||||
</div>
|
||||
<div class="col p-2 d-flex justify-content-between align-items-center">
|
||||
<div><t t-esc="getDate(order)"></t></div>
|
||||
<div class="orderStatus"><t t-esc="getStatus(order)"></t></div>
|
||||
</div>
|
||||
<div class="col p-2">
|
||||
<div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button p-2 rounded-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
|
||||
<i class="fa fa-trash" aria-hidden="true"/> Delete
|
||||
</div>
|
||||
</div>
|
||||
<div class="col end p-2" t-if="!ui.isSmall">
|
||||
<div><t t-esc="getTotal(order)"></t></div>
|
||||
</div>
|
||||
<div class="col narrow p-2" t-if="!ui.isSmall">
|
||||
<div><t t-esc="getStatus(order)"></t></div>
|
||||
</div>
|
||||
<div t-if="!shouldHideDeleteButton(order) and !ui.isSmall" class="col very-narrow delete-button p-2" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
|
||||
<i class="fa fa-trash" aria-hidden="true"/><t t-if="ui.isSmall"> Delete</t>
|
||||
</div>
|
||||
<div t-else="" class="col very-narrow p-2"></div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
@@ -42,7 +42,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
|
||||
ProductScreen.do.clickCustomer("Nicole Ford");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(2, "Nicole Ford");
|
||||
TicketScreen.check.nthRowContains(2, "Nicole Ford", false);
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "3");
|
||||
ProductScreen.do.clickPartnerButton();
|
||||
@@ -51,7 +51,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
|
||||
PaymentScreen.check.isShown();
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(3, "Brandon Freeman");
|
||||
TicketScreen.check.nthRowContains(3, "Brandon Freeman", false);
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "2", "4");
|
||||
ProductScreen.do.clickPayButton();
|
||||
@@ -70,9 +70,9 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
|
||||
TicketScreen.do.selectFilter("All active orders");
|
||||
TicketScreen.check.nthRowContains(4, "Receipt");
|
||||
TicketScreen.do.search("Customer", "Nicole");
|
||||
TicketScreen.check.nthRowContains(2, "Nicole");
|
||||
TicketScreen.check.nthRowContains(2, "Nicole", false);
|
||||
TicketScreen.do.search("Customer", "Brandon");
|
||||
TicketScreen.check.nthRowContains(2, "Brandon");
|
||||
TicketScreen.check.nthRowContains(2, "Brandon", false);
|
||||
TicketScreen.do.search("Receipt Number", "-0005");
|
||||
TicketScreen.check.nthRowContains(2, "Receipt");
|
||||
// Close the TicketScreen to see the current order which is in ReceiptScreen.
|
||||
@@ -97,7 +97,7 @@ registry.category("web_tour.tours").add("TicketScreenTour", {
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.do.selectFilter("Paid");
|
||||
TicketScreen.check.nthRowContains(2, "Brandon Freeman");
|
||||
TicketScreen.check.nthRowContains(2, "Brandon Freeman", false);
|
||||
TicketScreen.check.nthRowContains(3, "-0005");
|
||||
// Invoice order
|
||||
TicketScreen.do.selectOrder("-0005");
|
||||
|
||||
@@ -32,7 +32,7 @@ class Do {
|
||||
selectOrder(orderName) {
|
||||
return [
|
||||
{
|
||||
trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}")`,
|
||||
trigger: `.ticket-screen .order-row > .col:contains("${orderName}")`,
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -51,11 +51,11 @@ class Do {
|
||||
deleteOrder(orderName) {
|
||||
return [
|
||||
{
|
||||
trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}")`,
|
||||
trigger: `.ticket-screen .order-row > .col:contains("${orderName}")`,
|
||||
mobile: true,
|
||||
},
|
||||
{
|
||||
trigger: `.ticket-screen .order-row:has(.col:nth-child(2):contains("${orderName}")) .delete-button`,
|
||||
trigger: `.ticket-screen .order-row:has(.col:contains("${orderName}")) .delete-button`,
|
||||
mobile: true,
|
||||
},
|
||||
{
|
||||
@@ -168,12 +168,12 @@ class Check {
|
||||
checkStatus(orderName, status) {
|
||||
return [
|
||||
{
|
||||
trigger: `.ticket-screen .order-row > .col:nth-child(2):contains("${orderName}") ~ .col:nth-child(6):contains(${status})`,
|
||||
trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(6):contains(${status})`,
|
||||
run: () => {},
|
||||
mobile: false,
|
||||
},
|
||||
{
|
||||
trigger: `.ticket-screen .order-row .col:nth-child(2) div:contains("${orderName}") ~ div:contains(${status})`,
|
||||
trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(2):contains(${status})`,
|
||||
run: () => {},
|
||||
mobile: true,
|
||||
},
|
||||
@@ -182,11 +182,13 @@ class Check {
|
||||
/**
|
||||
* Check if the nth row contains the given string.
|
||||
* Note that 1st row is the header-row.
|
||||
* @param {boolean | undefined} viewMode true if in mobile view, false if in desktop, undefined if in both views.
|
||||
*/
|
||||
nthRowContains(n, string) {
|
||||
nthRowContains(n, string, viewMode = undefined) {
|
||||
return [
|
||||
{
|
||||
trigger: `.ticket-screen .orders > .order-row:nth-child(${n}):contains("${string}")`,
|
||||
mobile: viewMode,
|
||||
run: () => {},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -10,89 +10,87 @@ import { SelectionPopup } from "@point_of_sale/../tests/tours/helpers/SelectionP
|
||||
import { getSteps, startSteps } from "@point_of_sale/../tests/tours/helpers/utils";
|
||||
import { registry } from "@web/core/registry";
|
||||
|
||||
registry
|
||||
.category("web_tour.tours")
|
||||
.add("PosHrTour", {
|
||||
test: true,
|
||||
url: "/pos/ui",
|
||||
steps: () => {
|
||||
startSteps();
|
||||
|
||||
PosHr.check.loginScreenIsShown();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.check.isShown();
|
||||
SelectionPopup.check.hasSelectionItem("Pos Employee1");
|
||||
SelectionPopup.check.hasSelectionItem("Pos Employee2");
|
||||
SelectionPopup.check.hasSelectionItem("Mitchell Admin");
|
||||
SelectionPopup.do.clickItem("Pos Employee1");
|
||||
NumberPopup.check.isShown();
|
||||
NumberPopup.do.enterValue("25");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("8 1");
|
||||
NumberPopup.do.fillPopupValue("2581");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ErrorPopup.check.isShown();
|
||||
ErrorPopup.do.clickConfirm();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.do.clickItem("Pos Employee1");
|
||||
NumberPopup.check.isShown();
|
||||
NumberPopup.do.enterValue("25");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("8 0");
|
||||
NumberPopup.do.fillPopupValue("2580");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ProductScreen.check.isShown();
|
||||
ProductScreen.do.confirmOpeningPopup();
|
||||
PosHr.check.cashierNameIs("Pos Employee1");
|
||||
PosHr.do.clickCashierName();
|
||||
SelectionPopup.do.clickItem("Mitchell Admin");
|
||||
PosHr.check.cashierNameIs("Mitchell Admin");
|
||||
Chrome.do.clickMenuButton();
|
||||
PosHr.do.clickLockButton();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.do.clickItem("Pos Employee2");
|
||||
NumberPopup.do.enterValue("12");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("3 4");
|
||||
NumberPopup.do.fillPopupValue("1234");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ProductScreen.check.isShown();
|
||||
ProductScreen.do.clickHomeCategory();
|
||||
|
||||
// Create orders and check if the ticket list has the right employee for each order
|
||||
// order for employee 2
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "2");
|
||||
ProductScreen.check.totalAmountIs("2.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(2, "Pos Employee2");
|
||||
|
||||
// order for employee 1
|
||||
Chrome.do.clickMenuButton();
|
||||
PosHr.do.clickLockButton();
|
||||
PosHr.exec.login("Pos Employee1", "2580");
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "4");
|
||||
ProductScreen.check.totalAmountIs("4.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(2, "Pos Employee2");
|
||||
TicketScreen.check.nthRowContains(3, "Pos Employee1");
|
||||
|
||||
// order for admin
|
||||
PosHr.do.clickCashierName();
|
||||
SelectionPopup.do.clickItem("Mitchell Admin");
|
||||
PosHr.check.cashierNameIs("Mitchell Admin");
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "8");
|
||||
ProductScreen.check.totalAmountIs("8.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(4, "Mitchell Admin");
|
||||
registry.category("web_tour.tours").add("PosHrTour", {
|
||||
test: true,
|
||||
url: "/pos/ui",
|
||||
steps: () => {
|
||||
startSteps();
|
||||
|
||||
return getSteps();
|
||||
}
|
||||
});
|
||||
PosHr.check.loginScreenIsShown();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.check.isShown();
|
||||
SelectionPopup.check.hasSelectionItem("Pos Employee1");
|
||||
SelectionPopup.check.hasSelectionItem("Pos Employee2");
|
||||
SelectionPopup.check.hasSelectionItem("Mitchell Admin");
|
||||
SelectionPopup.do.clickItem("Pos Employee1");
|
||||
NumberPopup.check.isShown();
|
||||
NumberPopup.do.enterValue("25");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("8 1");
|
||||
NumberPopup.do.fillPopupValue("2581");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ErrorPopup.check.isShown();
|
||||
ErrorPopup.do.clickConfirm();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.do.clickItem("Pos Employee1");
|
||||
NumberPopup.check.isShown();
|
||||
NumberPopup.do.enterValue("25");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("8 0");
|
||||
NumberPopup.do.fillPopupValue("2580");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ProductScreen.check.isShown();
|
||||
ProductScreen.do.confirmOpeningPopup();
|
||||
PosHr.check.cashierNameIs("Pos Employee1");
|
||||
PosHr.do.clickCashierName();
|
||||
SelectionPopup.do.clickItem("Mitchell Admin");
|
||||
PosHr.check.cashierNameIs("Mitchell Admin");
|
||||
Chrome.do.clickMenuButton();
|
||||
PosHr.do.clickLockButton();
|
||||
PosHr.do.clickLoginButton();
|
||||
SelectionPopup.do.clickItem("Pos Employee2");
|
||||
NumberPopup.do.enterValue("12");
|
||||
NumberPopup.check.inputShownIs("••");
|
||||
NumberPopup.do.pressNumpad("3 4");
|
||||
NumberPopup.do.fillPopupValue("1234");
|
||||
NumberPopup.check.inputShownIs("••••");
|
||||
NumberPopup.do.clickConfirm();
|
||||
ProductScreen.check.isShown();
|
||||
ProductScreen.do.clickHomeCategory();
|
||||
|
||||
// Create orders and check if the ticket list has the right employee for each order
|
||||
// order for employee 2
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "2");
|
||||
ProductScreen.check.totalAmountIs("2.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(2, "Pos Employee2", false);
|
||||
|
||||
// order for employee 1
|
||||
Chrome.do.clickMenuButton();
|
||||
PosHr.do.clickLockButton();
|
||||
PosHr.exec.login("Pos Employee1", "2580");
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "4");
|
||||
ProductScreen.check.totalAmountIs("4.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(2, "Pos Employee2", false);
|
||||
TicketScreen.check.nthRowContains(3, "Pos Employee1", false);
|
||||
|
||||
// order for admin
|
||||
PosHr.do.clickCashierName();
|
||||
SelectionPopup.do.clickItem("Mitchell Admin");
|
||||
PosHr.check.cashierNameIs("Mitchell Admin");
|
||||
TicketScreen.do.clickNewTicket();
|
||||
ProductScreen.exec.addOrderline("Desk Pad", "1", "8");
|
||||
ProductScreen.check.totalAmountIs("8.0");
|
||||
Chrome.do.clickMenuButton();
|
||||
Chrome.do.clickTicketButton();
|
||||
TicketScreen.check.nthRowContains(4, "Mitchell Admin", false);
|
||||
|
||||
return getSteps();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -18,6 +18,11 @@
|
||||
<div><TipCell order="order" /></div>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('mobileOrderList')]//div[hasclass('orderStatus')]" position="before">
|
||||
<t t-if="order.tableId">
|
||||
<div><t t-esc="getTable(order)"></t></div>
|
||||
</t>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('buttons')]" position="inside">
|
||||
<button class="settle-tips btn btn-lg btn-primary" t-if="_state.ui.filter == 'TIPPING'" t-on-click="settleTips">Settle</button>
|
||||
</xpath>
|
||||
|
||||
Reference in New Issue
Block a user