UI changes
This commit is contained in:
Faris Ansari
Rohit Waghchaure
parent
b5097ec161
commit
1f261a8695
@ -142,7 +142,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
try {
|
try {
|
||||||
localStorage.setItem('email_queue', JSON.stringify(this.email_queue));
|
localStorage.setItem('email_queue', JSON.stringify(this.email_queue));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
frappe.throw(__("LocalStorage is full , did not save"))
|
frappe.throw(__("LocalStorage is full, did not save"))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -401,21 +401,6 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
me.make_item_list();
|
me.make_item_list();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.party_field = frappe.ui.form.make_control({
|
|
||||||
df: {
|
|
||||||
"fieldtype": "Data",
|
|
||||||
"options": this.party,
|
|
||||||
"label": this.party,
|
|
||||||
"fieldname": this.party.toLowerCase(),
|
|
||||||
"placeholder": __("Select or add new customer")
|
|
||||||
},
|
|
||||||
parent: this.wrapper.find(".party-area"),
|
|
||||||
only_input: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.party_field.make_input();
|
|
||||||
setTimeout(this.set_focus.bind(this), 500);
|
|
||||||
|
|
||||||
this.wrapper.find(".btn-more").on("click", function() {
|
this.wrapper.find(".btn-more").on("click", function() {
|
||||||
me.page_len += 20;
|
me.page_len += 20;
|
||||||
me.items = me.get_items();
|
me.items = me.get_items();
|
||||||
@ -585,6 +570,25 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
make_customer: function () {
|
make_customer: function () {
|
||||||
var me = this;
|
var me = this;
|
||||||
|
|
||||||
|
$(frappe.render_template('customer_toolbar', {
|
||||||
|
allow_delete: this.frm.doc.allow_delete
|
||||||
|
})).insertAfter(this.page.$title_area.hide());
|
||||||
|
|
||||||
|
this.party_field = frappe.ui.form.make_control({
|
||||||
|
df: {
|
||||||
|
"fieldtype": "Data",
|
||||||
|
"options": this.party,
|
||||||
|
"label": this.party,
|
||||||
|
"fieldname": this.party.toLowerCase(),
|
||||||
|
"placeholder": __("Select or add new customer")
|
||||||
|
},
|
||||||
|
parent: this.page.wrapper.find(".party-area"),
|
||||||
|
only_input: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.party_field.make_input();
|
||||||
|
setTimeout(this.set_focus.bind(this), 500);
|
||||||
|
|
||||||
if (this.default_customer && !this.frm.doc.customer) {
|
if (this.default_customer && !this.frm.doc.customer) {
|
||||||
this.party_field.$input.val(this.default_customer);
|
this.party_field.$input.val(this.default_customer);
|
||||||
this.frm.doc.customer = this.default_customer;
|
this.frm.doc.customer = this.default_customer;
|
||||||
@ -793,12 +797,12 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
|
|
||||||
if (this.items.length > 0) {
|
if (this.items.length > 0) {
|
||||||
$.each(this.items, function(index, obj) {
|
$.each(this.items, function(index, obj) {
|
||||||
if(index < me.page_len){
|
if(index < me.page_len) {
|
||||||
$(frappe.render_template("pos_item", {
|
$(frappe.render_template("pos_item", {
|
||||||
item_code: obj.name,
|
item_code: obj.name,
|
||||||
item_price: format_currency(me.price_list_data[obj.name], me.frm.doc.currency),
|
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_name: obj.name === obj.item_name ? "" : obj.item_name,
|
||||||
item_image: obj.image ? "url('" + obj.image + "')" : null,
|
item_image: obj.image,
|
||||||
color: frappe.get_palette(obj.item_name),
|
color: frappe.get_palette(obj.item_name),
|
||||||
abbr: frappe.get_abbr(obj.item_name)
|
abbr: frappe.get_abbr(obj.item_name)
|
||||||
})).tooltip().appendTo($wrap);
|
})).tooltip().appendTo($wrap);
|
||||||
@ -816,7 +820,7 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// if form is local then allow this function
|
// if form is local then allow this function
|
||||||
$(me.wrapper).find("div.pos-item").on("click", function () {
|
$(me.wrapper).on("click", ".pos-item-wrapper", function () {
|
||||||
if(me.list_customers_btn.hasClass("view_customer")) return;
|
if(me.list_customers_btn.hasClass("view_customer")) return;
|
||||||
|
|
||||||
me.customer_validate();
|
me.customer_validate();
|
||||||
@ -889,7 +893,9 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
|
|
||||||
bind_items_event: function() {
|
bind_items_event: function() {
|
||||||
var me = this;
|
var me = this;
|
||||||
$(this.wrapper).find(".pos-bill-item").click(function() {
|
$(this.wrapper).on('click', '.pos-bill-item', function() {
|
||||||
|
$(me.wrapper).find('.pos-bill-item').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
me.numeric_val = "";
|
me.numeric_val = "";
|
||||||
me.numeric_id = ""
|
me.numeric_id = ""
|
||||||
me.item_code = $(this).attr("data-item-code");
|
me.item_code = $(this).attr("data-item-code");
|
||||||
@ -1139,8 +1145,14 @@ erpnext.pos.PointOfSale = erpnext.taxes_and_totals.extend({
|
|||||||
show_items_in_item_cart: function () {
|
show_items_in_item_cart: function () {
|
||||||
var me = this;
|
var me = this;
|
||||||
var $items = this.wrapper.find(".items").empty();
|
var $items = this.wrapper.find(".items").empty();
|
||||||
|
var $no_items_message = this.wrapper.find(".no-items-message");
|
||||||
|
$no_items_message.toggle(this.frm.doc.items.length === 0);
|
||||||
|
|
||||||
|
var $totals_area = this.wrapper.find('.totals-area');
|
||||||
|
$totals_area.toggle(this.frm.doc.items.length > 0);
|
||||||
|
|
||||||
$.each(this.frm.doc.items || [], function (i, d) {
|
$.each(this.frm.doc.items || [], function (i, d) {
|
||||||
$(frappe.render_template("pos_bill_item", {
|
$(frappe.render_template("pos_bill_item_new", {
|
||||||
item_code: d.item_code,
|
item_code: d.item_code,
|
||||||
item_name: (d.item_name === d.item_code || !d.item_name) ? "" : ("<br>" + d.item_name),
|
item_name: (d.item_name === d.item_code || !d.item_name) ? "" : ("<br>" + d.item_name),
|
||||||
qty: d.qty,
|
qty: d.qty,
|
||||||
|
|||||||
@ -20,9 +20,11 @@
|
|||||||
"public/js/controllers/transaction.js",
|
"public/js/controllers/transaction.js",
|
||||||
"public/js/pos/pos.html",
|
"public/js/pos/pos.html",
|
||||||
"public/js/pos/pos_bill_item.html",
|
"public/js/pos/pos_bill_item.html",
|
||||||
|
"public/js/pos/pos_bill_item_new.html",
|
||||||
"public/js/pos/pos_selected_item.html",
|
"public/js/pos/pos_selected_item.html",
|
||||||
"public/js/pos/pos_item.html",
|
"public/js/pos/pos_item.html",
|
||||||
"public/js/pos/pos_tax_row.html",
|
"public/js/pos/pos_tax_row.html",
|
||||||
|
"public/js/pos/customer_toolbar.html",
|
||||||
"public/js/pos/pos_invoice_list.html",
|
"public/js/pos/pos_invoice_list.html",
|
||||||
"public/js/payment/pos_payment.html",
|
"public/js/payment/pos_payment.html",
|
||||||
"public/js/payment/payment_details.html",
|
"public/js/payment/payment_details.html",
|
||||||
|
|||||||
@ -13,9 +13,6 @@
|
|||||||
margin: -10px auto;
|
margin: -10px auto;
|
||||||
}
|
}
|
||||||
/* pos */
|
/* pos */
|
||||||
.pos-item-area {
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
.pos-item-wrapper {
|
.pos-item-wrapper {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
@ -51,20 +48,11 @@
|
|||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.pos-item-area {
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
.pos-item-toolbar {
|
.pos-item-toolbar {
|
||||||
|
height: 51px;
|
||||||
padding: 10px 0px;
|
padding: 10px 0px;
|
||||||
border-bottom: 1px solid #d1d8dd;
|
border-bottom: 1px solid #d1d8dd;
|
||||||
}
|
}
|
||||||
.item-list-area,
|
|
||||||
.list-customers {
|
|
||||||
padding: 15px 0px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: calc(100vh - 162px);
|
|
||||||
}
|
|
||||||
.pos-toolbar,
|
.pos-toolbar,
|
||||||
.pos-bill-toolbar {
|
.pos-bill-toolbar {
|
||||||
padding: 10px 0px;
|
padding: 10px 0px;
|
||||||
@ -73,20 +61,6 @@
|
|||||||
.pos-item-toolbar .form-group {
|
.pos-item-toolbar .form-group {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
.pos-bill-wrapper {
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-top: none;
|
|
||||||
margin-right: -1px;
|
|
||||||
}
|
|
||||||
.pos-bill {
|
|
||||||
border-top: 1px solid #d1d8dd;
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -15px;
|
|
||||||
}
|
|
||||||
.item-cart {
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: calc(100vh - 72vh);
|
|
||||||
}
|
|
||||||
.edit-pos-item {
|
.edit-pos-item {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -97,15 +71,6 @@
|
|||||||
background-color: #f5f7fa;
|
background-color: #f5f7fa;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.pos-bill-row {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 7px 0px;
|
|
||||||
border-top: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
.pos-bill-header {
|
|
||||||
border: none !important;
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
.pos-item-qty {
|
.pos-item-qty {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -181,21 +146,31 @@
|
|||||||
border-color: #e8e8e8;
|
border-color: #e8e8e8;
|
||||||
}
|
}
|
||||||
.numeric-keypad {
|
.numeric-keypad {
|
||||||
border: 1px solid #d1d8dd;
|
height: 60px;
|
||||||
height: 69px;
|
width: 60px;
|
||||||
width: 69px;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
background-color: #FDFDFD;
|
border-radius: 0;
|
||||||
border-color: #e8e8e8;
|
background-color: #fff;
|
||||||
margin-left: -4px;
|
margin-left: -4px;
|
||||||
}
|
}
|
||||||
|
.numeric_keypad {
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
.numeric_keypad > .row > button {
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid #d1d8dd;
|
||||||
|
border-bottom: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
.numeric_keypad > .row > button:first-child {
|
||||||
|
border-left: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
.numeric_keypad > .row:first-child > button {
|
||||||
|
border-top: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
.pos-pay {
|
.pos-pay {
|
||||||
height: 69px;
|
background-color: #5E64FF;
|
||||||
width: 69px;
|
border: none;
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 200;
|
|
||||||
margin-left: -4px;
|
|
||||||
}
|
}
|
||||||
.multimode-payments {
|
.multimode-payments {
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
@ -269,3 +244,63 @@ body[data-route="pos"] .modal-dialog {
|
|||||||
.assessment-result-tool .score {
|
.assessment-result-tool .score {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
.pos-list-row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0px;
|
||||||
|
border-bottom: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
.pos-list-row .cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.pos-list-row .subject {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.pos-list-row .list-row-checkbox,
|
||||||
|
.pos-list-row .list-select-all {
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
.pos-bill-header {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
.pos-bill-item.active {
|
||||||
|
background-color: #fffce7;
|
||||||
|
}
|
||||||
|
.totals-area {
|
||||||
|
border-right: 1px solid #d1d8dd;
|
||||||
|
border-left: 1px solid #d1d8dd;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
body[data-route="pos"] .page-body {
|
||||||
|
height: calc(100vh - 40px);
|
||||||
|
}
|
||||||
|
.item-cart-items {
|
||||||
|
height: 30vh;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #d1d8dd;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
.item-cart-items .no-items-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.pos .items .pos-list-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.pos .form-section-heading {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.pos {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.pos .item-list {
|
||||||
|
border-left: 1px solid #d1d8dd;
|
||||||
|
border-right: 1px solid #d1d8dd;
|
||||||
|
}
|
||||||
|
|||||||
12
erpnext/public/js/pos/customer_toolbar.html
Normal file
12
erpnext/public/js/pos/customer_toolbar.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<div class="pos-bill-toolbar" style="display: flex;">
|
||||||
|
<div class="party-area" style="flex: 1;"></div>
|
||||||
|
<button class="btn btn-default list-customers-btn" style="margin: 0 5px 0 15px;">
|
||||||
|
<i class="fa fa-list"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-default add-customer-btn">
|
||||||
|
<i class="fa fa-plus"></i>
|
||||||
|
</button> {% if (allow_delete) { %}
|
||||||
|
<button class="btn btn-default btn-danger" style="margin: 0 5px 0 5px;display:none">
|
||||||
|
<i class="octicon octicon-trashcan"></i>
|
||||||
|
</button> {% } %}
|
||||||
|
</div>
|
||||||
@ -1,109 +1,111 @@
|
|||||||
<div class="pos">
|
<div class="pos">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-6 pos-bill-wrapper">
|
<div class="col-sm-6 pos-bill-wrapper">
|
||||||
<div class="pos-bill-toolbar" style="display: flex;">
|
<div class="col-sm-12"><h6 class="form-section-heading uppercase">Item Cart</h6></div>
|
||||||
<div class="party-area" style="flex: 1;"></div>
|
<div class="pos-bill">
|
||||||
<button class="btn btn-default list-customers-btn" style="margin: 0 5px 0 15px;">
|
<div class="item-cart">
|
||||||
<i class="fa fa-list"></i>
|
<div class="pos-list-row pos-bill-header text-muted h6">
|
||||||
</button>
|
<span class="cell subject">
|
||||||
<button class="btn btn-default add-customer-btn">
|
<!--<input class="list-select-all" type="checkbox" title="{%= __("Select All") %}">-->
|
||||||
<i class="fa fa-plus"></i>
|
{{ __("Item Name")}}
|
||||||
</button>
|
</span>
|
||||||
{% if (allow_delete) { %}
|
<span class="cell text-right">{{ __("Quantity") }}</span>
|
||||||
<button class="btn btn-default btn-danger" style="margin: 0 5px 0 5px;display:none">
|
<span class="cell text-right">{{ __("Discount") }}</span>
|
||||||
<i class="octicon octicon-trashcan"></i>
|
<span class="cell text-right">{{ __("Rate") }}</span>
|
||||||
</button>
|
|
||||||
{% } %}
|
|
||||||
</div>
|
|
||||||
<div class="pos-bill">
|
|
||||||
<div class="item-cart">
|
|
||||||
<!-- <div class="row pos-bill-row pos-bill-header">
|
|
||||||
<div class="col-xs-4"><h6>{%= __("Item") %}</h6></div>
|
|
||||||
<div class="col-xs-3"><h6 class="text-right">{%= __("Quantity") %}</h6></div>
|
|
||||||
<div class="col-xs-2"><h6 class="text-right">{%= __("Discount") %}</h6></div>
|
|
||||||
<div class="col-xs-3"><h6 class="text-right">{%= __("Rate") %}</h6></div>
|
|
||||||
</div> -->
|
|
||||||
<div class="items"></div>
|
|
||||||
</div>
|
|
||||||
<div class="totals-area">
|
|
||||||
<div class="row pos-bill-row net-total-area">
|
|
||||||
<div class="col-xs-6"><h6 class="text-muted">{%= __("Net Total") %}</h6></div>
|
|
||||||
<div class="col-xs-6"><h6 class="net-total text-right"></h6></div>
|
|
||||||
</div>
|
|
||||||
<div class="row pos-bill-row tax-area hide">
|
|
||||||
<div class="col-xs-12 text-muted">
|
|
||||||
<h6>{%= __("Taxes") %}</h6>
|
|
||||||
<div class="tax-table small"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% if (apply_discount_on) { %}
|
|
||||||
<div class="row pos-bill-row discount-amount-area">
|
|
||||||
<div class="col-xs-6"><h6 class="text-muted">{%= __("Discount") %}</h6></div>
|
|
||||||
<div class="col-xs-3 discount-field-col">
|
|
||||||
<div class="input-group input-group-sm">
|
|
||||||
<span class="input-group-addon">%</span>
|
|
||||||
<input type="text" class="form-control discount-percentage text-right">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-3 discount-field-col">
|
|
||||||
<div class="input-group input-group-sm">
|
|
||||||
<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
|
|
||||||
<input type="text" class="form-control discount-amount text-right"
|
|
||||||
placeholder="{%= 0.00 %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% } %}
|
|
||||||
<div class="row pos-bill-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
|
|
||||||
<div class="col-xs-6"><h6>{%= __("Grand Total") %}</h6></div>
|
|
||||||
<div class="col-xs-6"><h6 class="grand-total text-right"></h6></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="list-customers" style = "display:none">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-6 selected-item">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 numeric_keypad" style="display:none">
|
|
||||||
{% var chartData = ["Qty", "Disc", "Price"] %}
|
|
||||||
{% for(var i=0; i<3; i++) { %}
|
|
||||||
<div class="row text-right">
|
|
||||||
{% for(var j=i*3; j<(i+1)*3; j++) { %}
|
|
||||||
<button type="button" class="btn btn-default numeric-keypad" val="{{j+1}}">{{j+1}}</button>
|
|
||||||
{% } %}
|
|
||||||
<button type="button" id = "pos-item-{{ chartData[i].toLowerCase() }}" class="btn text-center btn-default numeric-keypad pos-operation">{{ chartData[i] }}</button>
|
|
||||||
</div>
|
|
||||||
{% } %}
|
|
||||||
<div class="row text-right">
|
|
||||||
<button type="button" class="btn btn-default numeric-keypad numeric-del">Del</button>
|
|
||||||
<button type="button" class="btn btn-default numeric-keypad" val="0">0</button>
|
|
||||||
<button type="button" class="btn btn-default numeric-keypad" val=".">.</button>
|
|
||||||
<button type="button" class="btn btn-primary pos-pay">Pay</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="item-cart-items">
|
||||||
|
<div class="no-items-message text-extra-muted">
|
||||||
|
<span class="text-center">
|
||||||
|
<i class="fa fa-4x fa-shopping-cart"></i>
|
||||||
|
<p>Tap items to add them here</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="items">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="totals-area">
|
||||||
<div class="col-sm-6 pos-items-section">
|
<div class="pos-list-row net-total-area hide">
|
||||||
<div class="row pos-item-area">
|
<div class="cell subject"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell text-right">{%= __("Net Total") %}</div>
|
||||||
|
<div class="cell net-total text-right"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pos-list-row tax-area">
|
||||||
|
<div class="cell subject"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell text-muted">{%= __("Taxes") %}</div>
|
||||||
|
<div class="cell text-right tax-table"></div>
|
||||||
|
</div>
|
||||||
|
{% if (apply_discount_on) { %}
|
||||||
|
<div class="pos-list-row discount-amount-area hide">
|
||||||
|
<div class="cell text-muted">{%= __("Discount") %}</div>
|
||||||
|
<div class="cell discount-field-col">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon">%</span>
|
||||||
|
<input type="text" class="form-control discount-percentage text-right">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cell discount-field-col">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon">{%= get_currency_symbol(currency) %}</span>
|
||||||
|
<input type="text" class="form-control discount-amount text-right" placeholder="{%= 0.00 %}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% } %}
|
||||||
|
<div class="pos-list-row grand-total-area" style="border-bottom:1px solid #d1d8dd;">
|
||||||
|
<div class="cell subject"></div>
|
||||||
|
<div class="cell text-right bold">{%= __("Grand Total") %}</div>
|
||||||
|
<div class="cell grand-total text-right lead"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-customers" style="display:none">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<span id="customer-results" style="color:#68a;"></span>
|
<div class="row" style="margin-top: 15px">
|
||||||
<div class="row pos-item-toolbar">
|
<div class="col-xs-6 selected-item">
|
||||||
<div class="search-item-group col-xs-5"></div>
|
|
||||||
<div class="search-item col-xs-7"></div>
|
</div>
|
||||||
</div>
|
<div class="col-xs-6 numeric_keypad" style="display:none">
|
||||||
<div class="item-list-area" style="auto">
|
{% var chartData = ["Qty", "Disc", "Price"] %} {% for(var i=0; i
|
||||||
<div class="app-listing item-list"></ul>
|
<3; i++) { %} <div class="row text-right">
|
||||||
</div>
|
{% for(var j=i*3; j
|
||||||
</div>
|
<(i+1)*3; j++) { %} <button type="button" class="btn btn-default numeric-keypad" val="{{j+1}}">{{j+1}}</button>
|
||||||
<div class="row">
|
{% } %}
|
||||||
<div class="text-right list-paging-area">
|
<button type="button" id="pos-item-{{ chartData[i].toLowerCase() }}" class="btn text-center btn-default numeric-keypad pos-operation">{{ chartData[i] }}</button>
|
||||||
<button class="btn btn-default btn-more btn-sm" style="margin:5px 20px">{{ __("More") }}</button>
|
</div>
|
||||||
|
{% } %}
|
||||||
|
<div class="row text-right">
|
||||||
|
<button type="button" class="btn btn-default numeric-keypad numeric-del">Del</button>
|
||||||
|
<button type="button" class="btn btn-default numeric-keypad" val="0">0</button>
|
||||||
|
<button type="button" class="btn btn-default numeric-keypad" val=".">.</button>
|
||||||
|
<button type="button" class="btn btn-primary numeric-keypad pos-pay">Pay</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-sm-6 pos-items-section">
|
||||||
|
<div class="col-sm-12"><h6 class="form-section-heading uppercase">Stock Items</h6></div>
|
||||||
|
<div class="row pos-item-area">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<span id="customer-results" style="color:#68a;"></span>
|
||||||
|
<div class="row pos-item-toolbar hide">
|
||||||
|
<div class="search-item-group col-xs-5 hide"></div>
|
||||||
|
<div class="search-item col-xs-7 hide"></div>
|
||||||
|
</div>
|
||||||
|
<div class="item-list-area">
|
||||||
|
<div class="pos-list-row pos-bill-header text-muted h6">
|
||||||
|
<div class="cell subject">All Item Groups</div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
<div class="cell"></div>
|
||||||
|
</div>
|
||||||
|
<div class="app-listing item-list image-view-container three-column">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
9
erpnext/public/js/pos/pos_bill_item_new.html
Normal file
9
erpnext/public/js/pos/pos_bill_item_new.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<div class="pos-list-row pos-bill-item" data-item-code="{%= item_code %}">
|
||||||
|
<div class="cell subject">
|
||||||
|
<!--<input class="list-row-checkbox" type="checkbox" data-name="{{item_code}}">-->
|
||||||
|
<a class="grey list-id" title="{{ item_name }}">{{ strip_html(__(item_name)) || item_code }}</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell text-right">{%= qty %}</div>
|
||||||
|
<div class="cell text-right">{%= discount_percentage %}</div>
|
||||||
|
<div class="cell text-right">{%= format_currency(rate) %}</div>
|
||||||
|
</div>
|
||||||
@ -1,13 +1,32 @@
|
|||||||
<div class="pos-item-wrapper col-xs-3">
|
<div class="pos-item-wrapper image-view-item" data-item-code={{item_code}}>
|
||||||
<div class="pos-item" data-item-code="{%= item_code %}" title="{%= item_name || item_code %}">
|
<div class="image-view-header doclist-row">
|
||||||
<div class="pos-item-image"
|
<div class="list-value">
|
||||||
style="{% if (item_image) { %} background-image: {{ item_image }} {% }
|
<a class="grey list-id" data-name="{{item_code}}" title="{{ item_name || item_code}}">{{item_name || item_code}}</a>
|
||||||
else { %} background-color: {{ color }} {% } %}">
|
|
||||||
{% if (!item_image) { %}{{ abbr }}{% } %}
|
|
||||||
</div>
|
|
||||||
<div class="pos-item-text">
|
|
||||||
<h6 class="item-code ellipsis">{%= item_name ? (item_name + " (" + item_code + ")") : item_code %}</h6>
|
|
||||||
<div class="small ellipsis">{%= item_price %}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="image-view-body">
|
||||||
|
<a data-item-code="{{ item_code }}"
|
||||||
|
title="{{ item_name || item_code }}"
|
||||||
|
>
|
||||||
|
<div class="image-field"
|
||||||
|
style="
|
||||||
|
{% if (!item_image) { %}
|
||||||
|
background-color: #fafbfc;
|
||||||
|
{% } %}
|
||||||
|
border: 0px;"
|
||||||
|
>
|
||||||
|
{% if (!item_image) { %}
|
||||||
|
<span class="placeholder-text">
|
||||||
|
{%= frappe.get_abbr(item_name || item_code) %}
|
||||||
|
</span>
|
||||||
|
{% } %}
|
||||||
|
{% if (item_image) { %}
|
||||||
|
<img src="{{ item_image }}" alt="{{item_name || item_code}}">
|
||||||
|
{% } %}
|
||||||
|
<button class="btn btn-default zoom-view hide" data-name="{{item_code}}">
|
||||||
|
<i class="fa fa-search-plus"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1,26 +1,21 @@
|
|||||||
<div class="pos-bill-item" data-item-code="{%= item_code %}">
|
<div class="pos-selected-item-action" data-item-code="{%= item_code %}">
|
||||||
<div class="form-group edit-pos-item">
|
<div class="pos-list-row">
|
||||||
<label class=" text-left col-xs-4">Price:</label>
|
<span class="cell bold">{{item_name}}</span>
|
||||||
<div class="col-xs-8">
|
|
||||||
<input class="form-control text-right pos-item-price" disabled value="{%= rate %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group edit-pos-item">
|
<div class="pos-list-row">
|
||||||
<label class=" text-left col-xs-4">Qty:</label>
|
<div class="cell">Price:</div>
|
||||||
<div class="col-xs-8">
|
<div class="cell pos-item-price">{%= rate %}</div>
|
||||||
<input class="form-control text-right pos-item-qty" disabled value="{%= qty %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group edit-pos-item">
|
<div class="pos-list-row">
|
||||||
<label class=" text-left col-xs-4">Discount:</label>
|
<div class="cell">Quantity:</div>
|
||||||
<div class="col-xs-8">
|
<div class="cell pos-item-qty">{%= qty %}</div>
|
||||||
<input class="form-control text-right pos-item-disc" disabled value="{%= discount_percentage %}">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group edit-pos-item">
|
<div class="pos-list-row">
|
||||||
<label class=" text-left col-xs-4">Amount:</label>
|
<div class="cell">Discount:</div>
|
||||||
<div class="col-xs-8">
|
<div class="cell pos-item-disc">{%= discount_percentage %}</div>
|
||||||
<input class="form-control text-right " disabled value="{%= amount %}">
|
</div>
|
||||||
</div>
|
<div class="pos-list-row">
|
||||||
|
<div class="cell">Amount:</div>
|
||||||
|
<div class="cell pos-item-disc">{%= amount %}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -19,9 +19,9 @@
|
|||||||
|
|
||||||
/* pos */
|
/* pos */
|
||||||
|
|
||||||
.pos-item-area {
|
// .pos-item-area {
|
||||||
padding: 0px 10px;
|
// padding: 0px 10px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.pos-item-wrapper {
|
.pos-item-wrapper {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
@ -65,20 +65,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pos-item-area {
|
.pos-item-area {
|
||||||
border: 1px solid #d1d8dd;
|
// border: 1px solid #d1d8dd;
|
||||||
border-top: none;
|
// border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos-item-toolbar {
|
.pos-item-toolbar {
|
||||||
|
height: 51px; // remove later
|
||||||
padding: 10px 0px;
|
padding: 10px 0px;
|
||||||
border-bottom: 1px solid #d1d8dd;
|
border-bottom: 1px solid #d1d8dd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-list-area, .list-customers {
|
// .item-list-area, .list-customers {
|
||||||
padding: 15px 0px;
|
// padding: 15px 0px;
|
||||||
overflow-y: scroll;
|
// overflow-y: scroll;
|
||||||
height: ~"calc(100vh - 162px)";
|
// height: ~"calc(100vh - 162px)";
|
||||||
}
|
// }
|
||||||
|
|
||||||
.pos-toolbar, .pos-bill-toolbar {
|
.pos-toolbar, .pos-bill-toolbar {
|
||||||
padding: 10px 0px;
|
padding: 10px 0px;
|
||||||
@ -91,20 +92,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pos-bill-wrapper {
|
.pos-bill-wrapper {
|
||||||
border: 1px solid #d1d8dd;
|
// border: 1px solid #d1d8dd;
|
||||||
border-top: none;
|
// border-top: none;
|
||||||
margin-right: -1px;
|
// margin-right: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos-bill {
|
.pos-bill {
|
||||||
border-top: 1px solid @border-color;
|
// border-top: 1px solid @border-color;
|
||||||
margin-left: -15px;
|
// margin-left: -15px;
|
||||||
margin-right: -15px;
|
// margin-right: -15px;
|
||||||
}
|
|
||||||
|
|
||||||
.item-cart {
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: ~"calc(100vh - 72vh)";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-pos-item {
|
.edit-pos-item {
|
||||||
@ -119,17 +115,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pos-bill-row {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 7px 0px;
|
|
||||||
border-top: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos-bill-header {
|
|
||||||
border: none !important;
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pos-item-qty {
|
.pos-item-qty {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -223,23 +208,48 @@
|
|||||||
border-color: #e8e8e8;
|
border-color: #e8e8e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.numeric-keypad {
|
.numeric-keypad {
|
||||||
border: 1px solid #d1d8dd;
|
// border: 1px solid #d1d8dd;
|
||||||
height:69px;
|
height: 60px;
|
||||||
width:69px;
|
width: 60px;
|
||||||
font-size:20px;
|
font-size: 20px;
|
||||||
font-weight:200;
|
font-weight: 200;
|
||||||
background-color: #FDFDFD;
|
border-radius: 0;
|
||||||
border-color: #e8e8e8;
|
background-color: #fff;
|
||||||
|
// background-color: #FDFDFD;
|
||||||
|
// border-color: #e8e8e8;
|
||||||
margin-left:-4px;
|
margin-left:-4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.numeric_keypad {
|
||||||
|
margin-left: -15px;
|
||||||
|
|
||||||
|
& > .row > button {
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid @border-color;
|
||||||
|
border-bottom: 1px solid @border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-left: 1px solid @border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .row:first-child > button {
|
||||||
|
border-top: 1px solid @border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.pos-pay {
|
.pos-pay {
|
||||||
height:69px;
|
|
||||||
width:69px;
|
background-color: @brand-primary;
|
||||||
font-size:17px;
|
border: none;
|
||||||
font-weight:200;
|
|
||||||
margin-left:-4px;
|
// height:69px;
|
||||||
|
// width:69px;
|
||||||
|
// font-size:17px;
|
||||||
|
// font-weight:200;
|
||||||
|
// margin-left:-4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.multimode-payments {
|
.multimode-payments {
|
||||||
@ -322,4 +332,77 @@ body[data-route="pos"] .modal-dialog {
|
|||||||
.total-score, .grade, .score {
|
.total-score, .grade, .score {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos-list-row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0px;
|
||||||
|
border-bottom: 1px solid @border-color;
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subject {
|
||||||
|
width: 50%
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-row-checkbox, .list-select-all {
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos-bill-header {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid @border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos-bill-item.active {
|
||||||
|
background-color: @light-yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.totals-area {
|
||||||
|
border-right: 1px solid @border-color;
|
||||||
|
border-left: 1px solid @border-color;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-route="pos"] .page-body {
|
||||||
|
height: ~"calc(100vh - 40px)";
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-cart-items {
|
||||||
|
height: 30vh;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid @border-color;
|
||||||
|
border-top: none;
|
||||||
|
|
||||||
|
.no-items-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos .items .pos-list-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos .form-section-heading {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos .item-list {
|
||||||
|
border-left: 1px solid @border-color;
|
||||||
|
border-right: 1px solid @border-color;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user