поправила в сторе конфиг, добавила модалку(нужно доделать)

2023-06-18 01:26:12 +03:00 · 2023-06-18 01:26:12 +03:00 · a2bbfe3f14
commit a2bbfe3f14
parent 47e4ad8f08
4 changed files with 102 additions and 50 deletions
--- a/src/pages/startPage/ModalSizeImage.tsx
+++ b/src/pages/startPage/ModalSizeImage.tsx
@ -0,0 +1,55 @@
+import {Button, Modal, Box, useTheme, Typography} from "@mui/material";
+import * as React from "react";
+import {useState} from "react";
+
+export default function ModalSizeImage () {
+    const theme = useTheme();
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+    return (
+        <>
+            <Button
+                sx={{
+                    mt: "20px",
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    color: theme.palette.orange.main,
+                    textDecorationColor: theme.palette.orange.main
+                }}
+                onClick={handleOpen}>Размер картинок</Button>
+            <Modal
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+                <Box
+                    sx={{
+                        position: "absolute" as "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        maxWidth: "540px",
+                        width: "100%",
+                        minHeight: "632px",
+                        bgcolor: "background.paper",
+                        borderRadius: "12px",
+                        boxShadow: 24,
+                        p: 0,
+                    }}
+                >
+                    <Box>
+                        <Typography>Размеры картинок</Typography>
+                    </Box>
+                    <Box></Box>
+                    <Box>
+                        <Typography>Размеры изображений в квизе</Typography>
+                    </Box>
+                    <Box></Box>
+                </Box>
+            </Modal>
+        </>
+
+    );
+}
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -28,6 +28,7 @@ import CustomTextField from "@ui_kit/CustomTextField";
 import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 import * as React from "react";
+import ModalSizeImage from "./ModalSizeImage";


 const designTypes = [
@ -47,7 +48,7 @@ export default function StartPageSettings() {
    const designType = listQuizes[params].startpage
    const StartPageClone = listQuizes[params]
    console.log(StartPageClone)
-    const [backgroundType, setBackgroundType] = useState<BackgroundType>("image");
+    const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
    const [alignType, setAlignType] = useState<AlignType>("left");
    //дропзона
    //для Изображения
@ -154,45 +155,45 @@ export default function StartPageSettings() {
    const [video, setVideo] = React.useState("");

    const mutationHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.startpage.description = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationButtonHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.startpage.button = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationPhoneHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.info.phonenumber = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationSiteHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.info.site = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationLawHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.info.law = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationOrgNameHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.info.orgname = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    const mutationOrgMetaHC = (e: any) => {
-        let SPageClone = listQuizes[params].config1
+        let SPageClone = listQuizes[params].config
        SPageClone.meta = e.target.value
-        updateQuizesList(params, {config1: SPageClone })
+        updateQuizesList(params, {config: SPageClone })
    }

    return (
@ -305,17 +306,17 @@ export default function StartPageSettings() {
                    }}>
                        <SelectableButton isSelected={backgroundType === "image"} onClick={() => {
                            setBackgroundType("image")
-                            let SPageClone = listQuizes[params].config1
+                            let SPageClone = listQuizes[params].config
                            SPageClone.startpage.background.type = "image"
-                            updateQuizesList(params, {config1: SPageClone })
+                            updateQuizesList(params, {config: SPageClone })
                        }}>
                            Изображение
                        </SelectableButton>
                        <SelectableButton isSelected={backgroundType === "video"} onClick={() => {
                            setBackgroundType("video")
-                            let SPageClone = listQuizes[params].config1
+                            let SPageClone = listQuizes[params].config
                            SPageClone.startpage.background.type = "video"
-                            updateQuizesList(params, {config1: SPageClone })
+                            updateQuizesList(params, {config: SPageClone })
                        }}>
                            Видео
                        </SelectableButton>
@ -366,14 +367,8 @@ export default function StartPageSettings() {
                                    }
                                </Box>
                            </ButtonBase>
+                            <ModalSizeImage/>

-                            <Link sx={{
-                                mt: "20px",
-                                fontSize: "16px",
-                                lineHeight: "19px",
-                                color: theme.palette.orange.main,
-                                textDecorationColor: theme.palette.orange.main
-                            }}>Размер картинок</Link>
                            <Box sx={{
                                mt: "20px",
                                display: "flex",
@ -433,11 +428,11 @@ export default function StartPageSettings() {
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "5px" }}>Настройки видео</Typography>
                            <CustomCheckbox
                                label="Зацикливать видео"
-                                checked={listQuizes[params].config1.startpage.background.cycle}
+                                checked={listQuizes[params].config.startpage.background.cycle}
                                handleChange={(e) => {
-                                    let SPageClone = listQuizes[params].config1
+                                    let SPageClone = listQuizes[params].config
                                    SPageClone.startpage.background.cycle = e.target.checked
-                                    updateQuizesList(params, {config1: SPageClone })}}
+                                    updateQuizesList(params, {config: SPageClone })}}
                            />
                            <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Изображение для мобильной версии</Typography>
                            <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
@ -599,44 +594,44 @@ export default function StartPageSettings() {
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
-                        text={listQuizes[params].config1.startpage.description}
+                        text={listQuizes[params].config.startpage.description}
                        onChange={mutationHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Текст кнопки</Typography>
                    <CustomTextField
                        placeholder="Начать"
-                        text={listQuizes[params].config1.startpage.button}
+                        text={listQuizes[params].config.startpage.button}
                        onChange={mutationButtonHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Телефон</Typography>
                    <CustomTextField
                        placeholder="+7 900 000 00 00"
-                        text={listQuizes[params].config1.info.phonenumber}
+                        text={listQuizes[params].config.info.phonenumber}
                        onChange={mutationPhoneHC}
                    />
                    <CustomCheckbox label="Кликабельный"
-                                    checked={listQuizes[params].config1.info.clickable}
+                                    checked={listQuizes[params].config.info.clickable}
                                    handleChange={(e) => {console.log(e.target.checked)
-                                        let SPageClone = listQuizes[params].config1
+                                        let SPageClone = listQuizes[params].config
                                        SPageClone.info.clickable = e.target.checked
-                                        updateQuizesList(params, {config1: SPageClone })}
+                                        updateQuizesList(params, {config: SPageClone })}
                                    }/>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>Название или слоган компании</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
-                        text={listQuizes[params].config1.info.orgname}
+                        text={listQuizes[params].config.info.orgname}
                        onChange={mutationOrgNameHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Сайт</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
-                        text={listQuizes[params].config1.info.site}
+                        text={listQuizes[params].config.info.site}
                        onChange={mutationSiteHC}
                    />
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Юридическая информация</Typography>
                    <CustomTextField
                        placeholder="Текст-заполнитель — это текст, который "
-                        text={listQuizes[params].config1.info.law}
+                        text={listQuizes[params].config.info.law}
                        onChange={mutationLawHC}
                    />
                    <Link sx={{
@ -647,7 +642,7 @@ export default function StartPageSettings() {
                        textDecorationColor: theme.palette.brightPurple.main
                    }}>Дополнительно</Link>
                    <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
-                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config1.meta} onChange={mutationOrgMetaHC} />
+                    <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config.meta} onChange={mutationOrgMetaHC} />
                    <Typography sx={{
                        mt: "20px",
                        fontSize: "16px",
@ -676,11 +671,11 @@ export default function StartPageSettings() {
                <Button
                    variant="contained"
                    onClick={() => {
-                        let SPageClone = listQuizes[params].config1
+                        let SPageClone = listQuizes[params].config
                        SPageClone.startpage.background.desktop = "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg"
                        SPageClone.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.video = "https://youtu.be/dbaPkCiLPKQ"
-                        updateQuizesList(params, {config1: SPageClone })
+                        updateQuizesList(params, {config: SPageClone })
                    }}
                >Настроить вопросы</Button>
            </Box>
--- a/src/pages/startPage/stepOne.tsx
+++ b/src/pages/startPage/stepOne.tsx
@ -27,7 +27,9 @@ export default function StepOne({ handleNext }: HandleNext) {
        }}
      >
        <Button variant="text" onClick={() => {
-            updateQuizesList(params, {config: "quize"})
+            let SPageClone = listQuizes[params].config
+            SPageClone.type = "quize"
+            updateQuizesList(params, {config: SPageClone })
            handleNext()
        }
        }>
@ -35,11 +37,13 @@ export default function StepOne({ handleNext }: HandleNext) {
            header="Создание квиз-опроса"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage1}
-            border={listQuizes[params].config === "quize" ? "1px solid #7E2AEA" : "none"}
+            border={listQuizes[params].config.type === "quize" ? "1px solid #7E2AEA" : "none"}
          />
        </Button>
        <Button variant="text" onClick={() => {
-            updateQuizesList(params, {config: "form"})
+            let SPageClone = listQuizes[params].config
+            SPageClone.type = "form"
+            updateQuizesList(params, {config: SPageClone })
            handleNext()
        }
        }>
@ -47,7 +51,7 @@ export default function StepOne({ handleNext }: HandleNext) {
            header="Создание анкеты"
            text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
            image={quizCreationImage2}
-            border={listQuizes[params].config === "form" ? "1px solid #7E2AEA" : "none"}
+            border={listQuizes[params].config.type === "form" ? "1px solid #7E2AEA" : "none"}
          />
        </Button>
      </Box>
--- a/src/stores/quizes.ts
+++ b/src/stores/quizes.ts
@ -20,7 +20,6 @@ interface Quizes {
    unique_answers: boolean,
    name: string,
    description: string,
-    config: string,
    status: string,
    limit: number,
    due_to: number,
@ -37,7 +36,7 @@ interface Quizes {
    group_id: number,
    step: number,
    startpage: string,
-    config1:  {
+    config:  {
        type: string,
        logo: string,
        startpage: {
@ -102,7 +101,6 @@ export const quizStore = create<QuizStore>()(
                    "unique_answers": true,
                    "name": "",
                    "description": "",
-                    "config": "",
                    "status": "",
                    "limit": 0,
                    "due_to": 0,
@ -119,11 +117,11 @@ export const quizStore = create<QuizStore>()(
                    "group_id": 0,
                    "step": 1,
                    "startpage": "",
-                    "config1": {
+                    "config": {
                        "type": "", // quiz или form
                        "logo": "hub.pena.digital/img/logo",
                        "startpage": {
-                            "description": "привет!",// приветственный текст опроса
+                            "description": "",// приветственный текст опроса
                            "button": "Начать", // текст на кнопке начала опроса
                            "position": "ltr", // ltr или rtl. отображение элементов поверх фона
                            "background": {