feat: pos item selector new ui
This commit is contained in:
Saqib Ansari
parent
542bc01718
commit
0fb2e02b56
@ -2,7 +2,8 @@
|
||||
"css/erpnext.css": [
|
||||
"public/less/erpnext.less",
|
||||
"public/less/hub.less",
|
||||
"public/less/call_popup.less"
|
||||
"public/less/call_popup.less",
|
||||
"public/scss/point-of-sale.scss"
|
||||
],
|
||||
"css/marketplace.css": [
|
||||
"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() {
|
||||
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() {
|
||||
|
||||
@ -17,18 +17,13 @@ erpnext.PointOfSale.ItemSelector = class {
|
||||
|
||||
prepare_dom() {
|
||||
this.wrapper.append(
|
||||
`<section class="col-span-6 flex shadow rounded items-selector bg-white mx-h-70 h-100">
|
||||
<div class="flex flex-col rounded w-full scroll-y">
|
||||
<div class="filter-section flex p-8 pb-2 bg-white sticky z-100">
|
||||
<div class="search-field flex f-grow-3 mr-8 items-center text-grey"></div>
|
||||
<div class="item-group-field flex f-grow-1 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">ALL ITEMS</div>
|
||||
<div class="items-container grid grid-cols-4 gap-8">
|
||||
</div>
|
||||
</div>
|
||||
`<section class="pos-card items-selector">
|
||||
<div class="filter-section">
|
||||
<div class="label">All Items</div>
|
||||
<div class="search-field"></div>
|
||||
<div class="item-group-field"></div>
|
||||
</div>
|
||||
<div class="items-container"></div>
|
||||
</section>`
|
||||
);
|
||||
|
||||
@ -80,27 +75,28 @@ erpnext.PointOfSale.ItemSelector = class {
|
||||
|
||||
function get_item_image_html() {
|
||||
if (item_image) {
|
||||
return `<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
|
||||
<img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;">
|
||||
</div>`
|
||||
return `<div class="item-display">
|
||||
<img src="${item_image}" alt="${frappe.get_abbr(item.item_name)}">
|
||||
</div>`;
|
||||
} else {
|
||||
return `<div class="flex items-center justify-center h-32 bg-light-grey text-6xl text-grey-100">
|
||||
${frappe.get_abbr(item.item_name)}
|
||||
</div>`
|
||||
return `<div class="item-display abbr">${frappe.get_abbr(item.item_name)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
`<div class="item-wrapper rounded shadow pointer no-select" data-item-code="${escape(item.item_code)}"
|
||||
data-serial-no="${escape(serial_no)}" data-batch-no="${escape(batch_no)}" data-uom="${escape(stock_uom)}"
|
||||
`<div class="item-wrapper"
|
||||
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}">
|
||||
|
||||
${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>
|
||||
${frappe.ellipsis(item.item_name, 18)}
|
||||
</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>`
|
||||
)
|
||||
@ -115,7 +111,7 @@ erpnext.PointOfSale.ItemSelector = class {
|
||||
df: {
|
||||
label: __('Search'),
|
||||
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'),
|
||||
render_input: true,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user