From d733b7d7d088fbdc235ba9c03e45ea11905ef843 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sun, 27 Aug 2017 13:56:33 +0530 Subject: [PATCH] Styling and code fixes --- erpnext/public/css/pos.css | 41 +++++- erpnext/public/less/pos.less | 57 +++++++- .../page/point_of_sale/point_of_sale.js | 127 +++++++++++++----- 3 files changed, 192 insertions(+), 33 deletions(-) diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css index b19372b295..10355f456c 100644 --- a/erpnext/public/css/pos.css +++ b/erpnext/public/css/pos.css @@ -1,6 +1,16 @@ +[data-route="point-of-sale"] .layout-main-section-wrapper { + margin-bottom: 0; +} +[data-route="point-of-sale"] .pos-items-wrapper { + max-height: calc(100vh - 210px); +} .pos { padding: 15px; } +.list-item { + min-height: 40px; + height: auto; +} .cart-container { padding: 0 15px; display: inline-block; @@ -33,7 +43,7 @@ flex: 1.5; } .cart-items { - height: 200px; + height: 150px; overflow: auto; } .cart-items .list-item.current-item { @@ -132,3 +142,32 @@ input[type=number]::-webkit-outer-spin-button { background-color: #5E64FF; color: #ffffff; } +.discount-amount .discount-inputs { + display: flex; + flex-direction: column; + padding: 15px 0; +} +.discount-amount input:first-child { + margin-bottom: 10px; +} +.taxes-and-totals { + border-top: 1px solid #d1d8dd; +} +.taxes-and-totals .taxes { + display: flex; + flex-direction: column; + padding: 15px 0; + align-items: flex-end; +} +.taxes-and-totals .taxes > div:first-child { + margin-bottom: 10px; +} +.grand-total { + border-top: 1px solid #d1d8dd; +} +.grand-total .list-item { + height: 60px; +} +.grand-total .grand-total-value { + font-size: 24px; +} diff --git a/erpnext/public/less/pos.less b/erpnext/public/less/pos.less index bcbd142dd1..b699a55f85 100644 --- a/erpnext/public/less/pos.less +++ b/erpnext/public/less/pos.less @@ -1,10 +1,25 @@ @import "../../../../frappe/frappe/public/less/variables.less"; +[data-route="point-of-sale"] { + .layout-main-section-wrapper { + margin-bottom: 0; + } + + .pos-items-wrapper { + max-height: ~"calc(100vh - 210px)"; + } +} + .pos { // display: flex; padding: 15px; } +.list-item { + min-height: 40px; + height: auto; +} + .cart-container { padding: 0 15px; // flex: 2; @@ -46,7 +61,7 @@ } .cart-items { - height: 200px; + height: 150px; overflow: auto; .list-item.current-item { @@ -163,4 +178,44 @@ input[type=number]::-webkit-outer-spin-button { background-color: @brand-primary; color: #ffffff; } +} + +// taxes, totals and discount area +.discount-amount { + .discount-inputs { + display: flex; + flex-direction: column; + padding: 15px 0; + } + + input:first-child { + margin-bottom: 10px; + } +} + +.taxes-and-totals { + border-top: 1px solid @border-color; + + .taxes { + display: flex; + flex-direction: column; + padding: 15px 0; + align-items: flex-end; + + & > div:first-child { + margin-bottom: 10px; + } + } +} + +.grand-total { + border-top: 1px solid @border-color; + + .list-item { + height: 60px; + } + + .grand-total-value { + font-size: 24px; + } } \ No newline at end of file diff --git a/erpnext/selling/page/point_of_sale/point_of_sale.js b/erpnext/selling/page/point_of_sale/point_of_sale.js index dbe47956c5..236e923255 100644 --- a/erpnext/selling/page/point_of_sale/point_of_sale.js +++ b/erpnext/selling/page/point_of_sale/point_of_sale.js @@ -150,8 +150,9 @@ class PointOfSale { this.cart.add_item(item); }) .then(() => { - this.show_taxes_and_totals(); - }) + this.cart.update_taxes_and_totals(); + this.cart.update_grand_total(); + }); // if (barcode) { // const value = barcode['serial_no'] ? @@ -170,7 +171,8 @@ class PointOfSale { .then(() => { // update cart this.cart.add_item(item); - this.show_taxes_and_totals(); + this.cart.update_taxes_and_totals(); + this.cart.update_grand_total(); }); } @@ -306,28 +308,9 @@ class PointOfSale { }); this.page.add_menu_item(__("Email"), function () { - me.frm.email_doc(); + this.frm.email_doc(); }); } - - show_taxes_and_totals() { - let tax_template = ''; - let currency = this.frm.doc.currency; - const taxes_wrapper = $(this.wrapper).find('.taxes'); - - this.frm.refresh_field('taxes'); - $(this.wrapper).find('.net-total').html(format_currency(this.frm.doc.net_total, this.currency)) - $.each(this.frm.doc.taxes, function(index, data) { - tax_template += ` -
-
${data.description}
-
${fmt_money(data.tax_amount, currency)}
-
`; - }); - - taxes_wrapper.empty() - taxes_wrapper.html(tax_template); - } } class POSCart { @@ -363,9 +346,15 @@ class POSCart { No Items added to cart - -
- ${this.get_taxes_and_totals()} +
+ ${this.get_taxes_and_totals()} +
+
+ ${this.get_discount_amount()} +
+
+ ${this.get_grand_total()} +
@@ -375,6 +364,13 @@ class POSCart { this.$cart_items = this.wrapper.find('.cart-items'); this.$empty_state = this.wrapper.find('.cart-items .empty-state'); this.$taxes_and_totals = this.wrapper.find('.taxes-and-totals'); + this.$discount_amount = this.wrapper.find('.discount-amount'); + this.$grand_total = this.wrapper.find('.grand-total'); + + this.toggle_taxes_and_totals(false); + this.$grand_total.on('click', () => { + this.toggle_taxes_and_totals(); + }); } reset() { @@ -385,6 +381,35 @@ class POSCart { this.customer_field.set_value(""); } + get_grand_total() { + return ` +
+
${__('Grand Total')}
+
0.00
+
+ `; + } + + get_discount_amount() { + const get_currency_symbol = window.get_currency_symbol; + + return ` +
+
${__('Discount')}
+
+ + +
+
+ `; + } + get_taxes_and_totals() { return `
@@ -394,7 +419,47 @@ class POSCart {
${__('Taxes')}
0.00
-
`; +
+ `; + } + + toggle_taxes_and_totals(flag) { + if (flag !== undefined) { + this.tax_area_is_shown = flag; + } else { + this.tax_area_is_shown = !this.tax_area_is_shown; + } + + this.$taxes_and_totals.toggle(this.tax_area_is_shown); + this.$discount_amount.toggle(this.tax_area_is_shown); + } + + update_taxes_and_totals() { + const currency = this.frm.doc.currency; + this.frm.refresh_field('taxes'); + + // Update totals + this.$taxes_and_totals.find('.net-total') + .html(format_currency(this.frm.doc.net_total, currency)); + + // Update taxes + const taxes_html = this.frm.doc.taxes.map(tax => { + return ` +
+ ${tax.description} + + ${format_currency(tax.tax_amount, currency)} + +
+ `; + }).join(""); + this.$taxes_and_totals.find('.taxes').html(taxes_html); + } + + update_grand_total() { + this.$grand_total.find('.grand-total-value').text( + format_currency(this.frm.doc.grand_total, this.frm.currency) + ); } make_customer_field() { @@ -965,9 +1030,9 @@ class Payment { [7, 8, 9], ['Del', 0, '.'], ], - onclick: (btn_value) => { + onclick: () => { if(this.fieldname) { - this.dialog.set_value(this.fieldname, flt(this.numpad.value)) + this.dialog.set_value(this.fieldname, this.numpad.get_value()); } } }); @@ -976,9 +1041,9 @@ class Payment { bind_events() { var me = this; $(this.dialog.body).find('.input-with-feedback').focusin(function() { - me.numpad.value = ''; + me.numpad.reset_value(); me.fieldname = $(this).prop('dataset').fieldname; - }) + }); } set_primary_action() {