I am stuck and unable to figure out a way to get out of this problem. I know I am doing something terribly wrong here.
I have two LWC Components -
- Parent [a container with multiple values to select[comboboxes/text search/inputs]]
- Child [displaying data based on selections above in a custom html table]
CHILD JS
import { LightningElement,track,api } from 'lwc'; import { ShowToastEvent } from "lightning/platformShowToastEvent"; import getMethod1 from '@salesforce/apex/Controller.getMethod1'; import getMethod2 from '@salesforce/apex/Controller.getMethod2'; export default class TDataTable extends LightningElement { @api accountId; @api stRecords =[]; @api vcAct; @api lcnGroup; @api defaultSvc; @track tCount; @track rv; @track vsct; @track grp; @track srchInput; @track scd; @track cmp; @track clnyr; @api svceTks(){ if (this.rv == null){ this.rv = this.defaultSvc; //defaultSvc coming from Parent component } getMethod1({accId: this.accountId, rvc: this.rv}) .then((result) => { console.log('its coming here : 1'); let arr=[]; if(result){ result.forEach(r => { arr.push({ tName: r.T_Name__c, stid: r.Id, schdld: r.Schdld__c, cmpltd: r.Cmpltd__c, annscp: r.Ann_Scp__c }) }); } this.stRecords = arr; if (arr.length != 0){ this.tCount =arr.length; this.tCounter(); } else{ this.tCount = 0; this.tCounter(); } }) .catch((error) => { this.error = error; }) } //Sending Count of Records to Parent to display on screen @api tCounter(){ const evnt = new CustomEvent('tload',{ detail: this.tCount }); this.dispatchEvent(evnt); } //SEARCH INPUT FILTER; @api get srchKey(){ //return this.srchInput; } set srchKey(value){ this.srchInput = value; this.handleSearch(value); } handleSearch(value){ if (this.rv == null){ this.rv = this.defaultSvc; } this.getFilteredST(); } //Combobox Filter @api get rvSelection(){ //return this.rv; } set rvSelection(value){ //this.setAttribute('rvSelection',value); this.serv = value; this.getFilteredST(); } //Similarly second combobox selection and same process based on user selection, values are passed to apex to fetch the results based on filters. @api get vsctSelection(){ //return this.vsct; } set vsctSelection(value){ //this._vsct = value; this.vsct = value; this.handlevsctSelectionChange(value); } handlevsctSelectionChange(value){ if (this.rv == null){ this.rv = defaultSvc; } this.getFilteredST(); } //3rd Filter @api get lcnGrpSelection(){ //return this.lcnGrp; } set lcnGrpSelection(value){ this.lcnGrp = value; this.handleLcnGrpChange(value); } handleLcnGrpChange(value){ if (this.rv == null){ this.rv = this.defaultSvc; } this.getFilteredST(); } //4th Filter - Lightning input @api get scdSelection(){ // return this.scd; } set scdSelection(value){ this.scd = value; this.handleScdChange(value); } handleScdChange(value){ if (this.rv == null){ this.rv = this.defaultSvc; } this.getFilteredST(); } //Value coming in from Grandparent Component [displayed parallel to this component on a single screen]; @api get calendarYr(){ // return this.clnyr; } set calendarYr(value){ this.clnyr=value; this.handleClnYrChange(value); } handleClnYrChange(value){ if (this.rv == null){ this.rv = this.defaultSvc; } this.getFilteredST(); } getFilteredST(){ if(!this.accountId ) { this.accountId = null; } if(!this.srchInput) { this.srchInput = null; } if(!this.rv) { this.rv = null; } if(!this.vsctAct) { this.vsctAct = null; } if(!this.lcnGrp) { this.lcnGrp = null; } if(!this.scd) { this.scd = null; } if(!this.clnyr){ this.clnyr =null; } console.log('AccountId- going for - apex call->', this.accountId); console.log('searchkey- going for - apex call->', this.srchInput); console.log('rvc - going for - apex call->', this.rv); console.log('vsct - going for - apex call->', this.vsctAct); console.log('lncgrp- going for - apex call->', this.lcnGrp); console.log('scd - going for - apex call->', this.scd); console.log('clnyr - going for - apex call->', this.clnyr); getMethod2({accId: this.accountId,skey: this.srchInput, rvc: this.rv, vsctAct: this.vsctAct, lGroup: this.lcnGrp, scheduled: this.scd, appYr: this.clnyr}) .then((result) => { let arr=[]; if(result){ result.forEach(r => { arr.push({ tName: r.T_Name__c, stid: r.Id, schdld: r.Schdld__c, cmpltd: r.Cmpltd__c, annscp: r.Ann_Scp__c }) }); } this.stRecords = arr; this.tCount =arr.length; this.tCounter(); }) .catch((error) => { this.error = error; }) } } As you can see in the code above, I have defined @api getter & setters. The Lifecycle hook fires this child components getters and setters which are making multiple apex call on first load. This is error prone as sometimes it loads incorrect result.
Also, the Clear All Filters button when clicked first time fires all the child getters setters again rendering incorrect results at time. Then on the second click it brings the right value(it doesn't fires get/set on second click).
I want to
- Control the flow so that correct results should be displayed every time on first load.
- Any better approach for Clear All Filters so that I do not wake the child component's getter setters again[which brings wrong result on the first click, then correct results on the second click].
- Fix whatever else I am doing wrong.
See Parent component code below -
HTML
<div id="external-events" class="slds-panel__body padding"> <template if:true={hasRecords}> <c-t-data-table account-id={accountId} calendar-yr={calendarYr} ontload={fetchCount} default-svc ={defaultSvce} srch-key={searchKeyword} rv-selection={rv} vsct-act-selection={vsctAct} lcn-grp-selection={lcngroup} scd-selection={schdld}></c-tasks-data-table> </template> </div> JS
//Method for handling Clear All Filters handleClearing(event){ this.defaultSvc = this.rvOptions[0].value; this.searchKeyword = null; this.schdld = null; this.vsct = null; this.defaultvsctAct = this.vsctActivityOptions[0].value; this.vsctAct = this.serviceActivityOptions[0].value; this.defaultlcngrp = this.lcngOptions[0].value; this.lcngrp = this.lcngOptions[0]value; this.template.querySelector("c-t-data-table").svceTks(); } APEX is returning list of filtered results - list<Object__c> based on combination of selection of filters.
Also,I have changed the property names manually, if you find any discrepancy in property names, please ignore.
Thanks in advance for helping. Happy to add more context if needed.
