Side Bar Filtering Works But Has Errors (Not Loading The Data)

temp
Pedram Keshavarzi 3 years ago
parent 381af7f5b2
commit 50543dec50
  1. 2
      src/components/Checkbox/index.js
  2. 6
      src/components/VerticalExpandableProductFilter/index.js
  3. 96
      src/views/Product/Desktop/ProductOverAll/index.js
  4. 6
      src/views/Products/index.js
  5. 10
      src/views/Products/layouts/Sidebar.js

@ -17,7 +17,7 @@ export default function Checkbox(props) {
</svg> </svg>
<div className="checkbox-container"> <div className="checkbox-container">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} /> <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
<label className="checkbox" htmlFor={"ch"+props.name}> <label className="checkbox" htmlFor={"ch"+props.name}>
<span> <span>
<svg width="12px" height="10px"> <svg width="12px" height="10px">

@ -66,9 +66,11 @@ export default function VerticalExpandableProductFilter(props) {
<Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => { <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
checkedBox[i] = !checkedBox[i] checkedBox[i] = !checkedBox[i]
setChecked(checkedBox) setChecked(checkedBox)
}}/> props.onChange(name , item1.name);
}} />
<strong className="text-xs font-light text-gray-500"> <strong className="text-xs font-light text-gray-500">
{item1.name} {props.preName ? props.preName + ' ' + item1.name : item1.name}
</strong> </strong>
</div> </div>

@ -45,55 +45,55 @@ export const ProductOverAll = ({
{"پایه" + " " + grades[book?.gradeId]} {"پایه" + " " + grades[book?.gradeId]}
</div> </div>
<div className="flex float-left justify-end"> <div className="flex float-left justify-end">
<div className="p-2"> <div className="p-2">
<StarRating /> <StarRating />
</div>
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از 160 نفر امتیاز داده اند
</div>
</div> </div>
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
بیش از 160 نفر امتیاز داده اند
</div>
</div>
</div> </div>
<div className="py-4 border-0 border-b border-solid border-gray-100"> <div className="py-4 border-0 border-b border-solid border-gray-100">
<div className="flex items-center py-2"> <div className="flex items-center py-2">
<h1>نوع کتاب</h1> <h1>نوع کتاب</h1>
<p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p> <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
</div> </div>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<Button <Button
title="نسخه فیزیکی" title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"} active={type === "physical"}
selectable={true} selectable={true}
onClick={() => setType("physical")} onClick={() => setType("physical")}
borderType='dashed' borderType='dashed'
customStyle='' customStyle=''
twPaddings='py-4 px-12' twPaddings='py-4 px-12'
radius={false} radius={false}
/> />
<Button <Button
title="نسخه دیجیتال" title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
selectable={true} selectable={true}
active={type === "digital"} active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"} color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")} onClick={() => setType("digital")}
radius={false} radius={false}
twPaddings='py-4 px-12' twPaddings='py-4 px-12'
/> />
<Button <Button
title="مشاهده نمونه" title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"} backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
radius={false} radius={false}
twPaddings='py-4 px-6' twPaddings='py-4 px-6'
color={isDark ? "text-white" : "text-red19"} color={isDark ? "text-white" : "text-red19"}
/> />
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<h1>aopdjsoqweqweqweqweqweWajsduh</h1> <h1>aopdjsoqweqweqweqweqweWajsduh</h1>
@ -117,7 +117,7 @@ export const ProductOverAll = ({
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA"> <h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
نسخه محصول را انتخاب کنید نسخه محصول را انتخاب کنید
</h2> </h2>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<Button <Button
onClick={() => onClick={() =>
@ -146,7 +146,7 @@ export const ProductOverAll = ({
width="65%" width="65%"
color="text-white" color="text-white"
/> />
</div> </div>
<div className="w-full flex flex-row justify-between items-center mt-4"> <div className="w-full flex flex-row justify-between items-center mt-4">
<Button <Button

@ -33,6 +33,10 @@ export const Products = ({
const onChange = (name, value) => { const onChange = (name, value) => {
setFilter({ ...filter, [name]: value }); setFilter({ ...filter, [name]: value });
}; };
const onchange1 = (name, value) =>{
console.log(name)
console.log(value)
}
useEffect(() => { useEffect(() => {
getList(); getList();
@ -158,7 +162,7 @@ export const Products = ({
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`} className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
// style={{ height: 1500 }} // style={{ height: 1500 }}
> >
<Sidebar /> <Sidebar onChange={onChange}/>
<Main /> <Main />
</div> </div>
)} )}

@ -3,12 +3,12 @@ import { connect } from "react-redux";
import Checkbox from "../../../components/Checkbox"; import Checkbox from "../../../components/Checkbox";
import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter"; import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
export const Sidebar = ({}) => { export const Sidebar = ({onChange}) => {
const filteronGrade = [ const filteronGrade = [
{ {
id:0, id:0,
name: "پایه اول", name: "اول",
expaneded: false, expaneded: false,
subList: [{ subList: [{
id:1, id:1,
@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
}, },
{ {
id:1, id:1,
name: "پایه دوم", name: "دوم",
expaneded: false, expaneded: false,
subList: [{ subList: [{
id:1, id:1,
@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
}, },
{ {
id:2, id:2,
name: "پایه سوم", name: "سوم",
expaneded: false, expaneded: false,
subList: [], subList: [],
}, },
@ -59,7 +59,7 @@ export const Sidebar = ({}) => {
}, },
] ]
return <div className="flex flex-col w-1/4 p-4"> return <div className="flex flex-col w-1/4 p-4">
<VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/> <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter name="category" list={categories} title="دسته بندی" searchAble={false}/> <VerticalExpandableProductFilter name="category" list={categories} title="دسته بندی" searchAble={false}/>
</div>; </div>;

Loading…
Cancel
Save