I'm trying to pass the information of my table after click on add button, the component should pass the value of each cell in the selected row to a child component that is a table true. i'm actually using message channel to fix this but it is no working.
<template>
<lightning-card title="New Product Shipment">
<lightning-layout multiple-rows="true" vertical-align="end">
<lightning-layout-item size="8" padding="around-small">
<lightning-input type="text" label="Search Products" value={productName} onchange={handelproductName}
placeholder="Product Name">
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="3" padding="around-small">
<lightning-button label="Search" variant="brand" onclick={getProducts}>
</lightning-button>
</lightning-layout-item>
</lightning-layout>
<lightning-layout multiple-rows="true" vertical-align="end">
<lightning-layout-item size="6" padding="around-small">
<!--tabla con productos-->
<template if:true={showTables}>
<table class="slds-table slds-table--bordered slds-table--cell-buffer" id="table">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate">Products </div>
</th>
<th scope="col">
<div class="slds-truncate">Quantity</div>
</th>
<th scope="col">
<div class="slds-truncate">Add</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={products} for:item="product" for:index="index">
<tr key={product.Id}>
<td>
{product.Name}
</td>
<td>
<div class="slds-m-bottom_large">
<lightning-input type="Number" name={index} onchange={handleChange}>
</lightning-input>
</div>
</td>
<td>
<div>
<lightning-button data-id={product.Id} key={product.Id} variant="brand-outline" label="Add"
title="Primary action with lighter look" onclick={handleClick}
name={index} disabled={Buttontrue}
class="slds-m-left_x-small"></lightning-button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
<br />
<div class="slds-align_absolute-center">
<div class="slds-p-right_xx-small">
<lightning-button label="Prev" disabled={isPrev} onclick={handlePrev} variant="brand"
icon-name="utility:back" name="prev"></lightning-button>
</div>
<span class="slds-badge slds-badge_lightest">
{recordStart}-{recordEnd} of {totalRecords} | Page {pageNumber} of {totalPages}
</span>
<div class="slds-p-left_xx-small">
<lightning-button label="Next" disabled={isNext} onclick={handleNext} variant="brand"
icon-name="utility:forward" icon-position="right" name="next"></lightning-button>
</div>
</div>
</template>
<template if:true={isDisplay}>
<div class="slds-align_absolute-center">
<br />
No records found
</div>
</template>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<template if:true={showTables}>
<c-child-Table-Comp productshipments={rowData}></c-child-Table-Comp>
</template>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
parent js
import { LightningElement, api, track, wire} from 'lwc';
import SearchProducts from '@salesforce/apex/SearchController.SearchProducts';
import SelectedProducts from '@salesforce/messageChannel/SelectedProducts__c';
import { publish, MessageContext } from 'lightning/messageService';
export default class CreateProductShipment extends LightningElement {
productShipment;
@api recordId;
quantity ;
@track pageSize = 5;
@track pageNumber = 1;
@track totalRecords = 0;
@track totalPages = 0;
@track recordEnd = 0;
@track recordStart = 0;
@track isPrev = true;
@track isNext = true;
@track products = [];
@track errors = null;
@track isDisplay = false;
@track value = 0;
array = [];
@track product;
@track showChild = false;
@track showTables = false;
lickedButtonLabel;
@track Buttontrue=true;
@track test = false;
@wire(MessageContext)
messageContext;
visibleProducts;
handelproductName(event){
this.productName = event.target.value;
}
getProducts(){
SearchProducts({
prodName: this.productName,
pageSize : this.pageSize,
pageNumber : this.pageNumber
})
.then(result => {
if(result){
var resultData = JSON.parse(result);
this.products = resultData.products;
this.pageNumber = resultData.pageNumber;
this.totalRecords = resultData.totalRecords;
this.recordStart = resultData.recordStart;
this.recordEnd = resultData.recordEnd;
this.totalPages = Math.ceil(resultData.totalRecords / this.pageSize);
this.isNext = (this.pageNumber == this.totalPages || this.totalPages == 0);
this.isPrev = (this.pageNumber == 1 || this.totalRecords < this.pageSize);
if(this.products){
if(this.products.length == 0){
this.isDisplay = true;
this.showTables = false;
}else{
this.isDisplay = false;
this.showTables = true;
}
}
}
})
.catch(error => {
this.errors = error;
});
}
handleNext(){
this.pageNumber = this.pageNumber+1;
this.getProducts();
}
handlePrev(){
this.pageNumber = this.pageNumber-1;
this.getProducts();
}
handleChange(event){
this.value = event.target.value
if(this.value > 0){
this.Buttontrue=false;
}
}
pdateContactHandler(event){
this.visibleProducts=[...event.detail.records]
}
handleClick(event) {
const itemIndex = event.currentTarget.dataset.index;
const rowData = this.visibleProducts[itemIndex];
publish(this.messageContext, SelectedProducts, rowData);
console.log('row'+rowData);
console.log(rowData.Name);
}
child html
<template>
<lightning-card>
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate">Products </div>
</th>
<th scope="col">
<div class="slds-truncate">Quantity</div>
</th>
<th scope="col">
<div class="slds-truncate">Opportunity</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={productShipments} for:item="productshipment">
<tr key={productshipment.id}>
<td>
{productshipment.product}
</td>
<td>
{productshipment.quantity}
</td>
<td>
{productshipment.opportunity}
</td>
</tr>
</template>
</tbody>
</table>
</lightning-card>
<lightning-button variant="brand" label="Save" type="submit" class="slds-m-right_x-small">
</lightning-button>
</template>
child js
import { LightningElement, api,wire } from 'lwc';
import { subscribe,unsubscribe,APPLICATION_SCOPE,MessageContext } from 'lightning/messageService';
import selectedProducts from "@salesforce/messageChannel/selectedProducts__c";
export default class ChildTableComp extends LightningElement {
@api productShipments;
subscription = null;
@wire(MessageContext)
messageContext;
subscribeToMessageChannel() {
if (!this.subscription) {
this.subscription = subscribe(
this.messageContext,
selectedProducts,
(message) => this.handleMessage(message),
{ scope: APPLICATION_SCOPE }
);
}
}
unsubscribeToMessageChannel() {
unsubscribe(this.subscription);
this.subscription = null;
}
handleMessage(message) {
this.productShipments = message.Name;
console.log('prodd' + this.productShipments)
}
connectedCallback() {
this.subscribeToMessageChannel();
}
disconnectedCallback() {
this.unsubscribeToMessageChannel();
}
}
