Risvana Cybro
3 weeks ago
7 changed files with 177 additions and 3 deletions
@ -0,0 +1,9 @@ |
|||||
|
/** @odoo-module **/ |
||||
|
|
||||
|
import { ProductsWidget } from "@point_of_sale/app/screens/product_screen/product_list/product_list"; |
||||
|
import { CashierName } from "@point_of_sale/app/navbar/cashier_name/cashier_name"; |
||||
|
|
||||
|
ProductsWidget.components = { |
||||
|
...ProductsWidget.components, |
||||
|
CashierName, |
||||
|
} |
||||
@ -0,0 +1,134 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8" ?> |
||||
|
<templates id="template" xml:space="preserve"> |
||||
|
<!-- Product listing section --> |
||||
|
<t t-name="ProductsWidget" t-inherit="point_of_sale.ProductsWidget" |
||||
|
t-inherit-mode="extension" owl="1"> |
||||
|
<xpath expr="//div[hasclass('products-widget')]" position="replace"> |
||||
|
<div class="products-widget d-flex flex-column flex-grow-1 overflow-auto" |
||||
|
t-ref="products-widget"> |
||||
|
<t t-set="showCategoryImages" |
||||
|
t-value="getShowCategoryImages()"/> |
||||
|
<div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between"> |
||||
|
<CashierName/> |
||||
|
<div class="d-flex search-products" id="search-products"> |
||||
|
<Input tModel="[pos, 'searchProductWord']" |
||||
|
class="'p-2 lg-screen'" |
||||
|
isSmall="ui.isSmall" |
||||
|
placeholder="'Search products...'" |
||||
|
icon="{type: 'fa', value: 'fa-search'}" |
||||
|
debounceMillis="100"/> |
||||
|
<div class="home-category-button lg-screen-cat"> |
||||
|
<span class="breadcrumb-button breadcrumb-home" |
||||
|
t-on-click="() => this.pos.setSelectedCategoryId(0)"> |
||||
|
<i class="fa fa-home" role="img" |
||||
|
aria-label="Home" title="Home" |
||||
|
style="font-size: 30px;"/> |
||||
|
</span> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="products-widget-control products-widget-control-header mt-4 d-flex shadow-sm justify-content-between"> |
||||
|
<Input tModel="[pos, 'searchProductWord']" |
||||
|
class="'p-2 sm-screen'" |
||||
|
isSmall="ui.isSmall" |
||||
|
placeholder="'Search products...'" |
||||
|
icon="{type: 'fa', value: 'fa-search'}" |
||||
|
debounceMillis="100"/> |
||||
|
|
||||
|
<div class="home-category-button sm-screen-cat"> |
||||
|
<span class="breadcrumb-button breadcrumb-home" |
||||
|
t-on-click="() => this.pos.setSelectedCategoryId(0)"> |
||||
|
<i class="fa fa-home" role="img" |
||||
|
aria-label="Home" title="Home" |
||||
|
style="font-size: 30px;"/> |
||||
|
</span> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
<t t-set="categories" t-value="getCategories()"/> |
||||
|
<div t-if="categories.length > 2" |
||||
|
class="products-widget-control bg-white products-widget-control-category d-flex shadow-sm"> |
||||
|
<div class="rightpane-header"> |
||||
|
<div class="categories-header"> |
||||
|
<div class="category-list simple" |
||||
|
style="border-radius: 5px; padding: 10px;"> |
||||
|
<t t-foreach="getCategories()" |
||||
|
t-as="category" t-key="category.id"> |
||||
|
<span t-if="category.id != 0" |
||||
|
class="category-simple-button" |
||||
|
t-on-click="() => this.pos.setSelectedCategoryId(category.id)"> |
||||
|
<t t-esc="category.name"/> |
||||
|
</span> |
||||
|
</t> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="product-list-container flex-grow-1 overflow-y-auto"> |
||||
|
<div t-if="productsToDisplay.length != 0 and pos.posHasValidProduct()" |
||||
|
t-attf-class="product-list {{this.pos.productListViewMode}} p-1"> |
||||
|
<t t-foreach="productsToDisplay" t-as="product" |
||||
|
t-key="product.id"> |
||||
|
<ProductCard |
||||
|
class="pos.productViewMode" |
||||
|
name="product.display_name" |
||||
|
productId="product.id" |
||||
|
price="product.getFormattedUnitPrice()" |
||||
|
imageUrl="product.getImageUrl()" |
||||
|
onClick="() =>this.pos.addProductToCurrentOrder(product)" |
||||
|
productInfo="true" |
||||
|
onProductInfoClick="() => this.onProductInfoClick(product)" |
||||
|
/> |
||||
|
</t> |
||||
|
</div> |
||||
|
<div t-else="" |
||||
|
class="product-list-empty no-results-message text-center mt-5"> |
||||
|
<t t-if="searchWord"> |
||||
|
<p>No products found for <b>"<t t-esc="searchWord"/> |
||||
|
"</b> |
||||
|
in this category.</p> |
||||
|
</t> |
||||
|
<t t-else=""> |
||||
|
<t t-if="pos.posHasValidProduct()"> |
||||
|
<p>There are no products in this category.</p> |
||||
|
</t> |
||||
|
<t t-else=""> |
||||
|
<div t-if="!state.loadingDemo"> |
||||
|
<p class="text-large">No products available. Explore |
||||
|
<a role="button" |
||||
|
class="button-no-demo fw-bolder" |
||||
|
t-on-click="loadDemoDataProducts">demo data</a> |
||||
|
or <a |
||||
|
role="button" |
||||
|
class="button-no-demo fw-bolder" |
||||
|
t-on-click="createNewProducts">create your own</a>.</p> |
||||
|
</div> |
||||
|
<div t-else="" |
||||
|
class="block-top-header position-absolute top-0 start-0 bg-black opacity-50 w-100 h-100 z-1000"> |
||||
|
<div class="d-flex h-100 w-100 text-white flex-row align-items-center justify-content-center"> |
||||
|
<div class="o_spinner d-flex flex-column mb-4"> |
||||
|
<img src="/web/static/img/spin.svg" |
||||
|
alt="Loading..."/> |
||||
|
Loading... |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</t> |
||||
|
</t> |
||||
|
</div> |
||||
|
<div t-if="searchWord" |
||||
|
class="search-more-button d-flex justify-content-center"> |
||||
|
<button class="btn btn-primary btn-lg" |
||||
|
t-on-click="onPressEnterKey">Search more</button> |
||||
|
</div> |
||||
|
<div class="portal search-database-button no-results-message" |
||||
|
t-att-class="{ 'd-none': !shouldShowButton }"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</xpath> |
||||
|
</t> |
||||
|
</templates> |
||||
Loading…
Reference in new issue