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>
<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}>
<span>
<svg width="12px" height="10px">

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

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

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

@ -3,12 +3,12 @@ import { connect } from "react-redux";
import Checkbox from "../../../components/Checkbox";
import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
export const Sidebar = ({}) => {
export const Sidebar = ({onChange}) => {
const filteronGrade = [
{
id:0,
name: "پایه اول",
name: "اول",
expaneded: false,
subList: [{
id:1,
@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
},
{
id:1,
name: "پایه دوم",
name: "دوم",
expaneded: false,
subList: [{
id:1,
@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
},
{
id:2,
name: "پایه سوم",
name: "سوم",
expaneded: false,
subList: [],
},
@ -59,7 +59,7 @@ export const Sidebar = ({}) => {
},
]
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}/>
</div>;

Loading…
Cancel
Save