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

fix визуал инфо о акке, выставление заголовков на шаги

Browse Source
This commit is contained in:
Nastya 2024-08-11 02:18:27 +03:00
parent 7766c2d3a5
commit 8a6efc36ed
10 changed files with 300 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,14 +6,14 @@ import AccountSetting from "@icons/AccountSetting";
type AmoAccountInfoProps = {
handleNextStep: () => void;
accountInfo: AccountResponse;
accountInfo: AccountResponse | null;
};
export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const infoItem = (title: string, value: string | number) => (
const infoItem = (title: string, value: string | number | undefined) => (
<Box
sx={{
display: "flex",
@ -38,7 +38,7 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
</Box>
);
const infoItemLink = (title: string, link: string) => (
const infoItemLink = (title: string, link: string | undefined) => (
<Box
sx={{
display: "flex",
@ -46,58 +46,59 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
mt: "20px",
}}
>
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
<Box sx={{ width: "100%" }}>
<Typography sx={{
color: theme.palette.grey2.main,
fontSize: "16px",
lineHeight: "18.96px",
}}>{title}:</Typography>
</Box>
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
<a
target="_blank"
href={link}
style={{
wordBreak: "break-word",
fontSize: "18px",
lineHeight: "21.33px",
color: "#7E2AEA"
}}
>
{link}
</a>
<Box sx={{ width: "100%" }}>
{
link ?
<a
target="_blank"
href={link}
style={{
wordBreak: "break-word",
fontSize: "18px",
lineHeight: "21.33px",
color: "#7E2AEA"
}}
>
{link}
</a>
:
<Typography>не указана</Typography>
}
</Box>
</Box >
);
return (
<Box
className="инфокомпонент"
sx={{
display: "inline-flex",
flexDirection: "column",
// flexDirection: "column",
// alignItems: "center",
justifyContent: "space-between",
height: "100%",
overflow: "auto",
flexGrow: 1,
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
display: "flex",
justifyContent: "space-between",
width: "100%"
flexDirection: isMobile ? "column" : "row",
width: "100%",
height: "100%",
overflow: "auto",
}}
>
<Box
sx={{
// marginTop: isMobile ? "20px" : "60px",
// display: "flex",
// flexDirection: "column",
// gap: isMobile ? "10px" : "20px",
}}
>
<Box>
<Typography
sx={{
fontSize: "18px",
@ -109,35 +110,37 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
</Typography>
<Typography
sx={{
color: "#4D4D4D",
fontSize: "16px",
m: "5px 0 19px 0",
lineHeight: "16.59px",
color: theme.palette.grey2.main,
fontSize: "14px",
}}
>
1 шаг
</Typography>
{infoItem("Amo ID", accountInfo.amoID)}
{infoItem("Имя аккаунта", accountInfo.name)}
{/* {infoItem("Email аккаунта", accountInfo.email)} */}
{infoItemLink("ЛК в amo", `https://${accountInfo.subdomain}.amocrm.ru/dashboard/`)}
{infoItemLink("Профиль пользователя в amo", `https://${accountInfo.subdomain}.amocrm.ru/settings/users/`)}
{infoItem("Страна пользователя", accountInfo.country)}
{infoItem("Amo ID", accountInfo?.amoID)}
{infoItem("Имя аккаунта", accountInfo?.name)}
{infoItemLink("ЛК в amo", `https://${accountInfo?.subdomain}.amocrm.ru/dashboard/`)}
{infoItemLink("Профиль пользователя в amo", `https://${accountInfo?.subdomain}.amocrm.ru/settings/users/`)}
{infoItem("Страна пользователя", accountInfo?.country)}
</Box>
<Box>
<Button
variant="outlined"
startIcon={
<AccountSetting
color={theme.palette.brightPurple.main}
height={"20px"}
width={"20px"}
/>
color={theme.palette.brightPurple.main}
height={"20px"}
width={"20px"}
/>
}
onClick={() => { }}
sx={{
height: "44px",
padding: isMobile ? "10px" : "10px 20px",
width: "fit-content",
padding: "0",
mt: isMobile ? "30px" : "0",
width: "205px",
backgroundColor: "transparent",
color: theme.palette.brightPurple.main,
"& .MuiButton-startIcon": {
@ -166,8 +169,9 @@ export const AccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountIn
},
}}
>
{isMobile ? "" : "Сменить аккаунт"}
Сменить аккаунт
</Button>
</Box>
</Box>
<StepButtonsBlock
isSmallBtnDisabled={true}

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

@ -3,6 +3,7 @@ import { FC } from "react";
import { StepButtonsBlock } from "./StepButtonsBlock";
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
import { MinifiedData } from "./types";
import { ModalTitle } from "./ModalTitle";
type Props = {
users: MinifiedData[];
@ -10,6 +11,13 @@ type Props = {
handleNextStep: () => void;
selectedDealUser: string | null;
setSelectedDealPerformer: (value: string | null) => void;
titleProps: {
step: number;
title: string;
desc: string;
toSettings: () => void;
}
};
export const DealPerformers: FC<Props> = ({
@ -18,12 +26,17 @@ export const DealPerformers: FC<Props> = ({
handleNextStep,
selectedDealUser,
setSelectedDealPerformer,
titleProps,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
@ -53,5 +66,6 @@ export const DealPerformers: FC<Props> = ({
/>
</Box>
</Box>
</>
);
};

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

@ -6,38 +6,20 @@ import AccountSetting from "@icons/AccountSetting";
type AmoModalTitleProps = {
step: number;
steps: { title: string; isSettingsAvailable: boolean }[];
isSettingsBlock?: boolean;
setIsSettingsBlock: (value: boolean) => void;
setStep: (value: number) => void;
startRemoveAccount: () => void;
title: string;
desc: string;
toSettings: () => void;
};
export const ModalTitle: FC<AmoModalTitleProps> = ({
step,
steps,
setIsSettingsBlock,
isSettingsBlock,
setStep,
startRemoveAccount,
title,
desc,
toSettings,
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const handleClick = useCallback(async () => {
if (isSettingsBlock) {
startRemoveAccount();
setIsSettingsBlock(false);
setStep(0);
return;
}
setIsSettingsBlock(true);
}, [isSettingsBlock, setIsSettingsBlock, setStep]);
const btnText = useMemo(() => {
return isSettingsBlock ? "Сменить аккаунт" : "Мои настройки";
}, [isSettingsBlock]);
return (
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<Box>
@ -49,10 +31,10 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
lineHeight: "1",
}}
>
{isSettingsBlock ? "Мои настройки" : steps[step].title}
{title}
</Typography>
{
steps[step].desc &&
desc &&
<Typography
sx={{
color: "#4D4D4D",
@ -60,10 +42,9 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
m: "5px 0 15px 0"
}}
>
{steps[step].desc}
{desc}
</Typography>
}
{isSettingsBlock || (
<Typography
sx={{
color: theme.palette.grey2.main,
@ -73,29 +54,20 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
lineHeight: "1",
}}
>
Шаг {step + 1}
{step} шаг
</Typography>
)}
</Box>
{steps[step].isSettingsAvailable && (
<Button
variant="outlined"
startIcon={
isSettingsBlock ? (
<AccountSetting
color={theme.palette.brightPurple.main}
height={"20px"}
width={"20px"}
/>
) : (
<GearIcon
<GearIcon
color={theme.palette.brightPurple.main}
height={"24px"}
width={"24px"}
/>
)
}
onClick={handleClick}
onClick={toSettings}
sx={{
height: "44px",
padding: isMobile ? "10px" : "10px 20px",
@ -128,9 +100,8 @@ export const ModalTitle: FC<AmoModalTitleProps> = ({
},
}}
>
{isMobile ? "" : btnText}
{isMobile ? "" : "Мои настройки"}
</Button>
)}
</Box>
);
};

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

@ -4,6 +4,7 @@ import { StepButtonsBlock } from "./StepButtonsBlock";
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
import { MinifiedData } from "./types";
import { ModalTitle } from "./ModalTitle";
type Props = {
users: MinifiedData[];
@ -14,6 +15,13 @@ type Props = {
setSelectedDealPerformer: (value: string | null) => void;
selectedStep: string | null;
setSelectedStep: (value: string | null) => void;
titleProps: {
step: number;
title: string;
desc: string;
toSettings: () => void;
}
};
export const PipelineSteps: FC<Props> = ({
@ -27,12 +35,18 @@ export const PipelineSteps: FC<Props> = ({
handlePrevStep,
handleNextStep,
titleProps
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
@ -77,5 +91,6 @@ export const PipelineSteps: FC<Props> = ({
/>
</Box>
</Box>
</>
);
};

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

@ -4,6 +4,7 @@ import { StepButtonsBlock } from "./StepButtonsBlock";
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
import { MinifiedData } from "./types";
import { ModalTitle } from "./ModalTitle";
type Props = {
pipelines: MinifiedData[];
@ -14,12 +15,20 @@ type Props = {
setSelectedDealPerformer: (value: string | null) => void;
selectedPipeline: string | null;
setSelectedPipeline: (value: string | null) => void;
titleProps: {
step: number;
title: string;
desc: string;
toSettings: () => void;
}
};
export const Pipelines: FC<Props> = ({
pipelines,
selectedPipeline,
setSelectedPipeline,
titleProps,
users,
selectedDealUser,
@ -32,49 +41,54 @@ export const Pipelines: FC<Props> = ({
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
return (
<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>
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
marginTop: "20px",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
flexGrow: 1,
width: "100%",
height: "346px",
}}
>
<CustomRadioGroup
items={pipelines}
selectedItemId={selectedPipeline}
setSelectedItem={setSelectedPipeline}
handleScroll={() => {}}
/>
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
<CustomSelect
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
/>
</Box>
<Box
sx={{
marginTop: "20px",
flexGrow: 1,
width: "100%",
height: "346px",
}}
>
<CustomRadioGroup
items={pipelines}
selectedItemId={selectedPipeline}
setSelectedItem={setSelectedPipeline}
handleScroll={() => { }}
/>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handlePrevStep}
/>
</Box>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={handleNextStep}
onSmallBtnClick={handlePrevStep}
/>
</Box>
</Box>
</>
);
};

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

@ -6,6 +6,7 @@ import { MinifiedData, QuestionKeys, SelectedQuestions, TagKeys, TagQuestionHC }
import { EntitiesQuestions } from "./EntitiesQuestions";
import { diffArr } from "..";
import { DataConstrictor } from "../Components/DataConstrictor";
import { ModalTitle } from "../ModalTitle";
type Props = {
selectedCurrentFields: MinifiedData[] | [];
@ -18,6 +19,11 @@ type Props = {
handleNextStep: () => void;
FieldsAllowedFC: MinifiedData[]
setSelectedCurrentFields: (value: MinifiedData[]) => void;
titleProps: {
step: number;
title: string;
toSettings: () => void;
}
};
export type QuestionPair = {
question: string,
@ -40,7 +46,8 @@ export const AmoQuestions: FC<Props> = ({
handleNextStep,
openDelete,
FieldsAllowedFC,
setSelectedCurrentFields
setSelectedCurrentFields,
titleProps,
}) => {
const [isSelection, setIsSelection] = useState<boolean>(false);
const [activeScope, setActiveScope] = useState<QuestionKeys | null>(null);
@ -109,17 +116,6 @@ export const AmoQuestions: FC<Props> = ({
const [sortedFieldsItems, setSortedFieldsItems] = useState<MinifiedData[]>(fieldsItems);
const [sortedquestionsItems, setSortedquestionsItems] = useState<MinifiedData[]>(questionsItems);
console.log("допущенные ФОРМА КОНТАКТОВ")
console.log(FieldsAllowedFC)
console.log("фильтрованные")
console.log(sortedFieldsAllowedFC)
console.log("")
console.log("допущенные вапросы")
console.log(questionsItems)
console.log("фильтрованные")
console.log(sortedquestionsItems)
const startConstrictor = (substr: string) => {
const a = FieldsAllowedFC.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
const b = fieldsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
@ -135,6 +131,11 @@ export const AmoQuestions: FC<Props> = ({
setSortedquestionsItems(questionsItems);
}, [activeScope])
return (
<>
<ModalTitle
{...titleProps}
desc={isSelection && activeScope !== null ? "На этом этапе вы можете соотнести ваше ранее созданное поле с вопросом из квиза или добавить новое поле" : "На этом этапе вы можете добавить в поля соответствующие вопросы"}
/>
<Box
sx={{
display: "flex",
@ -144,14 +145,12 @@ export const AmoQuestions: FC<Props> = ({
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={false}
constrictor={startConstrictor}
/>
{/* табличка */}
<EntitiesQuestions
FieldsAllowedFC={sortedFieldsAllowedFC}
fieldsItems={sortedFieldsItems}
@ -175,21 +174,6 @@ export const AmoQuestions: FC<Props> = ({
isCurrentFields={isCurrentFields}
/>
</>
// Здесь выбираем элемент в табличку
// <ItemsSelectionView
// items={questionsItems}
// selectedItemId={selectedQuestion}
// setSelectedItem={setSelectedQuestion}
// onSmallBtnClick={() => {
// setActiveScope(null);
// setIsSelection(false);
// }}
// onLargeBtnClick={() => {
// handleAdd();
// setActiveScope(null);
// setIsSelection(false);
// }}
// />
) : (
// Табличка
<ItemDetailsView
@ -208,5 +192,6 @@ export const AmoQuestions: FC<Props> = ({
/>
)}
</Box>
</>
);
};

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

@ -30,9 +30,10 @@ export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
<Box
sx={{
display: "flex",
justifyContent: "end",
alignItems: "end",
gap: "10px",
marginTop: "auto",
marginLeft: "auto",
mt: "20px"
}}
>
{isSmallBtnMissing || (

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

@ -46,19 +46,19 @@ interface Props {
selectedCurrentFields: MinifiedData[];
selectedPipelineStep: string | null;
selectedDealUser: string | null;
setSelectedPipeline:any;
setSelectedPipelineStep:any;
setSelectedDealPerformer:any;
selectedTags:any;
setSelectedTags:any;
selectedQuestions:any;
setSelectedQuestions:any;
setPageOfPipelines:any;
setPageOfPipelinesSteps:any;
setPageOfUsers:any;
setPageOfTags:any;
setSelectedCurrentFields:any;
handleCloseModal:any;
setSelectedPipeline: any;
setSelectedPipelineStep: any;
setSelectedDealPerformer: any;
selectedTags: any;
setSelectedTags: any;
selectedQuestions: any;
setSelectedQuestions: any;
setPageOfPipelines: any;
setPageOfPipelinesSteps: any;
setPageOfUsers: any;
setPageOfTags: any;
setSelectedCurrentFields: any;
handleCloseModal: any;
}
export const SwitchPages = ({
@ -88,7 +88,6 @@ export const SwitchPages = ({
setPageOfTags,
setSelectedCurrentFields,
handleCloseModal,
}: Props) => {
const [step, setStep] = useState(0)
const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">("accountInfo")
@ -122,29 +121,29 @@ export const SwitchPages = ({
},
[quiz]
);
const handleAddTagQuestion = (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
if (!scope || !id) return;
const handleAddTagQuestion = (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => {
if (!scope || !id) return;
if (type === "tag") {
setSelectedTags((prevState) => ({
...prevState,
[scope]: [...prevState[scope as TagKeys], id],
}));
}
if (type === "question") {
const q = questions.find(e => e.backendId === Number(id))
setSelectedQuestions((prevState) => ({
...prevState,
[scope]: [...prevState[scope as QuestionKeys], {
id,
title: q?.title || "вопрос",
entity: scope,
}],
}));
}
if (type === "tag") {
setSelectedTags((prevState) => ({
...prevState,
[scope]: [...prevState[scope as TagKeys], id],
}));
}
if (type === "question") {
const q = questions.find(e => e.backendId === Number(id))
setSelectedQuestions((prevState) => ({
...prevState,
[scope]: [...prevState[scope as QuestionKeys], {
id,
title: q?.title || "вопрос",
entity: scope,
}],
}));
}
}
const handleDeleteTagQuestion = () => {
if (openDelete === null || !openDelete.scope || !openDelete.id || !openDelete.type) return;
if (openDelete.type === "tag") {
@ -233,7 +232,7 @@ export const SwitchPages = ({
// updateIntegrationRules(quiz.backendId.toString(), body);
// }
handleCloseModal();
handleCloseModal();
};
@ -241,25 +240,27 @@ export const SwitchPages = ({
const steps = [
{
title: "Выбор воронки",
desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку",
isSettingsAvailable: true,
component: (
<Pipelines
users={arrayOfUsers}
pipelines={arrayOfPipelines}
handlePrevStep={handlePrevStep}
handlePrevStep={() => setSpecialPage("accountInfo")}
handleNextStep={handleNextStep}
selectedDealUser={selectedDealUser}
setSelectedDealPerformer={setSelectedDealPerformer}
selectedPipeline={selectedPipeline}
setSelectedPipeline={setSelectedPipeline}
titleProps={{
step: step + 2,
title: "Выбор воронки",
desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
/>
),
},
{
title: "Выбор этапа воронки",
desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку",
isSettingsAvailable: true,
component: (
<PipelineSteps
@ -271,12 +272,16 @@ export const SwitchPages = ({
setSelectedStep={setSelectedPipelineStep}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
titleProps={{
step: step + 2,
title: "Выбор этапа воронки",
desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
/>
),
},
{
title: "Сделка",
desc: "На этом этапе вы можете выбрать ответственного за сделку",
isSettingsAvailable: true,
component: (
<DealPerformers
@ -285,11 +290,16 @@ export const SwitchPages = ({
users={arrayOfUsers}
selectedDealUser={selectedDealUser}
setSelectedDealPerformer={setSelectedDealPerformer}
titleProps={{
step: step + 2,
title: "Сделка",
desc: "На этом этапе вы можете выбрать ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
/>
),
},
{
title: "Добавление тегов",
isSettingsAvailable: true,
component: (
<AmoTags
@ -300,11 +310,16 @@ export const SwitchPages = ({
handleAddTag={handleAddTagQuestion}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
titleProps={{
step: step + 2,
title: "Добавление тегов",
desc: "На этом этапе вы можете добавить теги с результатами",
toSettings: () => setSpecialPage("settingsBlock")
}}
/>
),
},
{
title: "Соотнесение вопросов и сущностей",
isSettingsAvailable: true,
component: (
<AmoQuestions
@ -318,6 +333,11 @@ export const SwitchPages = ({
handlePrevStep={handlePrevStep}
handleNextStep={handleSave}
FieldsAllowedFC={FieldsAllowedFC}
titleProps={{
step: step + 2,
title: "Соотнесение вопросов и сущностей",
toSettings: () => setSpecialPage("settingsBlock")
}}
/>
),
},
@ -351,7 +371,7 @@ export const SwitchPages = ({
/>
case "amoLogin": return <AmoLogin handleNextStep={handleNextStep} />
case "accountInfo": return <AccountInfo
handleNextStep={handleNextStep}
handleNextStep={() => setSpecialPage("")}
accountInfo={accountInfo}
/>
@ -361,13 +381,13 @@ export const SwitchPages = ({
}
// const S = <ModalTitle
// step={1}
// steps={2}
// isSettingsBlock={true}
// setIsSettingsBlock={setIsSettingsBlock}
// setStep={setStep}
// startRemoveAccount={() => setSpecialPage("removeAccount")}
// />
// step={1}
// steps={2}
// isSettingsBlock={true}
// setIsSettingsBlock={setIsSettingsBlock}
// setStep={setStep}
// startRemoveAccount={() => setSpecialPage("removeAccount")}
// />
// title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте",

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

@ -4,6 +4,7 @@ import { ItemsSelectionView } from "../Questions/ItemsSelectionView/ItemsSelecti
import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
import { MinifiedData, QuestionKeys, SelectedTags, TagKeys, TagQuestionHC } from "../types";
import { DataConstrictor } from "../Components/DataConstrictor";
import { ModalTitle } from "../ModalTitle";
type Props = {
tagsItems: MinifiedData[] | [];
@ -13,6 +14,12 @@ type Props = {
handleScroll: () => void;
handlePrevStep: () => void;
handleNextStep: () => void;
titleProps: {
step: number;
title: string;
desc: string;
toSettings: () => void;
}
};
export const AmoTags: FC<Props> = ({
@ -23,6 +30,7 @@ export const AmoTags: FC<Props> = ({
handleScroll,
handlePrevStep,
handleNextStep,
titleProps,
}) => {
const [sortedTagsItems, setSortedTagsItems] = useState<MinifiedData[] | []>(tagsItems);
@ -43,55 +51,60 @@ export const AmoTags: FC<Props> = ({
});
};
const startConstrictor = (substr: string) => {
const a = tagsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
setSortedTagsItems(a);
const a = tagsItems.filter((mData) => mData.title.toLowerCase().startsWith(substr.toLowerCase()))
setSortedTagsItems(a);
}
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
flexGrow: 1,
}}
>
{isSelection && activeScope !== null ? (
// Здесь выбираем элемент в табличку
<>
<DataConstrictor
isError={sortedTagsItems.length === 0}
constrictor={startConstrictor}
<>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100%",
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}
handleNextStep={handleNextStep}
handlePrevStep={handlePrevStep}
deleteHC={handleDelete}
/>
<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}
/>
)}
</Box>
)}
</Box>
</>
);
};

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

@ -74,11 +74,12 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
PaperProps={{
sx: {
maxWidth: isTablet ? "100%" : "919px",
maxHeight: isTablet ? "100%" : "658px",
height: "658px",
borderRadius: "12px",
},
}}
>
<Box>
<Box
sx={{
width: "100%",
@ -109,15 +110,17 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
>
<CloseIcon sx={{ width: "12px", height: "12px", transform: "scale(1.5)" }} />
</IconButton>
</Box>
<Box
className="родитель"
sx={{
display: "flex",
flexDirection: "column",
width: isTablet ? "100%" : "919px",
height: "600px",
width: "100%",
padding: "15px 20px 15px",
flexGrow: 1,
height: "100%",
overflow: "auto"
}}
>
{isLoadingPage ?