Multi CheckBoxGroup Dataset & Repeater Filtering with Default/Reset

Ask the community
,
1

Hi folks,
really need help, driving crazy here.

Goal : Filter a dataset and render in a repeater based on user selection via multiple checkbox Groups.

1176×956 294 KB

I went through all the related posts and the closest I found to my solution is this one where @yisrael-wix provided an amazing tutorial that covers 90% of my requirement. https://www.wix.com/velo/forum/tips-tutorials-examples/example-multiple-groups-filter

What is left here which I am struggling with is how to treat the default/filter reset.

In my collection I have a boolean field “isVisible” to control which items I want to show upon page load. The default, as well as each reset action (via “All” button), should always be a filtered dataset with isVisible true.

For each CheckBoxGroup, I want an “All” option which, once selected, should automatically uncheck all the checked checkboxes in the same CheckBoxGroup and update the dataset filter accordingly, while keeping any potential checkbox and related filter from the other CheckBoxGroups active. Similarly as soon as there is at least one checkbox different than “All” active in a CheckBoxGroup, the All option should uncheck.

I believe this UI should clarify the behavior I am trying to achieve.

This is the code I put together so far, but I see where I am going, there are too many combinations involved and I need some help to build a more robust cycle to manage this requirement.

Any help is super appreciated!

Thanks,
Matteo

import wixData from 'wix-data';

$w.onReady(function () {
    //filterView();

    $w("#cuisineCheckBoxGroup").onChange((event, $w) => {
        let selectedIndices = $w("#cuisineCheckBoxGroup").selectedIndices;
        
        if (($w("#cuisineCheckBoxGroup").selectedIndices[0] === 0) && ($w("#cuisineCheckBoxGroup").selectedIndices.length === 1)) {
            // console.log($w("#cuisineCheckBoxGroup").selectedIndices[0]);
            // console.log("Selected Inteces Array: " + selectedIndices);
            $w("#cuisineCheckBoxGroup").selectedIndices = [0];
            $w("#dynamicDataset").setFilter(wixData.filter());

        } else if (($w("#cuisineCheckBoxGroup").selectedIndices.length > 1) && ($w("#cuisineCheckBoxGroup").selectedIndices === [0,1]) ){
             console.log ("Pippo");
             $w("#cuisineCheckBoxGroup").selectedIndices = [1];
        }
        /*TOO MANY PERMUTATION IF/ELSE NEED SOME EFFICIENCY HERE*/
         else {
            filterView();
        }
    });

    $w("#mealCheckBoxGroup").onChange((event, $w) => {
        filterView();
    });
});

function filterView() {

    var typeCuisineFilter = $w("#cuisineCheckBoxGroup").value
    var typeMealFilter = $w("#mealCheckBoxGroup").value
    var typeRegimeFilter = $w("#regimeCheckBoxGroup").value

  
    $w("#dynamicDataset").setFilter(wixData.filter()
            .hasSome("cusine", typeCuisineFilter)
            .hasSome("mealType", typeMealFilter)
            .hasSome("regimeType", typeRegimeFilter)
        )

        .then(() => {
            let count = $w("#dynamicDataset").getTotalCount();
            if (count === 0) {
                $w("#text339").show();
            } else {
                $w("#text339").hide();
            }
        })
        .catch((err) => {
            console.log(err);
        });
}