HTML
<template>
<lightning-card title="Product Search">
<div class="slds-m-around_medium">
<lightning-input name="enter-search" label="Search" type="search" onchange={handleSearch} is-loading={isSearching}></lightning-input><br/>
<lightning-input name="NABTick" label="NAB Price List" type="checkbox" onchange={handleCheckbox} ></lightning-input><br/>
<lightning-button label="Search" name="search" title="Search Products" onclick={findProductKey} variant="brand" ></lightning-button>
<lightning-button label="Cancel" name="cancel" title="Cancel" onclick={handleCancle} ></lightning-button>
</div>
<div>
This is the search key value ={searchKey}
This is NAB Check list Value={NABcheckbox}
</div>
<template if:true={allProduct.data}>
<div>
<template for:each={allProduct.data} for:item=product>
This is the prodcut Id :{product.Id}
<c-product-search-result-wired key={product.Id} product={product}></c-product-search-result-wired>
</template>
</div>
</template>
</lightning-card>
</template>
Vchild component
<template>
<div class="slds-p-around_medium lgc-bg" key={product.Id}>
<ul class="slds-has-dividers_bottom-space">
<li class="slds-item">
<lightning-tile label={product.Name}>
<ul class="slds-list_horizontal slds-has-dividers_right">
<li class="slds-item">Product Code: {product.ProductCode}</li>
<li class="slds-item">Eng Status: {product.Eng_Status__c}</li>
<li class="slds-item">Dark Knight</li>
<li class="slds-item">Dark Knight</li>
</ul>
</lightning-tile>
</li>
</ul>
</div>
</template>
Parent JS
import { LightningElement,track,wire } from 'lwc';
import getProducts from '@salesforce/apex/productSearch.getProducts';
const DELAY = 300;
export default class ProductSearchWired extends LightningElement {
@track searchKey='';
@track NABcheckbox= false;
@track allProduct=[];
@wire(getProducts,{productSearchKey:'$searchKey'})
products({data,error}){
if(data){
this.allProduct = data;
}
}
handleSearch(event){
window.clearTimeout(this.delayTimeout);
const searchKey = event.target.value;
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout = setTimeout(() => {
this.searchKey = searchKey;
}, DELAY);
}
handleCheckbox(){
this.NABcheckbox = true;
}
get isSearching(){
if(this.allProduct){
return false;
} else {
return true;
}
}
}
Child JS File
import { LightningElement,api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class ProductSearchResultWired extends NavigationMixin(LightningElement) {
@api product;
navigateToProduct(){
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
actionName: "view",
recordId: this.product.Id,
objectApiName: "Product2"
}
});
}
}
Apex Class Controller
public static List<Product2> getProducts(String productSeachKey)
{
if( String.isNotEmpty(productSeachKey))
{
return [SELECT Id,Name,ProductCode,Eng_Status__c,Quotable__c,USD_Price__c FROM Product2 WHERE IsActive= true AND Eng_Status__c IN ('Production','Procurement','Prototype','Hold')
AND Field_Replaceable_Part__c = false AND Base_Price_List_Item__c != null AND (Name LIKE : '%'+productSeachKey+'%' OR ProductCode LIKE: '%'+productSeachKey+'%')
ORDER BY SBQQ__SortOrder__c ASC NULLS LAST];
} else
{
return [SELECT Id,Name,ProductCode,Eng_Status__c,Quotable__c,USD_Price__c FROM Product2 WHERE IsActive= true AND Eng_Status__c IN ('Production','Procurement','Prototype','Hold')
AND Field_Replaceable_Part__c = false AND Base_Price_List_Item__c != null ORDER BY SBQQ__SortOrder__c ASC NULLS LAST];
}
}
}
@Alian Cabon Yes the annotation is like the
public with sharing class productSearch {
@AuraEnabled(cacheable=true)
public static List<Product2> getProducts(String productSeachKey)
{
String key = productSeachKey;
System.debug(key);
if( String.isNotEmpty(productSeachKey))
{
System.debug(productSeachKey);
return [SELECT Id,Name,ProductCode,Eng_Status__c,Quotable__c,USD_Price__c FROM Product2 WHERE IsActive= true AND Eng_Status__c IN ('Production','Procurement','Prototype','Hold')
AND Field_Replaceable_Part__c = false AND Base_Price_List_Item__c != null AND (Name LIKE : '%'+productSeachKey+'%' OR ProductCode LIKE: '%'+productSeachKey+'%')
ORDER BY SBQQ__SortOrder__c ASC NULLS LAST];
} else
{
String key2 = productSeachKey;
System.debug(key2);
System.debug(productSeachKey);
// return null;
return [SELECT Id,Name,ProductCode,Eng_Status__c,Quotable__c,USD_Price__c FROM Product2 WHERE IsActive= true AND Eng_Status__c IN ('Production','Procurement','Prototype','Hold')
AND Field_Replaceable_Part__c = false AND Base_Price_List_Item__c != null ORDER BY SBQQ__SortOrder__c ASC NULLS LAST];
}
}
}