I have been putting together a filter system so users can filter results from a database shown in a repeater. The setup is a dropdown which filters by date and then 3 input boxes which allows the users to then further filter the results they see by 3 other fields within the dataset.
I have also added an “All” option to the dropdown which shows all of the results for the month when selected. Everything is working fine - when a specific date is selected from the dropdown, all of the filters work perfectly but when “All” is selected from the dropdown, all results show correctly but when I try to user one of the input boxes to filter, the repeater seems to disappear and no results are shown.
This is the code I have so far:
import wixData from 'wix-data'
$w.onReady(function () {
uniqueDropDown1();
filter2();
searchNumber();
searchOperator();
searchClass();
});
function uniqueDropDown1 (){
wixData.query("2021News")
.contains("title", "May")
.ascending("title")
.limit(1000)
.find()
.then(results =>{
const uniqueTitles = getUniqueTitles(results.items);
let AllOption = [{"label":"All", "value":"All"}];
let dropdown1 = buildOptions(uniqueTitles);
$w('#dropdown1').options = AllOption.concat(dropdown1);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.title);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList){
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
function filter2 () {
$w('#dropdown1').onChange((event) => {
let title = $w('#dropdown1').value;
let title3 = $w('#input1').value;
$w('#dynamicDataset').onReady(() => {
console.log("The dataset is ready to be filtered.");
$w('#dynamicDataset').setFilter(wixData.filter()
.contains("title", title)
.contains("number", title3)
)
.then(() => {
console.log("Dataset is now filtered with the matching title from the dropdown");
let getItem = $w('#repeater1').data
})
.catch((err) => {
console.log(err);
});
});
})
}
export function dropdown1_change(event, $w){
$w('#input1').enable();
$w('#input2').enable();
$w('#input3').enable();
$w('#input1').value = null;
$w('#input2').value = null;
$w('#input3').value = null;
let filterType = $w('#dropdown1').value;
if (filterType === "All") {
$w('#dynamicDataset').setFilter(wixData.filter().contains("month", "May"));
}
}
let debounceTimer;
export function input1_keyPress_1(event, $w) {
searchNumber();
}
function searchNumber () {
$w('#input1').onKeyPress((event) => {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
const filterValue = $w('#input1').value
const filterValue2 = $w('#input2').value
const filterValue3 = $w('#input3').value
const textFilter = wixData.filter().contains("number", filterValue)
.contains("operator", filterValue2)
.contains("title", $w('#dropdown1').value)
.contains("class", filterValue3)
$w('#dynamicDataset').setFilter(textFilter)
}, 500);
});
}
export function input2_keyPress(event) {
searchOperator();
}
function searchOperator () {
$w('#input2').onKeyPress((event) => {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
const filterValue = $w('#input1').value
const filterValue2 = $w('#input2').value
const filterValue3 = $w('#input3').value
const textFilter = wixData.filter().contains("number", filterValue)
.contains("operator", filterValue2)
.contains("title", $w('#dropdown1').value)
.contains("class", filterValue3)
$w('#dynamicDataset').setFilter(textFilter)
}, 500);
});
}
export function input3_keyPress(event) {
searchClass();
}
function searchClass () {
$w('#input3').onKeyPress((event) => {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
const filterValue = $w('#input1').value
const filterValue2 = $w('#input2').value
const filterValue3 = $w('#input3').value
const textFilter = wixData.filter().contains("number", filterValue)
.contains("operator", filterValue2)
.contains("title", $w('#dropdown1').value)
.contains("class", filterValue3)
$w('#dynamicDataset').setFilter(textFilter)
}, 500);
});
}
Is there something I am missing which is stopping the input boxes from filtering what is shown in the repeater?
Thanks