[SalesForce] Trouble getting multi-select filter checkbox to work on LWC datatable

I am currently trying to implement a filter menu dropdown with multi-select checkboxes. When a user checks two "groups" or more, the lightning datatable will display/filter only records from the selected groups.

Something like this

Multi-Select Checkbox Image

Currently, the filter works but with only 1 "group" selected at a time. How would I pass multiple checkbox values from my JS into the SOQL statement in my APEX controller? The groups checkboxes are also being dynamically populated from a custom object and periodically someone will add a new group so I want to avoid hardcoding any of the group values into the code.

Here is my HTML 

<lightning-button-menu alternative-text="Show menu" style="margin-left: 10px;" variant="border-filled" icon-name="utility:filterList" >
        <ul style="width: 150px;">
            <li>
                <lightning-input type="checkbox" label="All Groups" onchange={handleCheckAll} value="All Groups" data-id="checkboxAllGroups">
                </lightning-input>
                </li>
                <hr style="margin-top: 0em; margin-bottom: 0.5em; color:black;">
        <template iterator:it={AccountFilter.data}>
            <li key={it.value.Id}>
            <lightning-input key={it.value.Id} type="checkbox" label={it.value.Groups__c} onchange={handleCheck} value={it.value.Groups__c} data-id="checkbox">
            </lightning-input>
            </li>
        </template>
        </ul>
    </lightning-button-menu>

JS

handleCheck(event){
    if(event.target.checked){
        const groupName = event.target.value;
        getAccountFilterSelect ({subAccountId: this.url, projectStoresOnly: 'false', groupName: groupName}) 
        .then(data => {
            console.log("THIS IS THE DATA");
            console.log(data);
            this.accList = data;
            this.accList = 
            data.map(row=>{
                return{...row, 

                    storeNumber: row.store.Store_Number_EDW__c,
                    storeLink: row.store.Account_Link__c,
                    storeName:  row.store.Name,
                    storeGroup:  row.store.Groups__c,
                    resetStatus: row.reset.Status__c,
                    resetSchedule: row.reset.Schedule_Date__c,
                    storeFeedback:  row.validationRequest.Review_Deadline__c,
                    storeCompletion:  row.validationRequest.Status__c,

                }

            })

        })

APEX Controller

   @AuraEnabled(cacheable = true)
public static List < StoreWrapper > getAccountFilterSelect(String subAccountId, Boolean projectStoresOnly, String groupName) {
    // String projectId = 'a2d29000000TIEd';
    // String projectStoresOnly = 'false';
    system.debug('***' + projectStoresOnly);
    List < StoreWrapper > storeWrapperList = new List < StoreWrapper > ();
    SSP_Reset_Project__c currProject;
    List < Account > queriedStores;

    // retrieve active project for this subaccount, if there is one 
    if(!String.isBlank(subAccountId)) {
        // assumption there is only one active project for a subaccount at a time 
        List<SSP_Reset_Project__c> projects = [SELECT Id FROM SSP_Reset_Project__c WHERE Account__c =: subAccountId AND Project_Status__c = 'Active' LIMIT 1];

        if(!projects.isEmpty()) {
            currProject = projects[0];
        }
    }

    // if fetching project stores only (projectStoresOnly = true)
    if (projectStoresOnly && currProject != null) {
        // return stores for this project only 
        queriedStores = [SELECT Account_Link__c, Store_Number_EDW__c, Name, Stellar_Shelf_Group__c FROM Account WHERE Est_un_compte_parent__c = false AND Id IN (SELECT Account__c FROM SSP_Reset_Project_Account__c WHERE Reset_Project__c =: currProject.id) AND Groups__c = :groupName];

    } else { // if fetching all stores (projectStoresOnly = false)
        // return all stores for this sub account 
        queriedStores = [SELECT Account_Link__c, Store_Number_EDW__c, Name, Groups__c FROM Account WHERE Est_un_compte_parent__c = false AND ParentId =: subAccountId AND Groups__c = :groupName];

    }

Currently, I am passing groupName from the JS into the Controller but its only 1 value at a time.

Thanks!

Best Answer

Your problem is you are only taking one value at a time, as target is only containing the current checked or unchecked box.

   itemsToFitler = [];
        
    handleCheck(event){ 
      
        let v = event.target.value;
    
        if (event.target.checked) {
            this.itemsToFitler.push(v);
        } else {
            const index = this.itemsToFitler.indexOf(v);
            if (index > -1) {
                this.itemsToFitler.splice(index, 1);
            }
        }
    
    
          this.getFilters();
    }
    
    getFilters() {
    
       getAccountFilterSelect ({subAccountId: this.url, projectStoresOnly: 'false', groupName: this.itemsToFitler}) 
                .then(data => {
                    this.accList = data;
                    
                    })
      
                })
          }

So if your handle method adds or removes from an array you can then call anther method that will handle the apex call. You can ofcourse use apexRefresh instead of calling the method again

Related Topic