123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- import {useEffect, useState} 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";
- 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 (
- <>
- <Grid container justifyContent='space-between'>
- <Grid item xs={5}>
- <TextField fullWidth id="filled-basic" label="Title category" variant="standard" value={name} onChange={e => {setName(e.target.value); setChecked(false)}}/>
- </Grid>
- <Grid item xs={5}>
- {goods?.payload &&
- <Autocomplete
- multiple
- id="tags-standard"
- options={goods.payload}
- onChange={(event, newValue) => {
- setProducts([newValue]);
- setChecked(false)
- }}
- getOptionLabel={(option) => option?.name || 'no name'}
- key={option => option?.id}
- renderInput={(params) => (
- <TextField
- {...params}
- variant="standard"
- label="Select goods"
- placeholder="goods"
- />
- )}
- />
- }
- </Grid>
- <Grid item xs={1} display='flex' justifyContent='center' alignItems='flex-end'>
- <Checkbox
- checked={checked}
- onChange={handleChange}
- inputProps={{ 'aria-label': 'controlled' }}
- />
- </Grid>
- </Grid>
- <Grid container justifyContent='space-between' marginTop='30px' marginBottom='10px'>
- <Grid item xs={5.5}>
- {countSubCat < 2 &&
- <Box display='flex' alignItems='center'>
- <Typography color='#616161'>Add subcategories</Typography>
- <Switch onChange={() => {setAddSub(!addSub); setChecked(false)}}/>
- </Box>
- }
- </Grid>
- </Grid>
- {addSub && <AddCategory goods={goods} setArray={value => 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 (
- <Box sx={{border: '1px dashed #616161', borderRadius: '20px', padding: '20px'}}>
- <Grid container justifyContent='space-between'>
- <Grid item xs={5.5}>
- <TextField fullWidth id="filled-basic" label="Title category" variant="standard" value={name} onChange={e => setName(e.target.value)}/>
- </Grid>
- <Grid item xs={5.5}>
- {goods?.payload &&
- <Autocomplete
- multiple
- id="tags-standard"
- options={goods.payload}
- onChange={(event, newValue) => {
- setProducts([newValue]);
- }}
- getOptionLabel={(option) => option?.name || 'no name'}
- key={option => option?.id}
- renderInput={(params) => (
- <TextField
- {...params}
- variant="standard"
- label="Select goods"
- placeholder="goods"
- />
- )}
- />
- }
- </Grid>
- </Grid>
- <Grid container justifyContent='space-between' marginTop='30px' marginBottom='10px'>
- <Grid item xs={5.5}>
- {countSubCat < 2 &&
- <Box display='flex' alignItems='center'>
- <Typography color='#616161'>Add subcategories</Typography>
- <Switch onChange={() => setAddSub(!addSub)}/>
- </Box>
- }
- </Grid>
- <Grid item xs={5.5} display='flex' justifyContent='space-between' alignItems='center'>
- {addCategory &&
- <Box display='flex' alignItems='center'>
- <Typography color='#616161'>Add categories</Typography>
- <Switch onChange={() => {setAddCat(!addCat); setCatCount(0)}}/>
- </Box>
- }
- {addCat && <SetCount defaultValue={1} width={40} height={40} onCount={value => setCatCount(value)}/>}
- </Grid>
- </Grid>
- {addSub && <AddCategory goods={goods} setArray={value => setSubArray(value)} addCategory={true} countSubCat={countSubCat+1}/>}
- {catCount >= 1 && new Array(catCount).fill(0).map(item => {
- return <InputCategory goods={goods} setArray={value => setSubCat([...subCat, value])} countSubCat={countSubCat}/>
- })
- }
- </Box>
- )
- }
- 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(
- <>
- <Typography variant='h6' letterSpacing='2px' marginBottom='20px'>Total category: {categoryCount?.payload || 0}</Typography>
- <AddCategory goods={goods} setArray={value => setArray(value)} countSubCat={0}/>
- <Grid container justifyContent='center' marginTop='30px'>
- <Grid item xs={4}>
- <Button disabled={array.length === 0} fullWidth variant="outlined" onClick={() => onCreateCategory(array)}>
- Save
- </Button>
- </Grid>
- </Grid>
- </>
- )
- }
- 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)
|