Styling and code fixes
diff --git a/erpnext/public/css/pos.css b/erpnext/public/css/pos.css
index b19372b..10355f4 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 @@
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 bcbd142..b699a55 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 @@
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 dbe4795..236e923 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 @@
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 @@
.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 @@
});
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 += `
- <div class="list-item" style="padding-right: 0;">
- <div >${data.description}</div>
- <div class="text-right bold">${fmt_money(data.tax_amount, currency)}</div>
- </div>`;
- });
-
- taxes_wrapper.empty()
- taxes_wrapper.html(tax_template);
- }
}
class POSCart {
@@ -363,9 +346,15 @@
<span>No Items added to cart</span>
</div>
</div>
- </div>
- <div class="taxes-and-totals">
- ${this.get_taxes_and_totals()}
+ <div class="taxes-and-totals">
+ ${this.get_taxes_and_totals()}
+ </div>
+ <div class="discount-amount">
+ ${this.get_discount_amount()}
+ </div>
+ <div class="grand-total">
+ ${this.get_grand_total()}
+ </div>
</div>
</div>
<div class="number-pad-container">
@@ -375,6 +364,13 @@
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 @@
this.customer_field.set_value("");
}
+ get_grand_total() {
+ return `
+ <div class="list-item">
+ <div class="list-item__content list-item__content--flex-2 text-muted">${__('Grand Total')}</div>
+ <div class="list-item__content grand-total-value">0.00</div>
+ </div>
+ `;
+ }
+
+ get_discount_amount() {
+ const get_currency_symbol = window.get_currency_symbol;
+
+ return `
+ <div class="list-item">
+ <div class="list-item__content list-item__content--flex-2 text-muted">${__('Discount')}</div>
+ <div class="list-item__content discount-inputs">
+ <input type="text"
+ class="form-control discount-percentage text-right"
+ placeholder="% 0.00"
+ >
+ <input type="text"
+ class="form-control discount-amount text-right"
+ placeholder="${get_currency_symbol(this.frm.doc.currency)} 0.00"
+ >
+ </div>
+ </div>
+ `;
+ }
+
get_taxes_and_totals() {
return `
<div class="list-item">
@@ -394,7 +419,47 @@
<div class="list-item">
<div class="list-item__content list-item__content--flex-2 text-muted">${__('Taxes')}</div>
<div class="list-item__content taxes">0.00</div>
- </div>`;
+ </div>
+ `;
+ }
+
+ 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 `
+ <div>
+ <span>${tax.description}</span>
+ <span class="text-right bold">
+ ${format_currency(tax.tax_amount, currency)}
+ </span>
+ </div>
+ `;
+ }).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 @@
[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 @@
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() {