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

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

@ -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>

@ -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