0

I have the following drawback: my parent LWC shows a list of contacts with their related details. But I need to filter these contacts based on an input, typed in by the user. In this case, the channel through which the user found us (called sourceChannel). And I can't find how to make the filters work.

My current code:

contactShow.html

    <lightning-checkbox-group 
        name = "Checkbox Group"
        label = "Choose type of source"
        options = {options}
        value = {value}
        onchange = {handleChange}
    ></lightning-checkbox-group> 
    <p>Are you looking contacts by type of source: {selectedValues}</p>
    <template if:true = {contacts.data}>
        <lightning-layout 
            multiple-rows = "true"
            pull-to-boundary = "small">
            <template
                for:each = {contacts.data}
                for:item = "contact">


                <lightning-layout-item
                    key = {contact.Id}
                    size = "3"
                    class = "slds-var-p-around_xx-small"
                >
                    <c-contact-tile
                        contact = {contact}
                        oncontactview = {handleContactView}
                    ></c-contact-tile>
                </lightning-layout-item>
            </template>
        </lightning-layout> 
    </template>

contactShow.js

import { LightningElement, track } from 'lwc';
import getByContactsSource  from '@salesforce/apex/ContactController.getAllContacts';

export default class contactShow extends LightningElement {
    @track value =[];   
    hasSelected = false; 
    listItem;

    connectedCallback () {
        getByContactsSource ()
        .then (result => {
            let arr = [];
            for (var i = 0; i < result.length; i++){
                arr.push({
                    Source : result[i].Source__c
                })
            }
            this.value = arr;
        })
    }

    search (searchString) {

    let filtered = this.value.filter (source => {
        if (source.includes(searchString) ) {
            return true;
        }
        return false;
    })

    return filtered;
}

    handleClick (event) {
        this.hasSelected = false;
        this.value = '';;
    }

    handleSelected (event) {
        //let input = this.template.querySelector(".cf-class");
        console.log (event);
        this.listItem = event.detail.Id;

        const sourceEvent = new CustomEvent('changesource', {detail:this.listItem});
        this.dispatchEvent(sourceEvent); 

        this.hasSelected = true;
    }
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy