140 lines
6.1 KiB
TypeScript
140 lines
6.1 KiB
TypeScript
import {
|
||
Box,
|
||
Button,
|
||
FormControl, FormControlLabel, Link,
|
||
Modal, Radio, RadioGroup,
|
||
SelectChangeEvent,
|
||
Typography,
|
||
useTheme
|
||
} from "@mui/material";
|
||
import * as React from "react";
|
||
import SelectableButton from "@ui_kit/SelectableButton";
|
||
import {useState} from "react";
|
||
import RadioCheck from "@ui_kit/RadioCheck";
|
||
import RadioIcon from "@ui_kit/RadioIcon";
|
||
|
||
type LogicForm = "conditions" | "results";
|
||
|
||
export default function BranchingForm() {
|
||
const theme = useTheme()
|
||
const [open, setOpen] = React.useState(false);
|
||
const handleOpen = () => setOpen(true);
|
||
const handleClose = () => setOpen(false);
|
||
const [logicForm, setLogicForm] = useState<LogicForm>("conditions");
|
||
const [display, setDisplay] = React.useState('1');
|
||
const handleChange = (event: SelectChangeEvent) => {
|
||
setDisplay(event.target.value);
|
||
}
|
||
|
||
const [value, setValue] = React.useState('1');
|
||
|
||
const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||
setValue((event.target as HTMLInputElement).value);
|
||
};
|
||
return(
|
||
<>
|
||
<Button onClick={handleOpen}>открыть</Button>
|
||
<Modal
|
||
open={open}
|
||
onClose={handleClose}
|
||
aria-labelledby="modal-modal-title"
|
||
aria-describedby="modal-modal-description"
|
||
>
|
||
<Box sx={{position: 'absolute' as 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
maxWidth: '620px',
|
||
width: '100%',
|
||
bgcolor: 'background.paper',
|
||
borderRadius: '12px',
|
||
|
||
boxShadow: 24,
|
||
p: 0,}}>
|
||
<Box
|
||
sx={{display: 'flex',
|
||
padding: '20px',
|
||
borderRadius: '12px 12px 0 0',
|
||
background: theme.palette.background.default,
|
||
}}
|
||
>
|
||
<Typography>Условия показа формы</Typography>
|
||
</Box>
|
||
<Box sx={{
|
||
padding: '20px',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
gap: '30px'
|
||
}}>
|
||
<Box sx={{
|
||
display: 'flex',
|
||
gap: '20px',
|
||
alignItems: 'center'
|
||
}}>
|
||
|
||
<Typography sx={{color: theme.palette.grey2.main}}>Логика показа форм</Typography>
|
||
</Box>
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}>
|
||
<SelectableButton isSelected={logicForm === "conditions"} onClick={() => setLogicForm("conditions")}>
|
||
От условий
|
||
</SelectableButton>
|
||
<SelectableButton isSelected={logicForm === "results"} onClick={() => setLogicForm("results")}>
|
||
С результатами
|
||
</SelectableButton>
|
||
</Box>
|
||
<Box sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'baseline',
|
||
}}>
|
||
{logicForm === 'conditions' ?
|
||
|
||
<>
|
||
<Link
|
||
component="button"
|
||
variant="body2"
|
||
sx={{color: theme.palette.brightPurple.main}}
|
||
// onClick={() => {
|
||
// }}
|
||
>
|
||
Добавить условие
|
||
</Link>
|
||
|
||
<FormControl>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
name="controlled-radio-buttons-group"
|
||
value={value}
|
||
onChange={handleChangeRadio}
|
||
>
|
||
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="1" control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>} label="Все условия обязательны" />
|
||
<FormControlLabel sx={{color: theme.palette.grey2.main}} value="2" control={<Radio checkedIcon={<RadioCheck/>} icon={<RadioIcon/>}/>} label="Обязательно хотя бы одно условие" />
|
||
</RadioGroup>
|
||
</FormControl>
|
||
</>
|
||
:
|
||
<>
|
||
<Typography>У вас пока что нет результатов.</Typography>
|
||
<Button>Добавить</Button>
|
||
</>
|
||
}
|
||
|
||
</Box>
|
||
<Box sx={{display: 'flex', justifyContent: 'end', gap: '10px'}}>
|
||
<Button
|
||
variant="outlined"
|
||
onClick={handleClose}
|
||
>Отмена</Button>
|
||
<Button
|
||
variant="contained"
|
||
>Готово</Button>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Modal>
|
||
</>
|
||
);
|
||
} |