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

feat: uncheck

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-11 17:26:17 +03:00
parent c95e358117
commit fdafd7bdff
5 changed files with 150 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/ViewPublicationPage/questions/Emoji.tsx
View File

@ -8,7 +8,7 @@ import {
FormControl, FormControl,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -50,61 +50,73 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
}} }}
> >
<Box sx={{ display: "flex", width: "100%", gap: "42px" }}> <Box sx={{ display: "flex", width: "100%", gap: "42px" }}>
{currentQuestion.content.variants.map( {currentQuestion.content.variants.map((variant, index) => (
({ id, answer, extendedText }, index) => ( <FormControl
<FormControl key={variant.id}
key={id} sx={{
borderRadius: "12px",
border: `1px solid ${theme.palette.grey2.main}`,
overflow: "hidden",
maxWidth: "317px",
width: "100%",
height: "255px",
}}
>
<Box
sx={{ sx={{
borderRadius: "12px", display: "flex",
border: `1px solid ${theme.palette.grey2.main}`, alignItems: "center",
overflow: "hidden", height: "193px",
maxWidth: "317px", background: "#ffffff",
width: "100%",
height: "255px",
}} }}
> >
<Box <Box
sx={{ sx={{
width: "100%",
display: "flex", display: "flex",
alignItems: "center", justifyContent: "center",
height: "193px",
background: "#ffffff",
}} }}
> >
<Box {variant.extendedText && (
sx={{ <Typography fontSize={"100px"}>
width: "100%", {variant.extendedText}
display: "flex", </Typography>
justifyContent: "center", )}
}}
>
{extendedText && (
<Typography fontSize={"100px"}>{extendedText}</Typography>
)}
</Box>
</Box> </Box>
<FormControlLabel </Box>
key={id} <FormControlLabel
sx={{ key={variant.id}
margin: 0, sx={{
padding: "15px", margin: 0,
color: "#4D4D4D", padding: "15px",
display: "flex", color: "#4D4D4D",
gap: "10px", display: "flex",
}} gap: "10px",
value={index} }}
control={ value={index}
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
} }
label={ }}
<Box sx={{ display: "flex", gap: "10px" }}> control={
<Typography>{answer}</Typography> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
</Box> }
} label={
/> <Box sx={{ display: "flex", gap: "10px" }}>
</FormControl> <Typography>{variant.answer}</Typography>
) </Box>
)} }
/>
</FormControl>
))}
</Box> </Box>
</RadioGroup> </RadioGroup>
</Box> </Box>

100
src/pages/ViewPublicationPage/questions/Images.tsx
View File

@ -8,7 +8,7 @@ import {
useMediaQuery, useMediaQuery,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -36,12 +36,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -62,50 +56,58 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
width: "100%", width: "100%",
}} }}
> >
{currentQuestion.content.variants.map( {currentQuestion.content.variants.map((variant, index) => (
({ id, answer, extendedText }, index) => ( <Box
<Box key={index}
key={index} sx={{
sx={{ borderRadius: "5px",
borderRadius: "5px", border: `1px solid ${theme.palette.grey2.main}`,
border: `1px solid ${theme.palette.grey2.main}`, }}
}} >
> <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<Box <Box sx={{ width: "100%", height: "300px" }}>
sx={{ display: "flex", alignItems: "center", gap: "10px" }} {variant.extendedText && (
> <img
<Box sx={{ width: "100%", height: "300px" }}> src={variant.extendedText}
{extendedText && ( alt=""
<img style={{
src={extendedText} display: "block",
alt="" width: "100%",
style={{ height: "100%",
display: "block", objectFit: "cover",
width: "100%", }}
height: "100%", />
objectFit: "cover", )}
}}
/>
)}
</Box>
</Box> </Box>
<FormControlLabel
key={id}
sx={{
display: "block",
textAlign: "center",
color: theme.palette.grey2.main,
marginTop: "10px",
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
}
label={answer}
/>
</Box> </Box>
) <FormControlLabel
)} key={variant.id}
sx={{
display: "block",
textAlign: "center",
color: theme.palette.grey2.main,
marginTop: "10px",
}}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
value={index}
control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
}
label={variant.answer}
/>
</Box>
))}
</Box> </Box>
</RadioGroup> </RadioGroup>
</Box> </Box>

26
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -7,7 +7,7 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -36,12 +36,6 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -60,9 +54,9 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
gap: "20px", gap: "20px",
}} }}
> >
{currentQuestion.content.variants.map(({ id, answer }, index) => ( {currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
margin: "0", margin: "0",
borderRadius: "12px", borderRadius: "12px",
@ -78,7 +72,19 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={answer} label={variant.answer}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
/> />
))} ))}
</Box> </Box>

26
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -7,7 +7,7 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@root/quizView"; import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
import RadioCheck from "@ui_kit/RadioCheck"; import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon"; import RadioIcon from "@ui_kit/RadioIcon";
@ -38,12 +38,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id ({ id }) => answer === id
)} )}
onChange={({ target }) =>
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[Number(target.value)].id
)
}
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
@ -53,9 +47,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
}} }}
> >
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}> <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
{currentQuestion.content.variants.map(({ id, answer }, index) => ( {currentQuestion.content.variants.map((variant, index) => (
<FormControlLabel <FormControlLabel
key={id} key={variant.id}
sx={{ sx={{
marginBottom: "15px", marginBottom: "15px",
borderRadius: "5px", borderRadius: "5px",
@ -65,10 +59,22 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
display: "flex", display: "flex",
}} }}
value={index} value={index}
onClick={(event) => {
event.preventDefault();
updateAnswer(
currentQuestion.content.id,
currentQuestion.content.variants[index].id
);
if (answer === currentQuestion.content.variants[index].id) {
deleteAnswer(currentQuestion.content.id);
}
}}
control={ control={
<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} /> <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
} }
label={answer} label={variant.answer}
/> />
))} ))}
</Box> </Box>

9
src/stores/quizView.ts
View File

@ -41,3 +41,12 @@ export const updateAnswer = (
useQuizViewStore.setState({ answers }); useQuizViewStore.setState({ answers });
}; };
export const deleteAnswer = (questionId: string) => {
const answers = [...useQuizViewStore.getState().answers];
const filteredItems = answers.filter(
(answer) => questionId !== answer.questionId
);
useQuizViewStore.setState({ answers: filteredItems });
};