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

added settings block

Browse Source
This commit is contained in:
aleksandr-raw 2024-04-12 13:05:33 +04:00
parent d686290df5
commit 64e701a036
14 changed files with 357 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/assets/icons/EditPencil.tsx Normal file
View File

@ -0,0 +1,36 @@
import { Box } from "@mui/material";
interface Props {
color: string;
height: string;
width: string;
}
export default function EditPencil({ color, height, width }: Props) {
return (
<Box
sx={{
height,
width,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.5137 0.80552C11.5869 -0.269234 13.3274 -0.269892 14.4013 0.804049L16.8932 3.2959C17.958 4.36068 17.969 6.08444 16.918 7.16281L7.68486 16.6361C6.97933 17.3599 6.01167 17.7681 5.00124 17.7681L2.24909 17.768C0.969844 17.7679 -0.0517699 16.7015 0.00203171 15.4224L0.120186 12.6134C0.159684 11.6744 0.549963 10.7844 1.2138 10.1195L10.5137 0.80552ZM13.3415 1.86551C12.8533 1.37736 12.0622 1.37766 11.5744 1.86618L9.9113 3.53178L14.1911 7.81157L15.8446 6.11505C16.3224 5.62488 16.3173 4.84136 15.8333 4.35737L13.3415 1.86551ZM2.27446 11.1802L8.85145 4.59325L13.144 8.88585L6.61148 15.5883C6.18816 16.0226 5.60756 16.2675 5.0013 16.2675L2.24916 16.2674C1.82274 16.2674 1.4822 15.9119 1.50014 15.4856L1.61829 12.6765C1.64199 12.1131 1.87616 11.5791 2.27446 11.1802ZM17.5148 17.6948C17.9289 17.6948 18.2645 17.3589 18.2645 16.9445C18.2645 16.5301 17.9289 16.1942 17.5148 16.1942H11.3931C10.9791 16.1942 10.6434 16.5301 10.6434 16.9445C10.6434 17.3589 10.9791 17.6948 11.3931 17.6948H17.5148Z"
fill="#7E2AEA"
/>
</svg>
</Box>
);
}

17
src/components/CustomRadioGroup/CustomRadioGroup.tsx
View File

@ -5,6 +5,7 @@ import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Box from "@mui/material/Box";
import CheckboxIcon from "@icons/Checkbox";
import { useTheme } from "@mui/material";
type CustomRadioGroupProps = {
items: string[];
@ -17,6 +18,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
selectedValue,
setSelectedValue,
}) => {
const theme = useTheme();
const [currentValue, setCurrentValue] = React.useState<string | null>(
selectedValue,
);
@ -27,7 +29,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
return (
<Box
sx={{
border: "1px solid #9A9AAF",
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "12px",
padding: "5px",
height: "100%",
@ -46,18 +48,25 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
sx={{
color: "black",
padding: "15px",
borderBottom: "1px solid #F2F3F7",
borderBottom: `1px solid ${theme.palette.background.default}`,
display: "flex",
justifyContent: "space-between",
borderRadius: "12px",
margin: 0,
backgroundColor: currentValue === item ? "#F2F3F7" : "white",
backgroundColor:
currentValue === item
? theme.palette.background.default
: theme.palette.common.white,
}}
value={item}
control={
<Radio
checkedIcon={
<CheckboxIcon checked isRounded color={"#7E2AEA"} />
<CheckboxIcon
checked
isRounded
color={theme.palette.brightPurple.main}
/>
}
icon={<CheckboxIcon isRounded />}
/>

7
src/components/CustomSelect/CustomSelect.tsx
View File

@ -51,8 +51,11 @@ export const CustomSelect: FC<CustomSelectProps> = ({
width: "100%",
height: "56px",
padding: "5px",
color: currentValue === null ? "#9A9AAF" : "#7E2AEA",
border: "2px solid #ffffff",
color:
currentValue === null
? theme.palette.grey2.main
: theme.palette.brightPurple.main,
border: `2px solid ${theme.palette.common.white}`,
borderRadius: "30px",
background: "#EFF0F5",
display: "flex",

9
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep1/IntegrationStep1.tsx
View File

@ -30,7 +30,6 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const formik = useFormik<Values>({
initialValues,
@ -87,7 +86,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
"data-cy": "login",
}}
onChange={formik.handleChange}
color="#F2F3F7"
color={theme.palette.background.default}
id="login"
label="Телефон или E-mail"
gap="10px"
@ -103,7 +102,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
"data-cy": "password",
}}
onChange={formik.handleChange}
color="#F2F3F7"
color={theme.palette.background.default}
id="password"
label="Пароль"
gap="10px"
@ -114,7 +113,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
sx={{
fontSize: "16px",
fontWeight: "400",
color: "#9A9AAF",
color: theme.palette.grey2.main,
lineHeight: "1",
}}
>
@ -125,7 +124,7 @@ export const IntegrationStep1: FC<IntegrationStep1Props> = ({
marginTop: "12px",
fontSize: "18px",
fontWeight: "400",
color: "#4D4D4D",
color: theme.palette.grey3.main,
lineHeight: "1",
}}
>

4
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/CustomFileUploader/CustomFileUploader.tsx
View File

@ -82,7 +82,9 @@ export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
Добавить файл
</Typography>
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
<Typography
sx={{ color: theme.palette.grey2.main, fontSize: "16px" }}
>
{description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
</Typography>
</Box>

41
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/RemoveFileBlock/RemoveFileBlock.tsx → src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/FileBlock/FileBlock.tsx
View File

@ -3,15 +3,12 @@ import Box from "@mui/material/Box";
import { IconButton, Typography, useTheme } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
type RemoveFileBlockProps = {
type FileBlockProps = {
file: File | null;
setFile: (file: File | null) => void;
setFile?: (file: File | null) => void;
};
export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
setFile,
file,
}) => {
export const FileBlock: FC<FileBlockProps> = ({ setFile, file }) => {
const theme = useTheme();
return (
<Box sx={{ display: "flex", gap: "15px", alignItems: "center" }}>
@ -30,7 +27,7 @@ export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
alignItems: "center",
backgroundColor: theme.palette.brightPurple.main,
borderRadius: "8px",
padding: "5px 5px 5px 14px",
padding: setFile ? "5px 5px 5px 14px" : "5px 14px",
gap: "20px",
}}
>
@ -39,20 +36,22 @@ export const RemoveFileBlock: FC<RemoveFileBlockProps> = ({
>
{file?.name}
</Typography>
<IconButton
onClick={() => setFile(null)}
sx={{
backgroundColor: "#864BD9",
borderRadius: "50%",
width: "24px",
height: "24px",
color: "white",
}}
>
<CloseIcon
sx={{ width: "14px", height: "14px", transform: "scale(1.5)" }}
/>
</IconButton>
{setFile && (
<IconButton
onClick={() => setFile(null)}
sx={{
backgroundColor: "#864BD9",
borderRadius: "50%",
width: "24px",
height: "24px",
color: "white",
}}
>
<CloseIcon
sx={{ width: "14px", height: "14px", transform: "scale(1.5)" }}
/>
</IconButton>
)}
</Box>
</Box>
);

4
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep5/IntegrationStep5.tsx
View File

@ -2,7 +2,7 @@ import { Box, useMediaQuery, useTheme } from "@mui/material";
import React, { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
import { RemoveFileBlock } from "./RemoveFileBlock/RemoveFileBlock";
import { FileBlock } from "./FileBlock/FileBlock";
import { CustomFileUploader } from "./CustomFileUploader/CustomFileUploader";
type IntegrationStep5Props = {
@ -33,7 +33,7 @@ export const IntegrationStep5: FC<IntegrationStep5Props> = ({
>
<Box sx={{ alignSelf: "start", marginTop: "20px" }}>
{utmFile ? (
<RemoveFileBlock file={utmFile} setFile={setUtmFile} />
<FileBlock file={utmFile} setFile={setUtmFile} />
) : (
<CustomFileUploader
description={"Принимает .txt и .docx формат — максимум 100мб"}

25
src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx
View File

@ -136,6 +136,8 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
],
);
const stepTitles = steps.map((step) => step.title);
return (
<Dialog
open={isModalOpen}
@ -199,16 +201,19 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
setStep={setStep}
/>
{isSettingsBlock ? (
<SettingsBlock
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealPerformer={selectedDealPerformer}
selectedFunnelPerformer={selectedFunnelPerformer}
selectedFunnel={selectedFunnel}
selectedStagePerformer={selectedStagePerformer}
selectedStage={selectedStage}
utmFile={utmFile}
/>
<Box sx={{ flexGrow: 1, width: "100%" }}>
<SettingsBlock
stepTitles={stepTitles}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealPerformer={selectedDealPerformer}
selectedFunnelPerformer={selectedFunnelPerformer}
selectedFunnel={selectedFunnel}
selectedStagePerformer={selectedStagePerformer}
selectedStage={selectedStage}
utmFile={utmFile}
/>
</Box>
) : (
<Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
)}

14
src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModalTitle/IntegrationsModalTitle.tsx
View File

@ -90,6 +90,20 @@ export const IntegrationsModalTitle: FC<IntegrationsModalTitleProps> = ({
marginRight: isMobile ? 0 : "8px",
marginLeft: 0,
},
"&:hover": {
backgroundColor: theme.palette.brightPurple.main,
color: theme.palette.common.white,
"& path": {
stroke: theme.palette.common.white,
},
},
"&:active": {
backgroundColor: "#581CA7",
color: theme.palette.common.white,
"& path": {
stroke: theme.palette.common.white,
},
},
}}
>
{isMobile ? "" : btnText}

38
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/ResponsiblePerson/ResponsiblePerson.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Typography, useTheme } from "@mui/material";
import { FC } from "react";
type ResponsiblePersonProps = {
performer: string | null;
};
export const ResponsiblePerson: FC<ResponsiblePersonProps> = ({
performer,
}) => {
const theme = useTheme();
return (
<>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "18px",
fontWeight: 400,
margin: "10px 8px 0 0",
}}
display={"inline-block"}
>
Ответственный за сделку:
</Typography>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: "18px",
fontWeight: 400,
}}
display={"inline"}
>
{performer ? performer : "Не выбран"}
</Typography>
</>
);
};

27
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SelectedParameter/SelectedParameter.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Typography, useTheme } from "@mui/material";
import Box from "@mui/material/Box";
import { FC } from "react";
type SelectedParameterProps = {
parameter: string | null;
};
export const SelectedParameter: FC<SelectedParameterProps> = ({
parameter,
}) => {
const theme = useTheme();
return (
<Box
sx={{
display: "flex",
width: "100%",
padding: "15px 20px",
backgroundColor: theme.palette.background.default,
borderRadius: "12px",
marginTop: "10px",
}}
>
<Typography>{parameter ? parameter : "Не выбрано"}</Typography>
</Box>
);
};

96
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItem.tsx
View File

@ -1,16 +1,104 @@
import Box from "@mui/material/Box";
import { FC } from "react";
import { FC, useMemo } from "react";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import { SettingItemHeader } from "./SettingItemHeader/SettingItemHeader";
import { ResponsiblePerson } from "./ResponsiblePerson/ResponsiblePerson";
import { SelectedParameter } from "./SelectedParameter/SelectedParameter";
import { FileBlock } from "../../IntegrationStep5/FileBlock/FileBlock";
type SettingItemProps = {
step: number;
title: string;
onEditClick: () => void;
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
selectedFunnelPerformer: string | null;
selectedFunnel: string | null;
selectedStagePerformer: string | null;
selectedDealPerformer: string | null;
selectedStage: string | null;
utmFile: File | null;
};
export const SettingItem: FC<SettingItemProps> = ({
step,
onEditClick,
title,
setStep,
setIsSettingsBlock,
selectedFunnelPerformer,
selectedFunnel,
selectedStagePerformer,
selectedDealPerformer,
selectedStage,
utmFile,
}) => {
return <Box></Box>;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
if (step === 0) {
return;
}
const SettingsContent = useMemo(() => {
if (step === 1) {
return (
<>
<ResponsiblePerson performer={selectedFunnelPerformer} />
<SelectedParameter parameter={selectedFunnel} />
</>
);
}
if (step === 2) {
return (
<>
<ResponsiblePerson performer={selectedStagePerformer} />
<SelectedParameter parameter={selectedStage} />
</>
);
}
if (step === 3) {
return (
<>
<ResponsiblePerson performer={selectedDealPerformer} />
</>
);
}
if (step === 4) {
return (
<Box sx={{ display: "flex", gap: "15px", marginTop: "20px" }}>
{utmFile ? (
<FileBlock file={utmFile} />
) : (
<Typography>Файл не загружен</Typography>
)}
</Box>
);
}
return null;
}, [
step,
selectedFunnelPerformer,
selectedFunnel,
selectedStagePerformer,
selectedDealPerformer,
selectedStage,
utmFile,
]);
return (
<Box
sx={{
width: "100%",
padding: "20px 0",
borderTop: `1px solid ${theme.palette.background.default}`,
}}
>
<SettingItemHeader
title={title}
step={step}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
/>
<Box>{SettingsContent}</Box>
</Box>
);
};

64
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx Normal file
View File

@ -0,0 +1,64 @@
import Box from "@mui/material/Box";
import { IconButton, Typography, useTheme } from "@mui/material";
import EditPencil from "@icons/EditPencil";
import { FC } from "react";
type SettingItemHeaderProps = {
title: string;
step: number;
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
};
export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
title,
step,
setStep,
setIsSettingsBlock,
}) => {
const theme = useTheme();
const handleClick = () => {
setStep(step);
setIsSettingsBlock(false);
};
return (
<Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Typography
sx={{
color: theme.palette.grey2.main,
fontSize: "14px",
fontWeight: 400,
}}
>
{step} этап
</Typography>
<IconButton onClick={handleClick}>
<EditPencil
color={theme.palette.brightPurple.main}
width={"18px"}
height={"18px"}
/>
</IconButton>
</Box>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: "18px",
fontWeight: 500,
lineHeight: "1",
}}
>
{title}
</Typography>
</Box>
);
};

27
src/pages/IntegrationsPage/IntegrationsModal/SettingsBlock/SettingsBlock.tsx
View File

@ -1,8 +1,10 @@
import { FC } from "react";
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { SettingItem } from "./SettingItem/SettingItem";
type SettingsBlockProps = {
stepTitles: string[];
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
selectedFunnelPerformer: string | null;
@ -14,6 +16,7 @@ type SettingsBlockProps = {
};
export const SettingsBlock: FC<SettingsBlockProps> = ({
stepTitles,
setStep,
setIsSettingsBlock,
selectedFunnelPerformer,
@ -40,12 +43,30 @@ export const SettingsBlock: FC<SettingsBlockProps> = ({
sx={{
marginTop: "10px",
width: "100%",
height: "100%",
height: "443px",
borderRadius: "10px",
padding: "10px",
padding: " 0 20px",
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
overflowY: "auto",
flexGrow: 1,
}}
></Box>
>
{stepTitles &&
stepTitles.map((title, index) => (
<SettingItem
step={index}
title={title}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedFunnelPerformer={selectedFunnelPerformer}
selectedFunnel={selectedFunnel}
selectedStagePerformer={selectedStagePerformer}
selectedDealPerformer={selectedDealPerformer}
selectedStage={selectedStage}
utmFile={utmFile}
/>
))}
</Box>
<Box
sx={{
marginTop: "20px",