I need help in coding

Ask the community
, , ,
1

Question:
I help in coding

Product:
[Which editor]

What are you trying to achieve:
we have to add script to the table to create and display button to open photo field url, instead of displaying photo url. Strictly have to use wix velo and not to use lightbox and have to open in new window

What have you already tried: so far sharing the link Advertising.Care
import wixAnimations from ‘wix-animations’;
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;
import { generateCsvData } from ‘backend/xlsx.jsw’;

const totalCount = 0;
const pageSize = 200; // Adjust the page size based on your needs
let currentPage = 1;
const pageSizeBig = 1000; // Adjust the page size based on your needs
let currentPageBig = 1;

$w.onReady(function () {
$w(“#IOCLlist”).pagination = { “type”: “pagination”, “rowsPerPage”: 20 };
$w(“#IOCLlist”).refresh();

$w("#ddstate").onChange(function () { //------------on change STATE
    $w("#dddistrict").value = undefined;
    createdistrict()
    $w("#imgupb").hide();
    //$w("#imgups").show();
    $w("#dddistrict").show();
    //count()
});
$w("#dddistrict").onChange(function () { //------------on change District
    $w("#imgups").hide();
    $w("#IOCLlist").expand();
    $w("#IOCLlist").refresh();
    // $w("#mcmarket").show();
    count()
    $w("#IOCLlist").show();
});

})

function createdistrict() {
wixData.query(“IoclPetrolPump”)
.limit(pageSize)
.skip((currentPage - 1) * pageSize)
.contains(“state”, $w(“#ddstate”).value)
.ascending(“district”) // Sort districts alphabetically (use .descending(“District”) for descending order)
.distinct(“district”)
.then(results => {
const districtOptions = results.items.map(item => ({ label: item, value: item }));
$w(“#dddistrict”).options = districtOptions;
})

    .catch(error => {
        console.error("Error fetching districts:", error);
    });

}

function count() {
let totalCount = 0;
wixData.query(“IoclPetrolPump”)
.contains(“state”, $w(“#ddstate”).value)
.contains(“district”, $w(“#dddistrict”).value)
.count()
.then(totalCount => {
console.log(“Total Count:”, totalCount);

        // You can now use 'totalCount' as needed, for example, in a condition
        if (totalCount > 0) {
            $w("#test").text = "Total Records:- " + totalCount // Do something when there are records in the dataset
            $w("#test").show();
            tabledb();
        }
    })

}

function tabledb() {
const selectedDistrict = $w(“#dddistrict”).value;
//const mcMarketValue = $w(“#mcmarket”).value || ;
// Get the checkbox value
// Query the database for records based on the selected district
//wixData.query(“IoclPetrolPump”) // Replace with your actual collection name
wixData.query(“IoclPetrolPump”)
.limit(pageSizeBig)
.skip((currentPageBig - 1) * pageSizeBig)
.contains(“state”, $w(“#ddstate”).value)
.contains(“district”, $w(“#dddistrict”).value)
.ascending(“district”)
.ascending(“city”)
.ascending(“market”)
.ascending(“location”)
.find()
.then(results => {
const fields = [“city”, “market”, “location”, “pumpName”, “roCode”, “photo”];
const labels = [“City”, “Category”, “Address”, “Pump Name”, “Code”, “Photo / Map”];

        // Create columns based on the fields and labels
        const columns = fields.map((field, index) => ({
            "id": field,
            "dataPath": `rowItem.${field}`,
            "label": labels[index]

        }));

        // Set the columns for the table
        $w("#IOCLlist").columns.values()
        //setColumns(columns);
        // Create rows based on the fetched data
        const rows = results.items.map(item => {
            const row = {};
            fields.forEach(field => {
                row[field] = item[field] !== null ? item[field] : '';
            });
            return row;
        });

        // Set the rows for the table
        $w("#IOCLlist").rows = rows;
    })
    .catch(error => {
        console.error("Error fetching data:", error);
    });

}

Additional information: