Refactor payment code
This commit is contained in:
parent
eba50c6860
commit
78c81d9c6c
@ -9,7 +9,7 @@ frappe.pages['point-of-sale'].on_page_load = function(wrapper) {
|
|||||||
|
|
||||||
wrapper.pos = new PointOfSale(wrapper);
|
wrapper.pos = new PointOfSale(wrapper);
|
||||||
window.cur_pos = wrapper.pos;
|
window.cur_pos = wrapper.pos;
|
||||||
}
|
};
|
||||||
|
|
||||||
class PointOfSale {
|
class PointOfSale {
|
||||||
constructor(wrapper) {
|
constructor(wrapper) {
|
||||||
@ -74,12 +74,20 @@ class PointOfSale {
|
|||||||
this.cart = new POSCart({
|
this.cart = new POSCart({
|
||||||
wrapper: this.wrapper.find('.cart-container'),
|
wrapper: this.wrapper.find('.cart-container'),
|
||||||
events: {
|
events: {
|
||||||
customer_change: (customer) => this.cur_frm.set_value('customer', customer),
|
customer_change: (customer) => this.frm.set_value('customer', customer),
|
||||||
increase_qty: (item_code) => {
|
increase_qty: (item_code) => {
|
||||||
this.add_item_to_cart(item_code);
|
this.add_item_to_cart(item_code);
|
||||||
},
|
},
|
||||||
decrease_qty: (item_code) => {
|
decrease_qty: (item_code) => {
|
||||||
this.add_item_to_cart(item_code, -1);
|
this.add_item_to_cart(item_code, -1);
|
||||||
|
},
|
||||||
|
on_numpad: (value) => {
|
||||||
|
if (value == 'Pay') {
|
||||||
|
if (!this.payment) {
|
||||||
|
this.make_payment_modal();
|
||||||
|
}
|
||||||
|
this.payment.open_modal();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -91,7 +99,7 @@ class PointOfSale {
|
|||||||
pos_profile: this.pos_profile,
|
pos_profile: this.pos_profile,
|
||||||
events: {
|
events: {
|
||||||
item_click: (item_code) => {
|
item_click: (item_code) => {
|
||||||
if(!this.cur_frm.doc.customer) {
|
if(!this.frm.doc.customer) {
|
||||||
frappe.throw(__('Please select a customer'));
|
frappe.throw(__('Please select a customer'));
|
||||||
}
|
}
|
||||||
this.add_item_to_cart(item_code);
|
this.add_item_to_cart(item_code);
|
||||||
@ -104,21 +112,25 @@ class PointOfSale {
|
|||||||
|
|
||||||
if(this.cart.exists(item_code)) {
|
if(this.cart.exists(item_code)) {
|
||||||
// increase qty by 1
|
// increase qty by 1
|
||||||
this.cur_frm.doc.items.forEach((item) => {
|
this.frm.doc.items.forEach((item) => {
|
||||||
if (item.item_code === item_code) {
|
if (item.item_code === item_code) {
|
||||||
frappe.model.set_value(item.doctype, item.name, 'qty', item.qty + qty)
|
const final_qty = item.qty + qty;
|
||||||
|
frappe.model.set_value(item.doctype, item.name, 'qty', final_qty)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
if (final_qty === 0) {
|
||||||
|
frappe.model.clear_doc(item.doctype, item.name);
|
||||||
|
}
|
||||||
|
// update cart
|
||||||
this.cart.add_item(item);
|
this.cart.add_item(item);
|
||||||
})
|
});
|
||||||
// update cart
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// add to cur_frm
|
// add to cur_frm
|
||||||
const item = this.cur_frm.add_child('items', { item_code: item_code });
|
const item = this.frm.add_child('items', { item_code: item_code });
|
||||||
this.cur_frm.script_manager
|
this.frm.script_manager
|
||||||
.trigger('item_code', item.doctype, item.name)
|
.trigger('item_code', item.doctype, item.name)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// update cart
|
// update cart
|
||||||
@ -126,6 +138,10 @@ class PointOfSale {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
make_payment_modal() {
|
||||||
|
this.payment = new Payment(this.frm);
|
||||||
|
}
|
||||||
|
|
||||||
bind_events() {
|
bind_events() {
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -150,8 +166,8 @@ class PointOfSale {
|
|||||||
const name = frappe.model.make_new_doc_and_get_name(dt, true);
|
const name = frappe.model.make_new_doc_and_get_name(dt, true);
|
||||||
frm.refresh(name);
|
frm.refresh(name);
|
||||||
frm.doc.items = [];
|
frm.doc.items = [];
|
||||||
this.cur_frm = frm;
|
this.frm = frm;
|
||||||
this.cur_frm.set_value('is_pos', 1)
|
this.frm.set_value('is_pos', 1);
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -167,7 +183,7 @@ class PointOfSale {
|
|||||||
|
|
||||||
this.page.add_menu_item(__("New Sales Invoice"), function () {
|
this.page.add_menu_item(__("New Sales Invoice"), function () {
|
||||||
//
|
//
|
||||||
})
|
});
|
||||||
|
|
||||||
this.page.add_menu_item(__("Sync Master Data"), function () {
|
this.page.add_menu_item(__("Sync Master Data"), function () {
|
||||||
//
|
//
|
||||||
@ -229,7 +245,7 @@ class POSCart {
|
|||||||
label: 'Customer',
|
label: 'Customer',
|
||||||
options: 'Customer',
|
options: 'Customer',
|
||||||
reqd: 1,
|
reqd: 1,
|
||||||
onchange: (e) => {
|
onchange: () => {
|
||||||
this.events.customer_change.apply(null, [this.customer_field.get_value()]);
|
this.events.customer_change.apply(null, [this.customer_field.get_value()]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -243,19 +259,21 @@ class POSCart {
|
|||||||
wrapper: this.wrapper.find('.number-pad-container'),
|
wrapper: this.wrapper.find('.number-pad-container'),
|
||||||
onclick: (btn_value) => {
|
onclick: (btn_value) => {
|
||||||
// on click
|
// on click
|
||||||
if (btn_value == 'Pay') {
|
if (['Qty', 'Disc', 'Price'].includes(btn_value)) {
|
||||||
this.make_payment()
|
this.set_input_active(btn_value);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(btn_value);
|
this.events.on_numpad.apply(null, [btn_value]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
make_payment() {
|
set_input_active(btn_value) {
|
||||||
this.payment = new MakePayment({
|
if (!this.selected_item) return;
|
||||||
frm: cur_frm
|
|
||||||
})
|
if (btn_value === 'Qty') {
|
||||||
|
this.selected_item.find('.quantity input').css('border', '1px solid blue');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
add_item(item) {
|
add_item(item) {
|
||||||
@ -281,7 +299,6 @@ class POSCart {
|
|||||||
$item.find('.rate').text(item.rate);
|
$item.find('.rate').text(item.rate);
|
||||||
} else {
|
} else {
|
||||||
$item.remove();
|
$item.remove();
|
||||||
frappe.model.clear_doc(item.doctype, item.name)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -352,6 +369,10 @@ class POSCart {
|
|||||||
events.decrease_qty(item_code);
|
events.decrease_qty(item_code);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
const me = this;
|
||||||
|
this.$cart_items.on('click', '.list-item', function() {
|
||||||
|
me.selected_item = $(this);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -528,30 +549,6 @@ class POSItems {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// const template = `
|
|
||||||
|
|
||||||
// <div class="pos-item-wrapper" data-item-code="${item_code}">
|
|
||||||
// <div class="pos-item-head">
|
|
||||||
// <span class="bold">${item_name}</span>
|
|
||||||
// <span class="text-muted">Stock: ${item_stock}</span>
|
|
||||||
// </div>
|
|
||||||
// <div class="pos-item-body">
|
|
||||||
// <div class="pos-item-image text-center"
|
|
||||||
// style="${!item_image ?
|
|
||||||
// 'background-color: #fafbfc;' : ''
|
|
||||||
// } border: 0px;">
|
|
||||||
// ${item_image ?
|
|
||||||
// `<img src="${item_image}" alt="${item_title}">` :
|
|
||||||
// `<span class="placeholder-text">
|
|
||||||
// ${frappe.get_abbr(item_title)}
|
|
||||||
// </span>`
|
|
||||||
// }
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// `;
|
|
||||||
|
|
||||||
return template;
|
return template;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -601,24 +598,27 @@ class POSItems {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class NumberPad {
|
class NumberPad {
|
||||||
constructor({wrapper, onclick}) {
|
constructor({wrapper, onclick, button_array}) {
|
||||||
this.wrapper = wrapper;
|
this.wrapper = wrapper;
|
||||||
this.onclick = onclick;
|
this.onclick = onclick;
|
||||||
|
this.button_array = button_array;
|
||||||
this.make_dom();
|
this.make_dom();
|
||||||
this.bind_events();
|
this.bind_events();
|
||||||
}
|
}
|
||||||
|
|
||||||
make_dom() {
|
make_dom() {
|
||||||
const button_array = [
|
if (!this.button_array) {
|
||||||
[1, 2, 3, 'Qty'],
|
this.button_array = [
|
||||||
[4, 5, 6, 'Disc'],
|
[1, 2, 3, 'Qty'],
|
||||||
[7, 8, 9, 'Price'],
|
[4, 5, 6, 'Disc'],
|
||||||
['Del', 0, '.', 'Pay']
|
[7, 8, 9, 'Price'],
|
||||||
];
|
['Del', 0, '.', 'Pay']
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
this.wrapper.html(`
|
this.wrapper.html(`
|
||||||
<div class="number-pad">
|
<div class="number-pad">
|
||||||
${button_array.map(get_row).join("")}
|
${this.button_array.map(get_row).join("")}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
@ -648,30 +648,38 @@ class NumberPad {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class MakePayment {
|
class Payment {
|
||||||
constructor({frm}) {
|
constructor(frm) {
|
||||||
this.frm = frm
|
this.frm = frm;
|
||||||
this.make();
|
this.make();
|
||||||
this.set_primary_action();
|
this.set_primary_action();
|
||||||
this.show_total_amount();
|
|
||||||
// this.show_outstanding_amount()
|
// this.show_outstanding_amount()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
open_modal() {
|
||||||
|
this.show_total_amount();
|
||||||
|
this.dialog.show();
|
||||||
|
}
|
||||||
|
|
||||||
make() {
|
make() {
|
||||||
const me = this;
|
this.set_flag();
|
||||||
this.update_flag()
|
|
||||||
|
|
||||||
this.dialog = new frappe.ui.Dialog({
|
this.dialog = new frappe.ui.Dialog({
|
||||||
title: __('Payment'),
|
title: __('Payment'),
|
||||||
fields: this.get_fields(),
|
fields: this.get_fields(),
|
||||||
width:800
|
width: 800
|
||||||
});
|
});
|
||||||
|
|
||||||
this.dialog.show();
|
|
||||||
this.$body = this.dialog.body;
|
this.$body = this.dialog.body;
|
||||||
|
|
||||||
this.numpad = new NumberPad({
|
this.numpad = new NumberPad({
|
||||||
wrapper: $(this.$body).find('[data-fieldname = "numpad"]'),
|
wrapper: $(this.$body).find('[data-fieldname="numpad"]'),
|
||||||
|
button_array: [
|
||||||
|
[1, 2, 3],
|
||||||
|
[4, 5, 6],
|
||||||
|
[7, 8, 9],
|
||||||
|
['Del', 0, '.'],
|
||||||
|
],
|
||||||
onclick: (btn_value) => {
|
onclick: (btn_value) => {
|
||||||
// on click
|
// on click
|
||||||
}
|
}
|
||||||
@ -680,24 +688,24 @@ class MakePayment {
|
|||||||
|
|
||||||
set_primary_action() {
|
set_primary_action() {
|
||||||
this.dialog.set_primary_action(__("Submit"), function() {
|
this.dialog.set_primary_action(__("Submit"), function() {
|
||||||
//save form
|
// save form
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
get_fields() {
|
get_fields() {
|
||||||
const me = this;
|
const me = this;
|
||||||
const total_amount = [
|
let fields = [
|
||||||
{
|
{
|
||||||
fieldtype: 'HTML',
|
fieldtype: 'HTML',
|
||||||
fieldname: "total_amount",
|
fieldname: 'total_amount',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
fieldtype: 'Section Break',
|
fieldtype: 'Section Break',
|
||||||
label: __("Mode of Payments")
|
label: __('Mode of Payments')
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const mode_of_paymen_fields = this.frm.doc.payments.map(p => {
|
fields = fields.concat(this.frm.doc.payments.map(p => {
|
||||||
return {
|
return {
|
||||||
fieldtype: 'Currency',
|
fieldtype: 'Currency',
|
||||||
label: __(p.mode_of_payment),
|
label: __(p.mode_of_payment),
|
||||||
@ -707,12 +715,12 @@ class MakePayment {
|
|||||||
onchange: (e) => {
|
onchange: (e) => {
|
||||||
const fieldname = $(e.target).attr('data-fieldname');
|
const fieldname = $(e.target).attr('data-fieldname');
|
||||||
const value = this.dialog.get_value(fieldname);
|
const value = this.dialog.get_value(fieldname);
|
||||||
me.update_payment_value(fieldname, value)
|
me.update_payment_value(fieldname, value);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
})
|
}));
|
||||||
|
|
||||||
const other_fields = [
|
fields = fields.concat([
|
||||||
{
|
{
|
||||||
fieldtype: 'Column Break',
|
fieldtype: 'Column Break',
|
||||||
},
|
},
|
||||||
@ -729,11 +737,11 @@ class MakePayment {
|
|||||||
options: me.frm.doc.currency,
|
options: me.frm.doc.currency,
|
||||||
fieldname: "write_off_amount",
|
fieldname: "write_off_amount",
|
||||||
default: me.frm.doc.write_off_amount,
|
default: me.frm.doc.write_off_amount,
|
||||||
onchange: (e) => {
|
onchange: () => {
|
||||||
me.update_cur_frm_value('write_off_amount', () => {
|
me.update_cur_frm_value('write_off_amount', () => {
|
||||||
frappe.flags.change_amount = false;
|
frappe.flags.change_amount = false;
|
||||||
me.update_change_amount()
|
me.update_change_amount()
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -745,20 +753,19 @@ class MakePayment {
|
|||||||
options: me.frm.doc.currency,
|
options: me.frm.doc.currency,
|
||||||
fieldname: "change_amount",
|
fieldname: "change_amount",
|
||||||
default: me.frm.doc.change_amount,
|
default: me.frm.doc.change_amount,
|
||||||
onchange: (e) => {
|
onchange: () => {
|
||||||
me.update_cur_frm_value('change_amount', () => {
|
me.update_cur_frm_value('change_amount', () => {
|
||||||
frappe.flags.write_off_amount = false;
|
frappe.flags.write_off_amount = false;
|
||||||
me.update_write_off_amount()
|
me.update_write_off_amount();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
]
|
]);
|
||||||
|
|
||||||
$.merge(total_amount, mode_of_paymen_fields)
|
return fields;
|
||||||
return $.merge(total_amount, other_fields)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
update_flag() {
|
set_flag() {
|
||||||
frappe.flags.write_off_amount = true;
|
frappe.flags.write_off_amount = true;
|
||||||
frappe.flags.change_amount = true;
|
frappe.flags.change_amount = true;
|
||||||
}
|
}
|
||||||
@ -797,14 +804,14 @@ class MakePayment {
|
|||||||
}
|
}
|
||||||
|
|
||||||
show_total_amount() {
|
show_total_amount() {
|
||||||
const grand_total = format_currency(this.frm.doc.grand_total, this.frm.doc.currency)
|
const grand_total = format_currency(this.frm.doc.grand_total, this.frm.doc.currency);
|
||||||
const template = `
|
const template = `
|
||||||
<h3>
|
<h3>
|
||||||
${ __("Total Amount") }:
|
${ __("Total Amount") }:
|
||||||
<span class="label label-default">${__(grand_total)}</span>
|
<span class="label label-default">${__(grand_total)}</span>
|
||||||
</h3>
|
</h3>
|
||||||
`
|
`
|
||||||
this.total_amount_section = $(this.$body).find("[data-fieldname = 'total_amount']")
|
this.total_amount_section = $(this.$body).find("[data-fieldname = 'total_amount']");
|
||||||
this.total_amount_section.append(template)
|
this.total_amount_section.html(template);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user