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

fix wrong drawer contact field settings

Browse Source
This commit is contained in:
nflnkr 2023-12-21 19:22:40 +03:00
parent 25bdf1ba87
commit 552887de34
6 changed files with 472 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/model/quizSettings.ts
View File

@ -40,7 +40,7 @@ export interface QuizConfig {
theme: string, theme: string,
reply: string, reply: string,
replname: string, replname: string,
} };
startpage: { startpage: {
description: string; description: string;
button: string; button: string;
@ -61,12 +61,8 @@ export interface QuizConfig {
formContact: { formContact: {
title: string; title: string;
desc: string; desc: string;
name: FCField; fields: Record<FormContactFieldName, FormContactFieldData>;
email: FCField; button: string;
phone: FCField;
text: FCField;
address: FCField;
button: string
}; };
info: { info: {
phonenumber: string; phonenumber: string;
@ -78,13 +74,20 @@ export interface QuizConfig {
meta: string; meta: string;
} }
type FCField = { export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";
text: string
innerText: string type FormContactFieldData = {
key: string text: string;
required: boolean innerText: string;
used: boolean key: string;
} required: boolean;
used: boolean;
};
export type FieldSettingsDrawerState = {
field: FormContactFieldName | "all" | "",
isEdit: boolean;
};
export const defaultQuizConfig: QuizConfig = { export const defaultQuizConfig: QuizConfig = {
type: null, type: null,
@ -127,42 +130,44 @@ export const defaultQuizConfig: QuizConfig = {
formContact: { formContact: {
title: "", title: "",
desc: "", desc: "",
name: { fields: {
text: "", name: {
innerText: "", text: "",
key: "", innerText: "",
required: false, key: "",
used: true required: false,
used: true
},
email: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
phone: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
text: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
address: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
}, },
email: { button: "",
text: "",
innerText: "",
key: "",
required: false,
used: true
},
phone: {
text: "",
innerText: "",
key: "",
required: false,
used: true
},
text: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
address: {
text: "",
innerText: "",
key: "",
required: false,
used: false
},
button: ""
}, },
meta: "", meta: "",
}; };

643
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -2,7 +2,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material"; import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme, Popover, useMediaQuery, Divider } from "@mui/material";
import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions"; import { incrementCurrentStep, updateQuiz } from "@root/quizes/actions";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import React from "react"; import React, { ReactNode, useRef, useState } from "react";
import Info from "../../assets/icons/Info"; import Info from "../../assets/icons/Info";
import Trash from "@icons/trash"; import Trash from "@icons/trash";
import { OneIcon } from "../../assets/icons/questionsPage/OneIcon"; import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
@ -17,287 +17,261 @@ import SwitchContactForm from "./switchContactForm";
import GearIcon from "@icons/GearIcon"; import GearIcon from "@icons/GearIcon";
import { useQuestionsStore } from "@root/questions/store"; import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
const buttons = [ const buttons: { key: FormContactFieldName, name: string, desc: string; }[] = [
{ { name: "Имя", desc: "Дмитрий", key: "name" },
name: "Имя", { name: "Email", desc: "mail@example.ru", key: "email" },
desc: "Дмитрий", { name: "Номер", desc: "+7 900 000 00 00", key: "phone" },
key: "name" { name: "Фамилия", desc: "Иванов", key: "text" },
}, { name: "Адрес", desc: "Москва, Лаврушинский пер., 10", key: "address" },
{ ];
name: "Email",
desc: "mail@example.ru",
key: "email"
},
{
name: "Номер",
desc: "+7 900 000 00 00",
key: "phone"
},
{
name: "Фамилия",
desc: "Иванов",
key: "text"
},
{
name: "Адрес",
desc: "Москва, Лаврушинский пер., 10",
key: "address"
},
]
export default function ContactFormPage() { export default function ContactFormPage() {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const [drawerNewField, setDrawerNewField] = useState<FieldSettingsDrawerState>({ field: "", isEdit: false });
const [drawerMessenger, setDrawerMessenger] = useState(false);
const quiz = useCurrentQuiz() const drawerMessengerHC = (bool: boolean) => {
setDrawerMessenger(bool);
};
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) return (
<Box sx={{
p: isTablet ? "0 0 150px 0" : "0"
}}>
<Box sx={{
display: "flex",
alignItems: "center",
gap: "10px",
m: "67px 0 41px 0",
}}>
<Link
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
const [drawerNewField, setDrawerNewField] = React.useState(""); }}
const [drawerMessenger, setDrawerMessenger] = React.useState(false); >
Как собрать данные посетителя
const drawerNewFieldHC = (str: string) => { </Link>{" "}
setDrawerNewField(str); {/* <Popover>
};
const drawerMessengerHC = (bool: boolean) => {
setDrawerMessenger(bool);
};
return (
<Box
sx={{
p: isTablet ? "0 0 150px 0" : "0"
}}
>
<Box sx={{
display: "flex",
alignItems: "center",
gap: "10px",
m: "67px 0 41px 0",
}}>
<Link
sx={{
fontSize: "16px",
lineHeight: "19px",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
>
Как собрать данные посетителя
</Link>{" "}
{/* <Popover>
<Info /> <Info />
</Popover> */} </Popover> */}
</Box>
</Box> {
!quiz?.config.formContact.fields.name.used &&
!quiz?.config.formContact.fields.email.used &&
{ !quiz?.config.formContact.fields.phone.used &&
!quiz?.config.formContact.name.used && !quiz?.config.formContact.fields.text.used &&
!quiz?.config.formContact.email.used && !quiz?.config.formContact.fields.address.used ?
!quiz?.config.formContact.phone.used && <ContactFormParent>
!quiz?.config.formContact.text.used && <EmptyCard drawerNewFieldHC={setDrawerNewField} />
!quiz?.config.formContact.address.used ? </ContactFormParent>
<ContactFormParent> :
<EmptyCard drawerNewFieldHC={drawerNewFieldHC} /> <ContactFormParent>
</ContactFormParent> <ButtonsCard drawerNewFieldHC={setDrawerNewField} />
: </ContactFormParent>
<ContactFormParent> }
<ButtonsCard drawerNewFieldHC={drawerNewFieldHC} /> <Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}>
</ContactFormParent> <Box sx={{ display: "flex", gap: "8px" }}>
} <Button
onClick={decrementCurrentStep}
variant="outlined">
<Box sx={{ display: "flex", justifyContent: "space-between", maxWidth: "796px" }}> <ArrowLeft />
<Box sx={{ display: "flex", gap: "8px" }}> </Button>
<Button <Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
onClick={decrementCurrentStep} Установка квиза
variant="outlined"> </Button>
<ArrowLeft /> </Box>
</Button> </Box>
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}> <DrawerNewField isOpenDrawer={drawerNewField.field} drawerNewFieldHC={() => setDrawerNewField({ field: "", isEdit: false })}>
Установка квиза <WindowNewField drawerState={drawerNewField} closeDrawer={() => setDrawerNewField({ field: "", isEdit: false })} />
</Button> </DrawerNewField>
</Box> </Box>
</Box> );
<DrawerNewField isOpenDrawer={drawerNewField} drawerNewFieldHC={drawerNewFieldHC}>
<WindowNewField type={drawerNewField} drawerNewFieldHC={drawerNewFieldHC} />
</DrawerNewField>
</Box>
);
} }
interface Props { interface Props {
outerContainerSx?: SxProps<Theme>; outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode; children?: ReactNode;
} }
function ContactFormParent({ outerContainerSx: sx, children }: Props) { function ContactFormParent({ outerContainerSx: sx, children }: Props) {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000)) const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const quiz = useCurrentQuiz() const quiz = useCurrentQuiz();
return (
<Paper
sx={{
maxWidth: "796px",
width: "100%",
borderRadius: "12px",
margin: "20px 0",
display: "flex",
}}
>
<Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
<Box
sx={{
// borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
maxWidth: "386px",
width: "100%",
padding: "100px 20px 20px 20px",
display: "flex",
flexDirection: "column",
gap: "20px",
}}
>
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.title = target.value
})
}}
value={quiz.config.formContact.title}
placeholder="Заголовок формы" text={""} />
<TextField
onChange={({ target }) => { if (!quiz) return null;
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.desc = target.value return (
}) <Paper
}}
value={quiz.config.formContact.desc}
id="outlined-multiline-static"
multiline
rows={8}
placeholder="Дополнительный текст формы"
sx={{ sx={{
backgroundColor: theme.palette.background.default, maxWidth: "796px",
width: "100%",
"& .MuiInputBase-root": { borderRadius: "12px",
borderRadius: "10px", margin: "20px 0",
alignItems: "start", display: "flex",
color: theme.palette.grey2.main,
color:"black",
},
}} }}
/> >
</Box> <Box sx={{ width: "100%", display: "flex", flexDirection: isTablet ? "column" : "row", }}>
<Divider sx={{ <Box
height: isTablet ? "1px" : "80%", sx={{
width: isTablet ? "80%" : "1px", // borderRight: isTablet ? "none" : `1px solid ${theme.palette.grey2.main}`,
margin: "auto" maxWidth: "386px",
}} width: "100%",
orientation={isTablet ? "horisontal" : "vertical"} padding: "100px 20px 20px 20px",
/> display: "flex",
{children} flexDirection: "column",
</Box> gap: "20px",
</Paper> }}
); >
<CustomTextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.title = target.value;
});
}}
value={quiz.config.formContact.title}
placeholder="Заголовок формы" text={""} />
<TextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.desc = target.value;
});
}}
value={quiz.config.formContact.desc}
id="outlined-multiline-static"
multiline
rows={8}
placeholder="Дополнительный текст формы"
sx={{
backgroundColor: theme.palette.background.default,
"& .MuiInputBase-root": {
borderRadius: "10px",
alignItems: "start",
color: theme.palette.grey2.main,
color: "black",
},
}}
/>
</Box>
<Divider sx={{
height: isTablet ? "1px" : "80%",
width: isTablet ? "80%" : "1px",
margin: "auto"
}}
orientation={isTablet ? "horizontal" : "vertical"}
/>
{children}
</Box>
</Paper>
);
} }
const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: string; drawerNewFieldHC: any }) => { const SettingField = ({ name, placeholder, type, drawerNewFieldHC }: { name: string, placeholder: string, type: FormContactFieldName; drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
const theme = useTheme(); const theme = useTheme();
const quiz = useCurrentQuiz() const quiz = useCurrentQuiz();
return (
<>
<Typography>{quiz.config.formContact[type].text || name}</Typography>
<Box
sx={{ display: "flex", mb: "10px" }}
>
<Typography
sx={{
color: quiz.config.formContact[type].innerText ? "black" : "#9A9AAF",
fontSize: "20px",
backgroundColor: theme.palette.background.default,
height: "48px",
borderRadius: "10px",
border: "1px #9A9AAF solid",
lineHeight: "21px",
p: " 0 25px 0 14px ",
display: "flex",
alignItems: "center",
width: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
position: "relative"
}}
>
{quiz.config.formContact[type].innerText || placeholder}
<IconButton
onClick={() => drawerNewFieldHC(type)}
sx={{
position: "absolute",
right: "0"
}}>
<GearIcon height="20px" width="20px" color="#7e2aea" />
</IconButton>
</Typography>
<IconButton
onClick={() => updateQuiz(quiz?.id, (quiz) => {
quiz.config.formContact[type].used = false
})}
sx={{
width: "48px",
ml: "5px"
}}
>
<Trash />
</IconButton> if (!quiz) return null;
</Box>
</>
)
}
const ButtonsCard = ({ drawerNewFieldHC }: any) => { return (
const theme = useTheme(); <>
const quiz = useCurrentQuiz() <Typography>{quiz.config.formContact.fields[type].text || name}</Typography>
<Box
sx={{ display: "flex", mb: "10px" }}
>
<Typography
sx={{
color: quiz.config.formContact.fields[type].innerText ? "black" : "#9A9AAF",
fontSize: "20px",
backgroundColor: theme.palette.background.default,
height: "48px",
borderRadius: "10px",
border: "1px #9A9AAF solid",
lineHeight: "21px",
p: " 0 25px 0 14px ",
display: "flex",
alignItems: "center",
width: "100%",
overflow: "hidden",
textOverflow: "ellipsis",
position: "relative"
}}
>
{quiz.config.formContact.fields[type].innerText || placeholder}
<IconButton
onClick={() => drawerNewFieldHC({ field: type, isEdit: true })}
sx={{
position: "absolute",
right: "0"
}}>
<GearIcon height="20px" width="20px" color="#7e2aea" />
</IconButton>
</Typography>
<IconButton
onClick={() => updateQuiz(quiz?.id, (quiz) => {
quiz.config.formContact.fields[type].used = false;
})}
sx={{
width: "48px",
ml: "5px"
}}
>
<Trash />
return ( </IconButton>
<Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}> </Box>
</>
);
};
{ const ButtonsCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
buttons.map((contentData) => { const theme = useTheme();
const content = quiz?.config.formContact[contentData.key] const quiz = useCurrentQuiz();
return content.used ? <SettingField drawerNewFieldHC={drawerNewFieldHC} key={contentData.key} type={contentData.key} name={content.text || contentData.name} placeholder={content.innerText || contentData.desc} /> : <></>
})
}
{ if (!quiz) return null;
(
quiz?.config.formContact.name.used && return (
quiz?.config.formContact.email.used && <Box sx={{ display: "flex", flexDirection: "column", padding: "20px", width: "100%", gap: "20px" }}>
quiz?.config.formContact.phone.used && {buttons.flatMap((contentData) => {
quiz?.config.formContact.text.used && const content = quiz.config.formContact.fields[contentData.key];
quiz?.config.formContact.address.used return content.used ? (
) ? <SettingField
<></> drawerNewFieldHC={drawerNewFieldHC}
: key={contentData.key}
<Button type={contentData.key}
onClick={() => drawerNewFieldHC("all")} name={content.text || contentData.name}
variant="contained" placeholder={content.innerText || contentData.desc}
sx={{ maxWidth: "fit-content", padding: "10px 20px" }} />
> ) : [];
Добавить поле + })}
</Button> {(
} quiz.config.formContact.fields.name.used &&
{/* <Link quiz.config.formContact.fields.email.used &&
quiz.config.formContact.fields.phone.used &&
quiz.config.formContact.fields.text.used &&
quiz.config.formContact.fields.address.used
) ?
<></>
:
<Button
onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
variant="contained"
sx={{ maxWidth: "fit-content", padding: "10px 20px" }}
>
Добавить поле +
</Button>
}
{/* <Link
component="button" component="button"
// onClick={() => drawerMessengerHC(true)} // onClick={() => drawerMessengerHC(true)}
sx={{ sx={{
@ -311,51 +285,51 @@ const ButtonsCard = ({ drawerNewFieldHC }: any) => {
Добавить мессенджеры Добавить мессенджеры
</Link> */} </Link> */}
<PseudoButton /> <PseudoButton />
</Box>
)
}
const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void }) => {
const theme = useTheme();
const [FC, setFC] = React.useState(false)
const openFC = () => setFC(true)
const closeFC = () => setFC(false)
const popover = React.useRef(null);
return (
<Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
<Button
onClick={() => drawerNewFieldHC("all")}
variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
Добавить поле +
</Button>
<Box sx={{ display: "flex" }}>
<Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
<Box ref={popover}>
<Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
</Box> </Box>
);
};
const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (state: FieldSettingsDrawerState) => void; }) => {
const theme = useTheme();
const [FC, setFC] = useState(false);
const openFC = () => setFC(true);
const closeFC = () => setFC(false);
const popover = useRef(null);
<Popover return (
open={FC} <Box sx={{ display: "flex", flexDirection: "column", padding: "100px 20px 20px 20px", width: "100%", gap: "20px", }}>
onClose={closeFC} <Button
anchorEl={popover.current} onClick={() => drawerNewFieldHC({ field: "all", isEdit: false })}
anchorOrigin={{ variant="contained" sx={{ maxWidth: "fit-content", padding: "10px 20px" }}>
vertical: 'bottom', Добавить поле +
horizontal: 'center', </Button>
}} <Box sx={{ display: "flex" }}>
transformOrigin={{ <Typography sx={{ color: theme.palette.orange.main }}>Будут показаны поля по умолчанию</Typography>
vertical: 'top', <Box ref={popover}>
horizontal: 'center', <Info sx={{ ml: "6px", p: "0" }} onClick={openFC} />
}} </Box>
disableRestoreFocus
>
<Typography sx={{ m: "20px", textAlign: "center" }}>
Будут поля:<br></br> Имя, Email, Телефон
</Typography>
</Popover> <Popover
</Box> open={FC}
{/* <Link onClose={closeFC}
anchorEl={popover.current}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
disableRestoreFocus
>
<Typography sx={{ m: "20px", textAlign: "center" }}>
Будут поля:<br></br> Имя, Email, Телефон
</Typography>
</Popover>
</Box>
{/* <Link
sx={{ sx={{
mt: "20px", mt: "20px",
fontSize: "16px", fontSize: "16px",
@ -366,42 +340,45 @@ const EmptyCard = ({ drawerNewFieldHC }: { drawerNewFieldHC: (a: string) => void
> >
Добавить мессенджеры Добавить мессенджеры
</Link> */} </Link> */}
<PseudoButton /> <PseudoButton />
</Box> </Box>
) );
} };
const PseudoButton = () => { const PseudoButton = () => {
const quiz = useCurrentQuiz() const quiz = useCurrentQuiz();
return (
<TextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.button = target.value
})
}}
value={quiz.config.formContact.button}
sx={{
heigth: "44px",
width: "190px",
"& .MuiInputBase-root": {
backgroundColor: "#7E2AEA",
borderRadius: "8px",
color: "white",
},
"& .MuiInputBase-input": {
padding: "10px 20px",
textAlign: "center"
},
"& .MuiInputBase-input::placeholder": {
color: "white",
opacity: "1"
}
}}
placeholder="Название кнопки"
>
{quiz?.config.formContact.button || "Название кнопки"}
</TextField>
) if (!quiz) return null;
}
return (
<TextField
onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact.button = target.value;
});
}}
value={quiz.config.formContact.button}
sx={{
heigth: "44px",
width: "190px",
"& .MuiInputBase-root": {
backgroundColor: "#7E2AEA",
borderRadius: "8px",
color: "white",
},
"& .MuiInputBase-input": {
padding: "10px 20px",
textAlign: "center"
},
"& .MuiInputBase-input::placeholder": {
color: "white",
opacity: "1"
}
}}
placeholder="Название кнопки"
>
{quiz.config.formContact.button || "Название кнопки"}
</TextField>
);
};

54
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -1,54 +0,0 @@
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import {Box, IconButton, useTheme} from "@mui/material";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Props {
switchState: string
SSHC: (data:string) => void
type: string
}
export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
const theme = useTheme();
const quiz = useCurrentQuiz()
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
{icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
{icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
{icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Телефон', value: 'phone'},
{icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Текст', value: 'text'},
{icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Адрес', value: 'address'},
]
return (
<Box
sx={{
padding: '20px',
display: 'flex',
gap: '10px'
}}
>
{buttonSetting.map( (e,i) => (
type === e.value || type === "all" ?
<MiniButtonSetting
disabled = {quiz?.config.formContact[e.value]?.used}
key={i}
onClick={()=>{SSHC(e.value)}}
sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
color: switchState === e.value && type === "all" ? '#ffffff' : theme.palette.grey3.main,
}}
>
{e.icon}
{e.title}
</MiniButtonSetting>
:
<></>
))}
</Box>
)
}

45
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -6,18 +6,22 @@ import Button from "@mui/material/Button";
import * as React from "react"; import * as React from "react";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateQuiz } from "@root/quizes/actions"; import { updateQuiz } from "@root/quizes/actions";
import { FormContactFieldName } from "@model/quizSettings";
interface Props { interface Props {
outerContainerSx?: SxProps<Theme>; outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode; children?: React.ReactNode;
defaultValue?: string; defaultValue: FormContactFieldName;
placeholderHelp: string; placeholderHelp: string;
placeholderField: string; placeholderField: string;
drawerNewFieldHC:(a:string)=>void closeDrawer: () => void;
} }
export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) { export default function NewFieldParent({ closeDrawer, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
const quiz = useCurrentQuiz() const quiz = useCurrentQuiz();
if (!quiz) return null;
return ( return (
<Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}> <Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
@ -26,10 +30,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
<CustomTextField <CustomTextField
onChange={({ target }) => { onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => { updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].text = target.value quiz.config.formContact.fields[defaultValue].text = target.value;
}) });
}} }}
value={quiz.config.formContact[defaultValue].text} value={quiz.config.formContact.fields[defaultValue].text}
placeholder={placeholderHelp} text={''} /> placeholder={placeholderHelp} text={''} />
</Box> </Box>
@ -39,10 +43,10 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
<CustomTextField <CustomTextField
onChange={({ target }) => { onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => { updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].innerText = target.value quiz.config.formContact.fields[defaultValue].innerText = target.value;
}) });
}} }}
value={quiz.config.formContact[defaultValue].innerText} value={quiz.config.formContact.fields[defaultValue].innerText}
placeholder={placeholderField} text={''} /> placeholder={placeholderField} text={''} />
</Box> </Box>
@ -50,11 +54,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
<Typography>Ключ</Typography> <Typography>Ключ</Typography>
<TextField <TextField
value={quiz.config.formContact[defaultValue].key} value={quiz.config.formContact.fields[defaultValue].key}
onChange={({ target }) => { onChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => { updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].key = target.value quiz.config.formContact.fields[defaultValue].key = target.value;
}) });
}} }}
placeholder="text" placeholder="text"
sx={{ sx={{
@ -67,14 +71,13 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
backgroundColor: '#EEE4FC', backgroundColor: '#EEE4FC',
}, },
}} }}
/> />
<CustomCheckbox <CustomCheckbox
checked={quiz.config.formContact[defaultValue].required} checked={quiz.config.formContact.fields[defaultValue].required}
handleChange={({ target }) => { handleChange={({ target }) => {
updateQuiz(quiz.id, (quiz) => { updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].required = target.checked quiz.config.formContact.fields[defaultValue].required = target.checked;
}) });
}} }}
label={"Обязательно к заполнению"} /> label={"Обязательно к заполнению"} />
@ -88,11 +91,11 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
<Button <Button
onClick={() => { onClick={() => {
updateQuiz(quiz.id, (quiz) => { updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].used = true quiz.config.formContact.fields[defaultValue].used = true;
}) });
drawerNewFieldHC("") closeDrawer();
}} }}
variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button> variant='contained' sx={{ maxWidth: '125px' }}>Добавить</Button>
</Box> </Box>
) );
} }

33
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import NewFieldParent from "./NewFieldParent"; import NewFieldParent from "./NewFieldParent";
import {FormControlLabel} from "@mui/material"; import { FormControlLabel } from "@mui/material";
import SelectMask from "../SelectMask"; import SelectMask from "../SelectMask";
import CustomizedSwitch from "@ui_kit/CustomSwitch"; import CustomizedSwitch from "@ui_kit/CustomSwitch";
@ -8,27 +8,25 @@ import CustomizedSwitch from "@ui_kit/CustomSwitch";
interface Props { interface Props {
switchState: string, switchState: string,
drawerNewFieldHC:(a:string)=>void closeDrawer: () => void;
} }
export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) { export default function SwitchNewField({ switchState = 'name', closeDrawer }: Props) {
const [SwitchMask, setSwitchMask] = React.useState(false); const [SwitchMask, setSwitchMask] = React.useState(false);
const SwitchMaskHC = (bool:boolean) => { const SwitchMaskHC = (bool: boolean) => {
setSwitchMask(bool) setSwitchMask(bool);
} };
switch (switchState) { switch (switchState) {
case 'name': case 'name':
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'}/>); return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите имя'} placeholderField={'Дмитрий'} defaultValue={'name'} />);
break;
case 'email': case 'email':
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'}/>); return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите Email'} placeholderField={'mail@example.ru'} defaultValue={'email'} />);
break;
case 'phone': case 'phone':
return ( return (
<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}> <NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите номер'} placeholderField={'+7 900 000 00 00'} defaultValue={'phone'}>
{/* <FormControlLabel {/* <FormControlLabel
value="start" value="start"
control={<CustomizedSwitch/>} control={<CustomizedSwitch/>}
@ -45,20 +43,17 @@ export default function SwitchNewField({switchState ='name', drawerNewFieldHC}:
/> */} /> */}
{SwitchMask ? {SwitchMask ?
<SelectMask/> <SelectMask />
: :
<></> <></>
} }
</NewFieldParent> </NewFieldParent>
); );
break;
case 'text': case 'text':
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'}/>); return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите фамилию'} placeholderField={'Иванов'} defaultValue={'text'} />);
break;
case 'address': case 'address':
return (<NewFieldParent drawerNewFieldHC={drawerNewFieldHC} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'}/>); return (<NewFieldParent closeDrawer={closeDrawer} placeholderHelp={'Введите адрес'} placeholderField={'Москва, Лаврушинский пер., 10'} defaultValue={'address'} />);
break;
default: default:
return (<></>) return (<></>);
} }
} }

92
src/pages/ContactFormPage/NewField/WindowNewField.tsx
View File

@ -1,39 +1,87 @@
import * as React from 'react'; import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import { FieldSettingsDrawerState, FormContactFieldName } from "@model/quizSettings";
import CloseIcon from '@mui/icons-material/Close';
import { Typography, useTheme } from "@mui/material";
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import { Typography, useTheme } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import ButtonsNewField from "./ButtonsNewField";
import SwitchNewField from "./SwitchNewField";
import { useCurrentQuiz } from '@root/quizes/hooks'; import { useCurrentQuiz } from '@root/quizes/hooks';
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { useEffect, useState } from 'react';
import SwitchNewField from "./SwitchNewField";
export default function WindowNewField({ type, drawerNewFieldHC }: { type: string, drawerNewFieldHC: (a: string) => void }) { interface Props {
const quiz = useCurrentQuiz() drawerState: FieldSettingsDrawerState;
closeDrawer: () => void;
}
export default function WindowNewField({ drawerState, closeDrawer }: Props) {
const quiz = useCurrentQuiz();
const theme = useTheme(); const theme = useTheme();
const [switchState, setSwitchState] = React.useState(""); const [switchState, setSwitchState] = useState("");
React.useEffect(() => {
for (let val in quiz?.config.formContact) { useEffect(() => {
if (!quiz?.config.formContact[val]?.used && (val !== "title" && val !== "desc" && val !== "button")) { if (!quiz) return;
setSwitchState(val)
return if (drawerState.isEdit) {
return setSwitchState(drawerState.field);
}
for (let val in quiz.config.formContact.fields) {
if (!quiz.config.formContact.fields[val as FormContactFieldName].used) {
setSwitchState(val);
return;
} }
} }
}, []) }, []);
if (!quiz) return null;
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data) setSwitchState(data);
} };
const buttonSetting: { icon: JSX.Element; title: string; value: FormContactFieldName; }[] = [
{ icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Имя', value: 'name' },
{ icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Email', value: 'email' },
{ icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Телефон', value: 'phone' },
{ icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Текст', value: 'text' },
{ icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main} />, title: 'Адрес', value: 'address' },
];
return ( return (
<> <>
<Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}> <Box sx={{ padding: '10px 10px 10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: theme.palette.background.default }}>
<Typography>Новое поле</Typography> <Typography>Новое поле</Typography>
<Button onClick={() => drawerNewFieldHC("")} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button> <Button onClick={closeDrawer} sx={{ padding: 0 }}><CloseIcon fontSize='large' /></Button>
</Box> </Box>
<Box sx={{
<Box><ButtonsNewField type={type} switchState={switchState} SSHC={SSHC} /></Box> padding: '20px',
<SwitchNewField switchState={switchState} drawerNewFieldHC={drawerNewFieldHC} /> display: 'flex',
gap: '10px'
}}>
{buttonSetting.flatMap((e, i) => (
drawerState.field === e.value || drawerState.field === "all"
? <MiniButtonSetting
disabled={quiz.config.formContact.fields[e.value].used}
key={i}
onClick={() => { SSHC(e.value); }}
sx={{
backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
color: switchState === e.value && drawerState.field === "all" ? '#ffffff' : theme.palette.grey3.main,
}}
>
{e.icon}
{e.title}
</MiniButtonSetting>
: []
))}
</Box>
<SwitchNewField switchState={switchState} closeDrawer={closeDrawer} />
</> </>
) );
} }