Difficulty to add "Select all function" on my code and "clear function"

Ask the community
, ,
1

Hi All, i have an issue with this code.

The function “clear” ( ‘#btnClear’) 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;
}
}

2

Junior,

It’s no mystery why no one has responded to your post for six hours. Most of the folks on here are busy with coding projects, and this is a lot of code to sift through.

To select all in a checkbox group, something like this would do the job:

export function SelectAll(){
  // number of items in checkbox group
  let totalItems = $w("'#checkGFirm').options.length;
  // initiate a newIndices array to hold all indices
  let newIndices = [];
  for (var i = 0; i < totalItems; i++) {
     newIndices.push(i); 
  }
  console.log(newIndices);
  $w('#checkGFirm').selectedIndices = newIndices;
}
3

Hello Anthonyb,
Thank you so much. Your code is working perfectly. Please another question, can you share with me the code to add "Clear all’ button for $w( "’ #checkGFirm ’ ) and $w( ’ #checkGProd ’ ) ?

Best regards.

4

Junior, assigning an empty array to the selectedIndices property will accomplish that:

$w('#checkGFirm').selectedIndices = [];
$w('#checkGProd').selectedIndices = [];
5

Thank you Anthony, I have used the above formula while adding concatenation to get the results I have wanted as seen in the below code. However it seems that when clicking on the “Clear Button” the page is recharging as data from store disapeared (view screenschots attached).

export function button1_click(event) {
//Add your code for this event here:
let totalItems = $w( ‘#checkGFirm’ + ", " + ‘#checkGProd’ ).options.length;
// initiate a newIndices array to hold all indices
let newIndices = ;
for ( var i = 0 ; i < totalItems; i++) {
newIndices.push(i);
}
console.log(newIndices);
$w( ‘#checkGFirm’ ).selectedIndices = ;
$w( ‘#checkGProd’ ).selectedIndices = ;
}

6

Sorry, Junior. There’s too much I don’t know about what you’re trying to accomplish. Are these checkbox groups highlighted? What are their names so that I can relate them back to the code above? Where it says “undefined”, what did it say prior to button1 being clicked?

7

Hi Anthony,

Do not take into consideration “undefined” this is not an issue for. Checkboxes highlighted are related to $w( ’ #checkGProd ’ ) while what is above are related to $w( ’ #checkGFirm ’ ).
So when I entered the “clear all” function, Information on Checkboxes related to CheckGProd disapeared while information related to CheckGFrirm are still there.
My checkboxes are related to my stores database.

Also, prior to button1 being clicked, information from my store related to CheckGPRod are visible.

8

I Have Dropdown fields to so i added this

function resetForm () {
const inputList = $w ( ‘TextInput’ );
const dropdown = $w ( ‘Dropdown’ );
inputList . forEach ( element => {
element . value = ‘’ ;
});
dropdown . forEach ( element => {
element . value = ‘’ ;
});
}

An it now clears the dropdown fields also with the text fields.