Multi-Reference As Inputs For Filter Function

Ask the community
,
1

I made it so close to figuring out how to solve this problem through many of the posts on the forum, but I have come to a place where I am stuck and my research is no longer helping.

Synopsis : I have a main database that is going to list out all of the various programs and ministries that my church offers. These items are currently organized primarily by “Category” and “Age”. I have created a page that includes the dataset in a repeater, which I am looking to filter by (2) dropdowns and also a search text input. Here is a screenshot of the current page:

2632×1344 344 KB

The dropdowns are both populated by two additional collections, which are “ConnectCategories” and “AgeCategories”. Two of the fields then match these collections in my main database “AdultMinistry”.

Here is what the main database looks like:

3284×1178 405 KB

I have actually finished a fully functioning filter, but because of our plan to maintain this database (with additional users), I would really like to transition the last two fields to be multi-reference fields. This would end up looking like the following:

3068×1402 447 KB

I have tried to understand “queryReferenced” and I have also tried to understand how the multi-reference field ends up linking to the parent collection as “_id”, but I have hit my limit of being able to bring these things together to work.

Here is the code that I have currently, which works when the field types are text. Can anyone help me to understand how to make this work?

$w.onReady(function () {

});

import wixData from 'wix-data';

//populate dropdown menus from collections
$w.onReady(() => {
    wixData.query('ConnectCategories')
        .find()
        .then(res => {
 let options = [{"value": '','label': 'All Categories'}] ;
            options.push(...res.items.map(category => {
 return {'value': category.category, 'label' : category.category};
            }));
            $w('#iCategory').options = options; })

    wixData.query('AgeCategories')
            .find()
            .then(res => {
 let ageoptions = [{"value": '','label': 'All Ages'}] ;
            ageoptions.push(...res.items.map(age => {
 return {'value': age.title, 'label' : age.title};
            }));
            $w('#iAge').options = ageoptions;
        })
});

let lastFilterTitle;
let lastFilterCategory;
let lastFilterAge

let debounceTimer;
export function iTitle_keyPress(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
            }
            debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value,lastFilterTitle);
            },200);
}

export function iAge_change(event) {
 if ($w('#iAge').value === 'All') {
        $w('#iAge').placeholder = 'Age';
        $w('#iAge').value = null;
        filter2()
    }
 else { 
    filter2($w('#iAge').value);     
    }}

export function iCategory_change(event) { 
 if ($w('#iCategory').value === 'All') {
         $w('#iCategory').placeholder = 'Category';
         $w('#iCategory').value = null;
         $w('#iCategory').resetValidityIndication();
        filter3()
    }
 else {  
    filter3($w('#iCategory').value);    
    }}

//Search box filter
function filter(title) {
 let newFilter = wixData.filter();
            newFilter = newFilter
            .contains('ministrytitle',title)
            .and(
                newFilter
                .contains('age',$w('#iAge').value))
            .and(
                newFilter
                .contains('category',$w('#iCategory').value))

        $w('#dataset1').setFilter(newFilter); 
        lastFilterTitle = title;        
        }

//Dropdown 1 filter (Age)
function filter2(age) {
let newFilter = wixData.filter();
            newFilter = newFilter
            .contains('ministrytitle',$w('#iTitle').value)
            .and(
                newFilter
                .contains('age',$w('#iAge').value))
            .and(
                newFilter
                .contains('category',$w('#iCategory').value))

 
            $w('#dataset1').setFilter(newFilter);
            lastFilterAge = age;
            }
 
 
//Dropdown 2 filter (Category)
function filter3(category) {
let newFilter = wixData.filter();
            newFilter = newFilter
            .contains('ministrytitle',$w('#iTitle').value)
            .and(
                newFilter
                .contains('age',$w('#iAge').value))
            .and(
                newFilter
                .contains('category',$w('#iCategory').value))

        $w('#dataset1').setFilter(newFilter); 
        lastFilterCategory = category;      
        }

function debounce(event, $w) {
 if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
            }
            debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterTitle);
            },200);
        }