Expand / Collapse based on the result of two dataset

Hello,

I have a search box ( #iTitle) that searches for authors in one dataset ( #dataset1) and filters the results in a repeater ( # repeater1).
I can also use the same search box ( #iTitle) to filter illustrators in a second dataset ( #dataset2) , shown in a second repeater ( # repeater2).

Before showing the result, I ask to count the datasets and depending on the results, I expand or collapse repeaters to show the results.

My problem is that sometimes the same “answer / word” is in the two datasets. And therefore one repeater is collapsed and the results are hidden.

I would like to say that if the same “answer / word” is in the two datasets, none of the repeaters collapse !

My coding skills are weak and I haven’t found a solution yet to the problem.

Any idea ?

Thanks in advance

import wixData from "wix-data";

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

function filter(title) {
$w('#dataset1').setFilter(wixData.filter().contains('auteur', title))
$w('#dataset2').setFilter(wixData.filter().contains('illustrateur', title))

.then(() => {

 let count = $w("#dataset2").getTotalCount();

 if (count > 0) {
        $w("#repeater2").expand();
        $w("#repeater1").collapse();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").hide();
        $w("#button4").hide();
            }
if (count === 0) {
        $w("#repeater1").expand();
        $w("#repeater2").collapse();
        $w("#text20").collapse();
        $w("#text19").expand();
        $w("#button3").hide();
        $w("#button4").hide();
 
            }
});
    $w("#dataset2").onReady(() => {

    });
}

Looks like you need to get a count for both datasets and then use the JS switch statement to handle the various possibilities, more or less like this:

 let count1 = $w("#dataset1").getTotalCount();
 let count2 = $w("#dataset2").getTotalCount();

switch(true) {
 case (count1 > 0 && count2 > 0):
        $w("#repeater1").expand();
        $w("#repeater2").expand();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").hide();
        $w("#button4").hide();
        break;
    break;
 case (count1 === 0 && count2 > 0):
        $w("#repeater1").collapse();
        $w("#repeater2").expand();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").hide();
        $w("#button4").hide();
        break;
 case (count1 > 0 && count2 === 0):
        $w("#repeater1").expand();
        $w("#repeater2").collapse();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").hide();
        $w("#button4").hide();
        break;
   break;
 case (count1 === 0 && count2 === 0):
        $w("#repeater1").collapse();
        $w("#repeater2").collapse();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").hide();
        $w("#button4").hide();
        break;
   break;
}

Awesome ! Thanks Anthonyb ! It almost works perfect :wink:

The last little problem I have is that the filtering process starts (with a delay) when I type and shows the results without hitting the “enter” key.

But very often, I need to press the “enter” key to have all the parts expanded or collapsed the way they should. It like it doesn’t wait to have all the results before collapsing and expanding and sometimes the results are in both repeaters but one is still collapsed from a previous search.

Hitting the “enter” key solve the problem but is there a way to add some sort of “delay / waiting time” before collapsing and expanding (so that the two datasets are searched before starting two collapse / expand)?

Here is my code based on your help :

import wixData from "wix-data";

  $w.onReady(() => {
    waitForLoading();
});

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

}

function waitForLoading() {
    setTimeout(() => {
        $w('#preloadercomplices').hide('FadeOut');
    }, 1500);
}

function filter(title) {
$w('#dataset1').setFilter(wixData.filter().contains('auteur', title))
$w('#dataset2').setFilter(wixData.filter().contains('illustrateur', title))


let count1 = $w("#dataset1").getTotalCount();
let count2 = $w("#dataset2").getTotalCount();

switch(true) {
 case (count1 > 0 && count2 > 0):
        $w("#repeater1").expand();
        $w("#repeater2").expand();
        $w("#text19").expand();
        $w("#text20").expand();
        $w("#button3").expand();
        $w("#button4").expand();
        $w("#box1").hide();
 break;
 case (count1 === 0 && count2 > 0):
        $w("#repeater1").collapse();
        $w("#repeater2").expand();
        $w("#text19").collapse();
        $w("#text20").expand();
        $w("#button3").collapse();
        $w("#button4").expand();
        $w("#box1").hide();
 break;
 case (count1 > 0 && count2 === 0):
        $w("#repeater1").expand();
        $w("#repeater2").collapse();
        $w("#text19").expand();
        $w("#text20").collapse();
        $w("#button3").expand();
        $w("#button4").collapse();
        $w("#box1").hide();
 break;
 case (count1 === 0 && count2 === 0):
        $w("#repeater1").collapse();
        $w("#repeater2").collapse();
        $w("#text19").collapse();
        $w("#text20").collapse();
        $w("#button3").collapse();
        $w("#button4").collapse();
        $w("#box1").show();
 break;
}
}

How many records are in the two datasets currently? You may be expecting the repeaters to do something that they currently are not capable of doing: quickly displaying more than fifteen or twenty items.

Another suggestion would be to put that code in the input event instead of the keyPress event. It will include the latest results as of the last key stroke without having press the “enter” key.

Lastly, and more to the point of your question, you could put then() clauses after the filter lines that would prevent any re-loading of the repeaters until after both filter results have been obtained.

$w('#dataset1').setFilter(wixData.filter().contains('auteur', title))
.then(() => {
    $w('#dataset2').setFilter(wixData.filter().contains('illustrateur', title))
    .then(() => {
       let count1 = $w("#dataset1").getTotalCount();
       let count2 = $w("#dataset2").getTotalCount();
       // ... followed by the lengthy switch statement 
    });
});

It works now perfect ! Many many thanks !

Glad it’s working as you hoped.

Hello, could you give me quick tips on this question here please : https://www.wix.com/corvid/forum/community-discussion/styling-individual-submenu-item

I know it has nothing to do with this actual thread but I’m wondering if it’s even possible in Wix ?:grinning:

Thank you