//Collaboration with Salman. Contact:  facebook.com/salman2301

​

import wixData from 'wix-data';

let filter = wixData.filter();

 

$w.onReady(() => {

    //This is code to label and set value for the city dropdown element

    

    $w('#state').onChange(() => {

        $w('#city').disable();

        $w('#city').value = '';

        uniqueCityDropDown();

    })

    

    //Below is the filter code to be pasted on the Page Code tab.

    //Filter Tree is the best way to use it for dropdown

    //This code sets up an empty filterTree to start

 

    for (let i = 0; i < 8; i++) {

        filter.filterTree.$and[i] = {}

    }

    //This code triggers the label and set value for the state dropdown element

    uniqueStateDropDown();

})

 

function uniqueStateDropDown() {

    wixData.query("Real_estate")

        .ascending("state")

        .limit(1000) //max 1000 per Wix

        

        .find()

        .then(results => {

                console.log(results.items[87].state)

 

            const uniqueTitles = getUniqueTitles(results.items);

            $w("#state").options = buildOptions(uniqueTitles);

        });

 

    function getUniqueTitles(items) {

        const titlesOnly = items.map(item => item.state);

        return [...new Set(titlesOnly)];

    }

 

    function buildOptions(uniqueList) {

        return uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

    }

}

 

function uniqueCityDropDown() {

    wixData.query("Real_estate")

        .eq("state", $w('#state').value)

        .ascending("city")

        .find()

        .then(results => {

        

            const uniqueTitles = getUniqueTitles1(results.items);

            $w("#city").options = buildOptions1(uniqueTitles);

            $w('#city').enable();

        });

 

    function getUniqueTitles1(items) {

        const titlesOnly = items.map(item => item.city);

        return [...new Set(titlesOnly)];

    }

 

    function buildOptions1(uniqueList) {

        return uniqueList.map(curr => {

            return { label: curr, value: curr };

        });

    }

}

 

//This button triggers search function via Filter Tree method, note the different element types

export function searchButton_click(event, $w) {

    if ($w('#searchBar').value.length === 0) {

        filter.filterTree.$and[0] = {}

    } else {

        filter.filterTree.$and[0] = { "aboutMe": { $contains: $w('#searchBar').value } }; //text element

    }

    if ($w('#state').value.length === 0) {

        filter.filterTree.$and[1] = {}

    } else {

        filter.filterTree.$and[1] = { "state": $w('#state').value }; //dropdown element

    }

    if ($w('#city').value.length === 0) {

        filter.filterTree.$and[2] = {}

    } else {

        filter.filterTree.$and[2] = { "city": $w('#city').value }; //dropdown element

    }

    if ($w('#gender').value.length === 0) {

        console.log($w('#gender').value)

        filter.filterTree.$and[3] = {}

    } else {

        console.log($w('#gender').value)

        filter.filterTree.$and[3] = { "gender": $w('#gender').value }; //radio button element

    }

    if ($w('#sale').checked) {

        filter.filterTree.$and[4] = { "sale": $w('#sale').checked };

    } else {

        filter.filterTree.$and[4] = {} //checkbox element

    }

    if ($w('#rent').checked) {

        filter.filterTree.$and[5] = { "rent": $w('#rent').checked };

    } else {

        filter.filterTree.$and[5] = {} //checkbox element

    }

    filter.filterTree.$and[6] = { "age": { $gte: $w('#slider1').value } }; //slider element - 'from'

    filter.filterTree.$and[7] = { "age": { $lte: $w('#slider2').value } }; //slider element - 'to'

 

    console.log(filter)

    $w('#dataset1').setFilter(filter).then(() => {

        let textVariable = $w('#dataset1').getTotalCount();

        $w('#resultTxt').text = `Results : ${textVariable} found.` //text element to display custom results text

    })

}