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;
}
}