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

feat: Uploaded file displayed and Date fix

Browse Source
This commit is contained in:
IlyaDoronin 2023-12-12 17:15:40 +03:00
parent 28c43d662c
commit 6b23ded1b0
2 changed files with 66 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/ViewPublicationPage/questions/Date.tsx
View File

@ -1,3 +1,4 @@
import dayjs from "dayjs";
import { DatePicker } from "@mui/x-date-pickers";
import { Box, Typography } from "@mui/material";
@ -14,10 +15,9 @@ type DateProps = {
export const Date = ({ currentQuestion }: DateProps) => {
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
) ?? {};
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const [day, month, year] = answer?.split(".") || [];
return (
@ -32,50 +32,50 @@ export const Date = ({ currentQuestion }: DateProps) => {
}}
>
<DatePicker
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
selected={
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
value={dayjs(
answer
? new window.Date(`${month}.${day}.${year}`)
: new window.Date()
}
onChange={(date) =>
)}
onChange={(date) => {
updateAnswer(
currentQuestion.content.id,
String(
date?.toLocaleDateString("ru-RU", {
new window.Date(date?.toDate()).toLocaleDateString("ru-RU", {
year: "numeric",
month: "2-digit",
day: "2-digit",
})
)
)
}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
borderRadius: "10px",
maxWidth: "250px",
pr: "22px",
"& input": {
py: "11px",
pl: "20px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
);
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
borderRadius: "10px",
maxWidth: "250px",
pr: "22px",
"& input": {
py: "11px",
pl: "20px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
</Box>
</Box>

31
src/pages/ViewPublicationPage/questions/File.tsx
View File

@ -16,13 +16,18 @@ type FileProps = {
export const File = ({ currentQuestion }: FileProps) => {
const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
const answer = answers.find(
({ questionId }) => questionId === currentQuestion.content.id
)?.answer as string;
const uploadFile = ({ target }: ChangeEvent<HTMLInputElement>) => {
const file = target.files?.[0];
if (file) {
updateAnswer(currentQuestion.content.id, `${file.name}|${URL.createObjectURL(file)}`);
updateAnswer(
currentQuestion.content.id,
`${file.name}|${URL.createObjectURL(file)}`
);
}
};
@ -47,6 +52,28 @@ export const File = ({ currentQuestion }: FileProps) => {
/>
<UploadBox icon={<UploadIcon />} text="5 MB максимум" />
</ButtonBase>
{answer && currentQuestion.content.type === "picture" && (
<img
src={answer.split("|")[1]}
alt=""
style={{
marginTop: "15px",
maxWidth: "300px",
maxHeight: "300px",
}}
/>
)}
{answer && currentQuestion.content.type === "video" && (
<video
src={answer.split("|")[1]}
style={{
marginTop: "15px",
maxWidth: "300px",
maxHeight: "300px",
objectFit: "cover",
}}
/>
)}
{answer?.split("|")[0] && (
<Typography sx={{ marginTop: "15px" }}>
{answer?.split("|")[0]}