Code Review Friday: Let's Improve your code, ask Corvid master

Ask the community
, ,
8

Hi, Juwairia here again. I am building a job board in wix that would display jobs from a database, with each job in its own repeater. My relevant database fields are: PositionTitle, CompanyName, Industry, Description,

On this page, I have a search that searches through PositionTitle & CompanyName and a dropdown filter that sorts through position type.

I’d like for there to be a ‘no results found’ text box come up when no results are found from a users text input in the search box. Secondly, I am trying to incorporate a clear filter button for users to clear the filter theyve applied and revert the listings to their original display.

Currently, the clear filter button kind of works, but when clearing it displays the top-most option in the dropdown, but the repeaters are shown in the original order. So my dropdown is organized by Full-time, part-time, intern, etc, so when I hit clear search, the dropdown displays full-time. This is a slight lag, but may confuse users. Is there any way this can be fixed?

exportfunction button10_click(event) {//Add your code for this event here:     $w("#dropdown").selectedIndex = 0    $w("#dynamicDataset").setFilter(wixData.filter());}

To display the ‘0 results found’ i tried including a results counter under the search code, but its just counting everything in my database. How can I edit it to show only the results found - which should be 0? Or any other way to show no results found is fine too.

$w.onReady(function () {let count = $w("#dynamicDataset").getTotalCount();    $w("#counter").text = String(count) + " jobs posted";})

Full code below. It also includes code for a job counter & a show more toggle in each repeater.

import wixData from "wix-data";

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
 // SHORT DESC CODE
        $w("#listRepeater").onItemReady(($item, itemData) => {
 const { description } = itemData;

 // on item ready set the desc shorter
            $item("#desc").text = shortText(description);
            $item("#showmore").label = "Show More";

            $item("#showmore").onClick((event) => {
 // toggle short desc.
 if ($item("#showmore").label === "Show More") {
                    $item("#desc").text = description;
                    $item("#showmore").label = "Show Less";
                } else {
                    $item("#desc").text = shortText(description);
                    $item("#showmore").label = "Show More";
                }
            });
        });

 function shortText(text, maxLen = 220) {
 return text.substr(0, maxLen) + "...";
        }
    });

 //  FILTER CODE
    $w("#searc").onKeyPress(() => {
 // keypress event trigger before the dom is rendered
 // setTimeout will wait 40ms before excuting the code in filterDs
        setTimeout(filterDs, 40);
    });
 // Dropdown with all the company name
    $w("#dropdown").onChange(() => {
        filterDs();
    });
});

function filterDs() {
 // inital filter
 let filterBuilder = wixData.filter();

 let keyword = $w("#searc").value;
 let dropdown = $w("#dropdown").value;

 if (keyword) {
        filterBuilder = filterBuilder.contains("positionTitle", keyword)
            .or(wixData.filter().contains("companyName", keyword));
 //lastFilterSearchBox = searchBox;
    }

 if (dropdown) {
        filterBuilder = filterBuilder.eq("jobType", dropdown);
        console.log("Dropdown value: " + dropdown);
    }
    $w("#dynamicDataset").setFilter(filterBuilder);

}

$w.onReady(function () {
 let count = $w("#dynamicDataset").getTotalCount();
    $w("#counter").text = String(count) + " jobs posted";
})

export function button10_click(event) {
 //Add your code for this event here: 
    $w("#dropdown").selectedIndex = 0
    $w("#dynamicDataset").setFilter(wixData.filter());
}