Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: past order list and summary with new ui

Browse Source
This commit is contained in:
Saqib Ansari 2020-11-23 12:57:06 +05:30
parent 7202e9f658
commit b0b6aa9124
6 changed files with 385 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
erpnext/public/scss/point-of-sale.scss
View File

@ -75,7 +75,14 @@
background-color: var(--gray-50);
}
.sticky-element {
position: sticky;
top: -1px;
z-index: 1;
}
> .items-selector {
@extend .pos-card;
grid-column: span 6 / span 6;
display: flex;
flex-direction: column;
@ -83,12 +90,10 @@
overflow-x: hidden;
> .filter-section {
@extend .sticky-element;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
background-color: var(--fg-color);
position: sticky;
top: -1px;
z-index: 1;
padding: var(--padding-lg);
padding-bottom: var(--padding-sm);
align-items: center;
@ -124,6 +129,10 @@
@extend .pointer-no-select;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-base);
&:hover {
transform: scale(1.02, 1.02);
}
.item-display {
display: flex;
@ -180,14 +189,13 @@
> .customer-field {
display: flex;
align-items: center;
padding-top: var(--padding-xs);
}
> .customer-details {
@extend .sticky-element;
display: flex;
flex-direction: column;
position: sticky;
top: -1px;
z-index: 1;
background-color: var(--fg-color);
> .header {
@ -263,6 +271,7 @@
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: var(--margin-sm);
gap: var(--padding-sm);
}
> .transactions-label {
@ -445,7 +454,7 @@
padding: 3px var(--padding-sm);
border-radius: var(--border-radius-sm);
background-color: var(--green-100);
color: var(--green-700);
color: var(--dark-green-500);
font-size: var(--text-sm);
font-weight: 700;
}
@ -462,19 +471,14 @@
> .taxes-container {
display: none;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding: var(--padding-sm) 0px;
font-weight: 500;
font-size: var(--text-md);
> .tax-label {
> .tax-row {
display: flex;
align-items: center;
> .tax-desc {
margin-left: var(--margin-md);
}
justify-content: space-between;
}
}
@ -702,7 +706,7 @@
padding: 3px var(--padding-sm);
border-radius: var(--border-radius-sm);
background-color: var(--green-100);
color: var(--green-700);
color: var(--dark-green-500);
font-size: var(--text-sm);
font-weight: 700;
}
@ -849,6 +853,219 @@
display: none;
}
}
}
> .past-order-list {
@extend .pos-card;
grid-column: span 4 / span 4;
display: none;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
> .filter-section {
@extend .sticky-element;
display: flex;
flex-direction: column;
background-color: var(--fg-color);
padding: var(--padding-lg);
> .search-field {
width: 100%;
display: flex;
align-items: center;
margin-top: var(--margin-sm);
margin-bottom: var(--margin-xs);
}
> .status-field {
width: 100%;
display: flex;
align-items: center;
}
}
> .invoices-container {
padding: var(--padding-lg);
padding-top: 0px;
}
}
> .past-order-summary {
// @extend .pos-card;
display: none;
grid-column: span 6 / span 6;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-lg);
> .no-summary-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--gray-50);
font-weight: 500;
border-radius: var(--border-radius-md);
}
> .invoice-summary-wrapper {
@extend .pos-card;
display: none;
position: relative;
width: 31rem;
height: 100%;
> .abs-container {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: var(--padding-lg);
> .upper-section {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: var(--margin-md);
> .left-section {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding-right: var(--padding-sm);
> .customer-name {
font-size: var(--text-2xl);
font-weight: 700;
}
> .customer-email {
font-size: var(--text-md);
font-weight: 500;
color: var(--gray-600);
}
> .cashier {
font-size: var(--text-md);
font-weight: 500;
color: var(--gray-600);
margin-top: auto;
}
}
> .right-section {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
> .paid-amount {
font-size: var(--text-2xl);
font-weight: 700;
}
> .invoice-name {
font-size: var(--text-md);
font-weight: 500;
color: var(--gray-600);
margin-bottom: var(--margin-sm);
}
}
}
> .summary-container {
display: flex;
flex-direction: column;
border-radius: var(--border-radius-md);
background-color: var(--gray-50);
margin: var(--margin-md) 0px;
> .summary-row-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-sm) var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
}
> .taxes-wrapper {
display: flex;
flex-direction: column;
padding: var(--padding-sm) var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
> .tax-row {
display: flex;
justify-content: space-between;
}
}
> .item-row-wrapper {
display: flex;
align-items: center;
padding: var(--padding-sm) var(--padding-md);
// border-bottom: 1px solid var(--gray-300);
> .item-name {
@extend .nowrap;
font-weight: 500;
margin-right: var(--margin-md);
}
> .item-qty {
font-weight: 500;
margin-left: auto;
}
> .item-rate-disc {
display: flex;
text-align: right;
margin-left: var(--margin-md);
> .item-disc {
color: var(--dark-green-500);
}
> .item-rate {
font-weight: 500;
margin-left: var(--margin-md);
}
}
}
> .grand-total {
// font-size: var(--text-lg);
font-weight: 700;
padding: var(--padding-md);
}
> .payments {
font-weight: 700;
}
}
> .summary-btns {
display: flex;
justify-content: space-between;
> .summary-btn {
flex: 1;
margin: 0px var(--margin-xs);
}
> .new-btn {
background-color: var(--blue-500);
color:white;
font-weight: 500;
}
}
}
}
}
}

2
erpnext/selling/page/point_of_sale/pos_controller.js
View File

@ -190,7 +190,7 @@ erpnext.PointOfSale.Controller = class {
}
toggle_recent_order() {
const show = this.recent_order_list.$component.hasClass('d-none');
const show = this.recent_order_list.$component.is(':hidden');
this.toggle_recent_order_list(show);
}

43
erpnext/selling/page/point_of_sale/pos_item_cart.js
View File

@ -159,7 +159,7 @@ erpnext.PointOfSale.ItemCart = class {
});
this.$customer_section.on('click', '.customer-display', function(e) {
if ($(this).find('.reset-customer-btn').length == 0) return;
if ($(e.target).closest('.reset-customer-btn').length) return;
const show = me.$cart_container.is(':visible');
me.toggle_customer_info(show);
@ -495,20 +495,17 @@ erpnext.PointOfSale.ItemCart = class {
if (taxes.length) {
const currency = this.events.get_frm().doc.currency;
this.$totals_section.find('.taxes-container').css('display', 'flex').html(
`<div class="tax-label">
<div>Tax Charges</div>
<div class="tax-desc">
${
taxes.map((t, i) => {
let margin_left = '';
if (i !== 0) margin_left = '10px';
const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
return `<span style="margin-left: ${margin_left}">${description}</span>`
}).join('')
}
</div>
</div>
<div class="">${format_currency(value, currency)}</div>`
`${
taxes.map((t, i) => {
const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
return `<div class="tax-row">
<div class="tax-label">
${description}
</div>
<div class="tax-value">${format_currency(value, currency)}</div>
</div>`
}).join('')
}`
)
} else {
this.$totals_section.find('.taxes-container').css('display', 'none').html('');
@ -926,11 +923,12 @@ erpnext.PointOfSale.ItemCart = class {
res.forEach(invoice => {
const posting_datetime = moment(invoice.posting_date+" "+invoice.posting_time).format("Do MMMM, h:mma");
let indicator_color = '';
if (in_list(['Paid', 'Consolidated'], invoice.status)) (indicator_color = 'green');
if (invoice.status === 'Draft') (indicator_color = 'red');
if (invoice.status === 'Return') (indicator_color = 'grey');
let indicator_color = {
'Paid': 'green',
'Draft': 'red',
'Return': 'gray',
'Consolidated': 'blue'
};
transaction_container.append(
`<div class="invoice-wrapper" data-invoice-name="${escape(invoice.name)}">
@ -943,8 +941,9 @@ erpnext.PointOfSale.ItemCart = class {
${format_currency(invoice.grand_total, invoice.currency, 0) || 0}
</div>
<div class="invoice-status">
<span class="indicator ${indicator_color}" />
${invoice.status}
<span class="indicator-pill whitespace-nowrap ${indicator_color[invoice.status]}">
<span>${invoice.status}</span>
</span>
</div>
</div>
</div>

2
erpnext/selling/page/point_of_sale/pos_item_selector.js
View File

@ -17,7 +17,7 @@ erpnext.PointOfSale.ItemSelector = class {
prepare_dom() {
this.wrapper.append(
`<section class="pos-card items-selector">
`<section class="items-selector">
<div class="filter-section">
<div class="label">All Items</div>
<div class="search-field"></div>

51
erpnext/selling/page/point_of_sale/pos_past_order_list.js
View File

@ -14,17 +14,13 @@ erpnext.PointOfSale.PastOrderList = class {
prepare_dom() {
this.wrapper.append(
`<section class="col-span-4 flex flex-col shadow rounded past-order-list bg-white mx-h-70 h-100 d-none">
<div class="flex flex-col rounded w-full scroll-y">
<div class="filter-section flex flex-col p-8 pb-2 bg-white sticky z-100">
<div class="search-field flex items-center text-grey"></div>
<div class="status-field flex items-center text-grey text-bold"></div>
</div>
<div class="flex flex-1 flex-col p-8 pt-2">
<div class="text-grey mb-6">RECENT ORDERS</div>
<div class="invoices-container rounded border grid grid-cols-1"></div>
</div>
`<section class="past-order-list">
<div class="filter-section">
<div class="label">Recent Orders</div>
<div class="search-field"></div>
<div class="status-field"></div>
</div>
<div class="invoices-container"></div>
</section>`
);
@ -77,10 +73,6 @@ erpnext.PointOfSale.PastOrderList = class {
this.status_field.set_value('Draft');
}
toggle_component(show) {
show ? this.$component.removeClass('d-none') && this.refresh_list() : this.$component.addClass('d-none');
}
refresh_list() {
frappe.dom.freeze();
this.events.reset_summary();
@ -106,23 +98,26 @@ erpnext.PointOfSale.PastOrderList = class {
get_invoice_html(invoice) {
const posting_datetime = moment(invoice.posting_date+" "+invoice.posting_time).format("Do MMMM, h:mma");
return (
`<div class="invoice-wrapper flex p-4 justify-between border-b-grey pointer no-select" data-invoice-name="${escape(invoice.name)}">
<div class="flex flex-col justify-end">
<div class="text-dark-grey text-bold overflow-hidden whitespace-nowrap mb-2">${invoice.name}</div>
<div class="flex items-center">
<div class="flex items-center f-shrink-1 text-dark-grey overflow-hidden whitespace-nowrap">
<svg class="mr-2" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
</svg>
${invoice.customer}
</div>
`<div class="invoice-wrapper" data-invoice-name="${escape(invoice.name)}">
<div class="invoice-name-date">
<div class="invoice-name">${invoice.name}</div>
<div class="invoice-date">
<svg class="mr-2" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
</svg>
${invoice.customer}
</div>
</div>
<div class="flex flex-col text-right">
<div class="f-shrink-0 text-lg text-dark-grey text-bold ml-4">${format_currency(invoice.grand_total, invoice.currency, 0) || 0}</div>
<div class="f-shrink-0 text-grey ml-4">${posting_datetime}</div>
<div class="invoice-total-status">
<div class="invoice-total">${format_currency(invoice.grand_total, invoice.currency, 0) || 0}</div>
<div class="invoice-date">${posting_datetime}</div>
</div>
</div>`
</div>
<div class="seperator"></div>`
);
}
toggle_component(show) {
show ? this.$component.css('display', 'flex') && this.refresh_list() : this.$component.css('display', 'none');
}
};

310
erpnext/selling/page/point_of_sale/pos_past_order_summary.js
View File

@ -8,85 +8,39 @@ erpnext.PointOfSale.PastOrderSummary = class {
init_component() {
this.prepare_dom();
this.init_child_components();
this.init_email_print_dialog();
this.bind_events();
this.attach_shortcuts();
}
prepare_dom() {
this.wrapper.append(
`<section class="col-span-6 flex flex-col items-center shadow rounded past-order-summary bg-white mx-h-70 h-100 d-none">
<div class="no-summary-placeholder flex flex-1 items-center justify-center p-16">
<div class="no-item-wrapper flex items-center h-18 pr-4 pl-4">
<div class="flex-1 text-center text-grey">Select an invoice to load summary data</div>
</div>
`<section class="past-order-summary">
<div class="no-summary-placeholder">
Select an invoice to load summary data
</div>
<div class="summary-wrapper d-none flex-1 w-66 text-dark-grey relative">
<div class="summary-container absolute flex flex-col pt-16 pb-16 pr-8 pl-8 w-full h-full"></div>
<div class="invoice-summary-wrapper">
<div class="abs-container">
<div class="upper-section"></div>
<div class="label">Items</div>
<div class="items-container summary-container"></div>
<div class="label">Totals</div>
<div class="totals-container summary-container"></div>
<div class="label">Payments</div>
<div class="payments-container summary-container"></div>
<div class="summary-btns"></div>
</div>
</div>
</section>`
);
this.$component = this.wrapper.find('.past-order-summary');
this.$summary_wrapper = this.$component.find('.summary-wrapper');
this.$summary_container = this.$component.find('.summary-container');
}
init_child_components() {
this.init_upper_section();
this.init_items_summary();
this.init_totals_summary();
this.init_payments_summary();
this.init_summary_buttons();
this.init_email_print_dialog();
}
init_upper_section() {
this.$summary_container.append(
`<div class="flex upper-section justify-between w-full h-24"></div>`
);
this.$summary_wrapper = this.$component.find('.invoice-summary-wrapper');
this.$summary_container = this.$component.find('.abs-container');
this.$upper_section = this.$summary_container.find('.upper-section');
}
init_items_summary() {
this.$summary_container.append(
`<div class="flex flex-col flex-1 mt-6 w-full scroll-y">
<div class="text-grey mb-4 sticky bg-white">ITEMS</div>
<div class="items-summary-container border rounded flex flex-col w-full"></div>
</div>`
);
this.$items_summary_container = this.$summary_container.find('.items-summary-container');
}
init_totals_summary() {
this.$summary_container.append(
`<div class="flex flex-col mt-6 w-full f-shrink-0">
<div class="text-grey mb-4">TOTALS</div>
<div class="summary-totals-container border rounded flex flex-col w-full"></div>
</div>`
);
this.$totals_summary_container = this.$summary_container.find('.summary-totals-container');
}
init_payments_summary() {
this.$summary_container.append(
`<div class="flex flex-col mt-6 w-full f-shrink-0">
<div class="text-grey mb-4">PAYMENTS</div>
<div class="payments-summary-container border rounded flex flex-col w-full mb-4"></div>
</div>`
);
this.$payment_summary_container = this.$summary_container.find('.payments-summary-container');
}
init_summary_buttons() {
this.$summary_container.append(
`<div class="summary-btns flex summary-btns justify-between w-full f-shrink-0"></div>`
);
this.$items_container = this.$summary_container.find('.items-container');
this.$totals_container = this.$summary_container.find('.totals-container');
this.$payment_container = this.$summary_container.find('.payments-container');
this.$summary_btns = this.$summary_container.find('.summary-btns');
}
@ -121,132 +75,88 @@ erpnext.PointOfSale.PastOrderSummary = class {
}
get_upper_section_html(doc) {
const { status } = doc; let indicator_color = '';
const { status } = doc;
let indicator_color = '';
in_list(['Paid', 'Consolidated'], status) && (indicator_color = 'green');
status === 'Draft' && (indicator_color = 'red');
status === 'Return' && (indicator_color = 'grey');
return `<div class="flex flex-col items-start justify-end pr-4">
<div class="text-lg text-bold pt-2">${doc.customer}</div>
<div class="text-grey">${this.customer_email}</div>
<div class="text-grey mt-auto">Sold by: ${doc.owner}</div>
return `<div class="left-section">
<div class="customer-name">${doc.customer}</div>
<div class="customer-email">${this.customer_email}</div>
<div class="cashier">Sold by: ${doc.owner}</div>
</div>
<div class="flex flex-col flex-1 items-end justify-between">
<div class="text-2-5xl text-bold">${format_currency(doc.paid_amount, doc.currency)}</div>
<div class="flex justify-between">
<div class="text-grey mr-4">${doc.name}</div>
<div class="text-grey text-bold indicator ${indicator_color}">${doc.status}</div>
</div>
<div class="right-section">
<div class="paid-amount">${format_currency(doc.paid_amount, doc.currency)}</div>
<div class="invoice-name">${doc.name}</div>
<span class="indicator-pill whitespace-nowrap ${indicator_color}"><span>${doc.status}</span></span>
</div>`;
}
get_item_html(doc, item_data) {
return `<div class="item-row-wrapper">
<div class="item-name">${item_data.item_name}</div>
<div class="item-qty">${item_data.qty || 0}</div>
<div class="item-rate-disc">${get_rate_discount_html()}</div>
</div>`;
function get_rate_discount_html() {
if (item_data.rate && item_data.price_list_rate && item_data.rate !== item_data.price_list_rate) {
return `<span class="item-disc">(${item_data.discount_percentage}% off)</span>
<div class="item-rate">${format_currency(item_data.rate, doc.currency)}</div>`;
} else {
return `<div class="item-rate">${format_currency(item_data.price_list_rate || item_data.rate, doc.currency)}</div>`;
}
}
}
get_discount_html(doc) {
if (doc.discount_amount) {
return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
<div class="flex f-shrink-1 items-center">
<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap mr-2">
Discount
</div>
<span class="text-grey">(${doc.additional_discount_percentage} %)</span>
</div>
<div class="flex flex-col f-shrink-0 ml-auto text-right">
<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.discount_amount, doc.currency)}</div>
</div>
</div>`;
return `<div class="summary-row-wrapper">
<div>Discount (${doc.additional_discount_percentage} %)</div>
<div>${format_currency(doc.discount_amount, doc.currency)}</div>
</div>`;
} else {
return ``;
}
}
get_net_total_html(doc) {
return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
<div class="flex f-shrink-1 items-center">
<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
Net Total
</div>
</div>
<div class="flex flex-col f-shrink-0 ml-auto text-right">
<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.net_total, doc.currency)}</div>
</div>
return `<div class="summary-row-wrapper">
<div>Net Total</div>
<div>${format_currency(doc.net_total, doc.currency)}</div>
</div>`;
}
get_taxes_html(doc) {
const taxes = doc.taxes.map((t, i) => {
let margin_left = '';
if (i !== 0) margin_left = 'ml-2';
return `<span class="pl-2 pr-2 ${margin_left}">${t.description} @${t.rate}%</span>`;
}).join('');
if (!doc.taxes.length) return '';
return `
<div class="total-summary-wrapper flex items-center justify-between h-12 pr-4 pl-4 border-b-grey">
<div class="flex">
<div class="text-md-0 text-dark-grey text-bold w-fit">Tax Charges</div>
<div class="flex ml-6 text-dark-grey">${taxes}</div>
</div>
<div class="flex flex-col text-right">
<div class="text-md-0 text-dark-grey text-bold">
${format_currency(doc.base_total_taxes_and_charges, doc.currency)}
</div>
</div>
<div class="taxes-wrapper">
${
doc.taxes.map((t, i) => {
const description = /[0-9]+/.test(t.description) ? t.description : `${t.description} @ ${t.rate}%`;
return `<div class="tax-row">
<div class="tax-label">${description}</div>
<div class="tax-value">${format_currency(t.tax_amount_after_discount_amount, doc.currency)}</div>
</div>`
}).join('')
}
</div>`;
}
get_grand_total_html(doc) {
return `<div class="total-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
<div class="flex f-shrink-1 items-center">
<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
Grand Total
</div>
</div>
<div class="flex flex-col f-shrink-0 ml-auto text-right">
<div class="text-md-0 text-dark-grey text-bold">${format_currency(doc.grand_total, doc.currency)}</div>
</div>
return `<div class="summary-row-wrapper grand-total">
<div>Grand Total</div>
<div>${format_currency(doc.grand_total, doc.currency)}</div>
</div>`;
}
get_item_html(doc, item_data) {
return `<div class="item-summary-wrapper flex items-center h-12 pr-4 pl-4 border-b-grey pointer no-select">
<div class="flex w-6 h-6 rounded bg-light-grey mr-4 items-center justify-center font-bold f-shrink-0">
<span>${item_data.qty || 0}</span>
</div>
<div class="flex flex-col f-shrink-1">
<div class="text-md text-dark-grey text-bold overflow-hidden whitespace-nowrap">
${item_data.item_name}
</div>
</div>
<div class="flex f-shrink-0 ml-auto text-right">
${get_rate_discount_html()}
</div>
</div>`;
function get_rate_discount_html() {
if (item_data.rate && item_data.price_list_rate && item_data.rate !== item_data.price_list_rate) {
return `<span class="text-grey mr-2">
(${item_data.discount_percentage}% off)
</span>
<div class="text-md-0 text-dark-grey text-bold">
${format_currency(item_data.rate, doc.currency)}
</div>`;
} else {
return `<div class="text-md-0 text-dark-grey text-bold">
${format_currency(item_data.price_list_rate || item_data.rate, doc.currency)}
</div>`;
}
}
}
get_payment_html(doc, payment) {
return `<div class="payment-summary-wrapper flex items-center h-12 pr-4 pl-4 pointer border-b-grey no-select">
<div class="flex f-shrink-1 items-center">
<div class="text-md-0 text-dark-grey text-bold overflow-hidden whitespace-nowrap">
${payment.mode_of_payment}
</div>
</div>
<div class="flex flex-col f-shrink-0 ml-auto text-right">
<div class="text-md-0 text-dark-grey text-bold">${format_currency(payment.amount, doc.currency)}</div>
</div>
return `<div class="summary-row-wrapper payments">
<div>${payment.mode_of_payment}</div>
<div>${format_currency(payment.amount, doc.currency)}</div>
</div>`;
}
@ -254,22 +164,22 @@ erpnext.PointOfSale.PastOrderSummary = class {
this.$summary_container.on('click', '.return-btn', () => {
this.events.process_return(this.doc.name);
this.toggle_component(false);
this.$component.find('.no-summary-placeholder').removeClass('d-none');
this.$summary_wrapper.addClass('d-none');
this.$component.find('.no-summary-placeholder').css('display', 'flex');
this.$summary_wrapper.css('display', 'none');
});
this.$summary_container.on('click', '.edit-btn', () => {
this.events.edit_order(this.doc.name);
this.toggle_component(false);
this.$component.find('.no-summary-placeholder').removeClass('d-none');
this.$summary_wrapper.addClass('d-none');
this.$component.find('.no-summary-placeholder').css('display', 'flex');
this.$summary_wrapper.css('display', 'none');
});
this.$summary_container.on('click', '.new-btn', () => {
this.events.new_order();
this.toggle_component(false);
this.$component.find('.no-summary-placeholder').removeClass('d-none');
this.$summary_wrapper.addClass('d-none');
this.$component.find('.no-summary-placeholder').css('display', 'flex');
this.$summary_wrapper.css('display', 'none');
});
this.$summary_container.on('click', '.email-btn', () => {
@ -312,10 +222,6 @@ erpnext.PointOfSale.PastOrderSummary = class {
});
}
toggle_component(show) {
show ? this.$component.removeClass('d-none') : this.$component.addClass('d-none');
}
send_email() {
const frm = this.events.get_frm();
const recipients = this.email_dialog.get_values().recipients;
@ -338,8 +244,10 @@ erpnext.PointOfSale.PastOrderSummary = class {
if(!r.exc) {
frappe.utils.play_sound("email");
if(r.message["emails_not_sent_to"]) {
frappe.msgprint(__("Email not sent to {0} (unsubscribed / disabled)",
[ frappe.utils.escape_html(r.message["emails_not_sent_to"]) ]) );
frappe.msgprint(__(
"Email not sent to {0} (unsubscribed / disabled)",
[ frappe.utils.escape_html(r.message["emails_not_sent_to"]) ]
));
} else {
frappe.show_alert({
message: __('Email sent successfully.'),
@ -361,9 +269,7 @@ erpnext.PointOfSale.PastOrderSummary = class {
m.visible_btns.forEach(b => {
const class_name = b.split(' ')[0].toLowerCase();
this.$summary_btns.append(
`<div class="${class_name}-btn border rounded h-14 flex flex-1 items-center mr-4 justify-center text-md text-bold no-select pointer">
${b}
</div>`
`<div class="summary-btn btn btn-default ${class_name}-btn">${b}</div>`
);
});
}
@ -372,28 +278,20 @@ erpnext.PointOfSale.PastOrderSummary = class {
}
show_summary_placeholder() {
this.$summary_wrapper.addClass("d-none");
this.$component.find('.no-summary-placeholder').removeClass('d-none');
this.$summary_wrapper.css('display', 'none');
this.$component.find('.no-summary-placeholder').css('display', 'flex');
}
switch_to_post_submit_summary() {
// switch to full width view
this.$component.removeClass('col-span-6').addClass('col-span-10');
this.$summary_wrapper.removeClass('w-66').addClass('w-40');
// switch place holder with summary container
this.$component.find('.no-summary-placeholder').addClass('d-none');
this.$summary_wrapper.removeClass('d-none');
this.$component.find('.no-summary-placeholder').css('display', 'none');
this.$summary_wrapper.css('display', 'flex');
}
switch_to_recent_invoice_summary() {
// switch full width view with 60% view
this.$component.removeClass('col-span-10').addClass('col-span-6');
this.$summary_wrapper.removeClass('w-40').addClass('w-66');
// switch place holder with summary container
this.$component.find('.no-summary-placeholder').addClass('d-none');
this.$summary_wrapper.removeClass('d-none');
this.$component.find('.no-summary-placeholder').css('display', 'none');
this.$summary_wrapper.css('display', 'flex');
}
get_condition_btn_map(after_submission) {
@ -410,8 +308,8 @@ erpnext.PointOfSale.PastOrderSummary = class {
load_summary_of(doc, after_submission=false) {
this.$summary_wrapper.removeClass("d-none");
after_submission ?
this.switch_to_post_submit_summary() : this.switch_to_recent_invoice_summary();
// after_submission ?
// this.switch_to_post_submit_summary() : this.switch_to_recent_invoice_summary();
this.doc = doc;
@ -437,19 +335,19 @@ erpnext.PointOfSale.PastOrderSummary = class {
}
attach_items_info(doc) {
this.$items_summary_container.html('');
doc.items.forEach(item => {
this.$items_container.html('');
doc.items.forEach((item, i) => {
const item_dom = this.get_item_html(doc, item);
this.$items_summary_container.append(item_dom);
this.$items_container.append(item_dom);
});
}
attach_payments_info(doc) {
this.$payment_summary_container.html('');
this.$payment_container.html('');
doc.payments.forEach(p => {
if (p.amount) {
const payment_dom = this.get_payment_html(doc, p);
this.$payment_summary_container.append(payment_dom);
this.$payment_container.append(payment_dom);
}
});
if (doc.redeem_loyalty_points && doc.loyalty_amount) {
@ -457,20 +355,24 @@ erpnext.PointOfSale.PastOrderSummary = class {
mode_of_payment: 'Loyalty Points',
amount: doc.loyalty_amount,
});
this.$payment_summary_container.append(payment_dom);
this.$payment_container.append(payment_dom);
}
}
attach_totals_info(doc) {
this.$totals_summary_container.html('');
this.$totals_container.html('');
const discount_dom = this.get_discount_html(doc);
const net_total_dom = this.get_net_total_html(doc);
const taxes_dom = this.get_taxes_html(doc);
const discount_dom = this.get_discount_html(doc);
const grand_total_dom = this.get_grand_total_html(doc);
this.$totals_summary_container.append(discount_dom);
this.$totals_summary_container.append(net_total_dom);
this.$totals_summary_container.append(taxes_dom);
this.$totals_summary_container.append(grand_total_dom);
this.$totals_container.append(net_total_dom);
this.$totals_container.append(taxes_dom);
this.$totals_container.append(discount_dom);
this.$totals_container.append(grand_total_dom);
}
toggle_component(show) {
show ? this.$component.css('display', 'flex') : this.$component.css('display', 'none');
}
};