From 6cabcd7f1c56669a8222654cdb09dcdbea8c0dc6 Mon Sep 17 00:00:00 2001 From: "Adrien Guilliams (adgu)" Date: Fri, 3 Mar 2023 09:15:09 +0100 Subject: [PATCH] [IMP] pos: New FloorScreen kanban view and more Currently, there is only 1 plan view that is unreadable on mobile and sometimes also complicated in some cases. This commit adds a new "Kanban" view used by default on mobile and available in desktop too. This commit also changes the edit bar of the FloorScreen: the design is changed and some features are added like the multiple selection of the tables or the adding and removing of floors directly from the frontend. It also changes the navbar of the PoS, moving the buttons in a navigation menu accessible thanks to a button. Task-id: 3212032 --- .../static/src/app/navbar/navbar.js | 25 +- .../static/src/app/navbar/navbar.xml | 38 ++- .../src/js/ChromeWidgets/BackendButton.js | 17 + addons/point_of_sale/static/src/scss/pos.scss | 91 +++-- .../src/xml/ChromeWidgets/BackendButton.xml | 12 + .../src/xml/ChromeWidgets/CashierName.xml | 2 +- .../CustomerFacingDisplayButton.xml | 7 +- .../src/xml/ChromeWidgets/HeaderButton.xml | 8 +- .../static/src/xml/Popups/ClosePosPopup.xml | 1 - .../static/tests/tours/Chrome.tour.js | 8 + .../static/tests/tours/PaymentScreen.tour.js | 4 + .../static/tests/tours/TicketScreen.tour.js | 5 + .../static/tests/tours/acceptance_tour.js | 4 + .../tests/tours/helpers/ChromeTourMethods.js | 8 + .../tours/helpers/ProductScreenTourMethods.js | 6 +- .../static/tests/tours/pricelist_tour.js | 4 +- addons/pos_hr/static/src/app/navbar.xml | 12 +- addons/pos_hr/static/src/css/pos.css | 11 - .../pos_hr/static/src/js/HeaderLockButton.js | 7 +- .../static/src/xml/HeaderLockButton.xml | 11 +- addons/pos_hr/static/tests/tours/PosHrTour.js | 5 + .../static/tests/tours/PosHrTourMethods.js | 2 +- .../pos_restaurant/models/pos_restaurant.py | 34 +- addons/pos_restaurant/models/pos_session.py | 3 + .../static/src/app/floor_screen/edit_bar.js | 33 +- .../static/src/app/floor_screen/edit_bar.xml | 109 +++--- .../src/app/floor_screen/editable_table.js | 47 ++- .../src/app/floor_screen/editable_table.xml | 2 +- .../src/app/floor_screen/floor_screen.js | 323 ++++++++++++++---- .../src/app/floor_screen/floor_screen.scss | 198 ++++++----- .../src/app/floor_screen/floor_screen.xml | 62 ++-- .../static/src/app/floor_screen/table.js | 42 ++- .../static/src/app/floor_screen/table.xml | 2 +- .../static/src/app/navbar/navbar.js | 10 +- .../static/src/app/navbar/navbar.xml | 8 + .../static/src/app/pos_store.js | 6 +- addons/pos_restaurant/static/src/js/Chrome.js | 2 +- .../ControlButtons/TransferOrderButton.js | 2 +- .../js/Screens/ReceiptScreen/ReceiptScreen.js | 6 +- .../static/src/js/Screens/TicketScreen.js | 14 +- .../static/src/js/Screens/TipScreen.js | 4 +- addons/pos_restaurant/static/src/js/models.js | 44 +-- .../static/src/xml/Screens/TicketScreen.xml | 4 +- .../static/tests/tours/FloorScreen.tour.js | 34 +- .../tests/tours/SplitBillScreen.tour.js | 3 + .../static/tests/tours/TicketScreen.tour.js | 5 + .../static/tests/tours/TipScreen.tour.js | 7 + .../tours/helpers/FloorScreenTourMethods.js | 47 ++- .../static/tests/tours/pos_restaurant.js | 3 + .../static/tests/tours/PosSaleTour.js | 1 + addons/pos_six/static/app/navbar.xml | 2 +- .../pos_six/static/src/xml/BalanceButton.xml | 6 +- 52 files changed, 914 insertions(+), 437 deletions(-) create mode 100644 addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js create mode 100644 addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.js b/addons/point_of_sale/static/src/app/navbar/navbar.js index f56139be1e0..3df9be05c6a 100644 --- a/addons/point_of_sale/static/src/app/navbar/navbar.js +++ b/addons/point_of_sale/static/src/app/navbar/navbar.js @@ -9,9 +9,10 @@ import { HeaderButton } from "@point_of_sale/js/ChromeWidgets/HeaderButton"; import { ProxyStatus } from "@point_of_sale/js/ChromeWidgets/ProxyStatus"; import { SaleDetailsButton } from "@point_of_sale/js/ChromeWidgets/SaleDetailsButton"; import { SyncNotification } from "@point_of_sale/js/ChromeWidgets/SyncNotification"; +import { BackendButton } from "@point_of_sale/js/ChromeWidgets/BackendButton"; import { CashMovePopup } from "./cash_move_popup/cash_move_popup"; import { TicketScreen } from "@point_of_sale/js/Screens/TicketScreen/TicketScreen"; -import { Component } from "@odoo/owl"; +import { Component, useState, useExternalListener } from "@odoo/owl"; export class Navbar extends Component { static template = "point_of_sale.Navbar"; @@ -23,6 +24,7 @@ export class Navbar extends Component { ProxyStatus, SaleDetailsButton, SyncNotification, + BackendButton, }; static props = { showCashMoveButton: Boolean, @@ -33,7 +35,16 @@ export class Navbar extends Component { this.popup = useService("popup"); this.notification = useService("pos_notification"); this.hardwareProxy = useService("hardware_proxy"); + this.state = useState({ isMenuOpened: false }); + useExternalListener(window, "mouseup", this.onOutsideClick); } + + onOutsideClick() { + if (this.state.isMenuOpened) { + this.state.isMenuOpened = false; + } + } + get customerFacingDisplayButtonIsShown() { return this.env.pos.config.iface_customer_facing_display; } @@ -81,4 +92,16 @@ export class Navbar extends Component { } return 0; } + + isBurgerMenuClosed() { + return !this.state.isMenuOpened; + } + + closeMenu() { + this.state.isMenuOpened = false; + } + + openMenu() { + this.state.isMenuOpened = true; + } } diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.xml b/addons/point_of_sale/static/src/app/navbar/navbar.xml index 4a96a0235a7..5c692b92ba7 100644 --- a/addons/point_of_sale/static/src/app/navbar/navbar.xml +++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml @@ -6,16 +6,6 @@
-
- - Cash In/Out -
-
-
- -
-
Orders
-
@@ -24,7 +14,33 @@ - +
+
+ +
+
+
    +
  • + +
      +
    • +
      + Orders +
      +
      • +
    • + Cash In/Out +
      • + +
      + +
      + +
      +
      +
    +
    • +
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js new file mode 100644 index 00000000000..75f9cebdd59 --- /dev/null +++ b/addons/point_of_sale/static/src/js/ChromeWidgets/BackendButton.js @@ -0,0 +1,17 @@ +/** @odoo-module */ + +import { useService } from "@web/core/utils/hooks"; +import { Component } from "@odoo/owl"; + +export class BackendButton extends Component { + static template = "BackendButton"; + + setup() { + super.setup(...arguments); + this.pos = useService("pos"); + } + + async onClick() { + this.pos.closePos(); + } +} diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss index 5b9d70ac8af..c578546fa61 100644 --- a/addons/point_of_sale/static/src/scss/pos.scss +++ b/addons/point_of_sale/static/src/scss/pos.scss @@ -363,18 +363,12 @@ td { cursor: pointer; } -.pos .ticket-button { - display: flex; -} - /* b) The right part of the top-bar */ .pos .pos-rightheader { flex-grow: 1; height:100%; display: flex; - overflow : hidden; - overflow-x: auto; } .pos .pos-rightheader > * { border-right: 1px solid $o-brand-odoo; @@ -394,11 +388,17 @@ td { padding: 0 10px; /*$dropdown-item-padding-x * .5*/ } +.pos .status-buttons .cashier-name { + display: flex; + align-items: center; + gap: 5px; +} + .pos .status-buttons i.fa { font-size: large; } -.pos .status-buttons .avatar, .pos .status-buttons i.fa-sign-out { +.pos .status-buttons .avatar { vertical-align: middle; } @@ -480,20 +480,6 @@ td { flex: 1; } -/* c) The session buttons */ - -.pos .pos-rightheader .header-button { - cursor: pointer; - - -webkit-transition-property: background; - -webkit-transition-duration: 0.2s; - -webkit-transition-timing-function: ease-out; -} -.pos .pos-rightheader .header-button:active{ - background: rgba(0,0,0,0.2); - color:#EEE; -} - /* c) The notifications indicator */ .pos .oe_status{ @@ -3411,28 +3397,6 @@ td { transition: all 300ms linear; } -.ticket-button { - display: flex; - align-items: center; - padding: 0 15px; - font-size: medium; - color: white; -} - -.ticket-button.highlight { - background: rgba(0, 0, 0, .08); -} - -.ticket-button:hover { - background: rgba(0, 0, 0, .08); - cursor: pointer; -} - -.ticket-button .with-badge { - margin-right: 0.7em; - font-size: larger; -} - [badge] { position: relative; } @@ -3447,8 +3411,8 @@ td { padding: 2px; position: absolute; text-align: center; - left: 0.6em; - bottom: 0.6em; + left: 5em; + bottom: 0; } [badge^="-"]:after, @@ -3457,7 +3421,7 @@ td { display: none; } -.cash-move-button { +.navbar-button { display: flex; align-items: center; padding: 0 15px; @@ -3465,7 +3429,7 @@ td { color: white; } -.cash-move-button:hover { +.navbar-button:hover { background: rgba(0, 0, 0, .08); cursor: pointer; } @@ -3783,3 +3747,36 @@ td { transform: translate(24px, 0); } } + +.menu { + color: white; + z-index: 1000; + font-size: medium; + + &-item { + display: flex; + position: relative; + + .sub-menu { + position: absolute; + top: 33px; + right: -16px; + width: 216px; + display: flex; + flex-direction: column; + background-color: white; + z-index: 9999; + align-items: stretch; + + .menu-item { + padding: 10px; + + span, i { + color: black; + inline-size: 196px; + overflow-wrap: break-word; + } + } + } + } +} diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml new file mode 100644 index 00000000000..f3192e3e2b5 --- /dev/null +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/BackendButton.xml @@ -0,0 +1,12 @@ + + + + +
  • + + Backend + +
    • +     + +     diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml index 33f45ac1476..5a0a76c929a 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/CashierName.xml @@ -3,7 +3,7 @@
    - +
    diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml index 68d210ce50a..2e699e932be 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/CustomerFacingDisplayButton.xml @@ -2,7 +2,7 @@ -
    +
  • @@ -12,8 +12,9 @@
    -
    -
    • + + Customer Screen +     diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml index d1a883c84ac..df358d34545 100644 --- a/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml +++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/HeaderButton.xml @@ -2,9 +2,11 @@ -
    - Close -
    +
  • + + Close Session + +
    • diff --git a/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml b/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml index fcca0f7a265..3c47004a2ac 100644 --- a/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml +++ b/addons/point_of_sale/static/src/xml/Popups/ClosePosPopup.xml @@ -80,7 +80,6 @@