Additive Filters for a Repeater

Ask the community
,
1

Hi all! I’m pretty new to coding in Wix (and in general) and I’m hitting a stumbling block with trying to filter the contents of a repeater. I’ve added 5 dropdown filters, a search box, and some filter tags. I’ve managed to get all of these to work but they won’t stack (i.e. if I select a 3 star rating and then a V4 grade it displays all the V4 grades rather than just those with a 3 star rating). I hope that makes sense, I know there are a bunch of questions and answers about this sort of thing out there already but I’m having a hard time applying them and was hoping someone could help me get to the solution I need. The page is linked below and my current code is below that. Any help is much appreciated!

https://prbouldering.wixsite.com/bouldering/problems-coding

$w.onReady(function () {
 // Write your JavaScript here
 // To select an element by ID use: $w("#elementID")
 // Click "Preview" to run your code
});
import wixData from "wix-data";

//SEARCH BAR//
export function searchBar_input(event, $w) {
 console.log($w('#searchBar').value);
 filterSearch($w('#searchBar').value);
}
function filterSearch() {
   $w('#problemsCoding').setFilter(wixData.filter().contains("title", $w("#searchBar").value));
 //use "or" for multiple field search
}

//TAGS//
export function problemTags_change(event) { 
console.log($w('#problemTags').value);
filterTags($w('#problemTags').value);
 // FOR MULTIPLE OPTIONS $w("#problemsDataset").setFilter(wixData.filter().hasSome("tags2", tagValue))
}
function filterTags() {
let tagValue = $w("#problemTags").value;
  $w("#problemsCoding").setFilter(wixData.filter().hasAll("tags2", tagValue))
}

//RATING//
export function ratingInput_change(event) { 
console.log($w('#ratingInput').value);
filterRating($w('#ratingInput').value);
}
function filterRating() {
$w('#problemsCoding').setFilter(wixData.filter().eq("rating", $w("#ratingInput").value))
}

//GRADE//
export function gradeInput_change(event) { 
console.log($w('#gradeInput').value);
filterGrade($w('#gradeInput').value);
}
function filterGrade() {
$w('#problemsCoding').setFilter(wixData.filter().eq("grade", $w("#gradeInput").value))
}

//AREA//
export function areaInput_change(event) {
console.log($w('#areaInput').value);
filterArea($w('#areaInput').value);
}
function filterArea() {
$w('#problemsCoding').setFilter(wixData.filter().eq("area", $w("#areaInput").value))
}

//SUBAREA//
export function subareaInput_change(event) {
console.log($w('#subareaInput').value);
filterSubarea($w('#subareaInput').value);
}
function filterSubarea() {
$w('#problemsCoding').setFilter(wixData.filter().eq("subarea", $w("#subareaInput").value))
}

//LOCATION//
export function locationInput_change(event) {
console.log($w('#locationInput').value);
filterLocation($w('#locationInput').value);
}
function filterLocation() {
$w('#problemsCoding').setFilter(wixData.filter().eq("location", $w("#locationInput").value))
}

//RESET//
export function resetInput_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
  $w("#problemsCoding").setFilter(wixData.filter())
    .then(() =>{
 
      $w("#problemTags").value = []
      $w("#ratingInput").value = []
      $w("#gradeInput").value = []
      $w("#areaInput").value = []
      $w("#subareaInput").value = []
      $w("#locationInput").value = []
      $w("#searchBar").value = [];
    }) 
}