import * as React from 'react';
import {Button, Checkbox, Grid, Switch, TextField} from "@mui/material";
import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import {SetCount} from "../../components/SetCount";
import {connect} from "react-redux";
import {actionCategoryCount, actionCategoryUpsert, actionFullRootCats} from "../../actions/ActionCategory";
import {actionAllGoodFind} from "../../actions/ActionGoodFind";
import { enableRipple } from '@syncfusion/ej2-base';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import {useEffect, useState} from "react";
enableRipple(true);
const InputCategory = ({goods, setArray, countSubCat}) => {
const [name, setName] = useState('');
const [products, setProducts] = useState([]);
const [addSub, setAddSub] = useState(false);
const [subArray, setSubArray] = useState([]);
const [checked, setChecked] = useState(false);
const handleChange = (event) => {
setChecked(event.target.checked);
if (!checked){
setArray([{"name": name, "goods": products, "subcategory": subArray}])
}
};
return (
<>
{setName(e.target.value); setChecked(false)}}/>
{goods?.payload &&
{
setProducts([newValue]);
setChecked(false)
}}
getOptionLabel={(option) => option?.name || 'no name'}
key={option => option?.id}
renderInput={(params) => (
)}
/>
}
{countSubCat < 2 &&
Add subcategories
{setAddSub(!addSub); setChecked(false)}}/>
}
{addSub && setSubArray(value)} addCategory={true} countSubCat={countSubCat+1}/>}
>
)
}
const AddCategory = ({goods, setArray, addCategory, countSubCat}) => {
const [name, setName] = useState('');
const [products, setProducts] = useState([]);
const [addSub, setAddSub] = useState(false);
const [subArray, setSubArray] = useState([]);
const [addCat, setAddCat] = useState(false);
const [catCount, setCatCount] = useState(0);
const [subCat, setSubCat] = useState([]);
useEffect(() => {
setArray([{"name": name, "goods": products, "subcategory": subArray}, {...subCat}])
}, [name, products, subArray, subCat])
console.log(subCat)
return (
setName(e.target.value)}/>
{goods?.payload &&
{
setProducts([newValue]);
}}
getOptionLabel={(option) => option?.name || 'no name'}
key={option => option?.id}
renderInput={(params) => (
)}
/>
}
{countSubCat < 2 &&
Add subcategories
setAddSub(!addSub)}/>
}
{addCategory &&
Add categories
{setAddCat(!addCat); setCatCount(0)}}/>
}
{addCat && setCatCount(value)}/>}
{addSub && setSubArray(value)} addCategory={true} countSubCat={countSubCat+1}/>}
{catCount >= 1 && new Array(catCount).fill(0).map(item => {
return setSubCat([...subCat, value])} countSubCat={countSubCat}/>
})
}
)
}
const CategoryEdit = ({category, categoryCount, goods, variant='create', actionRootCat, getCountCategory, getGoodFind, onCreateCategory}) => {
const [array, setArray] = useState([])
useEffect(() => {
if(!goods) getGoodFind()
if(!category) actionRootCat()
if(!categoryCount) getCountCategory()
}, [actionRootCat, category, categoryCount, getCountCategory, getGoodFind, goods])
return(
<>
Total category: {categoryCount?.payload || 0}
setArray(value)} countSubCat={0}/>
>
)
}
export const CCategoryEdit = connect(state => ({category: state.category, categoryCount: state.promise['categoryCount'], goods: state.promise['goodAllFind'] }), {actionRootCat: actionFullRootCats, getCountCategory: actionCategoryCount, getGoodFind: actionAllGoodFind, onCreateCategory: actionCategoryUpsert})(CategoryEdit)
export class CCategoryEditTree extends React.Component {
constructor() {
super(...arguments);
this.productTeam = [
{
id: 1, name: 'ASP.NET MVC Team', expanded: true,
child: [
{ id: 2, pid: 1, name: 'Smith', isSelected: true },
{ id: 3, pid: 1, name: 'Johnson', isSelected: true },
{ id: 4, pid: 1, name: 'Anderson' },
]
},
{
id: 5, name: 'Windows Team',
child: [
{ id: 6, pid: 5, name: 'Clark' },
{ id: 7, pid: 5, name: 'Wright' },
{ id: 8, pid: 5, name: 'Lopez' },
]
},
{
id: 9, name: 'Web Team',
child: [
{ id: 11, pid: 9, name: 'Joshua' },
{ id: 12, pid: 9, name: 'Matthew' },
{ id: 13, pid: 9, name: 'David' },
]
},
{
id: 14, name: 'Build Team',
child: [
{ id: 15, pid: 14, name: 'Ryan' },
{ id: 16, pid: 14, name: 'Justin' },
{ id: 17, pid: 14, name: 'Robert' },
]
},
{
id: 18, name: 'WPF Team',
child: [
{ id: 19, pid: 18, name: 'Brown' },
{ id: 20, pid: 18, name: 'Johnson' },
{ id: 21, pid: 18, name: 'Miller' },
]
}
];
this.fields = { dataSource: this.productTeam, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' };
this.allowDragAndDrop = true;
this.allowMultiSelection = true;
}
render() {
return (
);
}
}