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

[IMP] point_of_sale: Make Customer Facing Display a Qweb template

Browse Source 
The only reason the customer facing display was a field was that the
customers were able to modify it. As this feature is has been removed,
we can turn it into a Qweb template.

We also remove customer_facing_display.scss as it wasn't used anymore
This commit is contained in:
Antoine Prieels
2020-09-03 10:55:47 +00:00
parent 56be6fa612
commit 1d9edd84e9
8 changed files with 93 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/__manifest__.py
+1 -1
View File
@@ -31,7 +31,6 @@
'views/pos_config_view.xml',
'views/pos_session_view.xml',
'views/point_of_sale_sequence.xml',
'views/customer_facing_display.xml',
'data/point_of_sale_data.xml',
'views/pos_order_report_view.xml',
'views/account_statement_view.xml',
@@ -97,6 +96,7 @@
'static/src/xml/ChromeWidgets/HeaderButton.xml',
'static/src/xml/ChromeWidgets/SaleDetailsButton.xml',
'static/src/xml/ChromeWidgets/TicketButton.xml',
'static/src/xml/CustomerFacingDisplay/CustomerFacingDisplayOrder.xml',
'static/src/xml/SaleDetailsReport.xml',
'static/src/xml/Misc/Draggable.xml',
'static/src/xml/Misc/NotificationSound.xml',
addons/point_of_sale/models/pos_config.py
-5
View File
@@ -97,10 +97,6 @@ class PosConfig(models.Model):
def _get_group_pos_user(self):
return self.env.ref('point_of_sale.group_pos_user')
def _compute_customer_html(self):
for config in self:
config.customer_facing_display_html = self.env['ir.qweb']._render('point_of_sale.customer_facing_display_html')
name = fields.Char(string='Point of Sale', index=True, required=True, help="An internal identification of the point of sale.")
is_installed_account_accountant = fields.Boolean(string="Is the Full Accounting Installed",
compute="_compute_is_installed_account_accountant")
@@ -190,7 +186,6 @@ class PosConfig(models.Model):
fiscal_position_ids = fields.Many2many('account.fiscal.position', string='Fiscal Positions', help='This is useful for restaurants with onsite and take-away services that imply specific tax rates.')
default_fiscal_position_id = fields.Many2one('account.fiscal.position', string='Default Fiscal Position')
default_cashbox_id = fields.Many2one('account.bank.statement.cashbox', string='Default Balance')
customer_facing_display_html = fields.Html(string='Customer facing display content', translate=True, compute=_compute_customer_html)
use_pricelist = fields.Boolean("Use a pricelist.")
tax_regime = fields.Boolean("Tax Regime")
tax_regime_selection = fields.Boolean("Tax Regime Selection value")
addons/point_of_sale/static/src/js/models.js
+5 -37
View File
@@ -875,7 +875,6 @@ exports.PosModel = Backbone.Model.extend({
render_html_for_customer_facing_display: function () {
var self = this;
var order = this.get_order();
var rendered_html = this.config.customer_facing_display_html;
// If we're using an external device like the IoT Box, we
// cannot get /web/image?model=product.product because the
@@ -896,43 +895,12 @@ exports.PosModel = Backbone.Model.extend({
});
}
// when all images are loaded in product.image_base64
return Promise.all(get_image_promises).then(function () {
var rendered_order_lines = "";
var rendered_payment_lines = "";
var order_total_with_tax = self.format_currency(0);
if (order) {
rendered_order_lines = QWeb.render('CustomerFacingDisplayOrderLines', {
'orderlines': order.get_orderlines(),
'pos': self,
});
rendered_payment_lines = QWeb.render('CustomerFacingDisplayPaymentLines', {
'order': order,
'pos': self,
});
order_total_with_tax = self.format_currency(order.get_total_with_tax());
}
var $rendered_html = $(rendered_html);
$rendered_html.find('.pos_orderlines_list').html(rendered_order_lines);
$rendered_html.find('.pos-total').find('.pos_total-amount').html(order_total_with_tax);
var pos_change_title = $rendered_html.find('.pos-change_title').text();
$rendered_html.find('.pos-paymentlines').html(rendered_payment_lines);
$rendered_html.find('.pos-change_title').text(pos_change_title);
// prop only uses the first element in a set of elements,
// and there's no guarantee that
// customer_facing_display_html is wrapped in a single
// root element.
rendered_html = _.reduce($rendered_html, function (memory, current_element) {
return memory + $(current_element).prop('outerHTML');
}, ""); // initial memory of ""
rendered_html = QWeb.render('CustomerFacingDisplayHead', {
origin: window.location.origin
}) + rendered_html;
return rendered_html;
return QWeb.render('CustomerFacingDisplayOrder', {
pos: self.env.pos,
origin: window.location.origin,
order: order,
});
});
},
addons/point_of_sale/static/src/scss/customer_facing_display.scss
-475
View File
@@ -1,475 +0,0 @@
// out: ../css/customer_facing_display.css, sourcemap: false, compress: false
// =========== Variables ===========
$color-gray-lighter: #f6f6f6;
$color-gray-dark: #3E3E3E;
// =========== Animations ===========
@keyframes item_in {
0% { opacity: 0; margin-top: -30px; }
50% { margin-top: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes item_in {
0% { opacity: 0; margin-top: -30px; }
50% { margin-top: 0; }
100% { opacity: 1; }
}
// =========== MIXINS ===========
@mixin pos-bg {
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
&[style*="url(http://placehold.it"] {
// Add a bg-color in case we are using a pleceholder.
// This will help the user to identify the right image dimension
// before apply customizations.
background-color: #ccc;
}
}
// =========== VENDOR PREFIX ===========
@mixin flex-display {
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
}
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
-o-flex-direction: $direction;
flex-direction: $direction;
};
@mixin flex-grow($grow) {
-webkit-box-flex: $grow;
-webkit-flex-grow: $grow;
-moz-box-flex: $grow;
-ms-flex-positive: $grow;
flex-grow: $grow;
}
@mixin flex($flex) {
-webkit-box-flex: $flex;
-webkit-flex: $flex;
-moz-box-flex: $flex;
-ms-flex: $flex;
flex: $flex;
}
@mixin align-items($align) {
-webkit-box-align: $align;
-webkit-align-items: $align;
-moz-box-align: $align;
-ms-flex-align: $align;
-ms-grid-row-align: $align;
align-items: $align;
};
@mixin justify-content($justify) {
-webkit-box-pack: $justify;
-webkit-justify-content: $justify;
-moz-box-pack: $justify;
-ms-flex-pack: $justify;
justify-content: $justify;
}
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
// =========== MAIN LAYOUT ===========
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
font-smooth: always;
.pos-customer_facing_display {
background-color: $color-gray-lighter;
font-size: 2vw;
font-family: Futura, HelveticaNeue, Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 100%;
height: 100%;
padding: 0;
@include flex-display;
@include flex-direction(row);
.pos-customer_products,
.pos-payment_info {
height: 100%;
padding: 2%;
@include flex-display;
@include flex-direction(column);
@include flex-grow(1);
}
.pos_orderlines {
width: 100%;
height: 100%;
@include flex-display;
@include flex-direction(column);
.pos_orderlines_list {
overflow-y: scroll;
padding-right: 1.5vw;
position: relative;
height: 100%;
}
.pos_orderlines_item {
margin-bottom: 1vw;
padding: 1%;
border-radius: 0.3vw;
height: auto;
@include flex(0 1 auto);
@include flex-display;
@include flex-direction(row);
@include align-items(center);
&:last-of-type {
animation: item_in 1s ease;
}
&.pos_orderlines_header {
background-color: transparent;
box-shadow: none;
animation: none;
> div {
&,
&:last-child {
border-left-width: 0;
text-align: center;
font-size: 70%;
font-weight: normal;
}
}
> div:last-child {
text-align: left;
}
}
> div {
width: 5%;
text-align: left;
margin-right: 4%;
font-size: 80%;
@include flex-grow(1);
&:first-child {
margin-right: 2%;
@include flex(1 1 1%);
}
&:nth-child(2) {
width: 40%;
border-left: 1px solid;
padding-left: 2%;
}
&:nth-child(3) {
text-align: center;
}
&:last-child {
margin-right: 0;
font-weight: bold;
}
div {
background-position: center;
background-size: cover;
padding-top: 75%;
display: block;
}
}
}
}
.pos-payment_info {
max-width: 30%;
padding: 2% 2% 1% 2%;
@include flex-direction(column);
@include justify-content(space-between);
.pos-adv,
.pos-company_logo {
@include pos-bg;
}
.pos-company_logo {
background-image: url(/logo);
margin-bottom: 10%;
@include flex(0 0 20%);
}
.pos-adv {
margin-bottom: 5%;
border-bottom: 10px solid transparent;
box-shadow: 0 1px rgba($color-gray-lighter, 0.2);
@include flex(1 1 60%);
}
.pos-payment_info_details{
.pos-total,
.pos-paymentlines {
@include flex-direction(row);
@include flex-display;
@include flex-wrap(wrap);
@include justify-content(space-between);
@include align-items(baseline);
> div {
@include flex(1 0 48%);
&:nth-child(even) {
font-weight: bold;
font-size: 120%;
margin-right: 0
}
}
}
.pos-total {
font-size: 2vw;
}
.pos-paymentlines {
margin-top: 2%;
font-size: 1.5vw;
line-height: 1.3;
}
.pos-odoo_logo_container {
text-align: right;
margin-top: 10%;
@include flex(0 1 auto);
img {
max-width: 40px;
}
}
}
}
}
// =========== PORTRAIT LAYOUT ===========
@media all and (orientation: portrait) {
.pos-customer_facing_display {
font-size: 2vh;
height: 100%;
@include flex-direction(column);
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 17vh;
}
.pos-payment_info .pos-adv {
// Move ADV on top.
position: fixed;
top: 0;
left: 0;
height: 15vh;
width: 99vw;
margin:0.5vh;
border-width: 0;
@include flex-display;
}
&.pos-js_no_ADV {
&:before {
display: none;
}
.pos-customer_products {
padding-top: 0;
}
}
.pos-customer_products {
padding-top: 17vh;
height: 72vw;
overflow: hidden;
.pos_orderlines {
@include flex(1 0 auto);
.pos_orderlines_item {
> div:nth-child(2) {
width: 30%;
}
&.pos_orderlines_header div{
font-size: 90%;
}
}
.pos_orderlines_list {
padding-right: 1.5vh;
height: auto;
.pos_orderlines_item {
box-shadow: 0 .1vh .1vh darken($color-gray-lighter, 10%);
margin-bottom: 1vh;
> div {
font-size: 100%;
}
}
}
}
}
.pos-payment_info {
max-width: 100%;
overflow: hidden;
padding-top: 0;
min-height: 120px;
@include flex(0 1 23vw);
@include flex-direction(row);
@include align-items(center);
@include justify-content(space-between);
.pos-company_logo {
margin: 0;
background-position: left center;
margin-right: 5%;
height: 100%;
padding: 0;
@include flex(1 1 20%);
}
.pos-payment_info_details {
@include flex(0 1 50%);
@include flex-direction(column);
min-width: 170px;
.pos-total {
font-size: 3vw;
.pos_total-amount {
font-size: 3.5vw;
}
}
.pos-paymentlines {
margin-top: 2%;
font-size: 80%;
line-height: 1.2;
}
.pos-odoo_logo_container {
position: absolute;
right: 3%;
bottom: 1%;
}
}
}
}
}
@media all and (orientation: portrait) and (max-width: 340px ) {
.pos-customer_facing_display {
.pos-customer_products .pos_orderlines {
.pos_orderlines_list{
padding-right: 0;
.pos_orderlines_item > div{
font-size: 70%;
}
}
.pos_orderlines_header > div {
font-size: 60%;
&:last-child {
text-align: center;
}
}
}
.pos-payment_info {
.pos-company_logo {
display: none!important;
}
.pos-payment_info_details {
@include flex(1 0 100%);
.pos-total {
font-size: 6vw;
.pos_total-amount {
font-size: 6.5vw;
}
}
}
}
}
}
}
// @media all and (max-width: 340px ) {
// }
body {
// =========== UTILITY CLASSES ===========
.pos-hidden {
opacity: 0;
}
}
// =========== PALETTE GENERATOR ===========
@mixin palette-variant (
$bg-info: $color-gray-dark,
$text-info: $color-gray-lighter,
$bg-products: $color-gray-lighter,
$text-products: lighten($color-gray-dark, 10%),
$card-bg: white,
$card-text: $color-gray-dark,
$card-shadow: darken($bg-products, 30%)) {
.pos-payment_info {
background: $bg-info;
color: $text-info;
}
.pos-customer_products {
background: $bg-products;
color: $text-products;
.pos_orderlines_list .pos_orderlines_item {
background-color: $card-bg;
color: $card-text;
box-shadow: 0 .1vh .1vh $card-shadow;
div:nth-child(2) {
border-color: rgba($card-text, 0.3);
}
}
}
@media all and (orientation: portrait) {
&:before {
background: $bg-info;
}
}
}
// =========== PALETTES ===========
// Those are kept for compatibility for now (previously there was a feature
// which allowed to change the default pos-palette_01 class.
.pos-palette_01 { @include palette-variant; }
.pos-palette_02 { @include palette-variant(#364152, #e6e7e8, #ecf2f6, #364152, white, $color-gray-dark, #364152 ); }
.pos-palette_03 { @include palette-variant(#1BA39C, $color-gray-lighter, #ececec ); }
.pos-palette_04 { @include palette-variant(#0b7b6c, $color-gray-lighter, #efeeec); }
.pos-palette_05 { @include palette-variant(#E26868, $color-gray-lighter, #ececec ); }
.pos-palette_06 { @include palette-variant(#9E373B, $color-gray-lighter); }
.pos-palette_07 { @include palette-variant(#ce9934, white, #ececec ); }
.pos-palette_08 { @include palette-variant(#a48c77, $color-gray-lighter, #ececec ); }
.pos-palette_09 { @include palette-variant(linear-gradient(30deg, #014d43, #127e71), $color-gray-lighter, #ececec ); }
.pos-palette_10 { @include palette-variant(linear-gradient(30deg, #e2316c, #ea4c89), white, #ececec ); }
.pos-palette_11 { @include palette-variant(linear-gradient(30deg, #362b3d, #5b4a63), white, #ececec ); }
.pos-palette_12 { @include palette-variant(#434343, #e6e6e6, #5b5b5b, #bdb9b9, #f5f5f5); }
.pos-palette_13 { @include palette-variant(linear-gradient(30deg, #1a1b1f, #3d3f45), white, #a2a2ab, $color-gray-lighter, $color-gray-lighter); }
addons/point_of_sale/static/src/xml/Chrome.xml
-60
View File
@@ -73,64 +73,4 @@
</div>
</t>
<t t-name="CustomerFacingDisplayHead">
<div class="resources">
<base t-att-href="origin" />
<link href="/point_of_sale/static/src/css/customer_facing_display.css"
rel="stylesheet" />
<script type="text/javascript">
// This function needs to be named that way, call it the foreign JS API
// The iotbox will execute it, with the behavior intended
function foreign_js() {
if ($('.pos-adv').hasClass('pos-hidden')) {
$('.pos-customer_facing_display').addClass('pos-js_no_ADV');
}
$(window).on('resize', function () {
$('.pos-customer_facing_display').toggleClass('pos-js_no_ADV', $('.pos-adv').hasClass('pos-hidden'));
}).trigger('resize');
};
</script>
</div>
</t>
<t t-name="CustomerFacingDisplayOrderLines">
<t t-foreach="orderlines" t-as="orderline">
<div class="pos_orderlines_item">
<div>
<div t-attf-style="background-image:url(#{orderline.product.image_base64})" />
</div>
<div>
<t t-esc="orderline.get_full_product_name()" />
</div>
<div>
<t t-esc="orderline.get_quantity_str()" />
</div>
<div>
<t t-esc="pos.format_currency(orderline.get_display_price())" />
</div>
</div>
</t>
</t>
<t t-name="CustomerFacingDisplayPaymentLines">
<t t-foreach="order.get_paymentlines()" t-as="paymentline">
<div>
<span>
<t t-esc="paymentline.name" /></span>
</div>
<div>
<span>
<t t-esc="pos.format_currency(paymentline.get_amount())" /></span>
</div>
</t>
<t t-if="order.get_paymentlines().length > 0">
<div>
<span class="pos-change_title">Change:</span>
</div>
<div>
<span class="pos-change_amount">
<t t-esc="pos.format_currency(order.get_change())" /></span>
</div>
</t>
</t>
</templates>
addons/point_of_sale/static/src/xml/CustomerFacingDisplay/CustomerFacingDisplayOrder.xml
+87
View File
@@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="CustomerFacingDisplayHead">
<div class="resources">
<base t-att-href="origin"/>
<link href="/point_of_sale/static/src/css/customer_facing_display.css" rel="stylesheet"/>
</div>
</t>
<t t-name="CustomerFacingDisplayOrder">
<!-- Header -->
<t t-call="CustomerFacingDisplayHead"/>
<div class="pos-customer_facing_display pos-palette_01">
<!-- Orderlines -->
<div class="pos-customer_products" name="Products list">
<t t-call="CustomerFacingDisplayOrderLines"/>
</div>
<div class="pos-payment_info">
<!-- Company Logo -->
<div class="pos-company_logo"/>
<div class="pos-payment_info_details">
<!-- Order TOtal -->
<div class="pos-total">
<div>
<span class="total-amount-formatting">TOTAL</span>
</div>
<div>
<span class="pos_total-amount" t-esc="pos.format_currency(order.get_total_with_tax())"/>
</div>
</div>
<!-- Paymentlines -->
<t t-call="CustomerFacingDisplayPaymentLines"/>
<!-- Odoo Logo -->
<div class="pos-odoo_logo_container">
<img src="/web/static/src/img/logo_inverse_white_206px.png" alt="Odoo Logo"/>
</div>
</div>
</div>
</div>
</t>
<t t-name="CustomerFacingDisplayOrderLines">
<div class="pos_orderlines">
<div class="pos_orderlines_item pos_orderlines_header">
<div/>
<div/>
<div>Quantity</div>
<div>Price</div>
</div>
<div class="pos_orderlines_list">
<div t-foreach="order.get_orderlines()" t-as="orderline" class="pos_orderlines_item">
<div><div t-attf-style="background-image:url(#{orderline.product.image_base64})"/></div>
<div t-esc="orderline.get_full_product_name()"/>
<div t-esc="orderline.get_quantity_str()"/>
<div t-esc="pos.format_currency(orderline.get_display_price())"/>
</div>
</div>
</div>
</t>
<t t-name="CustomerFacingDisplayPaymentLines">
<div class="pos-paymentlines">
<t t-foreach="order.get_paymentlines()" t-as="paymentline">
<div>
<span><t t-esc="paymentline.name"/>:</span>
</div>
<div>
<span t-esc="pos.format_currency(paymentline.get_amount())"/>
</div>
</t>
<div>
<span class="pos-change_title">Change</span>
</div>
<div>
<span class="pos-change_amount" t-esc="pos.format_currency(order.get_change())"/>
</div>
</div>
</t>
</templates>
addons/point_of_sale/views/customer_facing_display.xml
-79
View File
@@ -1,79 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="customer_facing_display_html" >
<t name="point_of_sale.customer_facing_display_html" >
<div class="pos-customer_facing_display pos-palette_01">
<div class="pos-customer_products" name="Products list">
<div class="pos_orderlines">
<div class="pos_orderlines_item pos_orderlines_header">
<div/>
<div/>
<div>Quantity</div>
<div>Price</div>
</div>
<div class="pos_orderlines_list">
<div class="pos_orderlines_item">
<div><div style="background-image:url(/point_of_sale/static/img/monitor_stand.png)"/></div>
<div>Monitor Stand</div>
<div>2</div>
<div>$ 4.40</div>
</div>
<div class="pos_orderlines_item">
<div><div style="background-image:url(/point_of_sale/static/img/led_lamp.png)"/></div>
<div>Led Lamp</div>
<div>3</div>
<div>$ 3.12</div>
</div>
<div class="pos_orderlines_item">
<div><div style="background-image:url(/point_of_sale/static/img/whiteboard_pen.png)"/></div>
<div>Whiteboard Pen</div>
<div>3</div>
<div>$ 8.50</div>
</div>
<div class="pos_orderlines_item">
<div><div style="background-image:url(/point_of_sale/static/img/desk_organizer.png)"/></div>
<div>Desk Organizer</div>
<div>1</div>
<div>$ 4.50</div>
</div>
</div>
</div>
</div>
<div class="pos-payment_info">
<div class="pos-company_logo"/>
<div class="pos-payment_info_details">
<div class="pos-total">
<div>
<span class="total-amount-formatting">TOTAL</span>
</div>
<div>
<span id="total-amount" class="pos_total-amount">$ 469.14</span>
</div>
</div>
<div class="pos-paymentlines">
<div>
<span>Cash (USD):</span>
</div>
<div>
<span>$ 470.00</span>
</div>
<div>
<span class="pos-change_title">Change</span>
</div>
<div>
<span class="pos-change_amount">$ 0.86</span>
</div>
</div>
<div class="pos-odoo_logo_container">
<img src="/web/static/src/img/logo_inverse_white_206px.png" alt="Odoo Logo"/>
</div>
</div>
</div>
</div>
</t>
</template>
</odoo>
addons/point_of_sale/views/pos_config_view.xml
-1
View File
@@ -211,7 +211,6 @@
<label string="Customer Display" for="iface_customer_facing_display" class="col-lg-4 o_light_label"/>
<field name="iface_customer_facing_display"/>
</div>
<field name="customer_facing_display_html" invisible="1"/>
</div>
</div>
</div>