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

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

Browse Source
This commit is contained in:
Nastya 2024-06-05 18:29:46 +03:00
parent 19e7dab62c
commit c76a4f7c5d
7 changed files with 126 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,12 +15,16 @@ import {
Step,
Tag,
} from "@api/integration";
import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal"
type CustomRadioGroupProps = {
type?: string;
selectedValue: string | null;
setSelectedValue: (value: string | null) => void;
pipelineId?: number | null;
items: TagQuestionObject[]
tags: Tag[]
setTags?: (setValueFunc: (value: Tag[]) => Tag[]) => void;
};
const SIZE = 25;
@ -30,6 +34,9 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
selectedValue,
setSelectedValue,
pipelineId,
items,
tags = [],
setTags,
}) => {
const theme = useTheme();
@ -40,13 +47,15 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
);
const [page, setPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [tags, setTags] = useState<Tag[]>([]);
const [steps, setSteps] = useState<Step[]>([]);
const [pipelines, setPipelines] = useState<Pipeline[]>([]);
const [hasMoreItems, setHasMoreItems] = useState(true);
const boxRef = useRef(null);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log("применился хенделчейндж")
console.log((event.target as HTMLInputElement).value)
setSelectedValue((event.target as HTMLInputElement).value);
setCurrentValue((event.target as HTMLInputElement).value);
};
@ -61,9 +70,12 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
setPage((prevPage) => prevPage + 1);
}
};
console.log(type)
console.log(items)
console.log(type === "typeQuestions" && items && items.length !== 0)
useEffect(() => {
if (type === "typeTags" && hasMoreItems) {
if (type === "typeTags" && hasMoreItems && setTags !== undefined) {
setIsLoading(true);
const pagination: PaginationRequest = {
page: page,
@ -71,7 +83,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
};
getTags(pagination).then(([response]) => {
if (response && response.items !== null) {
setTags((prevItems) => [...prevItems, ...response.items]);
setTags((prevItems:Tag[]) => [...prevItems, ...response.items]);
if (response.items.length < SIZE) {
setHasMoreItems(false);
}
@ -118,9 +130,8 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
if (type === "typeTags" && tags && tags.length !== 0) {
return tags.map((item) => (
<FormControlLabel
key={item.ID}
key={item.AmoID}
sx={{
color: "red",
padding: "15px",
borderBottom: `1px solid ${theme.palette.background.default}`,
display: "flex",
@ -128,11 +139,11 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
borderRadius: "12px",
margin: 0,
backgroundColor:
currentValue === item.Name
currentValue === item.AmoID.toString()
? theme.palette.background.default
: theme.palette.common.white,
}}
value={item.Name}
value={item.AmoID.toString()}
control={
<Radio
checkedIcon={
@ -232,6 +243,46 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
/>
));
}
if (type === "typeQuestions" && items && items.length !== 0) {
return items.map(({ backendId, title }) => (
<FormControlLabel
key={backendId}
sx={{
color: "black",
padding: "15px",
borderBottom: `1px solid ${theme.palette.background.default}`,
display: "flex",
justifyContent: "space-between",
borderRadius: "12px",
margin: 0,
backgroundColor:
currentValue === backendId
? theme.palette.background.default
: theme.palette.common.white,
"&.MuiFormControlLabel-root > .MuiTypography-root": {
width: "200px",
overflow: "hidden",
textOverflow: "ellipsis"
}
}}
value={backendId}
control={
<Radio
checkedIcon={
<CheckboxIcon
checked
isRounded
color={theme.palette.brightPurple.main}
/>
}
icon={<CheckboxIcon isRounded />}
/>
}
label={title}
labelPlacement={"start"}
/>
));
}
return (
<Box
sx={{

12
src/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal.tsx
View File

@ -24,6 +24,10 @@ import { redirect } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
export type TitleKeys = "contacts" | "company" | "deal" | "buyers";
export type TagQuestionObject = {
backendId: string;
title: string;
};
export type TQuestionEntity = Record<TitleKeys, string[] | []>;
type IntegrationsModalProps = {
@ -86,7 +90,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
const [account, error] = await getAccount();
if (error) {
enqueueSnackbar(error)
if (!error.includes("Not Found")) enqueueSnackbar(error)
setAccountInfo(null);
}
if (account) {
@ -97,7 +101,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
const [settingsResponse, error] = await getIntegrationRules(quizID.toString());
if (error) {
enqueueSnackbar(error)
if (!error.includes("Not Found")) enqueueSnackbar(error)
setIntegrationRules(null);
}
if (settingsResponse) {
@ -182,10 +186,10 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
isSettingsAvailable: true,
component: (
<AmoStep6
tags={tags}
tagsNames={tags}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
setTags={setTags}
setTagsNames={setTags}
/>
),
},

21
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/AmoStep6.tsx
View File

@ -4,6 +4,7 @@ import {
FC,
SetStateAction,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
@ -12,33 +13,34 @@ import { TagKeys, TTags } from "../AmoCRMModal";
import Box from "@mui/material/Box";
import { ItemsSelectionView } from "../IntegrationStep7/ItemsSelectionView/ItemsSelectionView";
import { TagsDetailsView } from "./TagsDetailsView/TagsDetailsView";
import { Tag } from "@api/integration";
type Props = {
handleNextStep: () => void;
handlePrevStep: () => void;
tags: TTags;
setTags: Dispatch<SetStateAction<TTags>>;
tagsNames: TTags;
setTagsNames: Dispatch<SetStateAction<TTags>>;
};
export const AmoStep6: FC<Props> = ({
handleNextStep,
handlePrevStep,
tags,
setTags,
tagsNames,
setTagsNames
}) => {
const theme = useTheme();
const [isSelection, setIsSelection] = useState<boolean>(false);
const [activeItem, setActiveItem] = useState<string | null>(null);
const [selectedValue, setSelectedValue] = useState<string | null>(null);
const [tags, setTags] = useState<Tag[]>([]);
const handleAdd = useCallback(() => {
if (!activeItem || !selectedValue) return;
setTags((prevState) => ({
setTagsNames((prevState) => ({
...prevState,
[activeItem]: [...prevState[activeItem as TagKeys], selectedValue],
}));
}, [activeItem, setTags, selectedValue]);
}, [activeItem, setTagsNames, selectedValue]);
const items = useMemo(
() => ["#тег с результатом 1", "#еще один тег с результатом 2", "#тег"],
@ -56,7 +58,8 @@ export const AmoStep6: FC<Props> = ({
>
{isSelection ? (
<ItemsSelectionView
items={items}
parentTags={tags}
setTags={setTags}
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
type={"typeTags"}
@ -75,7 +78,7 @@ export const AmoStep6: FC<Props> = ({
setIsSelection={setIsSelection}
handlePrevStep={handlePrevStep}
handleNextStep={handleNextStep}
tags={tags}
tagsNames={tagsNames}
setActiveItem={setActiveItem}
/>
)}

10
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/TagsDetailsView/TagsDetailsView.tsx
View File

@ -8,14 +8,14 @@ type TagsDetailsViewProps = {
setIsSelection: (value: boolean) => void;
handlePrevStep: () => void;
handleNextStep: () => void;
tags: TTags;
tagsNames: TTags;
setActiveItem: (value: string | null) => void;
};
export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
handlePrevStep,
handleNextStep,
tags,
tagsNames,
setActiveItem,
setIsSelection,
}) => {
@ -68,8 +68,8 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
justifyContent: "start",
}}
>
{tags &&
Object.keys(tags).map((item) => (
{tagsNames &&
Object.keys(tagsNames).map((item) => (
<Item
key={item}
title={item as TagKeys}
@ -77,7 +77,7 @@ export const TagsDetailsView: FC<TagsDetailsViewProps> = ({
setIsSelection(true);
setActiveItem(item);
}}
data={tags}
data={tagsNames}
/>
))}
</Box>

35
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/AmoStep7.tsx
View File

@ -9,9 +9,11 @@ import {
} from "react";
import { ItemsSelectionView } from "./ItemsSelectionView/ItemsSelectionView";
import { ItemDetailsView } from "./ItemDetailsView/ItemDetailsView";
import { TitleKeys, TQuestionEntity } from "../AmoCRMModal";
import { TagQuestionObject, TitleKeys, TQuestionEntity } from "../AmoCRMModal";
import Box from "@mui/material/Box";
import type { AllTypesQuestion } from "@model/questionTypes/shared"
import { getQuestionById } from "@/stores/questions/actions";
import { useQuestionsStore } from "@/stores/questions/store";
type Props = {
handlePrevStep: () => void;
@ -42,10 +44,33 @@ export const AmoStep7: FC<Props> = ({
}));
}, [activeItem, setQuestionEntity, selectedValue]);
const items = useMemo(
() => ["Город", "Имя", "Фамилия", "Отчество", "Контрагент"],
const items: TagQuestionObject[] = useMemo(
() => Object.values(questions)
.filter(({ type }) =>
type !== "result"
&& type !== null)
.map(({ backendId, title }) => ({
backendId: backendId.toString(),
title
})),
[],
);
const translatedQuestionEntity = useMemo(() => {
const translated = {} as TQuestionEntity;
for (let key in questionEntity) {
// /* ... делать что-то с obj[key] ... */
translated[key] = questionEntity[key].map((id) =>
questions.find((q) => q.backendId === Number(id))?.title || id
)
}
console.log("questionEntity", questionEntity)
console.log("translated", translated)
return translated
},
[questionEntity],
)
return (
<Box
@ -59,6 +84,7 @@ export const AmoStep7: FC<Props> = ({
{isSelection ? (
<ItemsSelectionView
items={items}
type="typeQuestions"
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
onSmallBtnClick={() => {
@ -70,14 +96,13 @@ export const AmoStep7: FC<Props> = ({
setActiveItem(null);
setIsSelection(false);
}}
questions={questions}
/>
) : (
<ItemDetailsView
setIsSelection={setIsSelection}
handleLargeBtn={handleNextStep}
handleSmallBtn={handlePrevStep}
questionEntity={questionEntity}
questionEntity={translatedQuestionEntity}
setActiveItem={setActiveItem}
/>
)}

2
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/Item/Item.tsx
View File

@ -12,6 +12,8 @@ type ItemProps = {
export const Item: FC<ItemProps> = ({ title, onAddBtnClick, data }) => {
const theme = useTheme();
console.log("title")
console.log(data)
const titleDictionary = {
contact: "Контакт",
company: "Компания",

12
src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/ItemsSelectionView/ItemsSelectionView.tsx
View File

@ -3,14 +3,18 @@ import { CustomRadioGroup } from "../../../../../components/CustomRadioGroup/Cus
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
import { FC } from "react";
import { AllTypesQuestion } from "@/model/questionTypes/shared";
import type { TagQuestionObject } from "@/pages/IntegrationsPage/IntegrationsModal/AmoCRMModal"
import { Tag } from "@api/integration";
type ItemsSelectionViewProps = {
type?: string;
items: string[];
items?: TagQuestionObject[];
selectedValue: string | null;
setSelectedValue: (value: string | null) => void;
onLargeBtnClick: () => void;
onSmallBtnClick: () => void;
setTags: (setValueFunc: (value: Tag[]) => Tag[]) => void;
parentTags: Tag[]
};
export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
@ -20,7 +24,11 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
onLargeBtnClick,
onSmallBtnClick,
type,
parentTags,
setTags
}) => {
console.log("items тегов")
console.log(items)
return (
<Box
sx={{
@ -42,6 +50,8 @@ export const ItemsSelectionView: FC<ItemsSelectionViewProps> = ({
<CustomRadioGroup
type={type}
items={items}
tags={parentTags}
setTags={setTags}
selectedValue={selectedValue}
setSelectedValue={setSelectedValue}
/>