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

корректная работа скроллов, работает удаление ячеек

Browse Source
This commit is contained in:
Nastya 2024-08-14 04:19:14 +03:00
parent 0c7a54d4ba
commit 924c488af3
15 changed files with 280 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import AmoLogo from "../../assets/icons/Amologo.png";
import AmoLogo from "@/assets/icons/Amologo.png";
import { FC } from "react";
type AmoButtonProps = {

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

@ -3,6 +3,8 @@ import { FC, useMemo } from "react";
import CheckboxIcon from "@icons/Checkbox";
import { SelectChangeEvent, Typography, useTheme, Box, FormControlLabel, RadioGroup, Radio, useMediaQuery } from "@mui/material";
import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";
import { determineScrollBottom } from "@/utils/throttle";
import { throttle } from "@frontend/kitui";
type CustomRadioGroupProps = {
items: MinifiedData[] | [];
@ -34,17 +36,6 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
return item.entity === activeScope;
}) : items
const onScroll = React.useCallback((e: React.UIEvent<HTMLDivElement>) => {
const scrollHeight = e.currentTarget.scrollHeight;
const scrollTop = e.currentTarget.scrollTop;
const clientHeight = e.currentTarget.clientHeight;
const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9;
if (scrolledToBottom) {
handleScroll();
}
}, []);
const formControlLabels =
(filteredItems.length !== 0) ?
filteredItems.map((item) => (
@ -101,7 +92,8 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
return (
<Box
onScroll={handleScroll}
onScroll={(e) => determineScrollBottom(e, throttle(handleScroll, 700))}
sx={{
border: `1px solid ${theme.palette.grey2.main}`,
borderRadius: "12px",
@ -115,7 +107,6 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
name="controlled-radio-buttons-group"
value={selectedItemId}
onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
onScroll={onScroll}
>
{formControlLabels}
</RadioGroup>

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

@ -1,8 +1,10 @@
import * as React from "react";
import { FC, useCallback, useMemo, useRef, useState } from "react";
import { Avatar, MenuItem, Select, SelectChangeEvent, Typography, useMediaQuery, useTheme, Box } from "@mui/material";
import arrow_down from "../../assets/icons/arrow_down.svg";
import arrow_down from "@/assets/icons/arrow_down.svg";
import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";
import { throttle } from "@frontend/kitui";
import { determineScrollBottom } from "@/utils/throttle";
type CustomSelectProps = {
items: MinifiedData[] | [];
@ -22,17 +24,6 @@ export const CustomSelect: FC<CustomSelectProps> = ({ items, selectedItemId, set
setOpened((isOpened) => !isOpened);
}, []);
const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const scrollHeight = e.currentTarget.scrollHeight;
const scrollTop = e.currentTarget.scrollTop;
const clientHeight = e.currentTarget.clientHeight;
const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9;
if (scrolledToBottom) {
handleScroll();
}
}, []);
const currentItem = useMemo(() => items.find((item) => item.id === selectedItemId) || null, [selectedItemId, items]);
const menuItems = useMemo(() => {
@ -149,7 +140,7 @@ export const CustomSelect: FC<CustomSelectProps> = ({ items, selectedItemId, set
MenuProps={{
disablePortal: true,
PaperProps: {
onScroll: onScroll,
onScroll: (e) => determineScrollBottom(e, throttle(handleScroll, 700)),
style: {
zIndex: 2,
maxHeight: "300px",

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

@ -18,6 +18,7 @@ type Props = {
desc: string;
toSettings: () => void;
}
onScrollUsers: () => void;
};
export const DealPerformers: FC<Props> = ({
@ -26,6 +27,7 @@ export const DealPerformers: FC<Props> = ({
handleNextStep,
selectedDealUser,
setSelectedDealPerformer,
onScrollUsers,
titleProps,
}) => {
const theme = useTheme();
@ -52,7 +54,7 @@ export const DealPerformers: FC<Props> = ({
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => {}}
handleScroll={onScrollUsers}
/>
</Box>
<Box

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

@ -22,6 +22,8 @@ type Props = {
desc: string;
toSettings: () => void;
}
onScroll: () => void;
onScrollUsers: () => void;
};
export const PipelineSteps: FC<Props> = ({
@ -32,6 +34,9 @@ export const PipelineSteps: FC<Props> = ({
steps,
selectedStep,
setSelectedStep,
onScroll,
onScrollUsers,
handlePrevStep,
handleNextStep,
@ -59,7 +64,7 @@ export const PipelineSteps: FC<Props> = ({
height: "100%",
overflow: "auto",
zIndex: 3,
width: "100%",
width: "100%",
}}>
<Box sx={{ width: "100%", zIndex: 3 }}>
<ModalTitle
@ -69,7 +74,7 @@ export const PipelineSteps: FC<Props> = ({
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
handleScroll={onScrollUsers}
/>
</Box>
<Box
@ -83,7 +88,7 @@ export const PipelineSteps: FC<Props> = ({
items={steps}
selectedItemId={selectedStep}
setSelectedItem={setSelectedStep}
handleScroll={() => { }}
handleScroll={onScroll}
/>
</Box>
</Box>

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

@ -22,6 +22,8 @@ type Props = {
desc: string;
toSettings: () => void;
}
onScroll: () => void;
onScrollUsers: () => void;
};
export const Pipelines: FC<Props> = ({
@ -33,6 +35,8 @@ export const Pipelines: FC<Props> = ({
users,
selectedDealUser,
setSelectedDealPerformer,
onScroll,
onScrollUsers,
handlePrevStep,
handleNextStep,
@ -67,7 +71,7 @@ export const Pipelines: FC<Props> = ({
items={users}
selectedItemId={selectedDealUser}
setSelectedItem={setSelectedDealPerformer}
handleScroll={() => { }}
handleScroll={onScrollUsers}
/>
</Box>
<Box
@ -81,7 +85,7 @@ export const Pipelines: FC<Props> = ({
items={pipelines}
selectedItemId={selectedPipeline}
setSelectedItem={setSelectedPipeline}
handleScroll={() => { }}
handleScroll={onScroll}
/>
</Box>
</Box>

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

@ -25,6 +25,7 @@ type Props = {
title: string;
toSettings: () => void;
}
onScroll: () => void;
};
export type QuestionPair = {
question: string,
@ -48,6 +49,7 @@ export const AmoQuestions: FC<Props> = ({
openDelete,
FieldsAllowedFC,
setSelectedCurrentFields,
onScroll,
titleProps,
}) => {
const [isSelection, setIsSelection] = useState<boolean>(false);
@ -167,18 +169,10 @@ export const AmoQuestions: FC<Props> = ({
selectedField={selectedField}
selectedCurrentFields={selectedCurrentFields}
setSelectedField={setSelectedField}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
activeScope={activeScope}
setIsCurrentFields={setIsCurrentFields}
isCurrentFields={isCurrentFields}
handleScroll={onScroll}
/>
</>
) : (
@ -204,11 +198,28 @@ export const AmoQuestions: FC<Props> = ({
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
largeBtnText={"Сохранить"}
/>
{isSelection && activeScope !== null ?
<StepButtonsBlock
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
largeBtnText={"Добавить"}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
smallBtnText={"Отменить"}
/>
:
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
largeBtnText={"Сохранить"}
/>
}
</Box>
</>
);

52
src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFields.tsx
View File

@ -1,8 +1,8 @@
import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup"
import {Box, Typography, useMediaQuery, useTheme} from "@mui/material"
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
import { MinifiedData } from "../types";
import {CustomSelect} from "@/components/CustomSelect/CustomSelect";
import {CurrentFieldSelect} from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile";
import { CustomSelect } from "@/components/CustomSelect/CustomSelect";
import { CurrentFieldSelect } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/CurrentFieldSelectMobile";
interface Props {
items: MinifiedData[];
@ -11,6 +11,7 @@ interface Props {
currentQuestion: string;
setCurrentField: (value: string) => void;
setCurrentQuestion: (value: string) => void;
handleScroll: () => void;
}
export const CurrentFields = ({
items,
@ -19,6 +20,7 @@ export const CurrentFields = ({
currentQuestion,
setCurrentField,
setCurrentQuestion,
handleScroll,
}: Props) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
@ -53,18 +55,18 @@ export const CurrentFields = ({
{isMobile &&
<CurrentFieldSelect
items={fieldsItems}
selectedItemId={currentField
} setSelectedItem={setCurrentField}
handleScroll={() => { }}/>
selectedItemId={currentField}
setSelectedItem={setCurrentField}
handleScroll={handleScroll} />
}
{!isMobile &&
<CustomRadioGroup
items={fieldsItems}
selectedItemId={currentField}
setSelectedItem={setCurrentField}
handleScroll={() => { }}
activeScope={undefined}
/>
<CustomRadioGroup
items={fieldsItems}
selectedItemId={currentField}
setSelectedItem={setCurrentField}
handleScroll={handleScroll}
activeScope={undefined}
/>
}
</Box>
@ -85,20 +87,20 @@ export const CurrentFields = ({
}}
>Выберите вопрос для этого поля</Typography>
{isMobile &&
<CurrentFieldSelect
items={items}
selectedItemId={currentQuestion}
setSelectedItem={setCurrentQuestion}
handleScroll={() => { }}/>
<CurrentFieldSelect
items={items}
selectedItemId={currentQuestion}
setSelectedItem={setCurrentQuestion}
handleScroll={() => { }} />
}
{!isMobile &&
<CustomRadioGroup
items={items}
selectedItemId={currentQuestion}
setSelectedItem={setCurrentQuestion}
handleScroll={() => { }}
activeScope={undefined}
/>
<CustomRadioGroup
items={items}
selectedItemId={currentQuestion}
setSelectedItem={setCurrentQuestion}
handleScroll={() => { }}
activeScope={undefined}
/>
}
</Box>

29
src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/EntitiesQuestions.tsx
View File

@ -14,9 +14,7 @@ type ItemsSelectionViewProps = {
setSelectedQuestion: (value: string | null) => void;
selectedField?: string | null;
setSelectedField: (value: string | null) => void;
handleScroll?: () => void;
onLargeBtnClick: () => void;
onSmallBtnClick: () => void;
handleScroll: () => void;
activeScope: TagKeys;
FieldsAllowedFC: MinifiedData[];
selectedCurrentFields: MinifiedData[];
@ -31,8 +29,6 @@ export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
selectedField,
setSelectedField,
handleScroll,
onLargeBtnClick,
onSmallBtnClick,
activeScope,
FieldsAllowedFC,
selectedCurrentFields,
@ -41,13 +37,6 @@ export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
}) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
console.log("--------------")
console.log("EntitiesQuestions")
console.log("вопросы")
console.log(items)
console.log("ФК")
console.log(FieldsAllowedFC)
console.log("------------------------------")
return (
<Box
@ -105,6 +94,7 @@ export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
currentQuestion={selectedItemId}
setCurrentField={setSelectedField}
setCurrentQuestion={setSelectedQuestion}
handleScroll={handleScroll}
/>
:
<NewFields
@ -114,21 +104,6 @@ export const EntitiesQuestions: FC<ItemsSelectionViewProps> = ({
/>
}
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={() => {
onLargeBtnClick()
}}
largeBtnText={"Добавить"}
onSmallBtnClick={onSmallBtnClick}
smallBtnText={"Отменить"}
/>
</Box>
</Box>
)
}

17
src/pages/IntegrationsPage/IntegrationsModal/Amo/Questions/ItemsSelectionView/ItemsSelectionView.tsx
View File

@ -9,8 +9,6 @@ type ItemsSelectionViewProps = {
selectedItemId?: string | null;
setSelectedItem: (value: string | null) => void;
handleScroll?: () => void;
onLargeBtnClick: () => void;
onSmallBtnClick: () => void;
activeScope: TagKeys;
};
@ -19,8 +17,6 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
selectedItemId,
setSelectedItem,
handleScroll,
onLargeBtnClick,
onSmallBtnClick,
activeScope,
}) => {
return (
@ -49,19 +45,6 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
activeScope={activeScope}
/>
</Box>
<Box
sx={{
marginTop: "20px",
alignSelf: "end",
}}
>
<StepButtonsBlock
onLargeBtnClick={onLargeBtnClick}
largeBtnText={"Добавить"}
onSmallBtnClick={onSmallBtnClick}
smallBtnText={"Отменить"}
/>
</Box>
</Box>
);
};

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

@ -53,10 +53,11 @@ interface Props {
setSelectedTags: any;
selectedQuestions: any;
setSelectedQuestions: any;
setPageOfPipelines: any;
setPageOfPipelinesSteps: any;
setPageOfUsers: any;
setPageOfTags: any;
setPageOfPipelines: () => void;
setPageOfPipelinesSteps: () => void;
setPageOfUsers: () => void;
setPageOfTags: () => void;
setPageOfFields: () => void;
setSelectedCurrentFields: any;
handleCloseModal: any;
}
@ -86,6 +87,7 @@ export const SwitchPages = ({
setPageOfPipelinesSteps,
setPageOfUsers,
setPageOfTags,
setPageOfFields,
setSelectedCurrentFields,
handleCloseModal,
}: Props) => {
@ -93,6 +95,10 @@ export const SwitchPages = ({
const [specialPage, setSpecialPage] = useState<"deleteCell" | "removeAccount" | "settingsBlock" | "accountInfo" | "amoLogin" | "">(accountInfo ? "accountInfo" : "amoLogin")
const [openDelete, setOpenDelete] = useState<TagQuestionHC | null>(null);
const startDeleteTagQuestion = (itemForDelete) => {
setOpenDelete(itemForDelete)
setSpecialPage("deleteCell")
}
const minifiedQuestions = useMemo(
() =>
@ -160,20 +166,12 @@ export const SwitchPages = ({
if (openDelete.type === "question") {
let newArray = selectedQuestions
newArray[openDelete.scope as QuestionKeys] = newArray[openDelete.scope as QuestionKeys].filter(e => e.id !== openDelete.id)
// let index = -1
// selectedQuestions[openDelete.scope].forEach((e, i) => {
// if (e.subTitle === openDelete.id) index = i
// })
// if (index !== -1) newArray.splice(index, 1);
// setSelectedQuestions((prevState) => ({
// ...prevState,
// [openDelete.scope]: newArray,
// }));
setSelectedQuestions(newArray);
setSelectedCurrentFields(selectedCurrentFields.filter(e => e.id !== openDelete.id));
}
setOpenDelete(null);
closeSpecialPage();
}
const handleNextStep = () => {
@ -259,6 +257,8 @@ export const SwitchPages = ({
desc: "На этом этапе вы можете выбрать нужную воронку и ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
onScroll={setPageOfPipelines}
onScrollUsers={setPageOfUsers}
/>
),
},
@ -280,6 +280,8 @@ export const SwitchPages = ({
desc: "На этом этапе вы можете выбрать нужный этап и ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
onScroll={setPageOfPipelinesSteps}
onScrollUsers={setPageOfUsers}
/>
),
},
@ -298,6 +300,7 @@ export const SwitchPages = ({
desc: "На этом этапе вы можете выбрать ответственного за сделку",
toSettings: () => setSpecialPage("settingsBlock")
}}
onScrollUsers={setPageOfUsers}
/>
),
},
@ -307,8 +310,7 @@ export const SwitchPages = ({
<AmoTags
tagsItems={arrayOfTags}
selectedTags={selectedTags}
openDelete={setOpenDelete}
handleScroll={() => { }}
openDelete={startDeleteTagQuestion}
handleAddTag={handleAddTagQuestion}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
@ -318,6 +320,7 @@ export const SwitchPages = ({
desc: "На этом этапе вы можете добавить теги с результатами",
toSettings: () => setSpecialPage("settingsBlock")
}}
onScroll={setPageOfTags}
/>
),
},
@ -330,7 +333,7 @@ export const SwitchPages = ({
selectedCurrentFields={selectedCurrentFields}
questionsItems={minifiedQuestions}
selectedQuestions={selectedQuestions}
openDelete={setOpenDelete}
openDelete={startDeleteTagQuestion}
handleAddQuestion={handleAddTagQuestion}
handlePrevStep={handlePrevStep}
handleNextStep={handleSave}
@ -340,6 +343,7 @@ export const SwitchPages = ({
title: "Соотнесение вопросов и сущностей",
toSettings: () => setSpecialPage("settingsBlock")
}}
onScroll={setPageOfFields}
/>
),
},
@ -371,7 +375,7 @@ export const SwitchPages = ({
toBack={() => closeSpecialPage()}
setStep={(step: number) => {
closeSpecialPage()
setStep(step)
setStep(step-1)
}}
/>
case "amoLogin": return <AmoLogin handleNextStep={handleNextStep} />
@ -389,26 +393,4 @@ export const SwitchPages = ({
overflow: "auto"
}}>{steps[step].component}</Box>
}
}
// const S = <ModalTitle
// step={1}
// steps={2}
// isSettingsBlock={true}
// setIsSettingsBlock={setIsSettingsBlock}
// setStep={setStep}
// startRemoveAccount={() => setSpecialPage("removeAccount")}
// />
// title: accountInfo ? "Информация об аккаунте" : "Авторизация в аккаунте",
// isSettingsAvailable: false,
// component: accountInfo ? (
// <AmoAccountInfo
// handleNextStep={handleNextStep}
// accountInfo={accountInfo}
// />
// ) : (
// <AmoLogin handleNextStep={handleNextStep} />
// ),
// },
}

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

@ -12,7 +12,6 @@ type Props = {
selectedTags: SelectedTags;
handleAddTag: (scope: QuestionKeys | TagKeys, id: string, type: "question" | "tag") => void;
openDelete: (data: TagQuestionHC) => void;
handleScroll: () => void;
handlePrevStep: () => void;
handleNextStep: () => void;
titleProps: {
@ -21,6 +20,8 @@ type Props = {
desc: string;
toSettings: () => void;
}
onScroll: () => void;
};
export const AmoTags: FC<Props> = ({
@ -28,9 +29,9 @@ export const AmoTags: FC<Props> = ({
selectedTags,
handleAddTag,
openDelete,
handleScroll,
handlePrevStep,
handleNextStep,
onScroll,
titleProps,
}) => {
const [sortedTagsItems, setSortedTagsItems] = useState<MinifiedData[] | []>(tagsItems);
@ -59,14 +60,14 @@ export const AmoTags: FC<Props> = ({
return (
<>
<Box
sx={{
height: "calc( 100% - 70px )",
overflow: "auto"
}}
sx={{
height: "calc( 100% - 70px )",
overflow: "auto"
}}
>
<ModalTitle
{...titleProps}
/>
<ModalTitle
{...titleProps}
/>
<Box
sx={{
display: "flex",
@ -81,21 +82,12 @@ export const AmoTags: FC<Props> = ({
isError={sortedTagsItems.length === 0}
constrictor={startConstrictor}
/>
<ItemsSelectionView
<ItemsSeactiveScopelectionView
items={sortedTagsItems}
selectedItemId={selectedTag}
setSelectedItem={setSelectedTag}
handleScroll={handleScroll}
handleScroll={onScroll}
activeScope={activeScope}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
/>
</>
) : (
@ -115,10 +107,28 @@ export const AmoTags: FC<Props> = ({
alignSelf: "end",
}}
>
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
/>
{
isSelection && activeScope !== null ?
<StepButtonsBlock
onLargeBtnClick={() => {
handleAdd();
setActiveScope(null);
setIsSelection(false);
}}
largeBtnText={"Добавить"}
onSmallBtnClick={() => {
setActiveScope(null);
setIsSelection(false);
}}
smallBtnText={"Отменить"}
/>
:
<StepButtonsBlock
onSmallBtnClick={handlePrevStep}
onLargeBtnClick={handleNextStep}
/>
}
</Box>
</>
);

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

@ -57,6 +57,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
setPageOfPipelinesSteps,
setPageOfUsers,
setPageOfTags,
setPageOfFields,
setSelectedCurrentFields,
} = useAmoIntegration({
quizID: quiz.backendId,
@ -156,6 +157,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({ isModalOpen, handleClo
setPageOfPipelinesSteps={setPageOfPipelinesSteps}
setPageOfUsers={setPageOfUsers}
setPageOfTags={setPageOfTags}
setPageOfFields={setPageOfFields}
setSelectedCurrentFields={setSelectedCurrentFields}
handleCloseModal={handleCloseModal}
/>

229
src/pages/IntegrationsPage/IntegrationsModal/Amo/useAmoIntegration.ts
View File

@ -15,7 +15,7 @@ import {
import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";
import { UntypedQuizQuestion } from "@/model/questionTypes/shared";
const SIZE = 275;
const SIZE = 25;
interface Props {
isModalOpen: boolean;
@ -31,6 +31,13 @@ const FCTranslate = {
"text": "номер",
"address": "адрес",
}
let isReadyGetPipeline = true;
let isReadyGetPipelineStep = true;
let isReadyGetUsers = true;
let isReadyGetTags = true;
let isReadyGetFields = true;
export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, questions }: Props) => {
const [isLoadingPage, setIsLoadingPage] = useState<boolean>(true);
const [firstRules, setFirstRules] = useState<boolean>(false);
@ -102,15 +109,15 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que
if (gottenList !== null) {
Object.keys(gottenList.QuestionID).forEach((qId) => {
const q = questions.find(e=>e.backendId === Number(qId)) || {}
const q = questions.find(e => e.backendId === Number(qId)) || {}
gottenQuestions[key as QuestionKeys].push({
id: qId,
title: q.title,
entity: key,
})
})
})
}
if (key === "Contact") {
@ -154,10 +161,10 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que
useEffect(() => {
const transletedQuestions = {}
Object.keys(selectedQuestions).forEach((column) => {
Object.keys(selectedQuestions)?.forEach((column) => {
selectedQuestions[column].forEach((minifiedData) => {
const q = questions.find(e => e.backendId === Number(minifiedData.id)) || {}
const q = questions.find(e => e.backendId === Number(minifiedData.id)) || {}
transletedQuestions[column] = {
...minifiedData,
title: q.title || transletedQuestions[column].title
@ -169,115 +176,142 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que
}, [questions])
useEffect(() => {
getPipelines({
page: pageOfPipelines,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedPipelines: MinifiedData[] = [];
response.items.forEach((step) => {
minifiedPipelines.push({
id: step.AmoID.toString(),
title: step.Name,
});
});
setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]);
setPageOfPipelinesSteps(1);
}
});
}, [pageOfPipelines]);
useEffect(() => {
const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps;
if (selectedPipeline !== null)
getSteps({
page: pageOfPipelinesSteps,
if (isReadyGetPipeline) {
getPipelines({
page: pageOfPipelines,
size: SIZE,
pipelineId: Number(selectedPipeline),
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedSteps: MinifiedData[] = [];
const minifiedPipelines: MinifiedData[] = [];
response.items.forEach((step) => {
minifiedSteps.push({
minifiedPipelines.push({
id: step.AmoID.toString(),
title: step.Name,
});
});
setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]);
setArrayOfPipelines((prevItems) => [...prevItems, ...minifiedPipelines]);
setPageOfPipelinesSteps(1);
} else {
isReadyGetPipeline = false
}
});
}
}, [pageOfPipelines]);
useEffect(() => {
if (isReadyGetPipelineStep) {
const oldData = pageOfPipelinesSteps === 1 ? [] : arrayOfPipelinesSteps;
if (selectedPipeline !== null)
getSteps({
page: pageOfPipelinesSteps,
size: SIZE,
pipelineId: Number(selectedPipeline),
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedSteps: MinifiedData[] = [];
response.items.forEach((step) => {
minifiedSteps.push({
id: step.AmoID.toString(),
title: step.Name,
});
});
setArrayOfPipelinesSteps([...oldData, ...minifiedSteps]);
} else {
isReadyGetPipelineStep = false
}
});
}
}, [selectedPipeline, pageOfPipelinesSteps]);
useEffect(() => {
getUsers({
page: pageOfUsers,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedUsers: MinifiedData[] = [];
if (isReadyGetUsers) {
getUsers({
page: pageOfUsers,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedUsers: MinifiedData[] = [];
response.items.forEach((step) => {
minifiedUsers.push({
id: step.amoUserID.toString(),
title: step.name,
response.items.forEach((step) => {
minifiedUsers.push({
id: step.amoUserID.toString(),
title: step.name,
});
});
});
setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]);
}
});
setArrayOfUsers((prevItems) => [...prevItems, ...minifiedUsers]);
} else {
isReadyGetUsers = false
}
});
}
}, [pageOfUsers]);
useEffect(() => {
getTags({
page: pageOfTags,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedTags: MinifiedData[] = [];
if (isReadyGetTags) {
getTags({
page: pageOfTags,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedTags: MinifiedData[] = [];
response.items.forEach((step) => {
minifiedTags.push({
id: step.AmoID.toString(),
title: step.Name,
entity:
step.Entity === "leads"
? "Lead"
: step.Entity === "contacts"
? "Contact"
: step.Entity === "companies"
? "Company"
: "Customer",
response.items.forEach((step) => {
minifiedTags.push({
id: step.AmoID.toString(),
title: step.Name,
entity:
step.Entity === "leads"
? "Lead"
: step.Entity === "contacts"
? "Contact"
: step.Entity === "companies"
? "Company"
: "Customer",
});
});
});
setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]);
}
});
setArrayOfTags((prevItems) => [...prevItems, ...minifiedTags]);
} else {
isReadyGetTags = false
}
});
}
}, [pageOfTags]);
useEffect(() => {
getFields({
page: pageOfTags,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedTags: MinifiedData[] = [];
if (isReadyGetFields) {
getFields({
page: pageOfTags,
size: SIZE,
}).then(([response]) => {
if (response && response.items !== null) {
const minifiedTags: MinifiedData[] = [];
response.items.forEach((field) => {
minifiedTags.push({
id: field.AmoID.toString(),
title: field.Name,
entity:
field.Entity === "leads"
? "Lead"
: field.Entity === "contacts"
? "Contact"
: field.Entity === "companies"
? "Company"
: "Customer",
response.items.forEach((field) => {
minifiedTags.push({
id: field.AmoID.toString(),
title: field.Name,
entity:
field.Entity === "leads"
? "Lead"
: field.Entity === "contacts"
? "Contact"
: field.Entity === "companies"
? "Company"
: "Customer",
});
});
});
setArrayOfFields((prevItems) => [...prevItems, ...minifiedTags]);
}
});
setArrayOfFields((prevItems) => [...prevItems, ...minifiedTags]);
}
});
} else {
isReadyGetFields = false
}
}, [pageOfFields]);
useEffect(() => () => {
isReadyGetPipeline = true;
isReadyGetPipelineStep = true;
isReadyGetUsers = true;
isReadyGetTags = true;
isReadyGetFields = true;
}, [])
return {
isLoadingPage,
@ -300,10 +334,11 @@ export const useAmoIntegration = ({ isModalOpen, isTryRemoveAccount, quizID, que
setSelectedTags,
selectedQuestions,
setSelectedQuestions,
setPageOfPipelines,
setPageOfPipelinesSteps,
setPageOfUsers,
setPageOfTags,
setPageOfPipelines: () => setPageOfPipelines(old => old + 1),
setPageOfPipelinesSteps: () => setPageOfPipelinesSteps(old => old + 1),
setPageOfUsers: () => setPageOfUsers(old => old + 1),
setPageOfTags: () => setPageOfTags(old => old + 1),
setPageOfFields: () => setPageOfFields(old => old + 1),
setSelectedCurrentFields,
};
};

10
src/utils/throttle.ts Normal file
View File

@ -0,0 +1,10 @@
export function determineScrollBottom(e: any, callback: any) {
const scrollHeight = e.target.scrollHeight;
const scrollTop = e.target.scrollTop;
const clientHeight = e.target.clientHeight;
const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) >= 0.9;
if (scrolledToBottom) {
callback();
}
}