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>
</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 { QuizQuestionDate } from "model/questionTypes/date";
interface Props {
question: QuizQuestionDate;
question: QuizQuestionDate;
}
export default function Date({ question }: Props) {
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<LabeledDatePicker />
</Box>
);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<LabeledDatePicker />
</Box>
);
}

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

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

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

@ -53,54 +53,56 @@ export default function Images({ question }: Props) {
gap: 1,
}}
>
{question.content.variants.map((variant, index) => (
<ButtonBase
key={index}
onClick={() => handleVariantClick(index)}
sx={{
display: "flex",
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
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<ButtonBase
key={index}
onClick={() => handleVariantClick(index)}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 2,
p: 1,
flexDirection: "column",
borderRadius: "8px",
overflow: "hidden",
border: "1px solid",
borderColor: selectedVariants.includes(index)
? theme.palette.brightPurple.main
: "#E3E3E3",
}}
>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
</ButtonBase>
))}
{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={{
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>
);

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

@ -1,102 +1,113 @@
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 { useState } from "react";
interface Props {
question: QuizQuestionSelect;
question: QuizQuestionSelect;
}
export default function Text({ question }: Props) {
const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>("");
const theme = useTheme();
const [selectValue, setSelectValue] = useState<string>("");
function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value);
}
function handleChange(event: SelectChangeEvent<string | null>) {
setSelectValue((event.target as HTMLInputElement).value);
}
return (
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography variant="h6">{question.title}</Typography>
<FormControl
fullWidth
size="small"
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}
>
<Typography variant="h6">{question.title}</Typography>
<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={{
width: "100%",
minWidth: "200px",
height: "48px",
display: "flex",
alignItems: "center",
gap: "20px",
p: "4px",
borderRadius: "5px",
color: theme.palette.grey2.main,
}}
>
<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.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>
);
>
{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);
};
return (
<FormControl fullWidth>
<FormLabel
id="quiz-question-radio-group"
data-cy="variant-title"
>{question.title}</FormLabel>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={value}
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography
data-cy="variant-answer"
>{variant.answer}</Typography>
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
);
return (
<FormControl fullWidth>
<FormLabel id="quiz-question-radio-group" data-cy="variant-title">
{question.title}
</FormLabel>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={value}
onChange={handleChange}
>
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={
<Radio
inputProps={{
"data-cy": "variant-radio",
}}
/>
}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography data-cy="variant-answer">
{variant.answer}
</Typography>
<Tooltip title={variant.hints} placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
</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 ?? ""}
onChange={handleChange}
>
{question.content.variants.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
{question.content.variants
.filter(({ answer }) => answer)
.map((variant, index) => (
<FormControlLabel
key={index}
value={variant.answer}
control={<Radio />}
label={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Typography>{variant.answer}</Typography>
<Tooltip title="Подсказка" placement="right">
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
}
/>
))}
</RadioGroup>
</FormControl>
<Box

672
yarn.lock
View File

File diff suppressed because it is too large Load Diff