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

основные окна настроек адаптивны

Browse Source
This commit is contained in:
Nastya 2024-08-11 05:03:46 +03:00
parent 8a6efc36ed
commit 0c7a54d4ba
15 changed files with 297 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,7 +106,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "12px",
padding: "5px",
height: "305px",
maxHeight: "305px",
overflowY: "auto",
}}
>

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

@ -93,7 +93,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({ items, selectedItemId, set
}, [items, selectedItemId]);
return (
<Box>
<Box mt={"20px"}>
<Box
sx={{
zIndex: 3,

5
src/pages/IntegrationsPage/IntegrationsModal/Amo/AccountInfo.tsx
View File

@ -7,9 +7,10 @@ import AccountSetting from "@icons/AccountSetting";
type AmoAccountInfoProps = {
handleNextStep: () => void;
accountInfo: AccountResponse | null;
toChangeAccount: () => void;
};
export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo }) => {
export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo, toChangeAccount }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -135,7 +136,7 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
width={"20px"}
/>
}
onClick={() => { }}
onClick={toChangeAccount}
sx={{
height: "44px",
padding: "0",

9
src/pages/IntegrationsPage/IntegrationsModal/Amo/DealPerformers.tsx
View File

@ -34,19 +34,20 @@ export const DealPerformers: FC<Props> = ({
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
overflow: "auto",
flexGrow: 1,
}}
>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<Box sx={{ width: "100%", zIndex: 3 }}>
<ModalTitle
{...titleProps}
/>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}

46
src/pages/IntegrationsPage/IntegrationsModal/Amo/ModalTitle.tsx
View File

@ -21,7 +21,7 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return (
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<Box sx={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
<Box>
<Typography
sx={{
@ -39,39 +39,44 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
sx={{
color: "#4D4D4D",
fontSize: "16px",
m: "5px 0 15px 0"
m: "5px 0 15px 0",
whiteSpace: "break-spaces",
width: "90%"
}}
>
{desc}
</Typography>
}
<Typography
sx={{
color: theme.palette.grey2.main,
fontWeight: "400",
marginTop: "4px",
fontSize: "14px",
lineHeight: "1",
}}
>
{step} шаг
</Typography>
<Typography
sx={{
color: theme.palette.grey2.main,
fontWeight: "400",
marginTop: "4px",
fontSize: "14px",
lineHeight: "1",
}}
>
{step} шаг
</Typography>
</Box>
<Box>
<Button
variant="outlined"
startIcon={
<GearIcon
color={theme.palette.brightPurple.main}
height={"24px"}
width={"24px"}
/>
color={theme.palette.brightPurple.main}
height={"24px"}
width={"24px"}
/>
}
onClick={toSettings}
sx={{
height: "44px",
padding: isMobile ? "10px" : "10px 20px",
width: "fit-content",
padding: "0",
width: isMobile ? "44px" : "205px",
minWidth: isMobile ? "44px" : "auto",
backgroundColor: "transparent",
color: theme.palette.brightPurple.main,
"& .MuiButton-startIcon": {
@ -102,6 +107,7 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
>
{isMobile ? "" : "Мои настройки"}
</Button>
</Box>
</Box>
);
};

91
src/pages/IntegrationsPage/IntegrationsModal/Amo/PipelineSteps.tsx
View File

@ -44,53 +44,60 @@ export const PipelineSteps: FC<Props> = ({
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
flexGrow: 1,
}}
>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => {}}
/>
</Box>
<Box
sx={{
marginTop: "20px",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
overflow: "auto",
flexGrow: 1,
}}
>
<Box
sx={{
height: "100%",
overflow: "auto",
zIndex: 3,
width: "100%",
height: "346px",
}}
>
<CustomRadioGroup
items={steps}
selectedItemId={selectedStep}
setSelectedItem={setSelectedStep}
handleScroll={() => {}}
/>
}}>
<Box sx={{ width: "100%", zIndex: 3 }}>
<ModalTitle
{...titleProps}
/>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
/>
</Box>
<Box
sx={{
marginTop: "13px",
flexGrow: 1,
width: "100%",
}}
>
<CustomRadioGroup
items={steps}
selectedItemId={selectedStep}
setSelectedItem={setSelectedStep}
handleScroll={() => { }}
/>
</Box>
</Box>
<Box
sx={{
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handlePrevStep}
/>
</Box>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handlePrevStep}
/>
</Box>
</Box>
</>
);
};

53
src/pages/IntegrationsPage/IntegrationsModal/Amo/Pipelines.tsx
View File

@ -42,44 +42,51 @@ export const Pipelines: FC<Props> = ({
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
overflow: "auto",
flexGrow: 1,
}}
>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
/>
</Box>
<Box
sx={{
marginTop: "20px",
flexGrow: 1,
height: "100%",
overflow: "auto",
zIndex: 3,
width: "100%",
height: "346px",
}}
>
<CustomRadioGroup
items={pipelines}
selectedItemId={selectedPipeline}
setSelectedItem={setSelectedPipeline}
handleScroll={() => { }}
/>
}}>
<Box sx={{ width: "100%", zIndex: 3 }}>
<ModalTitle
{...titleProps}
/>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
/>
</Box>
<Box
sx={{
marginTop: "13px",
flexGrow: 1,
width: "100%",
}}
>
<CustomRadioGroup
items={pipelines}
selectedItemId={selectedPipeline}
setSelectedItem={setSelectedPipeline}
handleScroll={() => { }}
/>
</Box>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>

136
src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/AmoQuestions.tsx
View File

@ -7,6 +7,7 @@ import { EntitiesQuestions } from "./EntitiesQuestions";
import { diffArr } from "..";
import { DataConstrictor } from "../Components/DataConstrictor";
import { ModalTitle } from "../ModalTitle";
import { StepButtonsBlock } from "../StepButtonsBlock";
type Props = {
selectedCurrentFields: MinifiedData[] | [];
@ -132,66 +133,83 @@ export const AmoQuestions: FC<Props> = ({
}, [activeScope])
return (
<>
<ModalTitle
{...titleProps}
desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
flexGrow: 1,
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={false}
constrictor={startConstrictor}
/>
<EntitiesQuestions
FieldsAllowedFC={sortedFieldsAllowedFC}
fieldsItems={sortedFieldsItems}
items={(sortedquestionsItems.length === 0) ? [] : diffArr(sortedquestionsItems, selectedQuestions[activeScope])}
selectedItemId={selectedQuestion}
setSelectedQuestion={setSelectedQuestion}
selectedField={selectedField}
selectedCurrentFields={selectedCurrentFields}
setSelectedField={setSelectedField}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
activeScope={activeScope}
setIsCurrentFields={setIsCurrentFields}
isCurrentFields={isCurrentFields}
/>
</>
) : (
// Табличка
<ItemDetailsView
items={[...questionsItems, ...FieldsAllowedFC]}
setActiveScope={setActiveScope}
selectedQuestions={{
Lead: [...selectedQuestions.Lead, ...SCFworld.Lead],
Company: [...selectedQuestions.Company, ...SCFworld.Company],
Customer: [...selectedQuestions.Customer, ...SCFworld.Customer],
Contact: [...selectedQuestions.Contact, ...SCFworld.Contact]
}}
setIsSelection={setIsSelection}
handleLargeBtn={handleNextStep}
handleSmallBtn={handlePrevStep}
deleteHC={handleDelete}
<Box
sx={{
height: "calc( 100% - 70px )",
overflow: "auto"
}}
>
<ModalTitle
{...titleProps}
desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
/>
)}
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
flexGrow: 1,
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={false}
constrictor={startConstrictor}
/>
<EntitiesQuestions
FieldsAllowedFC={sortedFieldsAllowedFC}
fieldsItems={sortedFieldsItems}
items={(sortedquestionsItems.length === 0) ? [] : diffArr(sortedquestionsItems, selectedQuestions[activeScope])}
selectedItemId={selectedQuestion}
setSelectedQuestion={setSelectedQuestion}
selectedField={selectedField}
selectedCurrentFields={selectedCurrentFields}
setSelectedField={setSelectedField}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
activeScope={activeScope}
setIsCurrentFields={setIsCurrentFields}
isCurrentFields={isCurrentFields}
/>
</>
) : (
// Табличка
<ItemDetailsView
items={[...questionsItems, ...FieldsAllowedFC]}
setActiveScope={setActiveScope}
selectedQuestions={{
Lead: [...selectedQuestions.Lead, ...SCFworld.Lead],
Company: [...selectedQuestions.Company, ...SCFworld.Company],
Customer: [...selectedQuestions.Customer, ...SCFworld.Customer],
Contact: [...selectedQuestions.Contact, ...SCFworld.Contact]
}}
setIsSelection={setIsSelection}
deleteHC={handleDelete}
/>
)}
</Box>
</Box>
<Box
sx={{
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
largeBtnText={"Сохранить"}
/>
</Box>
</>
);
};

16
src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemDetailsView/ItemDetailsView.tsx
View File

@ -9,8 +9,6 @@ type TitleKeys = "Contact" | "Company" | "Lead" | "Customer";
type ItemDetailsViewProps = {
items: MinifiedData[];
setIsSelection: (value: boolean) => void;
handleSmallBtn: () => void;
handleLargeBtn: () => void;
selectedQuestions: SelectedQuestions;
setActiveScope: (value: QuestionKeys | null) => void;
deleteHC: (id: string, scope: QuestionKeys) => void;
@ -18,8 +16,6 @@ type ItemDetailsViewProps = {
export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
items,
handleSmallBtn,
handleLargeBtn,
selectedQuestions,
setIsSelection,
setActiveScope,
@ -68,18 +64,6 @@ export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
))}
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handleSmallBtn}
onLargeBtnClick={handleLargeBtn}
largeBtnText={"Сохранить"}
/>
</Box>
</Box>
);
};

8
src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItem.tsx
View File

@ -9,8 +9,7 @@ import { SelectedQuestions, SelectedTags } from "../../types";
type SettingItemProps = {
step: number;
title: string;
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
setStep: (step: number) => void;
selectedFunnelPerformer: string | null;
selectedFunnel: string | null;
selectedStagePerformer: string | null;
@ -24,7 +23,6 @@ export const SettingItem: FC<SettingItemProps> = ({
step,
title,
setStep,
setIsSettingsBlock,
selectedFunnelPerformer,
selectedFunnel,
selectedStagePerformer,
@ -34,6 +32,7 @@ export const SettingItem: FC<SettingItemProps> = ({
selectedTags,
}) => {
const theme = useTheme();
console.log(step)
const isMobile = useMediaQuery(theme.breakpoints.down(600));
if (step === 0) {
return;
@ -146,8 +145,7 @@ export const SettingItem: FC<SettingItemProps> = ({
<SettingItemHeader
title={title}
step={step}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
setStep={() => setStep(step)}
/>
<Box>{SettingsContent}</Box>
</Box>

11
src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingItem/SettingItemHeader/SettingItemHeader.tsx
View File

@ -6,23 +6,16 @@ import { FC } from "react";
type SettingItemHeaderProps = {
title: string;
step: number;
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
setStep: () => void;
};
export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
title,
step,
setStep,
setIsSettingsBlock,
}) => {
const theme = useTheme();
const handleClick = () => {
setStep(step);
setIsSettingsBlock(false);
};
return (
<Box>
<Box
@ -41,7 +34,7 @@ export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
>
{step} этап
</Typography>
<IconButton onClick={handleClick}>
<IconButton onClick={setStep}>
<EditPencil
color={theme.palette.brightPurple.main}
width={"18px"}

37
src/pages/IntegrationsPage/IntegrationsModal/Amo/SettingsBlock/SettingsBlock.tsx
View File

@ -1,49 +1,59 @@
import { FC } from "react";
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { StepButtonsBlock } from "../StepButtonsBlock";
import { SettingItem } from "./SettingItem/SettingItem";
import { SelectedQuestions, SelectedTags } from "../types";
type AmoSettingsBlockProps = {
stepTitles: string[];
setStep: (value: number) => void;
setIsSettingsBlock: (value: boolean) => void;
selectedFunnel: string | null;
selectedStage: string | null;
selectedDealUser: string | null;
selectedQuestions: SelectedQuestions;
selectedTags: SelectedTags;
toBack: () => void
setStep: (step: number) => void
};
export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
stepTitles,
setStep,
setIsSettingsBlock,
selectedFunnel,
selectedDealUser,
selectedStage,
selectedQuestions,
selectedTags,
toBack,
setStep,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return (
<Box sx={{ flexGrow: 1, width: "100%" }}>
<Box sx={{ flexGrow: 1, width: "100%", height: "100%"}}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
flexGrow: 1,
}}
>
<Typography
sx={{
fontSize: "24px",
fontWeight: 500,
lineHeight: "28.44px"
}}
>
Мои настройки
</Typography>
<Box
sx={{
marginTop: "10px",
marginTop: "20px",
width: "100%",
height: "443px",
minHheight: "440px",
maxHeight: "90%",
borderRadius: "10px",
padding: " 0 20px",
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
@ -54,26 +64,25 @@ export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
{stepTitles &&
stepTitles.map((title, index) => (
<SettingItem
step={index}
step={index+1}
title={title}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealUser={selectedDealUser}
selectedFunnel={selectedFunnel}
selectedStage={selectedStage}
selectedQuestions={selectedQuestions}
selectedTags={selectedTags}
setStep={setStep}
/>
))}
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={() => setIsSettingsBlock(false)}
onSmallBtnClick={toBack}
isLargeBtnMissing={true}
/>
</Box>

23
src/pages/IntegrationsPage/IntegrationsModal/Amo/SwitchPages.tsx
View File

@ -90,7 +90,7 @@ export const SwitchPages = ({
handleCloseModal,
}: Props) => {
const [step, setStep] = useState(0)
const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo")
const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">(accountInfo ? "accountInfo" : "amoLogin")
const [openDelete, setOpenDelete] = useState<TagQuestionHC | null>(null);
@ -226,6 +226,8 @@ export const SwitchPages = ({
}
body.FieldsRule = FieldsRule;
console.log(body)
// if (firstRules) {
// setIntegrationRules(quiz.backendId.toString(), body);
// } else {
@ -353,14 +355,12 @@ export const SwitchPages = ({
/>
case "removeAccount":
return <RemoveAccount
handleCloseModal={closeSpecialPage}
handleCloseModal={handleCloseModal}
stopThisPage={closeSpecialPage}
/>
case "settingsBlock":
return <SettingsBlock
stepTitles={stepTitles}
setIsSettingsBlock={setIsSettingsBlock}
setStep={setStep}
selectedDealUser={arrayOfUsers.find((u) => u.id === selectedDealUser)?.title || "не указан"}
selectedFunnel={arrayOfPipelines.find((p) => p.id === selectedPipeline)?.title || "нет данных"}
selectedStage={
@ -368,15 +368,26 @@ export const SwitchPages = ({
}
selectedQuestions={selectedQuestions}
selectedTags={selectedTags}
toBack={() => closeSpecialPage()}
setStep={(step: number) => {
closeSpecialPage()
setStep(step)
}}
/>
case "amoLogin": return <AmoLogin handleNextStep={handleNextStep} />
case "accountInfo": return <AccountInfo
handleNextStep={() => setSpecialPage("")}
handleNextStep={() => closeSpecialPage()}
accountInfo={accountInfo}
toChangeAccount={() => setSpecialPage("removeAccount")}
/>
default: return <Box sx={{ flexGrow: 1, width: "100%" }}>{steps[step].component}</Box>
default: return <Box sx={{
flexGrow: 1,
width: "100%",
height: "100%",
overflow: "auto"
}}>{steps[step].component}</Box>
}
}

101
src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/AmoTags.tsx
View File

@ -5,6 +5,7 @@ import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types";
import { DataConstrictor } from "../Components/DataConstrictor";
import { ModalTitle } from "../ModalTitle";
import { StepButtonsBlock } from "../StepButtonsBlock";
type Props = {
tagsItems: MinifiedData[] | [];
@ -57,53 +58,67 @@ export const AmoTags: FC<Props> = ({
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
height: "calc( 100% - 70px )",
overflow: "auto"
}}
>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
flexGrow: 1,
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={sortedTagsItems.length === 0}
constrictor={startConstrictor}
/>
<ItemsSelectionView
items={sortedTagsItems}
selectedItemId={selectedTag}
setSelectedItem={setSelectedTag}
handleScroll={handleScroll}
activeScope={activeScope}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
/>
</>
) : (
// Табличка
<TagsDetailsView
items={tagsItems}
setActiveScope={setActiveScope}
selectedTags={selectedTags}
setIsSelection={setIsSelection}
deleteHC={handleDelete}
/>
)}
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
flexGrow: 1,
alignSelf: "end",
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={sortedTagsItems.length === 0}
constrictor={startConstrictor}
/>
<ItemsSelectionView
items={sortedTagsItems}
selectedItemId={selectedTag}
setSelectedItem={setSelectedTag}
handleScroll={handleScroll}
activeScope={activeScope}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
/>
</>
) : (
// Табличка
<TagsDetailsView
items={tagsItems}
setActiveScope={setActiveScope}
selectedTags={selectedTags}
setIsSelection={setIsSelection}
handleNextStep={handleNextStep}
handlePrevStep={handlePrevStep}
deleteHC={handleDelete}
/>
)}
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
/>
</Box>
</>
);

19
src/pages/IntegrationsPage/IntegrationsModal/Amo/Tags/TagsDetailsView/TagsDetailsView.tsx
View File

@ -7,8 +7,6 @@ import { MinifiedData, SelectedTags, TagKeys } from "../../types";
type TagsDetailsViewProps = {
items: MinifiedData[];
setIsSelection: (value: boolean) => void;
handlePrevStep: () => void;
handleNextStep: () => void;
setActiveScope: (value: TagKeys | null) => void;
selectedTags: SelectedTags;
deleteHC: (id: string, scope: TagKeys) => void;
@ -19,8 +17,6 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
setActiveScope,
selectedTags,
setIsSelection,
handlePrevStep,
handleNextStep,
deleteHC,
}) => {
const theme = useTheme();
@ -30,7 +26,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
return (
<Box
sx={{
marginTop: "20px",
marginTop: "15px",
display: "flex",
flexDirection: "column",
alignItems: "center",
@ -41,7 +37,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
<Box
sx={{
width: "100%",
height: "400px",
maxHeight: "380px",
flexGrow: 1,
borderRadius: "10px",
padding: "10px",
@ -88,17 +84,6 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
))}
</Box>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
/>
</Box>
</Box>
);
};