refactor: past order list and summary with new ui
This commit is contained in:
parent
7202e9f658
commit
b0b6aa9124
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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');
|
||||
}
|
||||
};
|
@ -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');
|
||||
}
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user