775 lines
22 KiB
JavaScript
775 lines
22 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: Ecommerce product list Js File
|
|
*/
|
|
|
|
|
|
|
|
// table-product-list-all
|
|
var productListAllData = [
|
|
{
|
|
"id": 1,
|
|
"product": {
|
|
"img": "build/images/products/img-1.png",
|
|
"title": "Half Sleeve Round Neck T-Shirts",
|
|
"category": "Fashion"
|
|
},
|
|
"stock": "12",
|
|
"price": "215.00",
|
|
"orders": "48",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "12 Oct, 2021",
|
|
"publishTime": "10:05 AM",
|
|
}
|
|
},
|
|
{
|
|
"id": 2,
|
|
"product": {
|
|
"img": "build/images/products/img-2.png",
|
|
"title": "Urban Ladder Pashe Chair",
|
|
"category": "Furniture"
|
|
},
|
|
"stock": "06",
|
|
"price": "160.00",
|
|
"orders": "30",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "06 Jan, 2021",
|
|
"publishTime": "01:31 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 3,
|
|
"product": {
|
|
"img": "build/images/products/img-3.png",
|
|
"title": "350 ml Glass Grocery Container",
|
|
"category": "Grocery"
|
|
},
|
|
"stock": "10",
|
|
"price": "125.00",
|
|
"orders": "48",
|
|
"rating": "4.5",
|
|
"published": {
|
|
"publishDate": "26 Mar, 2021",
|
|
"publishTime": "11:40 AM",
|
|
}
|
|
},
|
|
{
|
|
"id": 4,
|
|
"product": {
|
|
"img": "build/images/products/img-4.png",
|
|
"title": "Fabric Dual Tone Living Room Chair",
|
|
"category": "Furniture"
|
|
},
|
|
"stock": "15",
|
|
"price": "340.00",
|
|
"orders": "40",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "19 Apr, 2021",
|
|
"publishTime": "02:51 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 5,
|
|
"product": {
|
|
"img": "build/images/products/img-5.png",
|
|
"title": "Crux Motorsports Helmet",
|
|
"category": "Automotive Accessories"
|
|
},
|
|
"stock": "08",
|
|
"price": "175.00",
|
|
"orders": "55",
|
|
"rating": "4.4",
|
|
"published": {
|
|
"publishDate": "30 Mar, 2021",
|
|
"publishTime": "09:42 AM",
|
|
}
|
|
},
|
|
{
|
|
"id": 6,
|
|
"product": {
|
|
"img": "build/images/products/img-6.png",
|
|
"title": "Half Sleeve T-Shirts (Blue)",
|
|
"category": "Fashion"
|
|
},
|
|
"stock": "15",
|
|
"price": "225.00",
|
|
"orders": "48",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "12 Oct, 2021",
|
|
"publishTime": "04:55 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 7,
|
|
"product": {
|
|
"img": "build/images/products/img-7.png",
|
|
"title": "Noise Evolve Smartwatch",
|
|
"category": "Watches"
|
|
},
|
|
"stock": "12",
|
|
"price": "105.00",
|
|
"orders": "45",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "15 May, 2021",
|
|
"publishTime": "03:40 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 8,
|
|
"product": {
|
|
"img": "build/images/products/img-8.png",
|
|
"title": "Sweatshirt for Men (Pink)",
|
|
"category": "Fashion"
|
|
},
|
|
"stock": "20",
|
|
"price": "120.00",
|
|
"orders": "48",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "21 Jun, 2021",
|
|
"publishTime": "12:18 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 9,
|
|
"product": {
|
|
"img": "build/images/products/img-9.png",
|
|
"title": "Reusable Ecological Coffee Cup",
|
|
"category": "Grocery"
|
|
},
|
|
"stock": "14",
|
|
"price": "325.00",
|
|
"orders": "55",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "15 Jan, 2021",
|
|
"publishTime": "10:29 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 10,
|
|
"product": {
|
|
"img": "build/images/products/img-10.png",
|
|
"title": "Travel Carrying Pouch Bag",
|
|
"category": "Kids"
|
|
},
|
|
"stock": "20",
|
|
"price": "180.00",
|
|
"orders": "60",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "15 Jun, 2021",
|
|
"publishTime": "03:51 PM",
|
|
}
|
|
},
|
|
{
|
|
"id": 11,
|
|
"product": {
|
|
"img": "build/images/products/img-1.png",
|
|
"title": "Half Sleeve Round Neck T-Shirts",
|
|
"category": "Fashion"
|
|
},
|
|
"stock": "12",
|
|
"price": "215.00",
|
|
"orders": "48",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "12 Oct, 2021",
|
|
"publishTime": "10:05 AM",
|
|
}
|
|
},
|
|
{
|
|
"id": 12,
|
|
"product": {
|
|
"img": "build/images/products/img-2.png",
|
|
"title": "Urban Ladder Pashe Chair",
|
|
"category": "Furniture"
|
|
},
|
|
"stock": "06",
|
|
"price": "160.00",
|
|
"orders": "30",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "06 Jan, 2021",
|
|
"publishTime": "01:31 PM",
|
|
}
|
|
}
|
|
];
|
|
|
|
var inputValueJson = sessionStorage.getItem('inputValue');
|
|
if (inputValueJson) {
|
|
inputValueJson = JSON.parse(inputValueJson);
|
|
Array.from(inputValueJson).forEach(element => {
|
|
productListAllData.unshift(element);
|
|
});
|
|
}
|
|
|
|
var editinputValueJson = sessionStorage.getItem('editInputValue');
|
|
if(editinputValueJson){
|
|
editinputValueJson = JSON.parse(editinputValueJson);
|
|
productListAllData = productListAllData.map(function (item) {
|
|
if (item.id == editinputValueJson.id) {
|
|
return editinputValueJson;
|
|
}
|
|
return item;
|
|
});
|
|
}
|
|
document.getElementById("addproduct-btn").addEventListener("click", function(){
|
|
sessionStorage.setItem('editInputValue',"")
|
|
})
|
|
|
|
var productListAll = new gridjs.Grid({
|
|
columns:
|
|
[
|
|
{
|
|
name: '#',
|
|
width: '40px',
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
data: (function (row) {
|
|
return gridjs.html('<div class="form-check checkbox-product-list">\
|
|
<input class="form-check-input" type="checkbox" value="'+ row.id + '" id="checkbox-' + row.id + '">\
|
|
<label class="form-check-label" for="checkbox-'+ row.id + '"></label>\
|
|
</div>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Product',
|
|
width: '360px',
|
|
data: (function (row) {
|
|
return gridjs.html('<div class="d-flex align-items-center">' +
|
|
'<div class="flex-shrink-0 me-3">' +
|
|
'<div class="avatar-sm bg-light rounded p-1"><img src="' + row.product.img + '" alt="" class="img-fluid d-block"></div>' +
|
|
'</div>' +
|
|
'<div class="flex-grow-1">' +
|
|
'<h5 class="fs-14 mb-1"><a href="apps-ecommerce-product-details" class="text-body">' + row.product.title + '</a></h5>' +
|
|
'<p class="text-muted mb-0">Category : <span class="fw-medium">' + row.product.category + '</span></p>' +
|
|
'</div>' +
|
|
'</div>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Stock',
|
|
width: '94px',
|
|
},
|
|
{
|
|
name: 'Price',
|
|
width: '101px',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('$' + cell);
|
|
})
|
|
},
|
|
{
|
|
name: 'Orders',
|
|
width: '84px',
|
|
},
|
|
{
|
|
name: 'Rating',
|
|
width: '105px',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>' + cell + '</span></td>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Published',
|
|
width: '220px',
|
|
data: (function (row) {
|
|
return gridjs.html(row.published.publishDate + '<small class="text-muted ms-1">' + row.published.publishTime + '</small>');
|
|
})
|
|
},
|
|
{
|
|
name: "Action",
|
|
width: '80px',
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
formatter: (function (cell, row) {
|
|
var x = new DOMParser().parseFromString(row._cells[0].data.props.content, "text/html").body.querySelector(".checkbox-product-list .form-check-input").value
|
|
return gridjs.html('<div class="dropdown">' +
|
|
'<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
|
|
'<i class="ri-more-fill"></i>' +
|
|
'</button>' +
|
|
'<ul class="dropdown-menu dropdown-menu-end">' +
|
|
'<li><a class="dropdown-item" href="apps-ecommerce-product-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>' +
|
|
'<li><a class="dropdown-item edit-list" data-edit-id=' + x + ' href="apps-ecommerce-add-product"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>' +
|
|
'<li class="dropdown-divider"></li>' +
|
|
'<li><a class="dropdown-item remove-list" href="#" data-id=' + x + ' data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>' +
|
|
'</ul>' +
|
|
'</div>');
|
|
})
|
|
}
|
|
],
|
|
className: {
|
|
th: 'text-muted',
|
|
},
|
|
pagination: {
|
|
limit: 10
|
|
},
|
|
sort: true,
|
|
data: productListAllData
|
|
}).render(document.getElementById("table-product-list-all"));
|
|
|
|
// table-product-list-published
|
|
var productListPublishedData = [
|
|
{
|
|
"id": 1,
|
|
"product": {
|
|
"img": "build/images/products/img-2.png",
|
|
"title": "Urban Ladder Pashe Chair",
|
|
"category": "Furniture"
|
|
},
|
|
"stock": "06",
|
|
"price": "160.00",
|
|
"orders": "30",
|
|
"rating": "4.3",
|
|
"published": {
|
|
"publishDate": "06 Jan, 2021",
|
|
"publishTime": "01:31 PM",
|
|
}
|
|
},{
|
|
"id": 2,
|
|
"product": {
|
|
"img": "build/images/products/img-6.png",
|
|
"title": "Half Sleeve T-Shirts (Blue)",
|
|
"category": "Fashion"
|
|
},
|
|
"stock": "15",
|
|
"price": "125.00",
|
|
"orders": "48",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "12 Oct, 2021",
|
|
"publishTime": "04:55 PM",
|
|
}
|
|
},{
|
|
"id": 3,
|
|
"product": {
|
|
"img": "build/images/products/img-4.png",
|
|
"title": "Fabric Dual Tone Living Room Chair",
|
|
"category": "Furniture"
|
|
},
|
|
"stock": "15",
|
|
"price": "140.00",
|
|
"orders": "40",
|
|
"rating": "4.2",
|
|
"published": {
|
|
"publishDate": "19 Apr, 2021",
|
|
"publishTime": "02:51 PM",
|
|
}
|
|
},{
|
|
"id": 4,
|
|
"product": {
|
|
"img": "build/images/products/img-4.png",
|
|
"title": "350 ml Glass Grocery Container",
|
|
"category": "Grocery"
|
|
},
|
|
"stock": "10",
|
|
"price": "125.00",
|
|
"orders": "48",
|
|
"rating": "4.5",
|
|
"published": {
|
|
"publishDate": "26 Mar, 2021",
|
|
"publishTime": "11:40 AM",
|
|
}
|
|
},{
|
|
"id": 5,
|
|
"product": {
|
|
"img": "build/images/products/img-5.png",
|
|
"title": "Crux Motorsports Helmet",
|
|
"category": "Automotive Accessories"
|
|
},
|
|
"stock": "08",
|
|
"price": "135.00",
|
|
"orders": "55",
|
|
"rating": "4.4",
|
|
"published": {
|
|
"publishDate": "30 Mar, 2021",
|
|
"publishTime": "09:42 AM",
|
|
}
|
|
}
|
|
]
|
|
|
|
var productListPublished = new gridjs.Grid({
|
|
columns:
|
|
[
|
|
{
|
|
name: '#',
|
|
width: '40px',
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<div class="form-check checkbox-product-list">\
|
|
<input class="form-check-input" type="checkbox" value="'+ cell + '" id="checkboxpublished-' + cell + '">\
|
|
<label class="form-check-label" for="checkbox-'+ cell + '"></label>\
|
|
</div>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Product',
|
|
width: '360px',
|
|
data: (function (row) {
|
|
return gridjs.html('<div class="d-flex align-items-center">' +
|
|
'<div class="flex-shrink-0 me-3">' +
|
|
'<div class="avatar-sm bg-light rounded p-1"><img src="' + row.product.img + '" alt="" class="img-fluid d-block"></div>' +
|
|
'</div>' +
|
|
'<div class="flex-grow-1">' +
|
|
'<h5 class="fs-14 mb-1"><a href="apps-ecommerce-product-details" class="text-body">' + row.product.title + '</a></h5>' +
|
|
'<p class="text-muted mb-0">Category : <span class="fw-medium">' + row.product.category + '</span></p>' +
|
|
'</div>' +
|
|
'</div>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Stock',
|
|
width: '94px',
|
|
},
|
|
{
|
|
name: 'Price',
|
|
width: '101px',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('$' + cell);
|
|
})
|
|
},
|
|
{
|
|
name: 'Orders',
|
|
width: '84px',
|
|
},
|
|
{
|
|
name: 'Rating',
|
|
width: '105px',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>' + cell + '</span></td>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Published',
|
|
width: '220px',
|
|
data: (function (row) {
|
|
return gridjs.html(row.published.publishDate + '<small class="text-muted ms-1">' + row.published.publishTime + '</small>');
|
|
})
|
|
},
|
|
{
|
|
name: "Action",
|
|
width: '80px',
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
formatter: (function (cell, row) {
|
|
return gridjs.html('<div class="dropdown">' +
|
|
'<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
|
|
'<i class="ri-more-fill"></i>' +
|
|
'</button>' +
|
|
'<ul class="dropdown-menu dropdown-menu-end">' +
|
|
'<li><a class="dropdown-item" href="apps-ecommerce-product-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>' +
|
|
'<li><a class="dropdown-item" href="apps-ecommerce-add-product"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>' +
|
|
'<li class="dropdown-divider"></li>' +
|
|
'<li><a class="dropdown-item remove-list" href="#" data-id=' + row._cells[0].data + ' data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>' +
|
|
'</ul>' +
|
|
'</div>');
|
|
})
|
|
}
|
|
],
|
|
className: {
|
|
th: 'text-muted',
|
|
},
|
|
pagination: {
|
|
limit: 10
|
|
},
|
|
sort: true,
|
|
data: productListPublishedData
|
|
}).render(document.getElementById("table-product-list-published"));
|
|
|
|
|
|
// Search product list
|
|
var searchProductList = document.getElementById("searchProductList");
|
|
searchProductList.addEventListener("keyup", function () {
|
|
var inputVal = searchProductList.value.toLowerCase();
|
|
function filterItems(arr, query) {
|
|
return arr.filter(function (el) {
|
|
return el.product.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
|
})
|
|
}
|
|
|
|
var filterData = filterItems(productListAllData, inputVal);
|
|
var filterPublishData = filterItems(productListPublishedData, inputVal);
|
|
productListAll.updateConfig({
|
|
data: filterData
|
|
}).forceRender();
|
|
|
|
productListPublished.updateConfig({
|
|
data: filterPublishData
|
|
}).forceRender();
|
|
checkRemoveItem();
|
|
});
|
|
|
|
// mail list click event
|
|
Array.from(document.querySelectorAll('.filter-list a')).forEach(function (filteritem) {
|
|
filteritem.addEventListener("click", function () {
|
|
var filterListItem = document.querySelector(".filter-list a.active");
|
|
if (filterListItem) filterListItem.classList.remove("active");
|
|
filteritem.classList.add('active');
|
|
|
|
var filterItemValue = filteritem.querySelector(".listname").innerHTML
|
|
|
|
var filterData = productListAllData.filter(filterlist => filterlist.product.category === filterItemValue);
|
|
var filterPublishedData = productListPublishedData.filter(filterlist => filterlist.product.category === filterItemValue);
|
|
|
|
productListAll.updateConfig({
|
|
data: filterData
|
|
}).forceRender();
|
|
|
|
productListPublished.updateConfig({
|
|
data: filterPublishedData
|
|
}).forceRender();
|
|
|
|
checkRemoveItem();
|
|
});
|
|
})
|
|
|
|
// price range slider
|
|
var slider = document.getElementById('product-price-range');
|
|
|
|
noUiSlider.create(slider, {
|
|
start: [0, 2000], // Handle start position
|
|
step: 10, // Slider moves in increments of '10'
|
|
margin: 20, // Handles must be more than '20' apart
|
|
connect: true, // Display a colored bar between the handles
|
|
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
|
|
range: { // Slider can select '0' to '100'
|
|
'min': 0,
|
|
'max': 2000
|
|
},
|
|
format: wNumb({ decimals: 0, prefix: '$ ' })
|
|
});
|
|
|
|
var minCostInput = document.getElementById('minCost'),
|
|
maxCostInput = document.getElementById('maxCost');
|
|
|
|
var filterDataAll = '';
|
|
var filterDataPublished = '';
|
|
|
|
// When the slider value changes, update the input and span
|
|
slider.noUiSlider.on('update', function (values, handle) {
|
|
var productListupdatedAll = productListAllData;
|
|
var productListupdatedPublished = productListPublishedData;
|
|
if (handle) {
|
|
maxCostInput.value = values[handle];
|
|
|
|
} else {
|
|
minCostInput.value = values[handle];
|
|
}
|
|
|
|
var maxvalue = maxCostInput.value.substr(2);
|
|
var minvalue = minCostInput.value.substr(2);
|
|
filterDataAll = productListupdatedAll.filter(
|
|
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
|
|
);
|
|
filterDataPublished = productListupdatedPublished.filter(
|
|
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
|
|
);
|
|
productListAll.updateConfig({
|
|
data: filterDataAll
|
|
}).forceRender();
|
|
productListPublished.updateConfig({
|
|
data: filterDataPublished
|
|
}).forceRender();
|
|
checkRemoveItem();
|
|
});
|
|
|
|
|
|
minCostInput.addEventListener('change', function () {
|
|
slider.noUiSlider.set([null, this.value]);
|
|
});
|
|
|
|
maxCostInput.addEventListener('change', function () {
|
|
slider.noUiSlider.set([null, this.value]);
|
|
});
|
|
|
|
// text inputs example
|
|
var filterChoicesInput = new Choices(
|
|
document.getElementById('filter-choices-input'),
|
|
{
|
|
addItems: true,
|
|
delimiter: ',',
|
|
editItems: true,
|
|
maxItemCount: 10,
|
|
removeItems: true,
|
|
removeItemButton: true,
|
|
}
|
|
)
|
|
|
|
// sidebar filter check
|
|
Array.from(document.querySelectorAll(".filter-accordion .accordion-item")).forEach(function (item) {
|
|
var isFilterSelected = item.querySelectorAll(".filter-check .form-check .form-check-input:checked").length;
|
|
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
|
Array.from(item.querySelectorAll(".form-check .form-check-input")).forEach(function (subitem) {
|
|
var checkElm = subitem.value;
|
|
if (subitem.checked) {
|
|
filterChoicesInput.setValue([checkElm]);
|
|
}
|
|
subitem.addEventListener("click", function (event) {
|
|
if (subitem.checked) {
|
|
isFilterSelected++;
|
|
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
|
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
|
filterChoicesInput.setValue([checkElm]);
|
|
|
|
} else {
|
|
filterChoicesInput.removeActiveItemsByValue(checkElm);
|
|
}
|
|
});
|
|
filterChoicesInput.passedElement.element.addEventListener('removeItem', function (event) {
|
|
if (event.detail.value == checkElm) {
|
|
subitem.checked = false;
|
|
isFilterSelected--;
|
|
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
|
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
|
}
|
|
}, false);
|
|
// clearall
|
|
document.getElementById("clearall").addEventListener("click", function () {
|
|
subitem.checked = false;
|
|
filterChoicesInput.removeActiveItemsByValue(checkElm);
|
|
isFilterSelected = 0;
|
|
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
|
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
|
productListAll.updateConfig({
|
|
data: productListAllData
|
|
}).forceRender();
|
|
|
|
productListPublished.updateConfig({
|
|
data: productListPublishedData
|
|
}).forceRender();
|
|
});
|
|
});
|
|
});
|
|
|
|
// Search Brands Options
|
|
var searchBrandsOptions = document.getElementById("searchBrandsList");
|
|
searchBrandsOptions.addEventListener("keyup", function () {
|
|
var inputVal = searchBrandsOptions.value.toLowerCase();
|
|
var searchItem = document.querySelectorAll("#flush-collapseBrands .form-check");
|
|
Array.from(searchItem).forEach(function (elem) {
|
|
var searchBrandsTxt = elem.getElementsByClassName("form-check-label")[0].innerText.toLowerCase();
|
|
elem.style.display = searchBrandsTxt.includes(inputVal) ? "block" : "none";
|
|
})
|
|
});
|
|
|
|
// table select to remove
|
|
// checkbox-wrapper
|
|
var isSelected = 0;
|
|
function checkRemoveItem() {
|
|
var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]');
|
|
Array.from(tabEl).forEach(function (el) {
|
|
el.addEventListener('show.bs.tab', function (event) {
|
|
isSelected = 0;
|
|
document.getElementById("selection-element").style.display = 'none';
|
|
});
|
|
});
|
|
setTimeout(function () {
|
|
Array.from(document.querySelectorAll(".checkbox-product-list input")).forEach(function (item) {
|
|
item.addEventListener('click', function (event) {
|
|
if (event.target.checked == true) {
|
|
event.target.closest('tr').classList.add("gridjs-tr-selected");
|
|
} else {
|
|
event.target.closest('tr').classList.remove("gridjs-tr-selected");
|
|
}
|
|
|
|
var checkboxes = document.querySelectorAll('.checkbox-product-list input:checked');
|
|
isSelected = checkboxes.length;
|
|
|
|
if (event.target.closest('tr').classList.contains("gridjs-tr-selected")) {
|
|
document.getElementById("select-content").innerHTML = isSelected;
|
|
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
|
|
} else {
|
|
|
|
document.getElementById("select-content").innerHTML = isSelected;
|
|
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
removeItems();
|
|
removeSingleItem();
|
|
}, 100);
|
|
}
|
|
|
|
|
|
// check to remove item
|
|
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
|
function removeItems() {
|
|
var removeItem = document.getElementById('removeItemModal');
|
|
removeItem.addEventListener('show.bs.modal', function (event) {
|
|
isSelected = 0;
|
|
document.getElementById("delete-product").addEventListener("click", function () {
|
|
Array.from(document.querySelectorAll(".gridjs-table tr")).forEach(function (element) {
|
|
var filtered = '';
|
|
if (element.classList.contains("gridjs-tr-selected")) {
|
|
var getid = element.querySelector('.form-check-input').value;
|
|
function arrayRemove(arr, value) {
|
|
return arr.filter(function (ele) {
|
|
return ele.id != value;
|
|
});
|
|
}
|
|
var filtered = arrayRemove(productListAllData, getid);
|
|
var filteredPublished = arrayRemove(productListPublishedData, getid);
|
|
productListAllData = filtered;
|
|
productListPublishedData = filteredPublished;
|
|
element.remove();
|
|
}
|
|
});
|
|
document.getElementById("btn-close").click();
|
|
if (document.getElementById("selection-element"))
|
|
document.getElementById("selection-element").style.display = 'none';
|
|
|
|
checkboxes.checked = false;
|
|
});
|
|
})
|
|
}
|
|
|
|
function removeSingleItem() {
|
|
var getid = 0;
|
|
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
|
|
item.addEventListener('click', function (event) {
|
|
getid = item.getAttribute('data-id');
|
|
document.getElementById("delete-product").addEventListener("click", function () {
|
|
function arrayRemove(arr, value) {
|
|
return arr.filter(function (ele) {
|
|
return ele.id != value;
|
|
});
|
|
}
|
|
var filtered = arrayRemove(productListAllData, getid);
|
|
var filteredPublished = arrayRemove(productListPublishedData, getid);
|
|
productListAllData = filtered;
|
|
productListPublishedData = filteredPublished;
|
|
var element = item.closest(".gridjs-tr");
|
|
element.remove();
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
var getEditid = 0;
|
|
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
|
|
elem.addEventListener('click', function (event) {
|
|
getEditid = elem.getAttribute('data-edit-id');
|
|
|
|
productListAllData = productListAllData.map(function (item) {
|
|
if (item.id == getEditid) {
|
|
|
|
sessionStorage.setItem('editInputValue', JSON.stringify(item));
|
|
}
|
|
return item;
|
|
});
|
|
});
|
|
});
|
|
} |