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

WIP Step6 and Step 7

Browse Source
This commit is contained in:
aleksandr-raw 2024-04-12 19:07:37 +04:00
parent 64e701a036
commit dce30ad61e
5 changed files with 149 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx
View File

@ -1,20 +1,24 @@
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { Item } from "./Item/Item";
import { someItems } from "../../mocks/MockData";
type IntegrationStep6Props = {
handlePrevStep: () => void;
handleNextStep: () => void;
};
export const IntegrationStep6: FC<IntegrationStep6Props> = ({
handlePrevStep,
handleNextStep,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<Box
sx={{
marginTop: "20px",
display: "flex",
flexDirection: "column",
alignItems: "center",
@ -26,21 +30,32 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
sx={{
marginTop: "20px",
width: "100%",
height: "100%",
height: "420px",
borderRadius: "10px",
padding: "10px",
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
display: "flex",
overflowY: "auto",
flexWrap: "wrap",
}}
></Box>
>
{/*TODO разобраться что за сущность и какая у нее логика*/}
{someItems &&
someItems.map((item) => (
<Item title={item} onAddBtnClick={() => {}} />
))}
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
lineHeight: "1",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
isLargeBtnMissing={true}
onLargeBtnClick={handleNextStep}
/>
</Box>
</Box>

63
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx Normal file
View File

@ -0,0 +1,63 @@
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import AddPlus from "@icons/questionsPage/addPlus";
import { FC } from "react";
type ItemProps = {
title: string;
onAddBtnClick: () => void;
};
//TODO переименовать сущность
export const Item: FC<ItemProps> = ({ title, onAddBtnClick }) => {
const theme = useTheme();
return (
<Box
sx={{
width: "172px",
height: "180px",
display: "flex",
flexDirection: "column",
}}
>
<Box
sx={{
alignSelf: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "12px",
backgroundColor: theme.palette.background.default,
width: "156px",
height: "40px",
}}
>
<Typography sx={{ fontSize: "16px", fontWeight: 500 }}>
{title}
</Typography>
</Box>
<IconButton
onClick={onAddBtnClick}
sx={{
width: "fit-content",
marginTop: "20px",
alignSelf: "center",
circle: {
fill: "#EEE4FC",
},
"&:hover": {
circle: {
fill: theme.palette.brightPurple.main,
},
},
"&:active": {
circle: {
fill: "#581CA7",
},
},
}}
>
<AddPlus />
</IconButton>
</Box>
);
};

47
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep6.tsx Normal file
View File

@ -0,0 +1,47 @@
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
type IntegrationStep7Props = {
handlePrevStep: () => void;
};
export const IntegrationStep7: FC<IntegrationStep7Props> = ({
handlePrevStep,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
flexGrow: 1,
}}
>
<Box
sx={{
marginTop: "20px",
width: "100%",
height: "100%",
borderRadius: "10px",
padding: "10px",
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
}}
></Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
isLargeBtnMissing={true}
/>
</Box>
</Box>
);
};

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

@ -18,6 +18,7 @@ import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
import { IntegrationsModalTitle } from "./IntegrationsModalTitle/IntegrationsModalTitle";
import { SettingsBlock } from "./SettingsBlock/SettingsBlock";
import { IntegrationStep7 } from "./IntegrationStep7/IntegrationStep6";
type IntegrationsModalProps = {
isModalOpen: boolean;
@ -120,10 +121,20 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
/>
),
},
{
title: "Соотнесение вопросов и сущностей",
isSettingsAvailable: true,
component: (
<IntegrationStep6
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
/>
),
},
{
title: "Добавление тегов",
isSettingsAvailable: true,
component: <IntegrationStep6 handlePrevStep={handlePrevStep} />,
component: <IntegrationStep7 handlePrevStep={handlePrevStep} />,
},
],
[

8
src/pages/IntegrationsPage/mocks/MockData.ts
View File

@ -40,3 +40,11 @@ export const stagesMock = [
"Этап 5",
"Этап 6",
];
export const someItems = [
"Контакты",
"Сделки",
"Компании",
"Пользователи",
"Покупатели",
];