diff --git a/erpnext/accounts/page/pos/pos.js b/erpnext/accounts/page/pos/pos.js index 71dd1bef998..c0b8c35388c 100644 --- a/erpnext/accounts/page/pos/pos.js +++ b/erpnext/accounts/page/pos/pos.js @@ -19,7 +19,7 @@ frappe.pages['pos'].refresh = function (wrapper) { erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ init: function (wrapper) { - this.page_len = 20; + this.page_len = 2; this.page = wrapper.page; this.wrapper = $(wrapper).find('.page-content'); this.set_indicator(); @@ -439,17 +439,52 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ // me.make_item_list(); // }); - this.wrapper.find(".btn-more").on("click", function() { - me.page_len += 20; + me.toggle_more_btn(); + + this.wrapper.on("click", ".btn-more", function() { + console.log('asdf') + me.page_len += 2; me.items = me.get_items(); me.make_item_list(); - }) + me.toggle_more_btn(); + }); - this.wrapper.find(".edit-customer-btn").on("click", function() { + this.page.wrapper.on("click", ".edit-customer-btn", function() { me.update_customer() }) }, + toggle_more_btn: function() { + if(!this.items || this.items.length <= this.page_len) { + this.wrapper.find(".btn-more").hide(); + } else { + this.wrapper.find(".btn-more").show(); + } + }, + + toggle_totals_area: function(show) { + + if(!show) { + show = this.is_totals_area_collapsed; + } + + var totals_area = this.wrapper.find('.totals-area'); + totals_area.find('.net-total-area, .tax-area, .discount-amount-area') + .toggle(show); + + if(show) { + totals_area.find('.collapse-btn i') + .removeClass('octicon-chevron-down') + .addClass('octicon-chevron-up'); + } else { + totals_area.find('.collapse-btn i') + .removeClass('octicon-chevron-up') + .addClass('octicon-chevron-down'); + } + + this.is_totals_area_collapsed = !show; + }, + make_list_customers: function () { var me = this; this.list_customers_btn = this.page.wrapper.find('.list-customers-btn'); @@ -458,6 +493,9 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ this.list_customers = this.wrapper.find('.list-customers'); this.numeric_keypad = this.wrapper.find('.numeric_keypad'); + me.render_list_customers(); + me.toggle_totals_area(false); + this.page.wrapper.on('click', '.list-customers-btn', function() { $(this).toggleClass("view_customer"); if($(this).hasClass("view_customer")) { @@ -472,7 +510,8 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ me.party_field.$input.attr('disabled', false); } me.pos_bill.show(); - me.list_customers.hide() + me.toggle_totals_area(false); + me.list_customers.hide(); if(me.frm.doc.items.length > 0) { me.numeric_keypad.show(); } @@ -484,6 +523,9 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ me.refresh(); me.set_focus(); }); + this.pos_bill.on('click', '.collapse-btn', function() { + me.toggle_totals_area(); + }); }, bind_numeric_keypad: function() { @@ -535,22 +577,17 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ var me = this; this.removed_items = []; - this.list_customers.empty(); + // this.list_customers.empty(); this.si_docs = this.get_doc_from_localstorage(); - if (!this.si_docs.length) { + if (!this.si_docs.length) {fv this.list_customers.append( '
' + __("No offline records.") + '
' ) return; } - var html = '
\ -
\ -
Customer
\ -
Status
\ -
Paid Amount
\ -
Grand Total
\ -
'; + + var html = ""; this.si_docs.forEach(function (data, i) { for (key in data) { html += frappe.render_template("pos_invoice_list", { @@ -563,7 +600,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ }); } }); - this.list_customers.append(html); + this.list_customers.find('.list-customers-table').html(html); this.list_customers.find('.list-column').click(function () { me.list_customers.hide(); @@ -667,11 +704,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ }, item: function (item, input) { var d = item; - var html = "" + __(d.label || d.value) + "\ - \ - \ - \ - "; + var html = "" + __(d.label || d.value) + ""; return $('
  • ') .data('item.autocomplete', d) .html('

    ' + html + '

    ') @@ -710,12 +743,16 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ customer.action.apply(me); return; } + me.toggle_list_customer(false); + me.toggle_edit_button(true); me.update_customer_data(customer); me.refresh(); me.set_focus(); }) .on('focus', function (e) { $(e.target).val('').trigger('input'); + me.toggle_edit_button(false); + me.toggle_list_customer(true); }) .on("awesomplete-selectcomplete", function (e) { var item = me.party_field.awesomeplete @@ -727,6 +764,14 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ }); }, + toggle_edit_button: function(flag) { + this.page.wrapper.find('.edit-customer-btn').toggle(flag); + }, + + toggle_list_customer: function(flag) { + this.list_customers.toggle(flag); + }, + add_customer: function() { this.frm.doc.customer = ""; this.update_customer() @@ -909,6 +954,26 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ })).tooltip().appendTo($wrap); } }); + + $wrap.append(` +
    +
    + +
    Load more items
    +
    +
    + `); + + me.toggle_more_btn(); + // $(frappe.render_template("pos_item", { + // item_code: 'btn_more', + // item_price: format_currency(me.price_list_data[obj.name], me.frm.doc.currency), + // item_name: obj.name === obj.item_name ? "" : obj.item_name, + // item_image: obj.image, + // color: frappe.get_palette(obj.item_name), + // abbr: frappe.get_abbr(obj.item_name) + // })).tooltip().appendTo($wrap); + } else { $("

    " +__("Not items found")+"

    ").appendTo($wrap) @@ -1186,7 +1251,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ this.add_new_item_to_grid(); this.update_paid_amount_status(false) - this.wrapper.find(".item-cart").scrollTop(1000); + this.wrapper.find(".item-cart-items").scrollTop(1000); }, add_new_item_to_grid: function () { @@ -1317,7 +1382,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({ me.refresh(); me.toggle_input_field(); me.set_focus(); - }) + }, "fa fa-plus") if (this.frm.doc.docstatus == 0) { // this.page.set_primary_action(__("Pay"), function () { // me.validate(); diff --git a/erpnext/public/css/erpnext.css b/erpnext/public/css/erpnext.css index bb1195a21c6..d92559e233e 100644 --- a/erpnext/public/css/erpnext.css +++ b/erpnext/public/css/erpnext.css @@ -295,12 +295,13 @@ body[data-route="pos"] .modal-dialog { margin-bottom: 15px; } .item-cart-items { - height: calc(100vh - 500px); + height: calc(100vh - 526px); overflow: auto; border: 1px solid #d1d8dd; border-top: none; } -.item-cart-items .no-items-message { +.pos .no-items-message { + min-height: 200px; display: flex; align-items: center; justify-content: center; @@ -316,14 +317,29 @@ body[data-route="pos"] .modal-dialog { overflow: hidden; } .pos .item-list { - border-left: 1px solid #d1d8dd; - border-right: 1px solid #d1d8dd; - height: calc(100vh - 180px); + border: 1px solid #d1d8dd; + border-top: none; + max-height: calc(100vh - 190px); overflow: auto; } +@media (max-width: 767px) { + .pos .item-list { + max-height: initial; + } +} .pos .item-list .image-field { height: 140px; } +.pos .item-list .pos-item-wrapper { + position: relative; +} +.pos .item-list .price-info { + position: absolute; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.1); + padding: 9px 15px; +} .pos-bill-toolbar { margin-top: 10px; } @@ -337,3 +353,17 @@ body[data-route="pos"] .modal-dialog { .pos-selected-item-action > .pos-list-row { border: none; } +.edit-customer-btn { + position: absolute; + right: 57px; + top: 15px; + z-index: 100; +} +.btn-more { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background-color: #fafbfc; + min-height: 200px; +} diff --git a/erpnext/public/js/pos/customer_toolbar.html b/erpnext/public/js/pos/customer_toolbar.html index 86a38c3a8bf..a2cd834b543 100644 --- a/erpnext/public/js/pos/customer_toolbar.html +++ b/erpnext/public/js/pos/customer_toolbar.html @@ -1,5 +1,11 @@ -
    -
    +
    +
    + + + + + +
    diff --git a/erpnext/public/js/pos/pos.html b/erpnext/public/js/pos/pos.html index 827c79467aa..54abf7e037a 100644 --- a/erpnext/public/js/pos/pos.html +++ b/erpnext/public/js/pos/pos.html @@ -1,7 +1,7 @@
    -
    Item Cart
    +
    {{ __("Item Cart") }}
    @@ -16,7 +16,7 @@
    - +

    Tap items to add them here
    @@ -26,20 +26,20 @@
    -
    +
    {%= __("Net Total") %}
    -
    +
    {%= __("Taxes") %}
    {% if (apply_discount_on) { %} -
    +
    {%= __("Discount") %}
    @@ -56,9 +56,13 @@
    {% } %}
    -
    +
    + + + +
    {%= __("Grand Total") %}
    -
    +
    @@ -84,10 +88,24 @@
    - +
    {{ __("Customers in Queue") }}
    +
    +
    {{ __("Customer") }}
    +
    {{ __("Status") }}
    +
    {{ __("Paid Amount") }}
    +
    {{ __("Grand Total") }}
    +
    +
    +
    + + +

    No Customers yet!

    +     +
    +
    -
    Stock Items
    +
    {{ __("Stock Items") }}
    diff --git a/erpnext/public/js/pos/pos_invoice_list.html b/erpnext/public/js/pos/pos_invoice_list.html index 67110a74706..fb15c869b97 100644 --- a/erpnext/public/js/pos/pos_invoice_list.html +++ b/erpnext/public/js/pos/pos_invoice_list.html @@ -1,7 +1,6 @@ -
    -
    -
    {%= customer %}
    -
    {{ data.status }}
    -
    {%= paid_amount %}
    -
    {%= grand_total %}
    +
    +
    {%= customer %}
    +
    {{ data.status }}
    +
    {%= paid_amount %}
    +
    {%= grand_total %}
    diff --git a/erpnext/public/js/pos/pos_item.html b/erpnext/public/js/pos/pos_item.html index 7e374ae3763..fbc380be197 100644 --- a/erpnext/public/js/pos/pos_item.html +++ b/erpnext/public/js/pos/pos_item.html @@ -23,10 +23,10 @@ {% if (item_image) { %} {{item_name || item_code}} {% } %} -
    + + {{item_price}} +
    \ No newline at end of file diff --git a/erpnext/public/js/pos/pos_selected_item.html b/erpnext/public/js/pos/pos_selected_item.html index ff975015901..30cf0f00d70 100644 --- a/erpnext/public/js/pos/pos_selected_item.html +++ b/erpnext/public/js/pos/pos_selected_item.html @@ -2,10 +2,6 @@
    {{item_name}}
    -
    -
    Price:
    - -
    Quantity:
    @@ -14,6 +10,10 @@
    Discount:
    +
    +
    Price:
    + +
    Amount:
    diff --git a/erpnext/public/less/erpnext.less b/erpnext/public/less/erpnext.less index ae1c818ef85..5c4622d97ec 100644 --- a/erpnext/public/less/erpnext.less +++ b/erpnext/public/less/erpnext.less @@ -19,10 +19,6 @@ /* pos */ -// .pos-item-area { -// padding: 0px 10px; -// } - .pos-item-wrapper { padding: 5px; } @@ -64,23 +60,12 @@ background-repeat: no-repeat; } -.pos-item-area { - // border: 1px solid #d1d8dd; - // border-top: none; -} - .pos-item-toolbar { height: 51px; // remove later padding: 10px 0px; border-bottom: 1px solid #d1d8dd; } -// .item-list-area, .list-customers { -// padding: 15px 0px; -// overflow-y: scroll; -// height: ~"calc(100vh - 162px)"; -// } - .pos-toolbar, .pos-bill-toolbar { padding: 10px 0px; // border-bottom: 1px solid #d1d8dd; @@ -90,19 +75,6 @@ .pos-item-toolbar .form-group { margin-bottom: 0px; } - -.pos-bill-wrapper { - // border: 1px solid #d1d8dd; - // border-top: none; - // margin-right: -1px; -} - -.pos-bill { - // border-top: 1px solid @border-color; - // margin-left: -15px; - // margin-right: -15px; -} - .edit-pos-item { height: 50px; font-size: 14px; @@ -229,15 +201,12 @@ .numeric-keypad { - // border: 1px solid #d1d8dd; height: 60px; width: 60px; font-size: 20px; font-weight: 200; border-radius: 0; background-color: #fff; - // background-color: #FDFDFD; - // border-color: #e8e8e8; margin-left:-4px; } @@ -260,15 +229,8 @@ } .pos-pay { - background-color: @brand-primary; border: none; - - // height:69px; - // width:69px; - // font-size:17px; - // font-weight:200; - // margin-left:-4px; } .multimode-payments { @@ -392,22 +354,19 @@ body[data-route="pos"] .modal-dialog { margin-bottom: 15px; } -// body[data-route="pos"] .page-body { -// height: ~"calc(100vh - 40px)"; -// } - .item-cart-items { - height: ~"calc(100vh - 500px)"; + height: ~"calc(100vh - 526px)"; overflow: auto; border: 1px solid @border-color; border-top: none; - .no-items-message { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - } +} +.pos .no-items-message { + min-height: 200px; + display: flex; + align-items: center; + justify-content: center; + height: 100%; } .pos .items .pos-list-row:last-child { @@ -423,14 +382,30 @@ body[data-route="pos"] .modal-dialog { } .pos .item-list { - border-left: 1px solid @border-color; - border-right: 1px solid @border-color; - height: ~"calc(100vh - 180px)"; + border: 1px solid @border-color; + border-top: none; + max-height: ~"calc(100vh - 190px)"; overflow: auto; + @media (max-width: @screen-xs) { + max-height: initial; + } + .image-field { height: 140px; } + + .pos-item-wrapper { + position: relative; + } + + .price-info { + position: absolute; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.1); + padding: 9px 15px; + } } .pos-bill-toolbar { @@ -448,4 +423,20 @@ body[data-route="pos"] .modal-dialog { .pos-selected-item-action > .pos-list-row { border: none; +} + +.edit-customer-btn { + position: absolute; + right: 57px; + top: 15px; + z-index: 100; +} + +.btn-more { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background-color: @light-bg; + min-height: 200px; } \ No newline at end of file