Coding table with search and 2 drop down filters

Ask the community
,
1

My project is a pay table where I have a dataset that I input employees pay myself, as the owner, and filter it by log in email to display information to the correct member. -code works properly.

I added a search bar where the employee can search by account name to retrieve information on their pay from that account. -code works properly.

I’m going even further to add dropdowns to where employees can filter by pay type and pay date. I’d like these to work independently so that they can filter by type then date, or date then type. -This is where I’m stuck. Using the code below, it seems like my Drop down is disabled as one of my pay types does display, but I am unable to select or change the dropdown menu.

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

$w.onReady( function () {
//Get current user email address
wixUsers.currentUser.getEmail()
.then((email) => {
let userEmail = email; //"user@email.com"

        //Filter the dataset 
        $w(" #dataset1 ").setFilter(wixData.filter() 
            .eq("loginEmail", email)) 
    })

});

export function searchButton_click(event) {
wixData.query(“Commissions”)
.contains(“account”, $w(" #searchBar “).value)
.find()
.then(res => {
$w(” #table1 ").rows = res.items;
})
}

export function dropdown1_change(event) {
wixData.query(“Commissions”)
.contains(“payType”, $w(" #dropdown1 “).value)
.find()
.then(res => {
$w(” #table1 ").rows = res.items;
})
}

I have not begun to code for the 2nd dropdown as I was trying to go step by step but need assistance figuring out where I’m going wrong with the first one. Any help is appreciated!

2

Check contains in the Wix API Reference and it will give you the answer in the description for it for the correct query that is needed for the dropdown.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#contains

contains( )
Refines a query or filter to match items whose specified property value contains a specified string.

Description
The contains() function refines a WixDataQuery or WixDataFilter to only match items where the value of the specified property contains the specified string. Matching with contains() is not case sensitive, so “text” does contain “Tex”.

You can use contains() with a property whose value is a String or a Reference. For properties of type reference it is recommended that you use the eq() function instead of contains(). With properties that are References, contains() matches by the ID of the referenced item as a String.

So basically your search button uses the contains query and your dropdown uses the eq query.

3

Update, this got a little more complicated. To avoid duplicates in the drop down, I had to change the code and make sure I wasn’t still connected to “connect a list” On the dropdown settings. Here is my new code, but I’m having new issues:

  1. My searches and filters are showing ALL data, not just the logged in email user.
  2. This doesn’t seems to avoid duplicates in the 2nd drop down, only the first.
  3. Once I make a selection, I cannot reselect the dropdown boxes.

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

$w.onReady( function () {
//Get current user email address
wixUsers.currentUser.getEmail()
.then((email) => {
let userEmail = email; //"user@email.com"

        //Filter the dataset 
        $w(" #dataset1 ").setFilter(wixData.filter() 
            .eq("loginEmail", email)) 
    })

});

export function searchButton_click(event) {
wixData.query(“Commissions”)
.contains(“account”, $w(" #searchBar “).value)
.find()
.then(res => {
$w(” #table1 ").rows = res.items;
})
}

export function dropdown1_change(event) {
wixData.query(“Commissions”)
.contains(“payType”, $w(" #dropdown1 “).value)
.find()
.then(res => {
const uniqueTitles = getUniqueTitles(res.items);
$w(” #dropdown1 “).options = buildOptions(uniqueTitles);
$w(” #table1 ").rows = res.items;

    });

function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.title);
return [… new Set(titlesOnly)];
}
}

export function dropdown2_change(event) {
wixData.query(“Commissions”)
.contains(“payDate”, $w(" #dropdown2 “).value)
.find()
.then(res => {
const uniqueTitles = getUniqueTitles(res.items);
$w(” #dropdown2 “).options = buildOptions(uniqueTitles);
$w(” #table1 ").rows = res.items;

    });

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