Hi salman, i have an issue with this code.
The function “clear” doesn’t work properly and secondly i would like to add a function “select all” to the $w( ‘#checkGFirm’ ).options
import wixData from ‘wix-data’ ;
import {local} from ‘wix-storage’ ;
let columns = [{
“id” : “col1” ,
“dataPath” : “firm” ,
“label” : “Firm” ,
“type” : “string”
}]
$w.onReady( function () {
init();
});
async function init() {
let data = ( await wixData.query( “stores” )
.limit( 1000 )
.find()).items;
buildCat();
// console.log(data);
let firmOptions = noDublicate(data.map(el => el.firm));
let proOptions = noDublicate(data.map(el => el.product));
$w( '#checkGFirm' ).options = buildOptions(firmOptions);
// $w(‘#checkGPro’).options = buildOptions(proOptions);
$w( '#btnSearch' ).onClick(filter);
$w( '#btnClear' ).onClick(clear);
$w( '#repeater1' ).onItemReady(($item, itemData, i)=>{
$item( '#textCat' ).text = itemData.catName;
$item( '#checkGProd' ).options = buildOptions(itemData.proOptions);
});
$w( '#boxFirm' ).onClick(()=>toggleCollapse( "checkGFirm" ));
$w( '#boxPro' ).onClick(()=>toggleCollapse( "repeater1" ));
// restrict 6 products
let maxPro = 6 ;
let lastCats = {};
$w( ‘#checkGProd’ ).onChange(el=>{
let {prods, cats} = getProd();
if (prods.length > 6 ) {
$w( ‘#repeater1’ ).forEachItem(($item, itemData, i) =>{
let cat = itemData.catName;
let lastProds = lastCats[cat];
$item( ‘#checkGProd’ ).value = lastProds;
});
} else {
lastCats = cats;
}
});
}
async function filter() {
$w( ‘#textLoading’ ).show();
let {prods} = getProd();
let isValid = validation(prods);
if (isValid !== “true” ) {
$w( ‘#textLoading’ ).text = isValid;
$w( ‘#textLoading’ ).show()
return ;
}
let checkGFirm = $w( ‘#checkGFirm’ ).value;
let checkGPro = prods; //$w(‘#checkGPro’).value;
checkGPro.forEach((el, i) => {
columns.push({
id: "col" + (i + 2 ),
“dataPath” : el,
“label” : el,
“type” : “string”
});
});
$w( '#table' ).columns = columns;
// build columns for table
let rows = await getStores(checkGFirm, checkGPro)
$w( ‘#table’ ).rows = rows;
$w( '#table' ).show();
$w( '#textLoading' ).hide();
}
function clear() {
$w( ‘#checkGFirm’ ).selectedIndices = [];
// $w(‘#checkGPro’).selectedIndices = [];
$w( ‘#checkGProd’ ).selectedIndices = [];
filter();
}
function validation(prods) {
if ($w( ‘#checkGFirm’ ).selectedIndices.length === 0 ) {
return “Select atleast one firm” ;
}
if (prods < 1 ) {
return “Select atleast two product” ;
}
columns = [{
“id” : “col1” ,
“dataPath” : “firm” ,
“label” : “Firm” ,
“type” : “string”
}]
return “true” ;
}
async function getStores(firms, products) {
try {
let res = await wixData.query( “stores” )
.hasSome( “product” , products)
.hasSome( “firm” , firms)
.limit( 1000 )
.find()
console.log( "data found : " , res, res.length);
// build rows
let data = res.items;
let uniqueRows = [];
data.forEach(row => {
let firmsUni = uniqueRows.map(el => el.firm);
let pos = firmsUni.indexOf(row.firm);
if (pos === - 1 ) {
uniqueRows.push({
firm: row.firm
});
pos = firmsUni.length
}
columns.forEach(col => {
let colKey = col.dataPath;
if (colKey === “firm” ) return ;
if (colKey === row.product) {
uniqueRows[pos][colKey] = row.price;
}
});
});
let rows = [];
uniqueRows.forEach(uniRow => {
let row = {};
columns.forEach(el => {
let colKey = el.dataPath;
if (colKey === “firm” ) {
row[ “firm” ] = uniRow[colKey];
return
}
if (colKey !== “firm” && uniRow[colKey]) {
row[colKey] = uniRow[colKey];
} else {
row[colKey] = “not available” ;
}
});
rows.push(row);
});
rows.sort((a, b) => a.firm.localeCompare(b.firm));
// console.log("rows: ", uniqueRows, rows);
return rows;
} catch (err) {
console.log( "Error : " , err.message);
}
}
async function buildCat() {
let cats = ( await wixData.query( “stores” )
.limit( 1000 )
.find()).items;
let repeaterCat = []; // [{categoryName:categoryName, productsOpt:productsOpt }]
let repeaterObj = {}; // {catName : []}
cats.forEach(el=>{
console.log(el);
if (!repeaterObj[el.category]) repeaterObj[el.category] = [];
repeaterObj[el.category].push(el.product);
});
console.log( "repeaterObj : " , repeaterObj);
Object.keys(repeaterObj).forEach((key, i)=>{
let obj = {};
obj._id = String(i);
obj.catName = key;
obj.proOptions = noDublicate(repeaterObj[key]).sort();
repeaterCat.push(obj);
});
$w( '#repeater1' ).data = repeaterCat;
console.log( "cats : " , cats);
}
function getProd() {
let prods = [];
let catsObj= {};
$w( '#repeater1' ).forEachItem(($item, itemData, i)=>{
let checkedPro = $item( ‘#checkGProd’ ).value;
let cats = itemData.catName;
prods = […prods, …checkedPro];
catsObj[cats] = checkedPro
});
console.log( "prods : " , prods);
return {prods, cats : catsObj};
}
// helper function
function noDublicate(dubArr) {
return Array. from ( new Set(dubArr)).sort();
}
function buildOptions(arr) {
return arr.map(el => ({ label: el, value: el }))
}
function toCamelCase(str) {
return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
}
function toggleCollapse(id) {
console.log( “click” , id);
if ($w( ‘#’ + id).collapsed) {
$w( ‘#’ + id).expand();
} else {
$w( ‘#’ + id).collapse();
}
}
function dynamicSort(property) {
var sortOrder = 1 ;
if (property[ 0 ] === “-” ) {
sortOrder = - 1 ;
property = property.substr( 1 );
}
return function (a,b) {
/* next line works with strings and numbers,
* and you may want to customize it to your needs
*/
var result = (a[property] < b[property]) ? - 1 : (a[property] > b[property]) ? 1 : 0 ;
return result * sortOrder;
}
}
