brotherton-erpnext/erpnext/selling/page/point_of_sale/point_of_sale.js

810 lines
18 KiB
JavaScript

/* global Clusterize */
frappe.pages['point-of-sale'].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: 'Point of Sale',
single_column: true
});
wrapper.pos = new PointOfSale(wrapper);
window.cur_pos = wrapper.pos;
}
class PointOfSale {
constructor(wrapper) {
this.wrapper = $(wrapper).find('.layout-main-section');
this.page = wrapper.page;
const assets = [
'assets/erpnext/js/pos/clusterize.js',
'assets/erpnext/css/pos.css'
];
frappe.require(assets, () => {
this.make();
});
}
make() {
return frappe.run_serially([
() => {
this.prepare_dom();
this.prepare_menu();
this.set_online_status();
},
() => this.make_sales_invoice_frm(),
() => this.setup_pos_profile(),
() => {
this.make_cart();
this.make_items();
this.bind_events();
}
]);
}
set_online_status() {
this.connection_status = false;
this.page.set_indicator(__("Offline"), "grey");
frappe.call({
method: "frappe.handler.ping",
callback: r => {
if (r.message) {
this.connection_status = true;
this.page.set_indicator(__("Online"), "green");
}
}
});
}
prepare_dom() {
this.wrapper.append(`
<div class="pos">
<section class="cart-container">
</section>
<section class="item-container">
</section>
</div>
`);
}
make_cart() {
this.cart = new POSCart({
wrapper: this.wrapper.find('.cart-container'),
events: {
customer_change: (customer) => this.cur_frm.set_value('customer', customer),
increase_qty: (item_code) => {
this.add_item_to_cart(item_code);
},
decrease_qty: (item_code) => {
this.add_item_to_cart(item_code, -1);
}
}
});
}
make_items() {
this.items = new POSItems({
wrapper: this.wrapper.find('.item-container'),
pos_profile: this.pos_profile,
events: {
item_click: (item_code) => {
if(!this.cur_frm.doc.customer) {
frappe.throw(__('Please select a customer'));
}
this.add_item_to_cart(item_code);
}
}
});
}
add_item_to_cart(item_code, qty = 1) {
if(this.cart.exists(item_code)) {
// increase qty by 1
this.cur_frm.doc.items.forEach((item) => {
if (item.item_code === item_code) {
frappe.model.set_value(item.doctype, item.name, 'qty', item.qty + qty)
.then(() => {
this.cart.add_item(item);
})
// update cart
}
});
return;
}
// add to cur_frm
const item = this.cur_frm.add_child('items', { item_code: item_code });
this.cur_frm.script_manager
.trigger('item_code', item.doctype, item.name)
.then(() => {
// update cart
this.cart.add_item(item);
});
}
bind_events() {
}
setup_pos_profile() {
return frappe.call({
method: 'erpnext.stock.get_item_details.get_pos_profile',
args: {
company: frappe.sys_defaults.company
}
}).then(r => {
this.pos_profile = r.message;
});
}
make_sales_invoice_frm() {
const dt = 'Sales Invoice';
return new Promise(resolve => {
frappe.model.with_doctype(dt, () => {
const page = $('<div>');
const frm = new _f.Frm(dt, page, false);
const name = frappe.model.make_new_doc_and_get_name(dt, true);
frm.refresh(name);
frm.doc.items = [];
this.cur_frm = frm;
this.cur_frm.set_value('is_pos', 1)
resolve();
});
});
}
prepare_menu() {
this.page.clear_menu();
// for mobile
this.page.add_menu_item(__("Pay"), function () {
//
}).addClass('visible-xs');
this.page.add_menu_item(__("New Sales Invoice"), function () {
//
})
this.page.add_menu_item(__("Sync Master Data"), function () {
//
});
this.page.add_menu_item(__("Sync Offline Invoices"), function () {
//
});
this.page.add_menu_item(__("POS Profile"), function () {
frappe.set_route('List', 'POS Profile');
});
}
}
class POSCart {
constructor({wrapper, events}) {
this.wrapper = wrapper;
this.events = events;
this.make();
this.bind_events();
}
make() {
this.make_dom();
this.make_customer_field();
this.make_numpad();
}
make_dom() {
this.wrapper.append(`
<div class="customer-field">
</div>
<div class="cart-wrapper">
<div class="list-item-table">
<div class="list-item list-item--head">
<div class="list-item__content list-item__content--flex-2 text-muted">${__('Item Name')}</div>
<div class="list-item__content text-muted text-right">${__('Quantity')}</div>
<div class="list-item__content text-muted text-right">${__('Discount')}</div>
<div class="list-item__content text-muted text-right">${__('Rate')}</div>
</div>
<div class="cart-items">
<div class="empty-state">
<span>No Items added to cart</span>
</div>
</div>
</div>
</div>
<div class="number-pad-container">
</div>
`);
this.$cart_items = this.wrapper.find('.cart-items');
}
make_customer_field() {
this.customer_field = frappe.ui.form.make_control({
df: {
fieldtype: 'Link',
label: 'Customer',
options: 'Customer',
reqd: 1,
onchange: (e) => {
this.events.customer_change.apply(null, [this.customer_field.get_value()]);
}
},
parent: this.wrapper.find('.customer-field'),
render_input: true
});
}
make_numpad() {
this.numpad = new NumberPad({
wrapper: this.wrapper.find('.number-pad-container'),
onclick: (btn_value) => {
// on click
if (btn_value == 'Pay') {
this.make_payment()
}
console.log(btn_value);
}
});
}
make_payment() {
this.payment = new MakePayment({
frm: cur_frm
})
}
add_item(item) {
this.wrapper.find('.cart-items .empty-state').hide();
if (this.exists(item.item_code)) {
// update quantity
this.update_item(item);
} else {
// add to cart
const $item = $(this.get_item_html(item));
$item.appendTo(this.$cart_items);
}
this.highlight_item(item.item_code);
this.scroll_to_item(item.item_code);
}
update_item(item) {
const $item = this.$cart_items.find(`[data-item-code="${item.item_code}"]`);
if(item.qty > 0) {
$item.find('.quantity input').val(item.qty);
$item.find('.discount').text(item.discount_percentage);
$item.find('.rate').text(item.rate);
} else {
$item.remove();
frappe.model.clear_doc(item.doctype, item.name)
}
}
exists(item_code) {
let $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
return $item.length > 0;
}
highlight_item(item_code) {
const $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
$item.addClass('highlight');
setTimeout(() => $item.removeClass('highlight'), 1000);
}
scroll_to_item(item_code) {
const $item = this.$cart_items.find(`[data-item-code="${item_code}"]`);
// const scrollTop = $item.offset().top - this.$cart_items.offset().top + this.$cart_items.scrollTop();
// this.$cart_items.animate({ scrollTop });
}
get_item_html(item) {
return `
<div class="list-item" data-item-code="${item.item_code}">
<div class="item-name list-item__content list-item__content--flex-2 ellipsis">
${item.item_name}
</div>
<div class="quantity list-item__content text-right">
${get_quantity_html(item.qty)}
</div>
<div class="discount list-item__content text-right">
${item.discount_percentage}%
</div>
<div class="rate list-item__content text-right">
${item.rate}
</div>
</div>
`;
function get_quantity_html(value) {
return `
<div class="input-group input-group-xs">
<span class="input-group-btn">
<button class="btn btn-default btn-xs" data-action="increment">+</button>
</span>
<input class="form-control" type="number" value="${value}">
<span class="input-group-btn">
<button class="btn btn-default btn-xs" data-action="decrement">-</button>
</span>
</div>
`;
}
}
bind_events() {
const events = this.events;
this.$cart_items.on('click',
'[data-action="increment"], [data-action="decrement"]', function() {
const $btn = $(this);
const $item = $btn.closest('.list-item[data-item-code]');
const item_code = $item.attr('data-item-code');
const action = $btn.attr('data-action');
if(action === 'increment') {
events.increase_qty(item_code);
} else if(action === 'decrement') {
events.decrease_qty(item_code);
}
});
}
}
class POSItems {
constructor({wrapper, pos_profile, events}) {
this.wrapper = wrapper;
this.pos_profile = pos_profile;
this.items = {};
this.make_dom();
this.make_fields();
this.init_clusterize();
this.bind_events(events);
// bootstrap with 20 items
this.get_items()
.then(items => {
this.items = items
})
.then(() => this.render_items());
}
make_dom() {
this.wrapper.html(`
<div class="fields">
<div class="search-field">
</div>
<div class="item-group-field">
</div>
</div>
<div class="items-wrapper">
</div>
`);
this.items_wrapper = this.wrapper.find('.items-wrapper');
this.items_wrapper.append(`
<div class="list-item-table pos-items-wrapper">
<div class="pos-items image-view-container">
</div>
</div>
`);
}
make_fields() {
// Search field
this.search_field = frappe.ui.form.make_control({
df: {
fieldtype: 'Data',
label: 'Search Item (Ctrl + I)',
placeholder: 'Search by item code, serial number, batch no or barcode'
},
parent: this.wrapper.find('.search-field'),
render_input: true,
});
frappe.ui.keys.on('ctrl+i', () => {
this.search_field.set_focus();
});
this.search_field.$input.on('input', (e) => {
const search_term = e.target.value;
this.filter_items(search_term);
});
// Item group field
this.item_group_field = frappe.ui.form.make_control({
df: {
fieldtype: 'Select',
label: 'Item Group',
options: [
'All Item Groups',
'Raw Materials',
'Finished Goods'
],
default: 'All Item Groups'
},
parent: this.wrapper.find('.item-group-field'),
render_input: true
});
}
init_clusterize() {
this.clusterize = new Clusterize({
scrollElem: this.wrapper.find('.pos-items-wrapper')[0],
contentElem: this.wrapper.find('.pos-items')[0],
rows_in_block: 6
});
}
render_items(items) {
let _items = items || this.items;
const all_items = Object.values(_items).map(item => this.get_item_html(item));
let row_items = [];
const row_container = '<div style="display: flex; border-bottom: 1px solid #ebeff2">';
let curr_row = row_container;
for (let i=0; i < all_items.length; i++) {
// wrap 4 items in a div to emulate
// a row for clusterize
if(i % 4 === 0 && i !== 0) {
curr_row += '</div>';
row_items.push(curr_row);
curr_row = row_container;
}
curr_row += all_items[i];
}
this.clusterize.update(row_items);
}
filter_items(search_term) {
search_term = search_term.toLowerCase();
const filtered_items =
Object.values(this.items)
.filter(item => {
return item.item_code.toLowerCase().includes(search_term) ||
item.item_name.toLowerCase().includes(search_term)
});
this.render_items(filtered_items);
}
bind_events(events) {
this.wrapper.on('click', '.pos-item-wrapper', function(e) {
const $item = $(this);
const item_code = $item.attr('data-item-code');
events.item_click.apply(null, [item_code]);
});
}
get(item_code) {
return this.items[item_code];
}
get_all() {
return this.items;
}
get_item_html(item) {
const { item_code, item_name, image: item_image, item_stock=0, item_price=0} = item;
const item_title = item_name || item_code;
const template = `
<div class="pos-item-wrapper image-view-item" data-item-code="${item_code}">
<div class="image-view-header">
<div>
<a class="grey list-id" data-name="${item_code}" title="${item_title}">
${item_title}
</a>
<p class="text-muted small">(${__(item_stock)})</p>
</div>
</div>
<div class="image-view-body">
<a data-item-code="${item_code}"
title="${item_title}"
>
<div class="image-field"
style="${!item_image ? 'background-color: #fafbfc;' : ''} border: 0px;"
>
${!item_image ? `<span class="placeholder-text">
${frappe.get_abbr(item_title)}
</span>` : '' }
${item_image ? `<img src="${item_image}" alt="${item_title}">` : '' }
</div>
<span class="price-info">
${item_price}
</span>
</a>
</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;
}
get_items(start = 0, page_length = 20) {
return new Promise(res => {
frappe.call({
method: "frappe.desk.reportview.get",
type: "GET",
args: {
doctype: "Item",
fields: [
"`tabItem`.`name`",
"`tabItem`.`owner`",
"`tabItem`.`docstatus`",
"`tabItem`.`modified`",
"`tabItem`.`modified_by`",
"`tabItem`.`item_name`",
"`tabItem`.`item_code`",
"`tabItem`.`disabled`",
"`tabItem`.`item_group`",
"`tabItem`.`stock_uom`",
"`tabItem`.`image`",
"`tabItem`.`variant_of`",
"`tabItem`.`has_variants`",
"`tabItem`.`end_of_life`",
"`tabItem`.`total_projected_qty`"
],
filters: [['disabled', '=', '0']],
order_by: "`tabItem`.`modified` desc",
page_length: page_length,
start: start
}
}).then(r => {
const data = r.message;
const items = frappe.utils.dict(data.keys, data.values);
// convert to key, value
let items_dict = {};
items.map(item => {
items_dict[item.item_code] = item;
});
res(items_dict);
});
});
}
}
class NumberPad {
constructor({wrapper, onclick}) {
this.wrapper = wrapper;
this.onclick = onclick;
this.make_dom();
this.bind_events();
}
make_dom() {
const button_array = [
[1, 2, 3, 'Qty'],
[4, 5, 6, 'Disc'],
[7, 8, 9, 'Price'],
['Del', 0, '.', 'Pay']
];
this.wrapper.html(`
<div class="number-pad">
${button_array.map(get_row).join("")}
</div>
`);
function get_row(row) {
return '<div class="num-row">' + row.map(get_col).join("") + '</div>';
}
function get_col(col) {
return `<div class="num-col" data-value="${col}"><div>${col}</div></div>`;
}
}
bind_events() {
// bind click event
const me = this;
this.wrapper.on('click', '.num-col', function() {
const $btn = $(this);
me.highlight_button($btn);
me.onclick.apply(null, [$btn.attr('data-value')]);
});
}
highlight_button($btn) {
// const $btn = this.wrapper.find(`[data-value="${value}"]`);
$btn.addClass('highlight');
setTimeout(() => $btn.removeClass('highlight'), 1000);
}
}
class MakePayment {
constructor({frm}) {
this.frm = frm
this.make();
this.set_primary_action();
this.show_total_amount();
// this.show_outstanding_amount()
}
make() {
const me = this;
this.update_flag()
this.dialog = new frappe.ui.Dialog({
title: __('Payment'),
fields: this.get_fields(),
width:800
});
this.dialog.show();
this.$body = this.dialog.body;
this.numpad = new NumberPad({
wrapper: $(this.$body).find('[data-fieldname = "numpad"]'),
onclick: (btn_value) => {
// on click
}
});
}
set_primary_action() {
this.dialog.set_primary_action(__("Submit"), function() {
//save form
})
}
get_fields() {
const me = this;
const total_amount = [
{
fieldtype: 'HTML',
fieldname: "total_amount",
},
{
fieldtype: 'Section Break',
label: __("Mode of Payments")
},
]
const mode_of_paymen_fields = this.frm.doc.payments.map(p => {
return {
fieldtype: 'Currency',
label: __(p.mode_of_payment),
options: me.frm.doc.currency,
fieldname: p.mode_of_payment,
default: p.amount,
onchange: (e) => {
const fieldname = $(e.target).attr('data-fieldname');
const value = this.dialog.get_value(fieldname);
me.update_payment_value(fieldname, value)
}
}
})
const other_fields = [
{
fieldtype: 'Column Break',
},
{
fieldtype: 'HTML',
fieldname: 'numpad'
},
{
fieldtype: 'Section Break',
},
{
fieldtype: 'Currency',
label: __("Write off Amount"),
options: me.frm.doc.currency,
fieldname: "write_off_amount",
default: me.frm.doc.write_off_amount,
onchange: (e) => {
me.update_cur_frm_value('write_off_amount', () => {
frappe.flags.change_amount = false;
me.update_change_amount()
})
}
},
{
fieldtype: 'Column Break',
},
{
fieldtype: 'Currency',
label: __("Change Amount"),
options: me.frm.doc.currency,
fieldname: "change_amount",
default: me.frm.doc.change_amount,
onchange: (e) => {
me.update_cur_frm_value('change_amount', () => {
frappe.flags.write_off_amount = false;
me.update_write_off_amount()
})
}
},
]
$.merge(total_amount, mode_of_paymen_fields)
return $.merge(total_amount, other_fields)
}
update_flag() {
frappe.flags.write_off_amount = true;
frappe.flags.change_amount = true;
}
update_cur_frm_value(fieldname, callback) {
if (frappe.flags[fieldname]) {
const value = this.dialog.get_value(fieldname);
this.frm.set_value(fieldname, value)
.then(() => {
callback()
})
}
frappe.flags[fieldname] = true;
}
update_payment_value(fieldname, value) {
var me = this;
$.each(this.frm.doc.payments, function(i, data) {
if (__(data.mode_of_payment) == __(fieldname)) {
frappe.model.set_value('Sales Invoice Payment', data.name, 'amount', value)
.then(() => {
me.update_change_amount();
me.update_write_off_amount();
})
}
});
}
update_change_amount() {
this.dialog.set_value("change_amount", this.frm.doc.change_amount)
}
update_write_off_amount() {
this.dialog.set_value("write_off_amount", this.frm.doc.write_off_amount)
}
show_total_amount() {
const grand_total = format_currency(this.frm.doc.grand_total, this.frm.doc.currency)
const template = `
<h3>
${ __("Total Amount") }:
<span class="label label-default">${__(grand_total)}</span>
</h3>
`
this.total_amount_section = $(this.$body).find("[data-fieldname = 'total_amount']")
this.total_amount_section.append(template)
}
}