+
+ `);
+ 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() {
+ this.$cart_items.find('.list-item').remove();
+ this.$empty_state.show();
+ this.$taxes_and_totals.html(this.get_taxes_and_totals());
+ this.numpad && this.numpad.reset_value();
+ this.customer_field.set_value("");
+ }
+
+ get_grand_total() {
+ return `
+
+
+
+
+
+
+
+
+ ${__('Item Name')}
+ ${__('Quantity')}
+ ${__('Discount')}
+ ${__('Rate')}
+
+
+
+ No Items added to cart
+
+
+ ${this.get_taxes_and_totals()}
+
+
+ ${this.get_discount_amount()}
+
+
+ ${this.get_grand_total()}
+
+
+
+
+
+ `;
+ }
+
+ get_discount_amount() {
+ const get_currency_symbol = window.get_currency_symbol;
+
+ return `
+ ${__('Grand Total')}
+ 0.00
+
+
+ `;
+ }
+
+ get_taxes_and_totals() {
+ return `
+ ${__('Discount')}
+
+
+
+
+
+
+ ${__('Net Total')}
+ 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 `
+ ${__('Taxes')}
+ 0.00
+
+ ${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() {
+ this.customer_field = frappe.ui.form.make_control({
+ df: {
+ fieldtype: 'Link',
+ label: 'Customer',
+ fieldname: 'customer',
+ options: 'Customer',
+ reqd: 1,
+ default: this.frm.doc.customer,
+ onchange: () => {
+ this.events.on_customer_change(this.customer_field.get_value());
+ }
+ },
+ parent: this.wrapper.find('.customer-field'),
+ render_input: true
+ });
+ }
+
+ make_numpad() {
+ this.numpad = new NumberPad({
+ button_array: [
+ [1, 2, 3, 'Qty'],
+ [4, 5, 6, 'Disc'],
+ [7, 8, 9, 'Rate'],
+ ['Del', 0, '.', 'Pay']
+ ],
+ add_class: {
+ 'Pay': 'brand-primary'
+ },
+ disable_highlight: ['Qty', 'Disc', 'Rate', 'Pay'],
+ reset_btns: ['Qty', 'Disc', 'Rate', 'Pay'],
+ del_btn: 'Del',
+ wrapper: this.wrapper.find('.number-pad-container'),
+ onclick: (btn_value) => {
+ // on click
+ if (!this.selected_item && btn_value !== 'Pay') {
+ frappe.show_alert({
+ indicator: 'red',
+ message: __('Please select an item in the cart')
+ });
+ return;
+ }
+ if (['Qty', 'Disc', 'Rate'].includes(btn_value)) {
+ this.set_input_active(btn_value);
+ } else if (btn_value !== 'Pay') {
+ if (!this.selected_item.active_field) {
+ frappe.show_alert({
+ indicator: 'red',
+ message: __('Please select a field to edit from numpad')
+ });
+ return;
+ }
+
+ const item_code = this.selected_item.attr('data-item-code');
+ const field = this.selected_item.active_field;
+ const value = this.numpad.get_value();
+
+ this.events.on_field_change(item_code, field, value);
+ }
+
+ this.events.on_numpad(btn_value);
+ }
+ });
+ }
+
+ set_input_active(btn_value) {
+ this.selected_item.removeClass('qty disc rate');
+
+ this.numpad.set_active(btn_value);
+ if (btn_value === 'Qty') {
+ this.selected_item.addClass('qty');
+ this.selected_item.active_field = 'qty';
+ } else if (btn_value == 'Disc') {
+ this.selected_item.addClass('disc');
+ this.selected_item.active_field = 'discount_percentage';
+ } else if (btn_value == 'Rate') {
+ this.selected_item.addClass('rate');
+ this.selected_item.active_field = 'rate';
+ }
+ }
+
+ add_item(item) {
+ this.$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) {
+ const indicator_class = item.actual_qty >= item.qty ? 'green' : 'red';
+ const remove_class = indicator_class == 'green' ? 'red' : 'green';
+
+ $item.find('.quantity input').val(item.qty);
+ $item.find('.discount').text(item.discount_percentage + '%');
+ $item.find('.rate').text(format_currency(item.rate, this.frm.doc.currency));
+ $item.addClass(indicator_class);
+ $item.removeClass(remove_class);
+ } else {
+ $item.remove();
+ }
+ }
+
+ get_item_html(item) {
+ const rate = format_currency(item.rate, this.frm.doc.currency);
+ const indicator_class = item.actual_qty >= item.qty ? 'green' : 'red';
+ return `
+
+
+ `;
+
+ function get_quantity_html(value) {
+ return `
+
+ ${item.item_name}
+
+
+ ${get_quantity_html(item.qty)}
+
+
+ ${item.discount_percentage}%
+
+
+ ${rate}
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+ }
+
+ 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}"]`);
+ if ($item.length === 0) return;
+ const scrollTop = $item.offset().top - this.$cart_items.offset().top + this.$cart_items.scrollTop();
+ this.$cart_items.animate({ scrollTop });
+ }
+
+ bind_events() {
+ const me = this;
+ const events = this.events;
+
+ // quantity change
+ 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.on_field_change(item_code, 'qty', '+1');
+ } else if(action === 'decrement') {
+ events.on_field_change(item_code, 'qty', '-1');
+ }
+ });
+
+ // this.$cart_items.on('focus', '.quantity input', function(e) {
+ // const $input = $(this);
+ // const $item = $input.closest('.list-item[data-item-code]');
+ // me.set_selected_item($item);
+ // me.set_input_active('Qty');
+ // e.preventDefault();
+ // e.stopPropagation();
+ // return false;
+ // });
+
+ this.$cart_items.on('change', '.quantity input', function() {
+ const $input = $(this);
+ const $item = $input.closest('.list-item[data-item-code]');
+ const item_code = $item.attr('data-item-code');
+ events.on_field_change(item_code, 'qty', flt($input.val()));
+ });
+
+ // current item
+ this.$cart_items.on('click', '.list-item', function() {
+ me.set_selected_item($(this));
+ });
+
+ // disable current item
+ // $('body').on('click', function(e) {
+ // console.log(e);
+ // if($(e.target).is('.list-item')) {
+ // return;
+ // }
+ // me.$cart_items.find('.list-item').removeClass('current-item qty disc rate');
+ // me.selected_item = null;
+ // });
+
+ this.wrapper.find('.additional_discount_percentage').on('change', (e) => {
+ frappe.model.set_value(this.frm.doctype, this.frm.docname,
+ 'additional_discount_percentage', e.target.value)
+ .then(() => {
+ let discount_wrapper = this.wrapper.find('.discount_amount');
+ discount_wrapper.val(this.frm.doc.discount_amount);
+ discount_wrapper.trigger('change');
+ });
+ });
+
+ this.wrapper.find('.discount_amount').on('change', (e) => {
+ frappe.model.set_value(this.frm.doctype, this.frm.docname,
+ 'discount_amount', e.target.value);
+ this.frm.trigger('discount_amount')
+ .then(() => {
+ let discount_wrapper = this.wrapper.find('.additional_discount_percentage');
+ discount_wrapper.val(this.frm.doc.additional_discount_percentage);
+ this.update_taxes_and_totals();
+ this.update_grand_total();
+ });
+ });
+ }
+
+ set_selected_item($item) {
+ this.selected_item = $item;
+ this.$cart_items.find('.list-item').removeClass('current-item qty disc rate');
+ this.selected_item.addClass('current-item');
+ this.events.on_select_change();
+ }
+
+ unselect_all() {
+ this.$cart_items.find('.list-item').removeClass('current-item qty disc rate');
+ this.selected_item = null;
+ this.events.on_select_change();
+ }
+}
+
+class POSItems {
+ constructor({wrapper, pos_profile, events}) {
+ this.wrapper = wrapper;
+ this.pos_profile = pos_profile;
+ this.items = {};
+ this.events = events;
+ this.currency = this.pos_profile.currency;
+
+ this.make_dom();
+ this.make_fields();
+
+ this.init_clusterize();
+ this.bind_events();
+
+ // bootstrap with 20 items
+ this.get_items()
+ .then(({ items }) => {
+ this.all_items = items;
+ this.items = items;
+ this.render_items(items);
+ });
+ }
+
+ make_dom() {
+ this.wrapper.html(`
+
+
+
+
+
+
+
+
+ `);
+
+ this.items_wrapper = this.wrapper.find('.items-wrapper');
+ this.items_wrapper.append(`
+
+
+ `);
+ }
+
+ 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) => {
+ clearTimeout(this.last_search);
+ this.last_search = setTimeout(() => {
+ const search_term = e.target.value;
+ this.filter_items({ search_term });
+ }, 300);
+ });
+
+ this.item_group_field = frappe.ui.form.make_control({
+ df: {
+ fieldtype: 'Link',
+ label: 'Item Group',
+ options: 'Item Group',
+ default: 'All Item Groups',
+ onchange: () => {
+ const item_group = this.item_group_field.get_value();
+ if (item_group) {
+ this.filter_items({ item_group: item_group });
+ }
+ },
+ },
+ 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 = '
+
+ ';
+ 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 += '
';
+ row_items.push(curr_row);
+ curr_row = row_container;
+ }
+ curr_row += all_items[i];
+
+ if(i == all_items.length - 1 && all_items.length % 4 !== 0) {
+ row_items.push(curr_row);
+ }
+ }
+
+ this.clusterize.update(row_items);
+ }
+
+ filter_items({ search_term='', item_group='All Item Groups' }={}) {
+ if (search_term) {
+ search_term = search_term.toLowerCase();
+
+ // memoize
+ this.search_index = this.search_index || {};
+ if (this.search_index[search_term]) {
+ const items = this.search_index[search_term];
+ this.render_items(items);
+ return;
+ }
+ } else if (item_group == "All Item Groups") {
+ return this.render_items(this.all_items);
+ }
+
+ this.get_items({search_value: search_term, item_group })
+ .then(({ items, serial_no, batch_no }) => {
+ if (search_term) {
+ this.search_index[search_term] = items;
+ }
+
+ this.render_items(items);
+ if(serial_no) {
+ this.events.update_cart(items[0].item_code,
+ 'serial_no', serial_no);
+ this.search_field.set_value('');
+ }
+ if(batch_no) {
+ this.events.update_cart(items[0].item_code,
+ 'batch_no', serial_no);
+ this.search_field.set_value('');
+ }
+ });
+ }
+
+ bind_events() {
+ var me = this;
+ this.wrapper.on('click', '.pos-item-wrapper', function() {
+ const $item = $(this);
+ const item_code = $item.attr('data-item-code');
+ me.events.update_cart(item_code, 'qty', '+1');
+ });
+ }
+
+ get(item_code) {
+ return this.items[item_code];
+ }
+
+ get_all() {
+ return this.items;
+ }
+
+ get_item_html(item) {
+ const price_list_rate = format_currency(item.price_list_rate, this.currency);
+ const { item_code, item_name, item_image} = item;
+ const item_title = item_name || item_code;
+
+ const template = `
+
+
+ `;
+
+ return template;
+ }
+
+ get_items({start = 0, page_length = 40, search_value='', item_group="All Item Groups"}={}) {
+ return new Promise(res => {
+ frappe.call({
+ method: "erpnext.selling.page.point_of_sale.point_of_sale.get_items",
+ args: {
+ start,
+ page_length,
+ 'price_list': this.pos_profile.selling_price_list,
+ item_group,
+ search_value
+ }
+ }).then(r => {
+ // const { items, serial_no, batch_no } = r.message;
+
+ // this.serial_no = serial_no || "";
+ res(r.message);
+ });
+ });
+ }
+}
+
+class NumberPad {
+ constructor({
+ wrapper, onclick, button_array,
+ add_class={}, disable_highlight=[],
+ reset_btns=[], del_btn='',
+ }) {
+ this.wrapper = wrapper;
+ this.onclick = onclick;
+ this.button_array = button_array;
+ this.add_class = add_class;
+ this.disable_highlight = disable_highlight;
+ this.reset_btns = reset_btns;
+ this.del_btn = del_btn;
+ this.make_dom();
+ this.bind_events();
+ this.value = '';
+ }
+
+ make_dom() {
+ if (!this.button_array) {
+ this.button_array = [
+ [1, 2, 3],
+ [4, 5, 6],
+ [7, 8, 9],
+ ['', 0, '']
+ ];
+ }
+
+ this.wrapper.html(`
+
+
+
+
+
+ ${this.button_array.map(get_row).join("")}
+
+ `);
+
+ function get_row(row) {
+ return '' + row.map(get_col).join("") + '
';
+ }
+
+ function get_col(col) {
+ return `${col}