добавить итем
This commit is contained in:
parent
1e8a50077b
commit
fbb6025512
@ -2,6 +2,7 @@ import { AuditoryItem } from "@/api/auditory";
|
||||
import CopyIcon from "@/assets/icons/CopyIcon";
|
||||
import Trash from "@/assets/icons/trash";
|
||||
import { InfoPopover } from "@/ui_kit/InfoPopover";
|
||||
import TooltipClickInfo from "@/ui_kit/Toolbars/TooltipClickInfo";
|
||||
import { useDomainDefine } from "@/utils/hooks/useDomainDefine";
|
||||
import { IconButton, ListItem, Typography, useTheme } from "@mui/material";
|
||||
|
||||
@ -42,7 +43,7 @@ export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
width: "60px",
|
||||
width: "70px",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
@ -61,7 +62,7 @@ export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => {
|
||||
}} />
|
||||
</IconButton>
|
||||
<IconButton edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}>
|
||||
<InfoPopover />
|
||||
<TooltipClickInfo title={`Пол: ${item.sex ? "мужской" : "женский"} \n Возраст: ${item.age}`} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
edge="end"
|
||||
|
||||
@ -1,19 +1,65 @@
|
||||
import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button } from "@mui/material";
|
||||
import { InfoPopover } from '@ui_kit/InfoPopover';
|
||||
import CheckboxIcon from "@icons/Checkbox";
|
||||
import { useState } from "react";
|
||||
import { useCurrentQuiz } from "@/stores/quizes/hooks";
|
||||
import { auditoryAdd } from "@/api/auditory";
|
||||
import { useSnackbar } from "notistack";
|
||||
|
||||
interface GenderAndAgeSelectorProps {
|
||||
gender: string;
|
||||
setGender: (gender: string) => void;
|
||||
handleAdd: (item: any) => void;
|
||||
}
|
||||
|
||||
|
||||
export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAgeSelectorProps) {
|
||||
export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) {
|
||||
const theme = useTheme();
|
||||
const [age, setAge] = useState<string>('');
|
||||
const [gender, setGender] = useState<string>('');
|
||||
const quiz = useCurrentQuiz();
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const isFormValid = gender && age;
|
||||
|
||||
const addItem = async () => {
|
||||
if (!quiz?.backendId) {
|
||||
enqueueSnackbar('Ошибка: не выбран квиз', { variant: 'error' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const [result, error] = await auditoryAdd({
|
||||
quizId: quiz.backendId,
|
||||
body: {
|
||||
sex: gender === "male",
|
||||
age
|
||||
}
|
||||
});
|
||||
|
||||
if (error) {
|
||||
enqueueSnackbar('Не удалось добавить ссылку', { variant: 'error' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (result) {
|
||||
handleAdd({
|
||||
id: result.ID,
|
||||
quiz_id: quiz.backendId,
|
||||
sex: gender === "male",
|
||||
age,
|
||||
deleted: false,
|
||||
});
|
||||
enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
|
||||
// Очищаем форму
|
||||
setGender('');
|
||||
setAge('');
|
||||
}
|
||||
} catch (error) {
|
||||
enqueueSnackbar('Произошла ошибка при добавлении', { variant: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', gap: 4 }}>
|
||||
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 4, alignItems: "center" }}>
|
||||
<Box>
|
||||
|
||||
<FormControl component="fieldset" variant="standard">
|
||||
<Box sx={{ display: 'flex', alignItems: "center", gap: '4px' }}>
|
||||
@ -29,8 +75,7 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
letterSpacing: 0,
|
||||
mr: '3px',
|
||||
}}
|
||||
|
||||
component="legend" >Пол</FormLabel>
|
||||
component="legend">Пол</FormLabel>
|
||||
<InfoPopover />
|
||||
</Box>
|
||||
<RadioGroup
|
||||
@ -40,29 +85,26 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
mt: "9px",
|
||||
ml: "-9px"
|
||||
}}
|
||||
row aria-label="gender" name="row-radio-buttons-group" value={gender} onChange={(e) => setGender(e.target.value)}>
|
||||
|
||||
row
|
||||
aria-label="gender"
|
||||
name="row-radio-buttons-group"
|
||||
value={gender}
|
||||
onChange={(e) => setGender(e.target.value)}
|
||||
>
|
||||
<FormControlLabel
|
||||
|
||||
sx={{
|
||||
// 1. Уменьшаем общий размер блока
|
||||
padding: 0,
|
||||
|
||||
// 2. Но сохраняем пространство для Ripple
|
||||
'& .MuiTouchRipple-root': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
},
|
||||
|
||||
// 3. Позиционируем иконку абсолютно
|
||||
'& .MuiSvgIcon-root': {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
|
||||
'& .MuiFormControlLabel-label': {
|
||||
fontSize: '18px',
|
||||
fontWeight: 400,
|
||||
@ -74,29 +116,24 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
},
|
||||
m: 0,
|
||||
}}
|
||||
|
||||
value="male" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="М" />
|
||||
value="male"
|
||||
control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
|
||||
label="М"
|
||||
/>
|
||||
<FormControlLabel
|
||||
|
||||
sx={{
|
||||
// 1. Уменьшаем общий размер блока
|
||||
padding: 0,
|
||||
|
||||
// 2. Но сохраняем пространство для Ripple
|
||||
'& .MuiTouchRipple-root': {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'visible',
|
||||
},
|
||||
|
||||
// 3. Позиционируем иконку абсолютно
|
||||
'& .MuiSvgIcon-root': {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
|
||||
'& .MuiFormControlLabel-label': {
|
||||
fontSize: '18px',
|
||||
fontWeight: 400,
|
||||
@ -107,17 +144,18 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
},
|
||||
m: 0,
|
||||
}}
|
||||
|
||||
value="female" control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />} label="Ж" />
|
||||
value="female"
|
||||
control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
|
||||
label="Ж"
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
|
||||
|
||||
|
||||
<FormControl sx={{ minWidth: "420px", marginLeft: "15px" }} variant="filled">
|
||||
<Box sx={{
|
||||
|
||||
display: 'flex', alignItems: 'center', gap: '4px'
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px'
|
||||
}}>
|
||||
<FormLabel sx={{
|
||||
color: '#4D4D4D',
|
||||
@ -131,7 +169,8 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
<InfoPopover />
|
||||
</Box>
|
||||
<Select
|
||||
value="35-50"
|
||||
value={age}
|
||||
onChange={(e) => setAge(e.target.value)}
|
||||
displayEmpty
|
||||
inputProps={{ 'aria-label': 'age', disableUnderline: true }}
|
||||
disableUnderline
|
||||
@ -143,7 +182,6 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
'& .MuiSelect-filled': {
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
|
||||
},
|
||||
'& .MuiSelect-select': {
|
||||
height: "100%",
|
||||
@ -162,14 +200,20 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge
|
||||
mt: "17px",
|
||||
}}
|
||||
>
|
||||
|
||||
<MenuItem value="">Выберите возраст</MenuItem>
|
||||
<MenuItem value="35-50">35-50</MenuItem>
|
||||
|
||||
<MenuItem value="18-24">18-24</MenuItem>
|
||||
<MenuItem value="25-34">25-34</MenuItem>
|
||||
<MenuItem value="35-44">35-44</MenuItem>
|
||||
<MenuItem value="45-54">45-54</MenuItem>
|
||||
<MenuItem value="55+">55+</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
onClick={addItem}
|
||||
variant="contained"
|
||||
disabled={!isFormValid}
|
||||
sx={{
|
||||
bgcolor: theme.palette.brightPurple.main,
|
||||
borderRadius: "8px",
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton, Modal } from "@mui/material";
|
||||
import { InfoPopover } from '@ui_kit/InfoPopover';
|
||||
import CopyIcon from "@/assets/icons/CopyIcon";
|
||||
import GenderAndAgeSelector from "./GenderAndAgeSelector";
|
||||
import { useEffect, useState } from "react";
|
||||
import CustomTextField from "@ui_kit/CustomTextField";
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import { ArrowDownIcon } from "../../assets/icons/questionsPage/ArrowDownIcon";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/auditory";
|
||||
import { useCurrentQuiz } from "@/stores/quizes/hooks";
|
||||
@ -15,7 +12,6 @@ import { useSnackbar } from "notistack";
|
||||
|
||||
export default function PersonalizationAI() {
|
||||
const theme = useTheme();
|
||||
const [gender, setGender] = useState('');
|
||||
const [auditory, setAuditory] = useState<AuditoryItem[]>([]);
|
||||
const [deleteModal, setDeleteModal] = useState<number>(0);
|
||||
const quiz = useCurrentQuiz();
|
||||
@ -75,9 +71,13 @@ export default function PersonalizationAI() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = (item:AuditoryItem) => {
|
||||
setAuditory(old => ([...old, item]))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px" }}>
|
||||
<Container id="PersonalizationAI" maxWidth={false} sx={{ minHeight: "100%", p: "20px", height: " calc(100vh - 80px)", overflow: "auto", pt: "55px"}}>
|
||||
<Typography variant="h5" color={theme.palette.grey3.main} fontWeight={700} sx={{ fontSize: 24, letterSpacing: "-0.2px" }}>
|
||||
Персонализация вопросов с помощью AI
|
||||
</Typography>
|
||||
@ -100,7 +100,7 @@ export default function PersonalizationAI() {
|
||||
boxShadow: "none",
|
||||
maxWidth: "796px"
|
||||
}}>
|
||||
<GenderAndAgeSelector gender={gender} setGender={setGender} />
|
||||
<GenderAndAgeSelector handleAdd={handleAdd} />
|
||||
|
||||
{/* Ссылка */}
|
||||
<Box sx={{ mt: "34px" }}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user