SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: hide empty radiobuttons

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-30 13:01:50 +03:00
parent c9f9f3a4b0
commit d36d3656bc
8 changed files with 257 additions and 870 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -160,5 +160,4 @@ export default function QuizPreviewLayout() {
</Box> </Box>
</Paper> </Paper>
); );
} }

26
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Date.tsx
View File

@ -2,21 +2,21 @@ import { Box, Typography } from "@mui/material";
import LabeledDatePicker from "@ui_kit/LabeledDatePicker"; import LabeledDatePicker from "@ui_kit/LabeledDatePicker";
import { QuizQuestionDate } from "model/questionTypes/date"; import { QuizQuestionDate } from "model/questionTypes/date";
interface Props { interface Props {
question: QuizQuestionDate; question: QuizQuestionDate;
} }
export default function Date({ question }: Props) { export default function Date({ question }: Props) {
return (
return ( <Box
<Box sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: 1, gap: 1,
}}> }}
<Typography variant="h6">{question.title}</Typography> >
<LabeledDatePicker /> <Typography variant="h6">{question.title}</Typography>
</Box> <LabeledDatePicker />
); </Box>
);
} }

36
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Emoji.tsx
View File

@ -31,23 +31,25 @@ export default function Emoji({ question }: Props) {
value={value} value={value}
onChange={handleChange} onChange={handleChange}
> >
{question.content.variants.map((variant, index) => ( {question.content.variants
<FormControlLabel .filter(({ answer }) => answer)
key={index} .map((variant, index) => (
value={variant.answer} <FormControlLabel
control={<Radio />} key={index}
label={ value={variant.answer}
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> control={<Radio />}
<Typography>{`${variant.extendedText} ${variant.answer}`}</Typography> label={
<Tooltip title="Подсказка" placement="right"> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Box> <Typography>{`${variant.extendedText} ${variant.answer}`}</Typography>
<InfoIcon /> <Tooltip title="Подсказка" placement="right">
</Box> <Box>
</Tooltip> <InfoIcon />
</Box> </Box>
} </Tooltip>
/> </Box>
))} }
/>
))}
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
); );

90
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Images.tsx
View File

@ -53,54 +53,56 @@ export default function Images({ question }: Props) {
gap: 1, gap: 1,
}} }}
> >
{question.content.variants.map((variant, index) => ( {question.content.variants
<ButtonBase .filter(({ answer }) => answer)
key={index} .map((variant, index) => (
onClick={() => handleVariantClick(index)} <ButtonBase
sx={{ key={index}
display: "flex", onClick={() => handleVariantClick(index)}
flexDirection: "column",
borderRadius: "8px",
overflow: "hidden",
border: "1px solid",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}}
>
{variant.extendedText ? (
<img
src={variant.extendedText}
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Картинка отсутствует</Typography>
)}
<Divider sx={{ width: "100%" }} />
<Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", flexDirection: "column",
justifyContent: "space-between", borderRadius: "8px",
gap: 2, overflow: "hidden",
p: 1, border: "1px solid",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}} }}
> >
<Typography>{variant.answer}</Typography> {variant.extendedText ? (
<Tooltip title="Подсказка" placement="right"> <img
<Box> src={variant.extendedText}
<InfoIcon /> alt="question variant"
</Box> style={{
</Tooltip> width: "100%",
</Box> display: "block",
</ButtonBase> objectFit: "scale-down",
))} flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Картинка отсутствует</Typography>
)}
<Divider sx={{ width: "100%" }} />
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 2,
p: 1,
}}
>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</ButtonBase>
))}
</Box> </Box>
</Box> </Box>
); );

189
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx
View File

@ -1,102 +1,113 @@
import ArrowDownIcon from "@icons/ArrowDownIcon"; import ArrowDownIcon from "@icons/ArrowDownIcon";
import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from "@mui/material"; import {
Box,
FormControl,
MenuItem,
Select,
SelectChangeEvent,
Typography,
useTheme,
} from "@mui/material";
import { QuizQuestionSelect } from "model/questionTypes/select"; import { QuizQuestionSelect } from "model/questionTypes/select";
import { useState } from "react"; import { useState } from "react";
interface Props { interface Props {
question: QuizQuestionSelect; question: QuizQuestionSelect;
} }
export default function Text({ question }: Props) { export default function Text({ question }: Props) {
const theme = useTheme(); const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>(""); const [selectValue, setSelectValue] = useState<string>("");
function handleChange(event: SelectChangeEvent<string | null>) { function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value); setSelectValue((event.target as HTMLInputElement).value);
} }
return ( return (
<Box sx={{ <Box
display: "flex", sx={{
flexDirection: "column", display: "flex",
gap: 1, flexDirection: "column",
}}> gap: 1,
<Typography variant="h6">{question.title}</Typography> }}
<FormControl >
fullWidth <Typography variant="h6">{question.title}</Typography>
size="small" <FormControl
fullWidth
size="small"
sx={{
width: "100%",
minWidth: "200px",
height: "48px",
}}
>
<Select
id="category-select"
variant="outlined"
value={selectValue}
displayEmpty
onChange={handleChange}
sx={{
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{question.content.variants
.filter(({ answer }) => answer)
.map((variant) => (
<MenuItem
key={variant.answer}
value={variant.answer}
sx={{ sx={{
width: "100%", display: "flex",
minWidth: "200px", alignItems: "center",
height: "48px", gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}} }}
> >
<Select {variant.answer}
id="category-select" </MenuItem>
variant="outlined" ))}
value={selectValue} </Select>
displayEmpty </FormControl>
onChange={handleChange} </Box>
sx={{ );
height: "48px",
borderRadius: "8px",
"& .MuiOutlinedInput-notchedOutline": {
border: `1px solid ${theme.palette.brightPurple.main} !important`,
},
}}
MenuProps={{
PaperProps: {
sx: {
mt: "8px",
p: "4px",
borderRadius: "8px",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
},
MenuListProps: {
sx: {
py: 0,
display: "flex",
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: theme.palette.background.default,
color: theme.palette.brightPurple.main,
},
},
},
}}
inputProps={{
sx: {
color: theme.palette.brightPurple.main,
display: "flex",
alignItems: "center",
px: "9px",
gap: "20px",
},
}}
IconComponent={(props) => <ArrowDownIcon {...props} />}
>
{question.content.variants.map(variant => (
<MenuItem
key={variant.answer}
value={variant.answer}
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
{variant.answer}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
} }

77
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -23,41 +23,44 @@ export default function Variant({ question }: Props) {
setValue((event.target as HTMLInputElement).value); setValue((event.target as HTMLInputElement).value);
}; };
return ( return (
<FormControl fullWidth> <FormControl fullWidth>
<FormLabel <FormLabel id="quiz-question-radio-group" data-cy="variant-title">
id="quiz-question-radio-group" {question.title}
data-cy="variant-title" </FormLabel>
>{question.title}</FormLabel> <RadioGroup
<RadioGroup aria-labelledby="quiz-question-radio-group"
aria-labelledby="quiz-question-radio-group" value={value}
value={value} onChange={handleChange}
onChange={handleChange} >
> {question.content.variants
{question.content.variants.map((variant, index) => ( .filter(({ answer }) => answer)
<FormControlLabel .map((variant, index) => (
key={index} <FormControlLabel
value={variant.answer} key={index}
control={<Radio value={variant.answer}
inputProps={{ control={
"data-cy": "variant-radio", <Radio
}} inputProps={{
/>} "data-cy": "variant-radio",
label={ }}
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> />
<Typography }
data-cy="variant-answer" label={
>{variant.answer}</Typography> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Tooltip title={variant.hints} placement="right"> <Typography data-cy="variant-answer">
<Box> {variant.answer}
<InfoIcon /> </Typography>
</Box> <Tooltip title={variant.hints} placement="right">
</Tooltip> <Box>
</Box> <InfoIcon />
} </Box>
/> </Tooltip>
))} </Box>
</RadioGroup> }
</FormControl> />
); ))}
</RadioGroup>
</FormControl>
);
} }

36
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -46,23 +46,25 @@ export default function Varimg({ question }: Props) {
value={currentVariant?.answer ?? ""} value={currentVariant?.answer ?? ""}
onChange={handleChange} onChange={handleChange}
> >
{question.content.variants.map((variant, index) => ( {question.content.variants
<FormControlLabel .filter(({ answer }) => answer)
key={index} .map((variant, index) => (
value={variant.answer} <FormControlLabel
control={<Radio />} key={index}
label={ value={variant.answer}
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> control={<Radio />}
<Typography>{variant.answer}</Typography> label={
<Tooltip title="Подсказка" placement="right"> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Box> <Typography>{variant.answer}</Typography>
<InfoIcon /> <Tooltip title="Подсказка" placement="right">
</Box> <Box>
</Tooltip> <InfoIcon />
</Box> </Box>
} </Tooltip>
/> </Box>
))} }
/>
))}
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
<Box <Box

672
yarn.lock
View File

File diff suppressed because it is too large Load Diff