import React, { useEffect, useState, useMemo } from "react"; import { Container, Dropdown, Nav, Row, Card, Col, Accordion, } from "react-bootstrap"; // RangeSlider import Nouislider from "nouislider-react"; import "nouislider/distribute/nouislider.css"; import DeleteModal from "../../../Components/Common/DeleteModal"; import BreadCrumb from "../../../Components/Common/BreadCrumb"; import TableContainer from "../../../Components/Common/TableContainer"; import { Rating, Published, Price } from "./EcommerceProductCol"; //Import data import { productsData } from "../../../common/data"; import { isEmpty } from "lodash"; import Select from "react-select"; //redux import { useSelector, useDispatch } from "react-redux"; import { toast, ToastContainer } from "react-toastify"; import { createSelector } from "reselect"; import { onGetProducts, ondeleteProducts } from "../../../slices/thunk"; import { Head, Link } from "@inertiajs/react"; import Layout from "../../../Layouts"; const SingleOptions = [ { value: 'Watches', label: 'Watches' }, { value: 'Headset', label: 'Headset' }, { value: 'Sweatshirt', label: 'Sweatshirt' }, { value: '20% off', label: '20% off' }, { value: '4 star', label: '4 star' }, ]; const EcommerceProducts = (props: any) => { const dispatch: any = useDispatch(); const selectecomproductData = createSelector( (state: any) => state.Ecommerce, (products: any) => products.products ); // Inside your component const products: any = useSelector(selectecomproductData); const [productList, setProductList] = useState([]); const [activeTab, setActiveTab] = useState("1"); const [selectedMulti, setselectedMulti] = useState(null); const [product, setProduct] = useState(null); function handleMulti(selectedMulti: any) { setselectedMulti(selectedMulti); } useEffect(() => { if (products && !products.length) { dispatch(onGetProducts()); } }, [dispatch, products]); useEffect(() => { setProductList(products); }, [products]); useEffect(() => { if (!isEmpty(products)) setProductList(products); }, [products]); const toggleTab = (tab: any, type: any) => { if (activeTab !== tab) { setActiveTab(tab); let filteredProducts = products; if (type !== "all") { filteredProducts = products.filter((product: any) => product.status === type); } setProductList(filteredProducts); } }; const [cate, setCate] = useState("all"); const categories = (category: any) => { let filteredProducts = products; if (category !== "all") { filteredProducts = products.filter((product: any) => product.category === category); } setProductList(filteredProducts); setCate(category); }; const [mincost, setMincost] = useState(0); const [maxcost, setMaxcost] = useState(500); useEffect(() => { onUpDate([mincost, maxcost]); }, [mincost, maxcost]); const onUpDate = (value: any) => { setProductList( productsData.filter( (product: any) => product.price >= value[0] && product.price <= value[1] ) ) setMincost(value[0]); setMaxcost(value[1]); }; const [ratingvalues, setRatingvalues] = useState([]); /* on change rating checkbox method */ const onChangeRating = (value: any) => { setProductList(productsData.filter((product: any) => product.rating >= value)); // var modifiedRating = [...ratingvalues]; // modifiedRating.push(value); // setRatingvalues(modifiedRating); }; const onUncheckMark = (value: any) => { var modifiedRating = [...ratingvalues]; const modifiedData = (modifiedRating || []).filter(x => x !== value); /* find min values */ var filteredProducts = productsData; if (modifiedData && modifiedData.length && value !== 1) { var minValue = Math.min(...modifiedData); if (minValue && minValue !== Infinity) { filteredProducts = productsData.filter( (product: any) => product.rating >= minValue ); setRatingvalues(modifiedData); } } else { filteredProducts = productsData; } setProductList(filteredProducts); }; //delete order const [deleteModal, setDeleteModal] = useState(false); const [deleteModalMulti, setDeleteModalMulti] = useState(false); const onClickDelete = (product: any) => { setProduct(product); setDeleteModal(true); }; const handleDeleteProduct = () => { if (product) { dispatch(ondeleteProducts(product.id)); setDeleteModal(false); } }; const [dele, setDele] = useState(0); // Displat Delete Button const displayDelete = () => { const ele = document.querySelectorAll(".productCheckBox:checked"); const del = document.getElementById("selection-element") as HTMLElement; setDele(ele.length); if (ele.length === 0) { del.style.display = 'none'; } else { del.style.display = 'block'; } }; // Delete Multiple const deleteMultiple = () => { const ele = document.querySelectorAll(".productCheckBox:checked"); const del = document.getElementById("selection-element") as HTMLElement; ele.forEach((element: any) => { dispatch(ondeleteProducts(element.value)); setTimeout(() => { toast.clearWaitingQueue(); }, 3000); del.style.display = 'none'; }); }; const columns = useMemo(() => [ { header: "#", cell: (cell: any) => { return displayDelete()} />; }, }, { header: "Product", cell: (product: any) => ( <>
{" "} {product.getValue()}

Category :{" "} {" "} {product.row.original.category}

), }, { header: "Stock", accessorKey: "stock", enableColumnFilter: false, }, { header: "Price", accessorKey: "price", enableColumnFilter: false, cell: (cellProps: any) => { return ; }, }, { header: "Orders", accessorKey: "orders", enableColumnFilter: false, }, { header: "Rating", accessorKey: "rating", enableColumnFilter: false, cell: (cellProps: any) => { return ; }, }, { header: "Published", accessorKey: "publishedDate", enableColumnFilter: false, cell: (cellProps: any) => { return ; }, }, { header: "Action", cell: (cellProps: any) => { return ( {" "} View {" "} Edit { const productData = cellProps.row.original; onClickDelete(productData); }} > {" "} Delete ); }, }, ], [] ); return (
setDeleteModal(false)} /> { deleteMultiple(); setDeleteModalMulti(false); }} onCloseClick={() => setDeleteModalMulti(false)} />
Filters
Clear All
setMincost(e.target.value)} id="minCost" readOnly /> to setMaxcost(e.target.value)} id="maxCost" readOnly />
Brands {" "} 2
Discount {" "} 1
Rating {" "} 1
{ if (e.target.checked) { onChangeRating(4); } else { onUncheckMark(4); } }} />
{ if (e.target.checked) { onChangeRating(3); } else { onUncheckMark(3); } }} />
{ if (e.target.checked) { onChangeRating(1); } else { onUncheckMark(1); } }} />
Select{" "}
{dele}
{" "} Result{" "}
{productList && productList.length > 0 ? ( ) : (
Sorry! No Result Found
)}
); }; EcommerceProducts.layout = (page: any) => export default EcommerceProducts;