feat: pos item selector new ui
This commit is contained in:
Saqib Ansari
parent
542bc01718
commit
0fb2e02b56
@ -2,7 +2,8 @@
|
|||||||
"css/erpnext.css": [
|
"css/erpnext.css": [
|
||||||
"public/less/erpnext.less",
|
"public/less/erpnext.less",
|
||||||
"public/less/hub.less",
|
"public/less/hub.less",
|
||||||
"public/less/call_popup.less"
|
"public/less/call_popup.less",
|
||||||
|
"public/scss/point-of-sale.scss"
|
||||||
],
|
],
|
||||||
"css/marketplace.css": [
|
"css/marketplace.css": [
|
||||||
"public/less/hub.less"
|
"public/less/hub.less"
|
||||||
|
|||||||
145
erpnext/public/scss/point-of-sale.scss
Normal file
145
erpnext/public/scss/point-of-sale.scss
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
.point-of-sale-app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||||
|
gap: var(--margin-md);
|
||||||
|
|
||||||
|
section {
|
||||||
|
min-height: 45rem;
|
||||||
|
max-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.frappe-control {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 5px 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer-no-select {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowrap {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abbr {
|
||||||
|
background-color: var(--gray-50);
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pos-card {
|
||||||
|
background-color: var(--fg-color);
|
||||||
|
box-shadow: var(--shadow-base);
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .items-selector {
|
||||||
|
grid-column: span 6 / span 6;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
> .filter-section {
|
||||||
|
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-md);
|
||||||
|
padding-bottom: var(--padding-sm);
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> .label {
|
||||||
|
@extend .label;
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
padding: var(--padding-xs);
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .search-field {
|
||||||
|
grid-column: span 5 / span 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .item-group-field {
|
||||||
|
grid-column: span 3 / span 3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .items-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: var(--margin-lg);
|
||||||
|
flex: 1 1 0%;
|
||||||
|
padding: var(--padding-lg);
|
||||||
|
padding-top: var(--padding-xs);
|
||||||
|
|
||||||
|
> .item-wrapper {
|
||||||
|
@extend .pointer-no-select;
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
box-shadow: var(--shadow-base);
|
||||||
|
|
||||||
|
.item-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--border-radius-md);
|
||||||
|
margin: var(--margin-sm);
|
||||||
|
margin-bottom: 0px;
|
||||||
|
min-height: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
|
||||||
|
> img {
|
||||||
|
@extend .image;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .item-detail {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 3.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
padding-left: var(--padding-sm);
|
||||||
|
padding-right: var(--padding-sm);
|
||||||
|
|
||||||
|
> .item-name {
|
||||||
|
@extend .nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: var(--text-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
> .item-rate {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -157,10 +157,10 @@ erpnext.PointOfSale.Controller = class {
|
|||||||
|
|
||||||
prepare_dom() {
|
prepare_dom() {
|
||||||
this.wrapper.append(
|
this.wrapper.append(
|
||||||
`<div class="app grid grid-cols-10 pt-8 gap-6"></div>`
|
`<div class="point-of-sale-app"></div>`
|
||||||
);
|
);
|
||||||
|
|
||||||
this.$components_wrapper = this.wrapper.find('.app');
|
this.$components_wrapper = this.wrapper.find('.point-of-sale-app');
|
||||||
}
|
}
|
||||||
|
|
||||||
prepare_components() {
|
prepare_components() {
|
||||||
|
|||||||
@ -17,18 +17,13 @@ erpnext.PointOfSale.ItemSelector = class {
|
|||||||
|
|
||||||
prepare_dom() {
|
prepare_dom() {
|
||||||
this.wrapper.append(
|
this.wrapper.append(
|
||||||
`<section class="col-span-6 flex shadow rounded items-selector bg-white mx-h-70 h-100">
|
`<section class="pos-card items-selector">
|
||||||
<div class="flex flex-col rounded w-full scroll-y">
|
<div class="filter-section">
|
||||||
<div class="filter-section flex p-8 pb-2 bg-white sticky z-100">
|
<div class="label">All Items</div>
|
||||||
<div class="search-field flex f-grow-3 mr-8 items-center text-grey"></div>
|
<div class="search-field"></div>
|
||||||
<div class="item-group-field flex f-grow-1 items-center text-grey text-bold"></div>
|
<div class="item-group-field"></div>
|
||||||
</div>
|
|
||||||
<div class="flex flex-1 flex-col p-8 pt-2">
|
|
||||||
<div class="text-grey mb-6">ALL ITEMS</div>
|
|
||||||
<div class="items-container grid grid-cols-4 gap-8">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="items-container"></div>
|
||||||
</section>`
|
</section>`
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -80,27 +75,28 @@ erpnext.PointOfSale.ItemSelector = class {
|
|||||||
|
|
||||||
function get_item_image_html() {
|
function get_item_image_html() {
|
||||||
if (item_image) {
|
if (item_image) {
|
||||||
return `<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
|
return `<div class="item-display">
|
||||||
<img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;">
|
<img src="${item_image}" alt="${frappe.get_abbr(item.item_name)}">
|
||||||
</div>`
|
</div>`;
|
||||||
} else {
|
} else {
|
||||||
return `<div class="flex items-center justify-center h-32 bg-light-grey text-6xl text-grey-100">
|
return `<div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`;
|
||||||
${frappe.get_abbr(item.item_name)}
|
|
||||||
</div>`
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
`<div class="item-wrapper rounded shadow pointer no-select" data-item-code="${escape(item.item_code)}"
|
`<div class="item-wrapper"
|
||||||
data-serial-no="${escape(serial_no)}" data-batch-no="${escape(batch_no)}" data-uom="${escape(stock_uom)}"
|
data-item-code="${escape(item.item_code)}" data-serial-no="${escape(serial_no)}"
|
||||||
|
data-batch-no="${escape(batch_no)}" data-uom="${escape(stock_uom)}"
|
||||||
title="Avaiable Qty: ${actual_qty}">
|
title="Avaiable Qty: ${actual_qty}">
|
||||||
|
|
||||||
${get_item_image_html()}
|
${get_item_image_html()}
|
||||||
<div class="flex items-center pr-4 pl-4 h-10 justify-between">
|
|
||||||
<div class="flex items-center f-shrink-1 text-dark-grey overflow-hidden whitespace-nowrap">
|
<div class="item-detail">
|
||||||
|
<div class="item-name">
|
||||||
<span class="indicator ${indicator_color}"></span>
|
<span class="indicator ${indicator_color}"></span>
|
||||||
${frappe.ellipsis(item.item_name, 18)}
|
${frappe.ellipsis(item.item_name, 18)}
|
||||||
</div>
|
</div>
|
||||||
<div class="f-shrink-0 text-dark-grey text-bold ml-4">${format_currency(item.price_list_rate, item.currency, 0) || 0}</div>
|
<div class="item-rate">${format_currency(item.price_list_rate, item.currency, 0) || 0}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`
|
</div>`
|
||||||
)
|
)
|
||||||
@ -115,7 +111,7 @@ erpnext.PointOfSale.ItemSelector = class {
|
|||||||
df: {
|
df: {
|
||||||
label: __('Search'),
|
label: __('Search'),
|
||||||
fieldtype: 'Data',
|
fieldtype: 'Data',
|
||||||
placeholder: __('Search by item code, serial number, batch no or barcode')
|
placeholder: __('Search by item code, serial number or barcode')
|
||||||
},
|
},
|
||||||
parent: this.$component.find('.search-field'),
|
parent: this.$component.find('.search-field'),
|
||||||
render_input: true,
|
render_input: true,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user