Get more details when click an item on repeater

Ask the community
,
1

Hi,

I have two repeaters on my page. I have connected one of my repeaters to the database using code (no dataset) and I will provide the code below that I used.
On my repeater1 I have txtItem, txtItemCode, txtQuantity, txtAmount, btnViewDetails. When I click the btnViewDetails on any of the containers in repeater1, the repeater2 should show up more details of that particular item. Repeater2 has txtPricePerUnit, txtSupplier, txtShelfLife. How can this be accomplished?

When a user click button, on a container that shows Motor and its item code and quantity in repeater1 , it should show repeater2 with more details such as its price per unit, suppler name, shelf life, etc. if the user click the button on another container that is for Compressor, the it should show more details of Compressor.

I have been after this task since two week but I couldn’t find a way to do it. I have seen many posts online but nothing was exactly what I was looking for.

Both the repeaters are fetching data from the same database.


import wixData from 'wix-data';

$w.onReady(function () {
    $w("#repeater2").hide()
    $w("#btnClose").hide()
    $w('#dpdStatus').value = "Good"
    manageRepeater()
});

export function btnViewDetails_click(event) {
    $w("#repeater2").show()
    $w("#btnClose").show()
    manageRepeater2()
}

export function btnClose_click(event) {
    $w("#repeater2").hide()
    $w("#btnClose").hide()
}

function manageRepeater() {

 const filterStatus = wixData.filter().eq("status", $w('#dpdStatus').value);

 ////// dpdStatus is a dropdown to select the status of items 

    wixData.aggregate("ItemDetails")
        .filter(filterStatus)
        .group("itemCode")
        .sum("itemPrice", "totalAmount")
        .sum("Quantity", "totalQuantity")
        .run()
        .then((results) => {
            $w("#repeater1").data = results.items;
            console.log(results.items);
            console.log(results.length);
            console.log(results.hasNext());
        })
        .catch((error) => {
            console.log(error.message);
            console.log(error.code);
        });

    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#txtItemCode").text = itemData.itemCode;
        $item("#txtItem").text = itemData.item;
        $item("#rtxAmount").text = itemData.totalAmount.toString();
        $item("#rtxQuantity").text = itemData.totalQuantity.toString();

        
//// THIS PART OF THE CODE IS WRITTEN BECAUSE I DO NOT KNOW ANY OTHER WAY TO DO THIS,,,  I /// KNOW THIS IS NOT A GOOD WAY TO DO IT, PLEASE LET ME KNOW HOW TO DO IT BETTER
        
        wixData.query("ItemDetails")
            .eq("itemCode", $item("#txtItemCode").text)
            .find()
            .then((results) => {
                $item("#txtItem").text = results.items[0].item;
            })
            .catch((err) => {
 let errorMsg = err;
            });
    });

}

export function dpdStatus_change(event) {
    manageRepeater()
}

function manageRepeater2() {
    wixData.query("ItemDetails")
        .eq("itemCode", $w("#txtItemCode").text)
        .eq("status", "Good")
        .find()
        .then((results) => {
            $w("#repeater2").onItemReady(($item, itemData, index) => {
                    $item("#txtPricePerUnit").text = itemData.price;
                    $item("#txtSupplier").text = itemData.supplier;
                    $item("#txtShelfLife").text = itemData.shelfLife;
                })
                .catch((err) => {
 let errorMsg = err;
                });

        })
}

manageRepeater() works perfect.
manageRepeater2(), I know it is a blunder but I was just trying.

Note: I do not have a dataset on my page yet, everything was done through coding.

Could someone help me do it?

Thanks in advance.