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

start page settings now uses new store

Browse Source
This commit is contained in:
nflnkr 2023-11-14 16:13:10 +03:00
parent 213075706b
commit 28d8cc8320
2 changed files with 924 additions and 1008 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

273
src/pages/startPage/StartPageSettings.tsx
View File

@ -1,4 +1,13 @@
import { ChangeEvent, useState } from "react"; import AlignCenterIcon from "@icons/AlignCenterIcon";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import InfoIcon from "@icons/InfoIcon";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import { QuizStartpageType } from "@model/quizSettings";
import { import {
Box, Box,
Button, Button,
@ -13,31 +22,22 @@ import {
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { createPortal } from "react-dom"; import { incrementCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import InfoIcon from "@icons/InfoIcon";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { quizStore } from "@root/quizes"; import SelectableButton from "@ui_kit/SelectableButton";
import { useParams } from "react-router-dom";
import * as React from "react";
import ModalSizeImage from "./ModalSizeImage";
import { DropZone } from "./dropZone";
import Extra from "./extra";
import AlignCenterIcon from "@icons/AlignCenterIcon";
import DropFav from "./dropfavicon";
import { createQuestion } from "@root/questions";
import { StartPagePreview } from "@ui_kit/StartPagePreview"; import { StartPagePreview } from "@ui_kit/StartPagePreview";
import UploadBox from "@ui_kit/UploadBox";
import { useState } from "react";
import { createPortal } from "react-dom";
import UploadIcon from "../../assets/icons/UploadIcon";
import ModalSizeImage from "./ModalSizeImage";
import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import DropFav from "./dropfavicon";
import Extra from "./extra";
const designTypes = [ const designTypes = [
[ [
@ -58,25 +58,15 @@ const designTypes = [
] as const; ] as const;
// type DesignType = typeof designTypes[number][0]; // type DesignType = typeof designTypes[number][0];
type BackgroundType = "image" | "video";
type AlignType = "left" | "right" | "center";
export default function StartPageSettings() { export default function StartPageSettings() {
const [alignType, setAlignType] = useState<AlignType>("left");
const [formState, setFormState] = useState<"design" | "content">("design");
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const designType = listQuizes[params].startpage;
const [backgroundType, setBackgroundType] = useState(
listQuizes[params].config.startpage.background.type
);
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
const isTablet = useMediaQuery(theme.breakpoints.down(950)); const isTablet = useMediaQuery(theme.breakpoints.down(950));
const { quiz, updateQuiz } = useCurrentQuiz();
const [formState, setFormState] = useState<"design" | "content">("design");
const handleNext = () => { const designType = quiz?.config?.startpageType;
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const videoHC = (videoInp: HTMLInputElement) => { const videoHC = (videoInp: HTMLInputElement) => {
const file = videoInp.files?.[0]; const file = videoInp.files?.[0];
@ -86,55 +76,15 @@ export default function StartPageSettings() {
} }
}; };
const [video, setVideo] = React.useState(""); const [video, setVideo] = useState("");
const mutationHC = (e: ChangeEvent<HTMLInputElement>) => { const [mobileVersion, setMobileVersion] = useState(false);
let SPageClone = listQuizes[params].config;
SPageClone.startpage.description = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationButtonHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.startpage.button = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationPhoneHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.info.phonenumber = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationSiteHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.info.site = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationLawHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.info.law = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationOrgNameHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.info.orgname = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const mutationPositionHC = (e: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.startpage.position = e.target.value;
updateQuizesList(params, { config: SPageClone });
};
const [mobileVersion, setMobileVersion] = React.useState(false);
const MobileVersionHC = (bool: boolean) => { const MobileVersionHC = (bool: boolean) => {
setMobileVersion(bool); setMobileVersion(bool);
}; };
if (!quiz) return null; // TODO throw and catch with error boundary
return ( return (
<> <>
<Typography <Typography
@ -199,8 +149,7 @@ export default function StartPageSettings() {
<Box <Box
sx={{ sx={{
pr: "20px", pr: "20px",
borderRight: `1px solid ${ borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main
isTablet ? "transparent" : theme.palette.grey2.main
}`, }`,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -230,9 +179,9 @@ export default function StartPageSettings() {
variant="outlined" variant="outlined"
value={designType} value={designType}
displayEmpty displayEmpty
onChange={(e) => onChange={e => updateQuiz(quiz => {
updateQuizesList(params, { startpage: e.target.value }) quiz.config.startpageType = e.target.value as QuizStartpageType;
} })}
sx={{ sx={{
height: "48px", height: "48px",
borderRadius: "8px", borderRadius: "8px",
@ -314,24 +263,18 @@ export default function StartPageSettings() {
}} }}
> >
<SelectableButton <SelectableButton
isSelected={backgroundType === "image"} isSelected={quiz.config.startpage.background.type === "image"}
onClick={() => { onClick={() => updateQuiz(quiz => {
setBackgroundType("image"); quiz.config.startpage.background.type = "image";
let SPageClone = listQuizes[params].config; })}
SPageClone.startpage.background.type = "image";
updateQuizesList(params, { config: SPageClone });
}}
> >
Изображение Изображение
</SelectableButton> </SelectableButton>
<SelectableButton <SelectableButton
isSelected={backgroundType === "video"} isSelected={quiz.config.startpage.background.type === "video"}
onClick={() => { onClick={() => updateQuiz(quiz => {
setBackgroundType("video"); quiz.config.startpage.background.type = "video";
let SPageClone = listQuizes[params].config; })}
SPageClone.startpage.background.type = "video";
updateQuizesList(params, { config: SPageClone });
}}
> >
Видео Видео
</SelectableButton> </SelectableButton>
@ -339,7 +282,7 @@ export default function StartPageSettings() {
<Box <Box
sx={{ sx={{
display: backgroundType === "image" ? "flex" : "none", display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
flexDirection: "column", flexDirection: "column",
}} }}
> >
@ -417,7 +360,7 @@ export default function StartPageSettings() {
<Box <Box
sx={{ sx={{
display: backgroundType === "image" ? "none" : "flex", display: quiz.config.startpage.background.type === "image" ? "none" : "flex",
flexDirection: "column", flexDirection: "column",
}} }}
> >
@ -474,12 +417,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomCheckbox <CustomCheckbox
label="Зацикливать видео" label="Зацикливать видео"
checked={listQuizes[params].config.startpage.background.cycle} checked={quiz.config.startpage.background.cycle}
handleChange={(e) => { handleChange={e => updateQuiz(quiz => {
let SPageClone = listQuizes[params].config; quiz.config.startpage.background.cycle = e.target.checked;
SPageClone.startpage.background.cycle = e.target.checked; })}
updateQuizesList(params, { config: SPageClone });
}}
/> />
<Typography <Typography
sx={{ sx={{
@ -511,34 +452,25 @@ export default function StartPageSettings() {
}} }}
> >
<SelectableIconButton <SelectableIconButton
onClick={() => { onClick={() => updateQuiz(quiz => {
setAlignType("left"); quiz.config.startpage.position = "left";
let SPageClone = listQuizes[params].config; })}
SPageClone.startpage.position = "ltr"; isActive={quiz.config.startpage.position === "left"}
updateQuizesList(params, { config: SPageClone });
}}
isActive={alignType === "left"}
Icon={AlignLeftIcon} Icon={AlignLeftIcon}
/> />
<SelectableIconButton <SelectableIconButton
onClick={() => { onClick={() => updateQuiz(quiz => {
setAlignType("center"); quiz.config.startpage.position = "center";
let SPageClone = listQuizes[params].config; })}
SPageClone.startpage.position = "cnt"; isActive={quiz.config.startpage.position === "center"}
updateQuizesList(params, { config: SPageClone });
}}
isActive={alignType === "center"}
Icon={AlignCenterIcon} Icon={AlignCenterIcon}
sx={{ display: designType === "centered" ? "flex" : "none" }} sx={{ display: designType === "centered" ? "flex" : "none" }}
/> />
<SelectableIconButton <SelectableIconButton
onClick={() => { onClick={() => updateQuiz(quiz => {
setAlignType("right"); quiz.config.startpage.position = "right";
let SPageClone = listQuizes[params].config; })}
SPageClone.startpage.position = "rtl"; isActive={quiz.config.startpage.position === "right"}
updateQuizesList(params, { config: SPageClone });
}}
isActive={alignType === "right"}
Icon={AlignRightIcon} Icon={AlignRightIcon}
/> />
</Box> </Box>
@ -547,7 +479,7 @@ export default function StartPageSettings() {
<> <>
<Box <Box
sx={{ sx={{
display: backgroundType === "image" ? "flex" : "none", display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
flexDirection: "column", flexDirection: "column",
}} }}
> >
@ -617,7 +549,7 @@ export default function StartPageSettings() {
<> <>
<Box <Box
sx={{ sx={{
display: backgroundType === "image" ? "flex" : "none", display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
flexDirection: "column", flexDirection: "column",
}} }}
> >
@ -686,10 +618,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который" placeholder="Текст-заполнитель — это текст, который"
text={listQuizes[params].name} text={quiz.name}
onChange={(e) => onChange={e => updateQuiz(quiz => {
updateQuizesList(params, { name: e.target.value }) quiz.name = e.target.value;
} })}
/> />
<Typography <Typography
sx={{ sx={{
@ -703,8 +635,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config.startpage.description} text={quiz.config.startpage.description}
onChange={mutationHC} onChange={e => updateQuiz(quiz => {
quiz.config.startpage.description = e.target.value;
})}
/> />
<Typography <Typography
sx={{ sx={{
@ -718,8 +652,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Начать" placeholder="Начать"
text={listQuizes[params].config.startpage.button} text={quiz.config.startpage.button}
onChange={mutationButtonHC} onChange={e => updateQuiz(quiz => {
quiz.config.startpage.button = e.target.value;
})}
/> />
<Typography <Typography
sx={{ sx={{
@ -733,17 +669,17 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="+7 900 000 00 00" placeholder="+7 900 000 00 00"
text={listQuizes[params].config.info.phonenumber} text={quiz.config.info.phonenumber}
onChange={mutationPhoneHC} onChange={e => updateQuiz(quiz => {
quiz.config.info.phonenumber = e.target.value;
})}
/> />
<CustomCheckbox <CustomCheckbox
label="Кликабельный" label="Кликабельный"
checked={listQuizes[params].config.info.clickable} checked={quiz.config.info.clickable}
handleChange={(e) => { handleChange={e => updateQuiz(quiz => {
let SPageClone = listQuizes[params].config; quiz.config.info.clickable = e.target.checked;
SPageClone.info.clickable = e.target.checked; })}
updateQuizesList(params, { config: SPageClone });
}}
/> />
<Typography <Typography
sx={{ sx={{
@ -757,8 +693,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config.info.orgname} text={quiz.config.info.orgname}
onChange={mutationOrgNameHC} onChange={e => updateQuiz(quiz => {
quiz.config.info.orgname = e.target.value;
})}
/> />
<Typography <Typography
sx={{ sx={{
@ -772,8 +710,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config.info.site} text={quiz.config.info.site}
onChange={mutationSiteHC} onChange={e => updateQuiz(quiz => {
quiz.config.info.site = e.target.value;
})}
/> />
<Typography <Typography
sx={{ sx={{
@ -787,8 +727,10 @@ export default function StartPageSettings() {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder="Текст-заполнитель — это текст, который " placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config.info.law} text={quiz.config.info.law}
onChange={mutationLawHC} onChange={e => updateQuiz(quiz => {
quiz.config.info.law = e.target.value;
})}
/> />
<Extra /> <Extra />
</> </>
@ -873,12 +815,10 @@ export default function StartPageSettings() {
borderRadius: 0, borderRadius: 0,
padding: 0, padding: 0,
}} }}
onChange={(e) => { onChange={e => updateQuiz(quiz => {
let SPageClone = listQuizes[params].config; quiz.config.noStartPage = e.target.checked;
SPageClone.noStartPage = e.target.checked; })}
updateQuizesList(params, { config: SPageClone }); checked={quiz.config.noStartPage}
}}
checked={listQuizes[params].config.noStartPage}
/> />
} }
label="" label=""
@ -893,16 +833,13 @@ export default function StartPageSettings() {
variant="contained" variant="contained"
data-cy="setup-questions" data-cy="setup-questions"
onClick={() => { onClick={() => {
let SPageClone = listQuizes[params].config; updateQuiz(quiz => {
SPageClone.startpage.background.desktop = quiz.config.startpage.background.desktop = "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg";
"https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg"; quiz.config.startpage.background.mobile = "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png";
SPageClone.startpage.background.mobile = quiz.config.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
"https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png"; });
SPageClone.startpage.background.video = incrementCurrentStep();
"https://youtu.be/dbaPkCiLPKQ"; // TODO create new question
updateQuizesList(params, { config: SPageClone });
handleNext();
createQuestion(params);
}} }}
> >
Настроить вопросы Настроить вопросы

41
src/pages/startPage/dropZone.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react"; import { useState } from "react";
import { useParams } from "react-router-dom";
import { import {
Box, Box,
ButtonBase, ButtonBase,
@ -9,10 +8,9 @@ import {
Theme, Theme,
} from "@mui/material"; } from "@mui/material";
import { SnackbarProvider, enqueueSnackbar } from "notistack"; import { SnackbarProvider, enqueueSnackbar } from "notistack";
import { quizStore } from "@root/quizes";
import UploadIcon from "@icons/UploadIcon"; import UploadIcon from "@icons/UploadIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Props { interface Props {
text?: string; text?: string;
@ -23,28 +21,18 @@ interface Props {
//Научи функцию принимать данные для валидации //Научи функцию принимать данные для валидации
export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => { export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => {
const quizId = Number(useParams().quizId);
const { listQuizes, updateQuizesList } = quizStore();
const [ready, setReady] = useState(false);
const theme = useTheme(); const theme = useTheme();
const quiz = listQuizes[quizId]; const { quiz, updateQuiz } = useCurrentQuiz();
console.log(quiz.config.startpage.background.desktop); const [ready, setReady] = useState(false);
if (!quiz) return null; // TODO throw and catch with error boundary
const imgHC = (imgInp: HTMLInputElement) => { const imgHC = (imgInp: HTMLInputElement) => {
const file = imgInp.files?.[0]; const file = imgInp.files?.[0];
if (file) { if (file) {
if (file.size < 5242880) { if (file.size < 5242880) {
updateQuizesList(quizId, { updateQuiz(quiz => {
config: { quiz.config.startpage.background.desktop = URL.createObjectURL(file);
...quiz.config,
startpage: {
...quiz.config.startpage,
background: {
...quiz.config.startpage.background,
desktop: URL.createObjectURL(file),
},
},
},
}); });
} else { } else {
enqueueSnackbar("Размер картинки слишком велик"); enqueueSnackbar("Размер картинки слишком велик");
@ -66,17 +54,8 @@ export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => {
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
if (file.size < 5242880) { if (file.size < 5242880) {
updateQuizesList(quizId, { updateQuiz(quiz => {
config: { quiz.config.startpage.background.desktop = URL.createObjectURL(file);
...quiz.config,
startpage: {
...quiz.config.startpage,
background: {
...quiz.config.startpage.background,
desktop: URL.createObjectURL(file),
},
},
},
}); });
} else { } else {
enqueueSnackbar("Размер картинки слишком велик"); enqueueSnackbar("Размер картинки слишком велик");